Just
right click it and choose save . . . as . . The add the following to the body of you
page.This is one of the quickest, easiest ways to learn HTML. Wither you plan to use a fancy wysisyet (What you see is what you get) web editors or a basic text editor such as NotePad on Windows, or SimpleText on the Mac. You will find a knowedge of the HTML language esentual to building the web page and getting them to look exactly the way you want on any computer, size monitor and resilution. After learning the basics you'll want to move on to A Little Style and A Second Look at HTML.
In this page you will learn how to:
If your alrady know this stuff try my A Second Look at HTML page.
A quick easy way to get started is to create a trmplate. First, create a new folder to store you web pages. Next, open a new file in your text editor and save it as "template.htm". Now ad the following to your page.
| <html><head> <title>Template<title> <body> My First Web Page </body><html> |
Then save the file again. Finall open you new page in a web browser, It should be bank. It's a good practice to save earily and save offten. You'll also need to readload you page in the browser each time you add something. You've just set up a basic structure for you first web page. If your using windows 95 or later, check out the page in you task bar. Now we're ready to add stuff to the page to the page that so up in the browser. We'll start with the title. Add you title between the title tags.
Everytime you add to your web page you should save and reload it in your browser. Once again, if your using windows 95 or later, check out the page in you task bar. Window put the page title in the task bar, or at least as much as will fit.
HTML does not reconize spaces beond the first one or returns. When you need more than one space in a row you'll need to use a non-breaking space. It looks like this: The & start as special chacter. The ; ends the speical chacter and the letters stand for non-breaking space.Try entering the following in the body section of your page like this:
| . . . <body> this is single spaced this is double spaced this is triple spaced </body> . . . |
Save it and view it in your browser. Then add the non-breaking spaces. Then save and reload it in you browser to see the difference. Notice there are two spaces on the doubled spaced line and three on the triple spaced. From here on I will be leaving the tags before and after the body tags in the examples, but you'll need to leave them on your page.
| . . . <body> this is single spaced this is double spaced this is triple spaced </body> . . . |
Yon can use a line break where ever you want to start a new line. Otherwise the text will just wrap to fit the browser. Add the line breaks to your page. Then save it a reload it in your browser.
| . . . <body> this is single spaced<br> this   is   double   spaced<br>    this    is    triple    spaced<br>    and here are a bunch or spaces </body> . . . |
Delete everything between the body tags and we'll be ready to start building a real page.
In HTML, if you haven't already noticed, all the code is place in greater than less than (< >) signs. You should also know everthing that shows up in the browser must be the boky of the page. The body starts with <body> and ends with </body> Now let's make you title look like a headline. Just add the headline tags around the first line of the body of your page. To conserve space I will be leaving the tags that come before and after the body, but you'll need to leave the in your page. Here's how to add a title.
| . . . <body> <h1>Put Your Title Here Too</h1> We can a subtitle using a smaller headline. <h3>Add a subtilte here</h3> Here how to add paragraphs to your page. <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> </body> . . . |
The <p> </p> tags as a blank line before and after a paragraph without duplacating blank lines. You you can a new line without a blank line using the line break tag. This is one of the few tag the don't get a closing tag. Try it.
| . . . <body> <p>This is the first paragraph. Place line breaks right where you want to break the line.<br> Then finish the paragraph</p> <p>This is the second paragraph.</p> </body> . . . |
You can align paragraphs by adding the align attribute to the paragraph tag. Here's a coupe of exampls.
| . . . <body> <p align="right">This is align right</p> <p align="center">This is align center</p> <p align="justify">This is align justify</p> <p align="left">This is align left</p> </body> . . . |
Left is the defaule alignment.
You and add bold, italic or urderline anywhere you like just by adding those tags like this.
| . . . <body> <b>bold</b><br> <i>italic</i><br> <u>underlined</u><br> <b><i>bold italic</i></b><br> <i><u>italic underlined</u></i><br> <b><i><u>bold italic underlined</u></i></b><br> </body> . . . |
You can create images in a number of ways, for instance with a digital camera, by scanning an image in, or creating one with a painting or drawing program. Most browsers understand GIF and JPEG image formats, newer browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network, you should avoid using large image files.
Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three formats support options for progressive rendering where a crude version of the image is sent first and progressively refined.
We add images using an image tag and the source attribute ( <img src> ).
The img tag tells the browser to desplay an image and the src attribute names the image
file to desplay, If you have an image on you computer you'd like to add to you page copy
it into the same folder as you web page. If you don't have an image copy this one. Just
right click it and choose save . . . as . . The add the following to the body of you
page.
| . . . <body> <img src="computerBoy.gif"> </body> . . . |
The image should should show up in your browser. However, some people like to turn images off so they can surf faster. If you add the alt atribute to the image tag they will at least see this message,
| . . . <body> <img src="computerBoy.gif" alt="boy typing on a computer"> </body> . . . |
The alt attribute is used to give the short description, in this case "boy typing on a comupter".
Links use the anchor tag and hyper-reference attribute. Like this:
| . . . <body> <a href="peter.html">Link to my other page</a>. </body> . . . |
The text between the <a> and the </a> is used as the caption for the link. Browsers generally display links in blue underlined text by default.
To link to a page outsite you site we you the complete universal locator reference ( URL ). The is what show in the location window in Netscape or the address window in Inter Explorer. You can easily copy and paste the links into your page. Here's a example:
| . . . <body> <a href="http://www.google.com/">Google search engine</a> </body> . . . |
You can use an image into as a link just by placing the image in between the anchor tags. Here's an example.
<a href="computerBoy.gif"><img src="computerBoy.gif" alt="computerBoy.gif"></a>
There are basicly there different types of list you can use.First let's try an orderer list which uses numbers or letters. The ordered tag starts and ends the list and the list tags add items to the list. Here's a couple of examples you can try.
| . . . <body> <ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ol> </body> . . . |
You can change the items to letters be adding the type attribute. Upper and lower case letter are acceptable.
| . . . <body> <ol type="a"> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ol> </body> . . . |
Then there are unordered list which use bulletted to list items. Try it.
| . . . <body> <ul> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ul> </body> . . . |
There are the bullet types you can use, squrare, circle or disk which is the default. Here's an exampe.
| . . . <body> <ul> <li type="square">the first list item</li> <li type="circle">the second list item</li> <li type="disk">the third list item</li> </ul> </body> . . . |
Note that you always need to close the list tags, but that the </li> is optional and can be left off.
In both ordered and unordered list you can change the item type in the whole table or just certain items. If you add the type to an item it changes that and proceeding items. You and the list back to the default by add: (type="1" to an ordered or type="disk" to an unordered list.
The third kind of list is the definition list. I saved it for last beacuse it's the only list that has three different tags. Their not that hard to remember if you thinl of LTD. Sence it is d difination list they all start with the letter <d?> ro difinination. Here's where the LTD comes in, The l stands for list in the <dl> tag, the t is or term <dt> and the d stands for defination in the <dd> tag. Each of these tags needs to be closed. I suppose you've noticed the / closes a tag. Try this.
| . . . <body> <dl> <dt>the first term</dt> <dd>its definition</dd> <dt>the second term</dt> <dd>its definition</dd> <dt>the third term</dt> <dd>its definition</dd> </dl> </body> . . . |
You can nest list together almost anyway you like as long as careful. Here's an example.
| . . . <body> <ol><li>the first list item</li> <li>the second list item <ul><li>first nested item</li> <li>second nested item</li> </ul> </li> <li>the third list item</li> </ol> </body> . . . |
You can also make use of paragraphs and headings etc. for longer list items.
What you should've learned.
You can learn a lot by looking a other peopel web pages. In Internet Explorer click view and select source. This will not only show you the code it also convently opens it in NotePad. You can get to the source code in most browsers, they just don't show it as well.