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

Màu nền
Font chữ
Font size
Chiều cao dòng

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ữ: <FONT></FONT>,<BASEFONT></BASEFONT>

Tag xuống dòng sang đoạn mới: <P></P>

Tag xuống dòng không sang đoạn mới: <BR></BR>

Tag thêm đường thẳng nằm ngang: <HR></HR>

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

Tag đậm: <B></B>

Tag nghiêng: <I></I>

Tag gạch dưới: <U></U>

Tag gạch giữa: <S></S>

Tag đậm logic type: <STRONG></STRONG>

Tag nghiêng logic type: <EM></EM>

Tag gạch ngang logic type: <STRIKE></STRIKE>

Tag chỉ số logic type: <SUB></SUB>

Tag mũ logic type: <SUP></SUP>

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 <B> cú pháp <B>chuỗi văn bản in đậm</B>

- tag xuống hàng <P> có cú pháp <P ALIGN=align-type>một đoạn văn bản</P> HTML Kết quả

Dòng chữ này thường Dòng chữ này thường

Dòng chữ này đậm Dòng chữ này đậm

Dòng chữ này nghiêng 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>

<font color="Black" face="Verdana">Ðây là đoạn văn thứ hai màu ô liu có phông cũng là Verdana.</font>

Ðâ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.

Dòng chữ này vừa đậm vừa nghiêng 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 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.

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

Tag đầu trang <HTML></HTML> :Tag <HTML> ở đầu trang web tĩnh và </HTML> ở cuối trang. Trang web được bắt đầu và kết thúc bởi tag này.

Tag bắt đầu <HEAD></HEAD> :Tag <HEAD> đánh dấu điểm bắt đầu phần_đầu_heading của trang web. Tag </HEAD> có thể bỏ qua.

Tag tiêu đề <TITLE></TITLE> :Tag <TITLE> chỉ định tiêu đề của của trang web. Tiêu đề này sẽ xuất hiện trên thanh tiêu đề của trình duyệt(web browser: Internet Explorer hoặc Netscape Navigator). Tag này chỉ hợp lệ khi đưa vào bên trong phần <HEAD>

Ví dụ:

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!

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

Tag thân trang <BODY></BODY>: dùng chỉ định bắt đầu và kết thúc phần nội dung trang web. Tag này được định nghĩa như sau:

<BODY

BACKGROUND=url

BGCOLOR=color

BGPROPERTIES=FIXED

LEFTMARGIN=n

LINK=color

TEXT=color

TOPMARGIN=n

VLINK=color>

trong đó:

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.

Ví dụ:

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>

<head>

<title>Web demo</title>

</head>

<BODY text=BLACK background="images/so01871_1.gif" topmargin="20" leftmargin="25" link=#800000 vlink=GREEN>

<p align="center">Danh mục công việc

<a href="#Nội dung mục 1">Mục

1</a>

<a href="#Nội dung mục 2">Mục 2</a>

<a href="#Nội dung mục 3">Mục 3</a>

<a name="Nội dung mục 1">Nội dung mục 1</a>

<a name="Nội dung mục 2">Nội dung mục 2</a>

<a name="Nội dung mục 3">Nội dung mục 3</a>

</BODY>

</html> - file ảnh nền: so01871_1.gif

- Vì không đưa vào thuộc tính bgproperties="fixed" nên ảnh nền bị cuộn

- lề trái=25

- lề trên=20

- màu văn bản đen

- màu hyperlink chưa duyệt là đỏ

- màu hyperlink đã duyệt là xanh

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

Tag xuống dòng sang đoạn mới <P></P>: ngắt văn bản sang đoạn (paragraph) mới. Thành phần </P> cuối đoạn không nhất thiết phải có. Tag này được định nghĩa như sau: <P ALIGN=align-type>, ALIGN=align-type dùng chỉ định canh đoạn mới. align-type=LEFT(canh trái), RIGHT(canh phải) hoặc CENTER(canh giữa).

Ví dụ: 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

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

Tag xuống dòng không sang đoạn mới <BR></BR>: ngắt xuống dòng mới nhưng vẫn thuộc cùng một đoạn hiện hành.</BR> không nhất thiết phải có.

Ví dụ:

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 <.

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

Tag thêm đường thẳng nằm ngang <HR></HR>: thêm đường thẳng nằm ngang trong trang web. Tag này được định nghĩa như sau:

<HR

ALIGN=align-type

COLOR=color

NOSHADE

SIZE=n

WIDTH=m>

trong đó:

- ALIGN=align-tpye: canh lề cho đường thẳng ngang, align-type có thể là LEFT, RIGHT, CENTER

- COLOR=color: màu đường thẳng ngang

- NOSHADE: không có bóng

- SIZE=n : độ đậm của đường thẳng ngang, n có giá trị là số nguyên tính theo đơn vị pixel.

Ví dụ:

HTML Kết quả

<HR

ALIGN=CENTER

COLOR=#800000

NOSHADE

SIZE=3

WIDTH=200>

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

<HR

ALIGN=LEFT

COLOR=BLACK

SIZE=2

WIDTH=150>

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

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

Tag đậm <B></B>: Hiển thị văn bản đậm theo physical type

Tag nghiêng <I></I>: Hiển thị văn bản nghiêng theo physical type

Tag gạch dưới <U></U>: Hiển thị văn bản gạch dưới theo physical type

Tag gạch giữa <S></S>: Hiển thị văn bản gạch giữa(strikeout) theo physical type

Ví dụ:

HTML Kết quả

Dòng này thông thường Dòng này thông thường

Dòng này đậm Dòng này đậm

Dòng này nghiêng 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

Dòng này vừa đậm vừa nghiêng Dòng này vừa đậm vừa nghiêng

<u>Dòng này vừa nghiêng vừa gạch dưới</u> Dòng này vừa nghiêng vừa gạch dưới

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

Tag đậm logic type <STRONG></STRONG>:Hiển thị văn bản đậm theo logic type

Tag nghiêng logic type <EM></EM>: Hiển thị văn bản nghiêng theo logic type

Tag gạch ngang logic type <STRIKE></STRIKE>: Hiển thị văn bản gạch dưới theo logic type

Tag chỉ số logic type <SUB></SUB>: Hiển thị văn bản dạng chỉ số theo logic type

Tag mũ logic type <SUP></SUP>: Hiển thị văn bản dạng mũ theo logic type

Ví dụ: HTML Kết quả

Dòng này thông thường Dòng này thông thường

Dòng này đậm Dòng này đậm

Dòng này nghiêng Dòng này nghiêng

<strike>Dòng này gạch giữa</strike> Dòng này gạch giữa

Dòng này vừa đậm vừa nghiêng Dòng này vừa đậm vừa nghiêng

<u>Dòng này vừa nghiêng vừa gạch dưới</u> Dòng này vừa nghiêng vừa gạch dưới

H<sub>2</sub>SO<sub>4</sub> H2SO4

x<sup>y</sup> xy

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

Tag định font chữ cơ sở <BASEFONT></BASEFONT>:chỉ định font, size, màu văn bản cho các văn bản không định dạng và dùng với tag

<BASEFONT

SIZE=n

FACE=name

COLOR=color>

Trong đó:

SIZE=n: chỉ định kích thước văn bản, n từ 1 đến 7. Giá trị mặc nhiên là 3.

COLOR=color: màu văn bản

FACE=name: tên font

Tag font chữ <FONT></FONT>: chỉ định font, size, màu văn bản. Ðịnh nghĩa như sau:

<FONT

SIZE=n

FACE=name

COLOR=color>

Trong đó:

SIZE=n: chỉ định kích thước văn bản, n từ 1 đến 7. Thêm dấu cộng + hoặc trừ - phía trước để chỉ định việc tăng hoặc giảm kích thước so với kíhc thước đã định trong BASEFONT.

COLOR=color: màu văn bản

FACE=name: tên font

Ví dụ: Văn bản thường HTML Kết quả

<basefont size=3>

<font size=5> Kích thớc văn bản là 5</font>

<font size=+1>Kích thớc văn bản là 4

</font>

<font size=+2>Kích thớc văn bản là 5

</font>

<font size=-1>Kích thớc văn bản là 2

</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

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

Tag nhạc nền <BGSOUND>: định nhạc nền cho trang tư liệu. Tag này được đặt dưới tag </HEAD> nhưng trên tag <BODY>. Ðịnh nghĩa như sau:

<BGSOUND

SCR=url

LOOP=n>

Trong đó:

url: chỉ định tập tin nhạc. Các kiểu nhạc có thể là WAV, AU, MIDI.

n: chỉ số lần lặp lại bài nhạc. Nếu n=-1 hoặc infinite thì sẽ lặp đến khi nào đóng trang web.

Ví dụ:

<HTML>

<TITLE>Background Sound</TITLE>

<HEAD>

</HEAD>

<BGSOUND

SCR="sound/bgs.wav"

LOOP=-1>

<BODY>

Enjoy my sound.

</BODY>

</HTML>

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

Tag hình ảnh, phim <IMG>: Thêm hình ảnh hoặc phim vào trang web. Ðịnh nghĩa

<IMG

ALIGN=align-type

ALT=text

SRC=url

BORDER=n

HEIGTH=n

WIDTH=n

HSPACE=n

VSPACE=n>

Trong đó:

- ALIGN=align-type: lề cho ảnh hay cho văn bản bao quanh ảnh. Giá trị có thể là TOP, MIDDLE, BOTTOM, LEFT, RIGHT.

- ALT=text: văn bản hiển thị hay thay thế cho hình ảnh khi chức "Show Picture" trong trình duyệt bị tắt.

- SRC=url: chỉ định ảnh

- BORDER=n: đường viền ảnh. Nếu ảnh được dùng cho hyperlink thì đường viền có màu trùng với màu hyperlink. Nếu ảnh không dùng cho hyperlink thì đường viền không hiển thị.

- HEIGTH=n, WIDTH=n: chỉ độ cao và độ rộng của ảnh. Ðơn vị bằng pixel.

- HSPACE=n, VSPACE=n: chỉ định khoảng cách từ ảnh đến văn bản quanh nó theo chiều ngang và dọc.

Ví dụ:

<A HREF="index.htm"><IMG SRC="images/btoc.gif" ALT="[các nội dung]" ALIGN=MIDDLE HSACE=5 VSPACE=5>Nội dung</A></P>

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

Tag danh sách <UL><LI></UL>, <OL><LI></OL>: Danh sách sắp xếp (Ordered List), danh sách không sắp xếp(Unordered List) và danh sách các định nghĩa (Definition List). Danh sách sắp xếp bắt đầu bằng tag <OL>, danh sách không sắp xếp bắt đầu bằng 1 trong các tag sau: <UL>, <DIR> và <MENU>, danh sách các định nghĩa bắt đầu bằng tag <DL>. Ðể thể hiện mỗi một mẫu trong danh sách sắp xếp và không sắp xếp dùng tag <LI>.

UL, DIR, MENU: danh sách không sắp xếp kiểu bullet, mỗi mẫu bắt đầu bằng tag LI.

Ví dụ: danh sách kiểu bullet(không sắp xếp).

<UL>

<LI>Ðây là mục 1 trong danh sách.

<LI>Ðây là mục 2 trong danh sách.

</UL>

Kết quả trình duyệt như sau:

Ðây là mục 1 trong danh sách.

Ðây là mục 2 trong danh sách.

OL: danh sách sắp xếp. Mỗi mục trong danh sách cũng bắt đầu bằng <LI>.

Ðinh nghĩa OL:

<OL START=n TYPE=order-type> trong đó:

START=n: chỉ định chỉ số bắt đầu

TYPE=order-type: chỉ định kiểu chỉ số. Có thể là một trong các giá trị sau:

A: sử dụng ký tự lớn A,B,C,...

a: sử dụng ký tự nhỏ a,b,c,...

I: sử dụng số La Mã lớn I,II,III,...

i: sử dụng số La Mã nhỏ i,ii,iii,...

1: sử dụng số 1,2,3,...

Ví dụ:

<OL TYPE=I>

<LI>Nghi thức HTTP

<LI>Nghi thức FTP

<LI>Nghi thức SMTP

</OL>

Kết quả trình duyệt như sau:

I. Nghi thức HTTP

II. Nghi thức FTP

III. Nghi thức SMTP

DL: danh sách các định nghĩa, dùng với <DT> để chỉ định mẫu cần định nghĩa, và <DD> để chỉ định định nghĩa cho mẫu xác định bởi <DT>.

Ví dụ:

<DL>

<DT>Tin học

<DD>Môn khoa học nghiên cứu việc xử lý thông tin trên máy tính

<DT>Sử học

<DD>Môn khoa học nghiên cứu các biến đổi xã hội

</DL>

Kết quả trình duyệt như sau:

Tin học

Môn khoa học nghiên cứu việc xử lý thông tin trên máy tính

Sử học

Môn khoa học nghiên cứu các biến đổi xã hội

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

Tag định dạng bảng <TABLE><TR><TD></TABLE>: sử dụng tag <TABLE> để bắt đầu và kết thúc 1 bảng. Sử dụng kèm theo với tag <TR></TR> để thêm 1 dòng trong bảng và tag <TD></TD> để thêm vào 1 ô trên dòng.

Ví dụ:

<TABLE>

<TR><TD>Ô 11<TD>Ô 12

<TR><TD>Ô 21<TD>Ô 22

</TABLE>

Kết quả trình duyệt như sau:

Ô 11 Ô 12

Ô 21 Ô 22

Ðể đóng khung cho bảng, sử dụng thuộc tính BORDER

Ví dụ:

<TABLE BORDER=1>

<TR><TD>Ô 11<TD>Ô 12

<TR><TD>Ô 21<TD>Ô 22

</TABLE>

Kết quả trình duyệt như sau:

Ô 11 Ô 12

Ô 21 Ô 22

Chiều rộng mặc định của bảng sẽ là chiều rộng lớn nhất của dòng rộng nhất trong bảng. Ðể chỉ định chiều rộng các bảng, sử dụng thuộc tính WIDTH=n% để quy định chiều rộng.

Ví dụ:

<TABLE BORDER=1 WIDTH=100%>

<TR><TD>Ô 11<TD>Ô 12

<TR><TD>Ô 21<TD>Ô 22

</TABLE>

Kết quả trình duyệt như sau:

Ô 11 Ô 12

Ô 21 Ô 22

Ðể thêm tiêu đề cho bảng, sử dụng tag <CAPTION></CAPTION>. Mặc định tiêu đề của bảng nằm ở trên và canh lề giữa. Tuy nhiên có thể thay đổi bằng cách dùng thuộc tính ALIGN bên trong CAPTION.

Ví dụ:

<TABLE BORDER=1 WIDTH=100%>

<CAPTION> Tiêu đề của bảng</CAPTION>

<TR><TD>Ô 11<TD>Ô 12

<TR><TD>Ô 21<TD>Ô 22

</TABLE>

Kết quả trình duyệt như sau:

Tiêu đề của bảng

Ô 11 Ô 12

Ô 21 Ô 22

Ðể thêm vào các ô trải dài trên nhiều cột, dòng khác, dùng thuộc tính COLSPAN=n và ROWSPAN=n.

Ví dụ:

<TABLE BORDER=1 WIDTH=100%>

<CAPTION> Tiêu đề của bảng</CAPTION>

<TR><TD>Ô 11<TD COLSPAN=2>Ô 12 trải dài trên 2 ô

<TR><TD>Ô 21<TD>Ô 22<TD>Ô 23

</TABLE>

Kết quả trình duyệt như sau:

Ô 11 Ô 12 trải dài trên 2 ô

Ô 21 Ô 22 Ô 23

Ðịnh nghĩa TABLE(bảng):

<TABLE

ALIGN=align-type

BACKGROUND=url

BGCOLOR=color-type

BORDER=n

CELLPADDING=n

WIDTH=n%>

Trong đó:

ALIGN=align-type: lề của bảng, có giá trị là LEFT hoặc RIGHT

BACKGROUND=url: chỉ định ảnh nền của bảng

BGCOLOR=color-type: màu nền của bảng

BORDER=n: đường viền bảng, n tính bằng pixel

CELLPADDING=n: khoảng cách từ ô tới nội dung của ô, đơn vị pixel

WIDTH=n: độ rộng của bảng, n tính theo % (phải có dấu % theo sau)

Ðịnh nghĩa TR(dòng):

<TR

ALIGN=align-type

BACKGROUND=url

BGCOLOR=color-type

VALIGN=v-align-type>

Trong đó:

ALIGN=align-type: lề của các ô trong dòng, có giá trị là LEFT, RIGHT hoặc CENTER

BACKGROUND=url: chỉ định ảnh nền của dòng

BGCOLOR=color-type: màu nền của dòng

VALIGN=v-align-type: lề theo chiều dọc cho văn bản trong các ô trên dòng. Giá trị có thể là: TOP, BOTTOM, MIDDLE.

Ðịnh nghĩa TD (ô):

<TD

ALIGN=align-type

BACKGROUND=url

BGCOLOR=color-type

COLSPAN=n

ROWSPAN=n

VALIGN=v-align-type>

Trong đó:

ALIGN=align-type: lề văn bản trong ô, có giá trị là LEFT, RIGHT hoặc CENTER

BACKGROUND=url: chỉ định ảnh nền cho ô

BGCOLOR=color-type: màu nền của ô

COLSPAN=n: ô trải rộng trên n cột

ROWSPAN=n: ô trải dài trên n hàng

VALIGN=v-align-type: lề theo chiều dọc cho văn bản trong các ô . Giá trị có thể là: TOP, BOTTOM, MIDDLE.

TH: tạo ô tiêu đề. Tương tự như TD chỉ khác là văn bản được thể hiện ở dạng nghiêng.

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

Tag tạo Frame <FRAMESET><FRAME></FRAMESET>:

Sử dụng tag <FRAMESET> và </FRAMESET> để chia cửa sổ trình duyệt thành nhiều cửa sổ con frame. Tag <FRAMESET> được dùng kèm với tag <FRAME> để định nghĩa 1 frame.

Ví dụ: tạo trang web có tên là 2frame.htm chứa 2 frame, frame 1 bên trái chứa nội dung trang web page_1.htm và frame 2 bên phải chứa nội dung trang web page_2.htm.

<html>

<head>

<title>Trang web có 2 khung</title>

</head>

<frameset cols="150,*">

<frame name="muc_luc" target="noi_dung" src="http://bcvtth/html/page_1.htm">

<frame name="noi_dung" src="http://bcvtth/html/page_2.htm">

</frameset>

</html>

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ụ:

<a href="#Nd phần 1">Xem nội dung phần 1</a>

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>

<A HREF="mailto:[email protected]">[email protected]</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

Ofont> ¯ ¯ 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

Ofont> ¿ ¿ 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

Ofont> ÿ ÿ Small y, diổresis / umlaut

Bạn đang đọc truyện trên: Truyen2U.Pro