Giao trinh thiet ke web

Chia sẻ bởi Nguyễn Thị Kiều Trang | Ngày 14/10/2018 | 25

Chia sẻ tài liệu: Giao trinh thiet ke web thuộc Tư liệu tham khảo

Nội dung tài liệu:

Phần I Giới thiệu ngôn ngữ Html
I. Các thẻ định cấu trúc tài liệu
1.1 HTML
Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là nó có sử dụng các thẻ HTML để trình bày. Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này.
Cú pháp:

Trình duyệt sẽ xem các tài liệu không sử dụng thẻ như những tệp tin văn bản bình thường.
1.2 HEAD
Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu.
Cú pháp:
1.3 TITLE
Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, tức là nó phải nằm trong thẻ phạm vi giới hạn bởi cặp thẻ .
Cú pháp:

1.4 BODY
Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu - phần thân (body) của tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu... Những thông tin này được đặt ở phần tham số của thẻ.
Cú pháp:

Trên đây là cú pháp cơ bản của thẻ BODY, tuy nhiên bắt đầu từ HTML 3.2 thì có nhiều thuộc tính được sử dụng trong thẻ BODY. Sau đây là các thuộc tính chính:

BACKGROUND=
Đặt một ảnh nào đó làm ảnh nền (background) cho văn bản. Giá trị của tham số này (phần sau dấu bằng) là URL của file ảnh. Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt thì toàn bộ màn hình cửa sổ trình duyệt sẽ được lát kín bằng nhiều ảnh.

BGCOLOR=
Đặt mầu nền cho trang khi hiển thị. Nếu cả hai tham số BACKGROUND và BGCOLOR cùng có giá trị thì trình duyệt sẽ hiển thị mầu nền trước, sau đó mới tải ảnh lên phía trên.

TEXT=
Xác định màu chữ của văn bản, kể cả các đề mục.

ALINK=,VLINK=,LINK=
Xác định màu sắc cho các siêu liên kết trong văn bản. Tương ứng, alink (active link) là liên kết đang được kích hoạt - tức là khi đã được kích chuột lên; vlink (visited link) chỉ liên kết đã từng được kích hoạt;

Như vậy một tài liệu HTML cơ bản có cấu trúc như sau:
II. Các thẻ định dạng khối
2.1. thẻ P
Thẻ

được sử dụng để định dạng một đoạn văn bản.
Cú pháp:
2.2. Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6
HTML hỗ trợ 6 mức đề mục. Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt logic, tức là mỗi trình duyệt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp. Có thể ở trình duyệt này là font chữ 14 point nhưng sang trình duyệt khác là font chữ 20 point. Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6. Thông thường văn bản ở đề mục cấp 5 hay cấp 6 thường có kích thước nhỏ hơn văn bản thông thường.
Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:

...

Định dạng đề mục cấp 1

...

Định dạng đề mục cấp 2

...

Định dạng đề mục cấp 3

...

Định dạng đề mục cấp 4

...

Định dạng đề mục cấp 5

...

Định dạng đề mục cấp 6

2.3 Thẻ xuống dòng BR
Thẻ này không có thẻ kết thúc tương ứng (
), nó có tác dụng chuyển sang dòng mới. Lưu ý, nội dung văn bản trong tài liệu HTML sẽ được trình duyệt Web thể hiện liên tục, các khoảng trắng liền nhau, các ký tự tab, ký tự xuống dòng đều được coi như một khoảng trắng. Để xuống dòng trong tài liệu, bạn phải sử dụng thẻ

2.4 Thẻ PRE
Để giới hạn đoạn văn bản đã được định dạng sẵn bạn có thể sử dụng thẻ

. Văn bản ở giữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng được đánh vào, ví dụ dấu xuống dòng trong đoạn văn bản giới hạn bởi thẻ  sẽ có ý nghĩa chuyển sang dòng mới (trình duyệt sẽ không coi chúng như dấu cách)
Cú pháp:

III. Các thẻ định dạng danh sách
3.1. Danh sách thông thường
Cú pháp:
Có 4 kiểu danh sách:
(`	Danh sách không sắp xếp ( hay không đánh số) 
(	Danh sách có sắp xếp (hay có đánh số) , mỗi mục trong da   nh sách được sắp xếp thứ tự.
(	Danh sách thực đơn 
(	Danh sách phân cấp 
Với nhiều trình duyệt, danh sách phân cấp và danh sách thực đơn giống danh sách không đánh số, có thể dùng lẫn với nhau. Với thẻ OL ta có cú pháp sau:
trong đó:
TYPE	 =1		Các mục được sắp xếp theo thứ tự 1, 2, 3...
=a		Các mục được sắp xếp theo thứ tự a, b, c...
	=A		Các mục được sắp xếp theo thứ tự A, B, C...
=i		Các mục được sắp xếp theo thứ tự i, ii, iii...
	=I		Các mục được sắp xếp theo thứ tự I, II, III...
Ngoài ra còn thuộc tính START= xác định giá trị khởi đầu cho danh sách.
Thẻ < LI > có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mỗi mục trong danh sách. Thuộc tính này có thể nhận các giá trị : disc (chấm tròn đậm); circle (vòng tròn); square (hình vuông).
IV. Các thẻ định dạng ký tự
4.1. Các thẻ định dạng in ký tự
Sau đây là các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch chân... cho các ký tự, văn bản khi được thể hiện trên trình duyệt.

 ... 
 ... 
In chữ đậm

 ... 
 ... 
In chữ nghiêng

 ... 
In chữ gạch chân


Đánh dấu đoạn văn bản giữa hai thẻ này là định nghĩa của một từ. Chúng thường được in nghiêng hoặc thể hiện qua một kiểu đặc biệt nào đó.

 ... 
 ... 
In chữ bị gạch ngang.

 ... 
In chữ lớn hơn bình thường bằng cách tăng kích thước font hiện thời lên một. Việc sử dụng các thẻ lồng nhau tạo ra hiệu ứng chữ tăng dần. Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ  sẽ không có ý nghĩa.

 ... 
In chữ nhỏ hơn bình thường bằng cách giảm kích thước font hiện thời đi một. Việc sử dụng các thẻ lồng nhau tạo ra hiệu ứng chữ giảm dần. Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ  sẽ không có ý nghĩa.

^...
Định dạng chỉ số trên (SuperScript)

_...
Định dạng chỉ số dưới (SubScript)


Định nghĩa kích thước font chữ được sử dụng cho đến hết văn bản. Thẻ này chỉ có một tham số size= xác định cỡ chữ. Thẻ  không có thẻ kết thúc.

 ... 
Chọn kiểu chữ hiển thị. Trong thẻ này có thể đặt hai tham số size= hoặc color= xác định cỡ chữ và màu sắc đoạn văn bản nằm giữa hai thẻ. Kích thước có thể là tuyệt đối (nhận giá trị từ 1 đến 7) hoặc tương đối (+2,-4...) so với font chữ hiện tại.


4.2. Căn lề văn bản trong trang Web
Trong trình bày trang Web của mình các bạn luôn phải chú ý đến việc căn lề các văn bản để trang Web có được một bố cục đẹp. Một số các thẻ định dạng như P, Hn, IMG... đều có tham số ALIGN cho phép bạn căn lề các văn bản nằm trong phạm vi giới hạn bởi của các thẻ đó.
Các giá trị cho tham số ALIGN:
LEFT
Căn lề trái

CENTER
Căn giữa trang

RIGHT
Căn lề phải


Ngoài ra, chúng ta có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản. 
Cú pháp:

4.3. Các ký tự đặc biệt
Ký tự & được sử dụng để chỉ chuỗi ký tự đi sau được xem là một thực thể duy nhất. Ký tự ; được sử dụng để tách các ký tự trong một từ.
Ký tự
Mã ASCII
Tên chuỗi

<
<
<

>
>
>

&
&
&

4.4. Sử dụng màu sắc trong thiết kế các trang Web
Một màu được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue). Trong HTML một giá trị màu là một số nguyên dạng hexa (hệ đếm cơ số 16) có định dạng như sau: 
#RRGGBB
trong đó:
	RR - là giá trị màu Đỏ.
	GG - là giá trị màu Xanh lá cây.
	BB - là giá trị màu Xanh nước biển.
Màu sắc có thể được xác định qua thuộc tính bgcolor= hay color=. Sau dấu bằng có thể là giá trị RGB hay tên tiếng Anh của màu. Với tên tiếng Anh, ta chỉ có thể chỉ ra 16 màu trong khi với giá trị RGB ta có thể chỉ tới 256 màu.
Sau đây là một số giá trị màu cơ bản:

Màu sắc
Giá trị
Tên tiếng Anh

Đỏ
Đỏ sẫm
Xanh lá cây
Xanh nhạt
Xanh nước biển
Vàng
Vàng nhạt
Trắng
Đen
Xám
Nâu
Tím
Tím nhạt
Hồng
Da cam
Màu đồng phục hải quân

#FF0000
#8B0000
#00FF00
#90EE90
#0000FF
#FFFF00
#FFFFE0
#FFFFFF
#000000
#808080
#A52A2A
#FF00FF
#EE82EE
#FFC0CB
#FFA500
#000080
#4169E1
#7FFFD4
RED
DARKRED
GREEN
LIGHTGREEN
BLUE
YELLOW
LIGHTYELLOW
WHITE
BLACK
GRAY
BROWN
MAGENTA
VIOLET
PINK
ORANGE
NAVY
ROYALBLUE
AQUAMARINE


Cú pháp: 

   LINK 		= color
   ALINK 		= color
   VLINK 		= color
   BACKGROUND 	= url
   BGCOLOR 		= color
   TEXT 		= color
   TOPMARGIN 	= pixels
   RIGHTMARGIN 	= pixels
   LEFTMARGIN 	= pixels
>
.... phần nội dung của tài liệu được đặt ở đây




Sau đây là ý nghĩa các tham số của thẻ BODY:

Các tham số
ý nghĩa

LINK
Chỉ định màu của văn bản siêu liên kết

ALINK
Chỉ định màu của văn bản siêu liên kết đang đang chọn

VLINK
Chỉ định màu của văn bản siêu liên kết đã từng mở

BACKGROUND
Chỉ định địa chỉ của ảnh dùng làm nền

BGCOLOR
Chỉ định màu nền

TEXT
Chỉ định màu của văn bản trong tài liệu

SCROLL
YES/NO - Xác định có hay không thanh cuộn

TOPMARGIN
Lề trên

RIGHTMARGIN
Lề phải

LEFTMARG