HTML stands for "Hyper Text Markup Language" and is the format most commonly used at present to display the content of web pages. The HTML language consists of tags which "tell" the browser how to transform the code into text and images that can be viewed by a visitor to the web page.
HTML is written using "tags" where are normally found in pairs, an opening tag and a closing tag - which surround text or references to other webpages or graphics. For example:
<p>Welcome to my tutorial</p> will tell the browser to display:
Welcome to my tutorial
You don't see the tags. The P here stands for new paragraph. The closing tag is different from the opening tag by the addition of a forward slash "/".
Other tags can tell the browser to display the text as bold or as a different font or size.
<p><b>Welcome to my tutorial</b></p> will show the text in Bold for example.
Welcome to my tutorial
The DOCTYPE Declaration
Every HTML web page should begin with a document type identifier which tells the browser viewing the web page which DTD (document type definition) the web page complies with. Although this declaration is not strictly necessary for the web page to be displayed successfully, it is good practice to include this declaration.
The DTD specifies which tags are allowed in the web page and which are not. If the browser comes across a tag that is not allowed in the DTD it will simply ignore it.
This is how to include the identifier for HTML Version 4.0 standard. If you click on "View" and then select "Source" in your browser toolbar, you will see the HTML "behind" this page and you will see that the DOCTYPE declaration appears on the first line.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
The HEAD and META tags
After the DOCTYPE declaration, the web page should start with a <HTML> tag and end with </HTML>.
Every webpage is made up of a <HEAD> </HEAD>section and a <BODY></BODY>section. These are contained inside a the <HTML></HTML> tags. - example - use editor
Online editor Works only in IE - If you use another browser you can Download Web Page Teacher.
The HEAD section contains information relevant to the web that is not displayed. It contains the META tags of the page which are used by major search engines. The TITLE is shown like this:
<TITLE>My webpage</TITLE>
The "description" is found in <META> tags. The most common meta tags are the description and the keywords and they are shown like this (these tags are not in pairs):
<META name="description" content ="description of website">
<META name="keywords" content="keyword1, etc">
It can also contain code such as Javascript whch can for example:
- preload graphics to be used on button rollovers.
- tell the browser to load a different page.
- identify which browser and platform is being used to view the page.
The BODY
The BODY section is what is seen by people looking at your website. This is also where you can specify the background colour or background image for the page.
<BODY bgcolor="#FFFFFF"> for example will display a white background. If you do not display a background color it will default to grey. #FFFFFF is the red green blue code for white (full, full, full). Black would be #000000, red would be#FF0000. You can experiment with different colors by changing the red green and blue values.
<BODY background="backpic.jpg"> would show the background a picture called "backpic.jpg" as the background of the page and tile it to cover the whole page. IMPORTANT - See the images page to find out more about referencing images.
Then you can type the contents of your page and separate them into different areas using block elements. The most commonly used is a paragraph which is displayed using <p></p> tags surrounding each paragraph.
You can also display information in a table with cells. The borders of the table do not need to be visible, so tables can be used for defining the layout of the page.
The table is defined by a pair of <table></table> tags and each table row by <tr></tr>. Inside each table row there can be any number of cells separated by table data tags <td></td>.
LINKING to other pages
If you want to link to another page you use a "hyperlink" which is defined inside a pair of <a HREF=></a> tags. Inside the hyperlink you type the address of the webpage you want to link to such as: <a HREF="http://www.domainname.com/pagename.htm"> my page </a> What is seen by the viewer is my page. This is in blue and underlined indicating that it is a hyperlink. The colour can be different but the default colour is blue for hyperlinks unless specified otherwise by the designer.
- or if you want the link to be an email to you you type <a HREF="mailto:name@isp.com"> Email us </a> . What is shown to the viewer is Email us .
Click here for more information on hyperlinks
IMAGES
If you want to display a graphic or image you need to specify the location with the <IMG SRC=""> tag where the filename of the graphic or image goes inside the "".
Click here for more information on images
Remember to finish your page with the closing </BODY> tag.
If you would like to learn HTML or design your own web pages you will need an HTML editor. There are also a number of good HTML books available.
IMPORTANT NOTES FOR UPLOADING YOUR WEB PAGES
The "index.htm" or "default.htm" is what a browser will pick up if you do not specify the page. It is usually your home page. If you type in www.yourwebsite.com in your browser it will automatically look for the default or index page that is specified by the web server that your website is hosted on. It is possible for the web server administrator to set a different page to be the default page for the site.
- When referencing another page or image, the code assumes that it is in the same folder as the page you are working on.
For example if your website is located at http://www.domain.com then domain.com is the root folder and all pages in that folder will be able to reference each other relative to each other without putting the "http://www.domain.com" in the hyperlinks. For example:
<a HREF="index.htm">HOME PAGE</a> would link the home page to the page you are working on.
however if you are referencing a page on another site you will have to include the full web address i.e "http://www.anothersite.com/page.htm".
If you have a large site you might want to have sub-folders. The images could be kept in http://www.domain.com/images for example
and a picture in this folder would be located at: http://www.domain.com/images/mypic.jpg
If you keep images in an image folder the image source code would be for example:
<IMG SRC="images/mypic.jpg">
If you find you are not able to link pages it is almost certainly because you are not referencing the right folder. Click here to find out more about relative and absolute hyperlinks.
The best way to learn HTML is to use an HTML editor
For more detail on HTML tags...
GOOD LUCK WITH YOUR HTML !
