Ngôn ngữ HTML

iêuđề, vănbảntựđộng xuống dòng
 –Thuộc tính:
 • align=“cách cănchỉnh lề”: left, right, center, justify
9 Đoạnvăn: …
 –Thuộc tính: 
 • align tương tự 
9 Ngắtdòng: 
 DanhDanh ssááchch
9 Dùng để liệtkêcácphầntử
9 Có 2 loại: Danh sách có thứ tự 1,2,3,… (Ordered 
 List) và không có thứ tự (Unordered List).
9 Mộtdanhsáchgồmcónhiềuphầntử
9 Tạodanhsách:
 –Cóthứ tự: Các phầntử
 – Không có thứ tự: Các phầntử
9 Tạo1 phầntử: Tiêu đề phầntử
9 Mộtphầntử có thể là 1 danh sách con.
 ChChèènn ảảnhnh
9 Thẻ , không có thẻ đóng
 – Các thuộc tính:
 • src=“địa chỉảnh”: Nếu chèn ảnh trong cùng web site thì
 nên sử dụng đường dẫn tương đối.
 • alt=“chú thích cho ảnh”: sẽ được hiển thị khi trình duyệt 
 không hiện ảnh hoặc ảnh lỗi hoặc khi di chuyển chuột lên 
 ảnh
 • width=“rộng”, height=“cao”: độ rộng và độ cao của ảnh:
 – n: (n là số) Quy định độ rộng, cao là n pixels
 –n%: Quy định độ rộng, cao là n% độ rộng, cao của đối tượng 
 chứa ảnh.
 • border=“n”: n là số: kích thước đường viền ảnh. =0: ảnh 
 không có đường viền
 • align=“căn chỉnh ảnh”: left, right, middle, top, texttop,…
 SiêuSiêu liênliên kkếếtt (Hyperlink)(Hyperlink)
9 Là khả năng cho phép tạo liên kết giữa 1 
 đối tượng với một phần nội dung. Khi ta 
 kích chuột vào đối tượng thì phần nội 
 dung sẽ được hiện ra.
9 Ta gọi:
 – Đối tượng sử dụng để kích chuột vào là: Đối 
 tượng liên kết. Đối tượng có thể là: văn bản, 
 hình ảnh, một phần của ảnh.
 – Địa chỉ nội dung sẽ được hiện ra là Đích liên 
 kết
 SiêuSiêu liênliên kkếếtt (tt)(tt)
9 Thẻ tạo liên kết:
 Đối tượng liên kết
 –Thuộc tính:
 • href=“đích liên kết”: Nếu trong cùng web nên sử dụng 
 đường dẫn tương đối.
 • target=“tên cửa sổ đích”. Tên CS phân biệt chữ 
 hoa/thường. Có một số tên đặc biệt:
 – _self: cửa sổ hiện tại
 – _blank: cửa sổ mới
 –Chúý:
 •Liên kết với địa chỉ e-mail thì đặt 
 href=“mailto:địa_chỉ_e-mail”
 •Thực hiện lệnh JavaScript khi kích chuột vào thì đặt 
 href=“javascript:lệnh”
 BBảảngng bibiểểuu
9 HTML coi một bảng gồm nhiều dòng, một dòng 
 gồm nhiều ô, và chỉ có ô mới chứa dữ liệu của 
 bảng.
9 Các thẻ:
 –Tạo bảng: …: Mỗi bảng chỉ có
 1 cặp thẻ này.
 –Tạo dòng: …: Bảng có bao nhiêu 
 dòng thì có bấy nhiêu cặp thẻ này
 –Tạo ô:
 •Ô tiêu đề của bảng: …
 •Ô dữ liệu: …
 Tổng số thẻ và bằng số ô của bảng. 
 Dòng có bao nhiêu ô thì có bấy nhiêu thẻ 
 và/hoặc nằm trong cặp thẻ … 
 tương ứng
 • Chú ý: Để có được một ô trống trong bảng (ô không 
 có dữ liệu) thì cần đặt nội dung ô là:  
 BBảảngng bibiểểuu --ThuThuộộcc ttíínhnh ccủủaa ccáácc ththẻẻ
9 
 – border=“số”: kích thước đường viền. Đặt bằng 0 (mặc định): 
 không có đường viền.
 – width=“rộng”, height=“cao”: độ rộng và độ cao của bảng. Có
 thể đặt theo 2 cách:
 • n: (n là số) Quy định độ rộng, cao là n pixels
 •n%: Quy định độ rộng, cao là n% độ rộng, cao của đối tượng chứa 
 bảng.
 – cellspacing=“số”: Khoảng cách giữa 2 ô liên tiếp
 – cellpadding=“số”: Khoảng cách từ góc ô đến nội dung ô
 – bgcolor=“màu”: màu nền của bảng
 – background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho 
 bảng. Nên sử dụng đường dẫn tương đối nếu có thể.
 BBảảngng bibiểểuu --ThuThuộộcc ttíínhnh ccủủaa ccáácc ththẻẻ (tt)(tt)
9 ,
 – bgcolor=“màu”: màu nền của ô
 – background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho 
 ô. Nên sử dụng đường dẫn tương đối nếu có thể.
 – width=“rộng”, height=“cao”: độ rộng và độ cao của ô. Có thể 
 đặt theo 2 cách:
 • n: (n là số) Quy định độ rộng, cao là n pixels
 •n%: Quy định độ rộng, cao là n% độ rộng, cao của bảng.
 – align=“căn_lề”: cách căn chỉnh dữ liệu trong ô theo chiều 
 ngang: left, right, center, justify.
 – valign=“căn lề đứng”: cách căn chỉnh dữ liệu trong ô theo 
 chiều đứng: top, middle, bottom.
 – colspan=“số”: số cột mà ô này chiếm (mặc định là 1)
 – rowspan=“số”: số dòng mà ô này chiếm (mặc định là 1)
 – nowrap: nếu có sẽ làm cho dữ liệu trong ô không tự xuống 
 dòng
FormForm trêntrên trangtrang webweb
 CCáácc đđốốii ttưượợngng nhnhậậpp ddữữ liliệệuu
9 Cho phép người sử dụng nhập dữ liệu trên trang web. Dữ
 liệu này có thể được gửi về server để xử lý.
9 Người sử dụng nhập dữ liệu thông qua các điều khiển 
 (controls). Có nhiều loại control:
 1. Form
 2. Oneline Textbox
 3. Checkbox
 4. Radio Button
 5. Button
 6. Combo box (drop-down menu)
 7. Listbox
 8. Hộp nhập văn bản nhiều dòng (TextArea)
 9. …
 CCáácc đđốốii ttưượợngng nhnhậậpp ddữữ liliệệuu (tt)(tt)
9 Tất cả các điều khiển đều có tên được quy 
 định qua thuộc tính name. Tuy nhiên có
 một số điều khiển thì name không quan 
 trọng (các điều khiển mà sau này không 
 cần lấy dữ liệu)
9 Các điều khiển từ số 2. đến số 5 được định 
 nghĩa nhờ thẻ và thuộc tính 
 type sẽ xác định là điều khiển nào sẽ 
 được tạo ra.
 FormForm
9 Sử dụng để chứa mọi đối tượng khác
9 Không nhìn thấy khi trang web được hiển thị
9 Quy định một số thuộc tính quan trọng như 
 method, action.
9 Thẻ tạo form:
 …
9 Các thuộc tính:
 – name=“tên_form”: Không quan trọng lắm
 – action=“địa chỉ nhận dữ liệu”: Nên sử dụng đường dẫn 
 tương đối nếu nằm trong cùng 1 web
 – method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị:
 • GET (mặc định)
 • POST
 HHộộpp nhnhậậpp vvăănn bbảảnn 11 dòngdòng (Oneline(Oneline Textbox)Textbox)
9 Sử dụng để nhập các văn bản 
 ngắn (trên 1 dòng) hoặc mật khẩu
9 Thẻ: 
9 Thuộc tính:
 – name=“tên_đt”: quan trọng
 – type=“text”:Ô nhập văn bản thường
 – type=“password”: ô nhập mật khẩu
 – value=“giá trị mặc định”
 CheckboxCheckbox
9 Cho phép chọn nhiều lựa chọn 
 trong một nhóm lựa chọn được đưa 
 ra bằng cách đánh dấu (“tích”).
9 Thẻ: : mỗi ô nhập cần 1 
 thẻ
9 Thuộc tính:
 – name=“tên_đt”: quan trọng
 – type=“checkbox”
 – value=“giá trị”: đây là giá trị chương 
 trình sẽ nhận được nếu NSD chọn ô này.
 – checked: nếu có thì nút này mặc định 
 được chọn
 OptionOption ButtonButton (Radio(Radio Button)Button)
9 Cho phép chọn một lựa chọn trong một 
 nhóm lựa chọn được đưa ra.
9 Trên 1 form có thể có nhiều nhóm lựa 
 chọn kiểu này.
9 Thẻ: : Mỗi ô cần 1 thẻ
9 Thuộc tính:
 – name=“tên_đt”: quan trọng. Các đối tượng 
 cùng tên thì thuộc cùng nhóm.
 – type=“radio”
 – value=“giá trị”: đây là giá trị chương trình 
 sẽ nhận được nếu NSD chọn ô này.
 – checked: nếu có thì nút này mặc định 
 được chọn
 NNúútt llệệnhnh (Button)(Button)
9 Sử dụng để NSD ra lệnh thực hiện công việc.
9 Trên web có 3 loại nút:
 – submit: Tự động ra 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ý
9 Thẻ: 
9 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”
 ComboCombo BoxBox (Drop(Drop--downdown menu)menu)
9 Bao gồm một danh sách có nhiều phần tử. Tại 
 một thời điểm chỉ có 1 phần tử được chọn
9 NSD có thể chọn 1 phần tử trong 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.
9 Thẻ tạo hộp danh sách:
 Danh sách phần tử
9 Thuộc tính:
 – name=“tên_ĐT”: quan trọng
9 Thẻ tạo 1 phần tử trong danh sách:
 Tiêu đề phần tử
9 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ó thì phần tử này mặc định được 
 chọn
 ListboxListbox
9 Tương tự như Combo box, tuy nhiên 
 có thể nhìn thấy nhiều phần tử cùng 
 lúc, có thể lựa chọn nhiều phần tử
9 Thẻ: …
9 Thuộc tính: tương tự của combo tuy 
 nhiên có 2 thuộc tính khác:
 – size=“số dòng”
 – multiple: cho phép lựa chọn nhiều phần 
 tử cùng lúc
9 Thẻ … tương tự
 của combo box
HHộộpp nhnhậậpp vvăănn bbảảnn nhinhiềềuu dòngdòng (TextArea)(TextArea)
9 Cho phép nhập văn bản dài trên 
 nhiều dòng.
9 Thẻ:
 Nội dung mặc định
9 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 trên 
 dòng.
 KhungKhung (Frame)(Frame)
9 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 1 trang 
 web khác
9 Trình duyệt có thể không hỗ trợ khung
 KhungKhung (tt)(tt)
9 Tạo trang web chứa các khung:
 –Thay thẻ … bằng:
 các khung
 nội dung trong trường hợp trình duyệt 
 không hỗ trợ khung
 KhungKhung (tt)(tt)
9 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 là ni. 
 ni là 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 2 
 khung
 KhungKhung (tt)(tt)
9 Tạo 1 khung có nội dung là 1 trang web 
 nào đó: 
 –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
9 Thẻ mặc định
 –Thuộc tính
 • target=“Cửa sổ mặc định”
 • href=“Địa chỉ gốc mặc định”
 ĐĐaa phphươươngng titiệệnn
9 Âm thanh 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 mãi.
 ĐĐaa phphươươngng titiệệnn (tt)(tt)
9 Video trên IE sử dụng Windows Media 
 Player
 <object
 classid="clsid:22D6F312-B0F6-11D0-94AB-
 0080C74C7E95“
 id="MediaPlayer1“
 width=“rộng” height=“cao”>
 FlashFlash
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
 444553540000" 
 codebase="
 wave/cabs/flash/swflash.cab#version=6,0,29,0" 
 width=“số" height=“số">
 <embed src="ten_file.swf" quality="high" 
 pluginspage="
 player" type="application/x-shockwave-flash" 
 width="số " height="số ">
 AppletApplet
<applet code="ten_fle.class" 
 width=“Số" height="Số">
 MMộộtt ssốố ththẻẻ metameta thôngthông ddụụngng
9 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
 –2 cách viết thẻ :
 MMộộtt ssốố ththẻẻ metameta thôngthông ddụụngng ((tttt))
9 
9 
9 
9 <META HTTP-EQUIV="refresh" CONTENT="delay;url=new 
 url">
9 
9 <META HTTP-EQUIV="Content-Type" 
 CONTENT="text/html; charset=utf-8">