2HTML TAGSEvery tag must have an opening bracket < and a closing bracket >The basic construction of an Beginning HTML TAG is this: <NAME ATTRIBUTE=VALUE>Ending tags begin with a forward slash. That's what makes them ending tags </font>
3Structure of an HTML Document <head><title>MY WEBPAGE</title></head><body> This is my first web page ...</body></HTML>
4HTML DOCUMENTSAn HTML Document is nothing more than a text document which has been given an .html extension on the end of the file name.My Web PageThis page is about me. I was born . . .
5HTML TAGSWhat gives a web page its sizzle are the HTML TAGS which are sprinkled throughout the document. An HTML TAG looks like this: <FONT COLOR=RED> </font>
6HTML TAGSMost HTML TAGS come in pairs, and effect any text placed between the opening and closing tag. <FONT COLOR=RED>This will be red </font> but this won't.This will be red but this won't.
8THE TITLE TAG<head> <title>Welcome to Ponder Independent School District</title </head>The text you place between the TITLE tags shows up in the Color Bar at the top of your screen.
10THE BODY SECTIONThis is the area between the two BODY tags, and will contain all of your text, images, graphics, sounds – and even a link to Uncle Otto's homepage if you like.The entire page must be encompassed by a pair of HTML tags <body> </body>
11A HEADING TAGA Heading Tag looks like this: <H1>My Web Page</H1>
12HEADING TAGSHEADING tags come in six unique sizes, ranging from <H1> thru <H6> with 6 being the smallest:<H1>HTML LESSON</H1><H2>HTML LESSON </H2><H3>HTML LESSON </H3><H4>HTML LESSON </H4><H5>HTML LESSON </H5> <H6>HTML LESSON </H6>
13HEADING TAG ATTRIBUTES The HEADING tag has 1 possible attribute. This is the ALIGN attribute.If you want your HEADING to show up in the middle of the page, you would do this:<H1 ALIGN=CENTER>Lesson 2</H1>If you want your HEADING to show up on the right side of the page, you would do this:<H1 ALIGN=RIGHT>Lesson 2</H1>
14THE BODY TAGIt controls the color of your background, text, link, and other elements. It also allows you to place an image as a background on your page.The body tag follows the </head> tag.<body background="url of image" bgcolor="???" text="???" link="???"
15PARAGRAPH TAGSTo set apart a block of text as a PARAGRAPH, you should place it between a pair of PARAGRAPH tags.PARAGRAPH tags look like this:<P> </P>Any text placed between the opening and closing PARAGRAPH tags will be set apart as a paragraph, with a blank line above it and a blank line below it.
16My text becomes a centered paragraph PARAGRAPH CENTER TAG<P ALIGN=CENTER>My text becomes a centered paragraph </P>My text becomes a centered paragraph
17BREAK TAG<BR>Notice that the BREAK tag does not have a closing tag.Place this tag wherever you want a line break. The text which immediately follows will jump down to the next line.
18This is bold but this is not BOLD TAGTo make your text appear heavier, use the BOLD tag:<BOLD>This is bold </BOLD>but this is notThis is bold but this is not
19EMPHASIS TAGTo add some emphasis (Italics) to a text, Simply enclose it in EMPHASIS tags:<EM>This is emphasized </EM>but this is notThis is emphasized but this is not
20FONT TAGThe FONT tag will alter 3 different features of the text placed between the opening and closing tags. These are the: Font SizeFont ColorFont Face
21FONT SIZEIn order for the FONT tags to control the size of text placed between them, you must use a SIZE attribute in the FONT tag itself. Do so like this:<FONT size=3>Text to be effected here </FONT>
23FONT COLORSpecifying font color is the same as specifying font size. The only difference is that you will use a COLOR attribute in your FONT tag:<FONT COLOR=RED>Text to be effected here </FONT>You can use the proper name for most of the basic colors in your COLOR attribute. Red, Blue, Green, Yellow, Black, etc. are all okay. But, if you want to use a funky color, like chilipepper magenta, you can't use the proper name, you'll have to use a HEXADECIMAL COLOR CODE.
24HEXADECIMAL COLOR CODE Hexadecimal Color Codes are 6 digit codes which are used to express the amount of red, blue and green in any given color.Here are the Hex Codes for some of the more common colors:# BLACK#FFFFFF WHITE#FF0000 RED#00FF00 GREEN#0000FF BLUE
25MARQUEE TAGA Marquee is scrolling text across a page. It is eye-catching, but not supported by all browsers. (Works in MSIE – not Netscape)<marquee>This is the code for Marquee.</marquee>This is the code for Marquee.This is the code for Marquee.This is the code for Marquee.This is the code for Marquee.This is the code for Marquee.This is the code for Marquee.This is the code for Marquee.
26MARQUEE TAG To vary the background color of the marquee Add BGCOLOR="color name or code" to the MARQUEE tag <MARQUEE BGCOLOR="aqua">Your scrolling text goes here</MARQUEE>This is the code for Marquee.This is the code for Marquee.This is the code for Marquee.This is the code for Marquee.This is the code for Marquee.This is the code for Marquee.This is the code for Marquee.
27HYPERLINKSOne of the most dramatic differences between HTML and any other information medium is the ability to place a link to another document.Hyperlinks are built using an opening and closing ANCHOR tag. Everything placed between these tags becomes a HYPERLINK.
28ANCHOR TAGS The anchor tag has an attribute called HREF. The HTML for a hyperlink looks like this:To find a web host<A HREF="http://all-hosts.com">Click Here</A> To find a web host Click Here
29IMAGE TAGSFor an IMAGE to show up on your page, you need to place an HTML tag which will, basically, tell the browser to go to a location, grab the image, and display it on the webpage.<IMG SRC="http://scotiainn.com/front1.jpg">Note, the IMG tag does not have a closing tag.In order for the tag to work, you must use the URL of a GIF or JPG.
30POSITIONING IMAGESYou can position the image horizontally by using the ALIGN attribute.<IMG SRC="http://www.ponderisd.net/lion.gif" align=right>Without an align attribute, the image will always default to the left.
31POSITIONING IMAGESSo, if you just put this: <IMG SRC="http://www.ponderisd.net/lion.gif">You'll get this:The first line of text, followingthe IMAGE tag, begins even with thebottom, then continues on like normal.
32USING IMAGES AS LINKSIf you'd like your hot spot to be an image rather than text, do this instead:<A HREF="http://www.ponderisd.net"> <IMG SRC="http://www.ponderisd.net/lion.gif"></A>
33USING IMAGES AS LINKS That will give you this: To get rid of the border, place a BORDER=0 attribute in your IMAGE tag.<A HREF="http://www.ponderisd.net"> <IMG SRC="http://www.ponderisd.net/lion.gif">BORDER=0 </A>
34CENTERING IMAGESTo center an Image, we must nest it between a pair of DIVISION tags which contain the ALIGN attribute.<DIV ALIGN="center"><IMG SRC="http://scotiainn.com/front1.jpg"></DIV>
35Images for BackgroundTo use an image as a background for your page, you’ll place a BACKGROUND attribute in the body tag.<BODY BACKGROUND=“bg1.gif”The URL you use for the value of the BACKGROUND attribute must be a gif or jpg file, or it won’t work.
36HORIZONTAL LINESHorizontal Ruled Lines are used to separate different areas of a web page.The tag for a horizontal ruled line is <hr>.The horizontal ruled line DOES NOT have a closing tag.
37HORIZONTAL LINE EXAMPLES <hr width=50><hr width=50%><hr size=7><hr noshade> You may also use several attributes within one tag...<hr width=50% size=10 color=red>
40What will appear in the browser? If yourHTML CodeIs òWhat will appear in the browser?<UL><LI> apples<LI> bananas<LI> grapefruit</UL><OL><LI> oranges<LI> peaches<LI> grapes</OL>applesbananasgrapefruitorangespeachesgrapes