html lesson 3
Download
Skip this Video
Download Presentation
HTML Lesson 3

Loading in 2 Seconds...

play fullscreen
1 / 30

htmllesson3 - PowerPoint PPT Presentation


  • 266 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'htmllesson3' - Gabriel


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html lesson 3

HTML Lesson 3

TBE 540

Farah Fisher

prerequisites
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
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
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 links5
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 links6
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 links7
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 links8
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
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 graphics10
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 graphics11
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 graphics12
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 graphics13
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 graphics14
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
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 316
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 317
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 318
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 319
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 320
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 321
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 322
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 323
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 324
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 325
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 326
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 327
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 328
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
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
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.
ad