Giáo trình thiết kế web

Giáo trình thiết kế web

Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Phần I Giới thiệu ngôn ngữ Html I Các thẻ định cấu trúc tài liệu 1.1 HTML Cặp thẻ sử dụng để xác nhận tài liƯu lµ tµi liƯu HTML, tøc lµ nã cã sư dụng thẻ HTML để trình bày Toàn nội dung tài liệu đặt cặp thẻ Cú pháp: Toàn nội tài liệu đặt Trình duyệt xem tài liệu không sử dụng thẻ tệp tin văn bình thường 1.2 HEAD Thẻ HEAD dùng để xác định phần mở đầu cho tài liệu Cú pháp: Phần mở đầu (HEADER) tài liệu đặt 1.3 TITLE Cặp thẻ sử dụng phần mở đầu tài liệu, tức phải nằm thẻ phạm vi giới hạn cặp thẻ Cú pháp: Tiêu đề tài liệu 1.4 BODY Thẻ sử dụng để xác định phần nội dung tài liệu - phần thân (body) tài liệu Trong phần thân chứa thông tin định dạng định để đặt ảnh cho Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 tài liệu, màu nền, màu văn siêu liên kết, đặt lề cho trang tài liệu Những thông tin đặt phần tham số thẻ phần nội dung tài liệu đặt Cú pháp: Trên cú pháp thẻ BODY, nhiên HTML 3.2 có nhiều thuộc tính sử dụng thẻ BODY Sau thuộc tính chính: BACKGROUND= Đặt ảnh làm ảnh (background) cho văn Giá trị tham số (phần sau dấu bằng) URL file ảnh Nếu kích thước ảnh nhỏ cửa sổ trình duyệt toàn hình cửa sổ trình duyệt lát kín nhiều ảnh BGCOLOR= Đặt mầu cho trang hiển thị Nếu hai tham số BACKGROUND BGCOLOR có giá trị trình duyệt hiển thị mầu trước, sau tải ảnh lên phía TEXT= Xác định màu chữ văn bản, kể đề mục ALINK=,VLINK=,LINK= Xác định màu sắc cho siêu liên kết văn Tương ứng, alink (active link) liên kết kích hoạt - tức đà kích chuột lên; vlink (visited link) liên kết đà kích hoạt; Như tài liệu HTML có cấu trúc sau: Tiêu đề tài liệu Nội dung tài liệu Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 II Các thẻ định dạng khối 2.1 thẻ P Thẻ

sử dụng để định dạng đoạn văn Cú pháp:

Nội dung đoạn văn bản

2.2 Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 HTML hỗ trợ mức đề mục Chú ý đề mục dẫn định dạng mặt logic, tức trình duyệt thể đề mục khuôn dạng thích hợp Có thể trình duyệt font chữ 14 point sang trình duyệt khác font chữ 20 point Đề mục cấp cao giảm dần đến cấp Thông thường văn đề mơc cÊp hay cÊp th­êng cã kÝch th­íc nhỏ văn thông thường Dưới thẻ dùng để định dạng văn dạng đề mục: Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp 2.3 Thẻ xuống dòng BR Thẻ thẻ kết thúc tương ứng (), có tác dụng chuyển sang dòng Lưu ý, nội dung văn tài liệu HTML trình duyệt Web thể liên tục, khoảng trắng liền nhau, ký tự tab, ký tự xuống dòng coi khoảng trắng Để xuống dòng tài liệu, bạn phải sử dụng thẻ 2.4 Thẻ PRE Để giới hạn đoạn văn đ định dạng sẵn bạn sử dụng thẻ Văn hai thẻ thể giống hệt chúng đánh vào, ví dụ dấu xuống dòng đoạn văn giới hạn thẻ có ý nghĩa chuyển sang dòng (trình duyệt không coi chúng dấu cách) Cú pháp: Giáo trình thiết kế Web Văn đà định dạng Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 III Các thẻ định dạng danh sách 3.1 Danh sách thông thường Cú ph¸p:

• Mơc thø nhÊt
• Mơc thø hai

Có kiểu danh sách: Danh sách không xếp ( hay không đánh số)

Ã` ÃDanh sách có xếp (hay có đánh số)
, mục da nh sách xếp thứ tự à Danh sách thực đơn à Danh sách phân cấp Với nhiều trình duyệt, danh sách phân cấp danh sách thực đơn giống danh sách không đánh số, cã thĨ dïng lÉn víi Víi thỴ OL ta cã có ph¸p sau:
1. Muc thu nhat
2. Muc thu hai
3. Muc thu ba
®ã: TYPE =1 Các mục xếp theo thứ tự 1, 2, =a Các mục xếp theo thứ tự a, b, c =A Các mục xếp theo thứ tự A, B, C Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 =i Các mục s¾p xÕp theo thø tù i, ii, iii =I Các mục xếp theo thứ tự I, II, III Ngoài thuộc tính START= xác định giá trị khởi đầu cho danh sách Thẻ < LI > có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mục danh sách Thuộc tính nhận giá trị : disc (chấm tròn đậm); circle (vòng tròn); square (hình vuông) IV Các thẻ định dạng ký tự 4.1 Các thẻ định dạng in ký tự Sau thẻ sử dụng để quy định thuộc tính in nghiêng, in đậm, gạch chân cho ký tự, văn thể trình duyệt In chữ đậm In chữ nghiêng In chữ gạch chân Đánh dấu đoạn văn hai thẻ định nghĩa từ Chúng thường in nghiêng thể qua kiểu đặc biệt In chữ bị gạch ngang Giáo trình thiết kế Web In chữ lớn bình thường cách tăng kích thước font thời lên Việc sử dụng thẻ lồng tạo hiệu ứng chữ tăng dần Tuy nhiên trình duyệt có giới hạn kích thước font chữ, vượt giới hạn này, thẻ ý nghĩa In chữ nhỏ bình thường cách giảm kích thước font thời Việc sử dụng thẻ lồng tạo hiệu ứng chữ giảm dần Tuy nhiên trình duyệt có giới hạn kích thước font chữ, vượt giới hạn này, thẻ ý nghĩa Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 chữ, vượt giới hạn này, thẻ ý nghĩa Định dạng số (SuperScript) Chọn kiểu chữ hiển thị Trong thẻ đặt hai tham số size= color= xác định cỡ chữ màu sắc đoạn văn nằm hai thẻ Kích thước tuyệt đối (nhận giá trị từ đến 7) tương đối (+2,-4 ) so với font chữ Định dạng số (SubScript) Định nghĩa kích thước font chữ sử dụng hết văn Thẻ có tham số size= xác định cỡ chữ Thẻ thẻ kết thúc 4.2 Căn lề văn trang Web Trong trình bày trang Web bạn phải ý đến việc lề văn để trang Web có bố cục đẹp Một số thẻ định dạng P, Hn, IMG có tham số ALIGN cho phép bạn lề văn nằm phạm vi giới hạn thẻ Các giá trị cho tham số ALIGN: LEFT Căn lề trái CENTER Căn trang RIGHT Căn lề phải Ngoài ra, sử dụng thẻ CENTER để trang khối văn Cú pháp: Văn trang 4.3 Các ký tự đặc biệt Ký tự & sử dụng để chuỗi ký tự sau xem thực thể Ký tự ; sử dụng để t¸ch c¸c ký tù mét tõ Ký tù M∙ ASCII Tên chuỗi < < < Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu TuÊn Email: prohuutuan@yahoo.com -0912378211 > > > & & & 4.4 Sử dụng màu sắc thiết kế trang Web Một màu tổng hợp từ ba thành phần màu chính, là: Đỏ (Red), Xanh (Green), Xanh nước biển (Blue) Trong HTML giá trị màu số nguyên dạng hexa (hệ đếm số 16) có định dạng sau: #RRGGBB đó: RR - giá trị màu Đỏ GG - giá trị màu Xanh BB - giá trị màu Xanh nước biển Màu sắc xác ®Þnh qua thuéc tÝnh bgcolor= hay color= Sau dÊu b»ng giá trị RGB hay tên tiếng Anh màu Với tên tiếng Anh, ta 16 màu với giá trị RGB ta tới 256 màu Sau số giá trị màu bản: Màu sắc Giá trị Tên tiếng Anh Đỏ #FF0000 RED Đỏ sẫm #8B0000 DARKRED Xanh #00FF00 GREEN Xanh nhạt #90EE90 LIGHTGREEN Xanh nước biển #0000FF BLUE Vàng #FFFF00 YELLOW Vàng nhạt #FFFFE0 LIGHTYELLOW Trắng #FFFFFF WHITE Đen #000000 BLACK Xám #808080 GRAY Nâu #A52A2A BROWN Tím #FF00FF MAGENTA Tím nhạt #EE82EE VIOLET Hồng #FFC0CB PINK Da cam #FFA500 ORANGE Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Màu đồng phục hải quân #000080 NAVY #4169E1 ROYALBLUE #7FFFD4 AQUAMARINE Cú pháp: phần nội dung tài liệu đặt Sau ý nghĩa tham số thẻ BODY: Các tham số ý nghĩa LINK Chỉ định màu văn siêu liên kết ALINK Chỉ định màu văn siêu liên kết đang chọn VLINK Chỉ định màu văn siêu liên kết đà mở BACKGROUND Chỉ định địa ảnh dùng làm BGCOLOR Chỉ định màu TEXT Chỉ định màu văn tài liệu SCROLL YES/NO - Xác định có hay không cuộn TOPMARGIN Lề RIGHTMARGIN Lề phải LEFTMARGIN Lề trái Giáo trình thiết kế Web Giáo trình Thiết kế Web : Ngun H÷u Tn Email: prohuutuan@yahoo.com -0912378211 4.5 Chän kiểu chữ cho văn Cú pháp: