Bài giảng Thiết kế Web: Ngôn ngữ HTML - Phạm Thế Bảo

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.
Nội dung trích xuất từ tài liệu:
Bài giảng Thiết kế Web: Ngôn ngữ HTML - Phạm Thế BảoNgôn ngӳ HTML Phɞm Thɼ Bɠo Khoa Toán – Tin h͍c ptbao@hcmus.edu.vn http://www.math.hcmuns.edu.vn/~ptbao/TKW Giӟi thiӋu9 HTML=HyperText Markup Language – Ngôn ngͯ ÿánh dɢu siêu văn bɠn – Ngôn ngͯ ÿʀ viɼt các trang web.9 Do Tim Berner Lee phát minh và ÿɉͣc W3C (World Wide Web Consortium) ÿɉa thành chuɦn năm 1994.- Chӭa các thành phҫn ÿӏnh dҥng ÿӇ báo cho trình duyӋt Web biӃtcách hiӇn thӏ mӝt trang Web.- Mӝt trang web thông thѭӡng gӗm có 2 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 các dӳ liӋu trên hiӇn thӏ trên trình duyӋt.- ĈӇ ÿӑc ÿѭӧc trang Web phҧi thông qua trình duyӋt Web (WebBrowser). Ĉһc ÿiӇm9 HTML sͭ dͥng các thɸ (tags) ÿʀ ÿʈnh dɞng dͯ liʄu9 HTML không phân biʄt chͯ hoa, chͯ thɉ͝ng9 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ên9 Trang HTML có phɤn m͟ r͙ng (ÿuôi) là .HTM hoɴc .HTML9 Có thʀ tɞo trang HTML bɮng bɢt cͩ trình soɞn thɠo “văn bɠn thuɤn” nào (Notepad, EditPlus,…)9 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 ra HTML tɉɇng ͩng nhɉ: – Microsoft FrontPage – Macromedia Dreamweaver – … Trang web ÿҫu tiên (tt)9 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)9 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ên9 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͛i9 Ghi chú: Các thɸ ÿɉͣc nêu tiɼp theo mɴc ÿʈnh ÿɴt ͟ trong phɤn … Soҥn thҧo văn bҧn9 Văn bɠn ÿɉͣc soɞn thɠo nhɉ bình thɉ͝ng trong các file HTML9 Lɉu ý: – M͍i khoɠng tr͑ng, dɢu xu͑ng dòng trong HTML ÿɉͣc thʀ hiʄn trên trang web là 1 khoɠng tr͑ng duy 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 1 ký tͱ tr͑ng): • Dɢu nh͏ hɇn (): < > • Dɢu ngoɴc kép (“): • Ký hiʄu ”: © • …9 Ghi chú trong HTML:Thҿ TAG trong HTMLCó nhiɾu thɸ, m͗i thɸ có 1 tên và mang ý nghśa khác nhau1. 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 1 m͙t cɴp thɸ m͟ và ÿó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ͥ : Hello Ví dͥ : Trang chͧ - Tag l͓ng : Các tag viɼt l͓ng nhau.Thɸ ÿɉͣc m͟ ÿɤu tiên sɺ ÿɉͣc ÿóng sau cùng. Ví dͥ : Phɤn N͙i dung 2. 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ó cá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 trong phɞm vi thɸ ÿɤu cͧa tag. Cú pháp : … < /Tag > ƒ Có thʀ dùng nhiɾu thu͙c tính trong m͙t tag, phân cách nhau b͟i khoɠng trɬng. Ví dͥ : < img src = “logo.gif” > < table border=“1” width=“100%” > < p align=“center”> Hello Welcome ! Thuӝc tính (property) cӫa thҿ9 Chú ý: – Có thʀ thay ÿ͕i thͩ tͱ, s͑ lɉͣng các thu͙c tính mà không gây ra l͗i cú pháp – Sͱ h͗ trͣ các thɸ, thu͙c tính ͟ m͗i trình duyʄt là khác nhau. Chʆ gi͑ng nhau ͟ các thɸ, thu͙c tính cɇ bɠn. – Thɸ ÿóng cͧa thɸ có thu͙c tính vɨn viɼt bình thɉ͝ng () Chào bҥn Chào mӯng bҥn ÿӃn vӟi HTML! a2 M 3 CҨU TRÚC TRANG WEBThành phҫn Tiêu ÿӅ cӱa sә trang Web Chào bңn Chào mӭng bңn ÿӁn vӝi HTML! Nӝi dung thӇ hiӋnÝ nghƭa các thành phҫn„ : Ĉӏnh nghƭa phҥm vi cӫa văn bҧn HTML„ : Các mô tҧ vӅ trang HTML. Các thông tin trong tag này không ÿѭӧc hiӇn thӏ trên web.„ : Mô tҧ tiêu ÿӅ trang web.„ : Xác ÿӏnh vùng thân cӫa trang web, nѫi chӭa các thông tin ( Dӳ liӋu , hình ҧnh …)Ĉӏnh dҥng tranga. Font chӳ mһc ÿӏnh cӫa trang web: € Cú pháp : < BASEFONT face= fontName size= fontSize color= textColor> T ...