View
656
Download
0
Category
Tags:
Preview:
DESCRIPTION
Introduction to HTML
Citation preview
04/12/23 1
HTML 4.0
Wayne ThomasThe Community Idea Stations
04/12/23 2
It's All In The 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/12/23 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/12/23 4
Two more real simple tags are EMPHASIS and BIG.
<EM>EMPHASIS</EM><BIG>BIG</BIG>,
04/12/23 5
Every Webpage written in HTML has essentially two parts:
The Head The Body
04/12/23 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/12/23 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/12/23 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/12/23 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/12/23 10
Remember the BODY tags?
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=blackLINK=blue ALINK=green VLINK=red> </BODY>
04/12/23 11
An HTML Tag has different parts, but they
are all set up in a very standard way.
<ELEMENT ATTRIBUTE=value>
<BODY BGCOLOR=white TEXT=blackLINK=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/12/23 12
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.
The Element tells what the tag is in a general way, and the Attributes describe the tag more specifically.
04/12/23 13
Cont..
VLINK=red
Once a link has been visited, the color will be whatever color the VLINK attribute specifies.
04/12/23 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/12/23 15
BACKGROUND Attribute
Using the 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=blackLINK=blue ALINK=green VLINK=redBACKGROUND="http://dis.dozier.com/chalk.jpg">
</BODY>
04/12/23 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/12/23 17
HeadingsHeadings 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/12/23 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/12/23 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/12/23 20
ATTRIBUTE
COLOR is an 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/12/23 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/12/23 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/12/23 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/12/23 24
Font Size Cont…
There are seven font sizes you can use with 7 being the largest and 1 being the smallest.
SIZE=7SIZE=6SIZE=5SIZE=4SIZE=3SIZE=2
SIZE=1
04/12/23 25
Hyperlink or Link for ShortA 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/12/23 26
You can place a special link in your page that, when clicked, allows your visitor to email youDo by placing a MAILTO value in your link tag. <A HREF="Mailto:John@Yahoo.com">
04/12/23 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/12/23 28
Two attributes you'll need to know:
SRC and ALIGNSRC 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/12/23 29
ALIGN dictates how you 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/12/23 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>
Recommended