Giáo trình thiết kế web đầy đủ

Ngày nay, Internet là thành phần không thể thiếu trong đời sống xã hội. Hàng ngày có đến hàng triệu triệu lượt truy cập Internet trên toàn thế giới. Con người có thể cập nhật vô số thông tin từ đó. Để làm được việc này cần có một tập hợp vô cùng lớn các website. Việc thiết kế một website không còn là một cái gì đó quá lớn, chúng ta có thể tạo ra được những website để quảng bá cho trường mình hay cho chính bản thân mình tới bạn bè khắp thế giới. Giáo trình Thiết kế web này được biên soạn để giúp bạn đọc làm được điều đó. Giáo trình Thiết kế web được biên soạn gồm 6 chương với những nội dung cơ bản sau: Chương 1: Ngôn ngữ HTML Chương 2: Ngôn ngữ định dạng CSS Chương 3: Ngôn ngữ lập trình JAVASCRIPT Chương 4: Tìm hiểu phần mềm XAMPSERVER Chương 5: Cơ sở dữ liệu MYSQL Chương 6: Ngôn ngữ lập trình PHP

Trang 2

MỤC LỤC

LỜI NÓI ĐẦU 3

GIỚI THIỆU VỀ MÔ ĐUN 8

CHƯƠNG 1 NGÔN NGỮ HTML 9

1.1 TỔNG QUAN VỀ HTML 9

1.1.1 HTML là gì? 9

1.1.2 Cấu trúc của file HTML 10

1.1.3 XHTML 13

1.1.4 Tạo file HTML đầu tiên 15

1.2 THẺ ĐỊNH DẠNG VĂN BẢN 18

1.2.1 Thẻ định dạng đoạn văn 18

1.2.2 Thẻ định dạng kiểu chữ 19

1.2.3 Thẻ tiêu đề 20

1.2.4 Thẻ đánh dấu danh sách 20

1.2.5 Thẻ định dạng font 24

1.2.6 Thực hành 24

1.3 HÌNH ẢNH VÀ SIÊU LIÊN KẾT 25

1.3.1 Thẻ hình ảnh <img> 25

1.3.2 Thẻ đánh dấu siêu liên kết 31

1.4 GIAO TIẾP VỚI MÁY CHỦ BẰNG THẺ FORM 33

1.4.1 Thẻ form 33

1.4.2 Các thẻ input 35

1.4.3 Thẻ input file 39

1.4.4 Input button, submit và reset 40

1.4.5 Danh sách thả xuống với thẻ select 41

1.4.6 Vùng nhập văn bản với thẻ textarea 42

1.4.7 Các thuộc tính đặc biệt trong form 43

1.4.8 Thực hành 43

1.5 CÁC THÀNH PHẦN NÂNG CAO TRONG HTML 47

1.5.1 Định danh trong HTML 47

1.5.2 Thẻ đánh dấu khối div và thẻ trung tính span 48

1.5.3 Sự kiện trong HTML 48

1.5.4 Các thẻ Meta 50

1.5.5 Iframe 51

Trang 3

1.5.6 Các ký tự đặc biệt 52

1.6 BÀI TẬP VÀ CÂU HỎI TRẮC NGHIỆM 53

1.6.1 Câu hỏi trắc nghiệm 53

1.6.2 Bài tập áp dụng 56

1.7 KẾT CHƯƠNG 58

CHƯƠNG 2 NGÔN NGỮ ĐỊNH DẠNG CSS 60

2.1 TỔNG QUAN VỀ CSS 60

2.1.1 CSS là gì? 60

2.1.2 Cú pháp, quy ước của CSS 61

2.1.3 Cách sử dụng CSS 62

2.1.4 Đơn vị tính 69

2.2 SELECTOR TRONG CSS 71

2.2.1 Bộ chọn toàn cục - Universal Selector 72

2.2.2 Bộ chọn phân cấp - Descendant Selector 73

2.2.3 Bộ chọn ID 75

2.2.4 Bộ chọn Class 75

2.2.5 Bộ chọn Type Selector 77

2.2.6 Bộ chọn Pseudo-classes Selector 78

2.2.7 Bộ chọn liền kề - Adjacent sibling selectors 79

2.2.8 Bộ chọn Child Selector 80

2.2.9 Bộ chọn theo thuộc tính - Attribute selectors 81

2.3 CÁC THUỘC TÍNH CƠ BẢN TRONG CSS 82

2.3.1 Nhóm các thuộc tính Background 82

2.3.2 Nhóm các thuộc tính Border 85

2.3.3 Box Model, Margin và Padding 86

2.3.4 Nhóm các thuộc tính Font 90

2.3.5 Width và Height 93

2.3.6 Nhóm các thuộc tính Text 94

2.3.7 Float và Clear 96

2.3.8 Position 99

2.4 BÀI TẬP VÀ CÂU HỎI TRẮC NGHIỆM 100

CHƯƠNG III NGÔN NGỮ LẬP TRÌNH JAVASCRIPT 104

3.1 TỔNG QUAN VỀ JAVASCRIPT 104

3.1.1 Javascript là gì 104

3.1.2 Cách sử dụng 105

3.2 CẤU TRÚC CƠ BẢN CỦA TẬP TIN JAVASCRIPT 106

Trang 4

3.2.1 Biến và cách khai báo 107

3.2.2 Function và các khai báo 108

3.2.3 Toán tử trong Javascript 109

3.3 MỘT SỐ CÂU LỆNH TRONG JAVASCRIPT 110

3.3.1 Câu lệnh điều kiện if – else 111

3.3.2 Câu lệnh switch – case 111

3.3.3 Các câu lệnh điều khiển vòng lặp 113

3.3.4 Vòng lặp xác định for 113

3.3.5 Vòng lặp không xác định 114

3.3.6 Các đối tượng trong Javascript 116

3.3.7 Các dạng bài tập áp dụng 138

CHƯƠNG 4 TÌM HIỂU PHẦN MỀM XAMPSERVER 141

4.1 GIỚI THIỆU VỀ WAMPSERVER 141

4.2 CÁC BƯỚC CÀI ĐẶT XAMSERVER 142

CHƯƠNG 5 CƠ SỞ DỮ LIỆU MYSQL 149

5.1 MỘT SỐ KIỂU DỮ LIỆU CƠ BẢN TRONG CƠ SỞ DỮ LIỆU MYSQL 149 5.1.1 Kiểu dữ liệu Numeric 149

5.1.2 Kiểu dữ liệu Date và Time 150

5.1.3 Kiểu dữ liệu String 151

5.2 THAO TÁC VỚI PHPMYADMIN 151

5.2.1 Tạo cơ sở dữ liệu 152

5.2.2 Tạo bảng 152

5.2.3 Sửa bảng 154

5.2.4 Thêm dữ liệu vào bảng 157

5.2.5 Import và Export 158

5.3 MỘT SỐ CÂU LỆNH VÀ HÀM THAO TÁC VỚI MYSQL 160

5.3.1 Câu lệnh truy vấn Select 162

5.3.2 Các câu lệnh cập nhật dữ liệu 173

5.3.3 Các hàm thông dụng trong MySql 175

5.4 BÀI TẬP 177

CHƯƠNG VI NGÔN NGỮ LẬP TRÌNH PHP 180

6.1 GIỚI THIỆU NGÔN NGỮ LẬP TRÌNH PHP 180

6.2 TOÁN TỬ VÀ HÀM TRONG PHP 182

6.2.1 Toán tử trong PHP 182

Trang 5

6.2.2 Các biểu thức cơ bản trong PHP 184

6.2.3 Hàm 187

6.3 XỬ LÝ CHUỖI TRONG PHP 190

6.3.1 Khai báo và sử dụng chuỗi 190

6.3.2 Các hàm xử lý chuỗi 191

6.3.3 Bài tập về xử lý chuỗi 200

6.4 XỬ LÝ MẢNG TRONG PHP 200

6.4.1 Khai báo và sử dụng mảng 201

6.4.2 Mảng nhiều chiều 202

6.4.3 Duyệt mảng trong PHP 203

6.4.4 Các hàm xử lý mảng 204

6.4.5 Bài tập áp dụng 209

6.5 HƯỚNG ĐỐI TƯỢNG TRONG PHP 209

6.5.1 Định nghĩa class 210

6.5.2 Kế thừa trong lập trình hướng đối tượng 216

6.5.3 Abstract Class và Interface 218

6.5.4 Bài tập về hướng đối tượng 222

6.6 COOKIE VÀ SESSION 223

6.6.1 Cookie 223

6.6.2 Session 225

6.7 XỬ LÝ DỮ LIỆU TỪ FORM 227

6.7.1 Xử lý dữ liệu với phương thức GET 227

6.7.2 Xử lý dữ liệu với phương thức POST 230

6.8 KẾT HỢP PHP VÀ MYSQL TRONG ỨNG DỤNG WEB 231

6.8.1 Kết nối đến MySQL Server 231

6.8.2 Các hàm thao tác trên CSDL 232

6.8.3 Các hàm thao tác trên dữ liệu 233

6.9 CÁC KỸ THUẬT XỬ LÝ VÀ ỨNG DỤNG THÔNG THƯỜNG 237

6.9.1 Kỹ thuật phân trang 237

6.9.2 Kỹ thuật Rewrite URL 239

6.9.3 Xây dựng ứng dụng đăng nhập 242

6.9.4 Xây dựng ứng dụng thêm thành viên 246

6.11 BÀI TẬP VẬN DỤNG 249

TÀI LIỆU THAM KHẢO 252

Trang 6

GIỚI THIỆU VỀ MÔ ĐUN

Mã số mô đun: MĐ 20

Thời gian mô đun: 90 giờ; (Lý thuyết: 30 giờ; Thực hành: 60 giờ)

I VỊ TRÍ, TÍNH CHẤT CỦA MÔ ĐUN

- Vị trí: Môn học được bố trí sau khi học xong các môn chung và trước các mônhọc/mô đun đào tạo nghề chuyên nghiệp

- Tính chất: Là môn học cơ sở bắt buộc học

II MỤC TIÊU MÔ ĐUN

- Xây dựng được các trang chủ, trên đó có các ứng dụng phục vụ các mục tiêu cụthể, có khả năng liên kết đến các trang Web khác

- Trình bày trên trang Web hệ thống thông tin tổng hợp bao gồm: văn bản, hìnhảnh, âm thanh với nhiều kiểu định dạng khác nhau

- Ứng dụng một số ngôn ngữ lập trình cơ bản vào trang WEB phục vụ công việctính toán, tạo các hiệu ứng trên trang WEB

- Tạo được các trang Web động liên kết đến các hệ CSDL cho truớc hoặc xây dựngmới phục vụ cho các ứng dụng, cụ thể trong chương trình phát triển CNTT quốc gia

- So sánh sự khác nhau giữa các ngôn ngữ lập trình trên Web từ đó chọn công cụphù hợp trong thiết kế và thi công trang WEB bảo đảm kỹ thuật và tính mỹ thuật

Trang 7

CHƯƠNG 1 NGÔN NGỮ HTML

MỤC TIÊU

Sau khi đọc xong chương này bạn đọc sẽ có được những kiến thức sau:

- Trình bày được một văn bản tương tự như trong Microsoft Word như căn lề,định dạng chữ (gạch chân, bôi đậm, in nghiêng ), thay đổi font chữ, màuchữ, đánh dấu danh sách, các thẻ định dạng văn bản trong HTML

- Sử dụng thành thạo các thẻ tạo bảng, tạo hàng, tạo cột; cách trộn ô và bướcđầu thiết kế được một trang web sử dụng bảng để chia bố cục.Hình ảnh và siêuliên kết trong HTML

- Chèn được ảnh và các liên kết có đầy đủ thuộc tính theo chuẩn

- Tạo được một form đăng nhập hoàn chỉnh với text, password, selectbox

NỘI DUNG CỦA CHƯƠNG

- Tổng quan về HTML

- Thẻ định dạng văn bản

- Hình ảnh và siêu liên kết

- Giao tiếp với máy chủ bằng thẻ form

- Các thành phần nâng cao trong HTML

- Bài tập và trắc nghiệm

1.1 TỔNG QUAN VỀ HTML

1.1.1 HTML là gì?

HTML viết tắt cho Hyper Text Markup Language có thể dịch là "Ngôn ngữ

đánh dấu siêu văn bản" là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang

web, nghĩa là các mẫu thông tin được trình bày trên World Wide Web Được định

nghĩa như là một ứng dụng đơn giản của SGML - Standard Generalized Markup

Language - một hệ thống tổ chức và gắn thẻ yếu tố của một tài liệu, vốn được sử dụng

Trang 8

trong các tổ chức cần đến các yêu cầu xuất bản phức tạp, HTML giờ đây đã trở thànhmột chuẩn Internet do tổ chức World Wide Web Consortium (W3C) sáng lập và duytrì Phiên bản hiện này của nó là HTML 5.

HTML có tác dụng giúp cho trình duyệt web có thể biết cách thể hiện một trangweb như thế nào từ văn bản, hình ảnh cho đến các siêu liêu kết

HTML không có gì khác ngoài văn bản được đánh dấu theo các thẻ - tag vàthuộc tính của chúng – attribute

Các loại thẻ đánh dấu cơ bản trong HTML:

 Đánh dấu Có cấu trúc miêu tả mục đích của phần văn bản Ví dụ <h1>Giáo

trình HTML</h1> sẽ điều khiển phần mềm đọc hiển thị "HTML" là đề mụccấp một

 Đánh dấu trình bày miêu tả phần hiện hình trực quan của phần văn bản bất kể

chức năng của nó là gì Ví dụ, <b>boldface</b> sẽ hiển thị đoạn văn bản

được in đậm: boldface Cách dùng đánh dấu trình bày này bây giờ không còn được khuyên dùng mà nó hầu như được thay thế bởi CSS – Cascade Style

Sheet được giới thiệu tại Chương 2 của giáo trình

 Đánh dấu siêu liên kết chứa phần liên kết từ trang này đến trang kia, từ webiste

này đến website khác

Ví dụ:

<a href="http://www.wikipedia.org/">Wikipedia</a>

sẽ hiển thị từ Wikipedia như là một liên kết ngoài đến một trang web khác

 Các phần tử thành phần điều khiển tạo ra các đối tượng Ví dụ như các nút ấn.

1.1.2 Cấu trúc của file HTML

1.1.2.1 Cấu trúc thẻ đánh dấu trong HTML

Một tài liệu HTML bao gồm các thành phần được đánh dấu bởi các thẻ Dựavào các thẻ đó trình duyệt web sẽ biết cách hiển thị nội dung của tài liệu HMTL nhưthế nào

Trang 9

Một tag có 3 thành phần chính: start tag – thẻ mở, end tag – thẻ đóng vàattribute – thuộc tính Thuộc tính của thẻ được đặt trong thẻ mở, giữa thẻ mở và thẻđóng là nội dung tương ứng với thẻ đó.

Cấu trúc thông thường của một thẻ là:

<tag attribute1 = “value” attribute2 = “value”>content</tag>Nếu một thẻ không có nội dung sẽ được gọi là thẻ rỗng và khi đó chúng ta cóthể không cần dùng đến thẻ đóng mà kết thúc thẻ mở với dấu “/”

Ví dụ với đoạn mã HTML sau:

<h3> Tieu de - Heading 3 – Bao gom the dong, the mo va noi dung</h3>

<p textalign = “right”>The p voi thuoc tinh text align va noi dung Cung co the chua nhung the khac ben trong noi dung.</p

<input type= “text” value= “The input voi cac thuoc tinh”

Trong đó:

Trang 10

 Bên trong cặp thẻ <head><head> có thể chứa:

o Cặp thẻ <title> văn bản </title> đánh dấu tiêu đề cho trang web

o Các thẻ <meta/> quy định một số thông tin cho trang web ví dụ quy địnhtrang web sử dụng tiếng việt (Unicode)

o Các thẻ <link/> để liên kết với các file khác Phổ biến nhất là file CSS

o Các cặp thể <script>Mã lập trình</script> để chứ các đoạn mãlập trình như Vbscript, Javascript sẽ được đề cập tới ở chương III của giáotrình

 Bên trong thẻ <body></body> Sẽ chứa các đoạn văn bản và các thẻ đánh dấutoàn bộ nội dung của một trang web và cũng có thể chứa những đoạn mã lậptrình với cặp thẻ <script></script>

Ngoài ra để ghi chú thích, tiện cho việc xem tag HTML hoặc cập nhật một trangWeb, ta có thể sử dụng thẻ ghi chú trong HTML <! nội dung ghi chú

> Cặp thẻ này chỉ có tác dụng cho người lập trình đánh dấu các đoạn mã trong fileHTML, trình duyệt sẽ không hiện thị nội dung có trong thẻ này

Chú ý: Một tài liệu HTML sẽ được bỏ qua các dấu xuống dòng Ví dụ bạn đặt một

đoạn văn như định dạng như sau với cặp thẻ <body></body>

Trang 11

Hình 1.2 Kết quả mô tả thẻ body

Một file HTML có thể được lưu với phần mở rộng là html hoặc htm đều được.

Vậy cấu trúc cơ bản của một file HTML như sau:

XHTML - viết tắt của Extensible HyperText Markup Language được dịch là

Ngôn ngữ Đánh dấu Siêu văn bản Mở rộng - là một ngôn ngữ đánh dấu kế thừa từHTML, nhưng có cú pháp chặt chẽ hơn XHTML 1.0 là Khuyến cáo của World WideWeb Consortium (W3C) vào ngày 26 tháng 2 năm 2000

Về phương diện kĩ thuật, XHTML là kiểu tài liệu thâu nạp HTML, tái cấu trúclại dưới dạng XML Các dạng tài liệu thuộc họ XHTML tất cả đều dựa trên XML, vàđược thiết kế để làm việc tuyệt đối với các trình đại diện người dùng hiểu XML.XHTML là thế hệ kế tiếp HTML

1.1.3.2 Sự khác nhau giữa HTML và XHTML

 Các phần tử phải được lồng nhau đúng cách:

Trang 12

Trong HTML một số phần tử có thể được lồng vào nhau không đúng cách

<b><i>This text is bold and italic</b></i>

Trong XHTML tất cả các phần tử phải được lồng vào nhau đúng cách, thẻ đóng

và thẻ mở luôn phải đi theo một cặp:

<b><i>This text is bold and italic</i></b>

 XHTML phải được đặt ở dạng chuẩn (well-formed)

Tất cả các phần tử XHTML phải được đặt lồng bên trong phần tử gốc <html>.Tất cả các phần tử khác có thể có các phần tử con Các phần tử con phải đi theo cặp vàphải được đặt lồng nhau đúng cách bên trong phần tử mẹ Cấu trúc tài liệu cơ bản là:

<html>

</html>

 Tên gọi của thẻ đều phải viết thường

Do XHTML kế thừa cú pháp của XML và mỗi trang XHTML đều là các ứngdụng XML cho nên XHTML có phân biệt chữ hoa chữ thường, điều không có ởHTML Với HTML thì các thẻ như <br> và <BR> là hiểu là giống nhau nhưng mộtkhi chúng ta đã xác định trang web của mình là XHTML thì trình duyệt sẽ dịch hai thẻnày là khác nhau

 Tất cả các thẻ XHTML phải được đóng lại

Phần tử không rỗng phải có một thẻ đóng HTML chấp nhận cách viết dưới:

Trang 13

<p>This is a paragraph

<p>This is another paragraphXHTML đòi hỏi phải viết lại phần trên thành:

<p>This is a paragraph</p>

<p>This is another paragraph</p>

 Các thẻ rỗng cũng phải được đóng lại

Các thẻ rỗng hoặc là phải có thể đóng hoặc là thẻ mở phải được kết thúc bằng /

> HTML chấp nhận cách viết dưới:

This is a break<br>

Here comes a horizontal rule:<hr>

Here's an image <img src="happy.gif" alt="Happy face">XHTML đòi hỏi phải viết lại phần trên thành:

This is a break<br />

Here comes a horizontal rule:<hr />

Here's an image <img src="happy.gif" alt="Happy face"/

1.1.4 Tạo file HTML đầu tiên

Có thể dùng rất nhiều phần mềm để soạn thảo mã nguồn HTML như Notepad,Visual studio, Dreamweaver, PHP Designer… Khi bắt đầu học về HTML bạn đọc nênchọn một phần mềm như notepad++ để soạn thảo HTML Sử dụng phần mềmnotepad++ không có nhiều tiện ích như Visual Studio hay Dreamweaver nhưng

Trang 14

Notepad++ sẽ giúp bạn nhớ mã nguồn dễ hơn Tuy nhiên, khi phát triển 1 ứng dụngweb lớn bạn nên chọn một phần mềm có nhiều tiện ích Trong giáo trình nay, chúngtôi đã chọn phần mềm Adobe Dreaweaver cs5 để soạn thảo mã nguồn.

Hình 1.3 Màn hình khởi động của Dreamweaver

Sau khi file HTML được tạo, chúng ta có thể xem trang này ở chế độ Design cónghĩa là nó đã được hiện thị như trên trình duyệt Ta chọn Tab Code để có thể chuyển

về chế độ lập trình

Hình 1.4 Cửa sổ tạo file HTML ở chế độ Design

Ta sẽ được màn hình như sau:

Trang 15

Hình 1.5 Cửa sổ tạo file HTML ở chế độ Code

Ta có thể thấy Dreamweaver đã tạo ra cấu trúc của một file HTML hay chính xáchơn là một file XHTML với Doctype là XHTML 1.0 Transitional, thẻ meta định dạngcharset là UTF-8 giúp người sử dụng có thể dùng tiếng Việt cho trang web

Dưới đây là mã nguồn của một trang HTML cơ bản:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Chương này cung cấp những kiến thức cơ HMTL cơ sở của mọi

website trên thế giới Qua đó có thể hiểu được cấu trúc cơ bảncủa 1 trang web và các thành phần trên đó Kết thúc chương nàybạn có thể xây dựng được 1 trang web…

</body>

</html>

Khi lưu file, Dreamweaver sẽ mặc định đuôi mở rộng của file là html Ta có thểxem tran web của mình ở chế độ design Dreamweaver như hình vẽ dưới:

Trang 16

Hình 1.6 Cửa sổ tạo file HTML có nội dung ở chế độ Design

Ta có thể mở file vừa lưu bằng trình duyệt Internet Explorer hoặc Firefox haybất kỳ trình duyệt web phổ biến nào chạy trên máy tính

Hình 1.7 File HTML được mở bằng trình duyệt Firefox

1.2 THẺ ĐỊNH DẠNG VĂN BẢN

1.2.1 Thẻ định dạng đoạn văn

Các bài viết trên các website được chia thành nhiều đoạn văn có định dạng giốngnhư một văn bản word Với HTML, chúng ta có thể dùng cặp thẻ <p></p> để phânchia nội văn bản thành từng đoạn như vậy

Các thuộc tính của thẻ p:

1 Align

left, right,center,justify

Căn lề văn bản giống như trên tài liệu word office Chỉđược sử dụng trong DTD Transitional và Frameset

Trang 17

TT Tên Giá trị Mô tả

2 Dir ltr, rtl Hướng của văn bản từ trái qua phải hay từ phải qua trái

<p>Trường Cao đẳng nghề Công nghệ cao Hà Nội - Công trình

trọng điểm chào mừng Đại lễ 1000 năm Thăng Long-Hà Nội là cơ

sở đào tạo công lập trực thuộc UBND TP Hà Nội được thành lập theo quyết định số 808/QĐ-LĐTBXH ngày 25-6-2009 của Bộ trưởng

Bộ Lao động Thương binh và Xã hội.</p>

<p align="right"> Trường được đầu tư xây dựng hiện đại, trang thiết bị dạy học theo tiêu chuẩn Quốc gia và Thế giới, nhằm đào tạo nguồn nhân lực chất lượng cao cho Thủ đô Hà Nội và khuvực kinh tế trọng điểm Bắc Bộ </p>

<p align="center">Trường là địa điểm tổ chức Hội thi thiết bị dạy nghề tự làm toàn quốc lần thứ 3, hội thi học sinh giỏi nghề Quốc gia tháng 7 năm 2010 </p>

</body>

</html>

Chúng ta sẽ nhận được 2 đoạn văn, đoạn văn thứ nhất không có thuộc tính align

sẽ được mặc đính căn trái, đoạn văn thứ 2 được căn bên phải

Trang 18

Hình 1.8 Mở file vừa tạo bằng trình duyệt

1.2.2 Thẻ định dạng kiểu chữ

Khi trình bày một trang Web, có lúc cần nhấn mạnh hay để tạo sự khác biệt, tacần phải hiển thị văn bản ở các dạng đậm, nghiêng, gạch chân HTML có các tagđịnh dạng kiểu chữ như sau:

1 <u>Ðây là tag gạch chân</u> Ðây là tag gạch chân

2 <i>Ðây là tag nghiêng </i> Ðây là tag nghiêng

3 <tt>Ðây là tag chữ đánh máy</tt> Ðây là tag chữ đánh máy

4 <b>Ðây là tag đậm </b> T là tag đậm

5 <em>Ðây là tag em</em> Ðây là tag em

6 <strong>Ðây là tag strong</strong> Ðây là tag strong

7 <strike>Ðây là tag strike</strike> Ðây là tag strike

Với một bài viết đầy đủ trên trang web không thể thiếu một tiêu đề nổi bật Tiêu

đề không chỉ đơn giản là định dạng cho một dòng nào đó in đậm hay in nghiêng mà có

Trang 19

nhiều tác dụng khác ngay cả với bộ máy tìm kiếm như Google HTML có một nhómthẻ dành cho việc đánh dấu tiêu đề Đó là nhóm thẻ heading Có 6 kích cỡ cho tiêu đềtheo thứ tự lớn dần, đó là: <h1>, <h2>, <h3>, <h4>, <h5> và <h6>.

Danh sách Unordered List được bắt đầu với thẻ <ul> và kết thúc bằng thẻ </ul>

Và mỗi mục của danh sách được đặt trong cặp thẻ <li></li> Đối với các danhsách đa cấp chúng ta có thể lồng một danh sách khác trong cặp thẻ <li></li> nghĩa làđặt cặp thể <ul></ul> vào trong cặp thẻ <li></li>

Ngoài ra trong cặp thẻ <li></li> chúng ta vẫn có thể kết hợp với các thẻ khác

Ví dụ với đoạn mã sau:

<ul>

Trang 20

Tương tự như Unorder List về cấu trúc chỉ khác là Order List bắt đầu với thẻ

<ol> và kết thúc bằng thẻ </ol> Ngoài ra order list không tự động xếp cấp độ nhưunorder list (thể hiện ở dấu bullet) mà các mục trong một danh sách luôn được đánh số

từ 1 hoặc có thể hiểu order list chỉ có tác dụng với một cấp

Ví dụ với đoạn mã sau:

<ol>

<li>

<ol>

Trang 22

thẻ font đã được loại bỏ Tuy nhiên, hầu hết các website hiện nay vẫn sử dụng phiên

bản HTML4 nên thẻ <font> vẫn còn nguyên giá trị

Để định dạng font cho một đoạn văn bản nhất định nào đó bạn đặt nó trong cặpthẻ <font></font>

Các thuộc tính của thẻ font:

- rgb(x,y,z)

- #xxxxxx

- tên mầu

Đánh dấu mã màu cho font bạn chọn Có thể là

mã màu RBG với x, y là số nguyên từ 0-255, mãmàu theo thập lục phân hoặc có thể là tên màu

2 size 1 - 7 Cỡ chữ từ 1 – 7 được tính theo đơn vị của

HTML

Trang 23

3 face tên font 1,

tên font 2

Tên các font muốn sử dụng, trình duyệt sẽ hiểnthị font đầu tiên nếu không có sẽ chọn lần lượt

Ví dụ: face= “tahoma, arial”

Bảng 1.4 Các thuộc tính của thẻ font

1.2.6 Thực hành

Bạn hãy thực thi giao diện sau:

Hình 1.9 Thẻ định dạng font trong HTML

Trong đó:

- Tiêu đề là sử dụng tiêu đề số 3 có gạch chân

- Đoạn văn căn lề 2 bên (lưu ý do đoạn văn ngắn nên ta phải thu nhỏ cửa sổ trìnhduyệt để có thể thấy rõ hơn)

- Chữ HTML sử dụng font Arial, size 4 màu đỏ

1.3 HÌNH ẢNH VÀ SIÊU LIÊN KẾT

Để một trang web hoàn thiện và có mỹ quan hơn thì chỉ có văn bản thông thườngthôi chưa đủ mà cần phải có sự đóng góp của các mối liên kết và hình ảnh Chúngđóng góp một phần rất quan trọng vì vậy tiếp theo đây tôi sẽ giới thiệu tới các bạn 2thẻ đánh dấu cho hình ảnh và siêu liên kết trong HTML đó là thẻ <img> - Image vàthẻ <a> - Anchor

Trang 24

1.3.1 Thẻ hình ảnh <img>

Thẻ <img> là một thẻ không có nội dung nên nó là không có thẻ đóng </img>

Các thuộc tính của thẻ img:

3 width,

Đây là độ rộng và cao mà bạn muốn hiển thị ảnh Không phải là kích thước thực tế của ảnh Nếu không có ảnh sẽ được hiện thị 100% Nếu chỉ có 1trong 2 thì chiều còn lại sẽ hiển thị theo tỉ lệ thuận Ví dụ một bức ảnh có kích thước là 200px

* 200px bạn có thể hiện thị trên webiste là width =20px height = 30px hoặc chỉ một trong 2 thuộc tính này thuộc tính còn lại tự động tính cho bạn

4 Align vị trí Ví trị căn của ảnh so với văn bản

5 vspace pixel Độ rộng khoảng trắng 2 bên trái và phải của ảnh

6 hspace pixel Độ rộng khoảng trắng 2 bên trên và dưới của ảnh

Bảng 1.6 Các thuộc tính của thẻ img

Như vậy cấu trúc cơ bản của thẻ img là: <img src= “path” alt= “text”/>Bây giờ chúng ta sẽ đi chi tiết vào một số thuộc tính của thẻ img

Trang 25

1.3.1.1 Đường dẫn của ảnh

Với giá trị đường dẫn của ảnh bạn có thể để bất cứ đường dẫn nào kể cả cácđường dẫn trên website như http://domain.com/images.jpg hay đường dẫn local (trênmáy tính) Đối với đường dẫn local thì các bạn phải hiểu được thế nào là đường dẫntương tối và đường dẫn tuyệt đối

Đường dẫn tuyệt đối được bắt đầu từ tên ổ cứng cho đến các thư mục con và đếntên file Ví dụ C:\html\picture.jpg Như vậy chỉ cần file ảnh picture.jpg ở cố định đúngtại thư mục html thuộc ổ C bạn có thể trỏ tới nó dù file HTML của bạn ở bất kỳ đâu

Nhưng trong trường hợp bạn để file HTML và ảnh cùng trong thư mục html vàthường là khi làm việc chúng ta luôn gom các file lại Và bạn sử dụng đường dẫn tuyệtđối, hãy thử tưởng tượng bạn copy thư mục đó đi cho khác hay chia sẻ cho bạn bè và

họ lưu thư mục đó ở ổ D Chắc chắn bức ảnh sẽ không hiện lên

Vì vậy người ta luôn dùng đường dẫn tương đối cho trường hợp này và áp dụngcho nhiều thứ khác không chỉ riêng HTML Đường dẫn tương đối là tùy thuộc vào vítrí của file trỏ tới một file khác

Ví dụ ta có một cây thư mục như sau:

Hình 1.18 Ví dụ cây thư mục

Nguyên tắc của đường dẫn tương đối là tính từ vị trí của file mà trỏ tới file khác với:

- /tên thư mục/file: cứ mỗi / bạn ra đi ra ngoài một cấp thư mục sau đó trỏ tới

file thuộc cấu trúc thư mục được đặ trong đường dẫn

- tên thư mục/file: tương ứng với bạn bạn trỏ tới file thuộc thư mục nằm cùng

cấp với file của bạn

Ví dụ:

Trang 26

- Để hiển thị ảnh picture.jpg trên file baitap1.html bạn có thể dùng đường

dẫn sau: “images/pictuer.jpg” vì thư mục images nằm cùng cấp với filebaitap1.html

- Để hiển thị ảnh picture.jpg trên file baitap2.html bạn có thể dùng đường

dẫn sau: “ /images/pictuer.jpg” Dấu / ứng với bạn đã ra khỏi thư mục chứ file baitap2.html 1 cấp nghĩ là thư mục html khi đó bạn tiếp tục đi từ thư mục html vào thư mục images và trỏ tới picture.jpg.

- Để hiển thị ảnh picture.jpg trên file baitap3.html bạn chỉ cần dùng đường

dẫn sau: “pictuer.jpg” vì file picturer.jpg nằm cùng cấp với file baitap3.html

Ngoài ra phương pháp sử dụng đường dẫn tương đối cũng được sử dụng với môitrường internet với URL cũng như đường dẫn của file

Tuy nhiên điều đặc biệt khi sử dụng đường dẫn ảnh với url có thể sử dụng dạngđường dẫn tương đối sau: “/path/picture” thì đường dẫn đó sẽ được hiểu là

“domain/part/picture”

Sở dĩ tôi muốn nói kỹ về đường dẫn ảnh như vậy là vì nó rất quan trọng và hơitrừu tượng đối với các bạn mới bắt đầu mà chưa hiểu rõ về khái niệm đường dẫn tươngđối và đường dẫn tuyệt đối

1.3.1.2 Căn chỉnh vị trí của ảnh

Khi một bức ảnh đi kèm với một đoạn văn hay thành phần nào đó bạn có thể có

căn chỉnh vị trí của ảnh so với các thành phần đó với thuộc tính align.

Chú ý: Ở đây thuộc tính align của ảnh khác với của thẻ p hay các thẻ khác Nó cócác giá trị khác và được hiểu là cách các thành phần khác hiển thị thế nào với bức ảnh đó

Thuộc tính valign text có các giá trị:

- top: Văn bản sẽ hiển thị ngang với phần trên của bức ảnh.

- middle: Văn bản sẽ hiển thị ngang với phần trên của bức ảnh.

- bottom: Văn bản sẽ hiển thị ngang với phần dưới của bức ảnh.

Trang 27

Hình 1.19 Căn chỉnh vị trí của ảnh với thuộc tính align

1.3.1.3 Thuộc tính alt

Khi trang Web được xem bằng trình duyệt mà người sử dụng tắt việc trình bàyhình ảnh để tiết kiệm thời gian download, hoặc đường dẫn ảnh không chính xác, nó sẽkhông được hiển thị Thuộc tính alt = "" cho phép thay thế vào vị trí hình ảnh mộtchuỗi văn bản mô tả nó

Ví dụ: <img src = "vidu.jpg" alt = "Ví dụ"/>

Hình 1.20 Thuộc tính alt của thẻ <im/> trên trình duyệt Internet Explorer

Ta thấy với trình duyệt Internet Explorer, một bức ảnh không tồn tại sẽ được hiểnthị như trên và được thay thể bởi từ “Ví dụ” Còn với các trình duyệt khác đơn thuầnchỉ là thay thế bằng giá trị của thuộc tính alt

1.3.1.4 Độ rộng và chiều cao của ảnh

Trong quá trình biên tập website có thể bạn không chuẩn bị được những bức ảnh

có kích thước chuẩn như bạn muốn thể hiện trên webiste vì vậy bạn cần sử dụng thuộc

Trang 28

tính width và height để chỉnh lại kích thước của ảnh dù to hay nhỏ về theo đúng ýmình để có được bố cục website đẹp mắt

Hình 1.21 Quy định độ rộng và chiều cao của ảnh với width và height

1.3.1.5 Khoảng cách xung quanh ảnh

Để giãn cách ảnh so với văn bản xung quanh nó tạo độ thông thoáng và dễ nhìn,chúng ta có thể sử dụng 2 thuộc tính vspace cho chiều dọc và hspace cho chiều ngang

Hình 1.22 Giãn cách ảnh với thuộc tính vspace và hspace

Trang 29

1.3.2 Thẻ đánh dấu siêu liên kết

Khi lướt qua các website trên internet chúng ta luôn nhận ra rằng có các liên kết

từ website này tới website khác, từ bài viết này từ bài viết khác được bố trí ở mọi nêntrên trang web.Các siêu liên kết còn giúp chúng tra chuyển tới vị trí của một thànhphần nào đó trên trang web một cách nhanh chóng Ta thường gặp trường hợp này ởnhưng trang web có nôi dụng dài và sẽ có một siêu liên kết cho bạn nhấn và để quaylên đầu trang Một trang web sẽ chết nếu không có các liên kết đó

Để đánh dấu siêu liên kết các bạn sẽ dùng thẻ <a> Cấu trúc của nó là:

Trong đó:

- href: thuộc tính bắt buộc là một liên kết tới file hoặc một URL.

- target: cách thức mở trang mới Có nhiều giá trị cho thuộc tính này nhưng

trên thực thế chỉ có một giá trị có tác dụng trực quan nhất đó là “_blank” Đốivới các trình duyệt cũ như Internet Explorer 6 sẽ mở liên kết tại một cửa sổmới, còn các trình duyệt hỗ trợ tab hiện nay sẽ mở ra một tab mới Và nếubạn để trông hoặc không có target trình duyệt sẽ chuyển liên kết ngay tại tabhoặc cửa sổ hiện hành

- title: text hiển thị khi di chuột qua linh liên kết.

Ngoài liên tới tới một trang web khác hay một file nào đó Thẻ <a> còn giúpchúng ta liên kết tới một số ứng dụng như mail hay Yahoo Message

Để liên kết mới một ứng dụng mail với một địa chỉ mail nào đó bạn có thể dùng

href= “mailto:diachimail” Khi bạn click vào liên kết này một cửa sổ sẽ hiện lên hỏi

bạn sẽ chọn ứng dụng nào để gửi mail Ví dụ như:

Khi bạn click vào cửa sổ chọn ứng dụng sẽ hiện lên

Trang 30

Hình 1.23 Cửa sổ chọn ứng dụng của trình duyệt Firefox

Khi đó bạn chọn ứng dụng mà bạn muốn địa chỉ mail sẽ tự động điền cho bạn.Bạn cũng có thể link nó tới ứng dụng Yahoo Messenger hoặc Skype với giá trị

thuộc tính lần lượt là: ymsr:yahoo_account, skype:skype_account Khi bạn click vào cửa

sổ chọn ứng dụng cũng sẽ mở và bạn chỉ cần nhấn nút OK để mở ứng dụng, bạn có thể

sẽ phải đăng nhập nhưng cửa sổ chat với tài khoản được cung cấp vẫn sẽ hiển thị

Hơn nữa chúng ta không chỉ có thể tạo liên kết bằng văn bản mà chúng ta có thểtạo bằng hình ảnh nữa Chỉ cần chèn thẻ <img/> và cặp thẻ <a></a> là chúng ta đã cómột liên kết bằng hình ảnh

Ví dụ

<a href= “http://hht.edu.vn”

title= “Trường cao đẳng nghề Công nghệ cao Hà Nội”>

</a>

Liên kết nội bộ trong trang web

Để chuyển từ phần này sang phần khác trên cùng 1 trang web ví dụ từ phần trêncủa trang web ta có thể chuyển xuống phần cuối nếu ta sử dụng thẻ a kết hợp với thuộctính ID của phần tử HTML ( id sẽ được giới thiệu kỹ hơn vào phần cuối của chương)

Ví dụ: ta có thẻ <table id= “top”> </table> đặt ở trên cùng của trang web Vàsau rất nhiều nội dung khác, ta đặt một thẻ <a href= “#top”>Lên đầu trang</a> ở dưới

Trang 31

cùng thì khi ta click và siêu liên kết này URL sẽ xuất hiện thêm “#top” ở sau cùng Vàtrình duyệt sẽ chuyển khung nhìn tới chính cái bảng có id = “top” mà không hề load lạitrang web.

Như vậy chúng ta có thể kết hợp thẻ <img/> và các thẻ đánh dấu văn bản khác đểtạo ra nhưng liên kết linh hoạt và đẹp mắt

1.4 GIAO TIẾP VỚI MÁY CHỦ BẰNG THẺ FORM

Form là thành phần rất quan trọng trên 1 trang web Thể hiện quen thuộc nhấtcủa form chính là lúc bạn muốn đăng nhập vào một hệ thống nào đó, bao giờ hệ thốngcũng đưa ra 2 hộp văn bản (textbox) một cho tài khoản đăng nhập, một cho mật khẩu,một nút (button) đăng nhập và có thể có thêm một hộp kiểm (checkbox) để bạn đánhdấu lưu trạng thái đăng nhập

Cách thức hoạt động của form là bạn điền dữ liệu vào các thành phần của formsau đó nhấn nút gửi hoặc có thể nhấn Enter để gửi – submit dữ liệu lên server Dữ liệu

sẽ được sử lý tại đó với một ngôn lập trình nào đó như PHP chẳng hạn Như vậy ở đây,với HTML chúng ta sẽ tìm hiểu các đánh dấu một form như thế

Một form bao gồm các yếu tố sau: cách thức gửi dữ liệu, đường dẫn sẽ nhận dữliệu, các thành phần trong form mỗi thành phần bao gồm 3 thuộc tính quan trọng đểmáy chủ có thể phân biệt và xử lý dữ liệu, đó là: tên, loại và giá trị của nó

- Method : thuộc tính bắt buộc Nó quy định các thức gửi dữ liệu lên server.

Thuộc tính này có 2 giá trị get và post.

- Action: thuộc tính bắt buộc là đường dẫn mà dữ liệu sẽ được submit tới Nếu

để giá trị trống dữ liệu sẽ được mặc định gửi tới chính URL hiện tại

Trang 32

- Enctype: cách thức mã hóa dữ liệu trước khi gửi lên server Thuộc tính này

không bắt buộc Nhưng bạn cần sử dụng nó nếu bạn muốn upload một filelên server Các giá trị:

 application/x-www-form-urlencoded: Giá trị mặc định.

 multipart/form-data: Giá trị này được sử dụng khi bạn muốn upload file.

 text/plain: Các dấu khoảng trắng sẽ được chuyển thành dấu +.

Sự khác nhau giữa method post và get:

Với post dữ liệu sẽ được gửi ngầm định, với get dữ liệu sẽ được hiển thị tại urldưới dạng các tham số đường link Ví dụ ta tạm thời sử dụng một form đăng nhập đơngiản sau:

</form>

form này sẽ được hiển theo hình sau:

Hình 1.24 Một form đơn giản trên trình duyệt

Với post sẽ không có gì nhận ra được ngoài việc sau khi bạn submit trình duyệt

sẽ chuyển tới đường dẫn được khai báo trong với thuộc tính action Còn với get bạn sẽnhận ra được các giá trị của mình ngay trên đường dẫn đó Ví dụ bạn nhập username là

Trang 33

“abc” password là “123” và nhất nút “Submit Query” Trình duyệt sẽ chuyển tớiđường dẫn:

xuly.php?username=abc&password=123&btnSubmit =Submit+Query

Như vậy mọi giá trị của các thành phần trong form đều được hiển thị trên URL

và chúng ta nhận ra rằng các tham số đường link nối với phần chính của URL bằngdấu “?” phân cách với nhau bằng dấu “&” và có dạng “tên = giá trị”

1.4.2 Các thẻ input

Thẻ input dùng để tạo ra cách thành phần trên form bao gồm: text, password,checkbox, radio, button, submit, reset Loại thẻ input được quy định với thuộc tínhtype với các giá trị tương ứng Các thẻ input tuy có các tác dụng khác nhau nhưng đều

có chung một cấu trúc:

Trong đó thuộc tính name là bắt buộc, cần phải đặt tên khác nhau để server xử lýchính xác Giá trị của thuộc tính type là text Thuộc tính value mặc định là rỗng hoặc

“Submit Query” đối với thẻ input submit

1.4.2.1 Thẻ input text và password

Về cơ bản thẻ input text và password có định dạng giống nhau nhưng thẻ inputpassword sẽ thay thế các ký tự nhập vào bằng các dấu * hoặc  Ngoài thuộc tínhname và value, 2 thẻ này còn có thêm thuộc tính size = “giá trị” để đánh dấu độ rộngcủa text box

Ví dụ với đoạn mã bên dưới

Ta sẽ có được form như sau:

Trang 34

Hình 1.25 Thẻ input text và password

1.4.2.2 Thẻ input checkbox

Thẻ input checkbox dùng để tạo ra các hộp kiểm cho bạn đánh dấu một hoặcnhiều lựa chọn không bắt buộc nào đó Ví dụ như bạn có muốn lưu trạng thái đăngnhập không

Các bạn thường thấy 1 checkbox luôn đi kèm text mô tả cho nó nhưng trên thực

tế bạn chỉ nhận được duy nhất một checkbox có dạng mà thôi Và bạn có thể sửdụng bất kỳ thẻ định dạng văn bản nào để tạo phần mô tả cho checkbox đó

Tôi xin được giới thiệu thêm 1 thẻ nữa thường được dùng trong form cho mụcđích này Nó không chỉ áp dụng cho thẻ check box mà có thể áp dụng các thẻ inputkhác Đó là thẻ <label>

Tuy thẻ label sinh ra là để mô tả cho thẻ input nhưng thực tế nó chẳng có tácdụng gì ngoài hiển thị một đoạn văn bản Tùy vào cách bạn sắp xếp và định dạng màtạo ra được một form cân đối

Trong một số trường hợp bạn cần dùng nhiều checkbox cho cùng một mục đích

ví dụ bạn muốn xóa ngẫu nhiên một số bài viết trong danh mục quản lý tin tức Bạn sẽđánh dấu các checkbox và submit Khi ấy bạn không thể đặt cho mỗi checkbox mộttên được vì các checkbox được chọn ngẫu nhiên mà tên thì không linh động Và hướnggiải quyết HTML cung cấp đó là tạo một nhóm các checkbox bằng cách đặt tên chúngnhư nhau Điều mà thẻ input text và password không nên áp dụng Với cách này dữliệu sẽ được gộp lại dưới một cái tên và tùy vào ngôn ngữ lập trình mà cách sử lý sẽ

Trang 35

khác nhau Như với bài toán xóa bài viết như trên server sẽ lấy ra các mã bài viết cầnxóa và thực hiện thao tác.

Ví dụ như ta có các checkbox như sau:

Hoặc

Về sự khác nhau của 2 cách đặt tên này sẽ được nói trong phần lập trình PHPcủa giáo trình

Ngoài ra một thuộc tính quan trọng nữa của thẻ input checkbox là checked và giá trị

duy nhất của nó là checked Nếu ta đặt thêm checked= “checked” cho thẻ input

checkbox thì checkbox đó sẽ được đánh dấu

Ví dụ:

<h3>Đăng ký thông tin người sử dụng</h3>

<b>Sở thích của bạn:</b>

<input type="checkbox" name="hobbies" value="0"

checked="checked"/>

<input type="checkbox" name="hobbies" value="2"

checked="checked"/>

<br/>

</form>

Trang 36

Form chúng ta nhận được trên trình duyệt là:

<h3>Đăng ký thông tin người sử dụng</h3>

Trang 37

<input type="radio" name="age" value="1" checked=

“checked”/>

Thẻ input file có riêng cho mình một thuộc tính đó là accept = “kiểu file” Thuộctính này dùng để quy định loại file mà bạn được upload Có 3 kiểu file cơ bản là;

 audio/* : Các file âm thanh

 video/* : Các file video

 image/*: Các file hình ảnh

Lưu ý:

 Dấu “*” có nghĩ là chấp nhất tất các đuôi mở rộng, bạn có thể thay thế nóbằng đuôi mở rộng nhất định như audio/mp3, video/avi, image/ipg

Trang 38

 Bạn có thể không sử dụng thuộc tính này để upload các kiểu file khác nhưrar, rip

 Thuộc tính này không áp dụng cho trình duyệt Internet Explorer và Safari

1.4.4 Input button, submit và reset

Đây là các thẻ tạo ra các nút nhấn trên form Cấu trúc của chúng cũng như cácthẻ input khác Tuy nhiên chúng ta cần lưu ý một chút về thuộc tính value của chúng.Giá trị của thuộc tính value chính là text hiện thị trên nút Nếu bạn để không sử dụngthuộc tính value thì mặc định đối với thẻ input submit là “Submit Query” của thẻ inputreset là “Reset” còn với input button thì không có gì

form được hiển thị như sau:

Hình 1.28 Thẻ input button, submit và reset

Tác dụng của 3 thẻ input này:

 Button: chỉ tác dụng khi đi kèm với các thuộc tính sự kiện và Javascript.

Như khi được click thì xử lý một chức năng nào đó

 Reset: một dạng button đặc biệt, khi sử dụng sẽ khởi tạo lại toàn bộ dữ

liệu ban đầu của các thành phần trong bảng

 Submit: một dạng button đặc biệt, gửi dữ liệu lên server và điều đặc biệt

là nếu trong form có 1 input submit thì chúng ta có thể ấn enter tại cácinput textbox hay password để gửi dữ liệu đi

Trang 39

1.4.5 Danh sách thả xuống với thẻ select

Một thành phần khác của form ngoài các thẻ input là thẻ select dùng để tạo ramột hộp chọn các giá trị theo danh sách được thả xuống hay người ta hay gọi là DropDown List Cũng có thể nói có tác dụng như là một nhóm các thẻ input radio vậy

Cấu trúc:

</select>

Trong cặp thẻ <select></select> ta có thể có nhiều cặp thẻ option tương ứng với

1 mục trong danh sách lựa chọn Với input checkbox thì chúng ta có thuộc tínhchecked = “checked” thì với option của select chúng ta có selected = “selected” Vàcũng chỉ có option có thuộc tính đó cuối cùng mới được chọn hiển thị trên hộp chọn,

đó cũng là giá trị sẽ được submit

Ví dụ:

<b>Chuyên ngành của bạn:</b>

<option value="0"> Chọn ngành nghề </option>

<option value="1"> Công nghệ thông tin

</option>

<option value="2"> Kinh doanh</option>

</select>

</form>

Ta sẽ có form như sau:

Trang 40

Hình 1.29 Danh sách thả xuống với thẻ select

Khi click vào hộp chọn một danh sách sẽ được thả xuống:

Hình 1.30 Danh sách hiện ra khi click vào select box

1.4.6 Vùng nhập văn bản với thẻ textarea

Để nhập được những thông tin văn bản lớn và cần trực quan hơn một input text làkhông đủ, dù ta có thể có cách tăng chiều cao của nó lên nhưng vẫn chỉ có 1 dòng vănbản mà thôi Do đó HTML có thêm một loại thẻ nữa đó là textarea Nó tạo và mộtvùng nhập văn bản hay một textbox có nhiều dòng Nó hơi khác với các thành phầnform khác là nội dung đặt trong cặp thẻ <textarea></textarea> chính là giá trị đượcsubmit Nó cũng có thuộc tính name và 2 thuộc tính không bắt buộc khác là cols quyđịnh số cột hay số chữ cái trên 1 dòng và rows quy định số dòng

Định dạng
Số trang	241
Dung lượng	3,83 MB