Cấu trúc trang web




NGÔN NGỮ HTML DÙNG ĐỂ SOẠN THẢO TRANG WEB TĨNH


Cấu trúc trang web
Cú pháp tag tổng quát
Tag đầu trang: <HTML></HTML>
Tag bắt đầu: <HEAD></HEAD>
Tag tiêu đề: <TITLE></TITLE>
Tag thân trang: <BODY></BODY>
Tag định dạng font chữ: ,<BASEFONT></BASEFONT>
Tag xuống dòng sang đoạn mới: 
Tag xuống dòng không sang đoạn mới: 
Tag thêm đường thẳng nằm ngang: <HR></HR>
Tag 6 mức tiêu đề: <hN></hN>
Tag đậm: 
Tag nghiêng: 
Tag gạch dưới: 
Tag gạch giữa: <S></S>
Tag đậm logic type: 
Tag nghiêng logic type: 
Tag gạch ngang logic type: <STRIKE></STRIKE>
Tag chỉ số logic type: 
Tag mũ logic type: 
Tag nhạc nền: <BGSOUND></BGSOUND>
Tag hình ảnh, phim: <IMG></IMG>
Tag danh sách <UL><LI></UL>, <OL><LI></OL>
Tag định dạng bảng <TABLE><TR><TD></TABLE>
Tag tạo Frame <FRAMESET><FRAME></FRAMESET>
Bảng ký tự thay thế thể hiện trong file nguồn HTML
Tag liên kết đến 1 đoạn chỉ định trong tư liệu hiện hành hoặc một trang web khác <A></A>.

---------------------------------------------------------------------------------
Cấu trúc trang web
<HTML>
<HEAD>
<TITLE>Tiêu đề trang web</TITLE>
</HEAD>
<BODY>
Thân trang web
</BODY>
</HTML>
----------------------------------------------------------------------
Cú pháp tag tổng quát
Khi trình duyệt (web browser) hiển thị nội dung 1 trang web nó sẽ tìm kiếm trong đó những đoạn mã đặc biệt là các tag được đánh dấu bởi ký hiệu <và>, và căn cứ vào đó để thể hiện. Cú pháp tổng quát của 1 tag:
<tên_tag thuộc_tính_2=giá_trị_1 thuộc_tính_2=giá_trị_2...>...</tên_tag>
hoặc đơn giản nhất là: <tên_tag>Chuỗi văn bản</tên_tag>
tên_tag gõ vào dạng chữ thường hoặc hoa đều được và các tag có thể lồng vào nhau.
Ví dụ:
- tag chữ đậm cú pháp chuỗi văn bản in đậm
- tag xuống hàng có cú pháp một đoạn văn bản
Mỗi frame có 1 tên, ví dụ frame trái có name="muc_luc" và frame phải có name="noi_dung". Ðể tạo liên kết từ frame muc_luc với frame noi_dung ta chỉ định trong frame muc_luc như sau:target="noi_dung". src=file: để chỉ định ra trang web thể hiện trên khung. Các trang web page_1.htm và page_2.htm cần tạo ra trước khi tạo trang web 2frame.htm chứa chúng. Nội dung của trang web page_1.htm trong tag <HEAD></HEAD> có khai báo sau:
<head>
<base target="noi_dung">
</head>
Ðể không xuất hiện scrollbar và border của frame, khi đó bạn thêm thuộc tính scrolling="no" và frameborder=0 vào tag <FRAME>, ví dụ:
<frame name="muc_luc" target="noi_dung" src="http://bcvtth/html/page_1.htm" scrolling="no">
Ðể tạo các liên kết hyperlink giữa trang page_1.htm với các trang web khác như page_2.htm, page_3.htm,... để thể hiện trên khung bên phải thì trong nội dung trang page_1.htm có nội dung như sau:
<html>
<head>
<title>Trang mục lục</title>
<base target="noi_dung">
</head>
<body>
Mục lục công việc
<a href="page_2.htm">page 2</a>
<a href="page_3.htm">page 3</a>
</body>
</html>
Khi đó trong trình duyệt bạn click vào các hyperlink thì các trang web page_2.htm và page_3.htm sẽ mở ra tương ứng ở frame bên phải(frame noi_dung) nhờ khai báo target="noi_dung".

--------------------------------------------------------------------

Liên kết đến 1 đoạn chỉ định trong tư liệu hiện hành hoặc một trang web khác

Ðôi khi nội dung trang web dài và chiếm nhiều trang màn hình, nhưng nội dung lại có mối liên hệ chặt chẽ, hay vì 1 lý do nào đó mà ta không muốn toàn bộ nội dung này được chứa trong cùng 1 trang web và chia ra nhiều trang. Khi đó ta cần đặt các hyperlink ngay đầu trang web để khi cần người dùng có thể click vào đó để đi đến một đoạn tư liệu họ quan tâm mà không cần phải kéo scrollbar đến đoạn đó.

Ðịnh nghĩa tag <A></A> như sau:

1) Ðịnh nghĩa 1 bookmark và hyperlink trong cùng trang web: bookmark là kỹ thuật chỉ định 1 định danh(đích) để hyperlink nhảy đến đầu đoạn văn bản.

<A name="name">chuỗi ký tự đầu đoạn văn bản</A>

Ví dụ:

<A name="Nd phần 1">Nội dung phần 1</A> bao gồm các nội dung chi tiết sau...

Khi đó trong phần khai báo hyperlink bạn khai báo theo cú pháp sau:

<a href="#tên_của_bookmark_đã_khai_báo">Chuỗi hướng dẫn nhảy đến đầu đoạn có bookmark="tên_của_bookmark_đã_khai_báo"</a>

Ví dụ:

2) Hyperlink đến một trang web khác:

Cú pháp:

<A HREF="địa_chỉ_trang_web_sẽ_nhảy_tới"> Chuỗi diễn giải hyperlink </A>

Ví dụ:

<A HREF="http://www.microsoft.com">Link đến trang web chủ của hãng máy tính Microsoft.</A>
<A HREF="trang_chu.htm">Link đến trang web trang_chu.htm trong cùng thư mục.</A>
<A TARGET="viewer" HREF="sample.htm">Click vào đây để mở trang web sample.htm trong cửa sổ "viewer".</A>
<A HREF="http://www.microsoft.com"><IMG SRC="images/bullet.gif">Click vào ảnh này để link đến trang web của Microsoft</A>

------------------------------------------------------------------

Tag 6 mức tiêu đề <hN></hN>

Dùng để tạo các chuỗi tiêu đề to nhỏ tùy ý tùy theo cấp tiêu đề đó trong trang web. Có 6 cấp tiêu đề khác nhau được định nghĩa như sau:

<hN>Text xuất hiện trong tiêu đề</hN>

với N là một số từ 1 đến 6

Ví dụ:

HTML	Kết quả
<H1>Tiêu đề cấp 1</H1>	Tiêu đề cấp 1
<H2>Tiêu đề cấp 2</H2>	Tiêu đề cấp 2
<H3>Tiêu đề cấp 3</H3>	Tiêu đề cấp 3
<H4>Tiêu đề cấp 4</H4>	Tiêu đề cấp 4
<H5>Tiêu đề cấp 5</H5>	Tiêu đề cấp 5
<H6>Tiêu đề cấp 6</H6>	Tiêu đề cấp 6

---------------------------------------------------------------

Bảng ký tự thay thế thể hiện trong file nguồn HTML

Ký tự	Mã thập phân	Chuỗi thay thế ký tự	Diễn giải
"	"	"	Quotation mark
&	&	&	Ampersand
<	<	<	Less than
>	>	>	Greater than
			Nonbreaking space
Ἧfont>	¡	¡	Inverted exclamation
Â	¢	¢	Cent sign
㼯font>	£	£	Pound sterling
Ô	¤	¤	General currency sign
Ơ	¥	¥	Yen sign
Ư	¦	¦ or &brkbar;	Broken vertical bar
Ð	§	§	Section sign
ă	¨	¨ or &die;	Diổresis / Umlaut
â	©	©	Copyright
ê	ª	ª	Feminine ordinal
ô	«	«	Left angle quote, guillemot left
ơ	¬	&not	Not sign
ư			Soft hyphen
đ	®	®	Registered trademark
Ｏfont>	¯	¯ or &hibar;	Macron accent
༯font>	°	°	Degree sign
Ἧfont>	±	±	Plus or minus
⼯font>	²	²	Superscript two
㼯font>	³	³	Superscript three
伯font>	´	´	Acute accent
à	µ	µ	Micro sign
ả	¶	¶	Paragraph sign
ã	·	·	Middle dot
á	¸	¸	Cedilla
ạ	¹	¹	Superscript one
꼯font>	º	º	Masculine ordinal
ằ	»	»	Right angle quote, guillemot right
ẳ	¼	¼	Fraction one-fourth
ẵ	½	½	Fraction one-half
ắ	¾	¾	Fraction three-fourths
Ｏfont>	¿	¿	Inverted question mark
	À	À	Capital A, grave accent
Á	Á	Á	Capital A, acute accent
¼/font>	Â	Â	Capital A, circumflex
ü/font>	Ã	Ã	Capital A, tilde
ļ/font>	Ä	Ä	Capital A, diổresis / umlaut
ż/font>	Å	Å	Capital A, ring
ặ	Æ	Æ	Capital AE ligature
ầ	Ç	Ç	Capital C, cedilla
ẩ	È	È	Capital E, grave accent
ẫ	É	É	Capital E, acute accent
ấ	Ê	Ê	Capital E, circumflex
ậ	Ë	Ë	Capital E, diổresis / umlaut
è	Ì	Ì	Capital I, grave accent
Í	Í	Í	Capital I, acute accent
ẻ	Î	Î	Capital I, circumflex
ẽ	Ï	Ï	Capital I, diổresis / umlaut
é	Ð	Ð	Capital Eth, Icelandic
ẹ	Ñ	Ñ	Capital N, tilde
ề	Ò	Ò	Capital O, grave accent
ể	Ó	Ó	Capital O, acute accent
ễ	Ô	Ô	Capital O, circumflex
ế	Õ	Õ	Capital O, tilde
ệ	Ö	Ö	Capital O, diổresis / umlaut
ì	×	×	Multiply sign
ỉ	Ø	Ø	Capital O, slash
ټ/font>	Ù	Ù	Capital U, grave accent
ڼ/font>	Ú	Ú	Capital U, acute accent
ۼ/font>	Û	Û	Capital U, circumflex
ĩ	Ü	Ü	Capital U, diổresis / umlaut
í	Ý	Ý	Capital Y, acute accent
ị	Þ	Þ	Capital Thorn, Icelandic
ò	ß	ß	Small sharp s, German sz
༯font>	à	à	Small a, grave accent
ỏ	á	á	Small a, acute accent
õ	â	â	Small a, circumflex
ó	ã	ã	Small a, tilde
ọ	ä	ä	Small a, diổresis / umlaut
ồ	å	å	Small a, ring
ổ	æ	æ	Small ae ligature
ỗ	ç	ç	Small c, cedilla
ố	è	è	Small e, grave accent
ộ	é	é	Small e, acute accent
ờ	ê	ê	Small e, circumflex
ở	ë	ë	Small e, diổresis / umlaut
ỡ	ì	ì	Small i, grave accent
ớ	í	í	Small i, acute accent
ợ	î	î	Small i, circumflex
ù	ï	ï	Small i, diổresis / umlaut
༯font>	ð	ð	Small eth, Icelandic
ủ	ñ	ñ	Small n, tilde
ũ	ò	ò	Small o, grave accent
ú	ó	ó	Small o, acute accent
ụ	ô	ô	Small o, circumflex
ừ	õ	õ	Small o, tilde
ử	ö	ö	Small o, diổresis / umlaut
ữ	÷	÷	Division sign
ứ	ø	ø	Small o, slash
ự	ù	ù	Small u, grave accent
ỳ	ú	ú	Small u, acute accent
ỷ	û	û	Small u, circumflex
ỹ	ü	ü	Small u, diổresis / umlaut
ý	ý	ý	Small y, acute accent
ỵ	þ	þ	Small thorn, Icelandic
Ｏfont>	ÿ	ÿ	Small y, diổresis / umlaut

HTML	Kết quả
Dòng chữ này thường	Dòng chữ này thường
<b>Dòng chữ này đậm</b>	Dòng chữ này đậm
<i>Dòng chữ này nghiêng</i>	Dòng chữ này nghiêng
<font color="#800000" face="Verdana">Ðây là đoạn văn thứ nhất màu đỏ có phông là Verdana.</font><p><font color="Black" face="Verdana">Ðây là đoạn văn thứ hai màu ô liu có phông cũng là Verdana.</font></p>	Ðây là đoạn văn thứ nhất màu đỏ có phông là Verdana. Ðây là đoạn văn thứ hai màu ôliu có phông cũng là Verdana.
<b><i>Dòng chữ này vừa đậm vừa nghiêng</i></b>	Dòng chữ này vừa đậm vừa nghiêng
Ðoạn này canh trái.</font><p align="center"><font face="Verdana">Ðoạn này canh giữa.</font></p><p align="right"><font face="Verdana">Ðoạn này canh phải.</font>	Ðoạn này canh trái. Ðoạn này canh giữa. Ðoạn này canh phải.

Thuộc tính	Diễn giải
url	Viết tắt của Uniform Resource Locators: là 1 chuỗi cung cấp địa chỉ Internet của 1 Web site hoặc tài nguyên trên World Wide Web, theo cùng là nghi thức protocol của site hoặc tài nguyên truy cập vào. Nghi thức thường dùng http://, cho các địa chỉ Internet của một trang web. Vài dạng URL khác là gopher://, cho các địa chỉ Internet của 1 thư mục dịch vụ gopher, và ftp://, cho các địa chỉ tài nguyên FTP. Trong tag <BODY> ta thường dùng dạng URL là file://, tên tập tin ảnh .GIF, .JPG, .BMP. Khi lưu trang web, bạn sẽ xác định thư mục mới sẽ lưu trữ tập tin ảnh.
color	Màu dạng #NNNNNN với N:0,1,...,F. Hoặc tên những màu đã quy định trước như: AQUA, BLACK, Black, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, #800000, SILVER, TEAL, WHITE, YELLOW.
BACKGROUND=url	Chỉ định ảnh nền cho trang web, url là địa chỉ và tên tập tin làm ảnh nền.
BGCOLOR=color	Chỉ định màu nền cho trang web
BGPROPERTIES=FIXED	Chỉ định ảnh nền trang web không cuộn khi cuộn thanh scrollbar.
LEFTMARGIN=n	Chỉ định lề trái trang web, n là 1 số nguyên dương tính theo pixel
LINK=color	Chỉ định màu cho các hyperlink khi chưa được "duyệt" trong trang web.
TEXT=color	Chỉ định màu văn bản trong trang web
TOPMARGIN=n	Chỉ định lề trên trang web, n là 1 số nguyên dương tính theo pixel
VLINK=color	Chỉ định màu cho các hyperlink khi đã được "duyệt" trong trang web.

HTML	Kết quả
<BODY BGCOLOR=YELLOW TEXT=#800000> Chào mừng thế kỷ mới </BODY>	Chào mừng thế kỷ mới
<BODY BGCOLOR="#0000FF" TEXT="#FFFFFF"> Chào mừng thế kỷ mới </BODY>	Chào mừng thế kỷ mới

HTML	Kết quả
Dòng này thông thường	Dòng này thông thường
<b>Dòng này đậm</b>	Dòng này đậm
<i>Dòng này nghiêng</i>	Dòng này nghiêng
<u>Dòng này gạch dưới</u>	Dòng này gạch dưới
<s>Dòng này gạch giữa</s>	~~Dòng này gạch giữa~~
<b><i>Dòng này vừa đậm vừa nghiêng</b></i>	Dòng này vừa đậm vừa nghiêng
<i><u>Dòng này vừa nghiêng vừa gạch dưới</u></i>	Dòng này vừa nghiêng vừa gạch dưới

HTML	Kết quả
Dòng này thông thường	Dòng này thông thường
<strong>Dòng này đậm</strong>	Dòng này đậm
<em>Dòng này nghiêng</em>	Dòng này nghiêng
<strike>Dòng này gạch giữa</strike>	~~Dòng này gạch giữa~~
<strong><em>Dòng này vừa đậm vừa nghiêng</strong></em>	Dòng này vừa đậm vừa nghiêng
<em><u>Dòng này vừa nghiêng vừa gạch dưới</u></em>	Dòng này vừa nghiêng vừa gạch dưới
H<sub>2</sub>SO<sub>4</sub>	H₂SO₄
x<sup>y</sup>	_x^y

HTML	Kết quả
<html> <head> <title>Web demo</title> </head> <body> Hello World! </body> </html>	- Trên thanh tiêu đề xuất hiện: Web demo - Microsoft Internet Explorer - Nội dung trang web xuất hiện: Hello World!

HTML	Kết quả
Có 2 trình duyệt hiện đang được sử dụng rộng rãi là: <p align=left>- Netscape Navigator <p align=center>- Và Internet Explorer	Có 2 trình duyệt hiện đang được sử dụng rộng rãi là: - Netscape Navigator - Và Internet Explorer

HTML	Kết quả
Prontpage hay tự thêm vào các chuỗi mã thay thế cho việc đưa các ký tự vào source trang web như:<BR>- chuỗi "®" thay thế ký tự (R).<BR>- chuỗi "<" thay thế dấu <.	Prontpage hay tự thêm vào các chuỗi mã thay thế cho việc đưa các ký tự vào source trang web như: - chuỗi "®" thay thế ký tự (R). - chuỗi "<" thay thế dấu <.

HTML	Kết quả
<HR ALIGN=CENTER COLOR=#800000 NOSHADE SIZE=3 WIDTH=200>
<HR ALIGN=LEFT COLOR=BLACK SIZE=2 WIDTH=150>

HTML	Kết quả
<basefont size=3> <font size=5> Kích thớc văn bản là 5</font> <p><font size=+1>Kích thớc văn bản là 4</p></font> <p><font size=+2>Kích thớc văn bản là 5</p></font> <p><font size=-1>Kích thớc văn bản là 2</p></font>	Kích thước văn bản là 5 Kích thước văn bản là 4 Kích thước văn bản là 5 Kích thước văn bản là 2

Tiêu đề cấp 1

Tiêu đề cấp 2

Tiêu đề cấp 3

Tiêu đề cấp 4

Tiêu đề cấp 5

Tiêu đề cấp 6