The basics for html begin with how: A web-page can be written using the simplest of programs: 'Notepad'. All you need to do to save a note pad document as a web-page is the following. When you save it change the 'save type as:' option to 'all files' then when you type the file name you want simply end it with '.html', it is best not to have any spaces in the name of a web-page (use an _ instead). Then once you have viewed the web-page and want to edit it, right click on the file, go down to open with and select notepad (or the similar program you began with). The file can be open with Internet explorer and notepad at the same time, so you can save it on notepad and then click refresh on Internet explorer to view the changes.
In the website you will have 4 main "tags". Tags are little notes to tell the website what to do. They are contained within the < > symbols. Tags are opened with a <function> then there is some content. and finally closed with a </same function>, the '/' being the key part for ending a function.
The main tags are:
Therefor a basic website will look like this:
Try it for yourself - just copy and paste the above into a notepad document and save it in the way described previously. Note: it is best to name your home page 'index.html" as this is the norm in the World Wide Web.
Another commonly used tag is the <title> tag. This is placed within the <head> </head> tags. It controls what is written at the top of the Internet 'window'. For example on this page the title is 'Stoosh's Site - HTML Basics'.
Here is how this is done:
The penultimate commonly used tag is the <img> tag (image tag). It is placed in the "body" of the website and the. This one does not require a closing tag with a / as it is self contained. The image file then needs to be specified and I will show you how to do this in the example. It is a good idea to set up a separate 'pics' folder in your website for all your pictures. Assuming this is done I will link to the picture "example.jpg".
This is how:
the ./ simply means to leave the file the tag is in, then /pics selects the pictures folder that is in the same folder of the document and the /example.jpg means to select the file example.jpg from the pics folder. I have done this using what is called 'relative linking' where this file pathway is given in relation to the file it is on. to explain the process: each "." means go up one level in the directory (the first "." always meaning leave the current file) then each "/" means to select the next file or folder with the name of the file or folder being written directly after it.
The last commonly used tag is the <br> tag. This is simply a forced line brake - the equivalent of pressing enter when on a word document.
This will display as:
This website was created by Michael Strutt
|