Comp121 Exercise3

Images and Links
Images
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for source. The !alue of
the src attribute is the "#L of the image you want to display.
synta$
<img src="url" alt="some_text">
The re%uired alt attribute specifies an alternate te$t for an image, if the image cannot be displayed.
Preapard by: Romardymeo C. Santos
Images and Links
Exercise on Image
&. 'reate a folder in your des(top named image)sample. *ll web pages in this e$ercise must be
inside of this folder.
+. create a web page with a file name of ,image_sample.html-. *nd Insert these code.
</01'T234 html>
<html>
<head>
<title>Image Sample<5title>
<5head>
<body>
<h&>Image Insert in HTML<5h&>
<img src6picture.7pg alt6sample picture only 5>
<5body>
<5html>
8. 9ow !iew the ,image_sample.html- in Mo:illa ;irefo$ and <oogle 'hrome. See the
difference how browsers handles errors.
=. 9ow select a picture within the picture folder on computer or o!er the internet.
>. 0rag5copy5download the image you ha!e selected inside the image)sample folder. Then edit the
source attribute of image to the file name of your selected image with its e$tension.
?. *gain try !iewing the site with Mo:illa ;irefo$ and <oogle 'hrome. 9ow you !iew the image
you ha!e selected. If not, there is something wrong on your source attribute, try rechec(ing it.
@. 9ow let try to resi:e the image with width and height attribute. Insert this inside of image tag.
width6>> height6>>
A. *gain try !iewing the site with Mo:illa ;irefo$ and5or <oogle 'hrome. 9otice the image being
re si:ed by the !alue we ha!e set.
B. 9ow let ma(e it proportional by deleted on of the attribute between height or width. Ciew your
page to see your changes.
&D. *fter completion of this e$ercise present your wor( to your instructor.
Images and Links
Links
Lin(s are found in nearly all Eeb pages. Lin(s allow users to clic( their way from page to page.
The HTML <a> tag defines a hyperlin(.
* hyperlin( For lin(G is a word, group of words, or image that you can clic( on to 7ump to another
document.
Ehen you mo!e the cursor o!er a lin( in a Eeb page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the lin(Hs
destination.
Iy default, lin(s will appear as follows in all browsers.
*n un!isited lin( is underlined and blue
* !isited lin( is underlined and purple
*n acti!e lin( is underlined and red
Synta$
<a href="url">Link text</a>
The href attribute specifies the destination of a lin(.
4$ample
<a href6http.55www.google.com.ph5>Cisit <oogle search engine<5a>
NOTE:
If your are creating an offline page put the pages in one root folder to create a specified file path for
each of the page5s.
Images and Links
Exercise on Link
&. 'reate a folder in your des(top named lin()sample. *ll web pages in this e$ercise must be
inside of this folder.
+. 'reate a web page with these code ha!ing a file name of ,first_page.html:
</01'T234 html>
<html>
<head>
<title>;irst 3age<5title>
<5head>
<body>
<h&>Eelcome to the first page<5h&>
<a href6second)page.html><o to the Second 3age<5a>
<5body>
<5html>
8. 'reate another page with these code ha!ing a file name of ,second_page.html.
</01'T234 html>
<html>
<head>
<title>Second 3age<5title>
<5head>
<body>
<h&>Eelcome, 2ou are now on the Second 3age<5h&>
<a href6first)page.html><o bac( the ;irst 3age<5a>
<5body>
<5html>
=. Ciew the first)page.html in any browser.
>. 'lic( the lin( and see what happened what page are you now.
?. 9ow clic( the lin( to go the first)page.html.
@. 2ou now can na!igate between + pages. LetHs ma(e another web page with a file name
,floating_page.html-.
A. 3ut these code inside of ,floating_page.html-.
</01'T234 html>
<html>
<head>
<title>;loating 3age<5title>
<5head>
<body>
<h&>This is a floating page<5h&>
<a href6first)page.html><o bac( the ;irst 3age<5a>
<5body>
Images and Links
<5html>
B. 9ow it is time to edit the ,first_page.html-. *fter the first *nchor tag insert this code.
<br5>
<br5>
<a href6floating)page.html target6)blan(><o to the ;loating 3age<5a>
&D. 1pen the ,first_page.html-. *nd 'lic( the lin( to floating page. *naly:e what target6-)blan(-
does to your browser.
&&. The last thing we need to do is put a title attribute to our anchor tag ha!ing the !alue of this
page name.
&+. 3resent your wor( to your instructor.
Images and Links
FOR !E "#I$I% FOR O&"%
'(RELI) L"*OR"O% E+"),
Ha!ing done with a simple calendar last time, 9ow.
&. 'reate a calendar for +D&=.
+. The 'alendar must 8 $ = formatJ
8. Ma(e all Sunday date appear red Fte$t5bac(groundG.
=. Ma(e your birth date te$t appear larger than the regular te$t. *nd create a lin( going to a
message of ,Happy Iirthday To 21"# 9*M4- and a lin( going bac(.
>. Ma(e the holidays ha!e a lin( that display the Holiday 9ame and title on its title attribute. *nd
when clic(ed, it will be !iewed by another tab of your browser.
?. 4ach holiday web page must display its name and must ha!e an image.
Holiday list.
Kan & 9ew 2earHs 0ay
;eb +> 3eople 3ower *nni!ersary
*pr B The 0ay of Calor
*pr &@ Maundy Thursday
*pr &A <ood ;riday
May & Labor 0ay
Kun &+ Independence 0ay
*ug += 9ational Heroes 0ay
9o! 8D Ionifacio 0ay
0ec +> 'hristmas 0ay
0ec 8D #i:al 0ay

Comp121 Exercise3

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Comp121 Exercise3

Hochgeladen von

Copyright:

Verfügbare Formate

Images and Links

Das könnte Ihnen auch gefallen