Downloaded 12 times
Html 4.0
- 1. HTML 4.0 Wayne Thomas The Community Idea Stations 04/18/13 1
- 2. It's All InThe Angles If you look at the source code for any webpage, you'll notice different HTML commands all through the document. < > These commands are called TAGS and tell the browser how to display the text, layout, and images of the document. HTML tags are easy to recognize because they are always between a lesser than sign and greater than sign, or as I like to call them, Angle Brackets. 04/18/13 2
- 3. <B> The first you should learn is the BOLD tag. IT's simply the letter "B", sandwiched between two angle brackets and looks like <B> Tags almost always work in pairs. There are a few exceptions we'll discuss later, but most of the time there is an opening tag and a closing tag. The closing tag for Bold looks like </B> They look the same as the opening tag except for the added slash right after the lesser than sign. Any text placed between the opening and closing Bold tags will look thicker than the rest of the text on the page. This is NORMAL text. <B>This is BOLD text</B> 04/18/13 3
- 4. Two more realsimple tags are EMPHASIS and BIG. <EM>EMPHASIS</EM> <BIG>BIG</BIG>, 04/18/13 4
- 5. Every Webpage writtenin HTML has essentially two parts: The Head The Body 04/18/13 5
- 6. <HTML> </HTML> The HTML tag tells your computer that everything between these two tags is an HTML document. You'll always begin your page with the opening HTML tag and end it with the closing HTML tag 04/18/13 6
- 7. <HEAD> </HEAD> The very first part of your document is the Head. This is where you'll put the title that comes up on somebody's navigation bar when they call up your page 04/18/13 7
- 8. <BODY> </BODY> After the Head is the Body. This is the real meat of the page. It's where all your visible text will be, and all your images and links too. Don't forget to put a body in your Homepage! 04/18/13 8
- 9. The Skeleton Here is the HTML for a VERY simple webpage. See if you can figure it out using what You've learned so far. <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML 04/18/13 9
- 10. Remember the BODYtags? That's the pair of tags which shows where the body of the document begins and ends. All of your content goes between the opening and closing Body tags. <BODY> </BODY> The Body Tag controls a lot of what your page will look like. Here's an example: <BODY BGCOLOR=white TEXT=black LINK=blue ALINK=green VLINK=red> </BODY> 04/18/13 10
- 11. An HTML Taghas different parts, but they are all set up in a very standard way. <ELEMENT ATTRIBUTE=value> <BODY BGCOLOR=white TEXT=black LINK=blue ALINK=green VLINK=red> </BODY> In the Body tag example above, BODY is the element, and BGCOLOR, TEXT, LINK, ALINK, and VLINK are the attributes. 04/18/13 11
- 12. The Element tellswhat the tag is in a general way, and the Attributes describe the tag more specifically. BGCOLOR=white This determines the background color for the entire page. I use white here, but you could use red, blue, green, black, almost any common color. Or hexadecimal! TEXT=black Obviously, this controls the color of the page's text. Again, you can use almost any common color. 04/18/13 12
- 13. Cont.. VLINK=red Once a link has been visited, the color will be whatever color the VLINK attribute specifies. 04/18/13 13
- 14. Cont.. LINK=blue This will be the color of your hyperlink before it's clicked on. Links have to be a different color than the text, so that your visitor knows that it's a link. ALINK=purple Ever notice a link turn a different color while it's being clicked? That's because the ALINK attribute was set to a certain color. 04/18/13 14
- 15. BACKGROUND Attribute Usingthe BACKGROUND Attribute, you can tell the browser to go find a certain image file on your server, and use that image for the background. In order to use the Background attribute, you need to have the address of an image file on the web. <BODY BGCOLOR=white TEXT=black LINK=blue ALINK=green VLINK=red BACKGROUND="http://dis.dozier.com/chalk.jpg"> </BODY> 04/18/13 15
- 16. Stand Alone Tags Most HTML tags work in pairs, but that there are a few exceptions? <P> - Paragraph <BR> Line Break <HR> Horizontal Rule 04/18/13 16
- 17. Headings Headings come in six sizes. <H1>Your Heading</H1> <H2>Your Heading</H2> <H3>Your Heading</H3> <H4>Your Heading</H4> <H5>Your Heading</H5> <H6>Your Heading</H6> 04/18/13 17
- 18. Center tags You can center your Heading by nesting it inside a set of CENTER tags, like in the example below. <CENTER><H1>Your Heading</H1></CENTER> You can also center text or images by placing them inside center tags. 04/18/13 18
- 19. Font Tags <FONT></FONT> The size and color of text on an HTML document can be controlled by using the FONT tag. you can enclose indivdual words, sentances, or even sections of your page in between FONT tags 04/18/13 19
- 20. ATTRIBUTE COLOR isan Attribute, as is SIZE. <FONT COLOR=RED> YOUR TEXT</FONT> In this example, FONT is the tag name, COLOR is the attribute, and RED is the value of that attribute. 04/18/13 20
- 21. Hexidecimal HexidecimalColor names are six digit codes used to specify how much of the colors RED, BLUE, and GREEN are in the desired color. 04/18/13 21
- 22. HexidecimalCont… You can use the Hexidecimalcode in place of the color's name in your font tag like this: < FONT COLOR="#FF0000"> Your Text </FONT> 04/18/13 22
- 23. Font Size Use the size attribute just like the font color attribute, by inserting it into your opening font tag. <FONT SIZE=5> YOUR TEXT</Font> You can put all of it's attributes in the same tag. So in our font tag we can put both the size and color attributes like this: <FONT SIZE=5 COLOR=#FF0000> 04/18/13 23
- 24. Font Size Cont… There are seven font sizes you can use with 7 being the largest and 1 being the smallest. SIZE=7 SIZE=6 SIZE=5 SIZE=4 SIZE=3 SIZE=2 SIZE=1 04/18/13 24
- 25. Hyperlink or Linkfor Short A link tag looks like this: <A HREF="URL"> TEXT </A> http://ideastations.org So the tags would look like: <A HREF= “ http://ideastations.org ">WCVE</A> 04/18/13 25
- 26. E-Mail You can place a special link in your page that, when clicked, allows your visitor to email you Do by placing a MAILTO value in your link tag. <A HREF="Mailto:John@Yahoo.com"> 04/18/13 26
- 27. Image Tag <IMG> To place an image on your page, use the image tag. Like the font tag, the image tag requires attributes. Unlike the font tag, IMG is a stand alone tag which does not require a closing tag. 04/18/13 27
- 28. Two attributes you'llneed to know: SRC and ALIGN SRC stands for source. This attribute needs a value, so you'll use the url of the GIF or JPG file where your image is located. <IMG SRC="url"> 04/18/13 28
- 29. ALIGN dictates howyou want your text to line up in relation to your graphic <IMG SRC="url" ALIGN=top> <IMG SRC="url" ALIGN=middle> <IMG SRC="url" ALIGN=bottom> 04/18/13 29
- 30. Positioning Your Image To place your image along the right side of the page, you can use the ALIGN attribute again. <IMG SRC="url" ALIGN=right> To place the image in the center of the page, use this <IMG SRC="url" ALIGN=center> 04/18/13 30