WebCourse - HTML căn bản
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (211.61 KB, 17 trang )
BÀI 3
THIẾT KẾ TRANG WEB
Khoa CNTT – ĐH KHTN
Nội dung
Giới thiệu về HTML
HTML – Cơ bản
Frame
1.
2.
3.
1. Giới thiệu về HTML
l
l
l
l
HTML (Hyper Text Markup Language - Ngôn ngữ
đánh dấu siêu văn bản)
Là một ngôn ngữ dùng để xây dựng một trang Web.
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.
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.
1
1. 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
1. Giới thiệu về HTML
Browsers và Editors
l
Browsers
–
–
l
Netscape's Navigator
Microsoft's Internet Explorer
Editors
–
–
–
Microsoft FrontPage
Macromedia Dreamweaver
Notepad
1. Giới thiệu về HTML
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>
2
1. Giới thiệu về HTML
Thẻ (tag) HTML – Đổi thuộc tính
1. Giới thiệu về HTML
Thẻ (tag) HTML – Đổi thuộc tính
Mã HTML
<b> Đây là một dịng được in đậm </b>
Mức tiêu đề 3
Mã HTML
Hiển thị
Đây là một dòng được in đậm
Mức tiêu đề 3
Hiển thị
<Font FACE=’Arial’ Size=3>
Hello
Hello
</Font>
- 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
2. HTML – Cơ bản
Cấu trúc một tài liệu HTML
l
l
l
The HTML section
The Header section.
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>
3
2. HTML – Cơ bản
Cấu trúc một tài liệu HTML
l
l
l
l
<html> </html> : định nghĩa phạm vi của
văn bản HTML
<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
<title> </title> : mô tả tiêu đề trang web.
<body> </body> xác định vùng thân của
trang web, nơi chứa các thông tin.
2. HTML – Cơ bản
Các tag HTML cơ bản
l
Ðịnh dạng văn bản
Block-level elements
–
–
–
–
l
Headers (H1 to H6)
Paragraphs (P)
List Items (LI)
Horizontal Rules (HR).
Inline or text level elements
–
–
–
EM, I, B and FONT (character emphasis)
A (hypertext links)
BR (line breaks)
2. HTML – Cơ bản
Các tag HTML cơ bản
l
HEADING
<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>
</HEAD>
<BODY>
<H1>Introduction to HTML</H1>
<H2>Introduction to HTML</H2>
<H3>Introduction to HTML</H3>
<H4>Introduction to HTML</H4>
<H5>Introduction to HTML</H5>
<H6>Introduction to HTML</H6>
</BODY>
</HTML>
4
2. 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>
2. HTML – Cơ bản
Các tag HTML cơ bản - <HR>
l
HORIZONTAL RULES
l
<HR ….>
–
Attributes
l
l
l
l
align
Width
Size
Noshade
Ø
Ø
2. HTML – Cơ bản
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>
5
2. HTML – Cơ bản
Các tag HTML cơ bản–Định dạng
l
l
l
l
l
l
l
l
l
<B> 1 </B>
<I> 2 </I>
<U> 3 </U>
<BIG> 4 </BIG>
<SMALL> 5 </SMALL>
<STRIKE> 6 </STRIKE>
<SUP> 7 </SUP>
<SUB> 8 </SUB>
<CENTER> 9 </CENTER>
2. HTML – Cơ bản
Các tag HTML cơ bản–Định dạng
l
<EM> 1 </EM>
<STRONG> 2 </STRONG>
<DFN> 3 </DFN>
<CODE> 4 </CODE>
<KBD> 5 </KBD>
<VAR> 6 </VAR>
<CITE> 7 </CITE>
<BLINK> 8 </BLINK>
<DEL> 9 </DEL>
l
<INS> 0 </INS>
l
l
l
l
l
l
l
l
2. HTML – Cơ bản
Các tag HTML cơ bản–<PRE>
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>
BGPROPERTIES=FIXED>
Ban co the xuong dong
va cach khoang trang thoai
mai
</pre>
</FONT>
l
6
2. HTML – Cơ bản
Các tag HTML cơ bản–Kí tự đặc biệt
l
Greater than (>)
l
Less than (<)
–
–
l
@
–
l
&
Space
–
l
"
Ampersand (&)
–
l
<
Quotes (“)
–
l
>
©
®
–
®
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
l
Ảnh nền trang Web
<BODY BACKGROUND=“path/clouds.gif">
Scrolling
2. HTML – Cơ bản
Thêm Sound
l
l
<BGSOUND SRC="path\sound filename">
<BGSOUND src="batman.mid“ LOOP=“1”>
–
–
Nhạc nền trang Web (MIDI)
Loop = “-1” : lặp vô hạn
7
2. HTML – Cơ bản
HyperLink - <A>
Chèn liên kết cho 1 đoạn văn bản hay hình
ảnh
<A href=“URL”> hypertext </A>
l Có 2 loại liên kết
l
–
–
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>
l
Tạo liên kết nội và liên kết
–
Đánh dấu vị trí liên kết nội
–
Tạo liên kết nội
<A NAME=“Chapter1”> Chapter 1</A>
<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
Hypertext</A>
/ : vị trí thư mục gốc của website
–
Địa chỉ tương đối
Là vị trí tương đối so với trang web sử dụng link
.. : quay ra thư mục cha
VD: trong file A.HTM có hyperlink
<A HREF=“../../PPA/B.htm”> Liên kết đến trang B </A>
l
l
l
Liên kết email
<A HREF=“mailto:>TDDuan</A>
8
2. HTML – Cơ bản
HyperLink - <A>
<html>
<head>
<title>My web</title>
</head>
<body>
Đây là trang Web đầu tiên tôi
<hr align="left" color ="Red">
<a name="anh">ve chu tho">
hspace="20" vspace="20" alt="Anh
</a>
Đây là một bức ảnh có kích thu ớc 100 x 90
Có viền xung quanh (boder =1 và vspace,hspace = 20)
Text thay th ế là " Bức ảnh về chú thỏ "
Canh lề trái
Bạn hãy thiết kế thử xem !!!
<a href="#anh">Trở
<hr color="red">
Liên hệ
</html>
về hình vẽ !</a>
href="mailto:"></a>
2. HTML – Cơ bản
HyperLink - <A>
l
Thuộ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>
9
2. 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">
"URL">
"URL">
....
</MAP>
l
Sử dụng trong ảnh
<img src = "hinhanh.jpg" usemap = "#map_name">
2. HTML – Cơ bản
HyperLink – Liên kết đa hình ảnh
<map name="Dalienket">
coords="0, 0, 100, 100">
coords="0,100, 100,200">
coords="100, 0,200, 100">
coords="100,100, 200,200">
</map>
usemap="#Dalienket" width="200"height="200">
2. HTML – Cơ bản
Chuyển hướng trang web tự động
l
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>
10
2. HTML – Cơ bản
Bảng biểu - <TABLE>
l
l
<TABLE>: định dạng bảng. Mỗi ơ là 1 cell
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>
<TH> Dòng 2 </TH>
</TR>
<TR>
<TD>Dòng 1.1 </TD>
<TD>Dòng 1.2 </TD>
</TR>
<TR>
<TD>Dòng 2.1 </TD>
<TD>Dòng 2.2 </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>
<TH> Dòng 2 </TH>
</TR>
<TR>
<TD>Dòng 1.1 </TD>
<TD>Dòng 1.2 </TD>
</TR>
<TR>
<TD>Dòng 2.1 </TD>
<TD>Dòng 2.2 </TD>
</TR>
</TABLE>
11
2. 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>
<TH align=”center”> Dòng 2 </TH>
</TR>
<TR>
<TD align=”left”>Dòng 1.1 </TD>
<TD align=”right”>Dòng 1.2 </TD>
</TR>
<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
12
2. 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
l
l
Mỗi cửa sổ chứa 1 URL ứng với 1 trang web
Hiển thị độc lập nhau
Cửa sổ = FRAME
3.FRAME
l
l
l
<FRAMESET>: định nghĩa cách tổ chức các
frame
<FRAME>: định nghĩa chi tiết từng frame
thuộ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”
–
–
13
3.FRAME
l
thuộc tính của <FRAME …>
–
–
–
–
–
–
l
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
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>
</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
14
3.FRAME
l
Cấu trúc một trang WEB thông thường theo dạng
FRAME
BÀI TẬP THỰC HÀNH
l
l
l
Thiết kế trang WEB theo FRAME
Thiết kế các trang WEB theo mẫu
Thiết kế hoàn chỉnh trang web đăng ký và
giới thiệu nhóm
Một số trang web mẫu
15
Một số trang web mẫu
Một số trang web mẫu
Một số trang web mẫu
16
Một số trang web mẫu
17
