Ngôn ngữ HTML

…
 Tạo 1 phần tử: Tiêu đề phần tử
 Một phần tử có thể là 1 danh sách con.
Siêu liên kết (Hyperlink) Siêu liên kết (Hyperlink)
  Thẻ tạo liên kết:
 Là khả năng cho phép tạo liên kết giữa 1 đối  Đối tượng liên kết
 tượ  Thuộc tính:
 tượng vngới mliênột kphần nội dung. Khi ta kích chuột vào  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 
 đối tượng thì phầtn nội dung sẽ được hiện ra. biệt:
  _self: cửa sổ hiện tại
 Ta gọi:  _blank: cửa sổ mới
 k
  – Đốết i tượng sử dụng để kích chuột vào là: Đố  Chú ý:
 i  Liên kết với địa chỉ e-mail thì đặt href=“mailto:địa_chỉ_e-mail”
 . Đối tượng có thể là: văn bản,  Thực hiện lệnh JavaScript khi kích chuột vào thì đặt href=“javascript:lệnh”
 hình ảnh, một phần của ảnh.
  – Địa chỉ nội dung sẽ được hiện ra là Đích liên
 6
 5/10/2013
NỘI DUNG Bảng biểu
  HTML coi một b , một dòng g , và 
 Giới thiệu ảng g
 chỉ có ô m ồm cnhiủa bảng. ồm nhi
  Các thẻ: ề ề
 Thẻ (tag) ới ch u dòng u ô
  Tạo bảng: ứ…a d : Mỗi bảng chỉ có 1 cặp thẻ 
 ữ li
 Bảng biểu này. ệu 
  Tạo dòng: …: Bảng có bao nhiêu dòng thì có bấy 
 Form nhiêu cặp thẻ này
  Tạo ô:
 Khung (Frame)  Ô tiêu đề của bảng: …
  Ô dữ liệu: …

 Đa phương tiện 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 
 Một số thẻ meta thông dụng 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à:  
Bảng biểu Bảng biểu 
-Thuộc tính của các thẻ -Thuộc tính của các thẻ
  ,
  border=“số”: kích thước đường viền. Đặt bằng 0 (mặc định): không có đường 
  bgcolor=“màu”: màu nền của ô
 viền.
 
  width=“rộng”, height=“cao”: độ rộng và độ cao của bảng. Có thể đặt theo 2 background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho ô. Nên 
 cách: sử dụng đường dẫn tương đối nếu có thể.
  n: (n là số) Quy định độ rộng, cao là n pixels  width=“rộng”, height=“cao”: độ rộng và độ cao của ô. Có thểđặt 
  n%: Quy định độ rộng, cao là n% độ rộng, cao của đối tượng chứabảng. theo 2 cách:
  cellspacing=“số”: Khoảng cách giữa 2 ô liên tiếp  n: (n là số) Quy định độ rộng, cao là n pixels
  cellpadding=“số”: Khoảng cách từ góc ô đến nội dung ô
  n%: Quy định độ rộng, cao là n% độ rộng, cao của bảng.
  bgcolor=“màu”: màu nền của bảng
  align=“căn_lề”: cách căn chỉnh dữ liệu trong ô theo chiềungang: 
  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ể. 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
 7
 5/10/2013
NỘI DUNG Form trên trang web
 Giới thiệu  Các đối tượng nhập dữ liệu
  Form
 Thẻ (tag)
  Hộp nhập văn bản 1 dòng (Oneline Textbox)
 Bảng biểu  Checkbox
 Form  Option Button (Radio Button)
  Nút lệnh (Button)
 Khung (Frame)
  Combo Box (Drop-down menu)
 Đa phương tiện
  Listbox
 Một số thẻ meta thông dụng  Hộp nhập văn bản nhiều dòng (TextArea)
Form Các đối tượng nhập dữ liệu
 Sử dụng để chứa mọi đối tượng khác
  Cho phép người sử dụng nhập dữ liệu trên trang web. 
 Không nhìn thấy khi trang web được hiển thị
 Dữ liệu này có thể được gửi về server để xử lý.
 Quy định một số thuộc tính quan trọng như method, action.
 Thẻ tạo form: …  Người sử dụng nhập dữ liệu thông qua các điều khiển
 Các thuộc tính: (controls). Có nhiều loại control:
 – name=“tên_form”: Không quan trọng lắm
 1. Form
 – 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 2. Oneline Textbox
 – method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị: 3. Checkbox
 • GET (mặc định) 4. Radio Button
 • POST 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. …
 8
 5/10/2013
 Hộp nhập văn bản 1 dòng 
Các đối tượng nhập dữ liệu (Oneline Textbox)
  Sử dụng để nhập các văn bảnngắn 
 Tấtcả các điềukhiển đềucótênđượcquyđịnh (trên 1 dòng) hoặc mật khẩu
 qua thuộctínhname. Tuy nhiên có mộtsốđiều  Thẻ: 
  Thuộc tính:
 khiển thì name không quan trọng (các điềukhiển
 – name=“tên_đt”: quan trọng
 mà sau này không cầnlấydữ liệu) – type=“text”:Ô nhập văn bản 
 Các điềukhiểntừ số 2. đếnsố 5 được định nghĩa thường
 – type=“password”: ô nhập mật 
 nhờ thẻ và thuộctínhtype sẽ xác định khẩu
 là điềukhiểnnàosẽđượctạo ra. – value=“giá trị mặc định”
Checkbox Option Button (Radio Button)
 Cho phép chọn nhiều lựa chọn trong  Cho phép chọn một lựa chọn trong một nhóm 
 một nhóm lựa chọn được đưara bằng lựa chọn được đưa ra.
 cách đánh dấu (“tích”).  Trên 1 form có thể có nhiều nhóm lựa chọn kiểu 
 Thẻ: : mỗi ô nhập cần 1 thẻ này.
  Thẻ: : Mỗi ô cần 1 thẻ
 Thuộc tính:
  Thuộc tính:
 – name=“tên_đt”: quan trọng
 – name=“tên_đt”: quan trọng. Các đối tượng cùng 
 – type=“checkbox” tên thì thuộc cùng nhóm.
 – value=“giá trị”: đây là giá trị chương – type=“radio”
 trình sẽ nhận được nếu NSD chọn ô này. – value=“giá trị”: đây là giá trị chương trình sẽ 
 – checked: nếu có thì nút này mặc định nhận được nếu NSD chọn ô này.
 được chọn – checked: nếu có thì nút này mặc địnhđược chọn
 9
 5/10/2013
Nút lệnh (Button) Combo Box (Drop-down menu)
 Sử dụng để NSD ra lệnh thực hiện công việc.  Bao gồm một danh sách có nhiều phần tử. Tại một 
 Trên web có 3 loại nút: thời điểm chỉ có 1 phần tử được chọn
 – submit: Tự động ra lệnh gửi dữ liệu  NSD có thể chọn 1 phần tử trong danh sách xổ xuống 
 – reset: đưa mọi dữ liệu về trạng thái mặc định bằng cách kích vào mũi tên bên phải hộp danh sách.
 – normal: người lập trình tự xử lý
  Thẻ tạo hộp danh sách: Danh sách phần tử 
 Thẻ: 
 Thuộc tính:
  Thuộc tính:
 – name=“tên_ĐT”: thường không quan trọng
 – name=“tên_ĐT”: quan trọng
 – type=“submit”: nút submit
 – type=“reset”: nút reset  Thẻ tạo 1 phần tử trong danh sách: Tiêu 
 – type=“button”: nút thông thường (normal), it sử đề phần tử
 dụng.  Thuộc tính:
 – value=“tiêu đề nút” – value=“giá trị”: giá trị chương trình nhận đượcnếu 
 phần tử được chọn
 – selected: nếu có thì phần tử này mặc định được
 chọn
 Hộp nhập văn bản nhiều dòng 
Listbox (TextArea)
 Tương tự như Combo box, tuy nhiên có  Cho phép nhập văn bản dài trên nhiều dòng.
 thể nhìn thấy nhiều phần tử cùng lúc, có  Thẻ: 
 thể lựa chọn nhiều phần tử 
 Thẻ: … Nội dung mặc định
 Thuộc tính: tương tự của combo tuy nhiên 
 có 2 thuộc tính khác:  Thuộc tính:
  – name=“tên_ĐT”: quan trọng
 – size=“số dòng”
  – rows=“số dòng”
 – multiple: cho phép lựa chọn nhiều phần  – cols=“số cột”
 tử cùng lúc  rows tính theo số dòng văn bản, cols tính theo số 
 Thẻ … tương tự của ký tự chuẩn trên dòng.
 combo box
 10
 5/10/2013
NỘI DUNG Khung (Frame)
 Giới thiệu  Cho phép chia một trang web làm nhiều phần, 
 Thẻ (tag) mỗi phần chứa nội dung của 1 trang web khác
 Bảng biểu  Trình duyệt có thể không hỗ trợ khung
 Form
 Khung (Frame)
 Đa phương tiện
 Một số thẻ meta thông dụng
Khung (Frame) Khung (Frame)
 Tạo trang web chứa các khung:  Một số thuộc tính của 
  Thay thẻ … bằng:
  rows = “n1, n2, … nk” hoặc cols = “n1, n2, … 
 nk”: Quy định có k dòng (hoặc cột), độ rộng 
 các khung 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
 nội dung trong trường hợp trình duyệt không  – framespacing = “n”: Khoảng cách giữa 2 
 hỗ trợ khung khung
 11
 5/10/2013
Khung (Frame) NỘI DUNG
 Tạo 1 khung có nội dung là 1 trang web nào đó: 
  Giới thiệu
 –Thuộc tính:  Thẻ (tag)
 • src=“Địa chỉ chứa nội dung”  Bảng biểu
 • name=“tên khung”
 • noresize: Không được thay đổi kích thước  Form
 Thẻ mặc định  Khung (Frame)
 –Thuộc tính
  Đa phương tiện
 • target=“Cửa sổ mặc định”
 • href=“Địa chỉ gốc mặc định”  Một số thẻ meta thông dụng
Đa phương tiện Đa phương tiện
 Âm thanh nền:  Video trên IE sử dụng Windows Media 
 –Thuộc tính: Player
 • src=“địa chỉ file âm thanh” <object
 • loop=“n”: số lần lặp. -1: mặc định: mãi mãi. classid="clsid:22D6F312-B0F6-11D0-94AB-file
 0080C74C7E95“ id="MediaPlayer1“ 
 width=“rộng” height=“cao”>
 <param name="FileName" value=“địa ch
 "> ỉ 
 12
 5/10/2013
Flash Applet
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" <applet code="ten_fle.class“ width=“S " 
 codebase= ố
 wave/cabs/flash/swflash.cab#version=6,0,29,0 width=“số" height=“số"> height="Số">
 <embed src="ten_file.swf" quality="high“ 
 pluginspage=" player" 
 type="application/x-shockwave-flash“ width="số " height="số "> 
NỘI DUNG Một số thẻ meta thông dụng
 Giới thiệu  Thẻ :
 Thẻ (tag) – Đặt ở giữa …
 Bảng biểu –Thường dùng quy định thuộc tính cho trang
 web
 Form
 –Có tác dụng lớn với Search Engine
 Khung (Frame)
 – 2 cách viết thẻ :
 Đa phương tiện
 Một số thẻ meta thông dụng <META HTTP-EQUIV="name" 
 CONTENT="content">
 13
 5/10/2013
Một số thẻ meta thông dụng Bài tập về nhà
  Mỗi SV viết một website bằng HTML theo yêu cầu sau:
 
 1) Trang chủ chứa thông tin giới thiệu về bản thân, (có ảnh)
 2) Trang 2 chứa thông tin về nghề nghiệp và dự định về 
 tương lai.
 <META NAME="author" CONTENT="author's 
 3) Trang 3 chứa các thông tin sở thích cá nhân.
 name"> 4) Trang 4 chứa thông tin về những người thân như: gia 
 <META HTTP-EQUIV="refresh" đình, bạn bè thân, … (nếu có ảnh thì nên đưa vào)
 5) Trang 5, giới thiệu về ngôi trường bạn đang học hay đã 
 CONTENT="delay;url=new url"> học trước đây.
 <META HTTP-EQUIV="expires" Lưu ý: Phải có liên kết giữa các trang
 CONTENT="date">
 <META HTTP-EQUIV="Content-Type“ 
 CONTENT="text/html; charset=utf-8">
 14