Bài giảng này giới thiệu về ngôn ngữ HTML trong thiết kế Web. Thông qua chương học này, người học có thể biết về lịch sử của HTML, đặc điểm của HTML, trang web đầu tiên, thẻ TAG trong HTML, thuộc tính (property) của thẻ,... Mời các bạn cùng tham khảo để nắm bắt các nội dung chi tiết.
Ngơn ngӳ HTML Phɞm Thɼ Bɠo Khoa Tốn – Tin h͍c ptbao@hcmus.edu.vn http://www.math.hcmuns.edu.vn/~ptbao/TKW Giӟi thiӋu HTML=HyperText Markup Language – Ngôn ngͯ ÿánh dɢu siêu văn bɠn – Ngôn ngͯ ÿʀ viɼt trang web Do Tim Berner Lee phát minh ÿɉͣc W3C (World Wide Web Consortium) ÿɉa thành chuɦn năm 1994 - Chӭa thành phҫn ÿӏnh dҥng ÿӇ báo cho trình duyӋt Web biӃt cách hiӇn thӏ mӝt trang Web - Mӝt trang web thông thѭӡng gӗm có thành phҫn chính: Dӳ liӋu cӫa trang web (văn bҧn, âm thanh, hình ҧnh ) Các thҿ (tag) HTML dùng ÿӇ ÿӏnh dҥng mô tҧ cách thӭc dӳ liӋu hiӇn thӏ trình duyӋt - ĈӇ ÿӑc ÿѭӧc trang Web phҧi thông qua trình duyӋt Web (Web Browser) Ĉһc ÿiӇm HTML sͭ dͥng thɸ (tags) ÿʀ ÿʈnh dɞng dͯ liʄu HTML không phân biʄt chͯ hoa, chͯ thɉ͝ng Các trình duyʄt thɉ͝ng khơng báo l͗i cú pháp HTML Nɼu viɼt sai cú pháp chʆ dɨn ÿɼn kɼt quɠ hiʀn thʈ không ÿúng v͛i dͱ ÿʈnh Trang web ÿҫu tiên Trang HTML có phɤn m͟ r͙ng (ÿi) HTM hoɴc HTML Có thʀ tɞo trang HTML bɮng bɢt cͩ trình soɞn thɠo “văn bɠn thuɤn” (Notepad, EditPlus,…) Có nhiɾu trình soɞn thɠo HTML cho phép NSD soɞn thɠo trͱc quan, kɼt quɠ sinh HTML tɉɇng ͩng nhɉ: – Microsoft FrontPage – Macromedia Dreamweaver – … Trang web ÿҫu tiên (tt) Soɞn thɠo: – M͟ trình soɞn thɠo văn bɠn thuɤn (VD Notepad) gõ ND dɉ͛i – Ghi lɞi v͛i tên “CHAO.HTM” hay “chao.html” Chào bңn Chào mӭng bңn ÿӁn vӝi HTML! Trang web ÿҫu tiên (tt) Thͭ nghiʄm: – M͟ trình duyʄt web (IE) – Vào File/Open, ch͍n file CHAO.HTM vͫa ghi – Nhɢn OK ĺ Có kɼt quɠ nhɉ hình bên Thay ÿ͕i: – Quay lɞi Notepad, sͭa lɞi n͙i dung trang web r͓i ghi lɞi – Chuyʀn sang IE, nhɢn nút Refresh (F5) ĺ thɢy kɼt quɠ m͛i Ghi chú: Các thɸ ÿɉͣc nêu tiɼp theo mɴc ÿʈnh ÿɴt ͟ phɤn … Soҥn thҧo văn bҧn Văn bɠn ÿɉͣc soɞn thɠo nhɉ bình thɉ͝ng file HTML Lɉu ý: – M͍i khoɠng tr͑ng, dɢu xu͑ng dòng HTML ÿɉͣc thʀ hiʄn trang web khoɠng tr͑ng nhɢt – Ĉʀ gõ m͙t s͑ ký tͱ ÿɴc biʄt ta phɠi sͭ dͥng mã: • Khoɠng tr͑ng (trong trɉ͝ng hͣp mu͑n có nhiɾu hɇn ký tͱ tr͑ng): • Dɢu nh͏ hɇn (): < > • Dɢu ngoɴc kép (“): " • Ký hiʄu : © • … Ghi HTML: Thҿ TAG HTML Có nhiɾu thɸ, m͗i thɸ có tên mang ý nghśa khác Phân loɞi : Có hai loɞi tag - Tag ÿɇn : Là thɸ lʄnh khơng cɤn thɸ kɼt thúc Ví dͥ : Hello < br > < hr > - Tag cɴp : G͓m m͙t cɴp thɸ m͟ ÿóng theo cɢu trúc < tag > … < / tag > Tag kɼt thúc gi͑ng tag bɬt ÿɤu nhɉng có thêm dɢu (/) ͟ phía trɉ͛c Ví dͥ : Ví dͥ :Hello
Trang chͧ - Tag l͓ng : Các tag viɼt l͓ng nhau.Thɸ ÿɉͣc m͟ ÿɤu tiên sɺ ÿɉͣc ÿóng sau Ví dͥ : Phɤn N͙i dung Thu͙c tính (property) cͧa thɸ Nhiɾu tag cịn có thu͙c tính kèm theo M͙t thɸ có thʀ có thu͙c tính nhɮm b͕ sung tác dͥng cho thɸ Thu͙c tính cͧa Tag ÿɉͣc thʀ hiʄn phɞm vi thɸ ÿɤu cͧa tag Cú pháp : … < /Tag > Có thʀ dùng nhiɾu thu͙c tính m͙t tag, phân cách b͟i khoɠng trɬng Ví dͥ : < img src = “logo.gif” > < table border=“1” width=“100%” > < p align=“center”> Hello Welcome ! Option Button (Radio Button) Cho phép ch͍n m͙t lͱa ch͍n m͙t nhóm lͱa ch͍n ÿɉͣc ÿɉa Trên form có thʀ có nhiɾu nhóm lͱa ch͍n kiʀu Thɸ: : M͗i cɤn thɸ Thu͙c tính: – name=“tên_ÿt”: quan tr͍ng Các ÿ͑i tɉͣng tên thu͙c nhóm – type=“radio” – value=“giá trʈ”: ÿây giá trʈ chɉɇng trình sɺ nhɪn ÿɉͣc nɼu NSD ch͍n – checked: nɼu có nút mɴc ÿʈnh ÿɉͣc ch͍n Nút lӋnh (Button) Sͭ dͥng ÿʀ NSD lʄnh thͱc hiʄn cơng viʄc Trên web có loɞi nút: – submit: Tͱ ÿ͙ng lʄnh gͭi dͯ liʄu – reset: ÿɉa m͍i dͯ liʄu vɾ trɞng thái mɴc ÿʈnh – normal: ngɉ͝i lɪp trình tͱ xͭ lý Thɸ: Thu͙c tính: – name=“tên_ĈT”: thɉ͝ng khơng quan tr͍ng – type=“submit”: nút submit – type=“reset”: nút reset – type=“button”: nút thông thɉ͝ng (normal), it sͭ dͥng – value=“tiêu ÿɾ nút” Combo Box (Drop-down menu) Bao g͓m m͙t danh sách có nhiɾu phɤn tͭ Tɞi m͙t th͝i ÿiʀm chʆ có phɤn tͭ ÿɉͣc ch͍n NSD có thʀ ch͍n phɤn tͭ danh sách x͕ xu͑ng bɮng cách kích vào mŸi tên bên phɠi h͙p danh sách Thɸ tɞo h͙p danh sách: Danh sách phɤn tͭ Thu͙c tính: – name=“tên_ĈT”: quan tr͍ng Thɸ tɞo phɤn tͭ danh sách: Tiêu ÿɾ phɤn tͭ Thu͙c tính: – value=“giá trʈ”: giá trʈ chɉɇng trình nhɪn ÿɉͣc nɼu phɤn tͭ ÿɉͣc ch͍n – selected: nɼu có phɤn tͭ mɴc ÿʈnh ÿɉͣc ch͍n Listbox Tɉɇng tͱ nhɉ Combo box, nhiên có thʀ nhìn thɢy nhiɾu phɤn tͭ lúc, có thʀ lͱa ch͍n nhiɾu phɤn tͭ Thɸ: … Thu͙c tính: tɉɇng tͱ cͧa combo nhiên có thu͙c tính khác: – size=“s͑ dịng” – multiple: cho phép lͱa ch͍n nhiɾu phɤn tͭ lúc Thɸ … tɉɇng tͱ cͧa combo box Hӝp nhұp văn bҧn nhiӅu dòng (TextArea) Cho phép nhɪp văn bɠn dài nhiɾu dòng Thɸ: N͙i dung mɴc ÿʈnh Thu͙c tính: – name=“tên_ĈT”: quan tr͍ng – rows=“s͑ dịng” – cols=“s͑ c͙t” rows tính theo s͑ dịng văn bɠn, cols tính theo s͑ ký tͱ chuɦn dịng Khung (Frame) Cho phép chia m͙t trang web làm nhiɾu phɤn, m͗i phɤn chͩa n͙i dung cͧa trang web khác Trình duyʄt có thʀ khơng h͗ trͣ khung Khung (tt) Tɞo trang web chͩa khung: – Thay thɸ … bɮng: khung nӛi dung trѬӟng hӥp trình duyӉt khơng hә trӥ khung Khung (tt) M͙t s͑ thu͙c tính cͧa – rows = “n1, n2, … nk” hoɴc cols = “n1, n2, … nk”: Quy ÿʈnh có k dịng (hoɴc c͙t), ÿ͙ r͙ng dòng (c͙t) thͩ i ni ni s͑, có thʀ thay bɮng *: phɤn cịn lɞi – frameborder = yes hoɴc no – framespacing = “n”: Khoɠng cách giͯa khung Khung (tt) Tɞo khung có n͙i dung trang web ÿó: – Thu͙c tính: • src=“ĈӍa chӋ chӫa nӛi dung” • name=“tên khung” • noresize: Khơng ÿɉͣc thay ÿ͕i kích thɉ͛c Thɸ mɴc ÿʈnh – Thu͙c tính • target=“Cӯa sӗ mҹc ÿӍnh” • href=“ĈӍa chӋ gӓc mҹc ÿӍnh” Ĉa phѭѫng tiӋn Âm nɾn: – Thu͙c tính: • src=“ÿӍa chӋ file âm thanh” • loop=“n”: s͑ lɤn lɴp -1: mɴc ÿʈnh: mãi Ĉa phѭѫng tiӋn (tt) Video IE sͭ dͥng Windows Media Player Mӝt sӕ thҿ meta thông dөng Thɸ : – Ĉɴt ͟ giͯa … – Thɉ͝ng dùng quy ÿʈnh thu͙c tính cho trang web – Có tác dͥng l͛n v͛i Search Engine – cách viɼt thɸ : Mӝt sӕ thҿ meta thông dөng (tt) ... ÿӅ cӱa sә trang Web Chào bңn Chào mӭng bңn ÿӁn vӝi HTML< /U>! < /HTML> Nӝi dung thӇ hiӋn Ý nghƭa thành phҫn < /html> : Ĉӏnh nghƭa... báo l͗i cú pháp HTML Nɼu viɼt sai cú pháp chʆ dɨn ÿɼn kɼt quɠ hiʀn thʈ không ÿúng v͛i dͱ ÿʈnh Trang web ÿҫu tiên Trang HTML có phɤn m͟ r͙ng (ÿi) HTM hoɴc HTML Có thʀ tɞo trang HTML bɮng bɢt cͩ... dɉ͛i – Ghi lɞi v͛i tên “CHAO.HTM” hay “chao .html? ?? Chào bңn Chào mӭng bңn ÿӁn vӝi HTML< /U>! < /html> Trang web ÿҫu tiên (tt) Thͭ nghiʄm: –