Giáo trình thiết kế Web HTML

 nhưng phải phân cách chúng bởi dấu phẩy.
LOOP = n/INFINITE
Chỉ định số lần chơi. Nếu LOOP = INFINITE thì file video sẽ được chơi vô hạn lần.
VI. Các thẻ định dạng bảng biểu
Sau đây là các thẻ tạo bảng chính:
 ... 
Định nghĩa một bảng
 ... 
Định nghĩa một hàng trong bảng
 ... 
Định nghĩa một ô trong hàng
 ... 
Định nghĩa ô chứa tiêu đề của cột
 ... 
Tiêu đề của bảng
Cú pháp:
<TABLE 
ALIGN 	= LEFT / CENTER / RIGHT
BORDER	= n 
BORDERCOLOR 	= color
BORDERCOLORDARK 	= color
BORDERCOLORLIGHT 	= color
BACKGROUND 	= url
BGCOLOR 	= color
CELLSPACING	= spacing 
CELLPADDING	= pading
>
Tiêu đề của bảng biểu
... Định nghĩa các dòng
<TR 
ALIGN = LEFT/CENTER/RIGHT 
VALIGN = TOP/MIDDLE/BOTTOM>
	... Định nghĩa các ô trong dòng
<TD 
ALIGN 	= LEFT / CENTER / RIGHT 
VALIGN 	= TOP / MIDDLE / BOTTOM
BORDERCOLOR	= color
BORDERCOLORDARK	= color
BORDERCOLORLIGHT	= color
BACKBROUND	= url
BGCOLOR	= color
COLSPAN 	= n
ROWSPAN	= n
>
... Nội dung của ô
...
...
ý nghĩa các tham số:
ALIGN / VALIGN
Căn lề cho bảng và nội dung trong mỗi ô.
BORDER
Kích thước đường kẻ chia ô trong bảng, được đo theo pixel. Giá trị 0 có nghĩa là không xác định lề, giữa các ô trong bảng chỉ có một khoảng trắng nhỏ để phân biệt. Nếu chỉ để border thì ngầm định border=1. Với những bảng có cấu trúc phức tạp, nên đặt lề để người xem có thể phân biệt rõ các dòng và cột.
BORDERCOLOR
Màu đường kẻ
BORDERCOLORDARK
BORDERCOLORLIGHT
Màu phía tối và phía sáng cho đường kẻ nổi.
BACKGROUND
Địa chỉ tới tệp ảnh dùng làm nền cho bảng
BGCOLOR
Màu nền
CELLSPACING
Khoảng cách giữa các ô trong bảng
CELLPADDING
Khoảng cách giữa nội dung và đường kẻ trong mỗi ô của bảng.
COLSPAN
Chỉ định ô sẽ kéo dài trong bao nhiêu cột
ROWSPAN
Chỉ định ô sẽ kéo dài trong bao nhiêu hàng
 VII. FORM
7.1. HTML Forms
 Các HTML Form có thể có các hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn...
7.2. Tạo Form
Để tạo ra một form trong tài liệu HTML, chúng ta sử dụng thẻ FORM với cú pháp như sau:
Cú pháp:
<FORM
	ACTION	= ulr
	METHOD	= GET | POST
	NAME 	= name
	TARGET 	= frame_name | _blank | _self
	>
Trong đó
ACTION
Địa chỉ sẽ gửi dữ liệu tới khi form được submit (có thể là địa chỉ tới một chương trình CGI, một trang ASP...).
METHOD
Phương thức gửi dữ liệu.
NAME
Tên của form.
TARGET
Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến server.
Đặt các đối tượng điểu khiển (như hộp văn bản, ô kiểm tra, nút bấm...) vào trang Web
Cú pháp thẻ INPUT:
<INPUT
ALIGN = LEFT | CENTER | RIGHT
TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT
VALUE = value
>
7.3. Tạo một danh sách lựa chọn
Cú pháp:
 Tên mục chọn thứ nhất
 Tên mục chọn thứ hai
7.4. Tạo hộp soạn thảo văn bản 
Cú pháp:
<TEXTAREA
	COLS=số cột
	ROWS=số hàng
	NAME=tên
>
	Văn bản ban đầu
Phần II thiết kế web sử dụng ms frontpage 
I. CÁC THAO TÁC CƠ BẢN
1. Cỏc thao tỏc chớnh khi soạn thảo một trang web
Tạo mới một trang web: Chọn chức năng File/New/Page /Normal Page hay chọn icon New trờn Toolbar.
Lưu trang web: Chọn chức năng File/Save hay chọn icon Save trờn Toolbar. Để lưu trang web dưới dạng một tờn khỏc chọn chức năng File/Save As…
Xem trước hiển thị của trang web đang thiết kế: Chọn chức năng File/Preview in Browser. Lỳc này cửa sổ trỡnh duyệt Internet Explorer (IE) sẽ hiển thị trang web mà chỳng ta đang soạn thảo. Nờn lưu trang web trước khi chọn chức năng này.
Cửa sổ màn hỡnh soạn thảo trang web cung cấp 3 cỏch “hiểu” (view) khỏc nhau về 1 trang web. 
Nếu bạn chọn Normal view, bạn cú thể biờn tập trang web dưới dạng WYSIWYG. Vớ dụ bạn cú thể gừ văn bản vào, thay đổi màu sắc, kớch thước chữ, … b
Nếu bạn chọn HTML view, bạn sẽ thấy được cỏc mó HTML tương ứng với cỏch trỡnh bày của trang web của bạn. Vớ dụ, nếu trong Normal view bạn chốn vào một table thỡ trong HTML view, bạn sẽ thấy cỏc tag tương ứng như sau:	 
Nếu bạn chọn Preview view, tương tự với chức năng Preview in Browser
2. Tạo cỏc thành phần của trang web\
2.1. Thời gian cập nhật (Time stamp) 
Chọn Insert/Date and Time.
Chọn định dạng ngày thỏng và thời gian phự hợp với nhu cầu của bạn
2.2. Đường kẻ ngang (Horizontal line) 
Chọn Insert/Horizotal line.
Đặt cỏc thuộc tớnh cho đường kẻ ngang bằng cỏch double click chuột lờn nú. Sau đú chọn cỏc thụng số về Width, Height, Color, Alignment
2.3. List 
Chọn Format/Bullets and Numbering.
Sau khi hộp hội thoại xuất hiện, bạn hóy chọn cỏc dạng bullet và numbering tương ứng.
Để thay đổi cỏc thuộc tớnh của bullet như màu sắc, kiểu chữ, …, ta chọn Format/Bullets and Numbering/Style
Ngoài ra, ta cũn cú thể chọn hỡnh ảnh để thay cho cỏc kiểu bullet thụng thường. Để thay đổi, ta chọn Format/Bullets and Numbering/Picture bullets, rồi chọn ảnh dựng để làm bullet
Để bỏ định dạng bullets, ta chọn Format/Bullets and Numbering/Plain Bullets.
2.4. Tables
Người ta thường dựng table để:
Hiển thị cỏc thụng tin cú dạng dũng/cột, vớ dụ như bảng thời khúa biểu, thụng tin sản phẩm, ..
Trỡnh bày (layout) cỏc văn bản(text) và cỏc ảnh đồ họa(graphics).
Để tạo một bảng, ta cú thể dựng một trong hai cỏch:
Chọn Table/Insert Table. Khi hộp hội thoại tạo bảng hiện ra, bạn phải cung cấp cỏc thụng tin chi tiết cho việc tạo bảng, vớ dụ như số dũng, số cột, kớch thước, ...
Chọn Table/Draw Table. Với chức năng này, bạn sẽ dựng bỳt vẽ để tạo cỏc dũng, cột
Để khụng hiện (hide) border của bảng, ta click phải chuột lờn table, chọn Table Properties/Border/Sizes bằng 0.
Để tỏch một cell hay trộn nhiều cell lại, ta chọn Tabe rồi chọn Split /Merge Cells.
Để thờm hoặc xúa cỏc cell, ta chọn Table rồi chọn Insert/Delete Cells.
2.5. Một số hiệu ứng đặc biệt
Chuyển trang (Page transition): Chọn Format/Page Transition…
Hiệu ứng chữ chuyển động theo chiều ngang (Marquees): Chọn Insert/Component/Marquee. Sau khi hộp thoại hiện ra, bạn gừ vào dũng chữ cần chuyển động và đặt cỏc thuộc tớnh khỏc như màu sắc, font chữ, …
Thờm hiệu ứng font chữ cho cỏc hyperlink: Chọn Format/Background, check vào Enable hyperlink rollover effects. Sau đú bạn cú thể chọn cỏc màu theo ý muốn.
2.6. Chốn ảnh 
Chọn chức năng Insert/Picture/From File.
Đặt thuộc tớnh và kớch thước của ảnh, click phải chuột lờn ảnh, rồi chọn Picture Properties.
Để tạo cỏc hotspot hyperlink, ta chọn hỡnh vẽ tương ứng (hỡnh chữ nhật, ellipse, …) trờn thanh toolbar pictures. Chọn vựng trờn ảnh, rồi điền thụng tin của hyperlink vào
2.7. Chốn hyperlink
Chọn chức năng Insert/Hyperlink.
Sau khi hộp thoại hiện ra, gừ vào hyperlink tương ứng. Cú 3 dạng:
Địa chỉ Internet, cú dạng: http://… Vớ dụ: http:// www.yahoo.com
Liờn kết tới một trang trong site, cú dạng: /thư mục/tờn tập tin. Vớ dụ: ../images/shopping.htm
Liờn kết ngay chớnh trong trang, đặt bằng bookmark.
3. Định dạng trang
Click phải chuột lờn trang, chọn Page Properties. 
Để đặt màu nền cho trang, chọn Background/Colors/Background 
Để đăt ảnh nền cho trang, chọn Background/Formatting/Background picture.
Để đặt cỏc thụng số về màu sắc cho hyperlink, chọn Background/Colors/Hyperlink
Để đặt tiờu đề cho trang chọn General/Title.
II. THỰC HÀNH
1. Tạo trang web cho nhúm.
Khởi động Microsoft Front Page 2000.
Soạn trang web cỏ nhõn của nhúm đặt tờn là InfoGroup.htm (vớ dụ nhúm 1 sẽ lấy tờn là InfoGroup1.htm). Cỏc thụng tin chớnh của cỏc thành viờn trong nhúm bao gồm: Họ và tờn, Cụng việc và chức vụ hiện nay, Địa chỉ liờn lạc, Điện thoại, Fax, Email, Mobile Phone, ... Ngoài ra cỏc nhúm cú thể bổ sung cỏc thụng tin khỏc.
Upload trang web đó soạn lờn website.
Thử truy cập trang web đó tải lờn.
2. Tham khảo cỏc site thụng tin của Việt Nam
3. Tham khảo cỏc site bỏn hàng nổi tiếng 
4. Tham khảo cỏc site giải trớ
5. Tham khảo cỏc site về lao động việc làm tại VN
6. Tạo trang web chứa cỏc hyperlink dựng để truy cập nhanh
Tạo trang web đặt tờn là Links.htm chứa cỏc hyperlink đó đề cập ở trờn. Bổ sung thờm cỏc hyperlink và cỏc phõn loại khỏc mà cỏc anh chị đó biết.
Upload lờn website và kiểm tra lại.
7. Tạo trang HomePage
Tạo trang web HomePage đặt tờn là Default.htm giới thiệu về nhúm và cỏc cụng việc mà nhúm đang triển khai.
Kết nối hai trang đó tạo vào HomePage.
Upload lờn website và kiểm tra lại.
8. Chọn chủ đề để thiết kế website
Website về dịch vụ việc làm.
Website về dịch vụ nhà đất (
Website bỏo điện tử ( )
Website trường học.
Website bỏn hàng (cửa hàng, siờu thị ảo trờn Internet)
Website dịch vụ giải trớ như ECards, Điện hoa, ...
Cỏc chủ đề khỏc...
III. ĐĂNG KÍ WEBSITE MIỄN PHÍ TRấN INTERNET
 1. Vào địa chỉ  để đăng kớ website miễn phớ với địa chỉ truy cập cú dạng  
2. Gừ vào địa chỉ mà bạn dự định đăng kớ tại ụ yourname. Sau đú click Go. Màn hỡnh tiếp theo sẽ hiện ra, bạn chọn mục cuối cựng 100% Free Hosting Option và click vào SignUp
3. Sau đú bạn hóy điền vào cỏc thụng tin liờn quan cần thiết như Họ tờn, mật khẩu, email, … Cuối cựng gừ vào ARTK để chắc rằng bạn đó đồng ý với cỏc qui định của FreeServers khi cung cấp dịch vụ miễn phớ này.
4. Nếu đăng kớ thành cụng, màn hỡnh sau sẽ hiện ra để cung cấp cho bạn một số lựa chọn khi xõy dựng website của mỡnh.
IV.THIẾT KẾ MỘT SỐ WEBSITE MẪU
1. Thiết kế website theo mẫu sau (
2. Thiết kế website theo mẫu sau (
3. Thiết kế website theo mẫu sau (
4. Thiết kế website theo mẫu sau (
5. Thiết kế website theo mẫu sau (
6. Thiết kế website theo mẫu sau (
7. Thiết kế website theo mẫu sau ( )
Để tham khảo cỏch thiết kế cỏc trang web trờn, hóy:
Tải về mỏy bằng cỏch chọn chức năng Save của IE.
Dựng MS Front Page để mở tập tin đó lưu lờn
Chuyển qua lại giữa cỏc màn hỡnh Normal View và HMTL View để biết cỏch thiết kế
Với mỗi trang web đó xem hóy chỳ ý cỏc vấn đề sau:
Cỏch bố trớ cỏc bảng (table)
Cỏch sử dụng font chữ
Cỏch chốn vào cỏc hỡnh ảnh để trang trớ
Cỏch định nghĩa cỏc thuộc tớnh như màu chữ, màu nền, ...
Phần tĩnh (khụng thay đổi) mỗi khi click vào cỏc hyperlink chuyển qua một nội dung mới
Từ cỏc trang web trờn, hóy tự thiết kế cỏc trang cho website của nhúm.