VIII. XÂY DỰNG TRANG WEB.
VIII.3 Các ví dụ về HTML.
Cấu trúc cơ bản của một trang html gồm hai phần chính: phần header (nằm giữa tag <head> và tag
</head>) chứa thông tin chung về trang Web, phần nội dung chính của trang Web (đặt giữa hai tag
<body> và </body> chứa nội dung sẽđược hiển thị trên trang web.
<HTML> <HEAD>
<TITLE></TITLE> </HEAD>
<BODY>
Noi dung trang Web </BODY>
</HTML>
Đặt màu nền cho trang Web:
<BODY BGCOLOR="#FF0000"> Noi dung trang Web
</BODY>
Đặt picture làm nền:
<BODY BACKGROUND="swirlies.gif"> Noi dung trang Web
</BODY>
Đặt chếđộ nghiêng, đậm, gạch dưới:
<BODY BGCOLOR="#FFFFFF">
<U>Noi dung </U> <I>trang </I> <B>Web</B> </BODY>
Chọn font :
<font color="#00FF00" face=".VnArial" size="7">font chu</font>
Các thuộc tính của text:
<BODY BGCOLOR="#FFFFFF">
Noi dung <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">trang Web</FONT></B></I></U>
</BODY>
174
Canh text:
here?? </BODY>
<BODY BGCOLOR="#FFFFFF">
<CENTER>Something really cool</CENTER> </BODY>
Chèn hình vào trang Web:
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=82 HEIGHT=68> </BODY> Cấp thư mục: SRC="../../copper.gif" Liên kết: hoặc : Gởi mail: <BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://home.netscape.com/">Netscape!</A> </BODY> (adsbygoogle = window.adsbygoogle || []).push({});
Click <A HREF="lesson04.html">here</A> to be magically
<BODY BGCOLOR="#FFFFFF">
Send me <A HREF="mailto:forrest@bubbagump.com">Mail!</A> </BODY>
Liên kết bằng hình:
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://home.netscape.com/"> <IMG SRC="copper.gif" WIDTH=82 HEIGHT=68 BORDER=0></A>
</BODY>
Danh sách trang trí kiểu (‘.’)
<BODY BGCOLOR="#FFFFFF"> What I want for Christmas <UL>
<LI>a big red truck <LI>a real fast speedboat <LI>a drum set
176 Danh sách trang trí kiểu số:(1,2,3..) Danh sách trang trí kiểu số:(1,2,3..)
<BODY BGCOLOR="#FFFFFF"> What I want for Christmas <OL>
<LI>a big red truck <LI>a real fast speedboat
<LI>a drum set <LI>a BB gun
<LI>a Melanie Griffith </OL> </BODY> Đường kẻ ngang: <HR WIDTH=20%> hoặc: <HR > <HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3 NOSHADE>
Frame
Frame chia theo cột:
<FRAMESET COLS="50%,50%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> </FRAMESET>
Frame chia theo dòng:
<FRAMESET ROWS="10%,20%,30%,15%,25%"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> <FRAME SRC="shannon.html"> </FRAMESET> Frame chia tựđộng: <FRAMESET COLS="50,*"> <FRAME SRC="lisa.html"> <FRAME SRC="terri.html">
178
Form <FRAME SRC="lisa.html"> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="kim.html"> <FRAME SRC="tina.html"> </FRAMESET> </FRAMESET>
Độ rộng của line, màu line của frame:
<FRAMESET COLS="154,*" BORDER=20 BORDERCOLOR="#FFOOOO"> <FRAMESET ROWS="170,*" FRAMEBORDER=NO >
<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="lisa.html"> </FRAMESET> <FRAME SRC="terri.html"> </FRAMESET> Gởi mail:
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www-form-urlencoded"> </FORM>
Các đối tượng trong form:
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30> <INPUT TYPE=PASSWORD NAME="USER PASSWORD">
Radio button: (adsbygoogle = window.adsbygoogle || []).push({});
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed" CHECKED> Ed Holleran<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>
Check Box:
<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES" CHECKED> Ed Holleran<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR>
180
Table
</SELECT>
List Box:
<SELECT NAME="BEST FRIEND" SIZE=4> <OPTION VALUE="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom" SELECTED>Tom <OPTION VALUE="Guido">Guido <OPTION VALUE="Horace">Horace <OPTION VALUE="Reggie">Reggie <OPTION VALUE="Myron">Myron </SELECT> Text Area:
<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50> </TEXTAREA>
Nút Submit, Reset:
<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
Chia dòng, cột:
<table border="1" width="100%"> <tr> <td width="50%"> </td> <td width="50%"> </td> </tr> <tr> <td width="50%"> </td> <td width="50%"> </td> </tr> </table>