Thẻ <ul> sử dụng để tạo danh sách khơng có thứ tự. Ký hiệu đầu dịng đứng trước mỗi mục trong danh sáchmặc định là một ký tự đặc biệt hình trịn. Thẻ <ul> được sử dụng kèm với thẻ <li>.
- Cú pháp:
Ví dụ 8:
<ul>
<li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Hiển thị trên trình duyệt:
Hình 2.11. Kết quả ví dụ 8 2.3.2. Danh sách có thứ tự
Thẻ <ol> sử dụng để tạo danh sách có thứ tự. Ký hiệu đầu dòng đứng trước mỗi mục trong danh sách mặc định là một con số. Thẻ <ol> được sử dụng kèm với thẻ <li>. - Cú pháp: <ol > <li> Mục thứ nhất </li> <li> Mục thứ hai</li> <li> Mục thứ ba</li> </ol> <ul > <li> Mục thứ nhất </li>
<li> Mục thứ hai </li>
Ví dụ 9:
<ol>
<li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Hiển thị trên trình duyệt:
Hình 2.12. Kết quả ví dụ 9
Ví dụ 10: danh sách lồng nhau
Hiển thị trên trình duyệt:
2.4. LÀM VIỆC VỚI CÁC ĐỐI TƢỢNG MEDIA TRÊN TRANG WEB 2.4.1. Thẻ <img>
Thẻ <img> dùng để chèn một tập tin hình ảnh (.gif, .ico, .cur, .jpg, .jpeg, .png, .svg, .bmp,…) vào tài liệu HTML
- Cú pháp:
<img [thuộc tính] >
- Thuộc tính:
Bảng 2.1. Các thuộc tính thẻ <img>
Thuộc tính Giá trị Ví dụ Mơ tả
alt Text alt="logo CTy" Xác định văn bản thay thế khi hình ảnh khơng hiển thị src URL src="img/ logo.gif" Địa chỉ của tập tin ảnh cần
chèn vào tài liệu height pixels
% height="50px"
Xác định chiều cao của hình ảnh
width pixels
% width="50px"
Xác định chiều rộng của hình ảnh
title Text title = "trang chủ" Văn bản hiển thị khi di chuyển chuột trên hình ảnh.
Ví dụ 11: chèn hình html5.gif vào tập tin index.html. Hình html5.gif chứa trong thư mục image và index.html chứa trong thư mục html, thư mục image và thư mục html ngang cấp nhau.
Sử dụng địa chỉ tương đối:
<img src="../image/html5.gif" alt="HTML5 Icon"
width="128px" height="128px">
Ví dụ 12: chèn hình w3schools_green.jpg từ website w3schools Sử dụng địa chỉ tuyệt đối:
<img
src="https://www.w3schools.com/images/w3schools_gr een.jpg" alt="W3Schools.com" width="104px"
height="142px">
2.4.2. Thẻ <audio>
Thẻ <audio> dùng chèn âm thanh vào tài liệu HTML.
Hỗ trợ các định dạng file: .MP3, .Wav, .Ogg (tùy trình duyệt) - Cú pháp:
<audio [thuộc tính]>
Dịng thơng báo
</audio>
Dịng thơng báo nằm giữa <audio> và </audio> sẽ hiển thị khi trình duyệt khơng hỗ trợ thẻ <audio>
- Thuộc tính:
Bảng 2.2. Các thuộc tính thẻ <audio>
Thuộc tính Giá trị Mơ tả
autoplay autoplay Âm thanh tự động chạy.
controls controls Hiển thị tính năng điều khiển.
loop loop Hiển thị tính năng lặp lại khi chạy xong đoạn âm thanh.
src URL Xác định đường dẫn tới tập tin âm thanh. Ví dụ 13:
<audio src="hello.mp3" controls="controls">
Trình duyệt bạn sử dụng khơng hỗ trợ thẻ audio
</audio>
Hiển thị trên trình duyệt:
2.4.3. Thẻ <video>
Thẻ <video> dùng chèn video vào tài liệu HTML
Hỗ trợ các định dạng file: MP4, WebM, Ogg (tùy trình duyệt) - Cú pháp:
<video [thuộc tính]>
Dịng thơng báo
</video>
Dịng thơng báo nằm giữa <video> và </video> sẽ hiển thị khi trình duyệt khơng hỗ trợ thẻ <video>
- Thuộc tính:
Bảng 2.3. Các thuộc tính thẻ <video>
Thuộc tính Giá trị Mơ tả
Audio muted Xác định trạng thái mặc định của âm
thanh.
Autoplay autoplay Xác định trạng thái tự động chạy của
video.
Controls controls Hiển thị bộ điều khiển của video.
Height pixel Xác định chiều cao của video.
Width pixel Xác định chiều rộng của video.
Loop loop Xác định video có được lặp lại hay
không.
Poster URL Xác định hình đại diện cho video.
src URL Xác định đường dẫn của video.
Ví dụ 14:
<video src= "movie.mp4" width="320" height="240" controls="controls">
Trình duyệt bạn sử dụng khơng hỗ trợ thẻ video
Hiển thị trên trình duyệt:
Hình 2.15. Kết quả ví dụ 14 2.4.4. Thẻ <object>
Thẻ <object> dùng chèn các đối tượng (plug-in) vào trang HTML. Các đối tượng có thể là trang HTML, hình ảnh, audio, video, Java applets, ActiveX, PDF, Flash.
Thẻ <object> được hầu hết các trình duyệt hỗ trợ.
Tuy nhiên, để chèn ảnh nên dùng thẻ <img>, chèn trang HTML nên dùng thẻ <iframe>, chèn video nên dùng thẻ <video>, chèn âm thanh nên dùng thẻ <audio>.
- Cú pháp:
<object [thuộc tính]>
Dịng thơng báo
</object>
Dịng thông báo nằm giữa <object> và </object> sẽ hiển thị khi trình duyệt khơng hỗ trợ thẻ <object>
- Thuộc tính:
Bảng 2.4. Các thuộc tính thẻ <object>
Thuộc tính Giá trị Mô tả
data URL Xác định địa chỉcủa đối tượng chèn.
width pixel Xác định chiều rộng của đối tượng chèn.
Ví dụ 15: chèn flash vào trang web
<object width="400px" height="145px"
data="../resources/flyingsnail1.swf"> </object>
Ví dụ 16: chèn một tập tin HTML vào trang web
<object width="100%" height="500px"
data="../resources/html5.html"> </object>
2.5. LÀM VIỆC VỚI LIÊN KẾT TRÊN TRANG WEB
Khả năng chính của HTML là hỗ trợ liên kết. Một liên kết là sự kết nối đến tài liệu hay tập tin khác hoặc đến một phần khác trong cùng tài liệu đó.
Các địa chỉ đặt liên kết đến có thể là: - Một phần khác trong cùng tài liệu. - Một tài liệu khác.
- Một phần trong tài liệu khác.
- Các tập tin khác: văn bản, hình ảnh, âm thanh,.. - Vị trí hoặc máy chủ khác.
Một liên kết được xác định bởi một địa chỉ URL của tập tin liên kết. Địa chỉ URL phân làm 2 loại:
- Địa chỉ tuyệt đối : Là vị trí tuyệt đối so với mạng Internet, bao gồm một chuỗi đầy đủ giao thức, vị trí mạng, đường dẫn và tên tập tin. Ví dụ: https://www.w3schools.com
- Địa chỉ tương đối : Là vị trí tương đối so với trang web hiện hành đang chứa liên kết, chỉ bao gồm một phần nhỏ của đường dẫn tuyệt đối. Một số ký hiệu đường dẫn đặc biệt:
Bảng 2.5. Ký hiệu đƣờng dẫn
Ký hiệu Ý nghĩa
/ Trở về thư mục gốc của website
./ Thư mục hiện tại của trang web sử dụng link (mặc định) ../ Quay ra thư mục cha / đi ngược lại 1 cấp thư mục
Mặc định trong tất cả các trình duyệt các vị trí có liên kết đều được gạch chân, liên kết chưa thăm có màu xanh, liên kết đã thăm có màu tím và liên kết đang nhấn chọn sẽ có màu đỏ.
2.5.1. Tạo liên kết đến tài liệu khác
- Cú pháp:
<a [thuộc tính] > siêu văn bản </a>
- Thuộc tính:
Bảng 2.6. Các thuộc tính thẻ <a>
Thuộc tính Giá trị Ví dụ Mô tả
href URL href="index.html" Địa chỉ đến liên kết.
target _blank _parent _self _top Target="_blank" Xác định nơi để mở tài liệu.
_blank: mở tài liệu ở cửa sổ mới
_parent: mở tài liệu ở cửa sổ cha của trang hiện hành.
_self: mở tài liệu ở cửa sổ hiện hành
_top: mở tài liệu vào cửa sổ cao nhất
title text title = "trang chủ" Văn bản hiển thị khi di chuyển chuột trên liên kết.
Ví dụ 17: tạo liên kết từ baihoc1.html đến baihoc2.html; baihoc1.html và baihoc2.html đều nằm trong cùng thư mục baihoc
<a href="baihoc2.html">
Bài học 2
Ví dụ 18: tạo liên kết từ baihoc1.html đến baitap1.html; baihoc1.html nằm trong thư mục baihoc, baitap1.html nằm trong thư mục baitap. Baitap va baihoc có cùng thư mục cha là thietkeweb
<a href="../baitap/baitap1.html">Bài tập 1 </a>
Ví dụ 19: tạo liên kết đến trang web ở máy chủ khác
<a href="http://www.intel.com">Intel Home Page
</a>
Ví dụ 20: tạo liên kết đến email
<a href="mailto:hotec@hotec.edu.vn">email Hotec </a>
Ví dụ 21: mở (hay download) một file (file word, excel, pdf, image, ...)
<a href="doc/vidu.doc"> Mở file vidu.doc trong thư mục "doc"</a>
2.5.2. Tạo liên kết đến các phần trong cùng một tài liệu
Để tạo liên kết đến các phần trong cùng một tài liệu thực hiện qua 2 bước: + Bước 1: đánh dấu vị trí neo bằng cách thêm thuộc tính id=“TenViTriNeo” vào thẻ đóng vai trị là điểm tham chiếu (thẻ <p>, thẻ tiêu đề <h1>, <h2>, …)
+ Bước 2: tạo liên kết đến vị trí neo bằng thẻ với thuộc tính href=“#TenViTriNeo”
<a href=“#TenViTriNeo”> Text đại diện </a>
Ví dụ 22: người dùng nhấn vào vị trí „Về Chương 1‟ thì trình duyệt sẽ chuyển đến vị trí neo của Chương 1 trong cùng trang web
<h2 id="Chuong1"> Chương 1 </h2>
<!-- Nội dung chương 1 -->
<a href="#Chuong1"> Về Chương 1</a>
Ví dụ 23: người dùng nhấn vào vị trí „Đén Chương 1‟ thì trình duyệt sẽ chuyển đến vị trí neo của Chương 1 trên trang web baihoc.html <h2 id="Chuong1"> Chương 1 </h2>
<!-- Nội dung chương 1 -->
2.6. LÀM VIỆC VỚI BẢNG BIỂU TRÊN TRANG WEB 2.6.1. Tạo bảng đơn giản 2.6.1. Tạo bảng đơn giản
Các thẻ thường dùng trong tạo bảng:
Bảng 2.7. Các thẻ tạo bảng
Tên thẻ Ý nghĩa
<table> Định nghĩa một bảng
<tr> Định nghĩa một dòng trong bảng <td> Định nghĩa một ơ trên dịng
<th> Định nghĩa ô chứa tiêu đề của cột hoặc dòng <caption> Tiêu đề của bảng
Thẻ <table> chứa bên trong nó các thẻ <caption>,<tr>, <th> và <td>. Thẻ <tr> chứa bên trong nó các thẻ <th>,<td>.
Thẻ <td> chứa bên trong nó là nội dung của ô.
Có thể tạo một bảng con trong một bảng bằng cách thêm thẻ <table> vào bên trong thẻ <td>.
* Cấu trúc bảng tổng quát:
<table >
<caption>Tiêu đề của bảng </caption> <tr >
<td >
Nội dung của ô 1 </td>
<td >
Nội dung của ô 2 </td>
...
</tr> ... </table>
Ví dụ 24:
Hiển thị trên trình duyệt:
Hình 2.16. Kết quả ví dụ 24
* Ghi chú: HTML5 khơng hỗ trợ hầu hết các thuộc tính định dạng bảng do đó dùng các thuộc tính css để thay thế (xem bài 3).
2.6.2. Tạo bảng có gộp ơ
Sử dụng thuộc tính colspan, rowspan trong thẻ <td>, <th> để gộp ô. - Gộp các ô theo chiều ngang:
<td colspan= “số ô gộp” > </td> - Gộp các ô theo chiều dọc:
<td rowspan= “số ô gộp” > </td>
Hiển thị trên trình duyệt:
Hình 2.17. Kết quả ví dụ 25
2.7. LÀM VIỆC VỚI BIỂU MẪU TRÊN TRANG WEB
2.7.1. Khái quát về Form
Form dùng để nhận thông tin từ người dùng hoặc phản hồi thông tin đến người dùng.
Qua form người dùng có thể có các yêu cầu như:
- Nhập vào câu trả lời, ý kiến
- Chọn câu trả lời từ danh sách
- Chọn câu trả lời từ một hoặc một số tùy chọn
Dữ liệu thu thập được có thể xử lý tại máy khách hoặc có máy chủ. Sau đó trả kết quả về cho người dùng.
Một form trong HTML bao gồm nhiều phần tử khác nhau gọi là các điều khiển. Các điều khiển có thể là hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn…
Hình 2.18. Ví dụ form 2.7.2. Thẻ <form>
- Thẻ <form> dùng tạo ra một form trong tài liệu HTML.
- Các phần tử của form: hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn…phải nằm trong cặp thẻ form.
- Thẻ <form> có thể chứa các thành phần điều khiển như: <input>, <select>, <textarea>, <fieldset>, <legend>, <label>,… và cũng có thể chứa các thẻ khác.
- Cú pháp:
<form [thuộc tính] >
Các thành phần điều khiển của form </form>
Bảng 2.8. Các thuộc tính thẻ <form>
Thuộc tính Giá trị Ví dụ Mơ tả
Action URL action="confirm.php"
Địa chỉ sẽ gửi dữ liệu tới khi form được
submit (bấm nút submit) Thông thường là địa chỉ một trang web nằm ở phía máy chủ. accept- charset charset accept-charset="ISO- 8859-1" Chỉ định cụ thể bộ dữ liệu (character-sets) mà máy chủ có thể xử lý cho form dữ liệu.
enctype application/ x-www- form- urlencoded multipart/ form-data text/plain enctype="text/plain" Chỉ định cụ thể dạng dữ liệu gì trước khi gửi lên máy chủ.
method get
post method="post"
Chỉ định phương thức gửi dữ liệu
method =get: truyền các dữ liệu đơn giản, không cần bảo mật và nhỏ. Các thông tin khơng được mã hóa nên nhanh hơn post
method =post: truyền các dữ liệu có kích thước lớn, phức tạp. Các thông tin được mã hóa trước khi gởi.
Mặc định là method =get
name name name="login" Chỉ định tên cho form. target _blank _self _parent _top target="_blank" Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến máy chủ.
2.7.3. Thẻ <input>
Thẻ <input > được dùng tạo các thành phần điều khiển nhập thông tin. Các dạng điều khiển nhập: text, checkbox, password, radio button, button,...
- Cú pháp:
<input [thuộc tính]>
- Thuộc tính:
Bảng 2.9. Các thuộc tính thẻ <input>
Thuộc tính Giá trị Ví dụ Mơ tả
alt Text alt="Đây là alt"
Xác định nhãn cho hình của của điều khiển (chỉ cho type="image") maxlength n maxlength="50" xác định số ký tự tối đa có thể nhập vào thành phần điều khiển (sử dụng cho type="text", type="password")
name name name="inputName"
Xác định tên cho thành phần điều khiển (với type="radio" thuộc tính name phải có cùng giá trị ở tất cả
các thẻ input trong cùng nhóm điều khiển) size n size="30" Xác định chiều dài thành phần điều khiển. Đối với type="text",
type="password" kích thước tính theo số ký tự, đối với các loại khác tính bằng px src URL src="img/ btn_name.gif" Hiển thị đường dẫn của hình dùng như nút submit. type
button type="button" Điều khiển là nút nhấn
checkbox type="checkbox"
Điều khiển là hộp lựa chọn cho phép chọn cùng lúc nhiều giá trị file type="file" Điều khiển là hộp
chọn file
hidden type="hidden" Điều khiển dạng ẩn.
image type="image" Điều khiển là nút nhấn dạng hình. password type="password" Điều khiển là hộp
nhập mật khẩu
radio type="radio"
Điều khiển là hộp lựa chọn chỉ cho phép chọn một trong nhiều giá trị reset type="reset" Điều khiển là nút nhấn để trả về giá trị mặc định của các
trường trên form submit type="submit" Điều khiển là nút nhấn để gửi dữ liệu lên Server text type="text" Điều khiển là hộp nhập văn bản trên một dòng
color type="color" Điều khiển là một bảng màu
date type="date" Điều khiển là một bảng ngày tháng email type="email" Điều khiển là hộp
nhập định dạng email tel type="tel"
Điều khiển là hộp nhập định dạng số điện thoại
search type="search" Điều khiển là hộp nhập dạng tìm kiếm value giá trị value="nam" Giá trị của điều khiển
placeholder text placeholder= “dòng gợi ý”
Thêm dòng gợi ý cho điều khiển nhập
width pixels
% width="100px"
Xác định chiều rộng của điều khiển
height pixels
% height="50px"
Xác định chiều cao của điều khiển (chỉ sử dụng cho
type="image")
checked checked checked
Xác định một trường nhậpđang được chọn (sử dụng cho
type="checkbox" hay type="radio")
readonly readonly readonly
Xác định trường nhập chỉ được đọc (sử dụng cho type="text", type="password")
disabled disabled disabled
Xác định trường nhập không hiển thị trước khi tải trang.
pattern Giá trị
định dạng pattern="[a-z]"
Xác định giá trị đầu
vào của trường nhập
(một pattern hay một định dạng) (sử dụng cho type là text, date, search, url, tel, email, password)
required required required
Xác định giá trị bắt buộc cho một trường nhập
autofocus autofocus autofocus
Xác định một trường nhập được "focus" khi tải trang. autocomplete on off autocomplete="on" Xác định một trường nhập có kích hoạt tự động hay khơng. Ví dụ 26: tạo hộp nhập liệu text và nút submit
Hiển thị trên trình duyệt:
Hình 2.19. Kết quả ví dụ 26 2.7.4. Thẻ <select>
Thẻ <select> dùng tạo một danh sách lựa chọn cho người dùng. Mỗi một mục chọn trong danh sách được tạo bởi thẻ <option>.
- Cú pháp:
<select [thuộc tính]>
<option [thuộc tính] > tên mục chọn thứ nhất </option>
<option [thuộc tính] > tên mục chọn thứ hai</option>
<!-- danh sách các mục chọn --> </select>
- Thuộc tính:
Bảng 2.10. Các thuộc tính thẻ <select>
Thuộc tính Giá trị Ví dụ Mô tả
multiple multiple multiple="multiple" Cho phép chọn nhiều mục lựa chọn cùng lúc. name name name="quequan" Xác định tên cho danh
sách lựa chọn. size Số size="5"
Xác định số dòng trong danh sách lựa chọn được hiển thị.
Bảng 2.11. Các thuộc tính thẻ <option>
Thuộc tính Giá trị Ví dụ Mơ tả