HTML
HTML TAGS Every 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>
Structure of an HTML Document <head> <title>MY WEBPAGE</title> </head> <body> This is my first web page ... </body> </HTML>
HTML DOCUMENTS An 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 Page This page is about me. I was born . . .
HTML TAGS What 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>
HTML TAGS Most 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.
THE HEAD SECTION The entire area between the opening and closing HEAD tags is considered the HEAD SECTION of an HTML document. There's a funny thing about the HEAD SECTION – nothing you put here will actually be visible on your web page. The HEAD SECTION generally contains the TITLE of the web page, META TAGS, sometime a STYLE SHEET and occasionally some javascript code.
THE 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.
THE TITLE TAG Title
THE BODY SECTION This 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>
A HEADING TAG A Heading Tag looks like this: <H1>My Web Page</H1>
HEADING TAGS HEADING 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>
HEADING 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>
THE BODY TAG It 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="???"
PARAGRAPH TAGS To 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.
My text becomes a centered paragraph PARAGRAPH CENTER TAG <P ALIGN=CENTER>My text becomes a centered paragraph </P> My text becomes a centered paragraph
BREAK 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.
This is bold but this is not BOLD TAG To make your text appear heavier, use the BOLD tag: <BOLD>This is bold </BOLD>but this is not This is bold but this is not
EMPHASIS TAG To add some emphasis (Italics) to a text, Simply enclose it in EMPHASIS tags: <EM>This is emphasized </EM>but this is not This is emphasized but this is not
FONT TAG The FONT tag will alter 3 different features of the text placed between the opening and closing tags. These are the: Font Size Font Color Font Face
FONT SIZE In 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>
FONT TAG <font size="1">font size 1 </font>
FONT COLOR Specifying 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.
HEXADECIMAL 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: #000000 BLACK #FFFFFF WHITE #FF0000 RED #00FF00 GREEN #0000FF BLUE
MARQUEE TAG A 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.
MARQUEE 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.
HYPERLINKS One 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.
ANCHOR 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
IMAGE TAGS For 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.
POSITIONING IMAGES You 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.
POSITIONING IMAGES So, if you just put this: <IMG SRC="http://www.ponderisd.net/lion.gif"> You'll get this: The first line of text, following the IMAGE tag, begins even with the bottom, then continues on like normal.
USING IMAGES AS LINKS If 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>
USING 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>
CENTERING IMAGES To 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>
Images for Background To 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.
HORIZONTAL LINES Horizontal 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.
HORIZONTAL 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>
LISTS – Ordered (Numbered) ORDERED LIST pencils pens erasers paper glue HTML CODE <ol> <li>pencils <li>pens <li>erasers <li>paper <li>glue </ol>
LISTS – Unordered (Bullets) UNORDERED LIST pencils pens erasers paper glue HTML CODE <ul> <li>pencils <li>pens <li>erasers <li>paper <li>glue </ul>
What will appear in the browser? If your HTML Code Is ò What will appear in the browser? <UL> <LI> apples <LI> bananas <LI> grapefruit </UL> <OL> <LI> oranges <LI> peaches <LI> grapes </OL> apples bananas grapefruit oranges peaches grapes