5 CH¯¡NG TRÌNH MÔN HàC nghiãm, thÁo luÁn, bài tÁp: 0 giå; Kißm tra: 2 giå 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ß
Trang 11
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, nm 2021
Trang 22
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 33 LäI NÓI ĐÄU
Giáo trình THI¾T K¾ WEB C¡ BÀN đ°ÿ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 WEB C¡ BÀN là môn hác c¢ sç ngành nhằm cung cÃp các kiÁn thāc về công nghã thông tin, kỹ nng sÿ dāng ngôn ngā lÁp trình đÅu tiên
Giáo trình THI¾T K¾ WEB C¡ BÀN 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 LÁp trình cn bÁn, 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 3 chương sau: Chương 1: Những khái niệm cơ bản Chương 2: Ngôn ngữ HTML
Chương 3: Quy trình xây dựng website 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 44 MĀC LĀC
Ch°¢ng 1: NHĀNG KHÁI NIâM C¡ BÀN 6
1.1 Khái quát chung 6
1.1.1 Xác đßnh māc đích 6
1.1.2 Xây dăng chiÁn l°ÿc thiÁt kÁ 6
1.2 ThiÁt kÁ giao diãn 7
1.2.1 Đặc tính trang Web 7
1.2.2 ThiÁt kÁ giao diãn 9
1.3 ThiÁt kÁ Web 9
1.3.1 Xây dăng cÃu trúc hã thống Website 9
1.3.2 Xác đßnh thß lo¿i trang web (tĩnh - đáng) 13
Ch°¢ng 2 Ngôn ngā HTML 15
2.2 Các công cā t¿o trang web 15
2.3 CÃu trúc cÿa mát trang web 17
2.4 Đßnh nghĩa thông tin chung cÿa trang web 18
2.4.1 CÃu trúc chung cÿa trang web 18
Ch°¢ng 3 Qui trình xây dăng website 50
3.1 Qui trình xây dăng mát website 50
3.2 Mát số vÃn đề cÅn l°u ý khi xây dăng website 51
Bài tÁp tổng hÿp 51
Tài liãu tham khÁo 54
Trang 55
CH¯¡NG TRÌNH MÔN HàC
nghiãm, thÁo luÁn, bài tÁp: 0 giå; Kißm tra: 2 giå)
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); + 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
- 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 - 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
Trang 6Tr°ãc khi xây dăng website cÅn phÁi:
Xác định đối tượng truy cập website: Tuỳ theo đối t°ÿng truy cÁp website
mà thiÁt kÁ hã thống website Lāa tuổi khác nhau thì cách nhìn nhÁn khác nhau Nó s¿ Ánh h°çng đÁn cÃu trúc giao diãn trang web, ngôn từ cũng nh° bố cāc nái dung trang web
Xác định mục đích của website: PhÁi nắm đ°ÿc website chāa đăng nhāng
nái dung gì Nó s¿ cung cÃp nhāng thông tin gì cho đối t°ÿng truy cÁp website Nhāng thông tin nào là chính và thông tin nào là phā
Thiết lập các chủ đề của website: Mßi nhóm thông tin khác nhau mà website
cung cÃp cho đối t°ÿng truy cÁp chính là mát chÿ đề cÿa website Hãy phân chia các chÿ đề cho phù hÿp vãi māc đích cÿa website
Xây dựng các khối thông tin mà website cung cấp theo chủ đề đã xác lập:
PhÁi thu thÁp thông tin và tổ chāc các thông tin đó cho phù hÿp vãi cÃu trúc, giao diãn website và chÿ đề mà trang web đó s¿ cung cÃp cho đối t°ÿng truy cÁp website
Nên bắt đÅu vãi viãc xác đßnh nguồn tài nguyên về nái dung, hình Ánh, thông tin mà chúng ta cÅn đÁn đß t¿o nên website phù hÿp vãi māc đích đặt ra Đây cũng là nguồn thông tin duy trì hã thống website tồn t¿i sau này
1.1.2 Xây dựng chiến lược thiết kế
Mái hình thāc trình bày thông tin đều bß khống chÁ bçi các yÁu tố đ°ÿc xác đßnh bçi māc tiêu cÿa website, bçi môi tr°ång cÿa chúng ta và bçi đối t°ÿng truy cÁp website PhÁi xác đßnh đ°ÿc website truyền tÁi chāa đăng nái dung gì, và vãi nái dung Ãy thì phÁi thiÁt kÁ nh° thÁ nào Hai yÁu tố Ánh h°çng lãn trong thiÁt kÁ chính là cÃu trúc trình bày và thåi gian truy nhÁp trang web PhÁi cân đối giāa hai yÁu tố này vì ng°åi truy cÁp s¿ không thích khi phÁi chå mát trang web tÁi xuống,
Trang 77 và cũng không thích thú gì khi nhìn mát trang web đ¢n điãu Hãy cân đối cÁ hai yÁu tố này cho phù hÿp vãi māc tiêu về đối t°ÿng truy cÁp website
Khi xây dăng hã thống website, cÅn chú ý đÁn đối t°ÿng truy cÁp mà website s¿ cung cÃp thông tin D°ãi đây là mát số thß lo¿i trang web dành cho nhóm các đối t°ÿng truy cÁp website nh°:
Truy cập web ngẫu nhiên (browsing): Nhóm ng°åi truy website cÁp này là
các khách lang thang, không lý do, nhāng ng°åi có thß đác website mà không có bÃt cā să thúc ép nào, hoặc mát ý đßnh nào và nÁu có thì nó rÃt xác đßnh, cā thß Do đó website cũng cÅn chú ý mát chút đÁn đối t°ÿng này vì khi thiÁt kÁ website cÅn phÁi tính đÁn khâu quÁng cáo, công bố website Các trang web tìm kiÁm chính là công cā đß quÁng cáo website Và chính các thẻ META là chìa khóa đß các website tìm kiÁm tìm thÃy website PhÁi chú ý đÁn các từ ngā (các khoá) dành cho các website tìm kiÁm có thß nhÁn ra website
Đào tạo - Dạy học – Giáo dục (education – teaching - training): Nhóm
ng°åi truy cÁp website này là các khách hàng tìm kiÁm thông tin về lĩnh văc đào t¿o Há có rÃt ít thåi gian và th°ång không bao giå đi l¿c đề từ trang giãi thiãu (trang chÿ) Đừng làm há và chính mình bß lán xán bçi các mối liên kÁt ngoài thông tin chÿ chốt CÅn giãi h¿n thông tin bçi các liên kÁt <TiÁp tāc= hay <Quay trç về trang tr°ãc= Điều quan tráng đối vãi website về đào t¿o là tính logic, khoa hác cÿa thông tin, cÿa bài giÁng và phÁi luôn bám sát vào thông tin tráng tâm mà trang web cung cÃp Các bài giÁng th°ång tinh tÁ và có chiều sâu h¢n do đó cÅn phÁi hß trÿ ng°åi truy cÁp sao cho l°ÿng thông tin là phù hÿp và có thß nhāng ng°åi truy cÁp muốn in chính bài giÁng cÿa website đề đác, cÅn cung cÃp cho há mát Ãn bÁn <Print= riêng đß há thuÁn tiãn khi muốn in tài liãu Điều này thß hiãn să quan tâm đÁn há và cũng thß hiãn tính khoa hác cÿa website Tính đa d¿ng về ph°¢ng pháp giÁng d¿y cũng là đißm m¿nh đß thu hút nhóm ng°åi truy cÁp này Chú ý đÁn nhāng ph°¢ng tiãn thß hiãn bài giÁng, minh háa bài giÁng khác nhau nh° Ánh đáng, phim flash, movie hay cÁ nhāng âm thanh thăc khác đß thu hút há
Tham khảo (reference): Các website tham khÁo đ°ÿc thiÁt kÁ tốt sao cho
ng°åi đác nhanh chóng tìm thÃy thông tin mà há cÅn tìm và l°u trā, in Ãn thông tin đó mát cách dá dàng Chú ý đÁn thông tin trình bày ngắn gán, hß trÿ tìm kiÁm nhanh và đặc biãt chú ý đÁn thåi gian tÁi xuống cÿa trang web
1.2.1 Đặc tính trang Web
Ng°åi truy cÁp không chỉ xem thông tin, há t°¢ng tác vãi nó theo mát cách thāc mãi không nh° các tiền lã trong viãc thiÁt kÁ tài liãu giÃy Giao diãn ng°åi dùng đồ ho¿ (GUI) cÿa hã thống, cáng thêm các t°¢ng tác ẩn dā, hình Ánh và các quan niãm đ°ÿc sÿ dāng đß chuyßn tÁi mái tính nng, thông tin lên màn hình, và trÁi qua thåi gian các đặc thù trăc quan cÿa các thành phÅn giao diãn đồ ho¿ và să t°¢ng tác chāc nng hoá đã t¿o nên nét đặc tr°ng <nhìn thÃy và cÁm nhÁn= cÿa các trang web và các liên kÁt hyperlink (siêu liên kÁt) ThiÁt kÁ đồ ho¿ và các hình Ánh <ký hiãu= trăc giác không chỉ đß làm đẹp trang web mà đồ ho¿ trç thành mát thành phÅn đ°ÿc tích hÿp cÿa kinh nghiãm cÿa nhāng ng°åi truy cÁp website Trong các tài liãu có hình Ánh, không thß tách råi viãc thiÁt kÁ đồ ho¿ vãi thiÁt kÁ giao diãn
Trang 88 Các trang web đối lÁp vãi thiÁt kÁ tài liãu thông th°ång Đ¿i đa số nhÁn thāc hiãn t¿i cÿa chúng ta về thông tin có cÃu trúc bắt nguồn từ viãc tổ chāc các quyßn sách, t¿p chí đã đ°ÿc xuÃt bÁn và tuÃn theo nhāng chuẩn măc thiÁt kÁ nhÃt đßnh nh° māc lāc, đánh số trang, chú thích, tiêu đề Trang web cũng vÁy, nó cũng có nhāng chuẩn măc riêng về cách thāc tổ chāc thông tin d°ãi d¿ng <điãn tÿ= Các trang web cÅn đÁm bÁo các đặc tính h°ãng tãi ng°åi dùng: Giao diãn đồ ho¿ ng°åi sÿ dāng (GUI) đ°ÿc thiÁt kÁ nhắm cho ng°åi dùng điều khißn trăc tiÁp máy tính cÿa há mát cách thuÁn tiãn, dá dàng
thăc hiãn t°¢ng tác vãi trang web bằng các liên kÁt hyperlink giāa các tài liãu VÃn đề chÿ yÁu trong thiÁt kÁ giao diãn cÿa các website là ng°åi truy cÁp không ý thāc đ°ÿc há đang ç đâu trong tổ chāc thông tin Các bißu t°ÿng nhÃt quán, dá hißu, các l°ÿc đồ đồ ho¿ đồng nhÃt, màn hình tổng hÿp có thß cho há tin t°çng rằng há có thß tìm thÃy cái há cÅn tìm mà không làm lãng phí thåi gian Ng°åi truy cÁp phÁi luôn có khÁ nng quay trç về trang chÿ và các đißm chÿ chốt trên website Ví dā nh° các liên kÁt t¿o thành Navigation bar
Hình 1.1: Navigation bar + Không có điểm kết thúc: Mái trang nên có ít nhÃt mát liên kÁt Ng°åi truy
cÁp th°ång t°¢ng tác vãi website theo mát h°ãng thẳng sâu Do đó khi đÁn trang cuối cùng, cÅn phÁi cho há cách thāc quay trç l¿i mát vß trí chÿ chốt nào đó ít nhÃt là quay trç l¿i trang chÿ
+ Truy nhập trực tiếp: Cung cÃp cho ng°åi truy cÁp thông tin nhanh nhÃt,
qua ít b°ãc nhÃt (ít mối liên kÁt nhÃt)
+ Tốc độ truy cập: Khi duyãt web, Ánh h°çng lãn tãi să thích thú cÿa ng°åi
truy cÁp không chỉ ç să phong phú về thông tin mà còn cÁ tốc đác truy cÁp trang web CÅn tính đÁn tốc đá đ°ång truyền cÿa m¿ng hiãn t¿i mà thiÁt kÁ cho phù hÿp Nói chung, phÁi cân nhắc giāa tốc đá và să phong phú, đa d¿ng, đẹp mắt
+ Đơn giản và nhất quán: Các bißu t°ÿng đ¢n giÁn, dá hißu giúp cho ng°åi
truy cÁp dá nhã, gây Ãn t°ÿng sâu tãi há Nên chán các bißu t°ÿng gÅn gũi vãi mái ng°åi
+ Tính ổn định: Là đÁm bÁo hã thống website ho¿t đáng ổn đßnh, không lßi,
không gián đo¿n
+ Phản hồi và đối thoại: Là chuẩn bß cho mái să đòi hỏi, các góp ý cÿa
ng°åi truy cÁp Giúp chúng ta cung cÃp thông tin tốt h¢n, phāc vā tốt h¢n cho há
+ Thiết kế cho các trình duyệt khác: PhÁi tính đÁn các trình duyãt web khác
nhau không chỉ Internet Explorer cÿa Windows mà phÁi tính đÁn các trình duyãt khác nh° Netscape, Mosaic
các điều khißn đồ ho¿ và liên kÁt t°¢ng tác trong trang web thu hút să chú ý cÿa ng°åi truy cÁp duyãt trang nh° các điều khißn quay l¿i, tiÁn lên, trang tr°ãc, trang tiÁp
Trang 99
1.2.2 Thiết kế giao diện
Sau khi xác đßnh các đặc tính trên, có thß bắt tay vào thiÁt giao diãn, đặc biãt là giao diãn trang chÿ Có thß sÿ dāng nhiều phÅn mềm thiÁt kÁ khác nhau nh° Adobe Photoshop, Macromedia Firework CÅn chú ý đÁn các thành phÅn cÿa website nh° sau:
+ Trang chủ: là trang đÅu tiên mà ng°åi truy cÁp nhìn thÃy khi truy cÁp
website, do đó trang chÿ đ°ÿc thiÁt kÁ thích hÿp là điều kiãn đi đÁn thành công cÿa website ChiÁn l°ÿc thiÁt kÁ trang chÿ phā thuác vào l°ÿng thông tin, các tổ chāc hã thống website, chāc nng cÿa hã thống website, đối t°ÿng truy cÁp Cũng chú ý đÁn đißm nhÃn, đißm quan trong nhÃt cÿa toàn bá trang là gì? Thông th°ång chỉ nên có mát đißm nhÃn, đißm quan trong nhÃt vì nÁu có quá nhiều đißm quan tráng nhÃt trên trang web thì nó không còn là <nhÃt=
+ Các menu, submenu: Đó là các liên kÁt đÁn các trang nái dung cÿa website Có thß xây dăng menu vn bÁn hay menu đồ ho¿ sao cho phù hÿp vãi cÃu trúc và tốc đá truy cÁp Các menu vn bÁn s¿ giúp cho website tÁi về nhanh h¢n và t¿o thành các <khoá= cho các trang tìm kiÁm khác tìm thÃy trang web trên Internet Khi phân cÃp cho menu, chú ý đừng quá nông hoặc quá sâu
+ Các trang con: Ngoài trang chÿ là trang quan tráng nhÃt trong thiÁt kÁ giao
diãn Trang con cũng góp phÅn đáng kß vào thành công cÿa website Nó truyßn tÁi nái dāng mà website cÅn cung cÃp cho đối t°ÿng truy cÁp Các trang con có thß trç thành trang chÿ cÿa các trang con cÃp d°ãi
+ Các site liên quan: Các website tham khÁo cũng rÃt quan trong đối vãi hã
thống website Nó phÁn ánh să đa d¿ng và phong phú cÿa hã thống website và să chm sóc tÁn tính đối vãi khách hàng
+ Thư viện, phụ lục, chỉ số: Đó là các thông tin liên quan mà website cung
cÃp cho đối t°ÿng truy cÁp, giúp há hißu đ°ÿc các thông tin chính cung cÃp trên trang web
+ Các vấn đề thường gặp – trang FAQ: Là các trang cung liãt kê các câu hỏi
th°ång gặp cÿa ng°åi truy cÁp cùng vãi câu trÁ låi nhằm hß trÿ há mát cách tốt nhÃt Nó giúp giÁm thißu hã thống hß trÿ khách hàng cÿa website Giúp há hißu thông tin và các dßch vā cung cÃp qua website
1.3.1 Xây dựng cấu trúc hệ thống Website
Tồn t¿i nhāng lý thuyÁt có hã thống và c¢ bÁn cho viãc chia nhỏ bÃt cā khối thông tin lãn nào, cho dù nó đ°ÿc đem đi in hay cho WWW C¢ sç cÿa mái hã thống lý luÁn là giãi h¿n cÿa con ng°åi trong viãc l°u trā và nhã l¿i thông tin Theo các nhà tâm lý hác nhÁn thāc, đ¿i đa số chúng ta chỉ có thß l°u trā khoÁng 4 đÁn 7 m¿u thông tin råi r¿c trong trí nhã ngắn h¿n Māc đích cÿa các hã thống tổ chāc là giā số l°ÿng m¿u thông tin mà ng°åi đác cÅn ghi nhã đÁn tối thißu, bằng viãc sÿ dāng kÁt hÿp giāa thiêt kÁ đồ ho¿, quy °ãc lãp và biên tÁp thông tin thành các đ¢n vß riêng r¿ Ph°¢ng pháp đối t°ÿng truy cÁp tìm kiÁm và sÿ dāng thông tin cũng thừa nhÁn, các tin ngắn h¢n, riêng biãt s¿ chāc nng hoá h¢n và dá đßnh vß h¢n không thông tin dài
Trang 1010 Ng°åi truy cÁp ít khi đác các tài liãu dài liên tāc trên màn hình, và đa số há, nhāng ng°åi đi tìm nhāng m¿u thông tin, s¿ rÃt khó chßu khi phÁi rà soát mát trang dài đß tìm thÃy cái mà há cÅn tìm Các đo¿n thông tin nhỏ cÿa thông tin dá tổ chāc thành các khối thông tin riêng đß t¿o nên hã thống nhÃt, hình thành nên c¢ sç cÿa liên kÁt hyperlink
Các bước trong tổ chức thông tin:
+ Chia các thông tin thành các đ¢n vß logic + ThiÁt lÁp hã thống cÃp bÁc theo tÅm quan tráng và tính tổng quát + T¿o cÃu trúc quan hã giāa các thông tin (cÃu trúc website)
+ Phân tích chāc nng và tính thẩm mỹ cÿa hã thống Hã thống phân cÃp thăc să là cÅn thiÁt đối vãi web, vì ý t°çng trang chÿ - liên kÁt phā thuác vào să phân cÃp, di chuyßn từ cái nhìn tổng quát nhÃt cÿa toàn hã thống website, qua các menu và xuống đÁn các trang con (hình 1.2)
Đừng làm nhāng ng°åi truy cÁp l¿c lối vãi cÃu trúc phân cÃp phāc t¿p, không hÿp lý Há s¿ thÃt váng liên miên bçi các khó khn khi tìm thông tin Đừng nên xây dăng mát hã thống website nh° hình 1.3
Hình 1.2: Mô hình cÃu trúc phân cÃp
Trang 1111 Xây dăng cÃu trúc là b°ãc rÃt quan trong cÿa nhà thiÁt kÁ web Có rÃt nhiều cÃu trúc khác nhau trong khi thiÁt kÁ web D°ãi đây là mát số cÃu trúc c¢ bÁn
+ Cấu trúc nối tiếp: Cách đ¢n giÁn nhÃt cÿa hã thống thông tin là tổ chāc
tuÅn tă thông tin theo thåi gian hoặc theo vÅn ABC hoặc theo chÿ ý d¿n dắt nhāng ng°åi truy cÁp Thông tin đ°ÿc nối tiÁp nhau nh° mát bÁn t°ång thuÁt, theo thåi gian, hoặc trong să sắp xÁp logíc nó là ý t°çng cho să luÁn bàn nối tiÁp (hình 1.4)
tr°ång hác hoặc các giÁi nghĩa cho các tr°ång hÿp kỹ thuÁt đ°ÿc tổ chāc tốt nhÃt theo ph°¢ng thāc ô l°ãi Nó là cách tốt nhÃt đß t°¢ng quan giāa các biÁn số nh° să kiãn, công nghã, vn hoá Đß thành công, từng đ¢n vß riêng biãt trong l°ãi nhÃt đßnh phÁi có cÃu trúc cho các chÿ đề lãn và nhỏ Nhāng ng°åi truy cÁp có thß đi tiÁp (dác xuống l°ãi) hay đi ngang (đi ngang l°ãi) Tổ chāc l°ãi có thß gây să khó hißu cho nhāng ng°åi truy cÁp chāng nào há ch°a xác đßnh đ°ÿc mối liên quan giāa các thông tin nh°ng s¿ rÃt tốt cho nhāng ng°åi có kinh nghiãm, nhāng ng°åi đã có sẵn kiÁn thāc về chÿ đề, chÿ đißm và hã thống đó (hình 1.5)
Hình 1.3: Mô hình cÃu trúc m¿ng
Hình 1.4: Mô hình cÃu trúc nối tiÁp
Trang 1212
+ Cấu trúc phân cấp: Să phân câp thông tin là cách tốt nhÃt đß tổ chāc các
khối thông tin phāc t¿p Sắp xÁp phân cÃp rÃt thích hÿp cho đa số các website vì các website luôn đ°ÿc thāc hiãn theo cách r¿ nhánh từ mát trang chÿ duy nhÃt Đa số nhāng ng°åi truy cÁp quen thuác vãi các bißu đồ phân cÃp, há dá dàng xây d°ng bißu đồ lý trí cho cÁ hã thống website (hình 1.6)
+ Cấu trúc mạng nhện: CÃu trúc này là mát cách tổ chāc thông tin tă do, và
nhāng ng°åi truy cÁp cũng tă do tìm kiÁm thông tin, khám phá thông tin CÃu trúc này đác lÁp vãi từng ng°åi truy cÁp Nó t¿o nên să phāc t¿p cÿa hã thống website và dá gây să xáo trán cho ng°åi truy cÁp ít kinh nghiãm l°ãt web (hình 1.7)
Hình 1.5: Mô hình cÃu trúc ô l°ãi
Hình 1.6: Mô hình cÃu trúc phân cÃp
Trang 131.3.2 Xác định thể loại trang web (tĩnh - động)
Hình 1.7: Mô hình cÃu trúc m¿ng nhãn
Hình 1.8: Mô hình cÃu trúc kÁt hÿp
Trang 1414 Cuối cùng là xác đßnh thß lo¿i website Các website có nái dung thông tin cố đßnh, có thß lăa chán xây dăng trang tĩnh (*.html) Các trang này xây dăng đ¢n giÁn và ít tốn kém h¢n các trang đáng Tuy nhiên vãi các trang có să phÁn hồi cÿa ng°åi truy cÁp, bắt buác phÁi chán thß lo¿i trang đáng (*.asp, *.php, *.jsp, ) Và cÁ vãi nhāng hã thống website có thông tin cÅn phÁi cÁp nhÁt th°ång xuyên cũng phÁi chán trang web đáng nh° trang bán hàng, giãi thiãu sÁn phẩm mãi Nói chung, viãc xác đßnh thß lo¿i phā thuác vào thông tin muốn cung cÃp cho ng°åi truy cÁp, māc đích đ°a lên web và cÁ túi tiền nāa CÅn cân nhắc giāa viãc lăa chán thß lo¿i trang web vãi l°ÿng thông tin và tốc đá đ°ÿc truyền và các trang đáng bao giå cũng tÁi về chÁm h¢n các trang tĩnh
Trang 1515
CH¯¡NG 2 NGÔN NGĀ HTML
- PhÅn mền 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
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
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
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 1616 & 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ẻ
<body> </body> B°ãc 3: Gõ xong nái dung code/ l°u file: ctrl + S/
Trang 1717 B°ãc 4: Vào file đã l°u/NhÃp phÁi chuát chán mát trình duyãt web
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 + /
PhÅn HTML: Mái tài liãu HTML phÁi bắt đÅu bằng thẻ mç HTML
<HTML> và kÁt thúc bằng thẻ đóng HTML </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
<! 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>
Trang 1818
</html>
2.4 Đßnh nghĩa thông tin chung cÿa trang web
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
Logo
Trang 1919 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
<input type = <= name = <= /> <hr />
<meta /> Chúng ta có thẻ t¿o ra nhāng thẻ HTML theo ý muốn đó chúng là HTML 5 Ví dā
<!DOCTYPE html> <html>
<head>
<title>Tiêu đề tài liãu</title> [các mô tÁ hoặc liên kÁt dā liãu khác] </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
- 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ó
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 2020
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>.)
Trang 2121
</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:
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
</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>
Trang 2222
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
2.5.3 Thẻ pre trong HTML
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 2323
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 2424
2.5.5 Thẻ chèn hình ảnh IMG
Cú pháp: <img src = <= width = <= height = <= alt= <= />
- src: đ°ång d¿n cÿa mát Ánh - width: Quy đßnh đá ráng cÿa Ánh - height: Quy đßnh chiều cao cÿa Ánh - alt: mô tÁ thông tin chi tiÁt cho mát Ánh trên trang web Đây là thuác tính quan trong trong Seo mô tÁ chi tiÁt trong Ánh Thuác tính này không thß hiãn ra bên ngoài Đối vãi thẻ Ánh mà đ°ång d¿n Ánh sai thì nó s¿ hißn thß alt lên cho ng°åi dùng biÁt đó là Ánh gì
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 2525
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 2626
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ỡ
</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 2727 - 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ā
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 2828
</form>
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>
Có bao nhiêu lo¿i thẻ HTML? Có ba lo¿i thẻ HTML Kißu thẻ HTML
bằng đúng nái dung nó chāa Ví dā thẻ div
Trang 2929 Chiều cao cÿa block và inline luôn bằng nái dung mà nó chāa
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
<meta name = <keyword= content = <Hác lÁp trình web= /> Thẻ meta s¿ hißn thß trên kÁt quÁ tìm kiÁm google Ví dā hác tiÁng anh thì phÅn mô tÁ trang web chính là thẻ meta
Thẻ div và span:
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
Trang 3030 <audio> Đßnh nghĩa âm thanh, nh° nh¿c hay audio khác <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
Sÿ dāng ngôn ngā HTML so¿n thÁo trang Web có nái dung và đßnh d¿ng
theo m¿u
<HTML> <HEAD> <TITLE> Welcome to HTML </TITLE> </HEAD>
<BODY>
ừ¿n đã đÁ ãā Á Á
Trang 3131 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:
<!DOCTYPE html> <html>
<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>
đßnh d¿ng theo m¿u
Trang 3232 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>
<title>Bài 3</title> </head>
<body> <h3> Th¢ chúc Xuân</h3> <p>
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