Bài giảng HTML căn bản
Trang 1BÀI 3 THIẾT KẾ TRANG WEB
Khoa CNTT – ĐH KHTN
Nội dung
1 Giới thiệu về HTML
2 HTML – Cơ bản
3 Frame
1 Giới thiệu về HTML
l HTML (Hyper Text Markup Language - Ngôn ngữ
đánh dấu siêu văn bản)
l Là một ngôn ngữ dùng để xây dựng một trang Web
l Chứa các thành phần định dạng để báo cho trình
duyệt Web biết cách để hiển thị một trang Web.
l Một trang web thông thường gồm có 2 thành phần
chính:
– Dữ liệu của trang web (văn bản, âm thanh, hình ảnh )
– Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các
dữ liệu trên hiển thị trên trình duyệt
Trang 21 Giới thiệu về HTML
Ví dụ 1
<HTML>
<HEAD>
<TITLE>Welcome to
HTML</TITLE>
<BODY>
<H3>My first HTML
document</H3>
</BODY>
</HTML>
Kết quả hiển thị ở trình duyệt
Browsers và Editors
lBrowsers
– Netscape's Navigator
– Microsoft's Internet Explorer
lEditors
– Microsoft FrontPage
– Macromedia Dreamweaver
– Notepad
Thẻ (tag) HTML?
l<BODY BGCOLOR = lavender>
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
</BODY>
</HTML>
Trang 31 Giới thiệu về HTML
Thẻ (tag) HTML – Đổi thuộc tính
Thẻ (tag) HTML – Đổi thuộc tính
<b> Đây là một dòng được in đậm </b> Đây là một dòng được in đậm
<Font FACE=’Arial’ Size=3>
Hello
</Font>
Hello
- Không phân biệt chữ HOA và thường
- Bỏ qua các khoảng trắng thừa và các dấu ngắt dòng
Cấu trúc một tài liệu HTML
l The HTML section
l The Header section
l The BODY section
<HTML>
<HEAD>
<TITLE>Welcome to the world of HTML</TITLE>
</HEAD>
<BODY>
<P>This is going to be real fun</P>
</BODY>
</HTML>
Trang 42 HTML – Cơ bản
Cấu trúc một tài liệu HTML
l<html> </html> : định nghĩa phạm vi của
văn bản HTML
l<head> </head> : Định nghĩa các mô tả về
trang HTML Các thông tin trong tag này
không được hiển thị trên trang web
l<title> </title> : mô tả tiêu đề trang web.
l<body> </body> xác định vùng thân của
trang web, nơi chứa các thông tin.
Các tag HTML cơ bản
Ðịnh dạng văn bản
l Block-level elements
– Headers (H1 to H6)
– Paragraphs (P)
– List Items (LI)
– Horizontal Rules (HR)
l Inline or text level elements
– EM, I, B and FONT (character emphasis)
– A (hypertext links)
– BR (line breaks)
Các tag HTML cơ bản
<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>
</HEAD>
<BODY>
<H1>Introduction to HTML</H1>
<H3>Introduction to HTML</H3>
<H5>Introduction to HTML</H5>
</BODY>
Trang 52 HTML – Cơ bản
Các tag HTML cơ bản - <P>
l PARAGRAPH - <P>
<HTML>
<HEAD>
<TITLE>Welcome to
HTML</TITLE>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
<P>This is going to be real fun
<H2>Using another heading</H2>
<P ALIGN=center> Another
paragraph element
</BODY>
</HTML>
Các tag HTML cơ bản - <HR>
l <HR ….>
– Attributes
lSize
Ø<HR noshade size = 5 align = center width = 50%</HR>
Ø<HR size = 15 align = left width = 80%</HR>
Các tag HTML cơ bản - <BR>
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
<P>This is going to be real fun
<H2>Using another heading</H2>
<BR>
<H1>This should surprise you</H1>
<P> Another paragraph element
</BODY>
</HTML>
Trang 62 HTML – Cơ bản
Các tag HTML cơ bản–Định dạng
l <B> 1 </B>
l <I> 2 </I>
l <U> 3 </U>
l <BIG> 4 </BIG>
l <SMALL> 5 </SMALL>
l <STRIKE> 6 </STRIKE>
l <SUP> 7 </SUP>
l <SUB> 8 </SUB>
l <CENTER> 9 </CENTER>
Các tag HTML cơ bản–Định dạng
l <EM> 1 </EM>
l <STRONG> 2 </STRONG>
l <DFN> 3 </DFN>
l <CODE> 4 </CODE>
l <KBD> 5 </KBD>
l <VAR> 6 </VAR>
l <CITE> 7 </CITE>
l <BLINK> 8 </BLINK>
l <DEL> 9 </DEL>
l <INS> 0 </INS>
2 HTML – Cơ bản
Các tag HTML cơ bản–<PRE>
l Hiển thị đúng dạng văn bản đã
soạn thảo (khoảng trắng, xuống
dòng, tag,…)
<FONT SIZE=4>
<pre>
Ban co the xuong dong
va cach khoang trang thoai
mai
</pre>
</FONT>
Trang 72 HTML – Cơ bản
Các tag HTML cơ bản–Kí tự đặc biệt
– <
2 HTML – Cơ bản
Chèn hình ảnh - <IMG>
<IMG SRC=“path/clouds.gif“ ALT=“Chú thích hình ảnh”>
<IMG ALIGN=position SRC="PICTURE.GIF“ BORDER=0>
position là TOP, BOTTOM, hoặc MIDDLE.
l Ảnh nền trang Web
<BODY BACKGROUND=“path/clouds.gif">
lScrolling
<BODY BACKGROUND=“path/clouds.gif"
BGPROPERTIES=FIXED>
2 HTML – Cơ bản
Thêm Sound
l<BGSOUND SRC="path\sound filename">
l<BGSOUND src="batman.mid“ LOOP=“1”>
– Nhạc nền trang Web (MIDI)
– Loop = “-1” : lặp vô hạn
Trang 82 HTML – Cơ bản
HyperLink - <A>
lChèn liên kết cho 1 đoạn văn bản hay hình
ảnh
<A href=“URL”> hypertext </A>
lCó 2 loại liên kết
– Internal Link: liên kết đến những phần trong cùng 1 trang
web
– External Link: liên kết đến những trang web khác hay
website khác
2 HTML – Cơ bản
HyperLink - <A>
lTạo liên kết nội và liên kết
– Đánh dấu vị trí liên kết nội
<A NAME=“Chapter1”> Chapter 1</A>
– Tạo liên kết nội
<A HREF=“#Chapter1”> Go to Chapter 1</A>
hoặc
<A HREF=“URL#Bookmark”> Hypertext</A>
2 HTML – Cơ bản
HyperLink - <A>
l Có 2 loại địa chỉ URL trong hyperlink
– Địa chỉ tuyệt đối
<A HREF =<protocol://host.domain:port/path/filename”>Hypertext</A>
/ : vị trí thư mục gốc của website
– Địa chỉ tương đối
VD: trong file A.HTM có hyperlink
<A HREF=“ / /PPA/B.htm”> Liên kết đến trang B </A>
l Liên kết email
<A HREF=“mailto:duantd@yahoo.com>TDDuan</A>
Trang 92 HTML – Cơ bản
HyperLink - <A>
<html>
<head>
<title>My web</title>
</head>
<body>
<p><h3>Đây là trang Web đầu tiên tôi</h3></p>
<hr align="left" color ="Red">
<p>
<a name="anh">
<img border="1" src="j0304933.wmf" width="100" height="90" align="left" hspace="20" vspace="20" alt="Anh
ve chu tho">
</a>
Đây là một bức ảnh có kích thuớc 100 x 90
</p>
<p> Có viền xung quanh (boder =1 và vspace,hspace = 20) </p>
<p>Text thay thế là " Bức ảnh về chú thỏ "</p>
<p>Canh lề trái</p>
<p>Bạn hãy thiết kế thử xem !!!</p>
<p><a href="#anh">Trở về hình vẽ !</a></p>
<hr color="red">
<p>Liên hệ<a href="mailto:lamquangvu@zapo.net">lamquangvu@zapo.net</a></p>
</body>
2 HTML – Cơ bản
HyperLink - <A>
lThuộc tính TARGET
<A HREF=“URL” TARGET=“…”> hypertext </A>
– name: tải trang web vào frame có tên NAME
– _blank: tải trang web vào cửa sổ mới
– _parent: tải trang web vào cửa sổ cha của nó
– _self: tải trang web vào chính cửa sổ hiện hành
– _top: tải trang web vào cửa số cao nhất
2 HTML – Cơ bản
HyperLink - <A>
Trang 102 HTML – Cơ bản
HyperLink – Liên kết đa hình ảnh
l Xác định các vùng liên kết trên ảnh
<MAP name = "map_name">
<area shape = "rect" coords = "x1,y1,x2,y2" href =
"URL">
<area shape = "rect" coords = "x4,y4,x5,y5" href =
"URL">
</MAP>
l Sử dụng trong ảnh
<img src = "hinhanh.jpg" usemap = "#map_name">
HyperLink – Liên kết đa hình ảnh
<map name="Dalienket">
<area href="Toan.htm" shape="rect"
coords="0, 0, 100, 100">
<area href="Ly.htm" shape="rect"
coords="0,100, 100,200">
<area href="Hoa.htm" shape="rect"
coords="100, 0,200, 100">
<area href="Anhvan.htm" shape="rect"
coords="100,100, 200,200">
</map>
<img border="0" src="hinhdalienket.png"
usemap="#Dalienket" width="200"
height="200">
Chuyển hướng trang web tự động
l<META HTTP-EQUIV=“refresh”
CONTENT=“3”; URL=“URL”>
– Chuyển hướng tự động sang trang URL sau thời
gian 3 giây
– Đặt trong phần <HEAD> … </HEAD>
<HEAD>
<META HTTP-EQUIV=“refresh” CONTENT=“3”; URL=“file.htm”>
</HEAD>
Trang 112 HTML – Cơ bản
Bảng biểu - <TABLE>
l <TABLE>: định dạng bảng Mỗi ô là 1 cell
l Các thuộc tính
– BORDER=“x” : kích thước viền
– BGCOLOR: màu nền, ALIGN: canh chỉnh
– WIDTH,HEIGHT : kích thước
– CELLPADDING, CELLSPACING
– ROWSPAN, COLSPAN: trộn các dòng hoặc cột
– <TR>: dòng, <TD> cột, <TH>: heading
– <CAPTION>: tiêu đề mô tả bảng
2 HTML – Cơ bản
Bảng biểu - <TABLE>
<TABLE border=1>
<Caption> Ví dụ về bảng </Caption>
<TR>
<TH> Dòng 1 </TH>
</TR>
<TD>Dòng 1.1 </TD>
<TD>Dòng 1.2 </TD>
</TR>
<TD>Dòng 2.1 </TD>
</TR>
</TABLE>
2 HTML – Cơ bản
Bảng biểu - <TABLE> - ví dụ
<TABLE border=1>
<Caption> Ví dụ về bảng </Caption>
<TR>
<TH> Dòng 1 </TH>
</TR>
<TD>Dòng 1.1 </TD>
<TD>Dòng 1.2 </TD>
</TR>
<TD>Dòng 2.1 </TD>
</TR>
</TABLE>
Trang 122 HTML – Cơ bản
Bảng biểu - <TABLE> - ví dụ
<TABLE border=1>
<Caption> Ví dụ về bảng </Caption>
<TR>
<TH align=”center”> Dòng 1 </TH>
</TR>
<TD align=”left”>Dòng 1.1 </TD>
<TD align=”right”>Dòng 1.2 </TD>
</TR>
<TD align=”center”>Dòng 2.1
</TD>
<TD align=”justify”>Dòng 2.2
</TD>
</TR>
</TABLE>
2 HTML – Cơ bản
Bảng biểu - <TABLE> - ví dụ
2 HTML – Cơ bản
Tạo danh sách
Trang 132 HTML – Cơ bản
Tạo danh sách
<H3>Những kiến thức căn bản về HTML</H3>
<OL>
<LI>Cấu trúc tập tin HTML</LI>
<UL>
<LI>Cấu trúc tập tin HTML</LI>
<LI>Các Tag HTML</LI>
</UL>
<LI>Các Tag cơ bản</LI>
<UL>
<LI>Định dạng văn bản</LI>
<LI>Định dạng hình ảnh</LI>
<LI>Đỉnh dạng liên kết</LI>
</UL>
<LI>Ví dụ </LI>
<UL>
<LI>Code</LI>
<LI>Minh họa</LI>
</UL>
</OL>
3.FRAME
l Mỗi cửa sổ chứa 1 URL ứng với 1 trang web
l Hiển thị độc lập nhau
l Cửa sổ = FRAME
3.FRAME
l<FRAMESET>: định nghĩa cách tổ chức các
frame
l<FRAME>: định nghĩa chi tiết từng frame
lthuộc tính của <FRAMESET …>
– ROWS=“X,Y,Z,*”: phân các frame theo dòng
– COLS=“X,Y,*”: phân các frame theo cột
(X,Y,Z: kích thước xác định hay tỉ lệ %)
– Frameborder=“Yes/No”
Trang 14l thuộc tính của <FRAME …>
– NAME=“tên_frame”: đặt tên cho frame
– SRC=“URL” : địa chỉ trang web được hiển thị
– TARGET: xác định frame mặc định cho các hyperlink frame
này
– BORDER=“x” : xác định kích thước đường viền
– SCROLLING=“yes/no/auto” : xác định thuộc tính hiển thị
scrollbar
– NORESIZE: không cho phép hiệu chỉnh kích thước frame
window
l Sử dụng các FRAMESET lồng nhau
3.FRAME
<html>
<head>
<title>A More Complex Framed Page</title> </head>
<FRAMESET ROWS="120,*>
<FRAME SRC="row1.html">
<FRAMESET COLS="75%,25%>
<FRAMESET ROWS="60%,40%>
<FRAME SRC="row2col1row1.html"> <FRAME SRC="row2col1row2.html">
</frameset>
<FRAMESET ROWS="100,*> <FRAME SRC="row2col21row1.html">
<FRAME SRC="row2col21row2.html"> </frameset>
</frameset>
<NOFRAMES>
This is what someone would see who does not have a web browser that can display
frames
</NOFRAMES>
</html>
3.FRAME
Bài tập: thiết kế các trang web có dạng FRAME sau
Trang 15l Cấu trúc một trang WEB thông thường theo dạng
FRAME
BÀI TẬP THỰC HÀNH
lThiết kế trang WEB theo FRAME
lThiết kế các trang WEB theo mẫu
lThiết kế hoàn chỉnh trang web đăng ký và
giới thiệu nhóm
Một số trang web mẫu
Trang 16Một số trang web mẫu
Một số trang web mẫu
Một số trang web mẫu
Trang 17Một số trang web mẫu
