Tài liệu học HTML cơ bản dành cho lập trình viên học lại từ đầuKhi bắt đầu làm quen với lập trình web thì HTML chính là nội dung đầu tiên mà bạn phải học, sau đó bạn sẽ kết hợp với CSS để tạo ra những sản phảm rất là độc đáo. Nghe nói thì hay nhưng bạn mới học nên có lẽ hơi mơ hồ phải không nào :D Ok trong serie này ta sẽ cùng nhau khám phá nhé.
Trang 1p a p
a p We
1.1 h n n
a I e e a a TCP/IP (Transmission Control Protocol/Internet Protocol) p
nh 1.1: Internet
W W e We p a I e e p a
p a p
Trang 2
p We a p
a e We e e
We e e p
a e
H nh 1.2: nh n h 1.2 h
a We
p
a a
p a
a p e p p e a a pp e
a a a We e
p , a e
e a a e theo
e p p p “ e ” :
<HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY> <H3>My first HTML document</H3> </BODY> </HTML> a e
Trang 3nh 1.3: K 1
1.2.1 HTML Development
trang e
e a We
a p a
nay, c I e e e ape a a
I e e p e a p
a a
p a
a a e p
a We a
p a a
a e a a a a e a e p a
a epa e
p a
a “ ” “ / ” ra
a
a
<HTML>
</HTML> p a
thay cho <HTML> a
<ELEMENT ATTRIBUTE = value>
Trang 4
Value : p
<BODY BGCOLOR = lavender> p “ a e e ”
p p a p “ a e e ” 1.2.2 C
p
p
<HTML> … </HTML> a a
a a a We
I I </TITLE> p a e e
a a We p a
p a p a
a e a
<HTML> <HEAD> <TITLE>Welcome to the world of HTML</TITLE> </HEAD> <BODY> <P>This is going to be real fun</P> </BODY> </HTML> nh 1.4: 2
Trang 5n
a
a p
a
<HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> <P>This is going to be real fun <P> Another paragraph element </BODY> </HTML> nh 1.5: 3
p
C h ng
a
:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<P>This is going to be real <BR>fun
<P> Another paragraph element
</BODY>
</HTML>
Trang 7nh 1.7: 5
1.2.3 ng h
p p a a
p a
p a
a a e a p a
<META name=”Author” content=”Graham Browne”> a “ a a e” p-equiv a
p a p
p p
p p
<META http-equiv=”Expires” content=”Mon, 15 Sep 2003 14:25:27 GMT”> s sinh ra m t ti u h i p TT nh sau : Expires: Mon, 15 Sep 2003 14:25:27 GMT a a
1.2.4 ng ng
a
p
h
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY>
Trang 8<CODE>If A > B Then <BR> A = A + 1
</CODE>
characters
</BODY>
</HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY>
<CODE>If A < B Then <BR> A = A + 1 </CODE>
characters
</BODY>
</HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY>
" To be or not to be ? " That
is the question
</BODY>
</HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY>
<P> William & Graham went to the fair
</BODY>
</HTML>
1.3 ng n
p
khi ta
p a a
1.3.1 h n
K a a
a e a a e a p
a
a
p
p
Trang 10a “ ”
We a a e e a a
p a I e e a e e a
World Wide Web { HYPERLINK "http://www.nameofsite.typeofsite.contrycode" }
a e e a te pe e a e e
{ HYPERLINK "http://www.google.com" } a e a p
“ p” p a I e e a a We
“ p e ” p a I e e a p e “ p” p
a FTP a
p a
p a
a a e a
a
– a I e e a a e a a
e { HYPERLINK "http://www.microsoft.com" } a
ương – p a
a a a a
a a
1.3.2 ng n
The anchor <A> tag is used to identify the text or image that will serve as the hyperlink in the HTML document The HREF (hypertext reference) parameter is used to specify the address or URL of the document or file that is to be linked a
a a a a
e
p p a
<A HREF = protocol://host.domain:port/path/filename>Hypertext</A> ,
a – a a ng : p – a
e e – p e e
Trang 12<BR><BR>
<P> This is document 2 This page is displayed when you click the hyperlink in Document 1
<BR><BR>
<A HREF= Doc1.html>Back Home</A>
</BODY>
</HTML>
nh 1.11: 7
a
e a e
e p p
a
ư ng n a e
C:\mydirectory\html examples\ Doc2.htm ư ng n ương a a a e e
e
<A REF= “ \Doc3.htm”>Next page</A> a a a
a a a p p
a
a p p
p
n n h n ng ng
neo <A> “ ” p a a
a a We
p a
Trang 13e “named anchor”
<A NAME = “marker”>Topic name</A>
to the Standard Generalized Markup Language (SGML) SGML is
a method for representing document formatting languages
</P>
<A name = Consistency>Unity and Variety</A>
<BR>
<P> A basic rule is that of unity and variety That
is, everything should fit together as a unit, but at the same time there is enough variety to keep things interesting Consistency creates and reinforces the unique identity of a site Colors, fonts, column layout and other design elements should be consistent throughout every section of the site
</BODY>
Trang 14“ ” p a a
a
Trang 16e- a a a a We
p p e- a a
mailto
<A REF=”mailto:thisperson@mymail.com”> 1.3.3 hư ng nh
e e
p a a
e a
a e e p p a
p
e e nh n nh – e
a a a a a a a
a a
e a
theo p a
nh 1.16: nh n nh nh h h n
We a a
“ ” a a a
nh 1.17: nh h h n
Trang 17 n nh – a
a e a a
a
a We a a
a p
C ng n – n a e a
a a
a a
ng a
a a
n trong a a
p a a a
a We e
Trang 18
Internet l a
a I p
WWW p a I e e a p
Web T a e
a
a a p a We p a web p a
p
p
e e a e e e
c nhau neo a
a a a a e
Trang 19n h
1
a _ p a I e e b a I e e _ c _ We
d _ e a
f _ p
g e a a e
h a _ i M p
2 a a a
a SGML l
b Tr
c p a
d
e
f p e e
g We h a p e e We i a p
Trang 20Layout
A web page is not a printed page That is, the guidelines that are applied to print may not apply to a web page Avoid making the reader scan too much of the screen while reading the page After a while it puts a strain on the eyes, and the reader may lose interest Text should
be contained within a few inches width
Linear layout
Linear layout follows a linear structure There is a sequential link between the pages Each page has a link to the previous and next page The last page has a link to the first page This format is used when you are presenting sequential information For example, chapters of a book or slides of a presentation which require the user to read the information in sequential order
Trang 21This page has been intentionally left blank