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

Chia sẻ: Năm Tháng Tĩnh Lặng | Ngày: | Loại File: PDF | Số trang:89

Thêm vào BST

Báo xấu

124
lượt xem 22
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

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

Ngô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Ӌu 9 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Ӄt cá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 (Web Browser).
Ĉһc ÿiӇm 9 HTML sͭ dͥng các thɸ (tags) ÿʀ ÿʈnh dɞng dͯ liʄu 9 HTML không phân biʄt chͯ hoa, chͯ thɉ͝ng 9 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 9 Trang HTML có phɤn m͟ r͙ng (ÿuôi) là .HTM hoɴc .HTML 9 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ên 9 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 9 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ҧn 9 Văn bɠn ÿɉͣc soɞn thɠo nhɉ bình thɉ͝ng trong các file HTML 9 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 HTML Có nhiɾu thɸ, m͗i thɸ có 1 tên và mang ý nghśa khác nhau 1. 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 < 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%” > 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 WEB Thà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 trang a. Font chӳ mһc ÿӏnh cӫa trang web: Cú pháp : < BASEFONT face= fontName size= fontSize color= textColor> Thҿ lӋnh này có tác dөng lên toàn bӝ văn bҧn trong trang web và ÿѭӧc ÿһt trong phҥm vi Tag Thuӝc tính: fontName : Tên font chӳ. fontSize : Size chӳ (tӯ 1 ÿӃn 7). textColor : Màu chӳ. Ví dө :
b. Hình / Màu nӅn mһc ÿӏnh cho trang web: Thuӝc tính cӫa Tag Body < Body text=textColor bgcolor=backgroundColor background= Image leftmargin=lm rightmargin=rm> Thҿ lӋnh này dùng ÿӇ ÿӏnh các thông sӕ hiӇn thӏ trang web nhѭ : màu nӅn, ҧnh nӅn, màu chӳ … Thөôc tính textColor : Màu chӳ. Bgcolor : Màu nӅn trang web. backgroundImage : Ҧnh nӅn trang web. Leftmargin , Rightmargin : LӅ trái phҧi cӫa trang Web. • Ví dө 1: • Ví dө 2:
Thҿ ÿӏnh dҥng ký tӵ 9 Ĉɪm, nghiêng, gɞch chân: …, …, … 9 Chʆ s͑ trên:… 9 Chʆ s͑ dɉ͛i: … 9 Font chͯ: … – Thu͙c tính: • face=“tên font chͯ” • size=“kích thɉ͛c” • color=“màu” – Viɼt bɮng tên tiɼng Anh (red, blue,…) – Viɼt dɞng #RRGGBB, RR, GG, BB ͟ dɞng hexa. Ví dͥ: #FFFFFF: Trɬng, #FF0000: ÿ͏,…
Style chӳ Cú pháp : Công dөng : nӝi dung In ÿұm nӝi dung. … nӝi dung Gҥch dѭӟi nӝi dung. nӝi dung In nghiêng nӝi dung. nӝi dung Gҥch ngang nӝi dung. … nӝi dung Thay ÿәi nӝi dung thành chӳ lӟn … Thay ÿәi nӝi dung thành chӳ nhӓ nӝi dung ChӍ sӕ trên ( SuperScript ) nӝi dung ChӍ sӕ dѭӟi ( SubScript )
Ví dө Vi du kieu chu Vi dө kiӇu chӳ Chӳ in ÿұm Chӳ gҥch chân Chӳ in nghiêng Chӳ gҥch ngang ChӍ sӕ trên X 2 ChӍ sӕ dѭӟi H2O
Tiêu ÿӅ, ÿoҥn văn, ngҳt dòng 9 Tiêu ÿɾ: v͛i kích thɉ͛c nh͏ dɤn – … – … – … Sau m͗i tiêu ÿɾ, văn bɠn tͱ ÿ͙ng xu͑ng dòng – Thu͙c tính: • align=“cách căn chʆnh lɾ”: left, right, center, justify 9 Ĉoɞn văn: … – Thu͙c tính: • align tɉɇng tͱ 9 Ngɬt dòng: