HTML
I.Gioi thieuHTML là viết tắt củaHyperText Makeup Language(ngôn đánh dấu siêu vănbản).Như các bạn đã biết, mộttrang web dù phức tạp thếnào cũng chỉ là một file text,được lưu dưới phần mở rộnglà .htm hoặc html. Trong filenày bao gồm các đoạn textđược viết theo một qui tắcnhất định nhằm giúp trìnhduyệt có thể đọc được vàhiển thị lên màn hình trìnhduyệt.Nói một cách dễ hiểu, tập tinHTML cũng giống như một filemã nguồn của một ngôn ngữlập trình nào đó (như c, c++,pascal...) được trình dịch dịchthành mã máy và thi hành.II.Cau truc co ban cua mot fileHTML1.Gioi thieu ve the(tag)Nội dung của một tập tin htmlbao gồm các thẻ (tag) đượcbiểu diễn dưới dạng<tênthẻ> (chú ý cặp dấu"<>") dùng để định dạng chomột đối tượng text (đoạnvăn, câu...) hoặc một đốitượng không phải text (hìnhảnh, bảng biểu...).Một thẻ được mở và đóngdưới dạng "<tênthẻ>Nội dungbên trong thẻ</tênthẻ>",trong đó, "nội dung bêntrong thẻ" chính là đoạn textsẽ được hiển thị. Một thẻ cóthể mở nhưng không đóng,ví dụ thẻ dùng để xuốngdòng (nhưng không hếtđoạn): <br>, đường kẻ ngang<hr>... Các thẻ không đóngnày thường là các đối tượngnhư hình ảnh, đối tượngnhúng (embed)...Lưu ý: Thẻ dùng để chèn chúthích (không được hiển thịlên màn hình) có dạng<!-- nội dung chú thích -->.
Một thẻ gồm có các thuộctính (attribute). Các thuộctính này quy định định dạngcủa đối tượng bên trong thẻ.Thuộc tính được viết ngaysau tên thẻ cách tên thẻ vàcách nhau (nếu có nhiềuthuộc tính) bằng một khoảngtrắng. Một thuộc tính có tênthuộc tính và nội dung thuộctính, nội dung thuộc tínhđược viết trong cặp dấu" (hoặc có thể không cần)tên thuộc tính và nội dungthuộc tính đuợc nối với nhaubằng dấu "=". Ví dụ <tênthẻthuộctính1="nộidungthuộctính1"thuộctính2="nộidungthuộctính2">Lưu ý: Một thẻ có thể khôngcó thuộc tính nào hoặc chỉ cóthuộc tính mà không có nộidung.Ví dụ:<p align="center">p: tên thẻalign: tên thuộc tính (ở đâyqui định cách căn lề)center: chỉ tính chất củathuộc tính (ở đây là căngiữa)2. Cấu trúc cơ bản của mộtfile HTMLMột file HTML thường có cấutrúc như sau:<html><head></head><body></body></html>+ Thẻ <html></html>: Thẻ mởđầu cho một file HTML, có thểvắng mặt.+ Thẻ <head>: Thẻ <head>dùng để giới thiệu một sốtính chất của một tập tinHTML, thường bao gồm cácthẻ con sau:-title></title>: Tiêu đề củavăn bản HTML, sẽ được hiểnthị lên thanh tiêu đề củatrình duyệt. Nội dung tiêu đềđược đặt trong cặp thẻ đóngmở. Thẻ này không có thuộctính.-<meta> (không đóng thẻ):Xác định một số thuộc tínhcủa văn bản, tùy theo từngthuộc tính kèm theo và nộidung của từng thuộc tính ấy.Thẻ này không được đóngvà chỉ bao gồm các thuộctính. Ví dụ:><meta http-equiv="content-type" content="text/html;charset=utf-8">: Qui địnhđịnh dạng tập tin và charsetcủa tập tin (tìm hiểu ở phầnsau) (ở đây là tập tin HTMLvới charset là utf-8)><meta name="robots"content="all,follow">: Khiwebsite tìm kiếm (ví dụgoogle...) đọc được tag này,nó sẽ quyết định có lưutrang đó vào cơ sở dữ liệuhay không. Nếu thuộc tínhcontent là "all, follow", nó sẽlưu vào cơ sở dữ liệu, nếuthuộc tính là "noindex,nofollow", nó sẽ không lưuvào.
-
: Dùng đểnhúng các đoạn javascript.-
: Định dạngstyle (tìm hiểu ở phần sau).+ Thẻ
: Đâylà phần thân của tập tinHTML, các đoạn text hoặc đốitượng thường nằm trong thẻnày (có thể nằm ngoài). thẻ
có các thuộc tính nhưbgcolor - định màu nền chovăn bản, background - địnhảnh nền cho văn bản...III.Ngon ngu hien thi charsetThông thường nếu bạn tạomột văn bản HTML có dấuTiếng Việt (hoặc bất kì ngônngữ nào khác), văn bản đósẽ được hiển thị với ngônngữ đó tùy thuộc vào fontchữ mà bạn dùng có hiển thịđược ngôn ngữ đó không.Nếu font chữ đó không hỗtrợ ngôn ngữ mà bạn viết,nội dung sẽ không được hiểnthị chính xác.Các font chữ thường đượcsử dụng trong ngôn ngữHTML là Verdana, Times NewRoman, Arial... Đây là các fontchữ hỗ trợ tiếng ViệtUnicode và một số ngôn ngữkhác. Tuy nhiên, không phảimọi ngôn ngữ nào trên thếgiới cũng được hỗ trợ, đôikhi bạn cần phải cài đặt thêmmột language pack.Nhưng có một vấn đề nảysinh khi thể hiện các kí tựunicode này. Một kí tựunicode trong mã nguồn củatập tin HTML có thể được thểhiện bằng nhiều cách khácnhau, tùy thuộc và cách nộidung của tập tin được mãhóa. Cách mã hóa đó đượcgọi là charset (cái này làtheo mình hiểu). Ví dụ kí tự"ă" trong mã nguồn đượcthể hiện với charsetwindows-1252 (westerneuropean) là "ă", nhưng sẽvẫn là "ă" nếu sử dụngcharset UTF-8. Tuy nhiên,khi sử dụng charset UTF-8để viết mã nguồn nhưngđược giải mã với charsetwindows-1252 sẽ được thểhiện là "ă".Khi thiết kế web sử dụngTiếng Việt, thông thườngcharset utf-8 sẽ được chọnvì các kí tự có dấu sẽ đượcgiữ nguyên cách thể hiệntrong cả mã nguồn lẫn khihiển thị, charsetwindows-1252 cũng được sửdụng nhưng không phổ biếnlắm vì các kí tự có dấu trongmã nguồn sẽ được mã hóavà rất khó để chỉnh sửa mãnguồn, đồng thời cũng gâyra một số vấn đề hiển thịkhông như mong muốn khisử dụng các hộp thoại có sửdụng dấu.Để sử dụng một charset, cầnkhai báo thẻ
có nộidung như sau ngay trong thẻ
Ví dụ, để sử dụng unicode:
IV.Bai tap minh hoaTrước khi thực hiện các bàitập, bạn nên tải sử dụngphần mềm EditPlus để viếtmã nguồn một cách thuậntiện hơn, nếu không cóEditplus, bạn có thể dùngnotepad để thay thế nhưngphải thiết lập font chữ chonotepad là Courier New (hoặcbất cứ font chữ nào có hỗtrợ Tiếng Việt Unicode).Lưu ý khi lưu file vớinotepad: Bạn phải chọnEncoding là UTF-8 (ở khungEncoding)Đối với Editplus, dùngusername và key sau đểđăng kí:1. Mở editplus (hoặc notepad)lên và gõ 1 đoạn có nội dungnhư sau (Lưu ý các kí tựđược mã hóa):
title>Chào các bạn
Xin chào tất cả các bạn đãđến với "HTML cơ bản - Mỗituần một bài học"
Sau đó lưu lại thành filebai1.html và mở lên để quansát cách các kí tự được thểhiện.2. Tương tự, hãy tạo một filekhác và lưu thành filebai2.html, thay charset bằngutf-8 và gõ nội dung bất kìcó dấu rồi mở lên và quansát cách thể hiện.Sau khi mở file bai2.html lên,thử thay đổi encode thànhWestern European và để ýcách các kí tự có dấu đượcthể hiện. (Bằng cách vàoView -> Encoding ->Western European(Windows))3. Tạo một file có tênbai3.html thực hiện các yêucầu sau:+ Hiển thị lên thanh tiêu đềnội dung là "Xin chào".+ Có nội dung là "Xin chàocác bạn, tôi là
".Sử dụng charset là UTF-84.Để định dạng màu nền vàhình nền cho một trang web,nguời ta sử dụng các thuộctính sau cho thẻ
:+ bgcolor: màu nền cho trangweb. Nội dung thuộc tính làcác mã màu.+ background: hình nền chotrang web. Nội dung thuộctính là địa chỉ của hình nền.Yêu cầu: Hãy tạo một trangvới màu nền là xanh duơng(mã màu là #0000ff), mộttrang khác có hình nền bấtkì.