Chuong 2 - HTML và các thẻ cơ bản docx

HTML không phải là một ngôn ngữ lập trình, nó cung cấp các chỉ thị định dạng để phục vụ cho việc trình bày văn bản và các đối tượng khác như hình ảnh, video, các plug-in.... Để tham khả

Trang 1

Chương 2

HTML VÀ CÁC THẺ CƠ BẢN

I GIỚI THIỆU VỀ HTML

HTML là ngôn ngữ để xây dựng trang web, nó mô tả cách thức một trang web hiển thị như thế nào trong một trình duyệt HTML là một ngôn ngữ mô tả tài liệu, được hình thành từ ngôn ngữ mô tả tài liệu tổng quát SGML (Standard Generalized Markup Language) do hãng IBM đề xướng từ năm 1960 HTML

không phải là một ngôn ngữ lập trình, nó cung cấp các chỉ thị định dạng để phục vụ

cho việc trình bày văn bản và các đối tượng khác như hình ảnh, video, các plug-in

Để tham khảo tất cả các thẻ của phiên bản HTML 4.01, là phiên bản HTML mới nhất được chuẩn hóa vào năm 1999 bởi W3C, có thể tìm trong hai địa chỉ có

uy tín sau :

Trang World Wide Web Consortium HTML Specifications (đặc tả ngôn ngữ

HTML của tổ chức W3C): http://www.w3.org/TR/html401/

Trang Web của W3Schools, tại web site này ta có thể tìm thấy tất cả các hướng dẫn tự học về thiết kế web đựa trên nền tảng của HTML, xHTML, XML và WAP: http://www.w3schools.com/html/

Xu thế phát triển của các ngôn ngữ trên Web đang dần nghiêng về ngôn ngữ XML (eXtensible Markup Language), cũng là một ngôn ngữ con của SGML XML

là một ngôn ngữ mô tả cấu trúc dữ liệu trên Web, cho phép người sử dụng xây

dựng các thẻ riêng của mình, một trong những ứng dụng quan trọng của XML là chuyển đổi dữ liệu giữa các ứng dụng để trao đổi thông tin trên nền của Web, khác

với HTML là ngôn ngữ trình bày dữ liệu trên Web.

II CẤU TRÚC MỘT TƯ LIỆU HTML

Tư liệu HTML (HTML Document) là một tệp tin văn bản mã ASCII được

viết bằng ngôn ngữ HTML, tệp tin tư liệu HTML được gọi là mã nguồn (source code) của một web page Tệp tin tư liệu HTML có phần mở rộng htm hay html

(Các webserver dùng hệ điều hành UNIX bắt buộc phần mở rộng tư liệu HTML

phải là html) Phiên bản HTML hiện nay là HTML 4.01 do W3C xây dựng đặc tả,

tuy nhiên có một vài thẻ một trong hai trình duyệt IE và NN không sử dụng

II.1 Thẻ HTML

Các lệnh của HTML được gọi là các thẻ (tag), các thẻ báo cho trình duyệt web cần phải làm điều gì ngoài việc thể hiện văn bản lên màn hình Các thẻ gồm

các phần tử đặt trong cặp dấu < và > Có hai loại thẻ: thẻ chứa (container tag)và thẻ

Trang 2

rỗng (empty tag) Các lệnh của HTML có thể viết bằng ký tự hoa hoặc thường đều

được

II.1.1 Thẻ chứa

Gồm một phần tử thẻ mở (openning tag) và một phần tử thẻ đóng (closing tag) Thẻ mở bắt đầu bằng dấu < và tiếp ngay sau là tên thẻ, các thuộc tính được cách nhau bằng một khỏang trắng và cuối cùng là dấu > Thẻ đóng tương tự như thẻ mở chỉ khác một chỗ có dấu / nằm giữa dấu < và tên thẻ Các dữ liệu được đặt giữa thẻ mở và thẻ đóng Các thuộc tính của một thẻ là tùy chọn, được khai báo trong thẻ mở và thuộc tính được bao lại trong cặp dấu nháy kép (") Cú pháp tổng quát như sau:

<tên_thẻ thuộctính1=giátrị1 thuộctính2=giátrị2 >Nội dung </tên_thẻ>

Các ví dụ :

1) <TITLE> Trang Web đầu tay </TITLE>

Thẻ mở là <TITLE>, dữ liệu là Trang Web đầu tay, thẻ đóng là </TITLE>,

chú ý rằng thẻ TITLE không có thuộc tính Thẻ này báo cho trình duyệt hiển thị

dòng Trang Web đầu tay trên thanh tiêu đề của cửa sổ trang web.

2) <FONT color=”blue” face=".Vn3DH" size="2">Khoa Tin hoc</FONT>

Thẻ mở là <FONT>, các thuộc tính và giá trị được gán cho mỗi thuộc tính

được khai báo bên trong thẻ mở là : thuộc tính color và giá trị blue, thuộc tính size

và giá trị 2; dữ liệu là Khoa Tin học; thẻ đóng là </FONT> Thẻ này báo cho trình

duyệt hiển thị dòng Khoa Tin học trên trang web với font “.Vn3DH”, cở 2 (tương đương với font size 10pt), màu xanh

II.1.1 Thẻ rỗng

Thẻ rỗng là thẻ chỉ có thẻ mở mà không có thẻ đóng.

Các ví dụ :

1) <HR>, thẻ này báo cho trình duyệt hiển thị một đường kẻ ngang (horizontal line) trên trang web

2) <IMG border="1" src="udlogo.gif" width="147" height="133">, thẻ này báo cho trình duyệt hiển thị logo của Đại học Đà Nẵng, với đường viền cở 1pt, chiều cao ảnh 133pt, chiều rộng ảnh 147pt

II.2 Cấu trúc một tư liệu HTML

Xem xét một tư liệu HTML sau đây ( trích trang chủ của mạng EDU.NET,

Bộ Giáo dục&Đào tạo )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional //EN">

<HTML>

<HEAD>

<TITLE>Education and Training Network</TITLE>

Trang 3

</HEAD>

</BODY>

</HTML

Một tư liệu HTML hay một trang Web, bắt đầu bằng thẻ <HTML> và kết thúc bằng thẻ </HTML>, thường có hai phần:

Phần đầu (head) bao gồm những nội dung trong cặp thẻ <HEAD> và

</HEAD> Phần thân (body) bao gồm những nội dung trong cặp thẻ <BODY> và

</BODY> Dưới đây là cấu trúc cơ bản của một tư liệu HTML

<HTML> < Thẻ định nghĩa một tư liệu HTML

<HEAD> < Thẻ báo hiệu bắt đầu phần đầu

<!- Các thẻ khác thuộc về phần đầu của tư liệu HTML

</HEAD> < Thẻ kết thúc phần đầu tư liệu HTML

<BODY> < Thẻ báo hiệu bắt đầu phần thân

<!- Nội dung trang Web và các thẻ phần thân của tư liệu HHTM

</BODY> < Thẻ báo hiệu kết thúc phần thân

<HTML> < Thẻ kết thúc một tư liệu HTML

Để ghi chú trong tư liệu HTML ta để nội dung ghi chú trong cặp ký hiệu <!-

và > Ví dụ: <!- Đây là trang web thử nghiệm > Trình duyệt sẽ bỏ qua mà

không thông dịch nội dung này

III MỘT SỐ THẺ CƠ BẢN

III.1 Các thẻ trong phần đầu của tư liệu HTML

III.1.1 Thẻ <!DOCTYPE>

Thẻ này dùng để ghi thông tin về phiên bản HTML được áp dụng trong trang Web, thường đây là dòng đầu tiên của tư liệu HTML

III.1.2 Thẻ <TITLE>

Đây là loại thẻ chứa, dùng để thiết lập tiêu đề của tư liệu HTML, khi trình duyệt hiển thị một trang web, tiêu đề sẽ xuất hiện trên Title bar của cửa sổ trang web

Ví dụ: <HTML>

</HTML>

Trang 4

III.1.2 Thẻ <META>

Đây là loại thẻ rỗng, hỗ trợ việc bổ sung thông tin về trang web, thẻ này cho phép ta tự do đặt nhiều thông tin vào liệu HTML Các thuộc tính của thẻ này xác

định một cặp name/value kết hợp với tư liệu HTML, trong nhiều trường hợp, các

giá trị này phục vụ cho web server dùng trong việc xác định kiểu nội dung để gởi đến trình duyệt Sau đây là những cách dùng thông dụng:

Thẻ này quy định bộ mã ký tự Unicode Tiếng việt trong trang Web

Thẻ này xác định thời gian hết hiệu lực của trang web là ngày 31.12.2005

Với hai thẻ này, web server sẽ gởi đến browser phần HTTP header có nội

dung bao gồm các thông tin:

Content-type : text/html

Charset : utf-8

Expires : 31 Dec 05

Thẻ này cung cấp các từ khóa cho các Search Engin tìm thấy trang web, tuy nhiên nhiều Search Engin có cơ chế tìm kiếm khác, không phụ thuộc vào keywords

Thẻ này cho phép ta đặt liên kết trực tiếp đến một địa chỉ khác, sau khoảng thời gian 5 giây trình duyệt sẽ chuyển sang đọc trực tiếp trang web có địa chỉ nằm trong tham số URL

Thẻ này báo cho trình dụyêt cứ 10 giây thì làm tươi trang web lại một lần

III.1.3 Thẻ <BASE>

Đây là thẻ rỗng, gồm các thuộc tính:

HREF : chỉ định địa chỉ cơ bản cho các mối liên kết là địa chỉ gốc để truy cập các địa chỉ khác Ví dụ <BASE HREF = ”http://www.ud.edu.vn/scripts”>

TARGET : chỉ định các frame mặc nhiên, hay một cửa sổ để nạp các đối tượng liên kết, các giá trị của thuộc tính TARGET: tên cửa sổ do người sử dụng định nghĩa (hay tên frame), _blank , _self, _top và _parent (Chúng ta sẽ nghiên cứu kỹ cách sử dụng thuộc tính này trong chương II)

Ví dụ: <BASE TARGET=_blank> , thẻ nầy chỉ định mọi đối tượng liên kết được nạp trong một cửa sổ mới

Trang 5

III.1.4 Thẻ <SCRIPT>

Đây là thẻ chứa, dùng để chứa các hàm viết bằng ngôn ngữ kịch bản JavaScript, Jscript hay Vbscript Thuộc tính này có thuộc tính LANGUAGE chỉ ra ngôn ngữ kịch bản được sử dụng trang trang web Ví dụ:

// Khai báo các biến dùng chung, hằng số

function Banner(url,pic,pos) {

// Các lệnh của hàm

}

// Hàm khác

</SCRIPT>

III.2 Các thẻ trong phần thân của tư liệu HTML

II.2.1 Thẻ <BODY>

Đây là thẻ chứa, dùng để bao hàm các thẻ khác trong phần thân của tư liệu HTML Các thuộc tính:

 BGCOLOR : xác định màu nền của trang web, màu nền có thể dùng tên màu hay một giá trị hexa xác định màu trong sơ đồ RGB Ví dụ "BLUE" hay

"#0000FF"

 TEXT : xác định màu văn bản

Hai thuộc tính trên ít khi được sử dụng, ta dùng kỹ thuật CSS để thay thế trong việc định dạng trang web hiệu quả hơn

 BACKGROUND : xác định ảnh nền của trang web

 TOPMARGIN, LEFTMARGIN, RIGHTMARGIN, BOTTOMMARGIN : xác định lề của trang Web, đơn vị tính là pixel

Ví dụ:

<!- Các thẻ khác >

</BODY>

III.2.2 Các thẻ HEADING

Đây là thẻ chứa, dùng để xác định tiêu đề dòng trong trang web, tương tự như các Heading trong Microsoft Word Có 6 cấp độ với độ lớn giảm dần từ 1 đến

6 tương ứng với sáu thẻ <H1>, <H2>, <H3>, <H4>, <H5> và<H6>, thuộc tính ALIGN có các giá trị left, center, right và justify; mặc nhiên là left

Ví dụ: <H1 ALIGN="right"> I Chương 1 </H1>

Trang 6

III.2.3 Các thẻ ngắt đoạn

Để trang web được dễ dọc, trình bày hợp lý cần có các ngắt đọan để phân biệt các đọan văn bản (paragraph) khác nhau

Thẻ <P> : Sử dụng cặp thẻ <P> và </P> để chứa một đọan văn bản Khi gặp

thẻ này trình duyệt sẽ tạo ra một dòng mới và tách biệt hai đọan liên tiếp bằng một dòng trống

Thuộc tính của thẻ <P> : ALIGN, các giá trị : "left", "right", "center" và

"justify"

Thẻ <BR> : đây là thẻ rỗng để ngắt dòng (break line)

Ví dụ:

<HTML>

<HEAD> <TITLE> Hello world! </TITLE> </HEAD>

<BODY>

Paragraph 1

</P>

Paragraph 2

</P>

<BR>

<!- Noi dung khac cua trang web >

</BODY>

</HTML>

III.2.4 Các đoạn văn bản được định dạng sẵn

Thẻ PRE : đây là thẻ chứa, nhằm hiển thị một đọan văn bản mà người sử

dụng muốn giữ các khoảng cách, xuống dòng như mong muốn (không sử dụng ký

tự &nbsp và thẻ <br>) Ngoài ra, ta có thể sử dụng các thẻ khác để định dạng trang web

Ví dụ:

<PRE>

HTML

<I>Welcome! </I>

</PRE>

Thẻ <XMP> : sử dụng giống như thẻ <PRE>, nhưng có sự khác biệt :

Trang 7

Các thẻ HTML khác không có hiệu lực trong paragraph nằm trong cặp thẻ

<XMP>

Trình duyệt hiển thị văn bản theo font mặc đinh

Thẻ đóng </XMP> không tạo xuống dòng

Không sử dụng cho table

Ta thường dùng thẻ <XMP> trong việc minh họa nội dung các thẻ HTML trong trang Web mà không dùng các ký tự đặc biệt, các tiện ích tạo source HTML dùng kỹ thuật này để cho phép người sử dụng copy các đọan mã HTML và paste vào tư liệu HTML của mình

Ví dụ:

<H3>Structure of HTML Document</H3>

<!- Minh hoa hieu luc cua the <XMP> >

<XMP>

<HTML>

<HEAD>

<TITLE>Tieu de </TITLE>

</HEAD>

<BODY>

<!- Phan than trang web >

</BODY>

</HTML>

</XMP>

III.2.5 Thẻ <HR>

Đây là thẻ rỗng, dùng để vẽ một đường thẳng phân cách các đọan văn bản với nhau Các thuộc tính của thẻ <HR>:

Size = "n" : xác định độ dày của đường kẻ, tính bằng pixel

Width ="n": xác định chiều dài của đường kẻ, tính bằng pixel hay % độ rộng màn hình

Align = "left" | "center" | "right" : căn lề của đường kẻ

NoShade : Không đổ bóng mờ

Ví dụ :

<BODY>

<CENTER> <B>Hypertext Markup Language </B></CENTER>

HTML là tập con của ngôn ngữ SGLM

</BODY>

III.2.6 Các thẻ định dạng khác

Ngôn ngữ HTML cung cấp các thẻ để dạng cho một trang Web như các trình sọan thảo văn bản khác Các thẻ dưới đây là thẻ chứa và không có thuộc tính

Trang 8

Tên thẻ Tác dụng

<B> Chữ đậm (Bold)

<I> Chữ nghiêng (Italic)

<U> Chữ gạch dưới (Underline)

<STRIKE> Chữ gạch giữa

<SMALL> Chữ có kích thước nhỏ hơn

<BIG> Chữ có kích thước lớn hơn

<SUB> Chỉ số dưới

<SUP> Chỉ số trên

<EM> Văn bản nhấn mạnh và chữ nghiêng

<STRONG> Văn bản nhấn mạnh hơn và chữ đậm

<CITE> Đọan trích dẫn , chữ nghiêng

<CENTRE> Căn giữa các đọan văn bản

III.2.7 Danh sách

Một trong những tính năng hữu ích của HTML là khả năng tạo các danh sách (list) để tổ chức thông tin Có 3 loại danh sách

<UL> : danh sách không có thứ tự (unordered lists )

<OL> : danh sách có thứ tự (ordered lists)

<DL> : danh sách định nghĩa (definition lists )

Thẻ <UL> và <OL> : Các thuộc tính là TYPE để quy định cách hiển thị của

danh sách, các giá trị của thuộc tính TYPE :

"a" : đánh dấu thứ tự bằng chữ thường

"A" : đánh dấu thứ tự bằng chữ in hoa

"i" : đánh dấu thứ tự bằng chữ i, ii, iii,

"I" : đánh dấu thứ tự bằng chữ I, II, III,

"Circle" : đánh dấu thứ tự bằng ký hiệu 

"Disc" : đánh dấu thứ tự bằng ký hiệu 

"Square" : đánh dấu thứ tự bằng ký hiệu 

Mỗi đề mục của danh sách được đánh dấu bởi thẻ <LI>, sử dụng thẻ </LI>

là tùy chọn

Ví dụ :

<LI> Chuong I

<LI> Chuong II

<LI> De muc II.1

<LI> De muc II.2

</OL>

</UL>

Thẻ <DL> : dùng tạo một danh sách định nghĩa hay danh sách từ điển chú

Trang 9

giải Phần thuật ngữ được đánh dấu bằng thẻ <DT> và </DT>, phần giải thích được đánh dấu bằng thẻ <DD> và </DD>

Ví dụ:

<DL>

<DT><B>Thuat ngu 1 </B></DT>

<DD> Cac dinh nghia ca chu giai ve

thuat ngu 1 </DD>

<DT><B>Thuat ngu 2 </B></DT>

<DD> Cac dinh nghia ca chu giai ve

thuat ngu 2 </DD>

<!- Cac thuat ngu khac >

</DL>

III.2.8 Siêu liên kết (Hyperlink) và hình ảnh (Image)

Hyperlink là một lệnh cho phép ta đặt một hotspot (điểm nóng) trên một hypertext của trang web dùng để đi đến một địa chỉ (địa chỉ này có thể là một anchor, một tài nguyên trên web) khi click lên hotspot này

 Hình ảnh

Để chèn một hình ảnh vào trang web, ta sử dụng thẻ <IMG>, đây là thẻ rỗng, thẻ này không tạo sự ngắt dòng.Hầu hết các trình duyệt đều có thể hiển thị các kiểu tệp tin ảnh thông dụng, chủ yếu ở các dạng GIF, JPG, JPEG Cú pháp :

Các thuộc tính khác:

ALT ="Lời chú thích", dùng để chú thích cho hình ảnh hay ứng dụng liên

kết với hình ảnh (giống như screen tip text) Khi hình ảnh này không hiển thị được

trên trang web, thì lời giải thích này sẽ hiển thị bên cạnh ký hiệu  màu đỏ (nếu là IE) hay (nếu là NN)

HEIGHT, WIDTH = "n" tính bằng pixel hay "n%", quy định kích thứớc ảnh HSPACE, VSPACE ="n" tính bằng pixel, quy định khỏang trống xung quanh hình ảnh

BORDER = "n", quy định đường kẻ bao quanh hình ảnh, giá trị từ 0-6

ALIGN ="left" | "right" | "center"

Ví dụ :

<IMG SRC = "icannlogo.gif" BORDER = "1"

WIDTH = "100" HEIGHT = "60" HSPACE="12" VSPACE="12"

ALIGN="left" ALT="ICANN LOGO">

Chèo lái guồng máy điều hành

Trang 10

 Tạo và quản lý hyperlink

Điểm neo (Anchor, trong FrontPage gọi là Bookmark) xác định một vị trí

trong trang web hoặc một một vị trí trong trang web khác mà người sử dụng có thể tham chiếu đến

Để định nghĩa một điểm neo ta sử dụng thẻ <A> với cú pháp như sau:

<A NAME = "#anchor_name"> văn bản </a>, phần nội dung giữa cặp thẻ

<a> và </a> trong trường hợp này là không nhất thiết

Tạo một hyperlink để tham chiếu đến một tài nguyên trên web, ta sử dụng

thẻ <A> với cú pháp :

Thuộc tính: TARGET ="Window_name","_blank", "_self", "_top" và

"_parent" chỉ nơi hiển thị của trang web chỉ định Thẻ <A> không tạo sự xuống dòng

Ví dụ : Giả sử ta có tệp sub.htm

<!- sub.htm >

<BODY>

<!- Nội dung trang web >

<A HREF="top"> Về đầu trang </A> <BR> <!- Liên kết đến anchor top >

<A HREF ="index.htm"> Về trang chủ </A> <!- Liên kết đến trang chủ >

<!- Nội dung phần cuối >

</BODY>

và index.htm (trang chủ) như sau:

<!- index.htm >

<BODY>

<!- Nội dung trang chủ >

Định dạng
Số trang	17
Dung lượng	437 KB