Html

ก กF
กก F
ก F

F (text file)
F HTML (HTML tag)
ก
ก ก browser
( F Internet Explorer, Netscape Navigator Opera
F )

6

ส่ วนประกอบของเว็บเพจ
ข้ อความ (text)
คือข้ อความต่ างๆ ทีพิมพ์ จากแปนพิมพ์ ลงไปในแฟม
้ ้
เว็บเพจ
แฟมภาพ (image)
้
เป็ นส่ วนทีช่ วยเสริมเนือหาทีเป็ นข้ อความ ให้ เกิดความ
ชัดเจน เข้ าใจ และน่ าสนใจมากขึน
แบ่ งออกเป็ น
ภาพนิง
ภาพเคลือนไหว 7

F ก
F (link) / F F (hyperlink)
F F F FF F
( F Word,
PowerPoint, Excel, PDF F )
ก F F Fก F
ก F F F ก F
ก F

8

HTML
-> Hyper Text Markup Language

ก (link) F
F F Fก ก F F
ก ก

HTML (Multimedia) F F
ก F ก
9

F ก ก F F F Notepad F กF F ก
file ก htm html

10

ก F 2 F F
F ก ก F ก F HTML Tag

F < > F <HTML> <BODY> ก F Tag
</ > F F
<HTML>...</HTML> <BODY> </BODY> F

F ก

11

ก F Fก HTML ก F Text Editor HTML Editor F ก
ก Text F ก F F ก Notepad
ก ก ก HTML F ก F ก .html .htm
Web browser F
ก HTML F Folder ก F F Fก F
F F F F ก F FกF FF

HyperText Markup Language
script F Web page ก World Wide
Web
ก Berners-Lee ก ก F European Center for
Particle Physics (CERN)
F ก F F FF F 24 . .
F F F F ก F
(Platform) F

HTML

1. Text F
2. Tag , Element F
ก ก Text
3. Attribute ก HTML
F F

15

ก ก F HTML

F F F < > F
F ก F ก Fก F F
ก
F ก HTML F Fก
F ก ก ก F
16

ก F (Comment)

ก F F HTML
F ก ก
Comment F Browser
ก F ก HTML F F
<!- F ->

17

ก HTML F F F (Tags.)
<HTML> F F </HTML>
<HTML>
..
</HTML>

18

ก ก HTML F HEAD tag
กF F Head ก

<HTML>
<HEAD>
...
</HEAD>
</HTML>

19

HEAD tags ก F
Home Page F TITLE tag
<HTML>
<HEAD>
<TITLE> .</TITLE>
</HEAD>
</HTML>

20

F F ก F F
BODY tags. F F ก HEAD tags.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
.
</BODY>
</HTML> 21

Attribute <BODY>
A ttrib u te F
L IN K ก L ike
BGCOLOR ก Fก Fก
TEXT ก Fก ก
BACKGROUND ก F

22

Page กก
<HTML>
<HEAD>
<TITLE>My First Page.</TITLE>
</HEAD>
<BODY>
Hello.........World.
</BODY>
</HTML>
23

F F ก
<BODY>
ก
</BODY>

24

F F F F
<BODY BGCOLOR="#FF0000">
ก
</BODY>

25

F Background F F
<BODY BACKGROUND= bgg.gif">
ก
</BODY>

26

ก F F
<BODY BGCOLOR="#FFFFFF">
ก
</BODY>

27

ก ก F F Tag <Hn>

<Hn> </Hn>
n= F F <h1> .</h1>
F n F F 1- 6 ก ก F

28

<h1> F </h1>
<h2> F </h2>
<h3> F </h3>
<h4> F </h4>
<h5> F </h5>
<h6> F </h6>

29

ก ก

Bold/Italic ก F F F F <B> .</B>
F <I> ..</I>

Underline F ก F F F <U> </U>

Superscript / ก F ก ก F <SUP> .</SUP>
Subscript ก F ก F F <SUB> </SUB>

30

ก ก (Bold)
ก <B> </B>
</BODY>

31

ก ก (Italics)
ก <I> </I>
</BODY>

32

ก ก F F (Underlining)
ก <U> F F</U>
</BODY>

33

F Tags F ก F F ก
ก <I><B> </B></I>
</BODY>

34

ก F Tags ก F
FกF Fก
F F กF
<กF >< ></กF ></ > กก
<กF >< ></ ></กF > ก กก

35

ก (Font) F F ก F
ก F <FONT> tags...
ก <FONT> </FONT>
</BODY>
ก ก F F SIZE
ก <FONT SIZE=6> </FONT>
</BODY>
36

ก 7
1-teeny tiny
2-small
3-regular
4-extra medium
5-large
6-real big
7-yelling!
37

ก ก Font F
ก <FONT
FACE="ARIAL">ARIAL</FONT>
</BODY>

38

F Font กก F 1 F
Tags <FONT> F F Font

Browser F Font ก F Font
F F F Browser F Default Font
<FONT FACE="ARIAL, HELVETICA,
LUCIDA SANS"> Font
</FONT> 39

ก
ก <FONT
COLOR="#FFOOOO"> </FONT>
</BODY>

40

F ATTRIBUTE <TAG>...
ก
<FONT COLOR="#FF0000"
FACE="ARIAL" SIZE="7">Font</FONT>
</BODY>

41

ก <U><I><B><FONT
COLOR="#FF0000" FACE="ARIAL"
SIZE="7">Font</FONT></B></I></U>
</BODY>

42

ก Browser

F ก
F ?
</BODY>

43

F F Tags <BR>
ก ก F F
<BR>
<BR>
F ก <BR>
F ?
</BODY>
44

ก Browser.
</BODY>

45

F F F F (Space) F  
      
     ก
     &nbsp
;    
Browser.
</BODY>
46

Special Character ; F
  ( non-breaking space)
< (< less-than symbol)
> (> greater-than symbol)
& (& ampersand)
" (" quotation mark)

47

ก F F ก
<BR>
 <BR>
 <BR>
 <BR>
ก
</BODY>
48

F ก "Horizontal Rule."
<HR>
</BODY>

49

การกําหนดความกวาง WIDTH
-ก % Windows
-ก Pixel

50

<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>
51

ก ก F F
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</BODY>

52

ก Thickness... F
<HR WIDTH=60% SIZE=1>
</BODY>
53

ก F Solid Line. F F
<HR WIDTH=60% SIZE=1 NOSHADE>
</BODY>
55

ก ก F tag <p> <pre>

<p> ..</p> F ก F F
F

<pre> </pre> F ก
F F F F

57

<HTML>
F ก F F
<HEAD>
F <p> <TITLE>Testing Tag</TITLE>
</HEAD>
<BODY>
<p>
ก <br>
F html
</p>
<p>
<br>
ก ก F<br>
F F
</p>
</BODY>
</HTML>
58

<HTML>
F ก F F <HEAD>
F F <TITLE>Testing Tag</TITLE>
</HEAD>
<BODY>
<p align=center>
ก <br>
F html
</p>
<p align=right>
<br>
ก ก F<br>
F F
</p>
</BODY>
</HTML>
60

<HTML>
F ก <HEAD>
<TITLE>Testing Tag</TITLE>
F F <pre> </HEAD>
<BODY>
<p >
ก
F html
</p>
<pre >

ก ก F F F
</pre>
</BODY>
</HTML>
62

ก ก F File F
<IMG> (image) tag.
<IMG>
</BODY>

64

ก ก
<IMG SRC="copper.gif" WIDTH=82
HEIGHT=68>
</BODY>

65

ก ก F ก F BORDER

<img src= duck.gif border=2 >

ก ก F F Alternative

<img src= duck.gif border=2 alt= >
66

ก F Align

Align=left ก F ก
F F
Align=right ก F ก
F

67

ก F ก F F Align

Align=Top ก F F

Align=Middle ก F Fก
F
Align=botton ก F F
68

ก ก ก F Vspace,Hspace
Vspace = F ก ก
F
Hspace = F ก
F F
F
<img src= duck.gif vspce=100 hspace=200>
69

ก List ORDERED List.
UNORDERED List.

F ORDERED F UNORDERED
1 1 1
2 2 2
3 3 3
4 4 4

70

Un Order Lists
F ก F Bullet F <UL>

F ก TYPE ก <UL> F
<UL TYPE=DISC> ก Bullet F ก
<UL TYPE=CIRCLE> ก Bullet F ก
<UL TYPE=SQUARE> ก Bullet F

71

ก
<UL>
<LI> 1
<LI> 2
<LI> 3
<LI> 4
</UL>
</BODY>
72

List Unordered List

73

Order Lists
F ก F ก
F <OL>
F ก TYPE ก <OL> F
<UL TYPE=A> F A , B , C , D , ...
<UL TYPE=1> F 1 , 2 , 3 , 4 , ...
<UL TYPE=I> F I , II , III , IV , ...

74

ก ก F Order List
SKIP F ก ก F <Li skip=3>
F F ก ก ก3 ก ก
F
START Fก F F F <OL type=a start=2> F
ก ก 2( B)
Value F F F ก F ก

75

ก
<OL>
<LI> 1
<LI> 2
<LI> 3
<LI> 4
</OL>
</BODY>
76

List Ordered List

77

F ก F
F
<MARQUEE ก> </MARQUEE>
ก F กF
BEHAVIOR = ก ก F กF
SCROLL,SLIDE,ALTERNATE
DIRECTION = ก F กF LEFT,RIGHT
WIDTH/HEIGHT= ก
LOOP= 78

<html>
<body>
<marquee behavier=slide width=80% direction=right
bgcolor=#ff0000>
F
</marquee>
</body>
</html>
79

ก F ( TABLE )

<TABLE>
<CAPTION> F </CAPTION>
<TR><TH></TH><TH>----</TH></TR>
<TR><TD></TD><TD>----</TD></TR>
---
<TR><TD><TD/><TD>----</TD></TR>
</TABLE>
80

< BODY>
ก F ( TABLE )
<TABLE>
<CAPTION> ก F </CAPTION>
<TR><TH> 1</TH><TH> 2</TH></TR>
<TR><TD>TV</TD><TD>CARD</TD></TR>
<TR><TD>VDO</TD><TD>TOY</TD></TR>
</TABLE>
< /BODY >
81

ก Fก

<TABLE BORDER="number">
---
---
</TABLE>

83

< BODY>
ก Fก
<TABLE BORDER="10">
<CAPTION> ก F </CAPTION>
<TR><TH> 1</TH><TH> 2</TH></TR>
</TABLE>
< /BODY >
84

F

ก ก F F
F ก F
<TD>.....</TD> ก

86

<TD>
<TABLE BORDER="10">
<TR><TH> 1</TH><TH>
2</TH></TR>
</TABLE>
</TD>
87

ALIGN F
WIDTH
COLSPAN F F
ROWSPAN F

89

ก F Link.
<A href= F ก >
. F / .
</a>
<A HREF= Main.html"> COMPUTER-
HTML</A>
</BODY> 90

F ก Link ... URL
<A HREF=" URL F ก "> F
F Link</A>
Go to <A
HREF="http://Comsc.rilp.ac.th">COMPUTE
R-HTML</A>
</BODY> 92

F Link F F E-Mail
Mail to Me :
<A
HREF="mailto:pakawatk@hotmail.com">pak
awatk@hotmail.com</A>
</BODY>
93

F Link ก F
Go to
<A HREF="http://Comsc.rilp.ac.th">
<IMG SRC="copper.gif" WIDTH=82
HEIGHT=68>
</A>
</BODY>
94

F F F
Go to
<A HREF="http://Comsc.rilp.ac.th"><IMG
SRC="copper.gif" WIDTH=82 HEIGHT=68
BORDER=0></A>
</BODY>
95

ก F ก Link ก

<A name F > F </a>

F
<A name= top > </a>

96

ก F ก ก กก LINK
<A href= ก target= Option > F </a>

_BLANK F
_PARENT
_TOP F
NAME FRAME
97

ก F FRAME SRC
<HTML>
<HEAD><TITLE>....................</TITLE></HEAD>
<FRAMESET ROWS[COLS]="number %">
<FRAME SRC= F F ก URL>
<FRAME SRC= F F ก URL>
</FRAMESET>
</HTML>
...ROWS= F ,COLS= F

98

<HTML>
<HEAD>
<TITLE>ก F ( FRAME )</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*">
<FRAME SRC="logo.html" >
<FRAME SRC="main.html">
</FRAMESET>
</HTML> 99

<HTML>
<HEAD>
<TITLE>ก F ( FRAME
)</TITLE></HEAD>
<FRAMESET COLS="20%,*">
<FRAME SRC="menu.html" >
</FRAMESET>
</HTML> 101

<FRAMESET COLS="100,600">
<FRAME SRC="menu.html" >
<FRAMESET ROWS="20%,*">
<FRAME SRC="logo.html" >
</FRAMESET>
</FRAMESET>
103

ก F F F
<FORM> F ก F F

<FORM Attributes>
.. F FORM ..
</FORM
105

Attribute F F ก <FORM> F กF
ก
ACTION F Script Server ก F
ก F F F F F
Form
METHOD = GET F ก ก Form F F F ก F
POST ก Script ก
Server F ก F2
- GET ก F F F F

- POST F F Server กก
Transaction 106

F ก F F

<FORM METHOD="POST" ACTION="output.php">
..
</FORM>

107

<TEXTAREA> ก F
(Free Form)
<TEXTAREA Attributes>
. Default Text .
</TEXTAREA>
Atteibute F F กF
- NAME ก Fก F
- ROWS ก F ก F Form
- COLS ก ก F ก F Form
- Default Text F F F TEXT108

F ก F TEXTAREA

<TEXTAREA NAME="text" ROWS="5" COLS="30">
.. ก F ...
</TEXTAREA>
</FORM>

109

<INPUT> F F F 1

Text <INPUT Attributes>
Attribute F <INPUT>
- Text F F F F F F
- NAME ก Fก F
- SIZE ก F F ก F
- MAXLENGTH ก ก F
- VALUE ก F F F F F F F
- CHECKED ก F ก ก ก FF F(
Checkbox Radio Button F ) 111

- TYPE ก F F กF
Text F
Password F F *
- Radio Button ก ก
Checkbox ก
Reset F
Submit F F
IMAGE Submit F F

112

F ก F Input Type Text Password

USER <INPUT TYPE="text" NAME="user"><BR>
PASSWORD <INPUT TYPE="password">
</FORM>

113

F ก F Input Type Check Radio
F <BR>
<INPUT TYPE="checkbox" NAME="c1" value=0>
<BR>
<BR>
<INPUT TYPE="radio" NAME="r1" value=0>
<INPUT TYPE="radio" NAME="r3" value=2> F F
</FORM>
115

F ก F Input Type Reset Submit

<INPUT TYPE="reset" value=" ก กก
F "><BR><BR>
<INPUT TYPE="submit" value=" F F ">
</FORM>

117

<SELECT> F ก FF F ก
Drop-down List F Fก <OPTION>
<SELECT Attributes>
<OPTION Attributes> Text1
..
<OPTION Attributes> Text n
</SELECT>
Attributes Fก <Select> F กF
- NAME ก Fก F
- SIZE ก ก F ก
- MULTIPLE F ก F 119

Attributes Fก <OPTION> F กF
- VALUE ก F F ก F Fก Script
- SELECT ก F ก ก ก FF F
- Text1 Text n F ก F ก FF F

120

F ก F <SELECT>

<FORM METHOD="POST" ACTION="output.asp">
<SELECT NAME="job" >
<OPTION Value="0"> F
<OPTION Value="1"> F ก
<OPTION Value="2"> ก ก
</SELECT>
</FORM>
121

F ก F F
<FORM METHOD="POST" ACTION="output.asp">
<INPUT TYPE="text" NAME=""> ก <INPUT TYPE="text"
NAME=""><BR>
F <BR>
<BR>
<BR>
<INPUT TYPE="radio" NAME="r3" value=2> F F
123

F ก F F ( F)
<BR>

<SELECT NAME="job" >
<OPTION Value="1"> F ก
<OPTION Value="2"> ก ก
</SELECT><BR>
<INPUT TYPE="reset" value=" ก กก F "><INPUT
TYPE="submit" value=" F F ">
</FORM>

124

Html

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (10)

Plus de สุรินทร์ ดีแก้วเกษ

Plus de สุรินทร์ ดีแก้วเกษ (20)

Html