Web Technologies
|
|
HTML
HTML
1. Introduction:
HTML stands for Hyper Text Markup Language. An html page is a simple
text file that contains markup tags. Once saved as file.htm or
file.html, it is displayed, according the related tags, over a browser
like Firefox, Internet Explorer, Netscape or Opera.
Example:
<html>
<head>
<title>The title of the page</title>
</head>
<body> The text will be displayed here.</body>
</html>
2. HTML Elements:
An HTML documents is a set of HTML elements. Each element is an
expression (content) between a pair of tags. The start tag contains two brackets
< and >; the end (closing) tag contains the two brackets and a slash as
<b> Here is the element content in a bold text.</b>. HTML tags are not case sensitive.
3. HTML Tags:
<html> HTML document</html>
<title> The title of the document</title>
<body> The body (displayed text) of the document</body>
<script> The script used in the program</script>
<p> A paragraph</p>
<hn> Headings</hn>, n = 1, 2, 3, 4, 5, or 6, the largest, the smallest.
<br> or <br/>.
This line break tag has no end tag like the horizontal rule
<hr>
<!-- This is a comment and will not be displayed -->
Automatically, HTML adds new (blank) line before and after a paragraph
and a heading tag. All the empty space left when editting counts as
one.
4. HTML Attributes:
Tags contains attributes specified in the starting tag, in order to provide more features for a
HTML element, like <hr width = "55%" color = "red">. An attribute
contains a name (as color) and a value (red).; the value is always
quotted (as "red" or' "HTML" ')
5. HTML Links:
They are used to link a current document to another document:
Anchor a :
<a href ="url">Link to the specified attribute url</a>
a is the anchor that can point to other resource like an HTML page, an
image, audio or video document.
the attribute target define where the linked document will be displayed.
<a href ="url" target = "_blanck">Link to the specified attribute url
and display it a new page</a>
An anchor with an attribute "name" points to a specific section in
the same page:
Clicking on <a href="#top">top</a> leads to the top of the page if at the
top we can find the target mentionned as <a name ="top"> </a>
from outside the page, the link would be:
<a href = "url/file.html#top">top</a>
img:
<img border ="1" src = "HTML.gif" width="100" height="50">
6. Frames:
Frames divide the window into documents parts : rows (horizontal frameset) or column
(verical frameset). The sytax, for three documents is:
<frameset cols = "20%, 70%,*"> or <frameset rows = "20%, 70%,*">
<frame src = "file1.html">
<frame src = "file2..htm">
<frame src = "file3.html">
</frameset>
the * means th remaining space. The attribute for the frameset can be expressed in pixels as
<frameset rows = "150, 700, *">
We mix framesets inside others, as:
<html><frameset cols ="30%,70%">
<frame src="file1.html">
<frameset rows ="40%,60%">
<frame src ="file2.html">
<frame src ="file3.html">
</frameset>
</frameset></html>
<frame noresize="noresize" src ="file.html"> will not resise the
document.
<iframe src ="file.html" width="100%"> </iframe> will set a new
frame inside a current document.
The bowsers that not support frames must read noframe tag as folows:
<frameset rows ="30%,70%">
<frame src="file1.html">
<frame src="file2.html">
<noframes>
<body>Here the content of the body that not support frames.</body>
</noframes>
</frameset>
The following example set links in the content.html page to
be displayed in the target.html page carrying the name ThisFrame.
<frameset cols="200,*">
<frame src="content.html">
<frame src="target.html" name="ThisFrame">
</frameset>
</html>
7. Tables:
The skeleton of a (n,m)table is as follows:
<table border="x"> , x = 0,1,2, ...
<tr><th>Heading1</th> ....<th>Headingn</th></tr>
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td>...
<td>row 1 , celle n</td></tr>
...
<tr><td>row m, cell 1</td><td>row m, cell 2</td> ...
<td>row m , celle n</td></tr>
</table>
th stands for table heading; tr stands for table row, and td stands for table data. Each block is
called cell which can take any other HTML elements.
<td></td> or <td> </td> is just an empty cell.
The following table shows a cell that spans three columns:
<table border="0">
<tr><th>Course</th><th colspan="3">Levels</th></tr>
<tr><td>HTML</td>
<td>Level 1</td><td>Level 2</td><td>Level 3</td></tr>
</table>
The following table shows a cell that spans three rows:
<table border="0">
<tr><th>Course</th><th>Levels</th></tr>
<tr><td rowspan="3">HTML</td><td>Level 1</td></tr>
<tr><td>Level 2</td></tr>
<tr><td>Level 3</td></tr>
</table>
Table takes cellpadding as attribute to set space in an element (between borders and
content). The syntax is:
<table cellpadding = "x">
Table takes cellspacing as attribute to set space between elements. The syntax is:
<table cellspacing = "x">
Table takes frame as attribute to set frames inside a table. The syntax is:
<table frame = "value">
value could be: border orbox, void, above, below, hsides, vsides, lhs, or rhs
8. HTML Character Entities
They can be expresed by names or by numbers.
Examples:
< less than < <
> greater than > >
non-breaking space  
& ampersand & &
" quotation mark " "
' apostrophe ' '
|
