Transcript Adding Lists

Enhancing Your
Web Site
2 assignments: 1—complete the
worksheet
2—create your 3RD HTML web page
following the directions in this
PowerPoint where it says “Let’s practice
Adding Ordered Lists”
**YOU MUST HAVE COMPLETED THE
1ST 2 WEB PAGES BEFORE YOU CAN
DO THIS ONE.
HTML Tags
Today you will learn these tags:
• <ul>
• <ol>
• <li>
• <img src> & add-on (alt, height,
width & align)
Adding Lists
Ordered List or
Numbered List
•
•
•
•
used when a specific order is needed.
Tags are <ol> </ol>.
Open <li> is between them for each listed item.
Variation of Numbers:
Lowercase Letters - <ol type=a>
Uppercase Letters – <ol type=A>
Uppercase Roman No. - <ol type=I>
Lowercase Roman No. - <ol type=i>
Let’s Practice
Adding Ordered Lists
Open both the web page and notepad of
My2ndWebPage.html
After the heading codes and closing horizontal
ruled line tag hit enter and type the following:
<br> <hr size=20 color=“your choice”
width=50%>
<font size=5>
I would recommend Web Design to my friends
because...
<ol>
<li>It's super fun
<li>I get to be creative
<li>I get to use the computer
</ol>
Save the Notepad & the web page as
MyImageWebPage.html and
MyImageWebPage.txt
Remember:
your colors
can be
different
Unordered Lists or
Bulleted Lists
• Lists make information better on a web
page because it’s organized and easier to
read.
• Use if no specific order is needed.
• Tags are <ul> </ul>; will make single
space.
• Open <li> is between them for listed item;
it’s a single
Let’s Practice
Adding Unordered Lists
After the last list you typed, add the following:
(You may use your own list here—must have 3 items.)
<br>
3 Things I have learned so far...
<ul>
<li>Information can travel the web </li>
<li>WYSIWYG means "what you see is what you
get".</li>
<li>Publishing info on the Web can be much
cheaper than print.</li>
</ul>
</font> <hr size=20 color=“your choice”>
You select a color here
Save the Notepad & Refresh the Browser
Remember:
your colors
can be
different
Adding
Images
Adding Images
Images:
• can be moving (animated) or nonanimated (not moving).
• can be considered cartoons, graphics,
pictures (real), buttons or icons.
Image Source tag will appear as such–
<img src>
• It isn’t a set, so don’t close it.
Image Extensions
• Images must use the image filename’s and
the extension either .jpg, .gif, .bmp
or .png
<img src=“flowers.gif”>
• .gif & .bmp are mostly for clip arts, icons &
graphics.
• .jpg (jpeg) is for photos & takes up more
disk/file space.
• .png is for graphics & photos; updated
version of gif, but can’t be animated.
Images “Alt”
• Alternative Text Image – a way to ID your graphic
or image in case it’s not loading or if it’s turned off.
– Roll over your picture and it’s shown
• You MUST ALWAYS use alt= with <img src>
– This is required for people with disabilities.
– Alt is a word or words used to describe your
picture
<img src=”rose.jpg” alt=”rose”>
Filename plus
the graphic’s
extension
Choose a good
descriptive
name
Steps to Adding an Image
1st Find an image.
2nd Save the image by RIGHT-CLICKING on it.
Then
– Switch to the file location, then
– RENAME to something shorter but
sensible.
– Look at the extension given such as .gif, .jpg
• 3rd on the Notepad Add the Image Source
Tag with image’s filename.ext & Alternative
Text image
<img src=”filename.ext” alt=”description”>
Changing the Image Size
to the <img src> add on
• Height = number or percentage %
• Width=number or percentage %
<img src = ”flower.gif” alt =”rose”
width=100 height=150%>
Aligning the Image with Words
or Text
• Images can be placed anywhere in your text.
Use the “align” add-on with the below options:
• Top – text is aligned with image’s top.
• Middle – text is aligned with image’s middle.
• Bottom – text is aligned with images’ bottom.
• Left – image on left & text wraps on right.
• Right – image on right & text wraps on left.
<img src=”flowers.gif” alt=”rose” align=”top,
bottom or middle or right or left”>
Don’t Forget to Combine
When Possible
<img src=”flower.gif” alt =”rose”
width=100 height=150% align
=“top”>
Some cool animation websites:
• iconbazaar
• artie.com (graphics, animation &
backgrounds)
Let’s Practice
Adding Images
Be careful—images get complicated
Before you begin:
• To get an image to add to your web page
go to
• http://animals.nationalgeographic.com/animals/p
hotos/baby-animals/
• Search for your favorite animal
• Right click the image and choose Save
Picture as
• Go to your directory
– **Make sure it is in the SAME
LOCATION as your My2ndWebPage file.
• Type a name for the image
• Be sure the type is .jpg
After the last list you typed, key: (use your image
name in the html code)
<br> <br> <br>
<img src=“the name you typed.jpg" alt=”favorite
animal Middle" Height=25% Width=25%
align="middle">
This image is adjusted using percentages
and the text is aligned with the image's middle.
<br> <br> <br>
This image is adjusted using numbers
<img src=“the name you typed.jpg " alt=” favorite
animal Bottom"
Height=85 Width=85 align= "bottom"> and the text
is aligned with the image's bottom.
<br> <br> <br>
<img src=“the name you typed.jpg" alt= “favorite animal right"
Height=your decision Width= your decision
align= "right"> I adjusted this image and the text
is on the right, but the text wraps on the left.
<br><br><br><br><br>
<img src=“the name you typed.jpg" alt= " favorite animal top“
align=“top”>
When you use align="top", only the first line of text
will be at the top of the image. If you have more
than one line of text, the others will jump down to
the bottom of the image!
<br> <br>
<hr your size, width and color>
Save the Notepad & Refresh the Browser
If your web page, is not working properly, recheck your
HTML tags and be sure you placed them correctly.
Remember: your
colors and picture
can be different
Recap Activity
• Tell your teacher when you have
completed the web page assignment
from this PowerPoint.
• Add the tags on this tutorial, to the
HTML Tag Page and save.