The HTML document
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
HTML |
The pair of tags <HTML> and </HTML> tells your browser the beginning and the end of the file that contains HTML code. |
HEAD |
This element contains information about the current document, such as its title or data that is not considered document content. |
TITLE |
Inside the pair of tags <TITLE> and </TITLE>, you put the title of your HTML document. This title will be displayed at the top of your browser window. It must be relatively short and among all very descriptive. In other words, it must reflect the content of the HTML document displayed in your browser window. |
BODY |
The pair of tags <BODY> and </BODY>, confines the largest part of your HTML document. Everything that is displayed in the text area of your web browser is part of the BODY element. |
Note: In the first example (refer to the section "HTML Documents") we’ve used two attributes of the <BODY> tag, the BGCOLOR and TEXT. These will allow you to create a window with a white background (BGCOLOR="#FFFFFF") and with black text (TEXT="#000000") on it. A color value for an element can be specified using a hexadecimal number (prefixed by a hash mark (#) ). This hex notation will specify how much red, lime and blue you will use to combine in your colour value. So, the first two figures after the hash mark will serve for red's part, the next two for the lime's part and the last two figures for the blue part.
Now, we will have a short look on some of the common used tags within the body section.
To display heading texts with different size, you use the heading pair
of tags: <Hi> and </Hi>, where i
is a number between 1 and 6, each specifying a different level of
heading.
| HTML Code: | <H1>
The biggest heading </H1> <H6> The smallest heading </H6> |
| How it looks: |
The biggest headingThe smallest heading |
TIP: Use heading levels in a consistent order.
When you write the content of an HTML file, you have to forget everything
you know about formatting text in other editors. So it’s of no use to
put tabs, multiple spaces, indentation, blank lines and even carriage
return. The browser will ignore any of them, and will format your text
according to its wish.
Instead, you have to use the <P> (paragraph)
tag (the </P> closing tag can be omitted).
Put then all your text after this tag, and it will be displayed as a
distinct paragraph. The tag <BR> will
replace the carriage return.
Note: Using the <P> and </P> as a paragraph container means that you can center a paragraph by including the ALIGN=alignment attribute in your source file.
<P ALIGN=CENTER>
This
is a centred paragraph.
</P>
The tag <HR> draws a horizontal line along the entire browser window. You can use it to divide the different section of your document.
The <BR> tag forces a line breaks as in the following example:
| HTML Code: | Albania<BR>
Bulgaria<BR> Romania<BR> |
| How it looks: | Albania Bulgaria Romania |
You can use the following tags to format the text regarding to your
needs, i.e. to write bold, italic and underlined text.
| HTML Code: | <B>bold
text</B> <I>italic text</I> <U>underlined text</U> |
| How it looks: | bold text italic text underlined text |
HTML allows you to include images in your document, using the IMG element as in the following example:
<BODY>
<P> This is my photo
<IMG src=”my_photo.gif” ALT=”My
photo”>
</BODY>
SRC attribute serves to show the location of the picture file that you want to include in your HTML page. As you see, in this case this file is in the same directory as your .html file. ALT attribute is a name for the picture, which is displayed during the downloading process, or in the only-text browsers.
HTML offers you the possibility to organise information in lists, which may be unordered (unnumbered), ordered (numbered) and definition lists.
An unordered list is created using the pair of tags
<UL> and </UL>,
as is showed in the following example. For each item of the list that
you specify, enter the <LI> (list item)
tag and then the individual item. It is not necessary to put a closing
</LI>.
| HTML Code: | <UL>
<LI> red. <LI> blue. <LI> green. </UL> |
| How it looks: |
|
An ordered list is identical to an unordered list,
except that it uses the pair of tags <OL>
and </OL>, as is illustrated below:
| HTML Code: | <OL>
<LI> red. <LI> blue. <LI> green. </OL> |
| How it looks: |
|
A definition list is created using <DL>element.
It is generally a series of term/definition pairs. Usually one browser
will put each definition in a new line. The example that follows, illustrates
a definition list:
| HTML Code: | <DL>
<DT> Throughput <DD> The maximum rate at which none of the offered frames are dropped by the device. <DT> Bridge <DD> A system that forwards data frames based on information in the data-link layer. </DL> |
| How it looks: |
|
Lists can be nested too. For example,
| HTML Code: | <UL>
<LI>Two European countries: <UL> <LI> Albania. <LI> Bulgaria. </UL> <LI> Two Asian countries: <UL> <LI> South Corea. <LI> Japan. </UL> </UL> |
| How it looks: |
|
A link (the correct term is "hypertext link") is a connection
from one resource to another resource of the Web. Usually the browser
will highlight the element that serves as a link, e.g., a text link
will be coloured and underlined. A link is activated usually by clicking
on it with the mouse and the Web resource associated to it will be displayed.
To create an HTML link you will use the pair of tags <A>
and </A>, which stand for "anchor".
To include an anchor in your document, follow this procedure:
- start the anchor with <A
- using the parameter HREF specify the destination
document where the link is to be point followed by a closing right
angle bracket ">"
- enter the text that will serve as the hypertext link in your current
document
- end the anchor with the ending tag </A>
Here is a simple example:
| HTML Code: | <A HREF="item2.html"> Item 2</A> |
| How it looks: | Item 2 |
This line will display the word "Item 2" as a link to the
document named "item2.html" which is in the same directory as the first
document (the one where the link is put on).
To access through links documents that reside on other directories you
can specify the relative path from the current document. Be aware to use
the standard UNIX syntax for pathname.
TIP: You can use also the absolute pathname, but relative links are more efficient in accessing a server.
Anchors can also be used to move at a particular section in a document. This type of anchor is usually called a named anchor and is used when you have long documents. In this case, put a "table of contents" at the top of the document with items being internal hyperlinks. So, in the following example, the hypertext link "Students e-mail addresses" points to the section of the document where are placed the e-mail addresses of the students.
<A NAME="#SEA">Students
e-mail addresses</A> are indicated
below.
....
<A NAME="SEA">This
is the entire list of students e-mail addresses.</A>
...
Don't forget to put the <A NAME=> tag at the place in your document where you want the link to jump to.
You can also give to each user to send an electronic mail to a specific person through your Web pages. To do so, include a "mailto" attribute in a hyperlink, as in the following:
<A HREF="mailto:username@address">Name</A>
This line of code will open a mail window through which you can send your e-mail.
The HTML tables will allow you to arrange many types of data – text, images, etc. – into rows and columns of cells.
TIP: To build a table you always need to start from the top left and go across the columns of the first row, then to the second row across its columns (the same way as with the first row) and so on...
Let’s look at the following example:
| HTML Code: | <TABLE
BORDER=2> <TR> <TD>Apple </TD> <TD>Orange </TD> <TD>Lemon </TD> </TR> <TR> <TD>Cherry </TD> <TD>Nuts </TD> <TD>Kiwi </TD> </TR> </TABLE> |
||||||
| How it looks: |
|
The pair of tags <TABLE> and </TABLE>
indicates to the browser the beginning and the end of the table element,
respectively.
The border attribute of the <TABLE>
tag will allow you to create tables with different sizes of border. If
you use this parameter without a value, the default size border will be
1. Otherwise the border drawn around your table will be of the size specified
by you. If you don’t use border, the table will be showed without borders.
<TABLE border=10 cellpading=20 cellspacing=5>
The cellpading attribute specifies how much empty “spaces” exists between the items in the cells and the walls of the cells. The attribute cellspacing specifies in pixels the width of the inner lines that divide the cells.
Note: Only some browsers support these attributes.
The <CAPTION> tag will allow you to name
the table i.e., to add a title (caption) for your table.
| HTML Code: | <TABLE>
<CAPTION> STUDENTS </CAPTION> <TR><TD>Male</TD><TD>58</TD></TR> <TR><TD>Female</TD><TD>39</TD></TR> </TABLE> |
||||
| How it looks: |
|
For each row you define in your table, you use the pair of tags <TR> and </TR> (Table Row). Then, for each cell in each row, you use the pair <TD>, </TD> (Table Data). Within this tag, you can use many attributes to change the alignment of items in a single cell. In the following are showed some of these attributes:
Horizontally
| <TD align=left> |
aligns all the elements to the left side of the cell (default) |
| <TD align=right> |
aligns all the elements to the right side of the cell |
| <TD align=center> |
aligns all the elements to the centre of the cell |
Vertically
| <TD valign=top> |
aligns all the elements to the top of the cell |
| <TD valign=middle> |
aligns all the elements to the middle of the cell (default) |
| <TD valign=bottom> |
aligns all the elements to the bottom of the cell |
It’s also possible to combine these attributes:
<TD align=left valign=top> this combination will put the element in the top-left of the cell
The colspan and rowspan attributes of the <TD>
tag give you the possibility to create more complex tables. The first
one is illustrated in the following example:
| HTML Code: | <TABLE
border> <TR> <TH> Apple</TH> <TH align=center valign=middle colspan=2> Orange </TH> </TR> <TR> <TD>Cherry</TD> <TD>Nuts</TD> <TD>Kiwi</TD> </TR> </TABLE> |
||||||
| How it looks: |
|
||||||
You can use the rowspan attribute in the same way.
The tags <TH>, </TH> (Table Header) are exactly the same as <TD>, </TD> tags, except that any text inside them is automatically made bold and all the items are automatically centred.
You can use colours with your tables:
Font colour:
<TD><font color=#FF0816>DEMAND
Students</font></TD>
Colour the area inside the entire table
<TABLE bgcolor=#876543>
Colour the area inside a single row
<TR bgcolor=#245678>
Colour the area inside a single cell
<TD bgcolor=#364952>
HTML frames will allow you to publish your information using multiple views (i.e. windows). This will be the case if you want to keep a certain information visible, while replacing or scrolling some other. For example, within the same window, one frame might display a menu for navigating and an other frame will be the main window which will display the information related to the topic you select from the navigation menu.
Let’s look now at a frame document:
<HTML>
<HEAD>
<TITLE> A frameset document</TITLE>
</HEAD>
<FRAMESET cols=”30%, 70%”>
<FRAME SRC=”frame1.html”>
<FRAME SRC=”frame2.html”>
<NOFRAMES>
<P> This frameset document
contains:
<UL>
<LI><A HREF=”frame1.html”>
<LI><A HREF=”frame2.html”>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
This frameset document will create a frame layout which divides the screen vertically in two windows (columns).
If your browser is not able (or is not configured) to display frames, everything between the pair of tags <NOFRAMES> and </NOFRAMES> will be displayed.
As you see, a frameset document looks nearly the same as a normal HTML document, except that it has a <FRAMESET> section in place of the <BODY> section.
TIP: Be aware that all the elements that normally might be placed in the <BODY> should not appear before the <FRAMESET> tag, otherwise this tag will be ignored.
Two attributes of the <FRAMESET> tag are cols and rows. The first one specifies vertical frames. The second attribute serves to specify the horizontal frames. Both of them are a comma-separated list of pixels of percentages (like in the previous example)
TIP: If the rows (cols) attribute is not set, each column (row) extends the entire length (width) of the page. If neither of attributes is set, the frame takes up exactly the size of the page.
Another example:
<FRAMESET col=20%, 400,*,
3* ”>
.....
</FRAMESET>
Suppose that the browser window is currently 1000 pixels width. The first view is specified to be 20% of the total width (200 pixels), the second one will be exactly 400 pixels width, the fourth one will be three times larger than the third one, which is specified as “*” (equivalent to “1*”). [This means that the window of 1000 pixels will be divided in four parts of: 200, 400, 100 and 300 pixels.]
name = ..., is a attribute that serves to assign a name to the current frame and to be used as a target for the links.
In the following are indicated the target names that have special meaning.
blank, the browser will load the selected document in a new, unnamed
window
self, the browser will load the referred document in the same frame
where is the element that refers to the target.
top, the browser will load the referred document into the full,
original window.
Except the above, the frame target names must begin with an alphabetic character (a – z, A – Z)
By assigning a name to a frame via the NAME attribute you can refer to it as the “target” of links defined by other elements.
SRC = uri, specifies the location of the initial document to be loaded and displayed in the frame
noresize when present, this attribute causes the frame not to be resized
scrolling = auto| yes| no
Auto is the default value – the browser will put scrolls if this
is necessary for the frame window.
Yes – means that we will have always scrolling for the frame window.
No – means no scrolling for the frame window.
frameborder = 1|0
1 is the default; the browser will draw a border between this frame
and all the adjoining ones.
Let’s look to another example. Suppose you want to create a document containing two frames. First you have to write the following code, which creates the page structure and load the two frames:
<HTML>
<HEAD>
<TITLE> The frameset document </TITLE>
</HEAD>
<FRAMESET cols=30%, 70%>
<FRAME NAME=”menu” SRC=”menu.html”>
<FRAME NAME=”main_window” SRC=”main.html”>
</FRAMESET>
</HTML>
Then you have to write the code for each of the two files named above: menu.html and main.html.
An example of a menu.html file might be:
<HTML>
<HEAD>
<TITLE> The menu with anchors</TITLE>
</HEAD>
<BODY>
<A HREF=”f_item.html” target=”main_window”>item1</A>
<A HREF=”sec_item.html” target=”main_window”>item2</A>
</BODY>
</HTML>
This frame is the permanent one in this example. If you click an item in it, a new content is displayed in the second frame (here called main_window).
This feature will allow the user to send controlled information usually to a server machine. The browser will display the HTML code that you write to describe forms, and allow the user to input information. When the user submits the form, the data entered will be sent to the processing software at the server. So, if you are not able to configure your server to accept incoming data from the user, it is nonsense to create forms for your Web pages.
To define a single form you use the pair of tags <FORM> and </FORM>. In the following is showed a common layout for the FORM element:
<FORM [ACTION="url"] [METHOD="method"]
[ENCTYPE="type"]>
form contents
</FORM>
Let's now describe all attributes used here.
The ACTION attribute will allow you to specify the URL (Uniform
Resource Locator) of the script that will process the form completed by
the user. This URL must use the HTTP protocol. The default value of this
attribute is the URL of the HTML document that contains the form.
The METHOD attribute will allow you to specify the method by which
the user data will be sent to the server. Possible values are "get"(the
default) and "post".
The ENCTYPE attribute specifies how the data is encoded (when the
method used is "post").
TIP: You can define as many forms as you want in your document, but you cannot nest them.
The example that follows shows a form that will be processed by one program called “your program” when submitted using the "post" method.
<FORM action="http://your_site.com/your_program"
method="post">
form
contents
</FORM>
The next example shows how to send a submitted form to an email address:
<FORM action="mailto:YourName@YourAddres.com"
method="post">
form
contents
</FORM>
The user interacts with your forms through controls. Each control has an initial value and a current value. They are both character strings. Usually the initial value of a control element is specified through its value attribute. The current value of a control element is first set to initial values. Afterwards, the user or scripts can modify it.
TIP: If a form is reset, each control's current value is reset to its initial value. The effect of the form reset will be undefined if a control does not have an initial value.
To define most of control types you will use the INPUT element. Depending
on the value of the type attribute of the INPUT element, you can define
the following control types:
| text |
a single line text-input field |
| password |
a text field that does not echo the data entered |
| checkbox |
on/off switches that can be toggled by the user |
| radio |
mutually exclusive on/off switches if they share the same control name |
| submit |
a button to submit a completed form |
| image |
a graphical submit button. The src attribute specifies the URI of the image that will decorate the button. |
| reset |
a reset button (to clear the fields already completed by the user) |
| button |
a push button associated with its script that is triggered if an event occurs |
| hidden |
invisible field whose value is submitted with a form |
To understand better all these things, let's look at this example:
If you understand all things discussed in this topic, you will enjoy very much studying forms in more details and using them successfully in your HTML documents. Good luck!
If you have the time and the possibility, you can look to these other good tips on the Internet.