Tài liệu Tài liệu thiết kế web dung php

  • Số trang: 146 |
  • Loại file: PDF |
  • Lượt xem: 119 |
  • Lượt tải: 1
tranvantruong

Đã đăng 3224 tài liệu

Mô tả:

tài liệu thiết kế_web_dung_php
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.1 Giới Thiệu ...................................................................................................................... 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.1 Giới Thiệu ...................................................................................................................... 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 Page 1. 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.1 Giới Thiệu ...................................................................................................................... 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.1 Giới Thiệu ...................................................................................................................... 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.1 Giới Thiệu .................................................................................................................... 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 Page 2. 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.1 Giới Thiệu .................................................................................................................. 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.1 Giới Thiệu .................................................................................................................. 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 Page 3. 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ấu chuẩ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 cho phé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ột tà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ững dò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ình duyệt ta đang sử dụng, cần kiểm tra kỹ trước khi đưa trang web lên mạng Internet 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ình duyệ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ìm kiế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à: Chuỗi văn bản, Media Ví dụ: HTML Thẻ này () 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 thì giữa "<" và tag_name phải được viết liền (giữa chúng không có khoảng trắng). - Thông thường một thẻ HTML đều có một thẻ đóng . 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. Page 4. - - 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. Các thẻ HTML có thể được viết bằng chữ thường hay chữ hoa. Trình duyệt web khô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ết bở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ình duyệt không hiểu một tag nào đó, nó sẽ tự động bỏ qua tag đó và chỉ thông dịch phần cò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: Nội dung header nội dung BODY - Một tài liệu HTML gồm 2 phần riêng biệt. Phần đầu (HEAD) và phần thân (BODY). Phần đầu chứa những thông tin về tài liệu và không được hiển thị trên màn hình. Phần thân chứa tất cả các thành phần là những thứ được hiển thị như là một phần của trang web. - Toàn bộ công việc để tạo một trang HTML nằm trong cặp thẻ và . Bên trong cặp thẻ này là cặp thẻ và . Trang web của chúng ta có thể vẫn hiển thị tốt mà không cần cá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àn toà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ác trì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 . 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ằm trong cặp dấu chú thích . Việc đặt những chú thích là rất hữu ích đối với cá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 khi viế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ảng trắ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ình duyệt sẽ nhận biết các tài liệu HTML qua các phần mở rộng của file. Page 5. 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 Đề 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à: Text Appear in Heading 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ừ 1 đến 6 như sau. a) Mã HTML cho hiển thị trên là:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
Thẻ này có một thuộc tính là align có các giá trị: Left, Right, Center dùng để cách chỉnh văn bản về bên trái, phải, giữa của trình duyệt. Ví dụ

Heading 2 - Center

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 trong trình soạn thảo. Tuy nhiên khi trình duyệt gặp 2 thẻ

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à
sẽ xuống dòng,

sẽ chèn một dòng trống và xuống dòng, hơn nữa thẻ
không có thẻ kết thúc trong khi

có thể có và thẻ

còn có thuộc tính giống như thẻ Heading là align để cho phép canh chỉnh văn bản trong đoạn. Nếu không có thẻ

thì đoạn văn bản trong thẻ

cũng bị chấm dứt khi gặp thẻ

mới. Thẻ

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 cho phép canh chỉnh văn bản trong đoạn trong cửa sổ trình duyệt. Tạo đường kẻ Thẻ


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ị cho WIDTH 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: HTML tag This is Bold… (vi) Kết quả This is Bold… Page 6. This is Italic … (vii) This is Typewriter … This is Underline a. This is Italic … This is Typewriter … 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ách chính xác. Ta cũng có thể áp dụng các kiểu mẫu vào trong các tiêu đề. 1.3.1.3 Một Số Thẻ Fortmatting Khác - - - -
: 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ân vă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 được là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ản thụt vào trong (indented block of text). Với trang HTML, đưa văn bản vào cặp thẻ
… text …
để tạo chức năng này.
: Thông thường trong các trang Web, tại phần cuối (footer) thường có vùng cung 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ác dòng trong thẻ
, khi đó nó sẽ được hiển thị với kiểu chữ in nghiêng. Các thô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ẻ : Ta sử dụng tag này để thiết lập font chữ mặc định cho toàn bộ trang web 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ớn nhấ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ủa thẻ 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ẻ : 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ụ: . 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ập giá 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êm dấu "+" (tăng) hoặc "-" (giảm) vào trước giá trị của thuộc tính size. Ví dụ: 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ết lậ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ữ so vớ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ần trong 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 trong thẻ 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ày cũ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ết lập một màu sắc nhất định. Page 7. Các ví dụ về thẻ font. ------------------Ví dụ 1-------------------- Font size:4 - color:red - face:vni-times
Font size:6 - color: ff0000 - face:arial
Font size:2 - color:red - face:vni-times
Font size:4 - color:red - face:vni-times
------------------Ví dụ 2-------------------- Font size=1
Font size=2
Font size=3
Font size=4
Font size=5
Font size=6
Font size=7 chữ
Ngoài thẻ font


Ngoài thẻ
font size=6
ngoài thẻ font size=7
font size=2 -
: Hiển thị dạng chữ đánh máy và giữ nguyên các khoảng trắng và dấu xuống
dòng.
: 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.
: 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.
: Đoạn văn bản nằm trong thẻ sẽ có font-size dạng chữ lớn hoặc
nhỏ tương ứng.
: 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

Page 8.

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


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ột
trang web là GIF (Graphics Interchange Format). GIF nén các thông tin của hình ảnh (làm
giả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ường
hay được sử dụng trong web là JPG hoặc JPEG (được đặt tên sau khi nhóm Joint
Photographic 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ào
chấ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. Ta
nê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ụng
hì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ớn
quá. 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ông
phả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ép
quả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ẻ . Thẻ này không có thẻ kết
thú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ụ:
 Chèn hình h1.gif trong thư mục con Images.
 Chèn h1.gif từ thư mục ngang hàng với thư mục hiện hành
tên là Images.
 Chèn hình h1.gif trong thư mục images
củ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.

Page 9.

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ùng
kí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ải
xuố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
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ộc
tí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 cho
vă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ị RedGreen-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àu
Green 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.

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ụ:


Mau sau trong trang web 
link 1
link 2 Page 10. 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ính background. 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ục cá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. Nếu trong thẻ Body có cả 2 thuộc tính bgcolor và background, khi hình nền trang chưa load xong, trang sẽ có màu bgcolor và màu sẽ chuyển thành hình nền khi trang nạ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ác thô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ễn bởi những chữ màu xanh có gạch dưới và được gọi là anchor. Thẻ sẽ dùng để tạo các liên kết và có dạng như sau: Text link, media 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. Giá trị Name _blank _parent _self _top - Ý nghĩa Nạp trang Web vào trong cửa sổ hay frame có tên là name. Nạp trang Web vào cửa sổ mới không có tên. Nạp trang web vào cửa sổ cha của trang hiện hành. Giá trị mặc định. Nạp trang web vào cửa sổ hiện hành. 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ải viế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 URL trong 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 file trong 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ị "../". Page 11. 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ượt quá vùng cửa sổ trình duyệt. Để liên kết đến bookmark, ta thêm dấu # và tên bookmark ngay sau giá trị của URL. Để tạo một bookmark, ta sử dụng thẻ tại vị trí cần tạo theo qui tắc sau: text. Để 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: -----------F12.htm------------- something here. something ----------chapter2 ------ Bảng ví dụ sau sẽ sử dụng thẻ để liên kết đến các thành phần khác. Code HTML Chöông 1 Mã trong file F12.htm F11.htm Ý nghĩa - Liên kết nội đến vị trí có bookmark tên là chapter1 trong cùng trang. - Liên kết là hình h1.gif đến trang f121.htm tại vị trí bookmark có tên chapter1 trong cùng thư mục. Page 12. click link Index.htm Liên kết đến trang f11.htm F11.htm Liên kết đến trang f211.htm trang f21 F211.htm download F211.htm Microsoft download My Email 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ết này. Hiển thị cửa sổ để download tập tin a.zip Liên kết đến trang chủ của máy chủ Microsoft. Trang web được nạp vào cửa sổ mới - Hiển thị cửa sổ tải tập tin theo giao thức fpt - Hiển thị trình soạn thảo thư để gửi tới địa chỉ xác định trong 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ển sang 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ỗi vùng tương ứng. Ví dụ. Frame Tập khung trong đoạn mã trên trỏ tới 3 hồ sơ trong html là:1.htm, 2.htm và 3.htm. Phía trong thẻ có thuộc tính COLS, ám chỉ rằng trang sẽ được chia thành nhiều cột, 3 giá trị của thuộc tính này sẽ xác định 3 cột: cột đầu tiên sẽ có chiều rộng bằng với 50% cửa sổ trình duyệt, cột thứ hai có chiều rộng là 70 pixel và cột thứ ba sẽ có chiều rộng bằng với phần còn lại của cửa sổ trình duyệt (được thể hiện bởi biểu tượng * ). Nếu ta thiết lập kích thước của khung bằng cách dùng tỉ lệ phần trăm, chúng sẽ co giãn tùy theo cửa sổ trình duyệt. Trong hình ta thấy các thanh phân cách giữa các cột, người dùng có thể kéo các thanh này để thay đổi kích thước của cột. Quay trở lại với đoạn mã, chú ý rằng phía trong tập khung, có các thẻ . Các thẻ này xác định các tập tin HTML mà trình duyệt sẽ hiển thị trong mỗi trình duyệt của khung. Page 13. 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. - FRAMEBORDER, FRAMESPACING: 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. Embedding Frame 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 tin chứ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. Tập khung trong đoạn mã giới thiệu một tập tin HTML mới có tên là nav.htm với một loạt các liên kết trong đó. Tập tin nav.htm có nội dung như sau: Go to Frame 1
Page 14. Go to Frame 2
Go to Frame 3
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ẻ 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à . Văn 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ông dùng khung trong site của ta cho đến một lời đề nghị nhã nhặn người dùng nâng cấp trì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 TARGET vớ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ẫy trong 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ếm thô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ông tin. 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ác thô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 cho nhiề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ẻ và
. Trong các thẻ này, ta sử dụng các thẻ định nghĩa hàng của bảng, và . Trong mỗi hàng, ta lại định nghĩa các ô của bảng bằng các thẻ và . Đoạn mã sau giới thiệu một trang web chứa một bả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.
R1, D1 Row 1, Data 2
Row 2, Data 1 This is Row 2, Data Column 2
Page 15. Việc thiết lập thuộc tính BORDER với giá trị 1 sẽ tạo ra đường biên dày 1 pixel xung quanh mỗi ô của bảng cũng như xung quanh bảng. Nếu ta tăng giá trị này, chiều dày của đường biên 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ức khác nhau của bảng. Các thẻ được thụt vào sâu hơn so với các thẻ và các thẻ được thụt sâu hơn so với các thẻ . Không nhất thiết phải sử dụng việc trình bà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ữu dụ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 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 ô. -
Row 1, Data 1
Row 2, Data 1 Row 2, Data 2
Thuộc tính COLSPAN xác định chiều rộng của một ô tính theo cột. Một ô thông thường điền đầy trong một cột. Việc thiết lập giá trị của COLSPAN là 2 làm cho ô trải rộng thêm hai cột; thiết lập giá trị 4 sẽ làm cho ô trải rộng trên 4 cột. Trong ví dụ, việc thiết lập giá trị COLSPAN thành 2 làm cho ô tương ứng sẽ có chiều rộng bằng 2 ô trong các hàng kế cận. Cũng cần chú ý rằng thuộc tính ALIGN đã được thiết lập để canh giữa nội dung của ô. Thuộc tính có 3 giá trị:Left (mặc định), Center và Right. Kỹ thuật thiết lập chiều rộng, canh giữa nội dung của ô như thế này thường rất hữu dụng khi ta tạo các tiêu đề cột của bảng. ví dụ sử dụng cả hai thuộc tính ROWSPAN và COLSPAN trên một bảng. Page 16.
Fruit Sales
nbsp; nbsp; Store 1 Store 2
Apples Day14025
Day23030
Oranges Day14025
Day23030
Page 17. 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 danh sá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 hai loạ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ất hiệ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------
    This is at the first level.
      This is at the second level.
      This is at the second level.
        This is at the third level.
      This is at the second level.

    This is the first level header.
  • This is the first level-1 item in the list.
  • This is the second level-1 item in the list.
    • This is the first level-2 item in the list.
    • And this is the second level-2 item in the list.
  • This is the third level-1 item in the list.
Page 18. 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ự,
. 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ột loạt các văn bản được đặt thụt đầu dòng. Chú ý rằng mỗi thẻ
    mở có một thẻ
đó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ự,
    . Một thẻ đóng,
, 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ập tin. 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ày chứa đựng các mục dạng nút, được bắt đầu bởi thẻ mục danh sách,
  • . Thẻ kết thúc
  • 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 danh sá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úng và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ức thứ hai không có bất kỳ văn bản nào sau thẻ