Giáo trình HTLM Và javascript: Phần 1 - Việt Tiến

Các file này thường được truyền đi trên mạng internet thông qua giao thức mạng HTTP , sau đó thì phần HTML sẽ được hiển thị thông qua một trình duyệt web , các trình duyệt đảm nhiệm[r]

(1)

VIETHANIT

MỤC LỤC

CHƯƠNG 1

GIỚI THIỆU CHUNG

Các ngôn ngữ đánh dấu dùng cho thiết bị điện tử

Ngôn ngữ đánh dấu thiết bị cầm tay

Ngôn ngữ đánh dấu vô tuyến

Ngôn ngữ đánh dấu siêu văn thu nhỏ

Các ngôn ngữ đánh dấu văn ứng dụng Web

Ngôn ngữ đánh dấu siêu văn

Ngôn ngữ đánh dấu mở rộng

Ngôn ngữ XHTML

Ngôn ngữ DHTML

Ngôn ngữ đánh dấu siêu văn (HTML)

Giới thiệu HTML

Đặc điểm HTML

Cấu trúc tài liệu HTML

Qui trình tạo tài liệu HTML

CHƯƠNG

CÁC THẺ CƠ BẢN TRONG HTML

Thẻ thuộc tính thẻ

Các thẻ HTML

Thẻ xác định văn HTML

Thẻ xác định phần đầu cho trang web

Thẻ xác định tiêu đề cho văn HTML

Thẻ xác định danh mục trang web 10

Thẻ tạo danh sách 11

Thẻ tạo danh sách không thứ tự 12

Thẻ tạo danh sách có thứ tự 14

Thẻ xác định văn trang web 19

Thẻ tạo đường thẳng 19

Thẻ xác định dịng thích 21

Các thẻ vận dụng với văn 21

Thẻ vận dụng cho kiểu chữ 21

2.3.1.1 Làm chữ đậm 21

2.3.1.2 Làm chữ in nghiêng 22

2.3.1.3 Thay đổi kích thước chữ 23

2.3.1.4 Tạo dòng chữ thấp 23

2.3.1.5 Tạo dòng chữ cao 24

2.3.1.6 Gạch ngang gạch chữ 25

2.3.1.7 Tạo chữ dạng riêng 25

2.3.1.8 Tạo dạng chữ bị xoá 25

2.3.1.9 Tạo dạng chữ chèn vào 25

Thẻ vận dụng cho hiệu ứng font chữ 25

2.3.2.1 Chọn font chữ cho văn 25

2.3.2.2 Đổi cỡ chữ văn 26

2.3.2.3 Chọn cỡ chữ mặc định 27

2.3.2.4 Đổi màu chữ 27

2.3.2.5 Làm chữ nhấp nháy 27

Thẻ vận dụng trình bày trang Web 27

(2)

VIETHANIT

Lựa chọn hình ảnh làm 28

Chỉnh lề cho trang Web 29

Tạo đoạn văn 29

Ngắt đoạn 30

Một số thẻ đặc biệt khác 31

Thẻ làm việc với siêu liên kết 31

Giới thiệu siêu liên kết URL 31

Sử dụng siêu liên kết 32

Thẻ Meta 38

Các thẻ DIV SPAN 39

Các thẻ mức đoạn 40

2.5.3.1 Thẻ <ADDRESS> 40

2.5.3.2 Thẻ <BLOCKQUOTE> 41

2.5.3.3 Thẻ <PRE> 42

Sử dụng ký tự đặc biệt tài liệu HTML 43

CHƯƠNG 48

LÀM VIỆC VỚI BẢNG - BIỂU MẪU – KHUNG VÀ ĐA PHƯƠNG TIỆN 48

Làm việc với bảng 48

Cách tạo bảng 48

Các thuộc tính bảng 50

Thuộc tính thẻ <TABLE> 50

Thuộc tính thẻ <TR> 50

Thuộc tính thẻ <TD> 51

Hiệu chỉnh bảng 52

Tạo khung viền cho bảng 52

Thay đổi kích thước bảng 53

Bổ sung cạnh đường kẻ lưới 53

Trang trí văn chung quanh bảng 54

Kết hợp cột dịng 55

Canh lề nội dung 57

Sử dụng hình ảnh làm cho bảng 57

Làm việc với biểu mẫu 59

Sử dụng biểu mẫu 59

Phần tử FORM 59

Các phần tử nhập HTML 60

Phần tử INPUT 60

Button 61

Textbox 61

Checkbox 61

Radio 62

Submit 62

Ảnh 63

Reset 63

Phần tử TextArea 64

Phần tử BUTTON 65

Phần tử Select 67

Phần tử LABEL 70

Tạo biểu mẫu 71

Thiết lập tiêu điểm (Focus) 73

Thứ tự tab 74

(3)

VIETHANIT

Phần tử vô hiệu hoá 74

Làm việc với khung 74

dụng 75

Tại sử dụng khung? 75

Làm việc với khung 75

3.3.2.1 Sử dụng khung 75

3.3.2.2 Liên kết khung 80

3.3.2.3 Phần tử NOFRAMES 81

3.3.2.4 Phần tử IFRAMES (inline frame) 82

Làm việc với đa phương tiện 83

Sử dụng hình ảnh tài liệu HTML 83

Chèn ảnh tĩnh 84

Chèn ảnh động (.GIF) vào tài liệu HTML 86

Chèn âm vào tài liệu HTML 87

Chèn video vào tài liệu HTML 88

CHƯƠNG 89

STYLE SHEET 89

DHTML 89

Giới thiệu DHTML 89

Các đặc điểm DHTML 90

Style sheet 91

4.2.1 Khái niệm, chức lợi ích style sheet 91

4.2.2 Quy tắc stylesheet 94

4.2.3 Các Selector style sheet 96

4.2.4 Kết hợp chèn style sheet vào tài liệu HTML 103

4.2.5 Thiết lập thuộc tính style sheet 105

CHƯƠNG 106

TỔNG QUAN VỀ JAVASCRIPT 106

5.1 Giới thiệu Javascript 106

Javascript 106

Tìm hiểu lịch sử JavaScript 106

Nguồn gốc JavaScript 107

JavaScript đến với Internet Explorer 107

JavaScript trở thành chuẩn thức 107

JavaScript phát triển đến đâu? 108

Nhúng Javascript vào file HTML 108

Dùng thẻ <SCRIPT> 109

Dùng file bên 110

Dùng JavaScript trình xử lý kiện 111

Thẻ <NOSCRIPT> </NOSCRIPT> 112

Biến, kiểu liệu JavaScript 113

5.2.1 Biến phân loại biến 113

5.2.2 Hằng 114

5.2.3 Các kiểu liệu JavaScript 115

5.2.3.1 Kiểu số nguyên 116

5.2.3.2 Kiểu số thực (kiểu số dấu chấm động) 116

5.2.3.3 Kiểu Logical (hay Boolean) 116

5.2.3.5 Kiểu null 117

Câu hỏi tập 118

CHƯƠNG 119

(4)

VIETHANIT

6.1 Các toán tử JavaScript 119

6.1.1 Các tốn tử thơng dụng 119

6.1.1.1 Tốn tử gán 119

6.1.1.2 Toán tử số học 120

6.1.1.3 Toán tử so sánh 121

6.1.1.4 Toán tử logic 122

6.1.1.5 Toán tử thao tác bit 123

6.1.1.6 Toán tử chuỗi 125

6.1.2 Một số toán tử khác 126

6.1.2.1 Toán tử điều kiện 126

6.1.2.2 Toán tử dấu phẩy 126

6.1.2.3 Toán tử new 126

6.1.2.4 Toán tử typeof 126

6.1.2.5 Toán tử this 128

6.1.3 Thứ tự ưu tiên toán tử 129

6.2 Các biểu thức JavaScript 129

6.2.1 Biểu thức regular 130

6.2.2 Tạo biểu thức regular 132

6.2.2.1 Khởi tạo đối tượng (Object initializer) 133

6.2.2.2 Gọi hàm khởi tạo đối tượng RegExp 133

6.2.3 Sử dụng biểu thức regular 134

6.3 Câu hỏi tập 136

CHƯƠNG 139

CÂU LỆNH ĐIỀU KIỆN 139

7.1 Lệnh khối lệnh 139

7.1.1 Lệnh quy ước lệnh JavaScript 139

7.1.2 Khối lệnh 139

7.2 Các câu lệnh điều kiện 139

7.2.1 Câu lệnh if…else 139

7.2.2 Câu lệnh switch 143

CHƯƠNG 149

CÂU LỆNH VÒNG LẶP 149

8.1 Các lệnh vòng lặp JavaScript 149

8.1.1 Câu lệnh for 149

8.1.2 Câu lệnh while 151

8.1.3 Câu lệnh while 152

8.2 Các lệnh chuyển điều khiển vòng lặp 153

8.2.1 Câu lệnh label 153

8.2.2 Câu lệnh break 153

8.2.3 Câu lệnh continue 154

8.3 Các lệnh thao tác đối tượng 156

8.3.1 Câu lệnh for…in 156

8.3.2 Câu lệnh with 157

CHƯƠNG 160

HÀM 160

9.1 Khái niệm thao tác hàm 160

9.1.1 Khái niệm hàm 160

9.1.2 Tạo hàm 160

(5)

VIETHANIT

9.1.4 Câu lệnh return 162

9.2 Một số hàm thông dụng hỗ trợ JavaScript 164

9.2.1 Hàm eval 164

9.2.2 Hàm isFinite 164

9.2.3 Hàm isNaN 165

9.2.4 Các hàm parseInt parseFloat 165

9.2.5 Các hàm Number String 166

CHƯƠNG 10 169

MẢNG 169

10.1 Khái niệm mảng thao tác mảng JavaScript 169

10.1.1 Khái niệm mảng 169

10.1.2 Tạo mảng 169

10.1.3 Gán giá trị cho phần tử mảng 169

10.1.4 Truy cập đến phần tử mảng 171

10.2 Các phương thức mảng 171

10.2.1 Phương thức concat 172

10.2.2 Phương thức join 172

10.2.3 Phương thức pop 174

10.2.4 Phương thức push 174

10.2.5 Phương thức reverse 174

10.2.6 Phương thức sort 175

10.3 Mảng hai chiều 176

CHƯƠNG 11 180

CÁC ĐỐI TƯỢNG CƠ BẢN CỦA JAVASCRIPT 180

11.1 Đối tượng Math 181

11.1.1 Mơ tả 181

11.1.2 Các thuộc tính đối tượng Math 182

11.1.3 Các phương thức đối tượng Math 183

11.2 Đối tượng String 185

11.2.1 Mơ tả 185

11.2.2 Các thuộc tính đối tượng String 186

11.2.3 Các phương thức đối tượng String 186

11.2.4 Tìm kiếm chuỗi 188

11.2.5 Định vị ký tự chuỗi 190

11.3 Đối tượng Date 192

11.3.1 Mơ tả 192

11.3.2 Các nhóm phương thức đối tượng Date 193

11.3.3 Các phương thức đối tượng Date 193

11.3.3.1 Nhóm phương thức get 193

11.3.3.2 Nhóm phương thức set 194

11.3.3.3 Nhóm phương thức to 194

11.3.3.4 Nhóm phương thức parse UTC 194

CHƯƠNG 12 199

XỬ LÝ FORM VÀ CÁC SỰ KIỆN CHO CÁC PHẦN TỬ TRÊN FORM 199

12.1 Giới thiệu đối tượng form 199

12.1.1 Mô tả đối tượng 199

12.1.2 Các thuộc tính phương thức đối tượng form 199

(6)

VIETHANIT

12.2.1 Khái niệm kiện trình xử lý kiện 201

12.2.2 Các kiện JavaScript phổ biến 202

12.2.3 Làm việc với trình xử lý kiện 212

12.2.3.1 Trình xử lý kiện cho thẻ HTML 212

12.2.3.2 Trình xử lý kiện thuộc tính 213

12.3 Sử dụng kiện cho thành phần form 214

12.3.1 Đối tượng Textfield (Trường văn bản) 214

12.3.2 Đối tượng Command Button 216

12.3.3 Đối tượng Checkbox 217

12.3.4 Đối tượng radio 219

12.3.5 Đối tượng ComboBox (lựa chọn) 222

12.3.6 Kiểm tra tính hợp lệ nội dung trường form 222

(7)

VIETHANIT Chương Giới thiệu chung

CHƯƠNG 1

GIỚI THIỆU CHUNG

Trong ngành in ấn trước đây, để thị cho thợ in chữ văn bản, tác giả hay chủ bút thường vẽ vòng tròn thảo thích ngơn ngữ, tương tự tốc kí Ngơn ngữ gọi ngơn ngữ đánh dấu (Markup Language)

Do nhu cầu phát triển khoa học công nghệ mà người ta xây dựng ngơn ngữ có tên: Ngơn ngữ đánh dấu tổng quát (SGML - Standard Generalized Markup Language) SGML phát triển Ed Mosher, Ray Lorie Charles F Goldfarb nhóm IBM research vào năm 1969 Ban đầu có tên Generalized Markup Language (GML), thiết kế để diễn tả ngôn ngữ khác bao gồm văn phạm, từ vựng chúng Năm 1986, SGML tổ chức ISO (International Standard Organisation) thu nhận làm tiêu chuẩn để lưu trữ trao đổi liệu Và sau ngôn ngữ đánh dấu thiết bị điện tử, thiết kế Web phát triển dựa vào sở ngôn ngữ đánh dấu tổng quát SGML

1.1 Các ngôn ngữ đánh dấu dùng cho thiết bị điện tử

Một số ngôn ngữ đánh dấu sử dụng để cung cấp dịch vụ nội dung đến thiết bị điện tử máy nhắn tin, điện thoại di động, thiết bị vô tuyến Các ngơn ngữ bao gồm: Ngơn ngữ đánh dấu thiết bị cầm tay, ngôn ngữ đánh dấu vô tuyến ngôn ngữ đánh dấu siêu văn thu nhỏ

1.1.1 Ngôn ngữ đánh dấu thiết bị cầm tay

Ngôn ngữ đánh dấu thiết bị cầm tay (HDML - Handheld Device Markup Language) thiết kế cho máy nhắn tin vô tuyến, điện thoại, tế bào điện tử thiết bị cầm tay để lấy thông tin từ trang Web HDML tập hợp WAP, Openwave Systems xây dựng trước chuẩn WAP đời Công ty AT&T Wireless mở dịch vụ dựa HDML vào năm 1996

HDML trước tiên tạo để xây dựng nội dung dựa Web cho máy điện thoại di động thiết bị cầm tay Vào năm 1997, HDML 2.0 tung cho phép người sử dụng nhận thơng số chứng khốn, đầu đề tin tức, cảnh báo thư điện tử máy điện thoại di động

1.1.2 Ngôn ngữ đánh dấu vô tuyến

Ngôn ngữ đánh dấu vô tuyến (WML - Wireless Markup Language) ngôn ngữ dựa thẻ sử dụng giao thức ứng dụng vô tuyến WML loại văn XML cho phép công cụ XML HTML sử dụng để phát triển ứng dụng WML WML phát triển từ HDML Openwave khơng phải siêu tập hợp HDML, đặc trưng HDML không xuất WML

Tiêu chuẩn WML thống phát triển diễn đàn WAP trì WML có bốn lĩnh vực chức quan trọng: mẫu hiển thị ký tự; tổ chức, định vị thẻ tập; kết nối định vị liên thẻ; thể thông số chuỗi quản lý trình trạng thái

(8)

VIETHANIT Chương Giới thiệu chung Ngôn ngữ đánh dấu siêu văn thu nhỏ (cHTML - Compact HTML) tập hợp HTML cho điện thoại tế bào PDA, công ty NTT Docomo phát triển cho hệ thống vô tuyến i-Mode Nhật Bản cHTML thiết kế cho việc hiển thị hình hỗ trợ số chức thiết bị cầm tay

Ví dụ, cHTML hỗ trợ nút bấm di chuyển chuột không sử dụng 1.2 Các ngôn ngữ đánh dấu văn ứng dụng Web

1.1 Ngôn ngữ đánh dấu siêu văn

Ngôn ngữ đánh dấu siêu văn (HTML - Hyper Text Markup Language) ngôn ngữ đánh dấu thiết kế để tạo trang Web, thơng tin trình bày World Wide Web HTML ứng dụng đơn giản SGML, sử dụng tổ chức công nghệ truyền thông HTML trở thành chuẩn Internet tổ chức World Wide Web Consortium (W3C) trì Phiên HTML 4.01 Tuy nhiên, HTML khơng cịn phát triển tiếp, người ta thay XHTML

HTML tồn tập tin văn chứa máy tính nối vào mạng

Internet Các file chứa thẻ đánh dấu, thị cho chương trình cách hiển thị, xử lý văn dạng túy Các file thường truyền mạng internet thông qua giao thức mạng HTTP, sau phần HTML hiển thị thơng qua trình duyệt web, trình duyệt đảm nhiệm cơng việc đọc văn trang cho người sử dụng, phần mềm đọc email, hay thiết bị không dây điện thoại di động

1.2 Ngôn ngữ đánh dấu mở rộng

Ngôn ngữ đánh dấu mở rộng (XML – eXtend Markup Language) giống với HTML, hai ngơn ngữ có luật cú pháp Tuy nhiên, tính linh hoạt XML cho phép bạn tạo sử dụng tập thẻ tập thuộc tính riêng để nhận biết phần tử cấu trúc nội dung tài liệu

XML khơng ngơn ngữ đánh dấu, cịn có phương pháp định nội dung tài liệu, tương tự HTML định hình thức tài liệu Web Với HTML, người thiết kế đánh dấu văn bản, hình ảnh thành phần khác trang Web tập thẻ mà không liên quan tới ý nghĩa tài liệu, XML khơng chỉ định hình thức mà cịn nội dung tài liệu

XML xem cơng cụ mạnh HTML mang lại thơng tin đầy đủ liệu Một số tổ chức chuyên môn xây dựng ngôn ngữ XML riêng, bao gồm thẻ nhận diện đặc tả cơng nghiệp Ví dụ: Ngành cơng nghiệp hóa học phát triển Chemical Markup Language (CML)

XML giúp bạn tạo tài liệu độc lập với server Tài liệu nằm máy tài liệu tải tiếp tục sử dụng không phụ thuộc vào Server Mặt khác XML mang tính chặt chẽ theo tiêu chuẩn ngơn ngữ đánh dấu văn

1.3 Ngôn ngữ XHTML

(9)

VIETHANIT Chương Giới thiệu chung XHTML 1.0 thiết kế nhằm mục đích tạo thói quen tốt cho người xây dựng trang Web Bởi có nhiều người trình bày trang Web theo cách thức trình duyệt thể mà khơng quan tâm tới sử dụng HTML chuẩn, điều gây hai tác hại: Thứ kết hiển thị phụ thuộc vào trình duyệt người sử dụng, thứ hai tạo thói quen khơng tốt thiết kế, quan tâm tới trình duyệt thể mục đích mà khơng quan tâm chuẩn

Sử dụng XHTML chuẩn bước để sẵn sàng xây dựng triển khai XML việc xây dựng XML địi hỏi phải chặt chẽ HTML XML không chấp nhận lỗi cú pháp tài liệu

Có hai lí để sử dụng XHTML cho Website:

- Xây dựng trang web động cách tin cậy, dựa vào cú pháp chặt chẽ Dữ liệu cho trang Web động thường khai thác từ sở liệu, file nguồn khác hiển thị theo template phụ thuộc vào yêu cầu người sử dụng Việc xây dựng cách cẩu thả không gây lỗi việc chèn liệu vào vị trí trang Web mà gây lỗi trả phía người dùng

- Việc xây dựng trang Web XHTML nhanh trình duyệt khơng nhiều thời gian để dịch, sửa lỗi

1.4 Ngôn ngữ DHTML

Khi Microsoft Netscape đưa Version trình duyệt, nhà phát triển Web có lựa chọn mới: Dynamic HTML (DHTML) Trong thực tế tập hợp gồm HTML, Cascading Style Sheets (CSS), JavaScript Tập hợp công nghệ cho phép nhà phát triển sửa đổi nội dung cấu trúc trang Web cách nhanh chóng

DHTML yêu cầu hỗ trợ từ trình duyệt Mặc dù Internet Explorer Netscape hỗ trợ DHTML, cách thể chúng khác nhau, nhà phát triển cần phải biết loại trình duyệt mà phía client dùng DHTML thật bước tiến Hiện DHTML đường phát triển mạnh

DHTML giúp tăng cường tính tương tác đối tượng điều khiển trang HTML tĩnh cách cho phép người dùng VBscript Javascript điều khiển chúng Ví dụ thẻ image để nhúng ảnh vào trang web nhận biết người dùng di chuyển chuột cách cài đặt hàm xử lý kiện OnMouseOver, thơng qua xử lý thích hợp làm đối tượng hình ảnh trở nên sống động

Nhìn chung, bên cạnh mở rộng tạo hiệu ứng MouseOver, chuỗi chữ di chuyển động, thay đổi màu sắc, Các khía cạnh bảo mật DHTML tương tự HTML dựa tảng HTML

1.3 Ngơn ngữ đánh dấu siêu văn (HTML) 1.1 Giới thiệu HTML

Ngôn ngữ đánh dấu siêu văn rõ trang Web hiển thị trình duyệt Sử dụng thẻ phần tử HTML, bạn có thể:

(10)

VIETHANIT Chương Giới thiệu chung • Xuất tài liệu trực tuyến truy xuất thông tin trực tuyến

cách sử dụng liên kết chèn vào tài liệu HTML

• Tạo biểu mẫu trực tuyến để thu thập thông tin người dùng, quản lý giao dịch…

• Chèn đối tượng audio clip, video clip, thành phần ActiveX Java Applet vào tài liệu HTML

Tài liệu HTML tạo thành mã nguồn trang Web Khi xem trình soạn thảo, tài liệu chuỗi thẻ phần tử, mà chúng xác định trang Web hiển thị Trình duyệt đọc file có htm hay html hiển thị trang Web theo lệnh có Ví dụ, theo cú pháp HTML đây, trình duyệt hiển thị thơng điệp “My first HTML document”

Ví dụ 1.1: <HTML>

<HEAD>

<TITLE>Welcome to HTML </TITLE> </HEAD>

<BODY>

<H3>My first HTML document </H3> </BODY>

</HTML> Kết quả:

(11)

VIETHANIT Chương Giới thiệu chung Tài liệu HTML hiển thị trình duyệt Vậy trình duyệt gì? Trình duyệt ứng dụng cài đặt máy khách Trình duyệt đọc mã nguồn HTML hiển thị trang theo lệnh

Trình duyệt sử dụng để xem trang web điều hướng Trình duyệt biết đến sớm Mosaie, phát triển trung tâm ứng dụng siêu máy tính quốc gia (NCSA)

Ngày nay, có nhiều trình duyệt sử dụng Internet Netscape Navigator Microsoft Internet Explorer hai trình duyệt sử dụng phổ biến Đối với người dùng, trình duyệt dễ sử dụng có giao diện đồ hoạ với việc trỏ kích chuột

Để tạo tài liệu nguồn, bạn phải cần trình soạn thảo HTML Ngày nay, có nhiều trình soạn thảo sử dụng: Microsoft FrontPage công cụ tổng hợp dùng để tạo, thiết kế hiệu chỉnh trang web Chúng ta thêm văn bản, hình ảnh, bảng thành phần HTML khác vào trang Thêm vào đó, biểu mẫu tạo FrontPage Một tạo giao diện cho trang web, FrontPage tự động tạo mã HTML cần thiết Chúng ta dùng Notepad để tạo tài liệu HTML Để xem tài liệu trình duyệt, bạn phải lưu với htm hay html

Các lệnh HTML gọi thẻ Các thẻ dùng để điều khiển nội dung hình thức trình bày tài liệu HTML Thẻ mở (“<>”) thẻ đóng (“</>”), bắt đầu kết thúc lệnh HTML

Ví dụ, thẻ HTML sử dụng để đánh dấu bắt đầu kết thúc tài liệu HTML

<HTML> …

</HTML>

Chú ý thẻ ko phân biệt chữ hoa chữ thường, bạn sd <html> thay cho <HTML>

Thẻ HTML bao gồm:

<ELEMENT ATTRIBUTE = value> ELEMENT: nhận dạng thẻ

ATTRIBUTE: Mô tả thẻ

value: giá trị thiết lập cho thuộc tính Ví dụ, <BODY BGCOLOR = lavender>

Trong ví dụ trên, BODY phần tử, BGCOLOR thuộc tính màu “lavender” giá trị Khi cú pháp HTML thực hiện, màu cho trang thiết lập màu lavender

(12)

VIETHANIT Chương Giới thiệu chung • Phần HTML: Mọi tài liệu HTML phải bắt đầu thẻ mở <HTML>

kết thúc thẻ đóng </HTML> Cặp thẻ báo cho trình duyệt biết nội dung chúng tài liệu HTML

• Phần đầu: Phần đầu bắt đầu thẻ <HEAD> kết thúc thẻ </HEAD> Phần chứa tiêu đề hiển thị điều hướng trang Web Tiêu đề phần quan trọng Các mốc dùng để đánh dấu Website, trình duyệt sử dụng tiêu đề để lưu trữ mốc Do đó, người dùng tìm kiếm thơng tin, tiêu đề trang Web cung cấp từ khoá yếu cho việc tìm kiếm

• Phần thân: Phần nằm sau phần tiêu đề Phần thân bao gồm văn bản, hình ảnh liên kết mà bạn muốn hiển thị trang Web Phần thân bắt đầu thẻ <BODY> kết thúc thẻ </BODY> Ví dụ 1.2:

<TITLE>Welcome to the world of HTML </TITLE> </HEAD>

<BODY>

<P> This is going to be real fun </P> </BODY>

(13)

VIETHANIT Chương Giới thiệu chung • Định hình trang Web

Để thiết kế trang Web, trước tiên cần phân tích định hướng mục đích trang Web Điều giúp ta có nhìn tổng quát trang Web thuận lợi cho việc tổ chức hay nâng cấp trang Web sau

Những yêu cầu cần phải nghiên cứu

- Hình dung nội dung trang Web bạn cần tạo, hướng tới đích chung cho trang Web với chức nhiệm vụ gì?

- Đặt vào vị trí người xem, khách hàng Làm để nội dung trình bày thể tốt Ví dụ bạn thêm vào âm thanh, hình ảnh minh hoạ cho sinh động, bố cục nội dung, trình bày cho hợp lý

• Tổ chức tập tin

Các yếu tố làm nên trang Web tập tin, việc tổ chức tập tin quan trọng, giúp ta thuận lợi việc lưu trữ tìm kiếm đoạn mã hay sở liệu trang Web

Chia thư mục trung tâm theo cấu trúc trang Web, bạn tạo thư mục riêng rẽ cho tài liệu HTML: hình ảnh, sở liệu, tập tin bên ngoài,… Trong trường hợp trang Web lớn với nhiều trang, bạn chia thành nhiều mục hay chương, chuyển hình ảnh đến thư mục độc lập

• Tạo trang Web

Để tạo trang Web HTML không cần công cụ đặc biệt nào, cần sử dụng soạn thảo văn Wordpad hay Notepad, cung cấp kèm theo hệ phần mềm Windows

Dựa qui định cấu trúc trang Web, kết hợp với thẻ cần thiết để viết trang Web

• Lưu trang Web

Nếu ta sử dụng trình xử lí văn đơn giản để tạo trang Web bạn khơng có vấn đề lưu trang Web Nhưng ta dùng trình xử lý văn phức tạp bạn phải lưu ý thơng tin bên ngồi mà chương trình đính kèm vào tập tin bạn Để đảm bảo trình duyệt nhận diện tập tin đó, bạn phải đặt phải đặt tập tin

- Mỗi tập tin lưu phần có dạng htm hay html - Chọn thư mục thích hợp để lưu trang Web

- Xem trang Web qua trình duyệt

(14)

VIETHANIT Chương Các thẻ HTML

CHƯƠNG

CÁC THẺ CƠ BẢN TRONG HTML 2.1Thẻ thuộc tính thẻ

Thẻ câu lệnh viết dấu nhỏ (<) dấu lớn (>) hay gọi dấu móc nhọn, quy định cách hiển thị văn Có loại thẻ: Thẻ mở thẻ đóng, đoạn văn hiển thị nằm hai thẻ này, thẻ mở thẻ đóng viết thẻ đóng có thêm dấu / ( dấu xéo tới) phía trước

<B>Trang Web</B>

Hình 2.1: Phân tích thẻ HTML  Thuộc tính thẻ

Thuộc tính tác động lên nội dung văn Thuộc tính nhập vào thẻ dấu lớn cuối Thường dùng nhiều thuộc tính thẻ Các thuộc tính viết không cần thứ tự cách khoảng trống

Hình 2.2: Thẻ thêm vào thuộc tính theo định dạng người viết Thuộc tính thường kèm với giá trị Trong số trường hợp, lựa chọn giá trị Ví dụ: thuộc tính CLEAR thẻ Br nhận giá trị left (trái), right (phải), hay all (cả hai bên) Tất giá trị khác đưa vào không chấp nhận

Hình 2.3 : Thẻ BR chấp nhận thuộc tính với giá trị định sẵn Thẻ mở

Móc nhọn Dấu xéo tới Thẻ đóng Văn

nội dung

Giá trị CLEAR Thuộc tính

(15)

SRC-một thuộc tính IMG Giá trị SRC

Giá trị HSPACE HSPACE thuộc

tính IMG

Các thuộc tính khác cịn xét đến dạng giá trị mà chúng chấp nhận Ví dụ: thuộc tính HSPACE thẻ IMG chấp nhận số nguyên làm giá trị

Hình 2.4: Thẻ thêm nhiều thuộc tính khác nhau

Giá trị đặt hai dấu nháy(“ ”) Có thể bỏ qua dấu nháy giá trị chứa chữ (A-Z, a-z), số (0-9), dấu gạch nối(_) dấu chấm (.)

 Thẻ lồng nhau

Thẻ lồng dùng để chỉnh sửa cách trình bày nội dung trang, ví dụ định dạng chữ nghiêng cho vài chữ quan trọng đề mục

Lưu ý:.

Trật tự thẻ lồng nhau: Thẻ mở thẻ đóng cuối Ví dụ: <B> Phần 1:<I> Nội dung</I></B>

Kết là: Phần 1: Nội dung 2.2 Các thẻ HTML 2.2.1 Thẻ xác định văn HTML

Cú pháp:

<html> Các nội dung văn HTML </html> 2.2.2 Thẻ xác định phần đầu cho trang HTML

Cú pháp:

Thẻ xác định phần đầu văn HTML, thông thường thẻ để tạo tiêu đề trang đặt lồng vào thẻ

2.2.3 Thẻ xác định tiêu đề cho văn HTML Cú pháp:

<title> Nội dung tiêu đề văn HTML</title> 2.2.4 Thẻ xác định phần thân cho trang HTML

(16)

VIETHANIT Chương Các thẻ HTML <body> Phần thân văn HTML </body>

Tất nội dung trang web nằm hai thẻ Ví dụ 2.1:

<BODY>

Bố cục nội dung trang web </BODY>

Hình 2.5: Thẻ Body xác định phần thân trang web 2.2.5 Thẻ xác định danh mục trang web

Các danh mục thường hiển thị to đậm để phân biệt chúng với phần cịn lại văn Chúng ta hiển thị danh mục theo sáu kích thước từ H1 đến H6 ví dụ sau:

Ví dụ 2.2: <HTML>

<HEAD>

<TITLE> Introduction to HTML </TITLE> </HEAD>

(17)

VIETHANIT Chương Các thẻ HTML <H5> Introduction to HTML </H5>

<H6> Introduction to HTML </H6> </HTML>

Kết quả:

Hình 2.6: Minh hoạ thẻ xác định danh mục cho trang web 2.2.6 Thẻ tạo danh sách

Danh sách dùng để nhóm liệu cách logic Chúng ta thêm danh sách vào tài liệu HTML để nhóm thơng tin có liên quan lại với

Ví dụ: Roses Sunflowers Oranges Apples Orchids Mangoes

(18)

VIETHANIT Chương Các thẻ HTML Fruits

Apples Oranges Mangoes Flowers

Roses Sunflowers Orchids

Các loại danh sách mà bạn chèn vào tài liệu HTML là: • Danh sách khơng thứ tự

• Danh sách có thứ tự • Danh sách định nghĩa 2.2.6.1 Thẻ tạo danh sách không thứ tự

Đây loại danh sách đơn giản mà bạn thêm vào tài liệu HTML Danh sách không thứ tự “bulleted list” Các mục bắt đầu dấu chấm tròn “bullet” Danh sách không thứ tự nằm cặp thẻ <UL>… </UL> Mỗi mục danh sách đánh dấu thẻ <LI> LI viết tắt từ List Item Thẻ kết thúc </LI> tuỳ chọn (không bắt buộc)

Ví dụ 2.3: <HTML>

<HEAD>

<TITLE> Tao danh sach khong thu tu </TITLE> </HEAD>

<LI> Monday <LI> Tuesday <LI> Wednesday <LI> Thursday <LI> Friday </UL>

(19)

Kết quả:

Hình 2.7: Minh hoạ thẻ tạo danh sách khơng thứ tự trang web

Ngoài ra, tạo danh sách lồng để mơ tả nhóm thơng tin

Ví dụ 2.4: <HTML>

<HEAD>

<LI> Monday <UL>

<LI> Introduction to HTML <LI> Creating Lists

</UL> <LI> Tuesday

<UL>

(20)

VIETHANIT Chương Các thẻ HTML <LI> Wednesday

<LI> Thursday <LI> Friday </UL>

</BODY> </HTML> Kết quả:

Hình 2.8: Minh hoạ cách tạo danh sách lồng 2.2.6.2 Thẻ tạo danh sách có thứ tự

Danh sách có thứ tự nằm cặp thẻ <OL>… </OL> Danh sách có thứ tự hiển thị mục danh sách Sự khác mục danh sách hiển thị theo thứ tự tạo cách tự động

Ví dụ 2.5: <HTML>

<HEAD>