Tài liệu học thiết kế web với HTML

ũ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:
 o Địa chỉ Internet, cú dạng: http://… Vớ dụ: http:// www.yahoo.com
 o 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
 o Liờn kết ngay chớnh trong trang, đặt bằng bookmark.
3. Định dạng trang
Thiết kế web với HTML www.tamnguyen.vn 19
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
 ã 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.
Thiết kế web với HTML www.tamnguyen.vn 20
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
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 (
Thiết kế web với HTML www.tamnguyen.vn 21
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
 ã 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...
Thiết kế web với HTML www.tamnguyen.vn 22
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
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
Thiết kế web với HTML www.tamnguyen.vn 23
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
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.
Thiết kế web với HTML www.tamnguyen.vn 24
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
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 (
Thiết kế web với HTML www.tamnguyen.vn 25
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
3. Thiết kế website theo mẫu sau (
4. Thiết kế website theo mẫu sau (
Thiết kế web với HTML www.tamnguyen.vn 26
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
Thiết kế web với HTML www.tamnguyen.vn 27
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
5. Thiết kế website theo mẫu sau (
6. Thiết kế website theo mẫu sau (
Thiết kế web với HTML www.tamnguyen.vn 28
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
Thiết kế web với HTML www.tamnguyen.vn 29
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
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.
Thiết kế web với HTML www.tamnguyen.vn 30
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
 Phần I
 Giới thiệu ngôn ngữ Html ........................................................................1
 I. Các thẻ định cấu trúc tài liệu............................................................1
 1.1 HTML ................................................................................................................ 1
 1.2 HEAD ................................................................................................................ 1
 1.3 TITLE ................................................................................................................ 1
 1.4 BODY ................................................................................................................ 1
 II. Các thẻ định dạng khối.........................................................................2
 2.1. thẻ P .................................................................................................................. 2
 2.2. Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6................................................ 3
 2.3 Thẻ xuống dòng BR............................................................................................ 3
 2.4 Thẻ PRE............................................................................................................. 3
 III. Các thẻ định dạng danh sách ...........................................................3
 3.1. Danh sách thông th- ờng..................................................................................... 3
 IV. Các thẻ định dạng ký tự......................................................................4
 4.1. Các thẻ định dạng in ký tự ................................................................................. 4
 4.2. Căn lề văn bản trong trang Web......................................................................... 5
 4.3. Các ký tự đặc biệt .............................................................................................. 6
 4.4. Sử dụng màu sắc trong thiết kế các trang Web ................................................... 6
 4.5. Chọn kiểu chữ cho văn bản ................................................................................ 8
 4.6. Khái niệm văn bản siêu liên kết ......................................................................... 8
 4.7. Địa chỉ t- ơng đối ............................................................................................... 9
 4.8. Kết nối mailto.................................................................................................. 10
 4.9. Vẽ một đ- ờng thẳng nằm ngang....................................................................... 10
 V. Các thẻ chèn âm thanh, hình ảnh...................................................11
 5.1. Giới thiệu......................................................................................................... 11
 5.2. Đ- a âm thanh vào một tài liệu HTML.............................................................. 12
 5.3. Chèn một hình ảnh, một đoạn video vào tài liệu HTML ................................... 13
 VI. Các thẻ định dạng bảng biểu .........................................................14
 VII. FORM.........................................................................................................15
 7.1. HTML Forms .................................................................................................. 15
 7.2. Tạo Form......................................................................................................... 16
 7.3. Tạo một danh sách lựa chọn............................................................................. 16
Thiết kế web với HTML www.tamnguyen.vn 31
Tài liệu học thiết kế web với html
 www.tamnguyen.vn
 7.4. Tạo hộp soạn thảo văn bản............................................................................... 17
 Phần II
 thiết kế web sử dụng ms frontpage.................................................18
Thiết kế web với HTML www.tamnguyen.vn 32