Transcript Adding Lists - Bibb County Schools

Enhancing Your
Web Site
More Basic HTML Tags
Today you will learn these tags:
• <ul>
• <ol>
• <li>
• <img src> & add-on (alt, height, width & align)
• <a> and “href” add-on
• Add a text link to a Web page on
another Web site
• Describe linking terms and definitions
• Create a home page and enhance a Web page
using images
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 Order List
Viewing HTML Notepad from
the Web Page’s Browser
• Open your
My1stWebPage.html
Browser
– Click on the “Blue E”
• Now, Click View on the
menu bar
• Then, Click Source on
the View menu
– Your My1stWebPage
Notepad should now
be opened.
6
If needed, open both the browser and notepad of
My1stWebPage.html
After the heading codes and closing
horizontal ruled line tag hit enter and type
<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 & Refresh the Browser
Remember:
your colors
can be
different
Unordered List or
Bulleted List
• List makes 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 List
After the last list you typed:
<br>
3 Things I have learned so far...
<ul>
<li>Information can travel the web on dialup or dedicated lines</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”>
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.
Images 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 alt= with <img src>
– This is required for disabled people.
– 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 any where 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:
• www.iconbazaar.com (graphics, animation &
backgrounds)
• www.artie.com (graphics, animation &
backgrounds)
Let’s Practice
Adding Images
Before you begin
• To get an image to add to your web page
go to Google images.
• Search your favorite animal
• Right click the image and choose Save
Picture as
• Go to your folder in the Save In section
– Make sure it is in the SAME LOCATION
of your My1stWebPage file.
• Type a name for the image
• Be sure the type is .jpg
After the last list you typed:
<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 images 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 of size, width and color>
Save the Notepad & Refresh the Browser
Remember: your
colors and picture
can be different
Close both your Browser
& Notepad
Adding Links
Hyperlinks
• Main way to connect web pages and
move throughout a web site.
• Uses the Anchor Tag <a> which is a set.
<a> </a>
• Must have the href add-on (Hypertext
Reference)
• The tag will appear as <a href=“URL,
Filename or Email Address”>
Hyperlinks Continues
• The text after the <a href> is the Target or
Active Hyperlink & will become the color
Blue and Underline.
• Then after Clicking on the link, it will turn
Purple.
Linking to the Net
• <a href =”page’s URL”> Word to be
linked </a>
• The URL has to be the exact web site’s
address including the http://
example:
<a href=”http://www.yahoo.com”> Yahoo!
</a>
Linking to Open in a
Different Browser Window
To make the Web Page Open in a
Different Browser Window:
• put the add-on target=“_blank” after
the url in the anchor tag.
example:
<a href=“http://www.yahoo.com”
target=“_blank”> Yahoo! </a>
Let’s Practice
Adding Links
Creating a New Web Page
• Open a New Notepad
StartProgramsAccessoriesNotepad
• Click Format  check Word Wrap
• Save the new file as My2ndWebPage.html
• When finished typing, don’t forget to Save
the Notepad and Refresh your New
Browser.
<html>
<head>
<title> Your Name Second Web Page</title>
</head>
<body bgcolor="gray" text="white"> <font size=6>
This text is a <a href="http://www.yahoo.com">
link </a> to a page on the World Wide Web.
<br><br>
This is a link to the <a href =
"http://www.barrow.k12.ga.us" target=“_blank">
Barrow County School System's </a> website & it
will open in a different Browser Window (Screen).
</body>
Save the new Web
Page & Refresh it’s
</html>
Browser
Adding Links
to Connect
Web Pages
Linking to Pages (Files) on
your Disk/Computer
• The computer file location has to be the
exact including the drive’s name such as
a:\ or c:\ or e:\ or f:\
Example of using a File on a your disk, computer
or flash:
<a href=”a:\Marquee
Practice.html”>Marquee</a>
• If using a Folder’s Name:
Example
<a href=”a:\WebPage\Marquee
Practice.html”> Marquee</a>
Let’s Practice
Linking Pages
• After the last thing you
typed on
My2ndWebPage add:
<br> <br> <br>
I have created a link
that will go my <a
href="My1stWebPage.
html"> 1st Web Page
</a>
Now, Save, Refresh &
Click onyour Link.
You should now be on
your 1st WebPage!
Linking Page Practice Cont’
• When you clicked the • Let’s try creating a
link on
Link from the 1st
My2ndWebPage and
Page back to the 2nd
it took you to
page.
My1stWebPage
• With My1stWebPage
• If you wanted to return
Browser showing,
to My2ndWebPage
click on View,
you could press the
Source to Open the
BACK button OR
Notepad
Simply create a link!
• Make sure you’re still on
My1stWebPage
• After the last thing you typed add:
• <br> <br> <br>
<font size=6>
Click here to go back to the
<a href ="My2ndWebPage.html"> 2nd
Page </a>
</font>
Save the Notepad & Refresh the Browser
Recap Activity
• If you need to review any tags or
concepts learned throughout this and
the other tutorials, you can use the
HTML files you have created.
• Now, close your browser and notepad.
• Proceed to the HTML Web Page
Assignment given from your teacher.