1 / 30

HTML Lesson 3

HTML Lesson 3 TBE 540 Farah Fisher Prerequisites Use a search engine to locate information. Download graphics from the web. Define GIF, JPG and "animated GIF". Use simple graphics tools to create/manipulate graphics. Control the size and placement of graphics.

Gabriel
Download Presentation

HTML Lesson 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Lesson 3 TBE 540 Farah Fisher

  2. Prerequisites • Use a search engine to locate information. • Download graphics from the web. • Define GIF, JPG and "animated GIF". • Use simple graphics tools to create/manipulate graphics. • Control the size and placement of graphics. • Demonstrate appropriate use of the following HTML tag categories: required tags, images, lists, colors, text sizes, lines

  3. Objectives • Create linked web pages. • Use a list (text) of links. • Use graphics as background and links. • Place text next to images in at least two alignments. • Use a graphic as an alternate to <HR>. • Locate and use web page evaluation rubrics.

  4. More about Links • Virtually every web page has links…it’s the basic idea of the web and HTML (HyperText refers to links). • Link tags look like this: <A HREF=“address”>what to click on</A> • The address can be a file name (like home.htm) or a web address (like http://www.csudh.edu/fisher/)

  5. More about Links • The “what to click on” is quite often text. • Whatever is placed between the <A> tags is displayed on the screen and usually underlined (though you can change it in your browser settings). • You can also place an < IMG> tag between the <A> tags, making the image into a link. • A handout on links is available at http://www.csudh.edu/fisher/tbe540/HHO3.htm

  6. More about Links • The example below shows an image called TOY.JPG as a link to a page called TOYSTORY.HTM : <A HREF=“TOYSTORY.HTM”> <IMG SRC=“TOY.JPG”></A> • The <IMG> tag may also contain HEIGHT, WIDTH, and BORDER information. • This way, however, the user will not know that the image is a link. See the next slide for a better idea.

  7. More about Links • In the example below, both the image TOY.JPG and the words “GO TO TOY STORY” are part of the link to TOYSTORY.HTM. <A HREF=“TOYSTORY.HTM”>GO TO TOY STORY <IMG SRC=“TOY.JPG”></A> • The words in the link can come before or after the <IMG> tag. Placement of text next to images will be discussed later in this lesson.

  8. More about Links • Sometimes it is convenient to have a list of links. See the example below: <UL> <LI><A HREF=“http://www.csudh.edu/”>CSUDH </A></LI> <LI><A HREF=“http://www.csudh.edu/coe/>” College of Education </A></LI> <LI><A HREF=“http://www.csudh.edu/fisher”> Dr. Fisher’s Classes</A></LI> </UL>

  9. More about Graphics • When placing text next to graphics, you may be surprised by the placement of the text. • If you put in no “alignment” information, the text will appear at the bottom of the graphic: Text appears here

  10. More about Graphics • Using ALIGN=TOP or ALIGN=CENTER may be more useful. <IMG SRC=“ED.GIF” ALIGN=TOP>Text appears here <IMG SRC=“ED.GIF” ALIGN=CENTER>Text appears here Text appears here Text appears here

  11. More about Graphics • Graphics can be used a web page backgrounds. • The tag <BODY BACKGROUND=“image name”> is used. • A graphic used in the background of a page should be lightened so that it does not interfere with the information on the page.

  12. More about Graphics • When an image is smaller than the web page, it is “tiled” (repeated) to fill up all the space. • A single graphic like this: would look like this as a background:

  13. More about Graphics • To lighten a graphic, you will need a program like PhotoShop or Word (or a freeware or shareware program). • If you bring down the contrast and raise the brightness, the graphic will appear “washed out” - just right for a background. • An example:

  14. More about Graphics • Another use for graphics is as a replacement for <HR>. • You can search for web graphic lines (“dividers”) at websites like http://www.nzwwa.com/mirror/clipart/graphics/dividers/dividers1/index.html (part of Clip Art Universe) • Use a regular <IMG> tag to display the graphic line. You might want to adjust the width (<IMG SRC=“file” WIDTH=100%>)

  15. Self Check - HTML Lesson 3 • Which of the following creates a link to HOME.HTM by clicking GO HOME? • <A HREF=“GO HOME”>HOME.HTM</A> • <A HREF=“HOME.HTM”>GO HOME</A> • <IMG HREF=“HOME.HTM”>GO HOME</A> • <IMG HREF=“GO HOME”>HOME.HTM</A>

  16. Self Check - HTML Lesson 3 • Which of the following creates a link to HOME.HTM by clicking GO HOME? • <A HREF=“GO HOME”>HOME.HTM</A> • <A HREF=“HOME.HTM”>GO HOME</A> • <IMG HREF=“HOME.HTM”>GO HOME</A> • <IMG HREF=“GO HOME”>HOME.HTM</A>

  17. Self Check - HTML Lesson 3 • Which of the following allows the user to click on GO HOME or a graphic (home.jpg) to go to HOME.HTM? • <A HREF=“HOME.HTM><IMG SRC=“home.jpg”>GO HOME</A> • <A HREF=“HOME.HTM>GO HOME<IMG SRC=“home.jpg”></A> • <A HREF=“HOME.HTM><IMG SRC=“home.jpg”></A>

  18. Self Check - HTML Lesson 3 • Which of the following allows the user to click on GO HOME or a graphic (home.jpg) to go to HOME.HTM? • <A HREF=“HOME.HTM><IMG SRC=“home.jpg”>GO HOME</A> • <A HREF=“HOME.HTM>GO HOME<IMG SRC=“home.jpg”></A> • <A HREF=“HOME.HTM><IMG SRC=“home.jpg”></A> {Either graphics first or words first}

  19. Self Check - HTML Lesson 3 • Which of the lists below will results from these tags? <OL> <LI><A HREF=“MINE.HTM”>See Me</A></LI> <LI>GO AWAY!</LI> </OL> See Me GO AWAY! See Me GO AWAY! See Me GO AWAY!

  20. Self Check - HTML Lesson 3 • Which of the lists below will results from these tags? <OL> <LI><A HREF=“MINE.HTM”>See Me</A></LI> <LI>GO AWAY!</LI> </OL> See Me GO AWAY! See Me GO AWAY! See Me GO AWAY!

  21. Self Check - HTML Lesson 3 • Which is the correct text placement if this tag is used? <IMG SRC=“SOS.GIF” ALIGN=TOP>SINK! SINK! SINK! SINK!

  22. Self Check - HTML Lesson 3 • Which is the correct text placement if this tag is used? <IMG SRC=“SOS.GIF” ALIGN=TOP>SINK! SINK! SINK! SINK!

  23. Self Check - HTML Lesson 3 • To use a graphic (back1.gif) as a page background, use… • <BODY BACKGROUND=“back1.gif”> • <BODY><IMG SRC=“back1.gif”></BODY> • <BODY BGCOLOR=“back1.gif”> • You cannot use a graphic as a background.

  24. Self Check - HTML Lesson 3 • To use a graphic (back1.gif) as a page background, use… • <BODY BACKGROUND=“back1.gif”> • <BODY><IMG SRC=“back1.gif”></BODY> • <BODY BGCOLOR=“back1.gif”> • You cannot use a graphic as a background.

  25. Self Check - HTML Lesson 3 • If a background graphic is smaller than the page display… • The image is displayed larger to fill the window. • The image is centered on the page window. • The image is tiled (repeated).

  26. Self Check - HTML Lesson 3 • If a background graphic is smaller than the page display… • The image is displayed larger to fill the window. • The image is centered on the page window. • The image is tiled (repeated).

  27. Self Check - HTML Lesson 3 • To use an image (lineup.gif) as a line, use the following tag(s)… • <HR><IMG SRC=“lineup.gif”></HR> • <IMG SRC=“lineup.gif”> • <HR SRC=lineup.gif”> • <HR>lineup.gif</HR>

  28. Self Check - HTML Lesson 3 • To use an image (lineup.gif) as a line, use the following tag(s)… • <HR><IMG SRC=“lineup.gif”></HR> • <IMG SRC=“lineup.gif”> • <HR SRC=lineup.gif”> • <HR>lineup.gif</HR>

  29. Evaluation Rubrics • One of the requirements for the HTML project is that you use a rubric to evaluate your own website when it is complete. • Looking at rubrics now will alert you to what is important in web design. • Check out the Web Evaluation Links on the class web site (HTML pages). • NOTE: The CyberBee forms are very nice.

  30. Activities • Complete the web page activity found at http://www.csudh.edu/fisher/tbe540/HEX3.htm • This activity includes the development of several linked pages, much like your final project will be.

More Related