Tải bản đầy đủ (.pdf) (21 trang)

Session01 concepts HTML Bài 1.2 Từ Cơ Bản Đến Nâng Cao

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 (698.14 KB, 21 trang )

Chương 1

h

n

h







Internet
HTML
s
ETA>
h

“I e e ” “W

W e We ”

a
We

“We pa e”
I e e
W e We


W

e e

.
e
p

p

aI e e W
We e e
a

W e We

p
trang Web.
p

a

p

a

p

1.1


h

n

We

n

a I e e
TCP/IP (Transmission Control Protocol/Internet Protocol)

a

a

p

nh 1.1: Internet
W

W e We

p

aI e e

p

p
WWW




a
a
a
pe e
a e
a
WWW
We

a

p

a
e

a

p
a

We

WWW

e


p
a

We

{ PAGE }



p

We
e

a

a
We

p

e e

.
We

e e
a

H nh 1.2:

1.2

nh

n

p
e

h

h
a

We

p



a a



p

a

.....



a

p

e

p

p

e

a a

pp e
a
e
e

a a
p
a

We .

e

,


a
a

e

p p

e
theo
p“

:
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY>
<H3>My first HTML document</H3>
</BODY>
</HTML>
a

{ PAGE }

e

e ”


nh 1.3: K

1.2.1

1

HTML Development
trang
e
a

nay, c
I e e

p

a

We

p
e

a
I e e
p

a
a

e


ape

a

a

a
p

a

a

a e
a

We

p
a e

p

a
a

a

a
a


a

a

a

e

a e

epa
a

p
a

e





“ / ”

p
e

a


ra

a
a
<HTML>
. . .
</HTML>
p
thay cho <HTML>
a
<ELEMENT ATTRIBUTE = value>

a

{ PAGE }


Value :

p

<BODY BGCOLOR = lavender>
p
p p
1.2.2 C

a

p


“a e e”
“a e e”

p


p
<HTML> ….

</HTML>
a a


a
I

I

p
a a


We

a
p

p

a a We

</TITLE>.
e
e

a
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:

{ PAGE }

2



n
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>

{ PAGE }


nh 1.6:
Ch n

4

nh
a

a

p

a

a
p

We


a

a

a
a

a

Value

Description

Left

a

Center

a

Right

a

Justify

a

a


a

a
p
a
a

p
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY BGCOLOR=lavender>
<P align = right>This is good fun</P>
</BODY>
</HTML>

{ PAGE }

a


nh 1.7:

1.2.3

5

ng h

p

p

p

a

a

a
p

a

a a
e
a
p
<META name=”Author” content=”Graham Browne”>
a


p-equiv
p

a a

e”
a

p

a
p

a

p

p

p

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
1.2.4

ng

a

ng
a
p
h


(>)

>

<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY>

{ PAGE }


(<)

<

““

"

“&”

1.3

<CODE>If A > B
Then <BR> A = A + 1
</CODE>
<P> The above
statement

used
special
characters
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY>
<CODE>If A < B Then <BR> A = A + 1 </CODE>
<P>
The
above
statement
used
special
characters
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY>
" To be or not to be ? " That
is the question
</BODY>
</HTML>
<HTML>

<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY>
<P> William & Graham went to the fair
</BODY>
</HTML>

&

ng

n
p
khi ta
p

1.3.1

h

K

a

a

n
a


a
a

e

a

a

e

a

p
a

a


p




{ PAGE }

p





e



a

e



nh 1.8:

n
 L n

ng

n

p

ng

e
a

nh 1.9:
a
1.

2.

ng

a
p

p
a e

e

n

ng
a

n

e

e
.

ng

p
,

{ PAGE }



a
We
e



a



a

e

a

a
p

a

I e e

a

e

e a


World Wide Web.
{ HYPERLINK "trycode" }
a e
pe

e
e
e

a te
a e
{

HYPERLINK

"" }
a

“ p e”
a

p”

e a
I e e
a

p a
I e e


p a
FTP.

p
a

a We
p e
“ p”

p

a
p
p

a

a
a

a

e

a

a





a

I e e

a a
e a
a
{ HYPERLINK ""

e
}

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

{ PAGE }




p– a
 e e –

a
p

a
e e

ng :






p e –
p– a
a


e
e

Host.domain –
Port - C
p
pe e –
n


a
a

a

a

n nh ng
a

I e e

e

p

h
HTML

a

D
<HTML>
<HEAD>
<TITLE> Using links</TITLE>
</HEAD>
<BODY>
<BR><BR>
<P> This page is all about creating links to
documents.

<A HREF = Doc2.html>Click here to view document 2</A>
</BODY>
</HTML>

nh




6
p

a

a

e
7:
<HTML>
<HEAD>
<TITLE> Document 2</TITLE>
</HEAD>
<BODY>

{ PAGE }


<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

a
ư ng
n
a
C:\mydirectory\html examples\ Doc2.htm
ư ng

n ương
e

a

e


p

p

e
a

a

e

e

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>
a a

{ PAGE }



We
p

p
a

a


a


e “named anchor”
<A NAME = “marker”>Topic name</A>
p

neo

ta
REF= “#marker”>Topic name</A>

a

a
e
:
<HTML>
<HEAD>
<TITLE>Using Links</TITLE>
</HEAD>
<BODY>
<A HREF = #Internet>Internet</A>
<BR><BR>
<A HREF = #HTML>Introduction to HTML</A>
<BR><BR>
<A HREF = #Consistency>Unity and Variety</A>
<BR><BR>
<A name = Internet>Internet</A>

<BR>
<P> The Internet is a network of networks. That is,
computer networks are linked to other networks, spanning
countries and today the globe. The TCP/IP transfer protocol
provides the bindings that connect all these computers the
world over.
</P>
<A name = HTML>Introduction to HTML</A>
<BR>
<P> Hyper Text Markup Language is the standard
language that the Web uses for creating and recognizing
documents. Although not a subset of, it is loosely related
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>

{ PAGE }


</HTML>


nh 1.12:

nh 1.13:
n

n

nh

8

8

h

h

n

n

h

a






p

a

a
a

<HTML>
<HEAD>
<TITLE>Main document</TITLE>
</HEAD>
<BODY>

{ PAGE }




<A HREF=Chapter18.html#Internet>Internet</A>
<BR>
<BR>
<A HREF= Chapter18.html#HTML>Introduction to HTML</A>
<BR>
<BR>
<A HREF=Chapter18.html#Consistency>Unity and
Variety</A>
</BODY>
</HTML>

nh 1.14:


nh 1.15:
a

9

9

h

h

n

n

a

ng -mail

{ PAGE }


e- a
p p

a

a


e- a

a
a

mailto
<A REF=”mailto:”>
1.3.3

hư ng
e

nh

e
p
e





a
a
a e

a

e
p


p

p
e



nh
a

e

n nh –
a

a

e
a

a

a

a
e
theo

p


nh
We



h
a
a

nh

n nh

h n
a
a

nh 1.17:

{ PAGE }

a

a

nh 1.16:


a


a

nh

h

h n

a

a

We




n

nh –

a

a
e

a

a


a



a

We

a

a
a
 C

ng

p
n–n
a

a

e

a
a

a



a

ng

a
a



a

n

trong a
p

a
a

a
We

a
a

e

{ PAGE }



 Internet l


a

a

I

 WWW

p

p

aI e e



a

p

Web
 T

a

e




a





a

a



p



p
a

a

web.

p

We
a


p



p
e

e



a

e

e

e

c nhau


neo

a
a
e

{ PAGE }


a

a

a


n h
1.
a. _____________
b.

p

a

aI e e
I e e

_________.

c. _____________

We

d.

_____________.


e. ______
f.

a

_________

p

g. __________

e a

h.
i.

a

e

a _____________.
M

__________
a

2.

p
a


a

a. SGML l
b. Tr
c.

p

a

d.
e.
f.

p

e

g.
h.
i.

e

We
a

p e


e

We
a

p

{ PAGE }


h

h nh

1.

a

2.

We
a a

a


a

a


a a ap ”

a
a
a

Internet
The Internet is a network of networks. That is, computer networks are linked to other
networks, spanning countries. The TCP/IP transfer protocol provides the bindings that
connect all these computers the world over.
Layout
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.
Pathnames
Absolute pathnames specify the complete path to the file from the root directory. For
example, C:\mydirectory\ htmlexamples\Doc2.htm.
Relative pathnames specify the location of the file relative to the location of the current file.
For example, if the current directory is mydirectory, then the pathname will be“ \
” e pa e

{ PAGE }



This page has been intentionally left blank.

{ PAGE }



×