HTML Basics: how to create a simple webpage
by noid

1.Intro
2.basic
3.bulleted list
4.horizontal line
5. text styles
6. linking to another page
7.linking to a section of a page (anchors)
8. mailto function
9.inserting images
10. background images
11.automatically forwarding to another page
12.Tables
13.pargraphs
14.change link color when mouse over (IE4.x only)
15. open link in new window
16. open link in whole page (whe framed)
17.Meta Tags
18.Tool Tip messages
19.Scrolling Text in the Tool Tip

Intro:

Most of the content on a webpage will be between <body> and </body> tags. only other stuff that you don't need to bothe for the moment need to be between the <head> tags (metatags, styles...)

Basics:

All you need to create a webpage is a text editor (such as notepad) and a browser. The following is the basic skeleton:

<html>
   <head>
   <title> This will appear on the top bar of the web browser </title></head>
   <body> This is the main part of the page
   <br> means brake-what you write after it will appear on the next line
   <p> means paragraph, not only will you go to the next line, 
       but there will also be a space inbetween </p>
   </body>
</html> 

Note that to end a feature (such as 'title'or 'p', you will need to include the same feature, e.g. <title> with a "/" sign, so to stop that feature, you type </title>.

    Now you can save the file as htm/html one-just click on file in the text editoe, slect save as, type a name such as  'homepage1.htm'. don't forget the ".htm' after the name

To use the <p> and </p> function in the center of the page type:

<p align=center>This is a centered paragraph</p>

or simply to center your text use the <center> and </center> function

<H1> This is a large heading </h1> 
<h5> This is a small heading </h5>

To make bulleted lists type: back to the top

<ul>
  <li>bycicle
  <li>forest
  <li>Greenpeace
</ul>

It will then appear like this:

To make a horizontal line: back to the top 

<hr size=4 width="50%"> 

or you can simply use <hr> and the line will be size 1 and 100% in length by default

Text Styles: back to the top

<b> this is bold </b>
<i> this is itallic </i>
<tt> this is typewriter text </tt>
<u>this will be underlined </u>

How to link to another webpage: back to the top

<a href="filename">underlined word(s)</a>     
e.g: <a href="index.html">back to home</a>

don't forget the brackets.

Linking to a specific section of your webpage: back to the top

If you make a link on the same page type the following:

<a href="#somename">link to a section on the same page </a>     

then, before the section on the webpage type: 

<a name="somename"> linked section </a>

just don't include spaces in the anchor name (e.g. somename or some_name but not some name)

The MailtTo function: back to the top

This you use so that when people click on it, an e-mail client is opened with the specified e-mail address

<a href='mailto: [email protected]'> mail me </a>

to automatically include a heading in the suject line of the email message, you'll need to include ?subject=your email subject after the email e.g.:

<a href='mailto:[email protected]?suject=Website comments">comments</a>

in this example, Website comments will appear in the subject line of the e-mail client

Inserting graphics: back to the top

<img src="filename">  

you can use either images with gif or jpg extensions.  To specify the size type the following with your own sizes

<IMG SRC=SelfPortrait.gif HEIGHT=100 WIDTH=65>

To align the image in the center  type align=center  e.g.:  

<IMG SRC = "picture.gif"    ALIGN=CENTER>  

you could also use left or right instead of center

To include text inside the image:

<IMG SRC="picture.gif" ALT="That's me">  

'that's me' will be inside the image

Using images as background: back to the top

example:  

<body background="picture.gif">

Using colors as backgrounds:

colors always consist of a 6 digit code, in the following example you see 000000 (black) FFFFFF (white) 9690CC (grey)

example:   

<body bgcolor="#000000" text="#FFFFFFF" link="#9690CC" alink="#red" vlink="green">   

note that you must include the '#' sign before the color code.  You may ask how can someone know the color code for the different colors? Well if you click here you will find most of the color codes

How to make that the current webpage automatically forwards to another page back to the top

example:

<meta http-equiv="REFRESH" content="0; URL=http://www.hostname.com/homepages/yourname/">

Just insert the line in the beginning of your webpage (e.g between <head> and </head>)

To create tables: back to the top

example:

<table border="1" width="100%">
     <tr>
       <td width="50%">cell number 1</td>
       <td width="50%">cell number 2</td>
     </tr>
   </table>

what you will see on a browser:

cell number 1 cell number 2

example2:

<div align="center"><center>
   
   <table border="0" width="80%" cellspacing="0" cellpadding="0">
     <tr>
       <td width="100%">This is in a centered table with a 80% width</td>
     </tr>
   </table>
   </center></div>

what you will see on a browser:

This is in a centered table with a 80% width  

going svereal paragraphs down back to the top

<p> will make you go down one paragraph, but if you want to do more  than one  you should do this:

<p>&nbsp;</p>

make a page jump directly to anotherone back to the top

<meta HTTP-EQUIV="REFRESH" CONTENT="0;    URL=http://members.tripod.com/bikeit/">

the number after content is how many seconds u want to wait until it moves to the defined page in URL

how to make the link change color when the mouse is on it back to the top

Just put the following between the <head> and </head> tag

<style TYPE="text/css">
   <!--
   :link {color:#blue;Text_decoration:None}
   :visited {color:#green;Text-Decoration:None}
   :hover {color:#red;Text-Decoration:None}
   -->
</style>

The 'Text-Decoration:None' will remove the underline of the link (onlyviewable in 4.x rowsers). Most browsers understand simply the name of certain colors such as blue, brown, gold, green... but if you want to use a more exotic color you'll need to enter the color code The changing color when the mouse is on the link is only viewable in IE 4+ however.

open link in a new window back to the top 

<a href="somepage.html" target="_blank">Link</a>

to open a link in the full page back to the top

for instance you have a page with frames but want to open a linked page which will use the whole page instead of a framed one then you need to add: target="_top" to the link

an example: 

<a href="index2.html" target="_top">Using the whole page</a></p>

Meta Tags back to the top

These are not the secret to getting more hits ut they do help some search engines in finding your site in the right category with an appropriate description and keywords. You'll have to put the meta tags always between the <HEAD> and </HEAD> tag. Here's an example:

<meta name="keywords" content="clubnoid, windows utilities, download software, 
interesting Links, share picks, photo, html reference, shares">

Make a precise discription of your website and content . It should ideally have between 120 and 150 characters. Example:

<meta name="description" content="Personal homepage containing interesting links, 
favorite downloads, the best windows utilities, useful notes, basic html reference, 
a photo gallery and frequent updates">

Tool Tip Messageback to the top

if you want that a message appears in the tool tip (the bottom of the browser) than type the following:


<a class="somename" href="home.html" 
onMouseOver="window.status=(' This is the tool tip in which you can put a 
description of the link for instance');return true"
onMouseOut="window.status=('');return true">this</a>

test on this.

Scrolling Text in the tooltipback to the top

simply copy the javascript from the example into your html page and paste it between the <head> and </head> tags

now add the following into the body tag, ie:

<body bgcolor="#ffffff" text="#000000" onLoad="timerONE=window.setTimeout('scrollit_r2l(100)',500);">

 

1998 noids