giáo trình thiết kế web ngành công nghệ thông tin trung cấp

+ HiÅu đ°ÿc công dāng cÿa các thÁ HTML ngôn ngă HTML, ngôn ngă XHTML và các lo¿i profile cÿa ngôn ngă này + HiÅu đ°ÿc các b°ãc trong viÉc xây dąng mát website và các vÃn đÃ cÅn l°u ý tro

Trang 1

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

GIÁO TRÌNH

TRÌNH Đà: TRUNG CÂP

Ban hành kèm theo Quyết định số: 368ĐT/QĐ-CĐXD1 ngày 10 tháng

08 năm 2021 của Hiệu trưởng trường CĐXD số 1

Hà Nái, Năm 2021

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À WEB đ°ÿ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À WEB 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À WEB do bá môn Tin c¢ sç gßm: TS.Đß 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 7 chương sau:

Ch°¢ng 1 Giãi thiÉu Internet và dách vā WWW Ch°¢ng 2 Ngôn ngă HTML

Ch°¢ng 3 Qui trình xây dąng website Ch°¢ng 4 Cascading Style Sheet (CSS) Ch°¢ng 5 JavaScript

Ch°¢ng 6 MySQL Ch°¢ng 7 PHP

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: NHĂNG KHÁI NIÈM C¡ BÀN 1

1.1 Giãi thiÉu Internet và dách vā WWW 1

1.2 Các thành phÅn cÿa dách vā WWW 1

1.3 Giao thāc HTTP 1

1.4 Đánh vá tài nguyên trên Internet 1

1.5 Các lo¿i siêu vn bÁn và mô hình dách vā t°¢ng āng 1

Ch°¢ng 2 Ngôn ngă HTML 3

2.1 Giãi thiÉu ngôn ngă HTML 3

2.2 Các công cā t¿o trang web 3

2.3 CÃu trúc cÿa mát trang web 5

2.4 Đánh nghĩa thông tin chung cÿa trang web 5

2.4.1 CÃu trúc chung cÿa trang web 6

Ch°¢ng 3 Qui trình xây dąng website 38

3.1 Qui trình xây dąng mát website 38

3.2 Mát sá vÃn đÃ cÅn l°u ý khi xây dąng website 39

Trang 5

4.3 Các lo¿i bá chãn (selector) 45

4.4 Mát sá thuác tính CSS c¢ bÁn 46

4.4.1 Thuác Tính Cho Vn BÁn Text 46

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

4.4.3 Border và padding 50

4.4.4 53

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

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

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

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

Ch°¢ng 5 JavaScript và Document Object Model (DOM) 72

5.1 Giãi thiÉu JavaScript 72

5.2 Các cách sā dāng JavaScript trong trang web 72

5.3 Ngôn ngă JavaScript 73

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

5.3 Ngôn ngă JavaScript 73

5.4 LÁp trình H°ãng đái t°ÿng trong JavaScript 73

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

5.5.1 Khái niÉm Dom 73

5.5.2 Phân lo¿i Dom 74

5.5.3 DOM selector 74

5.5.4 LÃy nái dung trong Dom 76

5.6 Các háp tho¿i hÉ tháng trong JavaScript 77

5.6.1 HiÅn thá thông báoJavascript 77

5.6.2 Hàm alert() 77

5.6.3 Hàm Confirm() 77

5.6.4 Hàm Prompt() 78

5.6.5 Time events trong javascript 78

5.7 BiÅu thāc chính qui (regular expression) 79

Trang 6

6.4 Các lÉnh đánh nghĩa dă liÉu trên table 89

6.5 Các lÉnh thao tác trên dă liÉu (DML) 89

6.6 Mát sá công cā quÁn lý MySQL miÇn phí 89

6.7 Mát sá nái dung khác liên quan đÁn MySQL 89

Trang 7

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

Mã môn hác: MH15 Thåi gian thăc hián môn hác: 75 giå; (Lý thuyÁt: 15 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:

Hãc xong môn hãc nay, ng°åi hãc có khÁ nng: - KiÁn thāc:

+ HiÅu đ°ÿc kiÁn trúc cÿa Internet, mô hình cÿa các dách vā trên Internet và các thuÁt ngă thông dāng trên Internet

+ HiÅu đ°ÿc công dāng cÿa các thÁ HTML (ngôn ngă HTML), ngôn ngă XHTML và các lo¿i profile cÿa ngôn ngă này

+ HiÅu đ°ÿc các b°ãc trong viÉc xây dąng mát website và các vÃn đÃ cÅn l°u ý trong viÉc xây dąng website

+ HiÅu đ°ÿc cách thāc phân phái mát website lên Internet nh° đng ký tên miÃn, đng ký web hosting

+ BiÁt cách viÁt ch°¢ng trình b¿ng ngôn ngă lÁp trình JavaScript và truy xuÃt mô hình DOM cÿa trang web

+ BiÁt cách nái kÁt vào hÉ quÁn trá CSDL MySQP, t¿o CSDL và truy vÃn dă liÉu trong MySQL

- Kỹ nng: + Có khÁ nng tá chāc xây dąng mát āng dāng web đáng

+ Có khÁ nng phân tích, đánh giá đÅ ląa chãn n¢i đng ký tên miÃn và hosting website phù hÿp

+ Có khÁ nng sā dāng ngôn ngă HTML đÅ t¿o mát trang web + Có khÁ nng sā dāng ngôn ngă CSS đÅ t¿o bá cāc và đánh d¿ng trang web + Có khÁ nng sā dāng ngôn ngă JavaScript và mô hình đái t°ÿng dă liÉu đÅ t¿o các trang web có tính t°¢ng tác bên phía web browser và kiÅm tra tính hÿp lÉ cÿa dă liÉu do ng°åi dāng nhÁp vào

Trang 8

+ Có khÁ nng t¿o các CSDL và truy vÃn dă liÉu trong hÉ quÁn trá CSDL MySQL

+ Có khÁ nng sā dāng ngôn ngă PHP đÅ t¿o các trang web đáng phía server + Có khÁ nng xā dāng AJAX đÅ thąc hiÉn giao tiÁp bÃt đßng bá giăa web browser và web server

+ Có khÁ nng kÁt hÿp các ngôn ngă HTML, JavaScript, CSS, mô hình DOM, hÉ quÁn trá CSDL MySQL, AJAX và ngôn ngă PHP đÅ t¿o mát āng dāng web hoàn chßnh

- VÃ nng ląc tą chÿ và trách nhiÉm:

+ Rèn tính t° duy sáng t¿o trong hãc tÁp, trong công viÉc

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

Trang 9

Internet là mát m¿ng toàn cÅu, kÁt nái các m¿ng máy tính sā dāng bá giao thāc (protocol) TCP/IP

Māc tiêu dùng đÅ trao đái tÉp tin và th° điÉn tā (email), các ho¿t đáng th°¢ng m¿i hóa Mát sá dách vā c¢ bÁn internet: chat, WWW, telnet,&

1.2 Các thành phÅn cÿa dßch vā WWW 1.3 Giao thāc HTTP

Giao thāc HTTP viÁt tắt Hyper Text Transfer Protocol, là giao thāc cÿa dách vā WWW, qui đánh cách thāc giao tiÁp giă web server và wev browser, bao gßm mát tÁp các lÉnh và quy °ãc chung giăa web server và web browser dùng đÅ trao đái dă liÉu, dă liÉu trao đái là các siêu vn bÁn

1.4 Đßnh vß tài nguyên trên Internet URL, viÁt tắt cÿa Uniform Resource Locator (Định vị Tài nguyên thống nhất), đ°ÿc dùng đÅ tham chiÁu tãi tài nguyên trên Internet URL mang l¿i khÁ nng siêu liên kÁt cho các trang m¿ng Các tài nguyên khác nhau đ°ÿc tham chiÁu tãi b¿ng đáa chß, chính là URL, còn đ°ÿc gãi là địa chỉ mạng hay là liên kết

mạng (hay ngắn gãn là liên kết)

1.5 Các lo¿i siêu văn bÁn và mô hình dßch vā t°¢ng āng

Trang 10

2 Siêu vn bÁn là lo¿i vn bÁn tích hÿp nhiÃu d¿ng dă liÉu khác nhau nh° vn bÁn, hình Ánh, âm thanh, video,& và các siêu liên kÁt tãi các siêu vn bÁn khác

Có thÅ thÃy trong khi siêu vn bÁn (tiÁng Anh: hypertext) là lo¿i vn bÁn tích hÿp nhiÃu d¿ng dă liÉu khác nhau nh° vn bÁn, hình Ánh, âm thanh, video,& và các siêu liên kÁt tãi các siêu vn bÁn khác còn trang web là mát siêu vn bÁn đ°ÿc gán đáa chß truy cÁp trên Internet (hay đ°ÿc gãi là đáa chß trang web)

Đặc tr°ng cÿa siêu vn bÁn Siêu vn bÁn là vn bÁn cÿa mát tài liÉu có thÅ đ°ÿc truy tìm không theo tuÅn tą Ng°åi đãc có thÅ tą do đuái theo các dÃu vÁt liên quan qua suát tài liÉu đó b¿ng các mái liên kÁt xác đánh sẵn do ng°åi sā dāng tą lÁp nên

Trong mát môi tr°ång āng dāng siêu vn bÁn thąc są, ng°åi đãc có thÅ trß vào chß tô sáng (highlight) bÃt kì tÿ nào cÿa tài liÉu và tāc khắc nhÁy đÁn nhăng tài liÉu khác có vn bÁn liên quan đÁn nó Cũng có nhăng lÉnh cho phép ng°åi đãc tą t¿o cho riêng mình nhăng dÃu vÁt kÁt hÿp qua suát tài liÉu Các trình āng dāng dùng siêu vn bÁn rÃt hău ích trong tr°ång hÿp phÁi phÁi làm viÉc vãi sá l°ÿng vn bÁn lãn, nh° các bá tÿ điÅn bách khoa và các bá sách nhiÃu tÁp

Siêu vn bÁn có thÅ chß là mát tÿ, tÁp hÿp các tÿ, mát câu, mát đo¿n hoàn chßnh, hình Ánh, Ánh hoặc đ°ÿc bao gßm trong mát video Siêu vn bÁn cho phép ng°åi t¿o nái dung cung cÃp

Mát sá ngôn ngă siêu vn bÁn tiêu biÅu Có thÅ thÃy mát sá ngôn ngă siêu vn bÁn tiêu biÅu gßm có: – HTML (Hypertext Markup Language):

+ Siêu vn bÁn đ°ÿc t¿o khi tác giÁ thêm các lo¿i ký tą vn bÁn cā thÅ vào trang web hoặc tài liÉu Các ký tą này là mát phÅn cÿa ngôn ngă đánh d¿ng đ°ÿc gãi là Ngôn ngă đánh dÃu siêu vn bÁn

+ Ngôn ngă đánh dÃu siêu vn bÁn HTML là lo¿i ngôn ngă dùng đÅ đánh d¿ng dă liÉu TÃt cÁ các trang web b¿n đang duyÉt đÃu đ°ÿc t¿o nên tÿ các thÁ HTML

+ Dù website cÿa b¿n đ°ÿc lÁp trình b¿ng ngôn ngă nào đi năa, thì khi đ°ÿc trÁ vÃ trình duyÉt web, b¿n s¿ chß nhÁn đ°ÿc các mã HTML

+ Ví dā đÅ đánh d¿ng mát đo¿n vn bÁn b¿n sā dāng cặp thÁ , đÅ xuáng dòng b¿n sā dāng thÁ </br> HTML cùng vãi HTTP t¿o nên nÃn móng cÿa mát lo¿i dách vā mà chúng ta gãi là web nh° ngày nay XML (Extensible Markup Language)

– Ngôn ngă đánh dÃu có thÅ mç ráng + Khác vãi HTML, XML không đánh nghĩa bÃt cā thÁ nào cÁ TÃt cÁ các thÁ và ý nghĩa cÿa chúng đÃu do b¿n t¿o ra

+ XML đ°ÿc t¿o ra đÅ xác đánh dă liÉu và do đó đ°ÿc dùng nh° mát công cā đÅ truyÃn tÁi dă liÉu có cÃu trúc giăa các āng dāng, đặc biÉt là āng dāng WEB các kÁt nái dÇ sā dāng đÁn các vá trí khác mà ng°åi đãc hoặc ng°åi xem có thÅ thÃy hău ích hoặc thú vá

Trang 11

3

CH¯¡NG 2 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: 2.1 Giãi thiáu ngôn ngā 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

2.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, & 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

Trang 12

4 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 13

5 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 + /

2.3 CÃu trúc cÿa mát trang web Mát tài liáu HTML gßm ba phÅn c¢ bÁn:

 PhÅn HTML: Mãi tài liÉu HTML phÁi bắt đÅu b¿ng thÁ mç HTML

 PhÅn tiêu đÁ: PhÅn tiêu đÃ bắt đÅu b¿ng thÁ <head> và kÁt thúc bçi thÁ

</head> PhÅn này chāa tiêu đÃ mà đ°ÿc hiÅn thá truên thanh điÃu h°ãng cÿa trang web Tiêu đÃ n¿m trong thÁ <title> và kÁt thúc b¿ng thÁ </title> Liên kÁt vãi file css

 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>

2.4 Đßnh nghĩa thông tin chung cÿa trang web

Trang 14

6

2.4.1 Cấu trúc chung của trang web

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

Header

Global navigation

Footer

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

Luôn bắt đÅu b¿ng tên thÁ mç và kÁt thúc mát thÁ đóng

Logo

Trang 15

7 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 16

8  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, 2.5 Đßnh nghĩa và đßnh d¿ng các thành phÅn nái dung

2.5.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> <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>

Trang 17

9

</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ç

2.5.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

+ 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

Trang 18

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

2.5.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õ 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

Trang 19

11

2.5.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ā:

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

Trang 20

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 21

13

2.5.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

Ví dā:

Trang 22

14

2.5.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 23

15 - 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ā

2.6 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 24

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ó 7 lo¿i (style): + 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>

2.7 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

Trang 25

17 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

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

Trang 26

18 <canvas> Đ°ÿc dùng đÅ hiÅn thá đß hãa <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

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:

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

<BODY>

ÿ¿n đã đÁ ãă Á Á

Trang 27

19  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:

<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

Trang 28

20 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>

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

Trang 29

21 <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ā dòng < Chan hòa quy¿n…= và dòng <Nā cåi=,

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ă)

Trang 30

22

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 31

23 <li>Danh sách 1</li>

</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  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">

Trang 32

24 <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>

<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>

Trang 33

<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">

</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

Trang 34

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

<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</option>

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

</select> </form>

Trang 35

27 </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

<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>

Trang 36

28

</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

<br> <input type="radio" name="gioitinh" value="Khác">Khác

Trang 37

29 </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> </tr>

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

<tr>

Trang 38

30 <td>Password</td>

<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>

Trang 39

31 <body>

</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:

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

Trang 40

32 </head>

</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> <tr> <td colspan="2" align="center"> <input type="reset" name="btreset" value="Reset"> <input type="submit" name="btok" value="OK"> </td>

</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

Tiêu đề	Thiết kế web
Tác giả	Đỗ Thị 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	122
Dung lượng	1,9 MB