HTML Review
E N D
Presentation Transcript
HTML Review HTML and JavaScript
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.
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”.
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}
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>
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.
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.
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!
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).
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
Text-Related Tags • To center a header, the tag pair <CENTER> </CENTER> is used. • An example: <CENTER> <H1>TRAINS</H1> </CENTER> displays… TRAINS
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}
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.
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.
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.
These tags… <UL> <LI>Dogs</LI> <LI>Cats</LI> <LI>Lizards</LI> </UL> Produce this list… Dogs Cats Lizards List Examples
These tags… <OL> <LI>Dogs</LI> <LI>Cats</LI> <LI>Lizards</LI> </OL> Produce this list… Dogs Cats Lizards List Examples
These tags… <OL TYPE=“A”> <LI>Dogs</LI> <LI>Cats</LI> <LI>Lizards</LI> </OL> Produce this list… Dogs Cats Lizards List Examples
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.
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>
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>
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)
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.
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 is next to images.
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>
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).
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
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
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)
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”>
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”>
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>
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.
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.
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.
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>
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.
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
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)
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”).
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.
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.
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.
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 >
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
<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
Self Check - Example Questions • Which of the following is NOT a required tag? • <HTML> • </BODY> • <H1> • <HEAD>
Self Check - Example Questions • Which of the following is NOT a required tag? • <HTML> • </BODY> • <H1> {headings/headlines are common, but not required} • <HEAD>
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>
