HTML tutorialHTML is easy to learn and you need to understand the basics if you work with web design. Our online tutorial is here - Learn HTML Web page Teacher is an excellent HTML editor which has interactive tutorials that will teach you HTML as you design a web page. Download Web Page Teacher here.
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 home page</P> will tell the browser
to display: Welcome to my homepage 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. text will show the text in Bold for example. Every webpage is made up of a <HEAD> </HEAD>section and a <BODY></BODY>section. The HEAD section contains information that the search engines pick up when someone is searching on the internet for a particular word or phrase. It contains the "title" and "description" of the page which is what shows up on the search engines - 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: 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 note at bottom of page about referencing pictures in folders. Then you can type the contents of your page and separate them into paragraphs by using the <p></p> tags surrounding each paragraph. You can also display information in a table with cells. 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>. 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">Company</a>. What is shown to the viewer is Company. 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 "". Remember to finish your page with the closing </BODY> tag. If you understand these basics you will be able to figure out the rest by looking at the source code of different webpages and seeing how an text or an image is aligned to the right, left or centre for example. IMPORTANT "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.website.com in your browser it will automatically look for the index page. - 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 are referencing a page in the root (main directory) of your website you would have to preceed a hyperlink by ../ for example <a HREF="../index.htm>HOME PAGE</a> would reference the home page from a page in a sub-folder. If you find you are not able to link pages it is almost certainly because you are not referencing the right folder. GOOD LUCK WITH YOUR HTML ! |
|
){kind=link}