The basic structure of a website:
<HTML>
<HEAD>
<TITLE>This is a empty Website on blue background</TITLE>
</HEAD>
<BODY bgcolor=“blue“ text=“white“>
<!– Here is the space for the content of the website. –>
</BODY>
</HTML>
HTML-commands are usually interleaved.
<HEAD><TITLE>My first page</TITLE></HEAD>
Many commands (tags) can contain additional attributes (attributes) like „width“, „height“, „color“, „face“ (as font face, font type), „size“ etc.
These are written within the angle brackets. The attributes to the tags are usually given with values.
Examples:
<IMG src=“thel.jpg“ alt=“Thelma M.“ width=“200″ height=“150″>
The pic’s name is thel.jpg and it is in the same folder than the index.html – file.
The pic is 200 pixel wide and 150 pixel high.
(If you change only one value and not the other, the pic will be no more in the right proportions.)
<FONT color=“white“ face=“Arial“ size=“2″>
The fontcolor is white, the font face is Arial and the size is 2 points.
Be cautious:
However HTML is a very simple language, every single mistake in typing will produce a non understandable command and it will not be interpreted…
Some words to the colors:
#RRGGBB (R: red, G: green, B: blue)
for example. color=“#1a3b5f“
#FFFFFF white (all three colors are in their maximum light)
#000000 black (all three colors are minimized)
#FF0000 red
#00FF00 green
#0000FF blue
#FFFF00 yellow
#808080 grey (always grey if all the 3 values are same)
Basic commands of HTML
Basic formatting
Paragraph
<p>text</p>
Line break:
<br>
this command is without end tag
to center a text or an object
<center>centered object</center>
<b>bold</b>
<i>italic</i>
<u>underlined</u>
<strike>striked text</strike>
<sup>superscript Text</sup>
<sub>subscript Text</sub>
Headers:
<h1>biggest header</h1>
<h2>second biggest header</h2>
…
<h6>smallest header</h6>
Listing:
<ul ><li>listed item</li></ul>
Listing with numbers:
<ol><li>numbered item</li></ol>
Textformatting with the FONT-tag
<font face=“Arial“ color=“#00FF00″ size=“5″>
„size“ can take the values from 1-7. (font size)
Font face: every font that is installed on a computer can be shown. But if you choose one font that only you have on your computer, only you will see the font face in the right way…
Usually one uses the common websafe fonts like the standard fonts Arial, Times, Verdana…
Font color:
<font color=“#123456″>Text</font>
Now you can combine the attributes:
<font size=“1″ face=“arial“ color=“#123456″>Text</font>
Pls notice that at the end you do not repeat the attributes, only the tag
Horizontal line
<HR> Horizontal Line (without ending tag)
Links, Hyperlinks
The links and linking to another webpage is the special of a webpage.
For some words you define another webpage::
<A href=“page2.htm“>go to page 2</A>
Put a hyperlink to a website in internet:
<a href=“http://www.merke.ch“>Go to the website www.merke.ch</a>
E-Mail Hyperlink:
<a href=“mailto:hari@gmx.ch“>Mail to Markus</a>
Adressing, path to file in a webproject:
If you want to put files in a webproject like pictures, music or other files, you must address them correctly corresponding to where they are located.
Imagine the following folder-structure in a web project:
Root folder
pictures folder
menu folder
travel folder
scripts folder
downloads folder
music folder
pdf folder
documents folder
If your webpage file is in the root folder, and you want to address a pic, the command is as follows:
<IMG src=“thel.jpg“> for a pic (or a file) in the root folder as well.
<IMG src=“pictures/thel.jpg“> for a pic (or a file) in the pictures folder
<IMG src=“travel/pictures/thel.jpg“> for a pic (or a file) in the travel folder (folder name means: go in this folder)
If the webpage-file is in the travel folder, and you want to address a pic, the command is as follows:
<IMG src=“thel.jpg“> for a pic (or a file) in the same travel folder
<IMG src=“../thel.jpg“> for a pic (or a file) in the pictures folder („../“ means go out a folder)
<IMG src=“../../thel.jpg“> for a pic (or a file) in the root folder (that means: go out of 2 folders)
<IMG src=“../../downloads/music/thel.jpg“> for a pic (or a file) in the music folder
That means: the path always is defined by the position of the html-file and the target file.
Tables
Here an example of a table with two rows and three columns.
<table width=“50%“ border=“1″ cellspacing=“0″ cellpadding=“4″>
<tr>
<td >
Row1 Column1
</td>
<td >
Row1 Column2
</td>
</tr>
<tr>
<td >
Row2 Column1
</td>
<td >
Row2 Column2
</td>
</tr>
</table>
Remarks:
with=“50%“ defines the with of the table.
cellspacing=“0″ gives the space between the cells in pixels.
Insert pictures
The image-tag defines, what pic should be displayed and in which way in the website. Necessary is the correct path to the pic-file and the correct pic-file-name. For the image-tag there is no end-tag.
<IMG src=“…“>
<IMG src=“…“ border=“…“ width=“…“ height=“…“ alt=“…“ align=“…“>
border can have the value 1 (border) and 0 (no border)
width and height gives the dimensions of the pic. if you want, you can only use one of both.
alt gives the possibility to display a pic name when the cursor is on the pic.
align: values are „right“, „left“, „top“, „middle“, „bottom“