bài giảng html căn bản chi tiết cho người mới học
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 (1.4 MB, 58 trang )
Khoa CNTT – ĐH.KHTN
Bi 3
Thiết kế trang Web – HTML Căn bản
! " #
$%&'$(#)*
+,-((+
+./0
1203(#
40566780(#
966 *
96/:96
8;
<*
$%&'$(#)*
+,-((+
+./0
1203(#
40566780(#
966 *
96/:96
8;
<*
$%&'$(#)*
+,-((+
1203(#
(#=(>?#00@,+AB9/40:;0)*
C.A/DBE?F>/GC.H
I696JBK/LBE96/0>696BEEKC.
H
#.MNOC6PJ6Q'
$
RA8067M=)*SFCS*HHH@
$
96<=@(#/DBEBK/LC*696I6696/A80;EK;/0>H
$%&'$(#)*
+,-((+
1203(#$/0>S:L*
Trình duyệt web (Browser) Trình soạn thảo (Editor)
Notepad
Notepad++
Visual Studio .NET
$%&'$(#)*
+,-((+
1203(#$<=@(#
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
</BODY>
</HTML>
(EKQ/TUV
$%&'$(#)*
+,-((+
1203(#$<=@(#
<b> Dòng chữ này được in đậm </b>
WCXYDữ liệu WBPY
;80CQZ2
$
!Q/T'B[%8/SI[U86SP[\
-6JBP
<br>, <hr>
5960
W]1;^0.6^Q_`9^KabbHHYRA80Wc]1Y
$
!Q/T'
$
W/Y0CR0Wc/Y
$
W//_d?Rd:>8_d68'edY0CR0Wc/Y
$%&'$(#)*
+,-((+
1203(#$<=@(#H59
Mã HTML Hiển thị
WY-F>8C./fBZ6-CWcY
W&Y#I66AX;0B3&Wc&Y
Đây l một dòng được in Đậm
#I66AX;0B3&
Mã HTML Hiển thị
Wgh]V_`]8aij_`&aY
(88
WcgY
Hello
Lưu ý :
k
Giá trị Thuộc tính của Thẻ nên đặt trong dấu nháy đơn hoặc nháy kép
k
Không phân biệt chữ HOA và thường
k
Bỏ qua các khoảng trắng thừa và các dấu ngắt dòng, xuống dòng
$%&'$(#)*
+,-((+
1203(#$<=@(#H59
0l'96;8O00>Bm
$%&'$(#)*
+,-((+
1203(#$<=@(#H!Q/T
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
</BODY>
</HTML>
$%&'$(#)*
+,-((+
+./0
1203(#
40566780(#
966 *
96/:96
8;
<*
$%&'$(#)*
+,-((+
405680(#
<html>
</html>
<body>
</body>
<head>
</head>
Bắt đầu và Kết thúc của
trang HTML
Bắt đầu và Kết thúc của
trang HTML
Phần đầu trang HTML
Phần đầu trang HTML
Nội dung trang HTML
Nội dung trang HTML
<title>Tiêu đề </title>
Nội dung 1 Nội dung
2 Nội dung 3
$%&'$(#)*
+,-((+
405680(#
WC8YWcC8Y'-K"LC67)*(#
W/YWc/Y'-K"696C*3(#H>BZ6EK;
M
W8YWc8Y'#*;0B3M
<body></body> : n96BKDF67MS 6I696
$%&'$(#)*
+,-((+
405680(#$!Q/T
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
</BODY>
</HTML>
$%&'$(#)*
+,-((+
+./0
1203(#
40566780(#
966 *
96/:96
8;
<*
$%&'$(#)*
+,-((+
96 *
96?o8l)*
*
FC
$%&'$(#)*
+,-((+
96?o8l)*$mS60p)*
96<BK/Lm)*
$
;0B3=(/@'
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
$
-L)*=\@'
<p>
$
R:96=:UC:@'
<li>
$
-N<=(j8q08:@'
<hr>
96<BK/L60p)*
$
-K/L6A'
<em>, <i>, <b> và <font>
$
L:;08;'
<a>
$
n0m/f'
<br>
$%&'$(#)*
+,-((+
96?o8l)*$!Q/T3(/
HEADING
<HTML>
<HEAD>
<
TITLE>
Introduction to HTML
</TITLE>
</HEAD>
<BODY>
<H1>
Introduction to HTML - H1</H1>
<H2>
Introduction to HTML - H2</H2>
<H3>
Introduction to HTML - H3</H3>
<H4>
Introduction to HTML - H4</H4>
<H5>
Introduction to HTML - H5</H5>
<H6>
Introduction to HTML - H6</H6>
</BODY>
</HTML>
$%&'$(#)*
+,-((+
96?o8l)*$!Q/T3\
PARAGRAPH - <P>
<html>
<head>
<title>
Welcome to HTML
</title>
</head>
<body bgcolor=‘lavender’>
<h3>
My first HTML document
</h3>
<p>
This is going to be real fun
<h2>
Using another heading
</h2>
</p>
<p align=‘center’>
Another paragraph element
</p>
</body>
</html>
$%&'$(#)*
+,-((+
96?o8l)*$!Q/T3\
HORIZONTAL RULES
<HR …>
$
0.6Q'
•
8'BN<:2M
•
M/'30/BN<
•
:j'%3.67BN<
•
:/'6PP
<HR noshade size=‘5’ align=‘center’ width=‘40%’></HR>
<HR size=’15’ align=‘right’ width=‘80%’></HR>
$%&'$(#)*
+,-((+
96?o8l)*$!Q/T-K/L6A
-K/L
<b>
:?:8/
</b>
<strong>
:?::
</strong>
<big>
:?:
</big>
<em>
:?:C:j/
</em>
<i>
:?:86
</i>
<small>
:?::C88
</small>
:?6:
<sub>
</sub>
:?6:?
<sup>
</sup>
_?
$%&'$(#)*
+,-((+
96?o8l)*$!Q/T-K/L6A
-K/L
<EM>
C0i66:
</EM>
<STRONG>
C0i66:
</STRONG>
<DFN>
C0i66:
</DFN>
<CODE>
C0i66:
</CODE>
<KBD>
C0i66:
</KBD>
<VAR>
C0i66:
</VAR>
<CITE>
C0i66:
</CITE>
<BLINK>
C0i66:
</BLINK>
<DEL>
C0i66:
</DEL>
<INS>
C0i66:
</INS>
$%&'$(#)*
+,-((+
96?o8l)*$riUr12WY
(EKB5/L)*Bs:L*=*tS?0m/fSSb@
V= d>:
<FONT SIZE=4>
<pre>
%6?0/
66C
</pre>
</FONT>
$%&'$(#)*
+,-((+
96?o8l)*$lGBu6
C:EK696l0Bu6v
R40WSYSw
R409>xy
96lGBu6'z{
bb
$%&'$(#)*
+,-((+
96?o8l)*$R:96lGBu6
Result Description Entity Name Entity Number
d |0C w|0} we&~}
w C:/ wC} we&•}
W 8::, w8} we€}
Y , w} we€}
-EKBZ6
Cs(# I8'
W0Yd60d
w8}0w}w:}w:}w:}w:}w|0}60w|0}
