Đang tải... (xem toàn văn)
[r]
(1)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 tài liệu HTML, tức có sử dụng thẻ HTML để trình bày Tồn nội dung tài liệu đặt cặp thẻ Cú pháp: <HTML>
Toàn nội tài liệu đặt ởđây </HTML>
Trình duyệt xem tài liệu không sử dụng thẻ <HTML> 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:
1.3 TITLE
<HEAD>
Phần mởđầu (HEADER) tài liệu đặt ởđây </HEAD>
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ẻ<HEAD>
Cú pháp:
<TITLE>Tiêu đề tài liệu</TITLE> 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 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ẻ
(2)<BODY>
phần nội dung tài liệu đặt ởđây </BODY>
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 tồn hình cửa sổ trình duyệt sẽđược 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
bả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: <HTML>
<HEAD>
<TITLE>Tiêu đề tài liệu</TITLE> </HEAD>
<BODY Các tham số có>
Nội dung tài liệu </BODY>
</HTML>
II CÁC THẺ ĐỊNH DẠNG KHỐI 2.1 THẺ P
Thẻ<P> sử dụng đểđịnh dạng đoạn văn Cú pháp:
<P>Nội dung đoạn văn bản</P>
(3)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 khn 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: <H1> </H1> Định dạng đề mục cấp <H2> </H2> Định dạng đề mục cấp <H3> </H3> Định dạng đề mục cấp <H4> </H4> Định dạng đề mục cấp <H5> </H5> Định dạng đề mục cấp <H6> </H6> Định dạng đề mục cấp 2.3 THẺ XUỐNG DỊNG BR
Thẻ khơng có thẻ kết thúc tương ứng (</BR>), 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ẻ<BR>
2.4 THẺ PRE
Để giới hạn đoạn văn định dạng sẵn bạn sử dụng thẻ<PRE> 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ẻ<PRE> 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
III CÁC THẺ ĐỊNH DẠNG DANH SÁCH 3.1 DANH SÁCH THÔNG THƯỜNG
<PRE>Văn định dạng</PRE>
<UL>
<LI> Mục thứ <LI> Mục thứ hai </UL>
(4)Có kiểu danh sách:
•` Danh sách không xếp ( hay không đánh số) <UL>
• Danh sách có xếp (hay có đánh số) <OL>, mục da nh sách xếp thứ tự
• Danh sách thực đơn <MENU> • Danh sách phân cấp <DIR>
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ố, dùng lẫn với Với thẻ OL ta có cú pháp sau:
trong đó:
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 =i Các mục xếp theo thứ tự i, ii, iii =I Các mục xếp theo thứ tự I, II, III Ngồi cịn 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 vng)
IV CÁC THẺ ĐỊNH DẠNG KÝ TỰ 4.1 CÁC THẺ ĐỊNH DẠNG IN KÝ TỰ
Sau thẻđược 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
Giáo trình thiết kế Web
<B> </B>
<STRONG> </STRONG>
In chữđậm <I> </I>
<EM> </EM>
In chữ nghiêng <U> </U> In chữ gạch chân
<DFN> Đánh dấu đoạn văn hai thẻ <OL TYPE=1/a/A/i/I>
(5)Giáo trình thiết kế Web định nghĩa từ Chúng thường in nghiêng thể qua kiểu đặc biệt
<S> </S>
<STRIKE> </STRIKE>
In chữ bị gạch ngang
<BIG> </BIG> 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ẻ <BIG>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ẻ <BIG> khơng có ý nghĩa
<SMALL> </SMALL> In chữ nhỏ bình thường cách giảm
kích thước font thời Việc sử dụng thẻ <SMALL>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ẻ
<SMALL> khơng có ý nghĩa
<SUP> </SUP> Định dạng số (SuperScript)
<SUB> </SUB> Định dạng số (SubScript)
<BASEFONT> Định nghĩa kích thước font chữđược sử dụng
cho đến hết văn Thẻ có tham số size= xác định cỡ chữ Thẻ <BASEFONT> khơng có thẻ kết thúc
<FONT> </FONT> 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ữ
4.2 CĂN LỀ VĂN BẢN TRONG 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
(6)Giáo trình thiết kế Web 32
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
1.2 HEAD
1.3 TITLE
1.4 BODY
II CÁC THẺĐỊNH DẠNG KHỐI
2.1 thẻ P
2.2 Các thẻđịnh dạng đề mục H1/H2/H3/H4/H5/H6
2.3 Thẻ xuống dòng BR
2.4 Thẻ PRE
III CÁC THẺĐỊNH DẠNG DANH SÁCH
3.1 Danh sách thông thường
IV CÁC THẺĐỊNH DẠNG KÝ TỰ
4.1 Các thẻđịnh dạng in ký tự
4.2 Căn lề văn trang Web
4.3 Các ký tựđặc biệt
4.4 Sử dụng màu sắc thiết kế trang Web
4.5 Chọn kiểu chữ cho văn
4.6 Khái niệm văn siêu liên kết
4.7 Địa tương đối
4.8 Kết nối mailto 10
4.9 Vẽ đườ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 vào tài liệu HTML 12
5.3 Chèn hình ảnh, đ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 15
7.3 Tạo danh sách lựa chọn 16
(7)Giáo trình thiết kế Web 33