Transcript HTML Lesson 3 - SVSD SharePoint Web Site

HTML Lesson 3
Hyper Text Markup Language
Assignment Part 2











Set the file name as “FirstName2.htm”
Set the title as “FirstName LastName First Web Site”
Use the following format for your page:
Name
Computer Tech
Period ___ Assignment 2
---------------------------------------------Use at least four of the Text Formatting Tags found at the
end of lesson 1.
Use either a colored background or background image for
your web page.
Add three paragraphs with headings. Paragraphs should
deal with your first group project on computer hardware,
the second should cover what you did with your virtual
computer, and the third should be about your Alice project.
Colored horizontal rules and text should be used throughout
your web page as well as various fonts or styles.
The Image Tag and
the Src Attribute
 In HTML, images are defined with the
<img> tag.
 The <img> tag is empty, which
means that it contains attributes only
and it has no closing tag.
 To display an image on a page, you
need to use the src attribute. Src
stands for "source". The value of the
src attribute is the URL of the image
you want to display on your page.
The Image Tag and
the Src Attribute
 The syntax of defining an image:
<img src="url">
 The URL points to the location where
the image is stored.
 An image named "boat.gif" located in
the directory "images" on
"www.w3schools.com" has the URL:
http://www.w3schools.com/images/
boat.gif.
The Image Tag and
the Src Attribute
 The browser puts the image where
the image tag occurs in the
document. If you put an image tag
between two paragraphs, the browser
shows the first paragraph, then the
image, and then the second
paragraph
The Alt Attribute
 The alt attribute is used to define an
"alternate text" for an image. The
value of the alt attribute is an authordefined text:
 <img src=“images/clouds.gif"
alt=“Clouds Picture">
The Alt Attribute
 The "alt" attribute tells the reader
what he or she is missing on a page if
the browser can't load images. The
browser will then display the
alternate text instead of the image. It
is a good practice to include the "alt"
attribute for each image on a page, to
improve the display and usefulness of
your document for people who have
text-only browsers.
Adjust images to different sizes
<p>
<img src=“images/clouds.gif"
width="45" height="45">
</p>
<p>
<img src="images/clouds.gif"
width="70" height="70">
</p>
<p>
You can make a picture larger or smaller changing the
values in the "height" and "width" attributes of the
img tag.
</p>
Aligning images - bottom
<p>
An image
<img src="images/clouds.gif"
align="bottom" width="48" height="48">
in the text
</p>
Aligning images - middle
<p>
An image
<img src ="images/clouds.gif"
align="middle" width="48" height="48">
in the text
</p>
Aligning images - top
<p>
An image
<img src ="images/clouds.gif"
align="top" width="48" height="48">
in the text
</p>
 <p>Note that bottom alignment is
the default alignment</p>
Let the image float - left
<p>
<img src ="images/clouds.gif"
align ="left" width="48" height="48">
A paragraph with an image. The align
attribute of the image is set to "left". The
image will float to the left of this text.
</p>
Let the image float - right
<p>
<img src ="images/clouds.gif"
align ="right" width="48" height="48">
A paragraph with an image. The align
attribute of the image is set to "right".
The image will float to the right of this
text.
</p>
Assignment Part 3
 Save your last html file as “FirstName3.htm”
 Set the title as “FirstName LastName Third
Web Site”
 Use the following format for your page:
 Name
 Computer Tech
 Period ___ Assignment 3
 --------------------------------------------- From the Public image folder select a photo
of the members of your group. Add this
photo to your first paragraph.
 Go into the Alice program and save six
photos of your show. Add these photos to in
two rows at the end of your third paragraph.