การสร้างเอกสารเว็บเพจด้วยภาษา HTML

HTML
Header
Body
Footer
2
Webpage
Header
Body
icon
Footer
email address (webmaster)
HTML
HTML
2

HTML tag
HTML Tag
HTML Tag
< (Left angle bracket)
Tag > (Right angle bracket )
head tag : <HEAD>

title tag : <TITLE>
body tag : <BODY>
tag

<>
HTML Tag
tag ( Paired tag)

tag tag ( tag
/ )
<Tag name> </Tag name>
<HTML> </HTML>
<HEAD> </HEAD>
tag
(Single tag)
tag
Tag
tag
<Tag name>
<BR>
<HR>
HTML
<HTML>
<HEAD>

<TITLE>

</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
HTML
HTML
<HTML> </HTML>

<HEAD> </HEAD>
HTML
<TITLE> </TITLE>

<TITLE> </TITLE>
title bar

<BODY></BODY>

Browser bookmark
Browser
tag
HTML
Browser

<HTML>
<HEAD>
<TITLE> My first homes page.
</TITLE>
</HEAD>
<BODY>
HELLO WORLD !
</BODY>
</HTML>
HTML
Tag HTML
< >

Tag
<title>
<TITLE>
<Title>
HTML

10


massage


11
HTML
12
(Line Break)
HTML tag
<BR>

<BR>

Burapha University <BR>
Wattananakorn <BR>
Sakaeo <BR>
13
(Paragraph Break)
HTML Tag <P>
<P> </P>

<P>
Uraiwan Kakulphimp
Burapha University
Sakaeo
</P>
14
(2)

Tag <
P> tag

tag attribute

<P ALIGN = Position>
Position

- LEFT

- RIGHT

- CENTER
<P ALIGN = CENTER> Burapha University </P>
15

tag <BLOCKQUOTE>

<BLOCKQUOTE> </BLOCKQUOTE>

This is the blockquote demo
<BLOCKQUOTE>
Department of Computer science,
Faculty of Science,
Burapha University .
Bangsaen ,
Chonburi.
20131
Thailand
</BLOCKQUOTE>
16
(Preformatted)
tag <
PRE>
tag
Browser
<PRE> </PRE>

<PRE> B U R A P H A
U N I V E R S I T Y
</PRE>
17
(Center)
tag <CENTER>

<CENTER> </CENTER>
<CENTER>
This is text with CENTER tag
</CENTER>
18
HTML
(Horizontal line) tag
<HR>

<HR>

The following is horizontal line
<HR>
The rest of this is just more text
19
tag
<HR>

<HR SIZE = n WIDTH = m

ALIGN = position NOSHADE>
SIZE = n 2 pixel
WIDTH = m
%
ALIGN = LEFT|RIGHT|CENTER

LEFT, RIGHT,
CENTER
NOSHADE

20

<HTML>
<BODY>
<HR SIZE= 40 WIDTH=50% ALIGN = LEFT>
<HR SIZE= 20 WIDTH=40% ALIGN = LEFT>
<HR NOSHADE SIZE= 10
WIDTH=50% ALIGN = LEFT>
<HR NOSHADE SIZE= 100 WIDTH=1% >
<HR NOSHADE SIZE= 80 WIDTH= 1% >
</BODY>
</HTML>
21
(Heading)

6 Tag
<H1> <H6>

<Hn> </Hn>

<H1> Burapha University </H1>
22
tag

2
1. Physical Character Styles

Fixed type style
2. Logical Character Style Browser
23
Physical Character style

(Bold)
<B> ...</B>
(Italic)
<I></I>
(Underline)

<U></U>

<BLINK>...</BLINK>
(Typewriter text)
<TT>.</TT>

<STRIKE>...</STRIKE>
<S>...</S>
24
Logical Character Style

<STRONG></STRONG>

<VAR>.</VAR>

<SUB>.</SUB>

<SUP>.</SUP>

<BIG>.</BIG>

<SMALL>.</SMALL>
25

attribute
ALIGN=LEFT | RIGHT | CENTER

<H1><P ALIGN=LEFT>
Dept. of Computer Science </P></H1>
<H2><P ALIGN=CENTER>
<H2><P ALIGN=RIGHT >
26
(Size)

1-7
7

<FONT SIZE = n >
</FONT>
n 1-7
<FONT SIZE = +/- n>

<BASEFONT SIZE = n>
<BASEFONT SIZE = 4>

Burapha University <BR>
<FONT SIZE = +2> Bangsaen Chonburi> </FONT> <B
27
Browser
Web page tag Font

<FONT FACE = name1, name2,>

<FONT
<FONT
<FONT
<FONT
FACE = AngsanaUPC> </FONT>

FACE = CordialUPC> </FONT>
FACE = DilleniaUPC> </FONT>
SIZE = 2 FACE = Courier> Burapha University</FONT> <BR>
28
(Color)
1.
2.
29

(0-9 A-F) 3

00-FF
(RED)
- 1
- 2 (GREEN)
(BLUE)
- 3

RGB (Red GreenBlue)

#RRGGBB
30
#FFFFFF
#0000FF
#000000
#4D4DFF
#7F7F7F
#CC3299
#FF0000
#00FF00
#FFFF00
31
tag <FONT>

<FONT COLOR = #RRGGBB >

<FONT COLOR = colorname >

<FONT COLOR = Red> This is Red color <BR>
<FONT COLOR = #0000FF> next is blue <BR>
<FONT COLOR = #00FF00> This is Green Color <BR>
32
tag <BODY>

<BODY TEXT = #rrggbb>

<BODY TEXT = colorname >

<BODY TEXT = Red>
<H1> This is testing Text Color </H1>
All text in this page is red color by body text = Red Text <BR>
33
(Special Character)
tag <BODY> </BODY>

< > &

(Name Entities)
ASCII Code
34
1.

& (Ampersand)
"
<
>
&

®
quotation mark ()
Less than (<)
greater than (>)
ampersand (&)
1
35
2. ASCII

&
#
ASCII

Symbol of Copyright is :© <BR>
Symbol of Registration is :® <BR>
36
(List)
HTML
(LIST)
<LIST TYPE>
<ITEM> First Item in List
<ITEM> Second Item in List
<ITEM> Third Item in List
</LIST TYPE>
38
(orderer Lists)

<OL TYPE = number_type START = number..>
<LI> Item number one
<LI> Item number two
<LI> Item number tree
</OL>

TYPE

39

<OL TYPE = a>
<LI> Oranges </LI>
<LI> Peaches </LI>
<LI> Grapes </LI>
</OL>

a. Oranges
b. Peaches
c. Grapes
40

<OL TYPE = I>
<LI> Oranges </LI>
<LI> Peaches </LI>
<LI> Grapes </LI>
</OL>

I. Oranges
II. Peaches
III. Grapes
41

<OL START = 3>
<LI> Oranges </LI>
<LI> Peaches </LI>
<LI VALUE = 7> Grapes
</LI>
<LI>Apples </LI>
</OL>
3. Oranges
4. Peaches
7. Grapes
8. Apples
42
(Unordered List)

bullet
TYPE <UL>
disc(), circle, square
<UL TYPE = bullet_type>

<LI> First Item
<LI> Second Item
<LI> Third Item
</UL>
43

These are name of CS Staff
<UL>
<LI>Seree Chinodom </LI>
<LI>Tawatchai Iempairoj </LI>
<LI>Jira Jaturanon </LI>
<LI>Surangkana Thumlikhit </LI>
<LI>Others </LI>
</UL>
44
Directory Lists
<UL>,</UL>
24
<DIR>
<LI> message </LI>

<LI> massage </LI>
<LI> message </LI>
</DIR>
45
Menu Lists
(Bullet) tag <UL>

<MENU>
<LI> message
<LI> massage
<LI> message
</MENU>
46
NESTED LISTS
<UL>
<LI> few New England states:
<UL>
<LI> Vermont </LI>
<LI> New Hampshire </LI>
</UL>
<LI> One Midwestern state:
<UL>
<LI> Michigan </LI>
</UL>
</UL>
47

HTML
HTML 2
1. Graphic Interchange Format (GIF)
CompuServe

64000 x 64000
8
256

2. Joint Photographic Experts Group (JPEG

JPG)
10:1
3 HIGH, MIDDLE, LOW
16.7
49
tag

>
<IMG SRC=
ALT=>
<IMG SRC=
GIF JPEG
ALT= SRC =

text mode

[IMAGE]
ALT =

<IMG SRC=rock.gif ALT=Rock Garden>
50
HTML
2
1) Left, Right
2) 3
top texttop
middle abdmiddle
baseline, bottom, absbottom
ALIGN
<IMG ALIGN=bottom>
51
WEB
ALIGN

<CENTER> ...</CENTER>

WIDTH= HEIGHT=
SRC
Ex.
<IMG SRC = building.gif WIDTH=100 HEIGHT=100>
52
WIDTH=50% WIDTH=150%
53
BORDER = n
n=0
n

VSPACE =n
HSPACE =n

<IMG VSPACE=10 HSPACE=30 SRC=building.gif>
54
WEB

LOWSRC=

<IMG SRC=rock.gif LOWSRC=rock.gif >
55
GIF Construction Set GIFCON

Alchemy Mindworks Inc.
Web

GIF

2

MS Internet Explorer
.AVI GIFCON
56
(Link)
HTML
(Link)
HTML 2
(Text Link)

(Graphic Link)

58
(Text Link)
tag Anchor HREF (Hypetext

REFerence)
<A HREF = > </A>

attribute style tag Anchor
<A HREF =
style=text-decoration:none> </A>
59

1.

>
<A NAME=
tag <A>
tag </A>
tag Anchor
2.
#
<A HREF =#> </A>
60

1.

.html > </A>
<A HREF =
.html#
> </A>
<A HREF =<
2.
URL
<A HREF =URL > </A>

<A HREF = http://www.yahoo.com> Yahoo Site </A>
61

LINK

ALINK

VLINK
<BODY BGCOLOR=#RRGGBB
LINK=# RRGGBB
VLINK=# RRGGBB
ALINK=# RRGGBB>
ALINK=
VLINK=

default LINK=

62

<BODY
BGCOLOR=#000000
TEXT=#F0F0F0
LINK=#FFFF00
VLINK=#22AA22
ALINK=#0077FF>
</BODY>
63

<IMG SRC= >
tag Anchor

<A HREF= URL >

<IMG SRC =
>
</A>
64

<HTML>
<HEAD><TITLE> Image Links </TITLE></HEAD>
<BODY>
<CENTER>
<H1> Image Links </H1>
<A HREF= http://www.microsoft.com>
<IMG SRC= IE.GIF > </A> <BR>
<A HREF=http://www.yahoo.com>
<IMG SRC = YAHOO.GIF> </A>
</CENTER>
</BODY>
</HTML>
Computer and Internet (310101)
65
mailto
<A HREF=mailto:username@hostname>

Address your comment or suggestions at
<A HREF=mailto:someone@buu.ac.th>
someone@buu.ac.th
</A>
66
Background
(Pattern) Background

BACKGCROUND =
tag BODY

>
<BODY BACKGROUND =
67
(Table)
HTML
Table (row) (col)

cell

Column
Cell
Row
69

<TABLE>...</TABLE>

cell

<TABLE BORDER=n></TABLE>

Cell

<TR>...</TR>
<TD>...</TD>
cell
<TH>...</TH>
<CAPTION
ALIGN=TOP|BOTTOM>
70
tag <TABLE>
<TABLE>
<TR> <TD> </TD>
<TD> </TD>
<TD> </TD> </TR>
<TR> <TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
..
</TABLE>
71
<TABLE>...</TABLE>
BORDER
<TABLE>
<TABLE BORDER= >
.
</TABLE>
72

<HTML>
<HEAD><TITLE> Table Demo </TITLE></HEAD>
<BODY>
</H1>
<H1> 2 x 2
<TABLE BORDER>
<TR> <TD></TD>
<TD> </TD></TR>
<TR> <TD></TD>
<TD></TD> </TR>
</TABLE>
</BODY>
</HTML>
73
WIDTH = x% tag
<TABLE> x

<TABLE WIDTH=x%>
HEIGHT = x% tag
<TABLE> x

<TABLE HEIGHT=x%>
74
cell
2
LEFT,RIGHT,CENTER

TOP, BUTTON, MIDDLE
tag <TR>

ALIGN=
VALIGN=
<TR ALIGN = VALIGN=>

<TD></TD>
</TR>
75
ROWSPAN

ROWSPAN
tag <TD>

<TABLE BORDER>
<TR> <TD>Item1</TD>
<TD ROWSPAN=2>Item2</TD>
<TD>Item3</TD> </TR>
<TR> <TD>Item4</TD>
<TD >Item5</TD> </TR>
</TABLE>
76
COLSPAN

COLSPAN

tag <TD>

<TABLE BORDER>
<TR> <TD>Item1</TD>
<TD COLSPAN=2>Item2</TD> </TR>
<TR> <TD>Item3</TD>
<TD>Item4</TD>
<TD >Item5</TD> </TR>
</TABLE>
77
CELLPADDING

CELLPADDING

cellpadding 0

78
CELLSPACING

CELLSPACING
cellspacing 0

79

>
<IMG SRC =

WIDTH=x% HEIGHT=y%
<IMG>
80

การสร้างเอกสารเว็บเพจด้วยภาษา HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

การสร้างเอกสารเว็บเพจด้วยภาษา HTML

Загружено:

Авторское право:

Доступные форматы

HTML

email address (webmaster)

head tag : <HEAD>

tag ( Paired tag)

HTML Tag <P>

<P ALIGN = CENTER> Burapha University </P>

(Horizontal line) tag

<HR SIZE = n WIDTH = m

Physical Character style

Logical Character Style

<FONT SIZE = +/- n>

<BASEFONT SIZE = 4>

FACE = AngsanaUPC> </FONT>

tag <BODY> </BODY>

Less than (<)

greater than (>)

<UL TYPE = bullet_type>

<LI> message </LI>

(Bullet) tag <UL>

2. Joint Photographic Experts Group (JPEG

GIF Construction Set GIFCON

tag Anchor HREF (Hypetext

<A HREF = > </A>

<A HREF =#> </A>

<A HREF= URL >

Computer and Internet (310101)

Table (row) (col)

<TR ALIGN = VALIGN=>

Вам также может понравиться