300 likes | 631 Views
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.
E N D
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. • Demonstrate appropriate use of the following HTML tag categories: required tags, images, lists, colors, text sizes, lines
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.
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/)
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
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.
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.
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>
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
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
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.
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:
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:
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%>)
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>
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>
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>
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}
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!
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!
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!
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!
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.
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.
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).
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).
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>
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>
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.
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.