HTML

Sevenhills Pvt. Ltd.,

Contents at a Glance
HTML 1 HTML BASICS................................................................................................................4 A QUICK LOOK AT NOTEPAD AND WEB BROWSERS......................................................................4 TAGS & ATTRIBUTES....................................................................................................7 HTML TAGS.....................................................................................................................7

1

HTML: BASIC FORMAT..................................................................................................8 THE TEXT TAGS...........................................................................................................10 HOW TO USE HTML TAGS TO MANIPULATE YOUR TEXT...............................................................10 HEADINGS AND PARAGRAPHS.................................................................................12 USING HEADINGS, PARAGRAPHS, AND LINE BREAKS..................................................................12 MANIPULATING FONT SIZE AND COLOR..................................................................15 HOW TO CHANGE FONT SIZES AND COLORS ..............................................................................15 SPECIAL CHARACTERS..............................................................................................17 HOW TO USE SPECIAL CHARACTERS IN HTML..........................................................................17 LINKING TO OTHER PAGES.......................................................................................18 HOW TO LINK TO OTHER PAGES IN HTML ..............................................................................18 ADDING IMAGES TO YOUR PAGE..............................................................................20 HOW TO PLACE IMAGES ON YOUR PAGE ..................................................................................20 Image Alignment/Wrapping Text.....................................................21 USING AN IMAGE AS A LINK..................................................................................................22 USING IMAGE "ALT" COMMANDS............................................................................................24 An alternative to the picture ..........................................................24 SOME EXTRA TEXT TAGS....................................................................................................25 <SUB> and <SUP>......................................................................25 The <PRE> Tag............................................................................25 <NOBR> and <WBR>...................................................................26 The <BLINK> Tag.........................................................................26 ADDING HTML COMMENTS........................................................................................28 USING HTML LISTS......................................................................................................29 USING BODY TAG ATTRIBUTES................................................................................31 USING A BACKGROUND COLOR...............................................................................32 CHANGING THE DEFAULT TEXT COLOR..................................................................33 CHANGING THE LINK COLOR....................................................................................34 USING A BACKGROUND IMAGE................................................................................35 RESIZING IMAGES.......................................................................................................36 LINKING WITHIN A SINGLE PAGE..............................................................................38 THE E-MAIL LINK.........................................................................................................39 THE E-MAIL LINK: MORE............................................................................................40 HTML TABLE ...............................................................................................................41 <table>......................................................................................41 <tr>...........................................................................................41 <td>..........................................................................................41 HTML FRAME...............................................................................................................43

2

HTML FORMS...............................................................................................................45 TEXT INPUT......................................................................................................................46 RADIO BUTTON.................................................................................................................47 CHECKBOX.......................................................................................................................48 DROP DOWN MENU...........................................................................................................49

3

HTML Basics
Webpages are written in HTML - a simple scripting language. HTML is short for HyperText Markup Language. • Hypertext is simply a piece of text that works as a link. • Markup Language is a way of writing layout information within documents.

Basically an HTML document is a plain text file that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor. A more popular choice is to use a special HTML editor - maybe even one that puts focus on the visual result rather than the codes - a so-called WYSIWYG editor ("What You See Is What You Get"). Some of the most popular HTML editors, such as FrontPage or Dreamweaver will let you create pages more or less as you write documents in Word or whatever text editor you're using.

A quick look at Notepad and Web Browsers
Using HTML you will want to familiarize yourself with the software you will be using. So, to get started, open Notepad (or your text editor). You should see a completely blank page. Now, type in the text below. We will make use of it later with the web browser. Type the following: <HTML> <HEAD> <TITLE>Test Page</TITLE> </HEAD> <BODY> Hi there, you have just written your first web page! </BODY> </HTML> Once you have finished, go to the "File" menu and click on "Save As”. This will prompt you to create a name for your file. In the box, type in test.htm. At the

4

or something similar in the dialogue box).htm.*). Now you will want to use your web browser to view the file you just created. You may also see an error saying the browser could not connect to "http://somepage.*).txt by default. If someone with a Mac would like to write up something in more detail about this (as I don't have a Mac). Click on this to make the change. feel free to send it to me. You should be able to hit OK and get a blank page. The text was enlarged so you could see the part we are interested in at this point. type in the path to your html file.htm. as shown in the image below: If you have a Mac. Text Files (*.html" or something similar. The default is . you can type 5 . If the file is on a floppy disk. You can use this routine each time you create a new HTML file.txt). If you are given an option to connect to the internet. in the location box (where you manually type urls). then select the plain text file type (usually shown as Text Documents. you can cancel the connection and you will likely end up with a blank page. So.txt. the way to do this will depend on your text editor. start up your web browser. Now you may choose the drive and directory to save to. Click on the down arrow on the right side of the input box. You should see something similar to the picture below: This is an example using Windows 95. If you do not get the option to save the file as the type All Files (*. Now. You should be able to highlight All Files (*.bottom of the prompt you should see a space that says "Save file as Type" or "Save as Type". so you will need to change it. Something similar to the methods above should work for you. you will need to place quote marks around the filename. To get around this. you would type the following: c:\myfiles\test. Be careful not to save it just yet though if you are using Windows. and click on "Save". Windows will save it as test. If you have the file in a directory called "myfiles".

Click this option and you will be able to browse for your file and open it from there. To use this. The image below shows where this can be found in Internet Explorer: Once the page is displayed.htm. provided you did not place it in another directory on the disk. Most browsers will display the page when you hit enter. "Open Local File". Another option you have.a:\test. ”Open File". especially if you hate typing paths all day. you will see something like the following: Hi there. is to use the "Open Page" option. or a similar phrase. go to the "File" menu in your web browser. you have just written your first web page! 6 . Look for an option that says "Open Page".

Attributes Attributes are associated with each tag to further define the tags. On this page.Many browsers will ignore badly-formed HTML documents. 7 . Tags Tags are elements of the HTML document used to specify how the document should be displayed by the browser.Tags & Attributes HTML Tags HTML stands for (H)yper(T)ext (M)arkup (L)anguage. In fact. In HTML.. It has certain tags and attributes defined.HTML tag codes are case-insensitive. > A couple of other notes before we dive into the tutorial: . each tag has its own specific meaning. In other words. and is geared towards document display over the World Wide Web. you may think of this tutorial as an introduction to the tags that are commonly used in writing HTML. . The general syntax is as follows: <tag attribute 1 = "value" attribute 2 = "value" . Opera. Mozilla. it is often okay to have a tag without the corresponding closing tag. and Safari. we will introduce the notion of tags and attributes. HTML documents can be viewed in browsers such as Internet Explorer. which is (in general) common across all different browsers..

this is just an example of a tag that requires no closing tag to follow it. So. An HTML tag will always begin with a "less than" sign. but will have a forward slash before the command. An example would be the image tag. You would place this before the text you want to underline. <U>. if you would like to underline the phrase "HTML Rules!". Read through and see if you can guess what the different tags will do: (Don't worry. you do not need to capitalize the tags. This signals the beginning of an HTML file. This is called an opening tag. like this: >. So: <U> Underline Me! </U> Is the same as: <U>Underline Me!</U> Is the same as: <U> Underline Me! </U> A basic HTML file will have the format below. I will explain all the extra stuff later. In order to end the underlining. An example would be the tag used to underline text. 8 . Other examples would be a line break: <BR>. go through and find the pairs of opening and closing tags. A closing tag will always be the same as the opening tag. you must use a closing tag. <P> is the same as <p>. like this: <. It looks like this: <IMG SRC="myimage. Also. like this: </U>. The tags will end with a "greater than" sign. which begins the operation you wish to perform. which will place an image on the page. I'll explain them at the end of the example.HTML: Basic Format Now we are able to start learning about HTML tags. and a paragraph: <P>. You can also use as much space between things as you like. a horizontal line: <HR>. </BODY> </HTML> Okay. The first one we see is <HTML>.gif">. to make sense of this.) <HTML> <HEAD> <TITLE>I Love HTML</TITLE> </HEAD> <BODY> Everything displayed on your page will be in here. you would write the following in your text editor: <U>HTML Rules!</U> The result of this would be: HTML Rules! Not all tags will require a closing tag.

The <TITLE> tag allows you to create a title for your page. This opens a section in which you can title your page. and as the name of the browser window. as they are the beginning and end of your page. 9 . is at the very end of the document. in the example. though). and add other descriptive information to the page. Everything (tags. the only part of the HEAD section we will deal with is the TITLE. The <BODY> tag opens the section that will be displayed in the web browser. use keywords. the title is "I Love HTML" (That's not true all the time. The next tag we see is the <HEAD> tag. it signals the end of the HTML document. This is where most of our work will be done.The closing tag . All we have is a line of text aligned to the left of the screen. For instance. The browser would display this: Everything displayed on your page will be in here. The title is only used for bookmarks. The section ends with the </HEAD> tag. use </BODY>. </HTML>. It will not show up on your web page unless you type it in the BODY section (explained below). The above example makes a rather boring web page (even worse than the one in the previous tutorial). Well. At this time. images) should be between these two tags. To end your title. let's go to the next tutorial and see if we can add a little life to our page of text. text. search engines. which brings us to the next tag. To end the body section. As you might have guessed. Yuck. use the </TITLE> tag.

. To do this.. Let's start by giving you some tags to work with: <B></B> This is the tag for bold text. Example: <B>Howdy</B> This will show up on your page like this: Howdy Here are a few more to start working with: <U></U> Underline text <U>Underline Me!</U> Underline Me! <I></I> Italics <I>Isn't this fun?</I> Isn't this fun? <STRIKE></STRIKE> <STRIKE>You're Out!</STRIKE> You're Out! <CENTER></CENTER> <CENTER>This centers text on the page</CENTER> This centers text on the page Having fun yet? You can also use more than one tag at a time. which makes me cool! Does the order of the tags make a difference? In this case. However..and remember to close both tags afterwards. which makes me cool!</I></B> This will show up like this: I am bold AND Italic.like this: <B><I>I am bold AND Italic...The Text Tags How to use HTML tags to manipulate your text To start making our text appear in different ways. and will help when the order does matter! (such as placing the 10 . working from inside out will help you see your code better. it wouldn't matter which way you opened and closed the tags. Let's say you wanted something in bold and italics... just place both opening tags before the text.

. Here's another way to look at working inside out. The effect ends when each one of those tags is closed by it's closing tag. the bold and italics were closed before the word "tagging". Italic.</HTML> tag before the </BODY> tag). like this: <CENTER><B><I>Look at me now!</I></B></CENTER> Look at me now! 11 . Use the <CENTER> tag. it's nice to have a way to place things in the center of the page. This caused the "tagging me!" portion to be underlined. I could write the HTML this way: <B> <I> I am bold AND Italic. So lets try three things: Bold. Since the default alignment of everything is to the left.but the underline remained open until the end of the exclamation. which makes me cool! </I> </B> This could get rather tedious.. and underline! <B><I><U>Would you stop tagging me!</B></I></U> This will give us: Would you stop tagging me! But this: <U><I><B>Would you stop</B></I>tagging me!</U> would give us this! Would you stop tagging me! As you can see. So let's do just that. Anything you place between the <CENTER> and </CENTER> tags will be centered on the page.. Here is an example: <CENTER>I'm in the middle!</CENTER> This will give us the following: I'm in the middle! You can also use it with one or more of the other tags above. All you need to remember is that the text you have written is affected by every tag before it that has not been closed. while not being affected by the bold or italics tags! Now let's use the center tag from above.

.Headings and Paragraphs Using Headings.. Paragraphs. a line break is like hitting the "enter" key when you are writing text. The tag for a line break is <BR>. and Line Breaks These tags are good for creating titles or section headings..</H6> You must have good vision. When you insert this tag in your document. The browser will not go to the next line until it runs out of space. the contents will go to the next line. Here is an example: End this line now!!<BR>Thanks! This will generate the following: End this line now!! Thanks! Basically.</H5> Smaller Still. Now let's move on to a line break.. Here are some examples: <H1>Large Heading!</H1> will give us: Large Heading! <H2>Heading 2</H2> Heading 2 <H3>Heading 3</H3> Heading 3 <H4>Getting Small</H4> Getting Small <H5>Smaller Still. <H6>You must have good vision.... Okay. The <BR> tag does not need a closing tag afterward.. or sees a tag that will 12 . I think you get the idea here.

force it to the next line. like this: <P> This paragraph needs a visual ending! </P> <P> 13 . This tag will skip a vertical space after going to the next line. This gives us: Hello. <P> This is a new paragraph. <BR> This is the next line. To make the text move to the next line.: This is some cool stuff. This tag is good for skipping a line quickly and for knowing where you wanted a new paragraph to begin. This is a new paragraph. How about an example? Well. I want a new line. This is the next line. I want a new line. but if you'd like to add one for your own reference. you place a </P> where you would like the paragraph to end.<BR> I want<BR> a new line. Now this will do what we wanted it to do: Hello. Now. use your <BR> tag from above: Hello. let's move on to the paragraph tag. as though you had typed <BR> twice. O. Is this cool or what? This will give us the following: This is some cool stuff. <P>. Is this cool or what? The paragraph tag does not require a closing tag. So typing the following in your text editor will display only one line of text in the browser: Hello. I want a new line.K.

<BR> and the end. like this: <P> This paragraph needs a visual ending! <P> Here is a new paragraph. 14 .Here is a new paragraph... </P> This will give you the same thing as using just the opening <P> tags.. Both of these will give you this: This paragraph needs a visual ending! Here is a new paragraph...<BR> and the end. and the end.....

sign: <FONT SIZE="-2">Hey. This is done with the following tag: <FONT SIZE="x">text to change</FONT> "x" will be replaced by a number with a + or .Manipulating Color Font Size and How to change font sizes and colors now we want to see how to change the font size. I'm Small!</FONT> Will give us this: Hey. So let's say you wanted to make the font larger. You can use the tag with a +2.sign in front of it. you can make the font smaller in the same way. like this: <FONT SIZE="+2">I'm a big sentence now!</FONT> This will give us the following: I'm a big sentence now! Likewise. using the . I'm Small! Here are some more size examples for you: <FONT SIZE="+4">Hey There</FONT> Hey There <FONT SIZE="+3">Hey There</FONT> Hey There <FONT SIZE="+2">Hey There</FONT> Hey There <FONT SIZE="+1">Hey There</FONT> Hey There 15 .

and close only one tag. The hexidecimal representation begins with a # sign and is followed by six letters and/or numbers. Now suppose you want to change the size AND the color. click here . you can use two FONT tags and remember to close them both. This is done in much the same way. Here is the example: <FONT COLOR="#FF0000">I'm red!</FONT> I'm red! That is a # sign. suppose you want to change the font color. This is done like this: <FONT SIZE="+2" COLOR="gold">I am gold!</FONT> I am gold! 16 . Here is the tag: <FONT COLOR="color"> We replace the word color with a color name or the hexidecimal color value. like this: <FONT SIZE="+2"><FONT COLOR="gold">I am gold!</FONT></FONT> I am gold! Also. you can use the SIZE and COLOR declarations inside the same tag. Let's do one using the color name to begin: <FONT COLOR="red">I'm red!</FONT> I'm red! Now let's use the hexidecimal value for red. To do this. but you may want to have the hex code for more complicated colors. two F's and four zeros. Usually it's easier to remeber the color names. If you want to see a sample list of color names and hex codes.<FONT SIZE="-1">Hey There</FONT> Hey There <FONT SIZE="-2">Hey There</FONT> Hey There <FONT SIZE="-3">Can you read this?</FONT> Can you read this? Now.

you will only see one space in the browser. you place the reference &nbsp. or how to get a copyright symbol to show up? Then let's see how right now! Special characters are placed on your page by using a special reference to the character you want to use. for a total of five spaces.there! This gives us two spaces between "Hello" and "there!". The reference will begin with an ampersand (&). and 4 additional spaces between the two words. You use it the same way as an extra space. where you would like to add the extra space. and end with a semicolon (. The web browser will see the first space. we forced the browser to add an extra space between the two words.. So as an example. like this: Hello &nbsp.&nbsp. It will be displayed like this: Hello There! The other one we will discuss is the copyright symbol. 1999 by me! This page Copyright © 1999 by me! 17 . let's say you wanted to place an extra space between two words. but after that additional spaces will make no difference-. Here's an example: This page Copyright &copy. reference. by placing its reference where you would like to see the symbol on the page. like this: Hello there! The first space is added just using the "space" bar on the keyboard. have you been wondering how to add an extra space on your page. reference. You can add as many spaces as you would like by repeating the &nbsp.&nbsp. The reference for a copyright symbol is &copy.There! This will create the first space.&nbsp.Special Characters How to use special characters in HTML So. Here is what you would do: Hello &nbsp.) . To do this. will be followed by some text or numbers. By adding the &nbsp.

This will work for any page because we are using the absolute url. Before you try this. you may use a shortcut called a "local url". so to create a link to us.sevenhills. it will be) Now. Look in your location box near the top of your web browser. which is http://www. inside the quote marks. As another example. you should see the cursor change into a pointing hand. just type in the address for your page inside the link tag. The </A> is the closing tag. your browser will simply display this page again. which means we are using the complete address to every page we are creating a link to.sevenhills. rather than typing the full url inside the tag. So. if you would like to link to our site. let's create a link to this particular page.. be certain any file you want to create a local url link to is in the same directory as the page you are editing..Linking to Other Pages How to link to other pages in HTML let's start out by seeing what tag we use for linking: <A HREF="http://www. Great isn't it? Now. you will end up at our home page.com">goto Sevenhills</A> It will show up on your page like this: goto Sevenhills See how the text was colorized and underlined? In most cases.. you would place our url. place this command on the page where you would like the link to show up: <A HREF="http://www. Our url is http://www. If you have all of your files in the same directory.com/index1. (In most cases. insert this url into the link tag: <A HREF="http://www. like this: 18 . The mouse attribute comes in handy when a page has a whole lot of underlined text. If you move your mouse over the link. you can just use the filename. this will indicate the text is a link. You should see the url for this page. To create the link. If you click on the link from the first example..sevenhills. if you want to link to your own pages from your home page.com/index1.sevenhills.sevenhills. and the HREF=" " is asking for a location to link to. or net address.com">Display Text</A> The A stands for anchor.htm .com. The text between the tags is what will show up on your web page as a link.htm">Linking to Other Pages</A> Which gives us this link: Linking to Other Pages If you click on this link right now.

<A HREF="linking. but we didn't have to write as much. If you would like to see some related tutorials. Typing in the full address will allow the link to work no matter where it is located on the internet. always use the absolute url. try one of these: Changing the Link Color Using an Image as a Link Linking Within the Same Page 19 .htm">Linking to Other Pages</A> This will create the same link we just did. Linking to Other Pages If you aren't sure or have doubts.

jpg . The source of the image is going to be the net address of the image.sevenhills. I would type: <IMG SRC="next. go ahead and use the full address just to be sure it will work correctly. Now let's work with a real example. I would use the full internet address. you will probably want to convert them to . If you have images in other file formats.disney. This can be done with most image editing programs. let's take a look at the image tag: <IMG SRC="image.gif. Most often.jpg"> If you aren't sure. The SRC stands for source. So. have you been wondering how to add an image to your page? Well. Now. One image I have on this site is called "next. you would use this url as the image source: <IMG SRC="http://www. like this: <IMG SRC="image.jpg"> Otherwise. You could also use a . The address for the image is: http://www. like this: <IMG SRC="http://www.gif or . if your images are in a directory other than the one your html document is in.gif"> The filename does not have to end with .com/pictures/image.gif"> The IMG stands for image. you will want to link to it using the full address of the image.com/pictures/image. If my image and html file were in the same directory.jpg file as well.com/images/next.sevenhills. like this: 20 .jpg . you will be able to just type the filename of the image here. if your image is located at http://www.com/images/next.jpg".Adding Images to Your Page How to place images on your page So.jpg"> Either option would display the image on the page. aligned to the left.disney.jpg . These are the two most common image file extensions used on the internet.

<br> 21 .jpg" align="left"> Now just type in your text and it will wrap around the image.I think this image is in the way.<br> <IMG SRC=".sevenhills. so "image. the image tag would look like this: <IMG SRC="next. but it will allow you to add an image to your page on its own line. like this: <CENTER> <IMG SRC="http://www.. Be sure to use the correct case in your image tags. Here is an example. Now.. If you want to see more on using images.com/images/next. Hmmm.JPG" are considered two different images to the web browser. the filename or address of the image IS case sensitive.jpg" and "IMAGE.jpg"> </CENTER> This will place the image in the center of the screen: Keep in mind./images/next.If you want to center the image on the page. and that's no fun. or the image may not show up. you would place the CENTER tag around the image tag. this doesn't give us everything we could possibly want... this text should wrap around<br> this image like this.. rather than jumping to the bottom of the image..jpg" align="left"> Hello. check out one of these related tutorials: Aligning Images and Wrapping Text Using an Image as a Link Using a Background Image Resizing an Image Using Image "alt" Commands Image Alignment/Wrapping Text How to wrap text around an image To allow text to wrap around an image. you just need to add one of these commands to the image tag: align="left" align="right" So.

"next.com"> <IMG SRC="next. I'll just keep on writing and writing and writing and writing until I'm tired of writing.I'll just keep on writing and<br> writing and writing and writing<br> until I'm tired of writing.I think this image is in the way.. like this: <A HREF="http://www. now we are going to close the link tag at the end of the image tag. you will have to use two things you have already learned.sevenhills. if you wanted to link to our main page... Using an Image as a Link How to link an image To use an image as a link... So.jpg"> OK. Here is what the above code would produce: 22 .sevenhills. 2. and don't close the tag just yet.. How to create a link. The image we are using here is "next.sevenhills.<br> This will give you the following: Hmmm. so that the image tag is between the opening and closing link tags.. Now. you must create a link to the place you want people to go when they click on the picture.jpg"> </A> Now that the image is between the link tags.. How to add an image to the page. you would go ahead and type the opening link tag. but now it is a visual image. Hello. remember my trusty old picture. 1. first. like this: <A HREF="http://www. this text should wrap around this image like this. you would type the following: <A HREF="http://www. don't type any text.jpg". it will operate the same way as a normal link. what did I do? Well.jpg"? I have been using it at the bottom of each page as a link to the next section.com"> <IMG SRC="next.com"> Now.. What we are going to do is place the image tag right after the opening link tag. So.. So..

the border just seems to be added by default on most browsers. you will end up all the way back at our main page.jpg" border="0"> </A> Now. and sometimes this isn't the color you want to use.com"> <IMG SRC="next. and you won't have the extra border around the sides: You can also make the border larger in the same way. 23 . just use a larger number in there.Move the mouse over the image. The only way I know around it is to edit the actual image to where it has the border you want. but what's with the border around the image? Well. To get rid of it. If you click on the image. add this command to the image tag: border="0" Here is an example: <A HREF="http://www. and then set the border="0" in your image tag. and it will turn into the little pointing hand.sevenhills. for instance: Border="5" The drawback to the border is that it insists on being the color of your link color. that's good. the picture will be a link. Well.

I place the text "next" in the alt command. This is the alt command: alt="something you want to write" Place this inside the image tag: <IMG SRC="image. if you have a really new browser. 24 . or in the case they have image loading turned off to so pages will load faster.jpg" alt="next"> To see this work. the image alt command is used to display text in the case someone visits your page with a browser that can't show images. you can move your mouse over the image and it will display the alt text right there for you.gif" alt="something you want to write"> You place this command inside the image tag for the image you want to display alternate text for. You can then scroll down to the bottom right and see the word "next" where the image used to be. and that is what will be seen if someone sees the page with no images. this is a handy way to let people know what the image was supposed to do.jpg" image at the bottom of these pages. you will probably have to disable image loading and reload this page.Using Image "alt" Commands An alternative to the picture Okay. One image I do this with is my "next. Here is the example: <IMG SRC="next. If you have images as links. Of course.

<SUB> and <SUP> These tags are used to place a number or words slightly above or below your normal text. if (x==1) y=2. <PRE>. y=2. The <PRE> Tag The <PRE> tag is used when you want to keep the same amount of whitespace on your web page as you have in your html code in your text editor. </PRE> And this somewhat redundant code gives you this: x=1. 25 . but there are other times you may wish to use them. y=2.Some Extra Text Tags There are a few more tags you might like to try while you are creating your pages. The tags I will be talking about in this section are <SUB>. <NOBR>. <SUP>. if (x==1) y=2. and the Netscape only <BLINK> tag. The <SUB> tag works like this: Area<SUB>1</SUB> The result is this: Area1 And the <SUP> tag allows you to use exponents if you need to: X<SUP>2</SUP> + Y<SUP>2</SUP> = 0 And this gives you: X2 + Y2 = 0 These two tags are most useful if you are writing mathematical equations and such on your page. <WBR>. Here is an example: <PRE> x=1. This is useful when you have to post programming code.

like this: <NOBR> I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long <WBR> long long long long long long long long long long long long long long long long long long long long long long long long long long long long time. long long long long long long long long long long long long long long long long long long long long long long long long long long long long The <BLINK> Tag Yes. Here is an example: <NOBR> I'll just keep writing like long long long long long long long long long long long long long long long long long long </NOBR> this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long time. You can use the <WBR> tag inside the NOBR tags to force a line break if you want or need to do so. When viewed on your web page. this is the tag everyone has been complaining about. this will be one really long line. you probably had to scroll to the right to see the end of that line. like this: I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long time. long long long long long long long long long long long long long long long long long long long long long long long long long long long long Unless you had a monitor with some pretty high resolution. even after reaching the end of someone's browser window. inside the <PRE> tags.Notice how we didn't need to use <BR> or &nbsp. If you are using Netscape you can see the following reason why viewers get annoyed by this tag: 26 . <NOBR> and <WBR> Any text you place between the <NOBR> and the </NOBR> tags will not break to the next line. This can save you some headaches from writing in line breaks and spaces manually so often. </NOBR> Now you will have two lines that are not quite as long (though still pretty long in 640x480): I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long time.

... it can help point out important things you want people to see. but you can get the general idea. you won't see the text blink. Just avoid the +10 font size.Here is an example: This rule is <BLINK>very</BLINK> important! This gives you the following: This rule is very important! 27 . if the tag is used in a better way.LOOK AT ME NOW!!!!!! If you have IE. Actually.

. In this way. you can leave yourself notes so that you don't forget something when you come back later to redesign the page. I feel invisible though.This image should be aligned to the right. you use two dashes (--) followed directly by a greater than sign (>)... and have alt text --> <IMG SRC="mypet.Adding HTML Comments Using comments in your html code Comments can be a nice way to help yourself when you are coding your web page. After this.I am a comment. <!-. Comments are invisible to a web browser when it displays your web page. you begin with a less than sign (<) followed directly by an exclaimation point (!) and two dashes (--). --> You can comment on multiple lines. you type in your coments. --> To look at something more useful. how is it done? To write a comment. To end the comment. unless you look at the page source code. just be sure you remember to end the comment! <!-You can't see me. The only way to view comments is to look at the source (html) code of the web page.gif" align="right" alt="Look at my Kitty Cat!"> 28 . So. you could use a comment to remind yourself that a section of code is supposed to perform a certain task: <!-.

This will create a list with bullets next to the list items.Using HTML Lists How to add an HTML list to your page Have you been wanting to add lists to your page? Well. and the closing tag is. 29 .. we need a tag to begin and end the entire list. you guessed it.. to set off each item in your list.. the list is indented somewhat from the rest of the text. Item two is much shorter! Item three is somewhere in between. you use the <LI> tag. The opening tag is <UL>. You can indent further by adding more <UL> tags.. Here is a sample of indenting further into the page: <UL> <UL> <UL> <LI>I am item one <LI>I am item two </UL> </UL> </UL> This will give us the following indented list:   I am item one I am item two Be careful about using the <CENTER> tag around your lists. let's use an unordered list.. here is the way to add those html lists to your web pages. For starters. you will get more of a mess than a straight list: • • • This is item one. as long as you remember to close every one of them. If each list item is not the same length. Here is a sample list with two list items: <UL> <LI>I am item one <LI>I am item two </UL> This will give us the bulleted list below: • • I am item one I am item two Notice the <LI> tags do not require a closing tag. Now. how nice it is to be number one.yep...</UL>. To begin. followed by your text. Also.

you would use <OL> </OL>. use the indention method above until it hits the center of the screen (this can mess up in different screen resolutions. Item 2 3. Item 1 2. Item 3 30 . You can also use an ordered list in the same way you use the unordered list. though).If you really need the list further in on the page. like this: <OL> <LI>Item 1 <LI>Item 2 <LI>Item 3 </OL> This gives you a numbered list rather than the bulleted list: 1. Instead of using <UL> </UL>. or you can try using a Table to align the text instead.

You can set this to any color you would like to use. bgcolor="color" This changes the background color of your page. Here is what a body tag with serveral additions would look like: <BODY bgcolor="black" text="red" link="yellow" alink="orange" vlink="white" background="image. click here..gif"> Pretty long tag. Below is a brief explaination of each attribute. alink="color" This changes the color of an active link on your page. For a list of common colors and hex codes. (If you are moving through the tutorials in order. The options you don't use will be set to the web browser's default values. you can change serveral things in the body of your document by adding extra commands to the <BODY> tag. which is a link that has just been clicked on by a user's mouse. Just replace color above with a color name or hex code. For a list of common colors and hex codes. text="color" This changes the default text color the browser will display on your page. The default setting for a non-visited link is usually blue. we will eventually get to each one of these. click here. you can use as many or as few of these add-ons as you wish.Using BODY Tag Attributes How to use body tag attributes to enhance your page When you create a web page. vlink="color" 31 . Just replace color above with a color name or hex code.) So here we go. You can set this to any color you would like to use. click here. but is usually gray or white. You can set this to any color you would like to use. The default setting for text color is black. Just replace color above with a color name or hex code. isn't it? Well.. The default setting varies with your browser. Just replace color above with a color name or hex code. with a link to the tutorial for each one. For a list of common colors and hex codes. For a list of common colors and hex codes. click here. You can set this to any color you would like to use. link="color" This changes the color of all of the non-visited links on your page..

and add color your pages! 32 . click here.gif" This adds a background image to your page. The default setting for a visited link is usually violet. background="image. Beautiful! Now just use any color you like in the command. add it by placing a space after the word BODY and then type the command. like this: <BODY text="#000000" link="#A6CAF0" bgcolor="#808080"> And of course. If you don't use a background image. the browser will use your background color or its default background color. the background image will take the place of any background color you may have specified.This changes the color of a visited link on your page. So. For a list of some common color names and hex codes. click here. You can set this to any color you would like to use. replace the word gray inside the quote marks with a color name or a color hex code. If you use this attribute. the command may not be there at all. For a list of common colors and hex codes. if you wanted to change the background color to green. you will need to begin by finding the <BODY> tag. just add it in like this: <BODY bgcolor="gray"> To change the background color. your page will have a green background. look for a command after the word BODY that says bgcolor="color" . Just replace color above with a color name or hex code. you would type: <BODY bgcolor="green"> Or you could use the hex code for green: <BODY bgcolor="#008000"> After doing this. Once you have found the tag. It may look like this: <BODY bgcolor="gray"> Or the tag may have more commands inside and use hex codes. If this is the case. like this: <BODY bgcolor="gray" text="#000000" link="#A6CAF0"> Or if you don't have any other commands. Using a Background Color Add or change the background color on your page If you want to use a background color on your page.

to change your default text color in your HTML page. Now. You may have something like this: <BODY text="black"> You may also see a weird number/letter combination. click here. look for the phrase text="" somewhere after the word BODY. For a list of some common color names and hex codes. if you want to change the text color to red. add this one onto the end. add it to your BODY tag like one of the examples above. If you don't have the extra command yet. you could use one of the following: Using a color name: <BODY text="red"> Or using a hex code: <BODY text="#FF0000"> 33 . you may not see either of these. leaving a space after the previous command. like this: <BODY bgcolor="blue" text="black"> Now. So.Changing the Default Text Color How to change the default font color on your page Okay. If you have other commands. you will need to find your body tag. or you may be creating the page from scratch. if you'd like to change the color. like this: <BODY text="#000000"> Of course. replace the black between the quote marks with a color name or hex code.

you will need to begin by finding the <BODY> tag. The commands are: alink="color" vlink="color" For the active link color For the visited link color You might have: <BODY link="blue" alink="blue" vlink="violet"> To change the other colors. So. if you would like to change the link color to red. with a space between the two. For a list of some common color names and hex codes. you replace the word blue inside the quotes with a different color name or hex code. It would look like this: <BODY link="blue"> Or the tag might have some other commands as well: <BODY bgcolor="#000000" text="#FFFFFF" link="#0000FF"> You may also just have the word BODY with nothing else there. Just place a space between each command. do the same as you did for the link color. like this: <BODY link="blue"> Now. to change the link color. click here. you would type the following: <BODY link="red"> Or using the hex code: <BODY link="#FF0000"> Now. and add your colors! 34 . If you need to add the commands. add the command after the word BODY. You can also do the same things for active and visited links by adding or editing their commands. go ahead. If so. Now look for a command after the word BODY that says link="color". all the links on your page will be colored red rather than blue.Changing the Link Color How to change the link color on your page If you want to change the link color on your page.

as a real example. If not. like this: <BODY background="http://www. I would type in this: <BODY background="http://www.mysite. if the image I want to use is at http://www.gif"> Now.sevenhills. I could use the image by typing in just the filename.gif"> Your image should have the file extension . skip a space. So. and it is in the same directory as the page we are editing.com/image1. if your image file is located in the same directory as your html file.jpg".jpg .jpg"> Now. you may see just the word BODY. you can just type the filename of the image rather than the full url.com/images/next.sevenhills. So. or you may see a string of commands afterward.jpg"> 35 . Now. and type the following: background=" " Now your body tag should look something like this (and may have more commands): <BODY background=" "> Now. So. I would insert this into the command. I will use an image from my server as a background on a page.com/images/next. So. we can type the command this way: <BODY background="image2.com/image1. if I put an html file in my "images" directory.Using a Background Image How to add a background image to your page To add a background image to your page. The url for the image is http://www.gif to be the background image. When you have found it.jpg . It may look something like this: <BODY bgcolor="#FFFFFF" text="#000000"> What we are going to do is add a command after the word BODY. you will want to covert it to one of these file types. like this: <BODY background="next. you will need to locate the <BODY> tag in your document.gif or . The name of the image is "next. we are going to place the url of the image inside the quotation marks. go to the end of the word BODY.mysite. to use this as a background. if we want image2. which is available as shareware from JASC. One program that will do this is Paint Shop Pro.gif .

Well.Resizing Images How to resize your images Okay. I'm going to add these two commands inside the image tag: width=" " and height=" " I'm going to place the commands after the initial command. or maybe you wanted a larger version of the image on the screen.jpg". IMG SRC="next.jpg". Here's what it would look like: Now. The width and height are usually written in pixels. we will just insert larger numbers for the width and height: <IMG SRC="next. but it's just not the right size to go where you want it to go. the picture will be the new height and width I specified. to change the size of the image.jpg" width=" " height=" "> Now. let's say I wanted it to be 75 pixels wide and 40 pixels high. to make the image larger. I'm going to place numbers inside those quotation marks. like this: <IMG SRC="next. The picture looks like this: So. Maybe the image takes up the whole screen. to make the image smaller.jpg" width="300" height="200"> 36 . The tag will now look like this: <IMG SRC="next.jpg" width="75" height="40"> Now. suppose I want to make it smaller. Let's take a look at an example. when I reload my page. I would then place these numbers into the commands. All I need to do is know the original width and height of my image. A typical screen is about 800 pixels wide and 600 pixels in height (though this varies with different video cards and moniters). you can resize the image by adding width and height commands to your image tag. Well. Well. you have an image you want to use. My image turns out to be 106 pixels wide and 65 pixels in height. I have an image called "next.

if you want to make the width 75. So. Besides. and then find a height that would keep the aspect ratio of 106/65. if I'm making the image smaller.63 . you get about 1. In this case.Now the image looks like this: As you can see. One reason for this is that I didn't keep the aspect ratio the same. You can guess at it for awhile.63 . I would use 46 as the height: <IMG SRC="next. So. the paint program will make the file size smaller 37 . here it is: 75/height = 1.0123 .63 Now take the answer and round up or down. you need to find the height that will make the ratio as close as possible to 1. just for the ease of use. or if you like solving equations. the images became somewhat distorted when I resized them. I usually use my image program to do this. When you calculate 106/65. Since the image was originally 106x65. I would have to decide on a width.jpg" width="75" height="46"> Now it looks like this: If you don't want to deal with math all the time (like me). you can also resize it with a paint or image program (which will do the calculations for you) and upload the new version of the picture to your server. it comes out to about 46.

This just makes it easy to see where we are going to end up. Maybe you would like to give someone a way back to the top of the page when they are at the bottom.. or any other place Okay. Now. You could link to any part of the page. if you create an anchor named "cool". It can make navigating some pages a whole lot easier. You can link to it from any other part of the page. go anywhere between the body tags and type this link: <A HREF="#top">Back to the Top</A> If you click on this link.. you will be sent back to the top of the page. the top. the 500th word. So. Now type the following tag: <A NAME="top"></A> You can place any name you wish inside the quotes. middle.Linking Within a Single Page Jump to the top. go to the top of the body section (right after the body tag). 38 .. the bottom. you link to that anchor by using "#cool". Or maybe you want to divide it into sections and use a table of contents at the top.. but for now. lets say you have one page that is pretty long. You can place one at the third paragraph. like this: <A NAME="cool"></A> -----The anchor name <A HREF="#cool">To the Cool Section of this page</A> section -----Linking to the named You can place a named anchor anyplace on your page. let's say you want to create a link to the top of your page. which is a specific area of your page you want to make a link to. You can try one I made on this page by clicking on the link below: Back to top The # sign is there to let the browser know the destination is a named anchor within this page. the way to do this is to use a named anchor. To do this. Well.

com in that space. your browser will bring up a window for you to send me email. notice that when you click it. Send me whatever you want. Here is an example. to create an email link to myself.com">Give me some mail!</A> Here is the resulting link: Give me some mail! If you click on the link. I would place info@sevenhills. all you need to do is use the standard link tag.The E-mail Link How to create an email link To create an e-mail link on your page. like this: <A HREF="mailto:info@sevenhills. Mail Me! 39 . you will use your e-mail address rather than a web address.com?subject=Enquiry">Mail Me!</A> The example link is below...maybe your joke of the day or something! You can also create the subject of the message so the viewer doesn't have to fill in something in the subject line. After the "mailto:".your e-mail address. You do this by adding a "?" at the end of your e-mail address and then your subject... like this: <A HREF="mailto:your_email_address">E-mail Me!</A> Yes. with my e-mail address already filled in. like this: <A HREF="mailto:info@sevenhills. all you need to do is replace the your_email_address with . The trick is in what you use as the address of the link. the subject field of your email message is already filled in with "Enquiry". you use "mailto:" rather than "http://" to begin the address. To force the browser to read it as an e-mail link.

and if you run a site with a partner you can both get an e-mail when someone uses that link.com"> Mail Me</A> With either of these.com&cc=other@other. if you want to combine more than one of these commands after the question mark.com?bcc=friend@friend.com?bcc=friend@friend. It was done using a "question mark" followed by subject= and then the subject: <A HREF="mailto:you@you. other@other. if you want a subject and a blind carbon copy. a blind carbon copy recipient.com"> Mail Me</A> If you want all three. there are a couple of extras you can also add. you can send the copies to multiple addresses by separating them with commas: <A HREF="mailto:you@you.The E-mail Link: More More tricks for the email link we saw how to add the subject to a message through the e-mail link.com?cc=friend@friend. you add the cc= command after the question mark. except you use the bcc= command instead: <A HREF="mailto:you@you.com? subject=Hi&bcc=friend@friend.com"> Mail Me</A> The same goes for a blind carbon copy. followed by the e-mail address of the person you want to send the carbon copy to: <A HREF="mailto:you@you. use the "&" sign again: <A HREF="mailto:you@you. you add them in using an "&" sign at the end of the first command.com?subject=Hi">Mail Me</A> On top of adding the subject. You can add a carbon copy recipient.com.com"> Mail Me</A> With that. or use a combination of the subject with either or both of these. To send a carbon copy. you can have some more fun with your e-mail links-. 40 . For instance.com"> Mail Me</A> Now.com?subject=Hi&bcc=friend@friend. it would look like this: <A HREF="mailto:you@you.

The following attributes are commonly used to define the properties of this row: • • • bgcolor: This specifies the background color for this row. Can be specified in pixels or in relative terms (for example. The color value may be specified as the color name or the six-character color code. <tr> The <tr> tag specifies the presence of a row. The color value may be specified as the color name or the six-character color code. The following attributes are commonly used to define the properties of this table: • • • • • Width: This specifies the width of the table. The areas enclosed by the cell walls are the maximum amount of area that text can be displayed in a cell. The number indicates the thickness of the border. bgcolor: This specifies the background color for this column. Border: This specifies whether the table will have a border.HTML Table This section lists the tags often used with HTML tables: <table>. rowspan: This specifies the number of rows this particular row occupies. cellspacing: The amount spacing between the cell wall and the cell border. bgcolor: This specifies the background color for this table. cellpadding: The amount padding between cells and the each cell wall in a table. Example 1 HTML: <table border=1> <tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr> 41 . Height: This specifies the height of the row. <tr>. 100%). and <td>. colspan: This specifies the number of columns this particular column occupies. This is very often used in conjunction with the <tr> and the <td> tags. <table> The <table> tag specifies the presence of a table. 50%). Columns are specified within each row. Can be specified in pixels or in relative terms (for example. The color value may be specified as the color name or the six-character color code. The following attributes are commonly used to define the properties of this column: • • • • valign: Width: This specifies the width of the column. <td> The <tr> tag specifies the presence of a column.

<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr> </table> Display: Element 1 Element 4 Element 2 Element 5 Element 3 Element 6 Example 2 HTML: <table border=1 width=500> <tr><td width=200>Element 1</td><td width=150>Element 2</td><td width=150>Element 3</td></tr> <tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr> </table> Display: Element 1 Element 4 Element 2 Element 5 Element 3 Element 6 Example 3 HTML: <table border=1 width=500> <tr bgcolor=red><td width=200><b>Element 1</b></td><td width=150>Element 2</td><td width=150>Element 3</td></tr> <tr><td bgcolor=55ff55>Element 4</td><td>Element 5</td><td><i>Element 6</i></td></tr> </table> Display: Element 1 Element 4 Element 2 Element 5 Element 3 Element 6 Example 4 HTML: <table border=1> <tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr> <tr><td colspan=2>Element 4</td><td>Element 5</td></tr> </table> Display: Element 1 Element 2 Element 3 Element 4 Element 5 42 .

Example 5: cellspacing and cellpadding attributes. HTML: <table border=1 cellspacing=10 cellpadding=10> <tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr> <tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr> </table> Display: Element 1 Element 4 Element 2 Element 5 Element 3 Element 6 HTML Frame This section introduces the tags related to HTML frames: <frameset> and <frame>. 43 . HTML: <table border=1 cellspacing=0 cellpadding=10> <tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr> <tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr> </table> Display: Element 1 Element 4 Element 2 Element 5 Element 3 Element 6 Example 7: cellspacing and cellpadding attributes. HTML: <table border=1 cellspacing=10 cellpadding=0> <tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr> <tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr> </table> Display: Element 1 Element 4 Element 2 Element 5 Element 3 Element 6 Example 6: cellspacing and cellpadding attributes.

please consider using the frame feature carefully. Rows: Specifies the number of rows. as well as the width of each row.<frameset> The <frameset> tag specifies the number of columns/rows on a frame.70%" means that there will be two columns. the first row occupies 40% of the available space. For example. The possible values are {yes|no|auto}. Therefore. while the second column occupies 70% of the available space. the first column occupies 30% of the available space. • <frame> The <frame> tag specifies the properties within a particular frame. cols="30%.html"> <frame src="frame3. Example 1 HTML: <frameset cols="50%. marginwidth: The margin on the left and right side of the frame.html"> </frameset> <frameset rows="50%.50%"> <frameset rows="100%"> <frame src="frame1.html"> </frameset> </frameset> 44 .50%"> <frame src="frame2. as well as the width of each column. The attributes include: • • • • • src: This attribute specifies the HTML document source. For example. marginheight: The margin on the top and bottom of the frame. Note that search engines typically do not like the use of the frames. noresize: This attribute specifies whether users may resize the frame. 60%" means that there will be two rows. Scrolling: This attribute specifies whether users may scroll up and down within this frame. The attributes include: • Cols: Specifies the number of columns. while the second row occupies 60% of the available space. rows="40%. Note that you may embed a frameset within another frameset.

separated by '&'. the following URL: http://www. data is typically passed as a keyvalue pair.. and its value is 'title'.. The key for the first key-value pair is 'c'.com/example?c=1&d=title has two separate key-value pairs. [section specifying the value for each key] .. <input type=submit value=Go> </form> The text after action= specifies the script to be executed after the user submits the information.HTML Forms Forms are used in HTML to pass data. How are key-value pair specified? They are specified by the <form> tag. The key for the second key-value pair is 'd'. and the value is '1'. This is shown below: The following list gives the most common ways for users to specify the value: • • • • Text input Radio button Checkbox Drop-down menu 45 . <input type=submit> gives a button that the user clicks when she is ready to submit the information. The general format is as follows: <form action=xxx> .. On the web. For example. in this case 'Go'.xyz. The value=Go piece specifies the text appearing on the button.

The key for this textarea input is 'area'. Below is an example. Below is an example: Text example: • þÿ Password: In this type of input. The texts typed appear directly on the web page. The most common scenario is when users have to enter a username and password to enter a site. The texts typed appear directly on the web page. Here. The syntax is <textarea rows= [row height] name=area>. the key for this text input value is 'c'. Here. with [row height] = 2: Text area example: 46 . we get a single-line text box to enter data. we get a single-line text box to enter data. the key for this password input is 'pwd'. The syntax is <input type=password name=pwd>.Text Input One way users can enter data into a HTML document is via text. The syntax is <input type=text name=c>. Below is an example: Text example: • Textbox: In this type of input. The texts typed do not appear directly on the web page. There are three common types of text input: • Text: In this type of input. we get a multi-lin text book to enter data.

such as follows: <input type="radio" name="color" value="red" selected>Red<br> 47 . we'll specify "selected" at the end of the <input> tag. depending on the radio button selected. green. If we want to pre-select a radio button.Radio Button A second type of input is the radio button. or blue. and the values can be either red. the key is color. Radio buttons are used when you want users to be able to select one and only one of the options. Below is an example: Code: <input type="radio" name="color" value="red">Red<br> <input type="radio" name="color" value="green">Green<br> <input type="radio" name="color" value="blue">Blue<br> Red Green Blue In this case.

Check boxes are used when you want users to be able to select more than one of the options. we'll specify "checked" at the end of the <input> tag. and the values can be either red. If we want to pre-select a check box. depending on the check box(es) selected. the key is color. green. the "color" key will then have multiple values. or blue. such as follows: <input type="checkbox" name="color" value="red" checked>Red<br> 48 .Checkbox Another type of input is the check box. If multiple check boxes are checked. Below is an example: Code: <input type="checkbox" name="color" value="red">Red<br> <input type="checkbox" name="color" value="green">Green<br> <input type="checkbox" name="color" value="blue">Blue<br> Red Green Blue In this case.

green.Drop Down Menu Drop down menu is another common way to specify input data.. If we want to pre-select a check box. we'll specify "selected" at the end of the <input> tag. the key is color. Users can select one or more items in a drop-down menu. selecting a state is often done via a drop down menu. Below is an example for a single-selection drop down menu: Code: <select name=color> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> þÿ In this case. we specify "multiple" at the end of the <select> tag. such as follows: <input type="checkbox" name="color" value="red" selected>Red<br> If we want to select multiple items. or blue. i.e. <select name=color multiple> þÿ 49 . depending on the item selected. and the values can be either red. For example.

Sign up to vote on this title
UsefulNot useful