1 / 145

HTML Review

HTML Review. HTML and JavaScript. What is HTML?. HTML stands for H yper T ext M arkup L anguage It is the set of instructions hidden behind every web page (called the source of the page) HTML “tags” tell the browser (like Internet Explorer) how to display the page.

dahlia
Download Presentation

HTML Review

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 Review HTML and JavaScript

  2. What is HTML? • HTML stands for HyperText Markup Language • It is the set of instructions hidden behind every web page (called the source of the page) • HTML “tags” tell the browser (like Internet Explorer) how to display the page. • For example, <B>HI THERE</B> would display the words HI THERE in bold.

  3. What is HTML? • HTML “tags” are contained within < > • The letters inside the < > are the instructions (like <B> for bold) and may be upper or lower case. • Tags often come in pairs…one to begin a feature, and another to end it. • In the previous example, <B> means “begin bold here” and </B> means “end bold here”.

  4. HTML Structure • Each web page has a HEAD and a BODY. • All web pages have required tags like these: <HTML> {begin the page} <HEAD> {some set up instructions </HEAD> are here} <BODY> {the main part of the page </BODY> is here} </HTML> {end the page}

  5. HTML Structure • The HEAD section often contains tags to display a page title. • The title is displayed at the top of the window (not on the page). • Here is an example: <HEAD> <TITLE>My Web Page</TITLE> </HEAD>

  6. HTML Structure • The BODY section contains all the instructions for the actual page display. • Inside the body section of a web page you will find tags that control text, graphics, lines, links, tables and other special functions. • Remember that some, but not all, tags come in pairs.

  7. Text-Related Tags • Text is most often displayed in paragraphs, using block form. • The paragraph tags <P> and </P> are used before and after a paragraph. • <BR> (“line break”) is like pressing Return/Enter. The text that follows is displayed on the next line. • NOTE: Just pressing Return/Enter when you are writing a page in HTML does not guarantee that it will be displayed on the next line.

  8. Text-Related Tags • Text is sometimes displayed in BOLD or ITALICS. • The tag pair <B> and </B> make the text between display in bold. • The tag pair <I> and </I> make the text between display in italics. • Examples: • <B>This is bold text.</B> This is bold text. • <I>Here is italics.</I> Here is italics. • <B><I>Both!</I></B> Both!

  9. Text-Related Tags • NOTE: Though there is a tag for underlining (<U> </U>) it is not a good idea to underline text. It may be confused with a link, since they are usually underlined. • The <FONT> </FONT> tag pair can be used to change other aspects of text (e.g., color).

  10. Text-Related Tags • You will often see text displayed in large, bold type, almost like a newspaper headline. • The “header” tags are used for this purpose. • The largest “header” tag is <H1> </H1> (larger numbers make smaller headers). • An example: <H1>MY PAGE</H1> displays MY PAGE • <H6>MY PAGE</H6> displays MY PAGE

  11. Text-Related Tags • To center a header, the tag pair <CENTER> </CENTER> is used. • An example: <CENTER> <H1>TRAINS</H1> </CENTER> displays… TRAINS

  12. Lines • Many web pages use horizontal lines to divide the page. • The <HR> tag is used to draw a line. • You can control the size (thickness in pixels) and width (% of the window). • Examples: • <HR> {one pixel thick, 100% of window} • <HR SIZE=4 WIDTH=50%> {4 pixels thick, 50% of window}

  13. IMAGE Tags • The <IMG> tag is used to display graphics on web pages. • The main requirement for the IMG tag is the file name (“source”) of the image. • NOTE: Web page images DO NOT become part of a web page file. They are separate files and must be located in the same folder as the web page file unless otherwise noted.

  14. IMAGE Tags • An example of an IMG tag that displays a graphic called ME.JPG <IMG SRC=“ME.JPG”> • In the example above, the name (“source” or SRC) of the picture file is ME.JPG (stored in the same folder as the web page file). • NOTE: The image file’s name must be exactly as stored (upper/lower case, etc.) • .JPG and .GIF indicate types of images appropriate for web pages.

  15. Lists • Many web pages contain lists. • Lists can be “unordered” (using bullets like this list) or “ordered” (with numbers or letters). • <UL> </UL> indicates an unordered (bulleted) list. • <OL> </OL> indicates an ordered list. • <LI> </LI> is used for each list item.

  16. These tags… <UL> <LI>Dogs</LI> <LI>Cats</LI> <LI>Lizards</LI> </UL> Produce this list… Dogs Cats Lizards List Examples

  17. These tags… <OL> <LI>Dogs</LI> <LI>Cats</LI> <LI>Lizards</LI> </OL> Produce this list… Dogs Cats Lizards List Examples

  18. These tags… <OL TYPE=“A”> <LI>Dogs</LI> <LI>Cats</LI> <LI>Lizards</LI> </OL> Produce this list… Dogs Cats Lizards List Examples

  19. A Word about Links • All links use the tag that begins <A HREF= • The A stands for “anchor” (think of an anchor chain..it’s made of links…right?). • The HREF part will be the name of a web page or a web address.

  20. A Word about Links • Here are a couple of examples, you will see the actual message to click on between the “A” tags. • This link shows the words Go Back and sends the user to a page called HOME.HTM that is stored in the same folder as the current page. <A HREF=“HOME.HTM”>Go Back</A>

  21. A Word about Links • This link shows the words More Info and sends the user to the CSUH home page. <A HREF=“http://www.csuhayward.edu/”>More Info</A>

  22. 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.csuhayward.edu)

  23. 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.

  24. 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.

  25. 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 is next to images.

  26. More about Links • Sometimes it is convenient to have a list of links. See the example below: <UL> <LI><A HREF=“http://www.csuhayward.edu/”>CSUH </A></LI> <LI><A HREF=“http://www.csuhayward.edu/math/>” College of Math </A></LI> <LI><A HREF=“http://www.csuhayward.edu/bhecker”> Barbara’s Classes</A></LI> </UL>

  27. Colors in HTML • When you specify colors in HTML, you can either enter a color by name (for simple colors) OR… • You can put in codes that specify the amount of red, green and blue to include in the color (which gives you millions of combinations).

  28. Colors in HTML • Here is an example of the use of color in a <FONT> tag. The text will print in red. <FONT color=“red”>The text.</FONT> • Here is another way to say “red”: <FONT color=“#FF0000”>The text.</FONT> (weird, huh?) red green blue

  29. Colors in HTML • What’s all this “#FF” stuff? • If you want more than simple colors, you must specify the amount of red, green, and blue in the color. • This is done with six hexadecimal (base 16) numbers (that’s what # means) - two each for red, green and blue. • Each pair of numbers ranges from 00 to FF (yes, FF is a number) 00 = none, FF = highest

  30. Colors in HTML • Here are some sample color numbers: RED #FF0000 (high red, no green, no blue) GREEN #00FF00 (no red, high green, no blue) BLUE #0000FF (no red, no green, high blue) BLACK #000000 (no red, no green, no blue) WHITE #FFFFFF (high red, high green, high blue) YELLOW #FFFF00 (high red, high green, no blue) CYAN #00FFFF (no red, high green, high blue) MAGENTA #FF00FF (high red, no green, high blue)

  31. Colors in HTML • Another place to use color is for a background. • Background color is specified in the <BODY> tag. • For example, to set the background of a page to light blue, use <BODY BGCOLOR=“light blue”>

  32. Colors in HTML • You can also set the link color and text color for the whole page in the <BODY> tag. • Here is a tag that sets the background to yellow, the text to red, the links to blue, and the visited links (the ones you have already been to) to purple: <BODY BGCOLOR=“yellow” TEXT=“red” LINK=“blue” VLINK=“purple”>

  33. More about Text Size • You know “header” tags make large text (like <H1></H1>) • You can also specify text size with a <FONT> tag. • Here is an example of very small text: <FONT SIZE=1>Write this.</FONT>

  34. More about Images • Web page images are displayed on the left side of a page and in their actual stored size unless otherwise instructed. • The HEIGHT and WIDTH of an image can be specified in the IMG tag. • HEIGHT and WIDTH are measured in pixels.

  35. More about Images • Example: <IMG SRC=“MyPicture.gif” HEIGHT=100 WIDTH=50> • The example above displays the graphic file MyPicture.gif with a height of 100 pixels and a width of 50 pixels. • NOTE: If you do not specify HEIGHT and WIDTH, the image will appear the size at which it was stored.

  36. More about Images • To align an image at the center or the right of the screen, it is easiest to use one of the following tag pairs: <CENTER> </CENTER> <RIGHT> </RIGHT> • The IMG tag is placed between the alignment tags: <CENTER><IMG SRC=“picture.jpg”></CENTER> • NOTE: If you place several IMG tags in a row (one for each picture), they will appear next to each other when the page is displayed.

  37. More about Images • If you want a border (like a frame) around the image, you can put BORDER=thickness in pixels in the IMG tag. Example: <IMG SRC=“kitty.jpg” BORDER=3> • Here is an example of an image called BOG.gif which is centered, displayed 200 x 200, with a 4-pixel border. <CENTER> <IMG SRC=“BOG.gif” HEIGHT=200 WIDTH=200 BORDER=4> </CENTER>

  38. Image Maps • You have learned that a graphic can be a link. • With an image map, a single graphic can be used to link to several different sites. • Coordinates within an image are used to “map” various areas, each of which may be used as a link to a different web page.

  39. Image Maps • If you could see an image with its map, it might look like this: These areas might link to EAR.HTM Each area could be a separate link. This area might link to FEET.HTM

  40. Image Maps • Each area is defined by coordinates in pixels. • For rectangular areas, it is the upper left and lower right. This area might be defined as 2,200 (upper left) 205,300 (lower right)

  41. Image Maps • The HTML code to make an image map begins with the IMG tag. • Here is a sample: <IMG SRC=“pig.gif” USEMAP=“#MIG”> • USEMAP says that the graphic is an image map. • MIG is the name of the map definition (# means “look in this same document”).

  42. Image Maps • The image map definition begins with a map tag: <MAP NAME=“MIG”> • The name of this map definition is MIG. • </MAP> ends the definition. • The lines in between describe the areas (by coordinates) and the web pages that they link to.

  43. Image Maps • The lines between <MAP NAME=“MIG”> and </MAP> define the areas, one tag for each area. • Here is an example from the pig: <AREA SHAPE=RECT HREF=“FEET.HTM” COORDS=“2,200 205,300”> • The shape of the area is a rectangle, the link goes to FEET.HTM, the upper left of the rectangle is at 2,200 and the lower right of the rectangle is at 205,300.

  44. Image Maps • How can I find the coordinates? • You can search shareware sites for image map programs. • You can use a graphics program, if it shows the position of the cursor with “pixels”. • Move the cursor over the picture and write down the appropriate coordinates.

  45. Frames • A FRAMESET document uses <FRAMESET> and </FRAMESET> instead of <BODY> and </BODY>. • The type of frames (rows or columns) must be specified, and each frame must be described with a <FRAME> tag like this: <FRAME SRC =”content1.htm" border="0" NORESIZE >

  46. Here is the FRAMESET code for the example --> <HTML> <HEAD></HEAD> <FRAMESET COLS=“100,*”> <FRAME SRC=“left.htm”> <FRAME SRC=“right.htm”> </FRAMESET> </HTML> FRAMESET Sample WELCOME! • Links • One • Two • Three Join us..etc. left.htm right.htm

  47. <HTML> <HEAD></HEAD> <FRAMESET COLS=“100,*”> <FRAME SRC=“left.htm”> <FRAME SRC=“right.htm”> </FRAMESET> </HTML> Two “column” frames - the first (left) is 100 pixels wide. The right frame takes up whatever space is left over (*) on the screen. left.htm is the web page file for the left frame. right.htm fills the right frame. FRAMESET Sample

  48. Self Check - Example Questions • Which of the following is NOT a required tag? • <HTML> • </BODY> • <H1> • <HEAD>

  49. Self Check - Example Questions • Which of the following is NOT a required tag? • <HTML> • </BODY> • <H1> {headings/headlines are common, but not required} • <HEAD>

  50. Self Check - Example Questions • Which of the tags below will show the words MY PAGE on the page in very large type? • <TITLE>MY PAGE</TITLE> • <H1>MY PAGE</H1> • <H7>MY PAGE</H7> • <FONT SIZE=2>MY PAGE</FONT>

More Related