giáo trình thiết kế website ngành công nghệ thông tin cao đẳng

Giới thiệu HTML HTML Hyper Text Markup Language là ngôn ngă đánh dÃu, thÅ hiÉn b¿ng các tag gãi là thÁ, nhăng thÁ này giúp cho trình duyÉt đãc đ°ÿc nái dung, có thÅ là text, image, hay

Trang 1

BÞ XÂY DĂNG TR¯âNG CAO ĐÀNG XÂY DĂNG SÞ 1

GIÁO TRÌNH

Trang 2

TUYÊN BÞ BÀN QUYÀN

Tài liÉu này thuác lo¿i sách giáo trình nên các ngußn thông tin có thÅ đ°ÿc phép dùng nguyên bÁn hoặc trích dùng cho các māc đích vÃ đào t¿o và tham khÁo

Mãi māc đích khác mang tính lÉch l¿c hoặc sā dāng vãi māc đích kinh doanh thiÁu lành m¿nh s¿ bá nghiêm cÃm

Trang 3

LâI NÓI ĐÄU

Giáo trình THIÀT KÀ WEBSITE đ°ÿc biên so¿n nh¿m phāc vā cho giÁng d¿y và hãc tÁp cho trình đá Trung cÃp ngành Công nghÉ Thông tin āng dāng phÅn mÃm ç tr°ång Cao đÁng Xây dąng sá 1 THIÀT KÀ WEBSITE là môn hãc chuyên ngành nh¿m cung cÃp các kiÁn thāc vÃ công nghÉ thông tin, kỹ nng thiÁt kÁ, xây dąng mát giao diÉn trang web c¢ bÁn

Giáo trình THIÀT KÀ WEBSITE do bá môn Tin c¢ sç gßm: THS.Đß Thá Xuân Thắm làm chÿ biên đã và đang giÁng d¿y trąc tiÁp trong bá môn cùng tham gia biên so¿n Giáo trình này đ°ÿc viÁt theo đÃ c°¢ng môn hãc thiÁt kÁ web, tuân thÿ theo các quy tắc tháng nhÃt Ngoài ra giáo trình còn bá sung thêm mát sá kiÁn thāc mà trong các giáo trình tr°ãc ch°a đÃ cÁp tãi

Nội dung gồm 4 chương sau:

Ch°¢ng 1 Ngôn ngă HTML Ch°¢ng 2 Giãi thiêu CSS Ch°¢ng 3 JavaScript và Document Object Model (DOM) Ch°¢ng 4 Bootstrap CSS

Trong quá trình biên soạn, nhóm giảng viên Bộ môn Tin cơ sở của Trường Cao đẳng Xây dựng Số 1 - Bộ Xây dựng, đã được sự động viên quan tâm và góp ý của các đồng chí lãnh đạo, các đồng nghiệp trong và ngoài trường

Mặc dù có nhiều cố gắng, nhưng trong quá trình biên soạn, biên tập và in ấn khó tránh khỏi những thiếu sót Chúng tôi xin được lượng thứ và tiếp thu những ý kiến đóng góp

Trân trọng cảm ơn!

Hà Nái, ngày&&tháng&&nm&&& Tham gia biên so¿n

1 ThS Đß Thá Xuân Thắm - Chÿ biên

Trang 4

MĀC LĀC

Ch°¢ng 1: NGÔN NGĂ HTML 1

1.1 Giãi thiÉu HTML 1

1.1.1 Giãi thiÉu HTML 1

1.1.2 Các công cā t¿o trang web 1

1.1.3 CÃu trúc cÿa mát trang web 3

1.2 CÃu trúc mát trang web và thÁ HTML 3

1.2.1 CÃu trúc chung mát trang HTML 4

1.2.2 CÃu trúc c¢ bÁn cÿa mát trang Web 4

Trang 5

2.4 Mát sá thuác tính CSS c¢ bÁn 42

2.4.1 Thuác Tính Cho Vn BÁn Text 42

2.4.2 42

2.4.2 Thuác tính border (đ°ång viÃn) 44

2.4.3 Thuác tính cho toàn khái vn bÁn 48

2.4.4 Đánh nghĩa thuác tính khái 51

4.5 T¿o bá cāc (layout) cho trang web 52

4.6 Mô hình khung (box model) 60

4.7 Mát sá l°u ý khi viÁt CSS 61

Bài tÁp ch°¢ng 4 61

Ch°¢ng 3 JavaScript và Document Object Model (DOM) 69

3.1 Giãi thiÉu JavaScript 69

3.2 Các cách sā dāng JavaScript trong trang web 69

3.3 Ngôn ngă JavaScript 70

3.4 LÁp trình h°ãng đái t°ÿng trong JavaScript 70

3.5 Mô hình đái t°ÿng vn bÁn (DOM) 70

3.5.1 Khái niÉm Dom 70

3.5.2 Phân lo¿i Dom 71

3.5.3 DOM selector 71

3.5.4 LÃy nái dung trong Dom 72

3.6 Các háp tho¿i hÉ tháng trong JavaScript 74

3.6.1 HiÅn thá thông báoJavascript 74

Trang 6

3.6.2 Hàm alert() 74

3.6.3 Hàm Confirm() 74

3.6.4 Hàm Prompt() 75

3.6.5 Time events trong javascript 75

3.7 BiÅu thāc chính qui (regular expression) 76

Trang 7

CH¯¡NG TRÌNH MÔN HàC Tên môn hác: THI¾T K¾ WEBSITE

Mã môn hác: MH20 Thãi gian thăc hißn môn hác: 105 giå; (Lý thuyÁt: 45 giå; Thąc hành, thí nghiÉm,

thÁo luÁn, bài tÁp: 56 giå; KiÅm tra: 4 giå)

II Māc tiêu môn hác:

- VÃ kiÁn thāc: Nắm đ°ÿc mát cách có hÉ tháng các kiÁn thāc c¢ bÁn vÃ thiÁt kÁ và vÁn hành Website; nắm đ°ÿc quy trình thiÁt kÁ Website b¿ng mã ngußn mç WordPress

- VÃ kỹ nng: Ng°åi hãc thiÁt kÁ đ°ÿc Website vãi mã ngußn mç WordPress; tìm kiÁm và sā dāng nhăng công cā có sẵn hß trÿ cho viÉc thiÁt kÁ Website

- VÃ nng ląc tą chÿ và trách nhiÉm: Rèn luyÉn lòng yêu nghÃ, t° thÁ tác phong công nghiÉp, tính kiên trì, sáng t¿o trong công viÉc

III Nßi dung môn hác:

Trang 8

1

CH¯¡NG 1: NGÔN NGĀ HTML

Māc tiêu:

 PhÅn mÃm h°ãng d¿n viÁt code  Trình bày đ°ÿc cú pháp cÿa HTML  CÃu trúc các thÁ HTML

 Thao tác vãi các thÁ c¢ bÁn trong HTML  Thao tác thÁ form, thÁ liên kÁt, thÁ chèn hình Ánh,  Xây dąng đ°ÿc cÃu trúc chung cÿa mát trang web  BiÁt cách tá chāc và t¿o các file html

Nßi dung ch°¢ng: 1.1 Giái thißu HTML

1.1.1 Giới thiệu HTML

HTML (Hyper Text Markup Language) là ngôn ngă đánh dÃu, thÅ hiÉn b¿ng các tag (gãi là thÁ), nhăng thÁ này giúp cho trình duyÉt đãc đ°ÿc nái dung, có thÅ là text, image, hay video, form,& và sau đó trình duyÉt s¿ hiÅn thá nái dung cho ng°åi dùng xem

HTML có khoÁng h¢n 80 thÁ, mßi thÁ có mát nhiÉm vā riêng, tuy nhiên s¿ có nhăng thÁ sā dāng th°ång xuyên và mát sá thÁ ít khi sā dāng

Tài liÉu HTML t¿o thành mã ngußn mç cÿa trang Web Khi đ°ÿc xem trên trình so¿n thÁo , tài liÉu là mát chußi các thÁ các phÅn tā, mà chúng xác đánh trang Web hiÅn thá nh° thÁ nào Trình duyÉt đãc các file tÿ đuôi html hay htm và hiÅn thá trang web theo các lÉnh trong đó

HTML không phÁi là ngôn ngă lÁp trình, html là ngôn ngă đánh dÃu (markup language), ngôn ngă đánh dÃu là mát nhóm các thÁ đánh dÃu tag HTML dùng các thÁ đÅ mô tÁ trang web

T¿i sao phÁi sÿ dāng HTML khi xây dăng trang Web

HTML là ngôn ngă duy nhÃt trình duyÉt có thÅ hiÅu và biên dách đ°ÿc Biên dách có nghĩa là gì? Biên dách là chuyÅn mã ngußn thành nhăng mã ngußn mà chúng ta có thÅ nhìn thÃy TÃt cÁ các trình duyÉt chß có thÅ hiÅu đ°ÿc HTML cho nên dù website xây dąng b¿ng công nghÉ gì đi năa thì đÅu ra v¿n là HTML đÅ đÁm bÁo trình duyÉt có thÅ đãc đ°ÿc

T¿i sao sā dāng các thÁ HTML? Trình duyÉt có khÁ nng biên dách ngôn ngă HTML Dù có chãn ngôn ngă nào thì cũng phÁi đ°a vÃ HTML

CÃu trúc mát trang web Ctrl + U hoặc chuát phÁi xem ngußn s¿ thÃy mã ngußn trang

1.1.2 Các công cā t¿o trang web

Công cā so¿n thao HTML tát phÁi có trình kiÅm tra chính tÁ, sá dòng, tą đáng hoàn thành, xem tr°ãc trang và công cā so¿n thÁo vn bÁn và hình Ánh Có nhiÃu công cā so¿n thÁo: phÅn mÃm NotePad ++, subline text, Visual Studio Code,

Trang 9

2 & Trong bài giÁng này sā dāng công cā Visual Studio Code TÁi công cā t¿i trang https://code.visualstudio.com/Download

Thay đái màu nÃn Visual Stadio code: File/ Preference/ Color Theme/ Chãn Light (Visual Stadio)

Đái font chă Visual Stadio code: File/ Preference/ Settings/ Chán Font size: 16

CÁC B¯àC KHI CH¾Y FILE CODE B°ác 1: Mở file mái: Ân ctrl + N/ L°u file: tên file.html (luôn luôn có

đuôi là html)/ Trong màn hình so¿n thÁo Visual Stadio code: Giă phím Shift + 1 đÅ ra dÃu chÃm than ! (sā dāng phÅn viÁt code là subline text 3 thì gõ <html rßi Ãn phím Enter

 Ân phím tab trên bàn phím s¿ hiÅn thá ra cÃu trúc cÿa trang web

Trong phÅn head sāa nái dung ç thÁ <title>Tên trang web</title> B°ãc 2: Gõ nái dung các thÁ trong phÅn: chú ý các thÁ chß cÅn gõ tên thÁ rßi Ãn Enter s¿ tą đáng ra thÁ đóng cÿa nó Giăa hai thÁ bao giå cũng là nái dung cÅn hiÅn thá cÿa thÁ

B°ác 3: Gõ xong nái dung code/ l°u file: ctrl + S/ B°ác 4: Vào file đã l°u/NhÃp phÁi chuát chãn mát trình duyÉt web

Trang 10

3 Muán gõ chú thích: Gõ nái dung/ bôi đen dòng vn bÁn muán làm ghi chú/ Ãn phím ctrl + /

1.1.3 Cấu trúc của một trang web

 PhÅn thân: phÅn này n¿m sau tiêu đÅ PhÅn thân bắt dÅu b¿ng thÁ <body> và kÁt thúc b¿ng thÁ <body> PhÅn thân gßm nái dung trang web, hình Ánh các liên kÁt muán hiÅn thá trong trang web Liên kÁt đÁn file Javascript

CÃu trúc c¢ bÁn <html>

<head>

<title> Tiêu đÃ trang </title> <! ThÁ liên kÁt đÁn file css >

</head> <body>

<! Chāa tÃt cÁ các thÁ HTML đÅ hiÅn thá nái dung trang web lên trình duyÉt

ThÁ liên kÁt đÁn file Javascript >

</body> </html>

1.2 Cấu trúc một trang web và thẻ HTML

Trang 11

4

1.2.1 Cấu trúc chung một trang HTML

Mßi trang web đÃu có cách thÅ hiÅn cÃu trúc khác nhau, có trang 1 cát, có trang 2 và có trang có chāa nhiÃu cát D°ãi đâu là cÃu trúc c¢ bÁn cÿa mát trang web

 PhÅn đÅu: Header, có thÅ chwuas logo, câu slogan, các liên kÁt, các banner liên kÁt, các button, đo¿n flash, hoặc các form ngắn nh° form tìm kiÁm,&

 PhÅn liên k¿t toàn cāc: global navigation, dùng đÅ chwuas các liên kÁt đÁn nhăng trang quan trãng trong toàn bá trang, trong phÅn này có thÅ chāa thêm các liên kÁt con (sub navigation)

 PhÅn thân cÿa trang: page body, phÅn này chāa nái dung chính (content) và phÅn nái dung phā (sidebar)

 PhÅn nßi dung chính: content, phÅn thÅ hiÉn nái dung chính cÅn thÅ hiÉn cho ng°åi dùng xem

 PhÅn nßi dung phā: sidebar, phÅn này chāa các liên kÁt phā cÿa tÿng trang (local navigation) hoặc các banner chāa các liên kÁt liên quan, hoặc có thÅ dùng đÅ chā các liên kÁt quÁng cáo,&

 PhÅn cußi trang web: Footer, phÅn này chāa phÅn liên hÉ nh° tên công ty, đáa chß, sá điÉn tho¿i, mail liên hÉ, và đặc biÉt là copyright, hoặc chāa các liên kÁt toàn trang, các banner liên kÁt

1.2.2 Cấu trúc cơ bản của một trang Web

Header Global navigation

Footer

1.2.3 Cấu trúc của thẻ HTML

Logo

Trang 12

5 Luôn bắt đÅu b¿ng tên thÁ mç và kÁt thúc mát thÁ đóng Giăa thÁ mç và thÁ đóng thì có <nái dung= Trong nái dung có thÅ là: Ánh, text, video, hoặc các thÁ HTML

Mát thÁ html có thÁ có, không có hoặc nhiÃu thuác tính Thuác tính cÿa thÁ n¿m ç thÁ mç

Chúng ta có thÁ đánh nghĩa thuác tính cÿa thÁ html thÁ ý muán Vi dā <div> number= <1= color= <red=</div>

Ngoài ra mát sá tr°ång hÿp đặc biÉt s¿ không có thÁ đóng và dÃu đóng thÁ n¿m trên chính thÁ mç Ví dā: <br /> ThÁ xuáng dòng

<!DOCTYPE html> <html>

<head>

<body>

Nái dung chính </body>

</html> VÁy ta có thÅ hoàn toàn đánh nghĩa nhăng thÁ ta muán và ta cÅn Quy luÁt thÁ ta chß cÅn nhã tên thÁ là đ°ÿc

Chú ý: Quy luÁt để đßnh nghĩa mßt thẻ html:

- Luôn luôn bắt đÅu b¿ng thÁ mç <thÁ mç> </thÁ đóng> - Tên thÁ đóng và thÁ mç luôn luôn luôn giáng nhau - Thuác tính: Trong 1 thÁ html có thÁ có thuác tính hoặc không có thuác tính

và thuác tính luôn luôn n¿m ç thÁ mç <thÁ mç thuác_tính= <giá trá cÿa thuác tính=> </thÁ đóng>

+ Thuác tính luôn n¿m trên thÁ mç + Có mát, nhiÃu hoặc không có thuác tính + Đặt tên thuác tính tą do mßi thuác tính đÃu có giá trá cho nó

Phân lo¿i thẻ HTML có 3 lo¿i sau:

 Nhóm các thẻ block: các thÁ này dùng đÅ sắp xÁp bá cāc cho trang web Mát sá thÁ block: nhóm thÁ tiêu đÃ <h1>- <h2>- <h3>- <h4>- <h5>- <h6>, <p>, <div>, <ul>, <ol>, <nav>, <header>, <article>, <aside>, <footer>,&

Trang 13

6  Nhóm các thẻ inline: là nhăng thÁ c¢ bÁn nhÃt, chß chāa các thÁ inline cùng cÃp hoặc text Mát sá thÁ inline: thÁ liên kÁt <a>, thÁ chèn hình Ánh <img>, thÁ xuáng dòng <br />, thÁ <span>, thÁ chă đÁm và nhÃn m¿nh <strong>,&

 Thẻ không hiển thß (none): ThÁ meta, thÁ link,

1.2.4 Đơn vị trong HTML và CSS

Các đ¢n vá tuyÉt đái sā dāng gßm có: px: Th°ång đ°ÿc dùng đÅ đánh d¿ng khoÁng cách, chiÃu ráng, chiÃu cao,& pt: Đ¢n vá point và cā 1 ich = 72pt

Đơn vị tương đối

Là các đ¢n vá đo l°ång đ°ÿc sā dāng ç māc t°¢ng đái, nghĩa là nó có thÅ s¿ đ°ÿc thay đái bçi các thành phÅn khác ví dā nh° thay đái phā thuác vào kích th°ãc màn hình

Các đ¢n vß t°¢ng đßi đ°ÿc sÿ dāng trong CSS gßm có:

% (percentages): Là đ¢n vá tham chiÁu tỷ lÉ so vãi mát phÅn tā m¿ cÿa nó dąa vào kích th°ãc Ví dā b¿n có mát cái khung vãi kích th°ãc là 500px và khung bên trong có kích th°ãc là 50% thì nó s¿ là 250px NÁu b¿n sā dāng đ¢n vá phÅn trm này đÅ gán kích th°ãc cho thÁ <html> trên website thì nó s¿ thay đái theo kích th°ãc màn hình hoặc/cāa sá website

em: Th°ång đ°ÿc dùng cho nhăng nái dung có khÁ nng co giãn khi zoom text Ví dā b¿n đặt cho font-size cho phÅn tā m¿ cÿa nó là 19px thì nÁu b¿n sā dāng em trong khu vąc phÅn tā đó thì 1em = 19px

rem: Là đ¢n vá tham chiÁu tỷ lÉ so vãi phÅn tā gác cÿa mát website dąa vào thuác tính font-size, nghĩa là s¿ biÁn đái tùy theo giá trá cÿa thuác tính font-size trong thÁ <html> Cũng nh° rem, nÁu b¿n khai báo font-size cho thÁ<html> là 16px thì 1rem = 16px

1.3 Các thẻ HTML c¢ bÁn

1.3.1 Các thẻ tiêu đề heading (h)

ThÁ <h>: chă <h= viÁt tắt cÿa tÿ <headings= nghĩa là đÃ māc, hoặc tiêu đÃ Sā dāng đÅ đánh nghĩa tiêu đÃ cho nái dung HTML, giúp cho trình duyÉt nhÁn biÁt đ°ÿc tiêu đÃ cÿa mát nái dung ThÁ h có giá trá tÿ <h1> đÁn <h6>, trong đó māc đá quan trong giÁm dÅn tÿ <h1> tãi <h6> (hay tiêu đê lãn nhÃt là <h1> nhß nhÃt là <h6>.)

Cú pháp:

H1 đ¿n H6 <h1> Nßi dung </h1> <h2> Nßi dung </h2> <h3> Nßi dung </h3> <h4> Nßi dung </h4> <h5> Nßi dung </h5>

Trang 14

7

<h6> Nßi dung </h6> Ví dā:

<html>

<head>

<title>Hác lÁp trình HTML</title> </head>

<body>

<h1> Thẻ H1 </h1> <h2> Thẻ H2</h2> <h3> Thẻ H3 </h3> <h4> Thẻ H4 </h4> <h5> Thẻ H5 </h5> <h6> Thẻ H6 </h6> </body>

</html>

ThÁ h1 là thÁ có nái dung chă lãn nhÃt ThÁ h6 có nái dung chă nhß nhÃt Kích th°ãc chă s¿ giÁm dÅn tÿ h1 đÁn h6 và có nét chă màu đÁm ThÁ tiêu đÅ th°ång dùng ç nhăng trang tin tāc ví dā nh° danh sách tin tāc

Vãi chuÇn seo: Nhăng tÿ khóa nên đÅ vào trong thÁ h1 và trên cùng mát trang chß nên xuÃt hiÉn mát thÁ h1 Mát trang có nhiÃu tiêu đÃ th°ång dùng h2 hoặc h3

Ví dā thÁ h1 thêm thuác tính class, name (tên) <h1 class= <Home= name= <tag=> thÁ H1 </H1> VÁy mát thÁ HTML ngoài tên thÁ ra còn có các thuác tính cÿa thÁ, mát thÁ có thÅ có mát, nhiÃu hoặc không có thuác tính ThÁ h1 đÅ hai thuác tính class và name, nhăng thÁ h2, h3, &, h6 không có thuác tính Mát thuác tính cÿa thÁ html luôn luôn n¿m ç thÁ mç

1.3.2 Thẻ văn bản:

Nhāng thẻ thể hißn văn bÁn trong HTML nh° các b¿n đã bi¿t là khi

trình bày nái dung trong mát trang web giáng nh° là trình bày nái dung file word có bên trái, bên d°ãi, bên trên, bên phÁi có gì có nái dung text, có Ánh, có tiêu đÃ có chă in đÁm, in nghiêng, màu cho chă Trong HTML khi dąng giao diÉn cho mát trang HTML nó cũng gÅn t°¢ng tą nh° vÁy nh°ng phúc t¿p h¢n HTML cung cÃp thÁ thÅ hiÉn nôi dung text và nhăng thÁ HTML thÅ hiÉn nái dung vn bÁn

Trang 15

8 + Thẻ in đÁm văn bÁn: ThÁ <strong> Nái dung </strong> và <b> Nái dung

</b>

Đái vãi SEO °u tiên sā dāng thÁ <strong> công cā tìm kiÁm s¿ °u tiên nhăng key word đặt trong thÁ strong Cùng là in đÁm nh°ng nÁu đÅ trong strong thì hiÉu quÁ tìm kiÁm tát h¢n

ThÁ in g¿ch chân (underline) : <u> Nßi dung </u>

ThÁ in nghiêng vn bÁn: <i> Nßi dung </i>

ThÁ thÅ hiÉn font chă và cỡ chă ThÁ font: Cú pháp: <font size = <sß= color==màu=> Nßi dung </font>

ThÁ font có hai thuác tính size: kích th°ãc font chă và color: màu chă ThÁ này tą đáng xuáng dòng không cÅn dùng thÁ xuáng dòng <br />

Chú ý: thÁ p, I, u, font muán xuáng dòng phÁi dùng thÁ br chā trình duyÉt không tą xuáng dòng

ThÁ thÅ hiÉn xóa vn bÁn: <del> Nßi dung</del>

ThÁ xuáng dòng (br): ĐÅ cho vn bÁn xuáng dòng Cú pháp thÁ: <br /> ThÁ br là thÁ không có thÁ đóng DÃu đóng thÁ n¿m ngay trên chính thÁ đó

ThÁ thÅ hiÉn đo¿n vn p (viÁt tắt cÿa tÿ Pargraphs có nghĩa là đo¿n vn) Cú pháp: <p align = <left|right|center=> Nßi dung </p>

Thuộc tính align: cn nái dung bên trong thÁ p gßm có cn trái, cn phÁi và

cn giăa ThÁ <pre> Nái dung </pre>: Giă đ°ÿc fomat cÿa nái dung khi viÁt code

1.3.3 Thẻ pre trong HTML

Thẻ pre: ThÁ này dùng nhiÃu khi debug code, muán xem cÃu trúc mát dă

liÉu hiÅn thá

Cú pháp: <pre> Nßi dung</pre>

Trong HTML có sā dāng bao nhiêu dÃu cách khi gõ thì trình duyÉt cũng chß hiÅu mát dÃu cách

Ví dā:

Khi đÅ nhiÃu dÃu các và xuáng dòng nh°ng trình duyÉt không hiÅu VÁy nên ta đ°a thÁ Pre : thÅ hiÉn đúng nh° chúng ta gõ và thÅ hiÉn đ°ÿc xuáng dòng nh° gõ

Trang 16

9 VÁy thÁ pre là giă nguyên đ°ÿc đánh d¿ng ç trình so¿n thÁo code khi ng°åi dùng gõ code, gõ thÁ nào thì hiÅn thá nh° thÁ ThÁ này dùng nhiÃu khi gỡ lßi

Ví dā:

KÁt quÁ hiÅn thá trên web

1.3.4 Thẻ liên kết a và địa chỉ tương đối – tuyệt đối và các loại liên kết

Đßa chỉ tuyßt đßi và đßa chỉ t°¢ng đßi

ThÁ liên kÁt có ý nghĩa thÁ nào vãi mát trang web HÅu hÁt các trang web khi ta truy cÁp thì muán mç nái dùng hoặc xem hình Ánh hoặc video thì s¿ có mát hành đáng chuyÅn trang khi click vào đái t°ÿng, Ánh, bài viÁt nào đó ĐÅ thąc hiÉn đ°ÿc viÉc chuyÅn trang phÁi dùng đÁn thÁ liên kÁt

Cú pháp: <a href= <= title= <= target= <=>Nßi dung</a>

- href: đáa chß đánh trang đích s¿ chuyÅn đÁn - title: làm rõ nghĩa h¢n cho nái dung hay mô tÁ, chi tiÁt h¢n cho liên kÁt - target: mặc đánh là tráng, nÁu có giá trá_blank: Quy đánh vÃ kiÅu chuyÅn trangmç mát tab mãi và giă nguyên trang cũ Khi không sā dāng target là _blank thì mặc đánh nó ghi đè lên trang cũ

Ví dā:

Trang 17

10 KÁt quÁ trang Web hiÅn thá:

Chú ý: Thông th°ång chß xét đÁn thuác tính là chiÃu ráng hoặc chiÃu cao cÿa Ánh, Xét mát cái nó s¿ tą đáng điÃu chßnh làm cho Ánh khôn bá vỡ NÁu đặt cÁ hai thuác tính thì chú ý chiÃu ráng và cao đÅ cho Ánh cân đái Trÿ khi đá ráng và chiÃu cao đúng

Ví dụ:

Trang 18

11

1.3.6 Thẻ danh sách tuần tự (ol) và bất tuần tự (ul) trong HTML

Thẻ danh sách bÃt tuÅn tă (ul)

Cú pháp: <ul>

<li> Nái dung 1</li> <li> Nái dung 2</li> &

</ul> ThÁ danh sách tuÅn tą (ol) <ol>

<li> Nái dung 1</li> <li> Nái dung 2</li> &

</ol> Hai thÁ khác nhau nh° thÁ nào? Danh sách tuÅn tą s¿ tng tÿ 1 đÁn n, danh sách bÃt tuÅn tą không có thā tą nào nó đ°ÿc thÅ hiÉn b¿ng dÃu chÃm đen Hai thÁ này th°ång đ°ÿc dùng khi chúng ta t¿o menu Đặc biÉt là thÁ bÃt tuÅn tą dùng rÃt nhiÃu đÅ t¿o danh sách menu hoặc danh sách tin tāc

Trang 19

12 Ví dā:

1.3.7 Thẻ với bảng (table)

ThÁ table là thÁ dùng đÅ t¿o bÁng trong html Tr°ãc đây khi ch°a có css thì table là thÁ quan trong đÅ dąng layout trong trang web Ngày nay không sā dāng bÁng đÅ dąng bá cāc cho trang web do dùng rÃt nặng

CÃu trúc cÿa bÁng gßn có dòng (row), cát (column) và các tiêu đÃu heading Giao cÿa dòng và cát là các ô (cell) Sá cát cÿa các dòng luôn b¿ng nhau, nÁu không s¿ bá vỡ

Cú pháp <table border = <= cellpadding = <= width = <= cellspacing = <= >

<tr>

<td> Nßi dung</td> <td>Nßi dung</td> </tr>

<tr>

<td> Nßi dung</td> <td>Nßi dung</td> </tr>

</table> Trong đó: Table: bÁng , tr là dòng, td là cát

Thuộc tính dùng chung cho table, tr (dòng), td(cột)

Trang 20

13 - width: quy đánh đá ráng cÿa bÁng (ít khi dùng cÁ đá ráng và chiÃu cao chß dùng mát trong hai đá ráng hoặc chiÃu cao)

- height: chiÃu cao cÿa bÁng - border: Mặc đánh bÁng có border, nÁu đÅ border = 0 là không có đ°ång viÃn Thąc chÃt là đ°ång viÃn cÿa td

- bgcolor: đánh nghĩa màu nÃn cho bÁng, dòng, hoặc cát - cellspacing: quy đánh khoÁng viÃn bÁng đÁn nái dung bên ngoài - cellpadding: Quy đánh khoÁng cách viÃn bÁng đÁn nái dung bên trong - align: left| center|right Canh lÃ cho bÁng so vãi trình duyÉt: center (giăa), left (trái), right (phÁi) Mặc đánh là n¿m bên trái

Thuộc tính thẻ td:

- valign: Top|bottom| middle Canh nái dung trong ô theo chiÃu dãc Giá trá thuác tính này gßm: top, middle, bottom

Gáp dòng và gáp cát trong table: - Gáp dòng: rowspan = <number= - Gáp cát: colspan = <number= Khi muán trán cát ta phÁi dùng thuác tính colspan Xác đánh đặt thuác tính colspan vào dòng nào và đi tÿ trái sang nÁu gặp cát đÅu tiên tÿ trái sang cát ta cÅn gáp thì ta gáp ç cát đó Và xóa đi cát ngay sau cát đặt colspan

Ví dā

1.3.8 Thẻ Form

Vai trò cÿa thÁ form vãi mát trang web dùng đÅ làm gì? T¿i sao phÁi sā dāng form? BÃt kỳ mát hÉ tháng nào thì form là cáng giao tiÁp duy nhÃt giăa ng°åi dùng và hÉ tháng Ví dā muán gāi ý kiÁn thì phÁi có form gāi đi hoặc vào facebook muán đng ký cÅn phÁi có form đÅ xác thąc thông tin

BiÅu m¿u (html form) đ°ÿc sā dāng khi ta muán thu thÁp dă liÉu tÿ ng°åi dùng ChÁng h¿n khi đng ký tài khoÁn, ng°åi dùng có thÅ nhÁp các thông tin tài khoÁn vào biÅu m¿u nh°: hã tên, sá điÉn tho¿i, email, đáa chß, &

BiÅu m¿u s¿ cho phép nhÁn thông tin đÅu vào tÿ ng°åi dùng và sau đó s¿ gāi thông tin này lên āng dāng web ç phía server là mát back-end application có chāa các mã kách bÁn ç phía server ChÁng h¿n: CGI, ÁP/PHP scropt, & Āng dāng web s¿ thąc hiÉn quá trình xā lý dă liÉu đ°ÿc gāi lên

BiÅu m¿u là mát thành phÅn dùng đÅ chāa và quÁn lý các thành phÅn khác Co nhiÃu thành phÅn cÿa biÅu m¿u đÅ cho ng°åi dùng nhÁp liÉu, ví dā text, fields, textarea, drop-down menus, radio buttons, checkboxes,&

Cung cÃp nhăng thÁ đÅ ng°åi dùng nhÁp dă liÉu vào và c¢ chÁ gāi đi

Cú pháp:

Trang 21

Action: n¢i tiÁp nhÁn dă liÉu mà ng°åi dùng gāi đÁn Method: Ph°¢ng thāc dubmit dă liÉu cÁu form Có 2 method là post và get Target: chß đánh window/frame đích hiÅn thá kÁt quÁ

Enctype: thiÁt lÁp cách thāc trình duyÉt s¿ encode dă liÉu tr°ãc khi gāi lên server

ThÁ cho phÅn nhÁp liÉu cho ng°åi dùngType có các lo¿i (style):

Trang 22

15 + text: ví dā: <input type = <text= name = <username= /> + password: ví dā: <input type = <password= name = <password= /> + email: ví dā: <input type = <email= name = <email= />

+ number: ví dā: <input type = <number= name = <phone= /> + checkbox: ví dā: <input type = <checkbox= name = <fav= /> + radio: ví dā: <input type = <radio= name = <gender= /> + file ví dā: <input type = <file= name = <gender= /> + submit: ví dā: <input type = <submit= name = <btn-submit= /> + reset: ví dā: <input type = <reset= name = <btn-reset= /> ThÁ label: làm rõ h¢n nái dung cÅn phÁi nhÁp cho mát input Ngoài ra không muán dùng thÁ label mà v¿n muán làm rõ thuác tính cÿa thÁ thì ta có thuác tính placeholder = <nái dung= Ví dā <input type = <text= name= <= placeholder = <your email= />

Danh sách ląa chãn <select></select> Danh sách nhÁp ląa chãn: <textarea name= <= id= <= cols = <30= rows = <10=> </textarea>

1.3.9 Thẻ div, span và phân lo¿i các kiểu thẻ trong html

Có bao nhiêu lo¿i thÁ HTML? Có ba lo¿i thÁ HTML KiÅu thÁ HTML

- Kiểu block: mặc đánh là chiÃu ráng là ráng toàn màn hình, chiÃu cao

b¿ng đúng nái dung nó chāa Ví dā thÁ div

- Kiểu inline: có đá ráng b¿ng nái dung nó chāa Ví dā thÁ span

ChiÃu cao cÿa block và inline luôn b¿ng nái dung mà nó chāa - Kiểu None: ThÁ có nái dung nh°ng không hiÅn thá lên trình duyÉt Đ¿i

diÉn là thÁ meta, link (thÁ nhúng file css), script (ThÁ nhúng java script vào trong trang web)

Ví dā kiÅu thÁ <meta charset = <utf-8= /> ThÁ quy đánh chă tiÁng viÉt cho mát trang web

Thẻ div và span:

Cú pháp: <div>Nßi dung</div> <span>Nßi dung</span>

Trang 23

16 Hai thÁ này khác nhau ç điÅm nào? ThÁ div có đá ráng b¿ng đá ráng trình duyÉt (hay mà hình đang ch¿y) chiÃu cao b¿ng chiÃu cao nái dung nó chāa ThÁ span có đá ráng chß b¿ng nái dung nó chāa ChiÃu cao cÿa hai thÁ đÃu b¿ng nái dung nó chāa Hai thÁ div và span đ¿i diÉn cho hai kiÅu thÁ trong html ThÁ div đ¿i diÉn cho kiÅu thÁ hiÅn thá d¿ng block, span đ¿i diÉn cho nhăng thÁ hiÅn thá kiÅu inline

Khi nào dùng div (dąng cÃu trúc chung cho mát trang) khi nào dùng span (tiÅu tiÁt cÿa trang) Ví dā nh°ng conment ç trong nhăng trang tin tāc là hay dùng thÁ span

<header> Đánh nghĩa khu vąc header (phÅn đÅu) cÿa trang <footer> Đánh nghĩa khu vąc footer (phÅn cuái) cÿa trang <main> ThÁ chāa nái dung chính

<nav> Đánh nghĩa link danh māc (navigation) <section> Đánh nghĩa mát khu vąc (vùng bao) <figure> Xác đánh các nái dung liên quan m¿c l¿c vãi nhau nh°

hình Ánh, s¢ đß, code, , nái dung liên quan tãi nái dung chính

BÀI TÀP

BÀI TÀP 01

Trang 24

17 Sā dāng trình so¿n thÁo WEB so¿n thÁo nái dung sau l°u vào th° māc

HTMLCoBan

 Đặt tên là: Wellcome.html  Tiêu đÃ trang web: Welcome to HTML  Encoding: UTF-8

 Mç xem kÁt quÁ trang HTML  Xem Source Code trang web tÿ trình duyÉt  Mç tÁp tin HTML tÿ trình so¿n thÁo và l°u l¿I vãi tên khác là:

Wellcom2.HTML ĐiÃu chßnh nái dung hiÅn thá trong trang (trong phÅn BODY) là: Chúc các b¿n hác tßt ngôn ngā HTML

BÀI TÀP 02 (L°u tÁp tin tên Cohaimo.html)

Sā dāng ngôn ngă HTML so¿n thÁo trang Web có nái dung và đánh d¿ng

theo m¿u

Yêu cÅu:

 Có nái dung thanh tiêu đÃ, đánh d¿ng đÁm, nghiêng, g¿ch chân, g¿ch ngang chă,

 Có phân cách các đo¿n, xuáng dòng cho mßi câu th¢, có câu ghi chú

 Cá đánh nái dung bài th¢ không bá rãt dòng khi đá ráng cāa sá trình duyÉt không đÿ,

H°áng d¿n:

<HTML> <HEAD> <TITLE> Welcome to HTML </TITLE> </HEAD>

<BODY>

ÿ¿n đã đÁ ãă Á Á

Trang 25

18 <head>

<title>cohaimo</title> </head>

<body> <h3>CÔ HÁI M¡</h3> <p> Th¢ thÅn đ°ång chiÃu mát khách th¢,</p> <p>Say nhìn xa tặng núi xanh l¢,</p>

<p>ThÃp thoáng rÿng m¢, <b>Cô hái m¢</b></p> <p> <u>Tác giÁ: </u> <i>Vô danh</i></p>

</body> </html>

BÀI TÀP 03: Sā dāng ngôn ngă HTML so¿n thÁo trang Web có nái dung và

đánh d¿ng theo m¿u Yêu cÅu: bài th¢ sá 1& sā dāng thÁ tiêu đÃ h3

- Dòng 2 sā dāng thÁ chă nghiêng <i> - Tÿ dòng 3 trç đi sā dāng thÁ đánh d¿ng đo¿n <p>

Mßi dòng có sā dāng thÁ xuáng dòng <br>

- Dòng 4, 5 cho chă đÁm - Dòng 7,8 chă nghiêng

H°ãng d¿n: <!DOCTYPE html> <html>

<head>

Trang 26

19 </head>

Xuân đÁn Mai vàng trá khp n¢i <br>

CÅu chúc tÃt cÁ cā t°¢i c°åi <br>

Xin mÿng tÁt gặp niÃm vui mãi <br>

Thánh V°ÿng An Khang hÁt mãi ng°åi <br>

Phúc Lác Tân Niên niÃm h¿nh phúc <br>

Chan hòa quyÁn thuác B¿n bè ¢i <br>

T°ng bÿng rán rã mÿng Xuân tãi <br>

Nā C°åi Ph¢i Phãi Xuân TuyÉt Våi <br>

(Th¢ Tuyet Nhung) </p>

</body> </html>

BÀI TÀP 04: Sā dāng ngôn ngă HTML so¿n thÁo trang Web có nái dung và

b Sÿ dāng thußc tính <font size="14" color= "red"> c Bài th¢ sß 5 dùng thẻ <h3> d Dùng thẻ <b>, <i>, <u>,

<del>, <mark> bôi màu chā

Bài th¢ sß 5: Xuân đÁn Mai vàng trá khắp n¢i CÅu chúc tÃt cÁ cā t°¢i c°åi

Xin mÿng tÁt gặp niềm vui mãi

Thßnh V°ÿng An Khang hÁt mãi

Trang 27

BÀI TÀP 05 (L°u tÁp tin tên: ChisoTrenduoi.htm) Yêu cÅu: Dòng 1 cỡ chă 15px in đÁm

H°áng d¿n: T¿o chỉ sß Trên/D°ái

 <SUP> Văn bÁn </SUP> :  T¿o chß sá trên cho vn bÁn

 <SUB> Văn bÁn </SUB> :  T¿o chß sá d°ãi cho vn bÁn

- Thể hißn danh sách (tuÅn tă & bÃt tuÅn tă) Thẻ danh sách bÃt tuÅn tă

Thẻ danh sách tuÅn tă

Ví dā 3: L°u file: thÁ danh sách ul.html <!DOCTYPE html>

Trang 28

21 <body>

</body> </html> HiÅn thá trên web(làm giáng ví dā 1)

Bài 1: L°u tÉp tin Bài 1 ul html.html  Dòng đÅu cỡ tiêu đÃ H3, màu đß  Các dòng nái dung d¿ng danh sách không đánh sá thā tą Màu xanh

Trang 29

22  Dòng cuái có sā dāng vn bÁn d¿ng chú thích, có màu khác các màu còn l¿i,

sá điÉn tho¿i cho đÁm

H°áng d¿n code:

<!DOCTYPE html> <html lang="en"> <head>

<body> <h3 style="color: red">CH¯¡NG TRÌNH ĐÀO T¾O THIÀT KÀ WEB</h3>

<ul style="color:rgb(7, 124, 17)"> <li>Hãc html, css, javascript</li> <br>

<li>Hãc thiÁt kÁ web đáng PHP</li> <br>

<li>Hãc thiÁt kÁ web vãi C#</li> <br>

<li>Hãc thiÁt kÁ web python</li> <br>

<li>Hãc thiÁt kÁ web vãi Asp net</li> </ul>

Trang 30

23 <p>Mãi thông tin liên hÉ vn phòng đào t¿o tin hãc điÉn tho¿i: <b>0938 333 666</b></p>

</body> </html> b T°¢ng tą thiÁt kÁ theo m¿u sā dāng thÁ <ol>

BÀI TÀP FORM

Bài tÁp 1

<body> <h2>HTML Forms</h2> <form action="/action_page.php"> <label for="fname">First name:</label><br>

<input type="text" id="lname" name="lname"

value="Do"><br><br> <input type="submit" value="Submit">

Trang 31

24 </form> <p> SAU KHI GÕ FIRST NAME VÀ LAST NAME VUI LÒNG ÂN "Submit".</p>

</body> </html>

Bài 2: Sÿ dāng thẻ Select

<title>Chãn select </title> </head>

<body> Tßnh thành <form action=""> <select name="" id=""> <option value="">Hà Nái</option> <option value="">TP Hß Chí Minh</option>

<option value="">HÁi Phòng</option>

<option value="">Nha

Trang 32

25 Trang</option>

<option value="">QuÁng Nam</option>

</select> </form> </body> </html>

Bài 3: Sÿ dāng thẻ checkbox a Hiển thß trên web:

Thąc hiÉn code <!DOCTYPE html> <html>

<head>

<title>form checkbox</title> </head>

<br> <input type="checkbox" name="thethao" value="ĐiÃn kinh"> ĐiÃn kinh

Trang 33

26 <br>

<input type="checkbox" name="thethao" value="CÅu lông"> CÅu lông

<br> <input type="checkbox" name="thethao" value="Võ thuÁt"> Võ thuÁt

</form> </body>

</html> b Thăc hißn hiển thß trên web: Sÿ dāng thẻ form lo¿i dā lißu checkbox và

submit

Bài 4: Sÿ dāng form lo¿i thẻ Radio button

a. HiÅn thá trên web:

Hiển thß code

Trang 34

27 <form>

</body> </html>

Bài 5: Thăc hißn thi¿t k¿ form theo m¿u

H°ãng d¿n code <!DOCTYPE html> <html lang="en"> <head>

<tr> <td>Username</td> <td><input type="text" size="70"></td>

Trang 35

28 </tr>

<tr> <td>Email</td> <td><input type="text" size="70"></td> </tr>

<tr> <td>Password</td> <td><input type="password" size="70"></td> </tr>

<tr> <td>Password(again)</td> <td><input type="password" size="70"></td> </tr>

</table> <input type="submit" value="Đng ký"> <input type="Reset" value="Reset"> </body>

</html>

Bài 6: Sÿ dāng bÁng và thẻ input, textarea, thÁ tiêu đÃ h3, bÁng cn ç giăa, bÁng có đ°ång viÃn theo m¿u:

H°áng d¿n code:

Trang 36

29 <!DOCTYPE html>

</table> </body> </html>

Bài 7: L°u file tên Dangnhap.html

ThiÁt kÁ trang sā dāng form trình bày các đái t°ÿng: text, password, submit, Reset KÁt hÿp bÁng table theo m¿u sau:

Trang 37

30 H°ãng d¿n Code

</tr> <tr> <td> MÁt khÇu</td> <td> <input type="password" placeholder=" NhÁp mÁt khÇu" size="40" name="pass"></td>

</tr>

Trang 38

31 <tr>

</tr> </table> </form> </body> </html> Trong đó : - ThÁ <input> đÅ chúng ta t¿o mát ô đÅ nhÁp vn bÁn vào Các type trong

thÁ <input> phÁi nhÁp đúng giá trá - TÃt cÁ các thÁ phÁi n¿m trong cặp thÁ <form> </form> - Thuác tính action dùng đÅ link đÁn mát trang web khác khi ng°åi dùng nhÁp

vào username + password và nhÃp OK ç ví dā trên là xulyform.html - Method = <post= là thuác tính thông th°ång đ°ÿc sā dāng trong mát form

Ngoài ra có thêm mát sá thuác tính khác nh° Method==get= - Placeholder là đo¿n text s¿ hiÉn ra trong ô nhÁp user và password nh¿m māc

đích h°ãng d¿n ng°åi dùng - Button Reset có type là reset nh¿m khôi phāc l¿i giá trá ban đÅu - Button Ok có type là submit có ý nghĩa là gāi đi

Bài 8: L°u file gopy.html

ThiÁt kÁ trang sā dùng form tao các đái t°ÿng bên trong theo m¿u: Sā dāng bÁng table có 6 hàng 2 cát, bÁng cn giăa trang web

H°áng d¿n:

<!DOCTYPE html>

<html>

Trang 39

32 <head>

</tr> <tr> <td> Hã và tên* </td> <td><input type="text" name="" placeholder="NhÁp hã tên" size="50"></td>

</tr> <tr> <td> Đáa chß</td> <td> <input type="text" name="" size="50"></td> </tr>

<tr> <td> Email</td> <td> <input type="text" name="" size="50"></td> </tr>

</table>

Trang 40

33 </form>

</body> </html>

Bài 9 L°u file là: Thamdoykien.html ThiÁt kÁ trang sā dāng form và kÁt hÿp bÁng table đÅ thiÁt kÁ các đái t°ÿng bên trong theo m¿u:

H°áng d¿n:

<p align="center"> <b> PHIÀU THM DÒ Ý KIÀN </b></p> <label>Tên đng nhÁp</label>

</td>

Tiêu đề	Thiết kế website
Tác giả	Đỗ Thảo Xuân Thắm
Trường học	Trường Cao đẳng Xây dựng Số 1
Chuyên ngành	Công nghệ thông tin
Thể loại	giáo trình
Năm xuất bản	2021
Thành phố	Hà Nội

Định dạng
Số trang	109
Dung lượng	1,92 MB