Session3 part1

Orjix
www.RongRean.com
หห หหหหหหหหหหหหห HTML: Session หหห 3

www.rongrean.com Orjix
Contents
หหหหหหหหหหหหห <a>1
หหหหหหหหหหหหหหห <img>2
หหหหหหหหหหหหหหหหหหห
หหหหหหหหหหหหหหห HTML
3
หหหหหหหหหหหหหหหหหหหหห
หหหหหหห
4
หหหหหหหหหหหหหหหห5
หหหหหหหหหหหหหหหห
rollover
6

หหหหหหหหหหหหห <a>
 <a>
<body>
<a href=“">
</a>
</body>
href=“…” 3
•
•
•
href=“…” 3
•
•
•
<body>
<a href=“
http://www.google.com">
google
</a>
</body>

<body>
<a href="#entertain">entertain</a>
<a href="#family">Family</a>
<a href="#computer">Computer</a>
 
<hr>
<a name="entertain">This is entertain</a> 
<a name="family">This is family</a> 
<a name="computer">This is computer</a> 
</body>
<body>
<a href="#entertain">entertain</a>
<a href="#family">Family</a>
<a href="#computer">Computer</a>
 
<hr>
<a name="entertain">This is entertain</a> 
<a name="family">This is family</a> 
<a name="computer">This is computer</a> 
</body>
href “#” <a>


directory
html
first_html, page2 page3
desktop
directory
html
first_html, page2 page3
desktop
<body>
<a href="page2.html">
go to page2
</a><hr>
go to page3
</a>
</body>
<body>
go to page2
</a><hr>
go to page3
</a>
</body>
First_html.html
go to page2
page2.html
go to page3
page3.html

 html directory
page2 page3
Folder ‘next page’
page2 page3
Folder ‘next page’
<body>
<a href=“
next page/page2.html">
go to page2
</a><hr>
<a href=“
go to page3
</a>
</body>
<body>
<a href=“
go to page2
</a><hr>
<a href=“
go to page3
</a>
</body>

relative path names
 directory hierachy
A
B C D
E F
B → E E/page.html
B → A ../page.html
B → C ../C/page.html
D → F ../B/F/page.html
B → E E/page.html
B → A ../page.html
B → C ../C/page.html
D → F ../B/F/page.html
directory
“../”
directory
“ folder/”
directory
“../”
directory
“ folder/”


url
<a href=“…”>
<body>
<a href=“http://www.google.com">
google
</a>
<a href=“http://www.yahoo.com">
yahoo
</a>
</body>
<body>
<a href=“http://www.google.com">
google
</a>
<a href=“http://www.yahoo.com">
yahoo
</a>
</body>
*browser browser
<a href=“…” target=“_blank”>……….</a>
*browser browser
<a href=“…” target=“_blank”>……….</a>


<img src=“"/> <img src="spring09.gif"/>
<img> <body>
<img src=“"/> <img src="spring09.gif"/>
<img> <body>
<img>
<a href=“…”>
<body>
<a href="http://www.google.com">
<img src="spring09.gif"/>
</a>
</body>
google.com spring09.gif
http://www.google.com
<img>
<a href=“…”>
<body>
<a href="http://www.google.com">
<img src="spring09.gif"/>
</a>
</body>
google.com spring09.gif
http://www.google.com

HTML
 (zip)
browser
<a href=“”>
<body>
<a href="2547097.jpg">image</a><hr>
<a href="Retro Avatars.zip">zip file</a><hr>
<a href=“[Soulciety_sub]PERSONA -Trinity Soul -01[Th][1280x720 XviD]
[7269C185].avi">video</a>
</body>
<a href=“”>
<body>
<a href="2547097.jpg">image</a><hr>
<a href="Retro Avatars.zip">zip file</a><hr>
<a href=“[Soulciety_sub]PERSONA -Trinity Soul -01[Th][1280x720 XviD]
[7269C185].avi">video</a>
</body>

HTML


Email

<a href=“mailto: email@hotamail.com”></a>
<body>
<a href=“mailto: ra_ta_poom@hotmail.com">To. P' bank</a>
</body>
<a href=“mailto: email@hotamail.com”></a>
<body>
<a href=“mailto: ra_ta_poom@hotmail.com">To. P' bank</a>
</body>

Email
microsoft outlook


• (Hyperlink) : link
• (Visited link) : vlink
• (Active link) : alink
• (Hyperlink) : link
• (Visited link) : vlink
• (Active link) : alink
attribute <body>
<body link="green" vlink="blue" alink="red">
<a href="#">normal link</a> 
<a href="#">visited link</a> 
<a href="#">active link</a>
</body>
<body link="green" vlink="blue" alink="red">
<a href="#">normal link</a> 
<a href="#">visited link</a> 
<a href="#">active link</a>
</body>

rollover


script Event
handler
Attribute onmouseover onmouseout <a>
Onmouseover :
Onmouseout :
Attribute onmouseover onmouseout <a>
Onmouseover :
Onmouseout :
<body>
<a href="#" onmouseover="pic.src='after.jpg'"
onmouseout="pic.src='before.jpg'">
<img id="pic" src="before.jpg"/>
</a> 
</body>
<body>
<a href="#" onmouseover="pic.src='after.jpg'"
onmouseout="pic.src='before.jpg'">
<img id="pic" src="before.jpg"/>
</a> 
</body>

rollover
onmouseover
onmouseout
After.jpgbefore.jpg
** attribute ‘onmouseout’

Session3 part1

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Session3 part1

Similar to Session3 part1 (20)

More from sangkeetwittaya stourajini

More from sangkeetwittaya stourajini (20)

Recently uploaded

Recently uploaded (20)

Session3 part1