TÀI LIỆU LẬP TRÌNH HTML CƠ BẢN

nguyenvanlong Sun Jun 19, 2011 7:18 pm

TÀI LIỆU LẬP TRÌNH HTML CƠ BẢN

Trích:
<HTML>
<HEAD>
<TITLE>Tiêu đề trang web</TITLE>
</HEAD>
<BODY>
Thân trang web
</BODY>
</HTML>

Sau khi lưu với đuôi *.htm or *.html, ta được một trang có:
tiêu đề: Tiêu đề trang web
nội dung:Thân trang web
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
Các TAG cơ bản
<b></b>:tạo chữ đậm
<i></i>:tạo chữ nghiêng
<u></u>: chữ gạch chân
<font color="Black" face="Verdana"></font> òng chữ màu đen có font Verdana
<p align=left></p>:tạo dòng chữ căn trá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>
Tag thân trang :<BODY></BODY hần nọi dung trang web được thể hiện nằm trong thẻ <BODY></BODY>
Ví dụ:

Trích:
<html>
<head>
<title>Ví dụ về HTML</title>
</head>
<body>
Welcome to Vinalink media JSC
</body>
</html>

Ta sẽ được một trang :
Trên thanh tiêu đề xuất hiện: Ví dụ về HTMl - Microsoft Internet Explorer
Nội dung trang web xuất hiện: Welcome to Vinalink media
Trong thẻ <BODY></BODY> còn có thể thêm nhiều thuộc tính của trang
VD:
<body bgcolor=black></body>:màu nền trang sẽ là màu đen
....
Các thuộc tính cơ bản
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 [You must be registered and logged in to see this link.] cho các địa chỉ Internet của một trang web. Vài dạng URL khác là [You must be registered and logged in to see this link.] cho các địa chỉ Internet của 1 thư mục dịch vụ gopher, và [You must be registered and logged in to see this link.] cho các địa chỉ tài nguyên [You must be registered and logged in to see this link.]
Trong tag <BODY> ta thường dùng dạng URL là [You must be registered and logged in to see this link.] 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
để thêm bạn cho vào thẻ <body> như ví dụ

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

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

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

Trích:
<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ụ:

Trích:
<A HREF="index.htm"><IMG SRC="images/btoc.gif" ALT="chú thích hình ảnh" 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>
Ð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ụ:

Trích:
<OL TYPE=I>
<LI>Nghi thức HTTP
<LI>Nghi thức FTP
<LI>Nghi thức SMTP
</OL>

sẽ được
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ụ:

Trích:
<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ụ:

Trích:
<TABLE BORDER=1>
<TR><TD>Ô 11<TD>Ô 12
<TR><TD>Ô 21<TD>Ô 22
</TABLE>

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

Trích:
<TABLE BORDER=1 WIDTH=100%>
<TR><TD>Ô 11<TD>Ô 12
<TR><TD>Ô 21<TD>Ô 22
</TABLE>

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

Trích:
<TABLE BORDER=1 WIDTH=100%>
<CAPTION> Tiêu đề của bảng</CAPTION>
<TR><TD>Ô 11<TD>Ô 12
<TR><TD>Ô 21<TD>Ô 22
</TABLE>

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

Trích:
<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>

Ðị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" rel="nofollow" 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:rel="nofollow" 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 rel="nofollow" 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ụ:

Trích:
<frame name="muc_luc" rel="nofollow" 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:

Trích:
<html>
<head>
<title>Trang mục lục</title>
<base rel="nofollow" target="noi_dung">
</head>
<body>
<p>Mục lục công việc</p>
<p><a href="page_2.htm">page 2</a></p>
<p><a href="page_3.htm">page 3</a></p>
</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 rel="nofollow" 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ụ:

Trích:
<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ụ:

Trích:
<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ụ:

Trích:
<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:lava@pele.bigu.edu">lava@pele.bigu.ed u</A><br>

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