enhancing your web site 2 assignments: 1st—complete the worksheet 2nd—create your 3rd html web...

25
Enhancing Your Enhancing Your Web Site Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it says “Let’s practice Adding Ordered Lists” **NOTE: YOU MUST HAVE COMPLETED THE 1 ST 2 WEB PAGES BEFORE YOU CAN DO THIS ONE.

Upload: irene-wilkerson

Post on 29-Jan-2016

214 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Enhancing Your Enhancing Your Web SiteWeb Site

Enhancing Your Enhancing Your Web SiteWeb Site

2 assignments: 1st—complete the worksheet2nd—create your 3RD HTML web page following the directions in this PowerPoint where it says “Let’s practice Adding Ordered Lists”**NOTE: YOU MUST HAVE COMPLETED THE 1ST 2 WEB PAGES BEFORE YOU CAN DO THIS ONE.

Page 2: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

HTML Tags

Today you will learn these tags:

• <ul>

• <ol>

• <li>

• <img src> & add-on (alt, height, width & align)

Page 3: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Adding ListsAdding Lists

Page 4: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

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>

Page 5: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Let’s Practice Let’s Practice Adding Ordered ListsAdding Ordered Lists

Page 6: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Open both the web page and notepad Open both the web page and notepad ((My2ndWebPage.txtMy2ndWebPage.txt) of My2ndWebPage.html ) 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 Save the Notepad & the web page as

MyImageWebPage.html and MyImageWebPage.html and MyImageWebPage.txtMyImageWebPage.txt

Page 7: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Remember: your colors

can be different

Page 8: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

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

Page 9: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Let’s Practice Let’s Practice Adding Unordered Adding Unordered

ListsLists

Page 10: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

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 BrowserSave the Notepad & Refresh the Browser

Page 11: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Remember: your colors

can be different

Page 12: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Adding Adding ImagesImages

Page 13: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Adding ImagesImages:

• can be moving (animated) or non-animated (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.

Page 14: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Image Extensions• Images must use the image filename’s and

the extension either .jpg, .gif, .bmp .jpg, .gif, .bmp or .pngor .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.

Page 15: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

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

Page 16: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Steps to Adding an Image1st 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”>

Page 17: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

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%>

Page 18: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

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”>

Page 19: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

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)

Page 20: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Let’s Practice Let’s Practice Adding ImagesAdding ImagesBe careful—images get Be careful—images get

complicatedcomplicated

Page 21: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Before you begin:• To get an image to add to your web page go to • http://animals.nationalgeographic.com/animals/photos/baby-ani

mals/

• 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

Page 22: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

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 percentagesand 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>

Page 23: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

<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 textwill 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 BrowserSave the Notepad & Refresh the BrowserIf your web page, is not working properly, recheck your If your web page, is not working properly, recheck your

HTML tags and be sure you placed them correctly.HTML tags and be sure you placed them correctly.

Page 24: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Remember: your colors and picture can be different

Page 25: Enhancing Your Web Site 2 assignments: 1st—complete the worksheet 2nd—create your 3RD HTML web page following the directions in this PowerPoint where it

Recap Activity

• Add the tags from all 3 PowerPoints to the HTML Tag Page and save.