HTML
Core website features.
The Tutorial is now complete. Please report any errors to your teacher and they will be fixed.
Step 0
HTML is the acronym for Hyper Text Markup Language. Think of it as a normal notepad file in which we write text (code). But the only difference is that we save it with the "html" extension. You can either do this while saving the file or first save the file as normal text file with "txt" extension and then later change that extension to "html". You may get a warning message while changing the extension which is nothing to be alarmed about.
Notepad++ is a good application to have for coding instead of using simple notepad that comes with default operating system. It is a free software available on internet and you can find it using any search engine. I would recommend you to download Notepad++ and install it.
Sublime text is also a great for coding. It is also a free software available on internet and you can find it using any search engine. I would recommend you to download Sublime text and install it.
Step 1
The first file should be named as index.html. The server where you have hosted your website actually looks for this file and runs it first.
The most basic HTML file structure is
The first line ...
<!DOCTYPE html>
... declares that it is an HTML5 file.
We have introduced you to the following tags in this file.
html, head, title, body,
Also notice that every tag has a closing tag that starts with a "/"
so to close <html> tag we have </html> and so on...
<h1> tag is used to make heading and makes the enclosed text bigger in size. You can choose from h1,h2,h3,h4,h5 and h6.
Consider the html code as yourself. You have head above your body. So the head tag need to be closed before you start the body tag, Title tag is like a queen wearing a crown. So tile tag should be within head tag.
<hr> is one such tag that we will not talk about in this tutorial but was used to develop this tutorial and you can see it as line separators between steps.
Still struggling to find it? It is a faint grey line and one is just below this line.
Step 2
We now have basic understanding of the html file format. Let us develop it further to make our first file which we will call index.html
Look how we have added many new things with in the body tag's enclosure.
so instead of just <body> , we now have <body bgcolor="yellow" text="red" link="blue" vlink="grey" alink="green">
These extra thing are called attributes of the tag. Let us discuss them one by one as follows.
bgcolor = "yellow sets the background colour of the webpage to yellow.
text = "red" sets the text colour to red which in this case is the first line below the body tag. It is enclosed in h1 tag as "html tags".
link = "blue" sets the colour of the hyperlinks
vlink = "grey" stes the colour of the visited hyperlinks
alink = "green" sets the colour of the active link. (you can see this by clicking and holding any link)
Having explained these attributes, it is important here to state that html5 (new version of html) does not support many such attributes. In fact all of the above attributes that we just discussed are not supported in html5. So from now onward we will try to avoid all such attributes. In html5, all such features are achieved by a tag called "style". This we will dicuss in another tutorial. In this tutorial we will now focus on just tags and few attributes that work in html5 also.
Let us now discuss a very useful tag used for hyper-linking
<a href='./files/text.html'>Formating Text.</a>
The tag is <a> ... </a>. The href attribute specifies the link's destination so it is sort of mandatory.
There is one more important thing to learn here called "File Organisation". First of all make a folder named 'HTML'. Further,it is not a good idea to have all files in one folder. You should have your folder structure like something as shown below. Just to make it more clear all the following folders and files are within newly created HTML folder.
It is also a good idea to have a readme.txt file to write down important instruction for the user to read before using the product.
So the href="./files/text.html" means that the location of the file is in another sub-folder called "files" which is within the current folder shown by ./ (the use of single DOT before the first forward slash). It is worth mentioning here that the double DOT notation (../) indicates the parent folder. We will be using the double DOT notation to go to the index.html file from all other files that we discuss in the remaining part of this tutorial. That will be our first line in the body tag of the remaining files that are discussed in this tutorial.
To sum up, when we click this link the file "text.html", which is located in "files" folder within the current location, will be displayed.
Step 3
Our next step is to make all those files that we have mentioned in the "index.html" file. These files are ...
text.html
bullets.html
lines.html
marquee.html
background.html
table.html
images.html
movies.html
pre.html
The names of the files gives you an idea of what we will try to achieve in them. They will be explained in detail in the following steps anyway.
Step 4
text.html
The output of this file will look like
 |
Step 5
bullets.html
The output of this file will look like
 |
Step 6
background.html
You can set any image as background but the trick is to find a small sized file usually less than 50KB (Kilo Bytes). Find one on internet that is free to use.
The file that i have used looks like....
The output of this file will look like
 |
Step 7
table.html
The output of this file will look like
Step 8
images.html
The output of this will be
Step 9
movies.html
The sample mp4 file that i have used in this section was obtained from here
These files are free you use at least for educational purpose and experimentation as per the words of author ...
"...I wanted to convert one small video file into a lot of different formats and provide these files as a sample video for anyone to use in their tests and projects."
If you have a video on your PC, then you can use the "Video" TAG as follows
<video controls="controls" width="320" height="240">
<source src='./videos/movie.mp4' type="video/mp4" />
</video>
note that the "./videos/movie.mp4" shows that the video named movie.mp4 is in the folder named "videos" which in turn is in the current folder which has the file containing the code to display the video.
and it will display the video as shown below...
You can upload a YouTube video using embed code.
This code is available under "share > Embed" link under every YouTube video.
It looks something like this...
and will bring up the YouTube video
Step 10
pre.html
The output of this file will look like
You can even draw using keyboard characters! it is all possible because of the pre tag but just be careful, while you are being creative, as it does not show properly on all browsers.
________________________________ |^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ||____ | The NOSSAL Truck! |||""'|""\__,_ | ________________________________ l||__|__|__|)) |(@)@)"""""""'''''"""''''''''**|(@)(@)*****|(@)
Step 11
map.html
The output of this is...
You will get the following message when you click on SUN, MERCURY or VENUS because the corresponding files do not exist. This tutorial just wanted to show the method of using "map" tag.
File not found - possible reasons can be server problem or incorrect typing. please try again.
Some useful Links are:
http://www.w3schools.com/html/
http://www.echoecho.com/html.htm
http://webdesign.about.com/od/beginningtutorials/a/bl_htmltutorial.htm
http://www.webmonkey.com/2010/02/color_charts/
Easy Web Authoring!
KompoZer is a complete web authoring system that combines web file management and easy-to-use WYSIWYG web page editing.
KompoZer is designed to be extremely easy to use, making it ideal for non-technical computer users who want to create an attractive, professional-looking web site without needing to know HTML or web coding.
KompoZer is a free and open source software and can be downloaded at...