View
216
Download
0
Category
Tags:
Preview:
Citation preview
HTML
HTML TAGS
Every tag must have an opening bracket < Every tag must have an opening bracket < and a closing bracket > and a closing bracket >
The basic construction of an Beginning The basic construction of an Beginning HTML TAG is this: HTML TAG is this: <NAME ATTRIBUTE=VALUE> <NAME ATTRIBUTE=VALUE>
Ending tags begin with a forward slash. Ending tags begin with a forward slash. That's what makes them ending tags - That's what makes them ending tags - </font> </font>
Structure of an HTML Document
<HTML><HTML>
<head><head>
<title>MY WEBPAGE</title><title>MY WEBPAGE</title>
</head></head>
<body> This is my first web page ... <body> This is my first web page ...
</body></body>
</HTML></HTML>
HTML DOCUMENTS
An HTML Document is nothing more than An HTML Document is nothing more than a text document which has been given a text document which has been given an .html extension on the end of the file an .html extension on the end of the file name. name.
My Web Page
This page is about me. I was born . . .
HTML TAGS
What gives a web page its sizzle are the What gives a web page its sizzle are the HTML TAGS which are sprinkled HTML TAGS which are sprinkled throughout the document.throughout the document.
An HTML TAG looks like this: An HTML TAG looks like this:
<FONT COLOR=RED> </font><FONT COLOR=RED> </font>
HTML TAGS
Most HTML TAGS come in pairs, and Most HTML TAGS come in pairs, and effect any text placed between the opening effect any text placed between the opening and closing tag. and closing tag.
<FONT COLOR=RED>This will be red <FONT COLOR=RED>This will be red </font> but this won't.</font> but this won't.
This will be redThis will be red but this won't. but this won't.
THE HEAD SECTION
The entire area between the opening and closing The entire area between the opening and closing HEAD tags is considered the HEAD SECTION of HEAD tags is considered the HEAD SECTION of an HTML document.an HTML document.
There's a funny thing about the HEAD SECTION There's a funny thing about the HEAD SECTION – nothing you put here will actually be visible on – nothing you put here will actually be visible on your web page.your web page.
The HEAD SECTION generally contains the The HEAD SECTION generally contains the TITLE of the web page, META TAGS, sometime TITLE of the web page, META TAGS, sometime a STYLE SHEET and occasionally some a STYLE SHEET and occasionally some javascript code.javascript code.
THE TITLE TAG
<head> <head> <title>Welcome to Ponder Independent <title>Welcome to Ponder Independent School District</title School District</title </head> </head>
The text you place between the TITLE tags The text you place between the TITLE tags shows up in the Color Bar at the top of your shows up in the Color Bar at the top of your screen. screen.
THE TITLE TAG
Title
THE BODY SECTION
This is the area between the two BODY This is the area between the two BODY tags, and will contain all of your text, tags, and will contain all of your text, images, graphics, sounds – and even a link images, graphics, sounds – and even a link to Uncle Otto's homepage if you like. to Uncle Otto's homepage if you like.
The entire page must be encompassed by a The entire page must be encompassed by a pair of HTML tags.pair of HTML tags. <body> </body> <body> </body>
A HEADING TAG
A Heading Tag looks like this: A Heading Tag looks like this:
<H1>My Web Page</H1> <H1>My Web Page</H1>
HEADING TAGS
HEADING tags come in six unique sizes, ranging HEADING tags come in six unique sizes, ranging from <H1> thru <H6> with 6 being the smallest:from <H1> thru <H6> with 6 being the smallest:
<H1><H1>HTML LESSONHTML LESSON</H1> </H1>
<H2><H2>HTML LESSONHTML LESSON </H2> </H2>
<H3>HTML LESSON </H3><H3>HTML LESSON </H3><H4><H4>HTML LESSONHTML LESSON </H4> </H4><H5><H5>HTML LESSONHTML LESSON </H5> </H5> <H6><H6>HTML LESSONHTML LESSON </H6> </H6>
HEADING TAG ATTRIBUTES
The HEADING tag has 1 possible attribute. This The HEADING tag has 1 possible attribute. This is the ALIGN attribute. is the ALIGN attribute.
If you want your HEADING to show up in the If you want your HEADING to show up in the middle of the page, you would do this: middle of the page, you would do this:
<H1 ALIGN=CENTER>Lesson 2</H1><H1 ALIGN=CENTER>Lesson 2</H1> If you want your HEADING to show up on the If you want your HEADING to show up on the
right side of the page, you would do this: right side of the page, you would do this:
<H1 ALIGN=RIGHT>Lesson 2</H1><H1 ALIGN=RIGHT>Lesson 2</H1>
THE BODY TAG
It controls the color of your background, It controls the color of your background, text, link, and other elements. It also allows text, link, and other elements. It also allows you to place an image as a background on you to place an image as a background on your page.your page.
The body tag follows the </head> tag.The body tag follows the </head> tag. <body background="url of image" <body background="url of image"
bgcolor="???" text="???" link="???"bgcolor="???" text="???" link="???"
PARAGRAPH TAGS
To set apart a block of text as a PARAGRAPH, To set apart a block of text as a PARAGRAPH, you should place it between a pair of you should place it between a pair of PARAGRAPH tags.PARAGRAPH tags.
PARAGRAPH tags look like this:PARAGRAPH tags look like this:<P> </P> <P> </P>
Any text placed between the opening and closing Any text placed between the opening and closing PARAGRAPH tags will be set apart as a PARAGRAPH tags will be set apart as a paragraph, with a blank line above it and a blank paragraph, with a blank line above it and a blank line below it. line below it.
PARAGRAPH CENTER TAG
<P ALIGN=CENTER>My text becomes a <P ALIGN=CENTER>My text becomes a centered paragraph </P> centered paragraph </P>
My text becomes a centered paragraphMy text becomes a centered paragraph
BREAK TAG
<BR><BR> Notice that the BREAK tag does not have a Notice that the BREAK tag does not have a
closing tag.closing tag. Place this tag wherever you want a line Place this tag wherever you want a line
break. The text which immediately follows break. The text which immediately follows will jump down to the next line.will jump down to the next line.
BOLD TAG
To make your text appear heavier, use the To make your text appear heavier, use the BOLD tag: BOLD tag:
<BOLD>This is bold </BOLD>but this is <BOLD>This is bold </BOLD>but this is not not
This is boldThis is bold but this is not but this is not
EMPHASIS TAG
To add some emphasis (Italics) to a text, To add some emphasis (Italics) to a text, Simply enclose it in EMPHASIS tags: Simply enclose it in EMPHASIS tags:
<EM>This is emphasized </EM>but this is <EM>This is emphasized </EM>but this is not not
This is emphasizedThis is emphasized but this is not but this is not
FONT TAG
The FONT tag will alter 3 different features The FONT tag will alter 3 different features of the text placed between the opening and of the text placed between the opening and closing tags. These are the: closing tags. These are the:
Font Size Font Size
Font Color Font Color
Font Face Font Face
FONT SIZE
In order for the FONT tags to control the In order for the FONT tags to control the size of text placed between them, you must size of text placed between them, you must use a SIZE attribute in the FONT tag itself. use a SIZE attribute in the FONT tag itself.
Do so like this:Do so like this:
<FONT size=3>Text to be effected here <FONT size=3>Text to be effected here </FONT> </FONT>
FONT TAG
<font size="1"><font size="1">font size 1 font size 1 </font></font>
<font size="2"><font size="2">font size 2 font size 2 </font></font>
<font size="3">font size 3 </font><font size="3">font size 3 </font>
<font size="4"><font size="4">font size 4 font size 4 </font></font>
<font size="5"><font size="5">font size 5 font size 5 </font></font>
<font size="6"><font size="6">font size 6 font size 6 </font></font>
<font size="7"><font size="7">font size 7 font size 7 </font></font>
FONT COLOR
Specifying font color is the same as specifying font Specifying font color is the same as specifying font size. The only difference is that you will use a COLOR size. The only difference is that you will use a COLOR attribute in your FONT tag:attribute in your FONT tag:
<FONT COLOR=RED>Text to be effected here <FONT COLOR=RED>Text to be effected here </FONT> </FONT>
You can use the proper name for most of the basic You can use the proper name for most of the basic colors in your COLOR attribute. Red, Blue, Green, colors in your COLOR attribute. Red, Blue, Green, Yellow, Black, etc. are all okay. But, if you want to use Yellow, Black, etc. are all okay. But, if you want to use a funky color, like chilipepper magenta, you can't use a funky color, like chilipepper magenta, you can't use the proper name, you'll have to use a the proper name, you'll have to use a HEXADECIMAL COLOR CODE. HEXADECIMAL COLOR CODE.
HEXADECIMAL COLOR CODE
Hexadecimal Color Codes are 6 digit codes which are Hexadecimal Color Codes are 6 digit codes which are used to express the amount of red, blue and green in used to express the amount of red, blue and green in any given color. any given color.
Here are the Hex Codes for some of the more Here are the Hex Codes for some of the more common colors: common colors:
#000000#000000 BLACK BLACK #FFFFFF#FFFFFF WHITE WHITE #FF0000#FF0000 REDRED #00FF00#00FF00 GREENGREEN #0000FF#0000FF BLUEBLUE
MARQUEE TAG
A Marquee is scrolling text across a page. It A Marquee is scrolling text across a page. It is eye-catching, but not supported by all is eye-catching, but not supported by all browsers. (Works in MSIE – not Netscape)browsers. (Works in MSIE – not Netscape)
<marquee>This is the code for <marquee>This is the code for Marquee.</marquee>Marquee.</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 To vary the background color of the marqueemarquee
Add Add BGCOLOR=BGCOLOR="color name or code""color name or code" to to the MARQUEE tagthe MARQUEE tag<MARQUEE BGCOLOR="aqua">Your <MARQUEE BGCOLOR="aqua">Your scrolling text goes here</MARQUEE>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 One of the most dramatic differences between HTML and any other information between HTML and any other information medium is the ability to place a link to medium is the ability to place a link to another document.another document.
Hyperlinks are built using an opening and Hyperlinks are built using an opening and closing ANCHOR tag. Everything placed closing ANCHOR tag. Everything placed between these tags becomes a between these tags becomes a HYPERLINK.HYPERLINK.
ANCHOR TAGS
The anchor tag has an attribute called The anchor tag has an attribute called HREF.HREF.
The HTML for a hyperlink looks like this: The HTML for a hyperlink looks like this:
To find a web hostTo find a web host
<A HREF="http://all-hosts.com"><A HREF="http://all-hosts.com">
Click HereClick Here
</A> To find a web host </A> To find a web host Click HereClick Here
IMAGE TAGS
For an IMAGE to show up on your page, you For an IMAGE to show up on your page, you need to place an HTML tag which will, need to place an HTML tag which will, basically, tell the browser to go to a location, basically, tell the browser to go to a location, grab the image, and display it on the webpage.grab the image, and display it on the webpage.
<IMG SRC="http://scotiainn.com/front1.jpg"><IMG SRC="http://scotiainn.com/front1.jpg"> Note, the IMG tag does not have a closing tag.Note, the IMG tag does not have a closing tag. In order for the tag to work, you must use the In order for the tag to work, you must use the
URL of a GIF or JPG. URL of a GIF or JPG.
POSITIONING IMAGES You can position the image You can position the image
horizontally by using the ALIGN horizontally by using the ALIGN attribute. attribute.
<IMG <IMG SRC="http://www.ponderisd.net/lion.SRC="http://www.ponderisd.net/lion.gif" align=right>gif" align=right>
Without an align attribute, the image Without an align attribute, the image will always default to the left.will always default to the left.
POSITIONING IMAGES
So, if you just put this: <IMG So, if you just put this: <IMG SRC="http://www.ponderisd.net/lion.gif">SRC="http://www.ponderisd.net/lion.gif">
You'll get this: You'll get this:
The first line of text, following The first line of text, following the IMAGE tag, begins even with the the IMAGE tag, begins even with the bottom, then continues on like normal.bottom, then continues on like normal.
USING IMAGES AS LINKS
If you'd like your hot spot to be an image If you'd like your hot spot to be an image rather than text, do this instead:rather than text, do this instead:
<<A HREF="http://www.ponderisd.net"> A HREF="http://www.ponderisd.net"> <IMG <IMG SRC="http://www.ponderisd.net/lion.gif"> SRC="http://www.ponderisd.net/lion.gif">
</A> </A>
USING IMAGES AS LINKS
That will give you this: That will give you this:
To get rid of the border, place a BORDER=0 To get rid of the border, place a BORDER=0 attribute in your IMAGE tag.attribute in your IMAGE tag.
<A HREF="http://www.ponderisd.net"> <A HREF="http://www.ponderisd.net"> <IMG <IMG SRC="http://www.ponderisd.net/lion.gif"> SRC="http://www.ponderisd.net/lion.gif">
BORDER=0 </A> BORDER=0 </A>
CENTERING IMAGES
To center an Image, we must nest it To center an Image, we must nest it between a pair of DIVISION tags which between a pair of DIVISION tags which contain the ALIGN attribute. contain the ALIGN attribute.
<DIV ALIGN="center"> <DIV ALIGN="center">
<IMG <IMG SRC="http://scotiainn.com/front1.jpg"> SRC="http://scotiainn.com/front1.jpg">
</DIV> </DIV>
Images for Background
To use an image as a background for your To use an image as a background for your page, you’ll place a BACKGROUND page, you’ll place a BACKGROUND attribute in the body tag.attribute in the body tag.
<BODY BACKGROUND=“bg1.gif”<BODY BACKGROUND=“bg1.gif” The URL you use for the value of the The URL you use for the value of the
BACKGROUND attribute must be a gif or BACKGROUND attribute must be a gif or jpg file, or it won’t work.jpg file, or it won’t work.
HORIZONTAL LINES
Horizontal Ruled Lines are used to separate Horizontal Ruled Lines are used to separate different areas of a web page. different areas of a web page.
The tag for a horizontal ruled line is The tag for a horizontal ruled line is <hr><hr>. . The horizontal ruled line The horizontal ruled line DOES NOTDOES NOT have have
a closing tag. a closing tag.
HORIZONTAL LINE EXAMPLES
<hr width=50> <hr width=50> <hr width=50%> <hr width=50%> <hr size=7> <hr size=7> <hr noshade><hr noshade>
You may also use several attributes You may also use several attributes within one tag...within one tag...
<hr width=50% size=10 color=red><hr width=50% size=10 color=red>
LISTS – Ordered (Numbered)
ORDERED LISTORDERED LIST
1.1. pencils pencils
2.2. pens pens
3.3. erasers erasers
4.4. paper paper
5.5. glue glue
HTML CODEHTML CODE
<ol> <ol> <li>pencils <li>pencils <li>pens <li>pens <li>erasers <li>erasers <li>paper <li>paper <li>glue<li>glue</ol></ol>
LISTS – Unordered (Bullets)
UNORDERED UNORDERED LISTLIST • pencils pencils • pens pens • erasers erasers • paper paper • glue glue
HTML CODEHTML CODE
<ul> <ul>
<li>pencils <li>pencils <li>pens <li>pens <li>erasers <li>erasers <li>paper <li>paper <li>glue<li>glue</ul></ul>
If your HTML Code
Is <UL> <LI> apples <LI> bananas <LI> grapefruit </UL>
<OL> <LI> oranges <LI> peaches <LI> grapes </OL>
• applesapples• bananasbananas• grapefruitgrapefruit
1.1. orangesoranges2.2. peachespeaches3.3. grapesgrapes
What will appear in the browser?
Recommended