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 says “Let’s practice Adding Ordered Lists” **NOTE: YOU MUST HAVE COMPLETED THE 1 ST 2 WEB PAGES BEFORE YOU CAN DO THIS ONE.

HTML Tags Today you will learn these tags: & add-on (alt, height, width & align)

Adding Lists

Ordered List or Numbered List used when a specific order is needed. Tags are. Open is between them for each listed item. Variation of Numbers: Lowercase Letters - Uppercase Letters – Uppercase Roman No. - Lowercase Roman No. -

Let’s Practice Adding Ordered Lists

Open both the web page and notepad (My2ndWebPage.txt) of My2ndWebPage.html After the heading codes and closing horizontal ruled line tag hit enter and type the following: I would recommend Web Design to my friends because... It's super fun I get to be creative I get to use the computer 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 ; will make single space. Open 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.) 3 Things I have learned so far... Information can travel the web WYSIWYG means "what you see is what you get". Publishing info on the Web can be much cheaper than print. You select a color here Save the Notepad & Refresh the Browser

Remember: your colors can be different

Adding Images

Images: 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– It isn’t a set, so don’t close it.

Image Extensions.jpg,.gif,.bmp or.pngImages must use the image filename’s and the extension either.jpg,.gif,.bmp or.png.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 –This is required for people with disabilities. –Alt is a word or words used to describe your picture Filename plus the graphic’s extension Choose a good descriptive name

Steps to Adding an Image 1st Find an image. 2 nd 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 3 rd on the Notepad Add the Image Source Tag with image’s filename.ext & Alternative Text image

Changing the Image Size to the add on Height = number or percentage % Width=number or percentage %

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.

Don’t Forget to Combine When Possible Some cool animation websites: iconbazaar artie.com (graphics, animation & backgrounds)artie.com

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 hotos/baby-animals/ 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) This image is adjusted using percentages and the text is aligned with the image's middle. 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.

<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. 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! 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 Add the tags from all 3 PowerPoints to the HTML Tag Page and save.