Html lesson 3
Download
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 l.jpg

HTML Lesson 3

TBE 540

Farah Fisher


Prerequisites l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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