Bài giảng - Giáo án: Tài liệu thiết kế Web dùng ngôn ngữ PHP

Một số nhà phát triển trình duyệt tạo ra một số thẻ khác cho trình duyệt của họ, các thẻ nàyđôi khi chưa được hỗ trợ bởi các trình duyệt khác, vì lý do này, một trang Web có thể hiển thị

Trang 1

Bài 1 NGÔN NGỮ HTML 4

1.1 Giới Thiệu 4

1.2 Các Thành Phần Của Trang HTML 4

1.2.1 Thẻ HTML 4

1.2.2 Cấu Trúc Của Một Trang Tài Liệu HTML 5

1.3 Các Thẻ Cơ Bản 6

1.3.1 Các Định Dạng Văn Bản 6

1.3.2 Chèn Hình Ảnh Vào Trang HTML 9

1.3.3 Màu Sắc Và Cấu Trúc Cho Nền 10

1.3.4 Sử Dụng Hyperlink 11

1.3.5 Frame 13

1.3.6 Tables 15

Bài 2 DANH SÁCH VÀ FORM 18

2.1 Danh Sách (List) 18

2.2 Biểu Mẫu 21

2.2.1 Giới Thiệu 21

2.2.2 Cách Thức Sử Dụng Các Kiểu Trường Nhập Dữ Liệu 21

2.2.3 Một Số Thẻ HTML Quan Trọng Khác 23

2.2.4 Các Thẻ SPAN và DIV 24

2.2.5 Các Thực Thể Ký Tự 24

Bài 3 CASCADING STYLE SHEET (CSS) 26

3.2 Kiểu Tại Chỗ 26

3.3 Bảng Kiểu 26

3.4 Bảng Kiểu Toàn Cục 26

3.5 Bảng Kiểu Liên Kết 27

3.6 Tính Thừa Hưởng 28

3.7 Lớp 29

3.8 Định Dạng CSS Cho Một Thẻ Khi Xác Định ID 29

Bài 4 GIỚI THIỆU JAVASCRIPT 30

4.2 Cách Thức Viết Một Đoạn Mã Javascript 30

4.3 Biến - Kiểu Dữ Liệu – Biểu Thức 32

4.3.1 Biến 32

4.3.2 Biểu Thức Và Phép Toán 32

4.4 Các Cấu Trúc Điều Khiển 34

4.4.1 Cấu trúc If… Else 34

4.4.2 Câu Lệnh Switch 34

4.4.3 Câu Lệnh For …Loop 34

4.4.4 Cấu Trúc While… Loop 34

4.4.5 Cấu trúc do … while 35

4.4.6 Câu Lệnh Break, continue…Loop 35

4.4.7 Câu Lệnh For In 36

4.4.8 Câu Lệnh try … catch 36

4.5 Hàm Trong Javascript 38

4.5.1 Hàm Được Định Nghĩa Bởi Người Lập Trình 38

4.5.2 Tầm Vực Của Biến 40

4.6 Các Sự Kiện Javascript 41

Bài 5 CÁC ĐỐI TƯỢNG JAVASCRIPT 43

5.1 Giới Thiệu Các Đối Tượng Trong Javascript 43

Trang 2

5.2 Đối Tượng String 43

5.3 Đối Tượng Date 45

5.4 Đối Tượng Array 47

5.5 Đối Tượng Boolean 50

5.6 Đối Tượng Toán Học 50

5.7 DOM (Document Object Model) 51

Bài 6 ĐỐI TƯỢNG SỰ KIỆN 55

6.2 Đối Tượng Sự Kiện 55

6.3 Xử Lý Sự Kiện Trong Internet Explore 56

6.4 Nổi Bọt Sự Kiện 57

6.5 Các Ví Dụ 60

6.6 Pop-up Windows 63

Bài 7 LẬP TRÌNH PHP – LẬP TRÌNH PHÍA SERVER 66

7.2 Đặc Điểm Lập Trình Php 66

7.3 Lập Trình Php Trong Windows 66

7.4 Đặc Điểm Của Một Trang Php 67

Bài 8 THÊM NỘI DUNG ĐỘNG VÀO TRANG HTML 69

8.1 Biến, Hằng Và Kiểu Dữ Liệu: 69

8.2 Biểu Thức - Phép Toán 72

8.2.1 Các Phép Toán Số Học 72

8.2.2 Các Phép Toán Logic 73

8.2.3 Phép Toán So Sánh 74

8.2.4 Phép Toán ?: 74

8.2.5 Phép Toán Error: 74

8.3 Các Phát Biểu 75

8.3.1 Phát Biểu Tuần Tự 75

8.3.2 Phát Biểu Điều Kiện 75

8.3.3 Các Phát Biểu Lặp 78

Bài 9 HÀM VÀ SỬ DỤNG LẠI MÃ 81

9.1 Tạo Hàm Trong Php 81

9.2 Truyền Các Giá Trị Mặc Định 82

9.3 Truyền Tham Biến Và Tham Trị 82

9.4 Tầm Vực Của Biến 83

9.5 Chèn Các File Vào Trang Web 84

Bài 10 LÀM VIỆC VỚI KIỂU DỮ LIỆU MẢNG 85

10.1 Khai Báo Và Tạo Mảng 85

10.2 Truy Cập Mảng 85

10.3 Mảng 2 Chiều 88

10.4 Kiểm Tra, Hủy Một Phần Tử Trong Mảng 89

10.5 Sắp Xếp Mảng 90

10.5.1 Sắp Xếp Theo Chỉ Số: 90

10.5.2 Sắp Xếp Theo Giá Trị Và Giữ Nguyên Chỉ Số 91

10.5.3 Sắp Xếp Theo Giá Trị Và Loại Bỏ Chỉ Số 91

10.6 Một Số Hàm Thông Dụng Trên Mảng 92

Bài 11 LÀM VIỆC VỚI CHUỖI 93

11.2 Nối Chuỗi Và Các Ký Tự Đặc Biệt Trong Chuỗi 93

11.3 So Sánh Chuỗi 94

Trang 3

11.4 Tạo Chuỗi Con, Tìm Và Thay Thế Chuỗi Con Bên Trong Chuỗi Cha 94

11.5 Tách Chuỗi Thành Mảng 97

11.6 Một Số Phương Thức Hay Sử Dụng Khác Trên Chuỗi 98

Bài 12 SESSION – COOKIES 100

12.2 Cookie 100

12.3 Session 102

12.4 Sử Dụng Session Như Cơ Chế Chứng Thực Người Dùng 104

12.4.1 Qui Trình Đăng Nhập 105

12.4.2 Biến Quản Lý Và Mã Đăng Nhập 106

Bài 13 MySQL 112

13.2 Kết Nối Và Tạo CSDL Bằng Command Line 112

13.3 Kết Nối Và Tạo CSDL Bằng Giao Diện Đồ Hoạ 113

13.4 Quản Lý Người Dùng Trong Mysql 114

13.4.1 Tạo Và Cấp Quyền Cho Người Sử Dụng 114

13.4.2 Xoá Quyền Của User 117

13.5 Các Kiểu Dữ Liệu Trong Mysql 117

13.6 Tạo Và Lưu Bảng Trong CSDL 119

13.7 Các Phát Biểu Truy Vấn Trong Mysql 120

13.7.1 Phát Biểu Select 120

13.7.2 Thêm Dữ Liệu Bằng Sql Insert 125

13.7.3 Cập Nhật Dữ Liệu Bằng Sql Update 125

13.7.4 Xoá Dữ Liệu Bằng Sql Delete 125

Bài 14 TRUY CẬP CƠ SỞ DỮ LIỆU MYSQL TỪ PHP 126

14.1 Giới Thiệu Ứng Dụng 126

14.2 Thao Tác Với CSDL Mysql 127

14.2.1 Kết Nối Tới Mysql 127

14.2.2 Chọn CSDL 128

14.2.3 Đóng Kết Nối 129

14.2.4 Thực Thi Câu Truy Vấn 129

14.2.5 Hiển Thị Kết Quả Với Truy Vấn Select 129

Bài 15 HIỂN THỊ VÀ PHÂN TRANG 131

15.1 Hiển Thị Kết Quả Truy Vấn Select Trong Bảng 131

15.2 Phân Trang 133

15.2.1 Giới Thiệu 133

15.2.2 Cách Xác Định Các Tham Số Khi Tiến Hành Phân Trang 134

15.2.3 Ví Dụ 134

Bài 16 UPDATE DỮ LIỆU 139

16.1 Thêm Dữ Liệu 139

16.2 Sửa Dữ Liệu 142

16.3 Xoá Dữ Liệu 146

Trang 4

Bài 1 NGÔN NGỮ HTML

1.1 Giới Thiệu

HTML (Hypertext Markup Language) là một sự định dạng dựa trên ngôn ngữ đánh dấuchuẩn (GML - General Markup Language) Ngôn ngữ GML được tạo ra từ năm 1969, từ ýtưởng đơn giản là tách biệt nội dung và hình dạng của tài liệu Định dạng của HTML chophép trình duyệt Web hiển thị các tài liệu, các tài liệu này bao gồm cả Media Bản thân mộttài liệu HTML chỉ là những tập tin văn bản đơn giản (ASCII) với những thẻ (tag) hoặc nhữngdòng mã đặc biệt mà một trình duyệt web biết cách thông dịch và hiển thị trên màn hình.Phần lớn các chuẩn về trình duyệt và các công nghệ liên quan đến Web đều được phát triển bởi World Wide Web Consortium (W3C) - một tổ chức chuẩn độc lập được thành lập vào năm 1994 Ta có thể tìm kiếm các thông tin của W3C và công việc của tổ chức này tại

Website: www.w3c.org

Một số nhà phát triển trình duyệt tạo ra một số thẻ khác cho trình duyệt của họ, các thẻ nàyđôi khi chưa được hỗ trợ bởi các trình duyệt khác, vì lý do này, một trang Web có thể hiển thịrất hiệu quả ở trình duyệt này, nhưng lại rất tồi ở một trình duyệt khác Do vậy khi thiết kếcác trang web, nên hình dung mọi nguờicó thể đang sử dụng một trình duyệt khác với trìnhduyệt ta đang sử dụng, cần kiểm tra kỹ trước khi đưa trang web lên mạng Internet

1.2 Các Thành Phần Của Trang HTML

1.2.1 Thẻ HTML.

Khi một trình duyệt web hiển thị một trang HTML, trình duyệt sẽ đọc file HTML này và tìmkiếm những đoạn mã đặc trưng trong file gọi là thẻ (tag) Các thẻ HTML được đánh dấu bởi

ký hiệu "< "và ">" Dạng chung của một thẻ HTML là:

<tag_name thuộc_tính1="giá trị 1" thuộc_tính2 = "giá trị 2" > Chuỗi văn bản, Media

</tag_name>

Ví dụ: <B> HTML </B>

Thẻ này (<B>) báo cho trình duyệt hiển thị đoạn văn bản HTML là chữ in đậm Các thẻHTML báo cho trình duyệt biết khi nào thì cần in đậm, in nghiêng văn bản, làm văn bản trởthành HEADER, liên kết đến một trang khác, …

- Trong thẻ HTML <tag_name> thì giữa "<" và tag_name phải được viết liền (giữachúng không có khoảng trắng)

- Thông thường một thẻ HTML đều có một thẻ đóng </tag_name> Trong thẻ đóng cóchứa ký tự "/", ký tự này báo cho trình duyệt biết hiệu lực của thẻ này kết thúc tại đây.Hầu hết các thẻ HTML đều có thẻ kết thúc

- Mỗi thẻ HTML có thể có một, nhiều hoặc không có thuộc tính Mỗi thuộc tính có thể

có các giá trị hoặc không có các giá trị Nếu có giá trị thì các giá trị này thường đượcđặt trong cặp dấu ngoặc kép

Trang 5

- Các thẻ HTML có thể được viết bằng chữ thường hay chữ hoa Trình duyệt webkhông phân biệt định dạng này.

- Không giống như lập trình trong các ngôn ngữ khác, với trang HTML, nếu có một lỗi,trang Web vẫn được hiển thị mặc dù có thể không đúng ý đồ của nhà thiết kế

- Trình duyệt web có các bộ từ vựng các tag mở, do vậy đôi khi một tag được nhận biếtbởi trình duyệt này nhưng lại không được nhận ra bởi trình duyệt khác Khi trìnhduyệt không hiểu một tag nào đó, nó sẽ tự động bỏ qua tag đó và chỉ thông dịch phầncòn lại

1.2.2 Cấu Trúc Của Một Trang Tài Liệu HTML

Một tài liệu HTML tổng quát được trình bày như sau:

- Toàn bộ công việc để tạo một trang HTML nằm trong cặp thẻ <HTML> và

</HTML> Bên trong cặp thẻ này là cặp thẻ <HEAD></HEAD> và

<BODY></BODY> Trang web của chúng ta có thể vẫn hiển thị tốt mà không cầncác thẻ này, tuy nhiên bằng cách sử dụng chúng, trang web của ta sẽ đảm bảo hoàntoàn tương thích với chuẩn quốc tế của HTML và chắc chắn sẽ tương thích với cáctrình duyệt web khác ở hiện tại cũng như ở tương lai Đây cũng là một thói quen tốt

- Các chú thích HTML được bao bởi <! và > Dòng văn bản giữa cặp thẻ này khôngđược hiển thị trong trang web Khi dịch, trình duyệt sẽ bỏ qua các thành phần nằmtrong cặp dấu chú thích <! và > Việc đặt những chú thích là rất hữu ích đối vớicác trang web phức tạp

- Trình duyệt web bỏ qua các khoảng trắng đầu dòng, những dòng trống Do vậy khiviết thẻ HTML, ta có thể canh chỉnh các thẻ, tạo các dòng trống ngăn cách các chúthích, … sao cho dễ quản lý mà không sợ ảnh hưởng đến nội dung, hình thức hiển thịcủa trang Web Các chuẩn HTML qui định, mỗi ký tự xuống hàng sẽ được xem nhưmột khoảng trắng Một chuỗi các ký tự khoảng trắng được xem như một khoảngtrắng

- Một trang HTML cơ bản được đặt tên với phần mở rộng là HTM hoặc HTML Trìnhduyệt sẽ nhận biết các tài liệu HTML qua các phần mở rộng của file

1.3 Các Thẻ Cơ Bản.

1.3.1 Các Định Dạng Văn Bản.

1.3.1.1 Những Tiêu Đề

Trang 6

Những tiêu đề được thực hiện trong HTML bằng cách đặt đoạn văn bản giữa những tsg tiêu

đề (heading tag) Dạng các tag tiêu đề của HTML là:

<Hx> Text Appear in Heading </Hx>

x là một số có giá trị từ 1 đến 6 chỉ định kích cỡ của tiêu đề Các tiêu đề được sắp xếp từ (quan trọng nhất) đến 6 (ít quan trọng nhất) Các dòng hiển thị các giá trị cho các heading từ

Ví dụ <H2 align="center"> Heading 2 - Center </H2>

1.3.1.2 Chia Đoạn Văn Bản Và Xuống Dòng

Một trình duyệt web sẽ bỏ qua tất cả các ký tự xuống dòng (carriage returns) được đánh trongtrình soạn thảo Tuy nhiên khi trình duyệt gặp 2 thẻ <BR> và <P> nó sẽ xuống dòng để bắtđầu một dòng mới Sự khác biệt giữa 2 thẻ này là <BR > sẽ xuống dòng, <P> sẽ chèn mộtdòng trống và xuống dòng, hơn nữa thẻ <BR> không có thẻ kết thúc trong khi <P> có thể có

và thẻ <P> còn có thuộc tính giống như thẻ Heading là align để cho phép canh chỉnh văn bảntrong đoạn Nếu không có thẻ </P> thì đoạn văn bản trong thẻ <P> cũng bị chấm dứt khi gặpthẻ <P> mới

Thẻ <P> còn có một thuộc tính khác là align có các giá trị left (mặc định), center và right chophép canh chỉnh văn bản trong đoạn trong cửa sổ trình duyệt

Tạo đường kẻ

Thẻ <HR> sẽ tạo một đường kẻ ngang qua trang Web Có hai thuộc tính thường dùng là size

và width Thuộc tính size sẽ xác định kích thước của đường thẳng (tính bằng pixel) với giá trịmặc định là 2 và width kiểm soát chiều rộng đường kẻ Ta có thể thiết lập giá trị choWIDTH theo pixel hay theo tỷ lệ % của cửa sổ trình duyệt Thẻ này không có thẻ kết thúc.Làm việc với các kiểu mẫu (Style)

HTML cung cấp một số thẻ cho việc định dạng văn bản như in đậm, nghiêng, … Có thể liệt

kê một số thẻ cơ bản như sau:

<B> This is Bold…<B> (vi) This is Bold…

<I> This is Italic …</I> (vii) This is Italic …

<tt> This is Typewriter …</tt> This is Typewriter …

<U> This is Underline </U> a This is Underline

Ta cũng có thể kết hợp các tag này để định dạng, miễn chúng được lồng vào nhau một cáchchính xác Ta cũng có thể áp dụng các kiểu mẫu vào trong các tiêu đề

Trang 7

1.3.1.3 Một Số Thẻ Fortmatting Khác

- <Blockquote>: Chèn một khối văn bản được trình bày thụt vào trong so với phần thânvăn bản Theo cách viết truyền thống, một đoạn trích dẫn của ba hay nhiều câu đượclàm nổi bật hơn so với đoạn văn bản chính bằng cách trình bày như một khối văn bảnthụt vào trong (indented block of text) Với trang HTML, đưa văn bản vào cặp thẻ

<Blockquote> … text … </Blockquote>để tạo chức năng này

- <Address>: Thông thường trong các trang Web, tại phần cuối (footer) thường có vùngcung cấp thông tin về tác giả và tài liệu Đoạn văn bản này thường được đặt trong cácdòng trong thẻ <address>, khi đó nó sẽ được hiển thị với kiểu chữ in nghiêng Cácthông tin hữu ích cần mô tả ngắn gọn trong footer thường là:

Tiêu đề hay chủ đề trang hiện tại

Ngày tạo và ngày cập nhật

Chủ quyền

Tên email, tác giả trang web

Tên và liên kết tới văn bản nguồn gốc tổ chức

- Thẻ <BaseFont>: Ta sử dụng tag này để thiết lập font chữ mặc định cho toàn bộ trangweb và không có thẻ kết thúc Thẻ này có các thuộc tính là face="font chữ",size="kích thước" của chữ Kích thước văn bản có giá trị từ 1 (nhỏ nhất) đến 7 (lớnnhất) Tất cả các đoạn văn bản không nằm trong thẻ font nào sẽ sử dụng font chữ củathẻ fontbase Thẻ này cũng chỉ hết hiệu lực khi gặp thẻ fontbase khác.Thẻ này còn cótác dụng tốt trong thiết lập lại kích thước của font chữ theo tính tương đối của thẻfont

- Thẻ <font>: dùng để thiết lập các thuộc tính về font chữ được hiển thị trên trang web.Các thuộc tính của thẻ này bao gồm:

size: Kích cỡ của chữ Giá trị thuộc tính này có giá trị từ 1 (nhỏ nhất) đến 7 (lớn nhất).

Ví dụ: <font size="6">

Ngoài cách thiết lập giá trị dạng tuyệt đối cho font chữ như trên, ta còn có thể thiết lậpgiá trị tương đối bằng cách dựa vào giá trị kích cỡ đã có sẵn trước đó bằng cách thêmdấu "+" (tăng) hoặc "-" (giảm) vào trước giá trị của thuộc tính size Ví dụ: <fontsize="+2"> sẽ tăng kích thước của font chữ lên 2 giá trị so với font chữ hiện tại Thiếtlập thuộc tính dạng tương đối này sẽ rất hữu ích khi ta thay đổi kích thước font chữ sovới giá trị trong thẻ basefont Ví dụ nếu ta muốn tăng kích cỡ font chữ của trang lên 1đơn vị, ta chỉ cần thay đổi lại giá trị trong thẻ basefont (thường được sử dụng một lầntrong một trang) mà không cần thay đổi lại trong tất cả các thẻ font của trang

Face: Tên của font chữ được xác định để hiển thị văn bản trên trình duyệt

Color: Màu sắc của font chữ Ta sử dụng thuộc tính này khi cần thiết lập màu riêng

biệt cho đoạn văn bản trong thẻ font Thông thường màu văn bản được xác định trongthẻ <body> hoặc sử dụng màu mặc định của trình duyệt Giá trị của thuộc tính nàycũng giống như tất cả các thuộc tính xác định màu sắc khác của trang web, đó là ta cóthể sử dụng các màu hằng hoặc các giá trị của hệ màu RGB theo dạng số hexa để thiếtlập một màu sắc nhất định

Các ví dụ về thẻ font

-Ví dụ

1 -<html>

<body>

<font size="4" color="red" face="vni-times">Font size:4 - color:red - face:vni-times<br>

<font size=6 color="#ff0000" face="arial">Font size:6 - color: ff0000 - face:arial</font><br>

<font size="-2">Font size:2 - color:red - face:vni-times</font><br>

Trang 8

Font size:4 - color:red - face:vni-times</font>

</body>

</html>

- <Pre>: Hiển thị dạng chữ đánh máy và giữ nguyên các khoảng trắng và dấu xuốngdòng

- <Sub>: Văn bản trong thẻ này sẽ được viết dưới dạng Subscript Đây là văn bản được

in hơi thấp hơn dòng chữ thường

- <Sup>: Văn bản trong thẻ này sẽ được viết dưới dạng Supperscript Đây là văn bảnđược in hơi cao hơn dòng chữ thường

- <Big> và <Small>: Đoạn văn bản nằm trong thẻ sẽ có font-size dạng chữ lớn hoặcnhỏ tương ứng

- <Marquee>: Văn bản nằm giữa hai thẻ này sẽ chạy qua chạy lại tuỳ theo các giá trịthuộc tính được thiết lập Một số thuộc tính của Marquee là:

Direction: Có giá trị bằng Left hoặc Right là hướng chuyển động của văn bản.

ScrollDelay: Giá trị nguyên dương này là số mili giây văn bản ngừng trước khi

chuyển động tiếp Giá trị càng nhỏ, chuyển động càng nhanh

Behavior: Loại chuyển động của text Scroll, Slide, Alternate

Align With text: Đoạn văn bản được canh chỉnh trong vùng diện tích của marquee Có

3 giá trị: Top, Middle, Bottom

Loop: Giá trị nguyên thiết lập số chu kỳ chuyển động của đoạn văn bản

Ví dụ

Chào mừng bạn đã đến website của chúng tôi

Trang 9

1.3.2 Chèn Hình Ảnh Vào Trang HTML

Có nhiều hình ảnh được hỗ trợ trên Internet như: *.PICT, *.GIF, *.TIFF, *.BMP, *.JPG,

*.JPEG… và các hình ảnh này độc lập với flatform Tuy nhiên dạng chuẩn hiển thị trong mộttrang web là GIF (Graphics Interchange Format) GIF nén các thông tin của hình ảnh (làmgiảm kích thước của tập tin) và chuyển nó thành mã nhị phân để chuyển qua mạng Internet

Kỹ thuật nén dạng GIF có hiệu quả cao nhất khi hình ảnh có những vùng liên tục cùng màu

và việc nén càng lớn khi có sự lặp lại màu theo chiều đứng Một dạng hình ảnh khác thườnghay được sử dụng trong web là JPG hoặc JPEG (được đặt tên sau khi nhóm JointPhotographic Engineering Group thiết kế ra dạng này) Kỹ thuật nén JPEG rất có hiệu quảvới các ảnh chụp có màu sắc thay đổi liên tục trong các phần rất nhỏ của ảnh Tuỳ thuộc vàochất lượng ảnh, JPEG cung cấp các hệ số nén về kích thước rất ấn tượng

- Có nhiều chương trình đồ hoạ có sẵn chức năng lưu trữ tập tin theo dạng tuỳ chọn Tanên lưu theo hai loại và so sánh kích thước và chất lượng ảnh để quyết định sử dụnghình này loại nào Một vài tiện ích cho đồ hoạ cho phép các chuyển đổi này như:GIFConverter, WinGif…

- Khi thiết kế trang web có hình, nên lưu ý để trang thiết kế có dung lượng không lớnquá Dung lượng của trang được tính gộp tất cả các hình chèn vào trang chứ khôngphải chỉ tính phần văn bản HTML

- Thường khi thiết kế web, ta tạo một thư mục riêng để lưu trữ các hình ảnh cho phépquản lý dễ dàng toàn bộ Web Site

- Để chèn một hình ảnh vào trang web, sử dụng thẻ <IMG > Thẻ này không có thẻ kếtthúc Trong thẻ này có nhiều thuộc tính như sau:

SRC: có giá trị là đường dẫn của file hình ảnh Đường dẫn này thường được xác định

là các đường dẫn tương đối hoặc đường dẫn đầy đủ từ một website khác Với đường dẫn tương đối, để truy cập đến thư mục cấp cha ta sử dụng hai dấu chấm và dấu

xổ :" /"

Ví dụ:

<IMG SRC="Images/h1.gif"> Chèn hình h1.gif trong thư mục con Images

<IMG SRC=" /Images/h1.gif"> Chèn h1.gif từ thư mục ngang hàng với thư mục hiện hànhtên là Images

<IMG SRC="www.microsoft.com/images/h1.gif"> Chèn hình h1.gif trong thư mục imagescủa website có domain là microsoft.com

Các thuộc tính khác:

Align: có các giá trị top, middle, bottom (mặc định), left, center, right sẽ điều khiển vị trí của

văn bản so với hình ảnh trong hàng

Alt="text": là đoạn văn bản hiển thị tại vị trí hình trong các trường hợp: khi người sử dụng

trình duyệt không hỗ trợ hình, tắt việc trình bày hình ảnh trong trình duyệt, khi hình chưađược tải xong, Khi đưa con trỏ vào vùng hình ảnh

Width, Height: Có giá trị là các số nguyên, là giá trị xác định chiều rộng và chiều cao của

hình theo pixels Ta có thể đưa các giá trị kích thước này khác với kích thước thật của hìnhảnh, tuy nhiên có thể hình ảnh sẽ bị biến dạng hoặc xuất hiện những khối màu ngoài vùngkích thước thật Thông thường, khi không xác định chiều rộng và chiều cao, trình duyệt sẽhiển thị một hình ảnh đồ hoạ thay thế mặc định với một kích thước cố định cho đến khi nó tảixuống xong hình ảnh cần hiển thị Sau đó hình ảnh sẽ được thay đổi đến kích thước của hình

Trang 10

chính Điều này sẽ làm cho nội dung trong cửa sổ được định vị lại Khi xác định hai thuộctính này thì trình duyệt dành một chỗ trên màn hình trước khi ảnh được tải xuống Điều này

có thể làm trang web được thể hiện một cách chính xác và nhanh chóng hơn

Hspace: Khoảng cách tính bằng pixel của văn bản xuất hiện xung quanh tới hai biên dọc của

hình ảnh

Vspace: Giống như thuộc tính trên nhưng tính theo chiều đứng.

Border: thiết lập đường biên cho ảnh tính theo pixel Nếu không muốn thấy biên, ta cho giá

trị bằng 0

1.3.3 Màu Sắc Và Cấu Trúc Cho Nền

- Trong một trình duyệt web, ta được sử dụng các màu của hệ thống để tạo màu chovăn bản và cho nền của trang web Mỗi màu được xác định dựa trên các giá trị Red-Green-Blue (RGB) của nó Ba số này có gía trị (viết theo hệ thập phân) từ 0 tới 255,mỗi số thể hiện cường độ của thành phần màu theo thứ tự Red-Green-Blue Giá trịlớm nhất của cả 3 (255-255-255) sẽ cho ra màu trắng và giá trị nhỏ nhất (0-0-0) sẽcho ra màu đen Tất cả các màu được biểu diễn bởi bộ ba RGB khác nhau

- Các màu được thiết lập trong tài liệu HTML bằng các số hexa có dạng #xxyyzz.Trong đó x, y, z là các giá trị từ 0 đến F xx là giá trị của màu red, yy là của màuGreen và zz là màu Blue

- Ta cũng có thể sử dụng các màu hằng số cơ bản được định nghĩa sẵn mà trình duyệt

có thể hiểu được như: Blue, Green, Yellow, …

- Thẻ BODY cho phép ta thêm vào các thuộc tính về màu sắc của trang web

<Body bgcolor="#xxxxxx" text="#xxxxxx" Link="#xxxxxx" Vlink = "#xxxxxx">Trong đó mỗi giá trị x có giá trị từ 0 đến F

Bgcolor = màu nền

Text: Màu của văn bản trong phần thân trang web

Link: Màu sắc của các liên kết siêu văn bản Màu mặc định là Blue

Vlink (Visitted Link): Màu sắc của một mục siêu liên kết đã được xem Màu mặc định là Purple (tím)

Ví dụ:

<html>

Mau sau trong trang web <br>

</Body>

</HTML>

Với thẻ BODY, ta còn có thể thay đổi nền trang web bằng một hình ảnh qua thuộc tínhbackground Ta cũng có thể chèn vào một ảnh nhỏ và trình duyệt sẽ "lợp" các bản sao liên tụccác hình này vào trang web

Một số điều cần chú ý:

Kích thước hình cần chèn: Nên sử dụng các hình có kích thước càng nhỏ càng tốt.Hãy lựa chọn hình và màu văn bản sao cho có độ tương phản cao

Trang 11

Nếu trong thẻ Body có cả 2 thuộc tính bgcolor và background, khi hình nền trangchưa load xong, trang sẽ có màu bgcolor và màu sẽ chuyển thành hình nền khi trangnạp xong hình.

1.3.4 Sử Dụng Hyperlink

- Sức mạnh thật sự của Web là khả năng tạo ra những siêu liên kết (hyperlink) đến cácthông tin liên quan Những thông tin này có thể là những trang Web khác, những hìnhảnh, âm thanh, đoạn phim, animation, các chương trình, nội dung của gopher server,một trình log-in vào máy tính ở xa (remote computer), một tập hợp các phần mềm,FTP site

- WWW sử dụng một cách đánh địa chỉ gọi là URL (Uniform Resorce Locator) để chỉ

ra những vị trí của những mục như vậy Những liên kết này thường được biểu diễnbởi những chữ màu xanh có gạch dưới và được gọi là anchor

- Thẻ <A> sẽ dùng để tạo các liên kết và có dạng như sau:

<A href=URL target=name> Text link, media </A>

Ta có thể xem a là anchor, href là hypertext Reference

- Thuộc tính target: Target có giá trị được thiết lập như trong bảng dưới

Name Nạp trang Web vào trong cửa sổ hay frame có tên là name

_blank Nạp trang Web vào cửa sổ mới không có tên

_parent Nạp trang web vào cửa sổ cha của trang hiện hành

_self Giá trị mặc định Nạp trang web vào cửa sổ hiện hành

_top Nạp trang web vào cửa sổ cao nhất

Nếu thiết lập một tên trong target mà chưa được mở (trình duyệt không biết), khi đótrình duyệt sẽ tạo một cửa sổ mới (giống như _blank) để nạp trang liên kết, cửa sổ nàyđược đặt tên là giá trị name mới tạo Giá trị của của sổ này có ích trong trường hợp sửdụng các mã kích bản như javascript Các giá trị hằng trong cột giá trị bảng trên phảiviết bằng chữ thường

- Thuộc tính href: Đường dẫn của đối tượng được liên kết tới Các giá trị của URLtrong thuộc tính href Ta có thể phân chia ra làm 2 loại liên kết Liên kết đến các filetrong cùng một website và liên kết đến các file trong website khác

Liên kết trong cùng website: Mọi giá trị URL đều là đường dẫn tương đối (ralative link - đường dẫn tính từ thư mục hiện hành, thư mục chứa liên kết đang soạn thảo) hoặc đường dẫn tính từ Domain Tuy nhiên thường ít khi sử dụng đường dẫn từ domain name do không thuận tiện vì khi thiết kế ta thường chưa biết được địa chỉ Website chính thức Khi sử dụng đường dẫn tương đối, với các liên kết tới thư mục cấp cao hơn, ta sử dụng cặp giá trị " /"

Liên kết đến một file trong Website khác: Ta sử dụng đường dẫn URL tính từ domain name

Liên kết đến một bookmark trong cùng trang hay tơí một bookmark của trang khác: Bookmark là một vị trí được đánh dấu trong trang web Từ một vị trí, ta có thể liên kết đến vị trí đã được đánh dấu này Bình thường, khi liên kết tới trang, vị trí đầu tiên của trang sẽ được hiển thị ngay tại phần đầu cửa sổ trình duyệt mặc dù trang cần hiển thị dài hơn vùng cửa sổ Tuy nhiên, khi ta liên kết đến bookmark, vị trí của bookmark

sẽ được hiển thị trong vùng bắt đầu của cửa sổ mặc dù trang có nội dung hiển thị vượtquá vùng cửa sổ trình duyệt Để liên kết đến bookmark, ta thêm dấu # và tên

Trang 12

bookmark ngay sau giá trị của URL Để tạo một bookmark, ta sử dụng thẻ <A> tại vị trí cần tạo theo qui tắc sau: <A name="tênbookmark">text</A>.

Để dễ hình dung, giả sử ta có cây thư mục như hình sau Cây thư mục này là một Web site có domain là: www.abc.com

Trang f12.htm có nội dung như sau:

Bảng ví dụ sau sẽ sử dụng thẻ <A> để liên kết đến các thành phần khác

<A href=”#chapter1”> Chöông 1</A> F12.htm - Liên kết nội đến vị trí cóbookmark tên là chapter1

trong cùng trang

<A href=”f12.htm#chapter1”> <IMGsrc=” /

- Liên kết là hình h1.gif đếntrang f121.htm tại vị tríbookmark có tên chapter1trong cùng thư mục

<a href=”folder1/f11.htm”> click </a> Index.htm Liên kết đến trang f11.htm

<Ahref=” /folder2/folder21/f211.htm”> link

<a href=” /f21.htm” target=_blank> trang

Liên kết đến trang f21.htm

và sẽ nạp f21.htm vào cửa sổmới nếu click vào liên kếtnày

<a href=”a.zip”>download </a> F211.htm Hiển thị cửa sổ để downloadtập tin a.zip

Trang 13

<A href=”www.microsoft.com”

Target=_blank> Microsoft </A>

Liên kết đến trang chủ củamáy chủ Microsoft Trangweb được nạp vào cửa sổmới

- Hiển thị trình soạn thảo thư

để gửi tới địa chỉ xác địnhtrong href

1.3.5 Frame

Bằng cách dùng frame (khung), ta có thể ngắt trang web thành các vùng riêng biệt (cửa sổ) vàthể hiện các tập tin HTML khác nhau trong mỗi vùng Với cách này, mỗi vùng có thể chuyểnsang trang web khác trong khi các vùng khác vẫn không thay đổi

Ta có thể tạo khung bằng cách dùng một hồ sơ định nghĩa tập khung - một tập tin HTML chỉ chứa các thông tin về cách thức phân chia trang web và các tập tin sẽ được hiển thị trong mỗivùng tương ứng Ví dụ

Các Thẻ tạo frame và thuộc tính:

Thẻ: Frameset: Tạo một frame

Thuộc tính:

- cols="gtrị 1, giá trị 2, …": Phân chia một frame thành các vùng con có số cột (cols) là

số các giá trị trong cols

- rows="gtrị 1, giá trị 2, …" : Phân chia một frame thành các vùng con có số dòng(rows) là số các giá trị trong rows

Trang 14

Thẻ Frame: Lồng trong frameset, xác định dữ liệu cho vùng cửa sổ hiện tại.

Thuộc tính:

- SRC: Xác định đường dẫn đến trang cần nạp

- Name: Tên của frame Sử dụng cho thuộc tính target của các liên kết

- Scrooling: (yes, no, auto): Xác định việc hiển thị thanh cuộn

<HTML>

<HEAD>

<TITLE>Embedding Frame</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Gửi nội dung giữa các khung

Việc có thể gửi nội dung của một khung từ bất kỳ khung nào đã mở ra một loạt các khả năng.Giả sử rằng ta muốn tạo một thanh di chuyển Để thực hiện điều này, các liên kết trong tập tinchứa thanh di chuyển phải có khả năng gửi nội dung đến các khung khác trong tập khung đó.Đoạn mã sau tạo ra một tập khung với một thanh di chuyển đơn giản

<A HREF="1.htm" TARGET="ContentFrame">Go to Frame 1</A><BR>

</BODY>

</HTML>

Những vấn đề cần quan tâm khi sử dụng frame

- Vì nhiều trình duyệt cũ không hỗ trợ khung, ta có thể cần phải quan tâm tới thẻ

<NOFRAMES> trong các trang web của mình Các trình duyệt không hỗ trợ khung sẽchỉ hiển thị phần văn bản nằm giữa cặp thẻ <NOFRAMES> và </NOFRAMES> Văn

Trang 15

bản này có thể bao gồm bất kỳ những gì từ một con trỏ chỉ đến một phiên bản khôngdùng khung trong site của ta cho đến một lời đề nghị nhã nhặn người dùng nâng cấptrình duyệt của họ.

- Tất cả liên kết dẫn đến vị trí ngoài site của ta cần phải thiết lập thuộc tính TARGETvới giá trị _top Nếu khác đi, người dùng sẽ có cảm giác như họ bị rơi vào một cái bẫytrong một tập khung của ta

Làm việc với khung có thể là một thách thức Khi được sử dụng cẩn thận, khung có thểcải tiến đáng kể về khả năng di chuyển và phong cách website của ta

1.3.6 Tables

Một trang web được tổ chức tốt sẽ dễ dàng thu hút người đọc và giúp họ dễ dàng tìm kiếmthông tin mà họ muốn Các bảng và khung là những công cụ có giá trị cho việc tổ chức thôngtin Với bảng, ta có thể chia các phần khác nhau của trang web thành các vùng và đặt cácthông tin khác nhau vào các vùng đó Ta sẽ cảm thấy rằng các bảng sẽ rất hữu dụng chonhiều công việc khác nhau, từ trình bày dữ liệu theo dạng cột và hàng cho đến việc định vịchính xác các mục trên một trang web

Căn bản về bảng

Bảng được đánh dấu bằng các thẻ <TABLE> và </TABLE> Trong các thẻ này, ta sử dụngcác thẻ định nghĩa hàng của bảng, <TR> và </TR> Trong mỗi hàng, ta lại định nghĩa các ôcủa bảng bằng các thẻ <TD> và </TD> Đoạn mã sau giới thiệu một trang web chứa mộtbảng cơ bản Ta có thể thấy bảng được tạo ra bởi đoạn mã này trong hình dưới

sẽ tăng lên, tuy nhiên đường kẻ giữa các ô được giữ nguyên chiều dày 1 pixel Khi tạo bảng,

ta có thể thụt đầu dòng như trong đoạn mã trên để phân tách một cách trực quan các mứckhác nhau của bảng Các thẻ <TD> được thụt vào sâu hơn so với các thẻ <TR> và các thẻ

<TR> được thụt sâu hơn so với các thẻ <TABLE> Không nhất thiết phải sử dụng việc trìnhbày thụt đầu dòng, tuy nhiên nên dùng kỹ thuật này phục vụ như một công cụ dò lỗi hữudụng, đặc biệt là trong các bảng phức tạp

Các thuộc tính khác của bảng

Trang 16

- bgcolor: Xác định màu màu nền của toàn bộ bảng (hoặc các ô) Mặc định, nền của bảng là trong suốt Nếu ta thiết lập màu nền khác với màu nền của ô trong bảng thì màu nền của ô đó sẽ được ưu tiên cao hơn Giá trị của Bgcolor cũng có thể là một màu hằng hoặc các cặp số Hexa theo hệ màu RGB.

- BACKGROUND cho phép ta hiển thị một hình ảnh phía sau một ô hay toàn bộ bảng;

ta chỉ việc thiết lập thuộc tính này trỏ đến một hình ảnh mong muốn

- Border: Xác định độ dày của biên Giá trị của nó là một số nguyên

- Width, height: Xác định kích thước bảng Giá trị của các thuộc tính này có thể làtương đối (%), ví dụ 50%, hay tuyệt đối (tính bằng một số nguyên là pixel)

- Align: Canh chỉnh bảng: ó các giá trị: right, left, center

Tạo các ô với các kích thước khác nhau

- ROWSPAN: Ghép nhiều ô trong dòng thành một ô

- COLSPAN: Ghép nhiều ô trong cột thành một ô

ví dụ sử dụng cả hai thuộc tính ROWSPAN và COLSPAN trên một bảng

Trang 18

Bài 2 DANH SÁCH VÀ FORM

2.1 Danh Sách (List)

HTML có một tập các thẻ cho phép tạo ra các danh sách dạng phân cấp Có hai dạng danhsách: không có thứ tự và có thứ tự Các danh sách không có thứ tự là danh sách dạng nút,trong khi đó danh sách có thứ tự thường là danh sách có đánh số Ta cũng có thể kết hợp hailoại này để tạo ra danh sách phức tạp hơn

Danh sách không có thứ tự (unordered list).

Đầu tiên hãy xem xét hai danh sách không có thứ tự Đoạn mã cho các danh sách này xuấthiện trong đoạn mã 2-1 Hình 2-1 thể hiện các danh sách được phân cách bởi một đường kẻngang

- đoạn mã

2.1 -<HTML>

<BODY>

<UL>This is at the first level

<UL>This is at the second level.</UL>

<UL>This is at the second level

<UL> This is at the third level.</UL>

</UL>

<UL>This is at the second level.</UL>

</UL>

<HR>

<UL Type="Disc">This is the first level header

<LI>This is the first level-1 item in the list

<LI>This is the second level-1 item in the list

<UL>

<LI>And this is the second level-2 item in the list

Trang 19

Danh sách đầu tiên trong đoạn mã trên được cấu tạo chỉ dùng các thẻ danh sách không có thứ

tự, <UL> và </UL> Bằng cách đặt một tập các thẻ danh sách không có thứ tự trong một thẻdanh sách khác, chúng ta có thể nhúng các danh sách trong một danh sách khác để tạo ra mộtloạt các văn bản được đặt thụt đầu dòng Chú ý rằng mỗi thẻ <UL> mở có một thẻ </UL>đóng tương ứng

Danh sách kế tiếp trong đoạn mã cũng bắt đầu với một thẻ danh sách không có thứ tự, <UL>.Một thẻ đóng, </UL>, là cần thiết và nó xuất hiện ở cuối của danh sách, nằm gần ở cuối tậptin Bất kì những gì giữa hai thẻ này được xem là thành phần của danh sách Danh sách nàychứa đựng các mục dạng nút, được bắt đầu bởi thẻ mục danh sách, <LI> Thẻ kết thúc </LI>không đòi hỏi những gì bắt gặp trước khi một mục khác bắt đầu hay trước khi kết thúc danhsách được xem là thành phần của một mục trong danh sách Một danh sách khác được nhúngvào trong danh sách này Chú ý rằng danh sách được nhúng vào này được thụt đầu dòng vàcác nút của nó có một dạng khác Chỉ có 3 mức nhúng đầu tiên có các dạng nút khác nhau.Bắt đầu với mức thứ ba, tất cả các danh sách sử dụng chung một kiểu nút Chú ý rằng mứcthứ hai không có bất kỳ văn bản nào sau thẻ <UL> Các văn bản tiêu đề như vậy là tuỳ chọn.Trong thẻ <UL> có một thuộc tính TYPE Thuộc tính này qui định rõ loại nút được hiển thị.Type có các giá trị Disc (hình tròn đặc - mặc định cho cấp cao nhất), Circle (hình tròn) vàSquare (hình vuông)

Danh sách có thứ tự

Các mục của một danh sách có thứ tự được hiển thị với các con số thay vì các nút Sử dụngthẻ <OL> (Order List) để thiết lập một danh sách có thứ tự, như được thể hiện trong đoạn mãsau Hình ảnh thể hiện cách mà trình duyệt hiển thị đoạn mã này

<LI>This is the second level-1 item in the list

<OL>

Trang 20

<LI>This is the first level-2 item in the list.

<LI>And this is the second level-2 item in the list

Các danh sách phức hợp

Thẻ <OL> hỗ trợ một thuộc tính có tên là TYPE Thuộc tính này kiểm soát xem các mụctrong danh sách được bắt đầu với một số, một chữ cái hay một con số La Mã Một thuộc tínhkhác là Start (mặc định là 1) được gán các giá trị nguyên sẽ xác định giá trị xuất phát của con

số hay chữ cái Đoạn mã kế sau minh hoạ thuộc tính TYPE cũng như việc trộn lẫn các thẻ

<OL> và <UL> Kết quả thể hiện của đoạn mã này trong hình Bằng cách kết hợp các danhsách có thứ tự và danh sách không có thứ tự và bằng cách sử dụng thuộc tính TYPE, ta có thểtrình bày các thông tin phân cấp phức tạp

<HTML>

<BODY>

<LI>This uses numbers

<LI>This uses lowercase roman numerals

<LI>This also uses lowercase roman numerals

Trang 21

</UL>

</OL>

</BODY>

</HTML>

Bảng giá trị của thuộc tính TYPE thẻ <OL>

TYPE Loại ký tự hiển thị

Nếu thay dòng đầu tiên sau thẻ <BODY> ví dụ trên bằng dòng:

ta sẽ được kết quả hiển thị như hình dưới

2.2 Biểu Mẫu

2.2.1 Giới Thiệu

Biểu mẫu cho phép thực hiện tương tác giữa người dùng và máy chủ Khái niệm chung này làmáy chủ thể hiện một biểu mẫu cho người dùng thông qua một trang web để yêu cầu bất kìthông tin nào, chẳng hạn như tên, địa chỉ, số điện thoại, tuổi….Người dùng sẽ điền vào biểumẫu và sau đó gửi nó lên máy chủ Một biểu mẫu có thể chứa một loạt các phần tử, bao gồmcác trường văn bản cho đến các hộp kiểm, danh sách thả xuống…

2.2.2 Cách Thức Sử Dụng Các Kiểu Trường Nhập Dữ Liệu

Ta nên tạo các gía trị Name cho Form (và các thành phần khác trong form) là những tập các

ký tự không có khoảng trắng và dấu tiếng việt

Trang 22

2.2.2.2 Thẻ Input

Tạo một thành phần của form Có nhiều thành phần, được xác định khác nhau bởi thuộc tínhtype trong thẻ INPUT

Thành phần textbox: Nhập dữ liệu trên một dòng: Input type="text" Thành phần này có các

thuộc tính: type, name, value, SIZE, , MAXLENGTH

Thành phần Password: Giống text, nhưng dữ liệu nhập vào hiển thị dấu * Input

type="password" Các thuộc tính: type, name, value…

Các nút chọn Radio: Input type="radio" Thành phần để người sử dụng có thể chọn hay bỏ

lựa chọn Có các thuộc tính: type, name, value, checked (xác định nút có chọn mặc địnhkhông Thuộc tính này không cần gán giá trị) Các nút radio thường nhóm thành một nhóm,các nút trong một nhóm chỉ được phép chọn một nút Để tạo thành một nhóm, các nút phải cócùng giá trị name

Các nút checkbox: Input type="checkbox" Về chức năng giống radio tuy nhiên có thể chọn

nhiều hay không chọn nút nào trong nhóm

Upload file input type=file Các thành phần khác giống textbox, sử sụng khi cần upload 1

file lên server thông qua from

Thành phần hidden: input type=hidden Giống textbox, nhưng không hiển thị trên màn hình

Thường đóng vai trò như một biến truyền dữ liệu

Nút submit: input type=submit Sử dụng gửi form tới script đã xác định trong thuộc tính

action của form

Nút reset: Type = Reset Sử dụng xóa form về trạng thái ban đầu Các thuộc tính khác giống

submit

Nút button: Một nút hình dạng giống submit nhưng không có hành động nào khi click vào.

Nó thường được sử dụng trong kết hợp với javascript để bắt các sự kiện và thực thi một sốhành động nào đó Các thuộc tính khác giống submit

2.2.2.3 Textarea

Giống text box, dùng để nhập liệu nhưng nhập được trên nhiều hàng Thẻ này có thẻ đóng và

có cú pháp như sau:

Thuộc tính: cols, rows: Kích thước textarea

Trang 23

</select>

2.2.3 Một Số Thẻ HTML Quan Trọng Khác

2.2.3.1 Thẻ META (trong phần head).

Việc cung cấp ngữ cảnh là một trong những vai trò của thẻ META Thẻ này cũng có thể dùng

để cung cấp một số dịch vụ không trực tiếp liên quan đến nội dung của trang web Dưới đây

là danh sách về công việc mà ta có thể thực hiện với các thẻ META cùng với đoạn mã tươngứng:

- Buộc trang web tự cập nhật sau một thời gian xác định (tính theo giây):

- Tải toàn bộ kí tự không phải tiếng Anh cho hồ sơ (ví dụ tiếng Nhật như trong ví dụ)

Bộ ký tự này sẽ chỉ hiển thị nếu nó được hỗ trợ và được cài đặt trên máy tính của người dùng:

<META HTTP-EQUIV="REFRESH" CONTENT="text/html;

CHARSET= window-51932">

- Buộc trang web này không chứa trong bộ đệm của máy khách hàng Một số trình duyệt có thể không hỗ trợ đặc điểm này:

- Báo hiệu rằng nội dung của hồ sơ đã không còn hiệu lực tại một thời điểm trong quá khứ và điều này ngăn không cho đọc lại trang từ trên bộ đệm của máy khách hàng:

Các thẻ META luôn được đặt ở đầu phần tử HEAD trong một tập tin Ta cần biết rằng nhiềuđộng cơ tìm kiếm sẽ bỏ qua thẻ META của ta nếu lặp đi lặp lại quá nhiều lần Bằng cáchdùng các từ đồng nghĩahay mô tả nhiều đề mục trong thẻ META loại keywords là một chínhsách nói chung là đúng

Nhiều người dùng thẻ META với thuộc tính NAME để ghi thông tin về trang web Ví dụ, thẻMETA với thuộc tính NAME với các giá trị ISBN, Author và Title có thể được dùng để ghithông tin về một cuốn sách Một số động cơ tìm kiếm có khả năng tìm kiếm các thẻ METAtuỳ biến này

Trang 24

2.2.4 Các Thẻ SPAN và DIV

Các thẻ <SPAN> và <DIV> được xem như là các thẻ chứa (thẻ mang) Chúng rất hữu dụngtrong việc phân chia các khối văn bản với phần xung quanh nó mà không làm ảnh hưởng đếnđịnh dạng của riêng nó Các thẻ này thường được dùng với các định dạng style sheet CSS vàđang được ưa chuộng trong thiết kế layout của những trang web phức tạp

SPAN là một phần tử dòng, có nghĩa là nó có thể tham gia vào đoạn văn bản và không tạo ramột ngắt dòng Một số phần tử nhúng trong dòng khác là B (in đậm), U (gạch dưới), và I ( innghiêng) Mỗi phần tử này sẽ tham gia vào đoạn văn mà không tạo ra một ngắt dòng Ngượclại, DIV là phần tử khối Thẻ DIV sẽ không tham gia vào đoạn văn Thay vì vậy, phần tử DIVđược xem như một khối văn bản riêng biệt và trở thành một đoạn văn của riêng nó Một sốphần tử khối thông dụng khác là P (đoạn văn), HR (đường kẻ ngang), TABLE và các phần tửdanh sách chẳng hạng như UL (danh sách không có thứ tự), OL (danh sách có thứ tự) và LI(mục của danh sách) Đoạn mã sau minh họa một số cách dùng cơ bản về kiểu với các thẻSPAN và DIV Chú ý rằng hai dòng mã tương tự nhau nhưng tạo ra kết quả hoàn toàn khácnhau trong trình duyệt

<HTML>

<BODY>

Display in bold that X is less than Y: <B> X<Y </B>

This paragraph uses a character entity

<HR>

Display in bold that X is less than Y: <B> X<Y </B>

This paragraph does not use a character entity

</BODY>

</HTML>

Đoạn thứ nhất sử dụng thực thể ký tự cho ký tự "<" (<) Đoạn thứ hai sử dụng bản thân ký

tự "<" Trong ví dụ này, mọi thứ giữa ký tự "<" và phần kết thúc của thẻ đóng </B> được

Trang 25

xem như nằm phía trong của một thẻ HTML và như vậy nó không được hiển thị Ngoài ra,thẻ đóng </B> cũng không được xử lý đúng Như vậy, phần còn lại của văn bản sẽ được hiểnthị ở dạng in đậm.

Một thực thể ký tự bao gồm 3 phần Phần đầu tiên là ký tự "&" Ký tự này báo cho trìnhduyệt biết rằng một thực thể ký tự bắt đầu từ đây Phần kế tiếp có thể là một con số, được đặttrước bởi ký tự "#", hoặc một tên gọi xác định cho một thực thể ký tự đặc biệt Tất cả cácthực thể ký tự đều có một con số định danh, trong khi đó thì một số thực thể ký tự thườngdùng có một tên cho trước và thường được gọi là thực thể được đặt tên Thực thể ký tự "<"trong ví dụ nêu trên là một ví dụ điển hình Nó có thể được xác định hoặc với #60 hoặc với lt.Phần cuối cùng của thực thể ký tự là dấu ";" Ký tự này đánh dấu phần kết thúc của một thựcthể ký tự Trong bảng sau liệt kê một vài trong số các thực thể ký tự thường dùng nhất Cácgiá trị số cho các thực thể ký tự được lấy từ tập ký tự Unicode phiên bản 2.0 (chính xác hơn

là theo chuẩn ISO 10646), một bảng có hàng chục ngàn ký tự của toàn thế giới

Trang 26

Bài 3 CASCADING STYLE SHEET (CSS)

3.1 Giới Thiệu

Định nghĩa về bảng kiểu xếp chồng (css) sử dụng để tách biệt format trang và nội dung của trang web Với CSS, ta có thể biến đổi mọi thứ từ kích cỡ, kiểu, màu sắc của văn bản cho đếnkhoảng cách giữa các chữ cái và các dòng, đường biên và phần đệm xung quanh phần tử, vị trí chính xác của đối tượng trên trang

3.2 Kiểu Tại Chỗ

Kiểu tại chỗ là kiểu được áp dụng cho một thẻ riêng biệt trên trang web Ta có thể áp dụngmột kiểu tại chỗ cho bất kỳ thẻ nào trên trang bằng cách dùng thuộc tính STYLE Nhưnhững thuộc tính khác, STYLE chỉ ảnh hưởng đến thẻ chứa nó

<HTML>

<BODY>

This text is in a SPAN.</SPAN><BR>

This text is not in a SPAN

SPAN {font-weight: bold; font-size: italic}

Trong phần lớn các trường hợp, một selector chính là một thẻ HTML Trong ví dụ trên, Spanchính là một selector, vì vậy tất cả những thẻ Span có trong hồ sơ sẽ tuân theo những qui tắc

đã định trong định nghĩa kiểu này

Khối khai báo theo sau selector và nằm trong cặp dấu ngoặc móc {} Khối này là một danh sách những khai báo kiểu, được phân cách bằng những dấu chấm phẩy

3.4 Bảng Kiểu Toàn Cục

Bảng kiểu toàn cục (hoặc bảng kiểu được nhúng vào) được kèm theo như là một phần của hồ

sơ HTML Loại bảng kiểu này xác định biên giới của nó bằng thẻ mở <STYLE> và thẻ đóng

</STYLE>, nó thường được đặt trong phần head của trang HTML

Ví dụ:

<HTML>

<HEAD>

<STYLE>

H1 {font-size: 16pt; font-weight: bold; color: red}

H2 {font-style: italic; font-size: 24pt; color: green}

SPAN {font-weight: bold; font-style: italic}

</STYLE>

</HEAD>

<BODY>

Trang 27

</BODY>

</HTML>

Hiển thị trong trình duyệt:

Nếu muốn một phiên bản cụ thể của một phần tử được định nghĩa khác đi so với những gì đã được định nghĩa trong bảng kiểu toàn cục, có thể ghi đè bảng kiểu bằng cách sử dụng kiểu tại chỗ cho phần tử đặc biệt này

<HTML>

<HEAD>

<STYLE>

H1 {font-size: 16pt; font-weight: bold; color: red}

H2 {font-style: italic; font-size: 24pt; color: green}

Ví dụ: Đầu tiên, sử dụng notepad để soạn thảo tập tin có nội dung như sau:

H1 {font-size: 16pt; font-weight: bold; color:red}

H2 {font-style: italic; font-size:24pt ; color:green}

Lưu tập tin với tên bất kỳ có phần mở rộng là CSS (ví dụ: style.css) Cũng cần chú ý rằng, bảng kiểu liên kết này không kèm theo các thành phần <Style> và </Style> (tức trong file CSS không có các thẻ này)

Bây giờ tập tin tạo một file HTML chứa một liên kết đến bảng kiểu bên ngoài đã định nghĩa

Trang 28

Vì không nằm trong bất kỳ tập tin HTML đặc biệt nào, nên bảng kiểu liên kết ngoài có thể được liên kết với số lượng hồ sơ không giới hạn Ví dụ, tập tin có thể tạo bảng kiểu cho toàn

bộ Website và liên kết từng trang với bảng kiểu đó Khả năng này rất hữu ích khi tập tin muốn duy trì cách thể hiện, cũng như cách cảm nhận nhất quán trên toàn bộ website Nó cũngrất tiện lợi khi muốn thay đổi cách thể hiện tổng thể của Website

3.6 Tính Thừa Hưởng

Trong phần lớn các trang web, các phần tử HTML thường chứa đựng những phần tử khác Các kiểu động hỗ trợ cơ chế gọi là thừa hưởng Trong đó việc định dạng phần tử bên ngoài được sử dụng làm cơ sở cho việc định dạng đối tượng con bên trong nhằm bổ sung cho các định dạng được thừa hưởng Trong ví dụ sau, đoạn text trong thẻ <B> sẽ được thừa hưởng các đặc tính của thẻ ngoài <SPAN>

Trang 29

Việc thừa hưởng cho phép thiết lập những định nghĩa kiểu mặc định được áp dụng cho tất cả các phần tử trong hồ sơ Để thực hiện điều này, ta chỉ cần thiết lập bảng kiểu và các định nghĩa kiểu cho phần tử BODY của hồ sơ đó

3.7 Lớp

Là một biến định nghĩa format của các thuộc tính trong các thẻ nhưng mọi thẻ đều có thể dùng được

- Công thức chung: tênlớp {các thuộc tính}

- Sử dụng: <tag class="tênlớp"> </tag>

<H2 CLASS="small">The small class on an H2 element.</H2>

<SPAN CLASS="large">The large class on a SPAN element.</SPAN><BR>

<P CLASS="small">The small class on a P element.</P>

<B CLASS="large">The large class on a B element.</B><BR>

Trang 30

Bài 4 GIỚI THIỆU JAVASCRIPT

4.1 Giới Thiệu

Ngôn ngữ đánh dấu siêu văn bản HTML có thể chứa đựng một định dạng chi tiết về nội dungvăn bản dưới dạng một trang Web tĩnh Nội dung trang này có thể bao gồm văn bản đã địnhdạng, ảnh, bảng biểu và các siêu liên kết để tạo ra một phương tiện trình bày thông tin mộtcách ấn tượng Tuy nhiên, ngoài sự tương tác mức độ thấp của các siêu liên kết bằng cáchđưa người sử dụng đi từ trang Web này đến trang Web khác Nói chung HTML không chophép đáp ứng các thông tin nhập vào từ phía người dùng ngoài việc đưa họ tới một trang mới

Hãng Netscape Communications thuộc tập đoàn Sun Microsystems đưa ra một giải phápbằng cách tạo ra một tập các lệnh đính kèm theo trang HTML gọi là JavaScript Sử dụngJavaScript, ta có thể xây dựng các biểu mẫu, công cụ tính toán và những giải pháp để tạo ratrang Web động Trước khi có JavaScript, mọi hoạt động giữa người sử dụng với sự tương tácphía máy chủ phải thông qua những ứng dụng web hết sức tinh vi và máy chủ web cao cấp.JavaScript ra đời đã làm cho máy tính của người sử dụng trở nên cân bằng hơn và đem lạimột số sức mạnh cho máy khách mà trước kia chỉ thực hiện được ở máy chủ

Sau khi JavaScript ra đời, hãng Microsoft cũng đưa ra ngôn ngữ lập trình riêng của họ làVisual Basic Scripting Edition hay VBScript

Ngoài hai ngôn ngữ trên, còn có nhiều ngôn ngữ cho phép lập trình phía máy khách nhưPerlScript, Pythos

Tại thời điểm này, JavaScript đã được hai hãng Microsoft và Netscape xây dựng lại thànhngôn ngữ mới và đặt tên là ECMAScript (tuy nhiên thực tế người ta vẫn gọi nó là JavaScript).Phiên bản hiện tại của javascript là 2.0, bao gồm các chức năng tương tác tốt hơn và người sửdụng quản lý mã tốt hơn: kiểu, lớp

VBScript và JavaScript là các ngôn ngữ lập trình kiểu thông dịch dùng cho Web Các đoạnchương trình viết bằng ngôn ngữ này nhúng trong các trang HTML và sẽ được các trìnhduyệt thông dịch để thực hiện Các ngôn ngữ Script cho phép phát triển nhanh và dễ dàng cácchương trình đơn giản hơn là các ngôn ngữ dạng biên dịch như là C, C++

Cú pháp của VBScript gần giống với Visual Basic còn cú pháp của JavaScript lại giống vớingôn ngữ C, C++

VbScript và JavaScript là hai ngôn ngữ Script dùng để viết các đoạn chương trình ở phía client rất thông dụng hiện nay Tuy nhiên JavaScript được hỗ trợ trên hầu hết các trình duyệt, trong khi đóVBScript chỉ được hỗ trợ tốt nhất trên trình duyệt Internet Explorer của

Microsoft Hiện tại, hai ngôn ngữ này cũng được sử dụng để dịch các chương trình phía server

4.2 Cách Thức Viết Một Đoạn Mã Javascript

Trong cặp thẻ:<SCRIPT>: JavaScript được thêm vào trang HTML bằng cách sử dụng cặp

thẻ là :<SCRIPT language=”JavaScript“> và </SCRIPT> Về nguyên tắc các đoạn mãJavaScript có thể đặt tại bất kỳ vị trí nào trong trang HTML và trước thẻ </BODY> Tuynhiên để dễ quản lý, người ta thường đặt chúng trong cặp thẻ <HEAD> </HEAD> Đối vớinhững trình duyệt cũ có thể sẽ không hiểu JavaScript, do vậy nếu gặp những đoạn Script này,

Trang 31

chúng sẽ xem như những text bình thường và hiển thị trên màn hình Vì lý do này, chúng tanên đặt mã của nó trong chú thích trang HTML (trong cặp dấu <!- - và - ->

Trong các sự kiện (event): Mã JavaScript còn được đặt trong các sự kiện (event) của thẻ

HTML theo cú pháp: <tag_html onEvent=” đoạn mã JavaScript “>…</tag_html> Ta thấytrong các sự kiện (onEvent) mã JavaScript được đặt trong cặp dấu “ ” Các đoạn mã nàythường là các hàm do người sử dụng viết hoặc do ngôn ngữ cung cấp nhằm mục đích thựchiện một tác vụ nào đó

Các chú thích của JavaScript giống như ngôn ngữ C, C++ là được đặt trong cặp /* và */ nếuchú thích trên nhiều dòng và sau dấu // nếu ở trên một dòng.Mỗi câu lệnh của JavaScript kết thúc bởi dấu chấm phẩy(;)

Ví dụ:

<HTML>

<HEAD>

<! //Ẩn đối với các trình duyệt không hỗ trợ JavaScript

function show_hello() // Viết một hàm tên là show_hello

Trang 32

Các biến JavaScript và kiểu dữ liệu

Biến là tên được gán cho một vùng nhớ sử dụng để lưu trữ dữ liệu Trước khi sử dụng ta phải

khai báo biến sử dụng từ khoá var theo cú pháp: var ten_bien;

Trong đó tên biến là danh hiệu được đặt theo qui tắc trên

Chú ý: JavaScript phân biệt ký tự hoa và thường, do vậy biến ten sẽ khác với Ten, và từ khoá

var phải là chữ thường

Ta cũng có thể khai báo nhiều biến một lượt và vừa khai báo vừa gán giá trị

Ví dụ:

var x=10; // khai báo biến x và gán giá trị nguyên bằng 10

x = “ Nguyen Van Tuan”; // x nhận giá trị là một chuỗi

Tại dòng đầu tiên, ta khai báo và gán giá trị cho biến x là một số nguyên Tại dòng thứ hai, xlại mang một giá trị kiểu chuỗi Mỗi câu lệnh của JavaScript được kết thúc bởi dấu chấmphẩy (;)

Các kiểu dữ liệu cơ bản trong JavaScript :

- Number: Lưu trữ số nguyên và số thực

- String: Lưu trữ chuỗi ký tự Một chuỗi ký tự được bao bởi cặp dấu nháy đơn hoặc cặpdấu nháy kép

- Bool: gồm hai giá trị: true và false

Ví dụ:

x=10; y=”10”; z=’JavaScript ‘;

Giá trị một biến là: null: dùng để ám chỉ biến không chứa giá trị thuộc kiểu nào (giống kiểuvoid trong c) Một biến được tạo ra nhưng chưa được gán giá trị nào sẽ có giá trị làundefined

Trang 33

Các toán tử khác: các toán tử có thể tạm phân loại theo từng loại như: toán tử số học, toán tử logic .

Bảng dưới liệt kê các toán tử và loại dữ liệu có thể sử dụng cùng vối toán tử đó Trong bảng

có sử dụng các ví dụ minh hoạ cho các biến có các giá trị như sau: x=10; y=4; z=”ab”,t=”ab”, r = true, s = false;

/ Chia 2 số, kết quả trả về một số thực A = x/y A = 2.5

Trang 34

A = (x < y) A=false

> Toán tử so sánh lớn hơn Ý nghĩa giống toán tử trên A = (x > y) A=true

 Phép toán +: Trong phép cộng 2 số hoặc chuỗi Nếu một toán hạng là kiểu chuỗi và

toán hạng kia là một kiểu khác thì JavaScript sẽ đổi toán hạng kia về kiểu chuỗi vàthực hiện phép toán cộng nối hai chuỗi Nếu cộng một số với một biến logic thì true

có giá trị là 1 và false có giá trị 0

A = true + “cb”; A có giá trị là “truecb”

A = false + 10; A có giá trị là 10

A = true + 10; A có giá trị là 11

A = “ab “ + 1; A có giá trị “ab1”

 Các phép toán so sánh: Được sử dụng trong những khẳng định điều kiện như: if,

switch, while Nếu so sánh 2 chuỗi, JavaScript sẽ so sánh từng ký tự theo mã ASCII

Ví dụ: “tuan” > “Tuan”, “tuan.” > “tuan“.

4.4 Các Cấu Trúc Điều Khiển

4.4.1 Cấu trúc If… Else

4.4.2 Câu Lệnh Switch

4.4.3 Câu Lệnh For …Loop

4.4.4 Cấu Trúc While… Loop

Trang 35

Chương trình sẽ kiểm tra biểu_thức_đk Nếu biểu_thức_đk dúng sẽ thi hành lệnh S cho đếnkhi nào biểu_thức_đk là một giá trị sai.

4.4.5 Cấu trúc do … while

Cú pháp

do{

S}

while (biểu_thức_đk);

Câu lệnh S được thi hành cho đến khi biểu_thức_đk bị sai Vòng lặp này khác với vòng lặptrên là thực hiện lệnh S trước và kiểm tra điều kiện sau

Ví dụ : Chương trình sau sẽ tính giá trị: 1 + ½ + 1/3 +…+1/n cho đến khi điều kiện 1/(n+1)

< xảy ra ( là một số thực cho trước)

4.4.6 Câu Lệnh Break, continue…Loop

Lệnh break: được thực thi trong vòng lặp và cho phép thoát ra khỏi vòng lặp trong cùng (gần

với nó nhất)

for (i=0; i<10; i++)

if (i==4) break;

alert(“Giá trị của I là: “ + i);

Câu lệnh continue: Lệnh continue cho phép bỏ qua các lệnh sau nó trong vòng lặp để thực

thi vòng lặp kế tiếp

Ví dụ: Tính tổng các số lẻ sử dụng continue

Trang 36

Trong đó collection và Array là các biến Ví dụ cho vòng lặp for dạng này được thể hiệntrong phần đối tượng Array

4.4.8 Câu Lệnh try … catch

Khi duyệt một trang web, ta thường thấy hộp thoại hiển thị thông báo lỗi và yêu cầu ta códebug lỗi hay không ("Do you wish to debug?") Thông báo lỗi này thường có ích cho ngườiphát triển nhưng gây khó chịu cho người sử dụng Phần này sẽ hướng dẫn cách bẫy và xử lýlỗi một cách thân thiện hơn

Có hai cách để bắt một lỗi trên trang web:

- Sử dụng lệnh try … catch

- Sử dụng sự kiện onerror Đây là giải pháp cũ hay sử dụngCấu trúc try … catch cho phép ta kiểm tra lỗi của một khối code Khối try chứa code cầnchạy để kiểm tra, khối catch chứa code được thực thi khi lỗi xảy ra

Trang 37

txt="There was an error on this page.\n\n"

txt+="Error description: " + err.description + "\n\n"

Trang 38

exception có thể là chuỗi, số nguyên, giá trị boolean hay một đối tượng.

Ví dụ này cho ta nhập vào một số nguyên từ 0 đến10 Nếu nhập ngoài các số này, chươngtrình phát sinh ra lỗi Thông tin lỗi được truyền vào khối catch (qua lệnh throw) và được hiểnthị

if(x>10) throw "Err1" ;

else if(x<0) throw "Err2";

4.5.1 Hàm Được Định Nghĩa Bởi Người Lập Trình.

Trang 39

Chú ý: hàm trong JavaScript khác với trong C là nó không xác định kiểu trả về và các tham

số hình thức cũng không được xác định kiểu

Hàm có thể có hay không có giá trị trả về (qua phép toán return)

Ví dụ: Viết một hàm tính giai thừa của một số n.

function giai_thua(n) //hàm tính n!

{

var i=1, S=1;

if (n<0) return –1; //kiểm tra giá trị n Trả về –1 nếu n<0

if ((n ==0) ||(n==1)) return 1; //Nếu n==0 hoặc n==1 thì n!=1else

{ while (i<=n)

{

S*=i;

i++;

}return S;

}}

alert (“ Giai thừa của 6 là “ + giai_thua(6));

</SCRIPT>

Các hàm cũng có thể gọi lẫn nhau hoặc gọi đệ qui

Ví dụ: Hàm đệ qui tính giai thừa của n:

Trang 40

while (isNaN(n) || (n< 0)); // Nếu n không là một số hoặc n<0 thì nhập tiếp.

n = parseInt(n); // lấy giá trị nguyên của n nếu n là số thực

Hãy viết thêm phần kiểm tra nếu người sử dụng không nhập hoặc click nút cancel

4.5.2 Tầm Vực Của Biến

Tầm vực của biến là nơi mà ta có thể truy cập đến biến Biến được khai báo trong một hàmgọi là biến cục bộ và chỉ có thể tham khảo được tại trong hàm đó hoặc các hàm mà nó gọi thihành Biến khai báo ngoài tất cả các hàm gọi là biến toàn cục và nó có thể được tham khảobởi tất cả các hàm trong trang script ngoại trừ trong hàm này cũng có một biến như vậy đượckhai báo

Tiêu đề	Tài liệu thiết kế Web dùng ngôn ngữ PHP
Tác giả	Nhóm tác giả
Trường học	Trường Đại Học XYZ
Chuyên ngành	Thiết kế Web
Thể loại	Giáo trình
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	145
Dung lượng	1,91 MB