HTML Hyper Text Markup Language: How To Create A Hyperlink List And Table In HTML
HTML tag tutorial - Creating hyperlinks on
web pages
HTML documents contain certain \\'hot spots\\'. These hot spots provide anchors
that link to other documents/files on the Internet. The stupendous growth of the
Internet and the WWW is attributed to these tags. It\\'s hard to imagine a network
without links and interlinks.
Lets look at this tag in detail.
<A HREF="http://www.Schogini.com">This will
take you to Schogini.com\\'s main page
is displayed as This will take
you to Webdevelopersnotes.com\\'s main page.
-
Anchor tags have a starting () and an () ending
tag.
-
The HREF attribute is required and takes the URL address of the
destination page as value. Without this attribute-value, no links will be
created.
-
Some text is enclosed between the anchor tags. This text serves as the
hot spot. When a visitor clicks on this \\'hot spot\\', he or she will be
transported to the target page.
Another attribute is TITLE, through which you can provide some
explanatory text for that link. Netscape ignores this attribute. To see this
attribute in action, place your mouse over the link.
Homepage
Its code is:
<A HREF="http://www.webdevelopersnotes.com"
TITLE="This takes you to webdevelopersnotes.com\\'s mainpage"
>Homepage
Linking in the same document
So far we have discussed only inter-document linking. What if you want to make
the visitor jump to different sections of the SAME page? We employ the tag
in this case too, but its format changes slightly. Instead of a URL in the HREF
attribute, we use names.
First, an anchor is set at the desired place in the document using the NAME
attribute. In this case I put the following code at the top of the page.
The value of NAME attribute can be anything you want. Also note, that it is
not necessary to enclose any text or other HTML element if the anchor tag is
used in this manner.
After setting an anchor with its NAME attribute we employ another set of
to make a link that points to it:
On clicking this link, you will be taken to the top of the page where I have
put the anchor. The HREF attribute takes the value of the NAME attribute
mentioned before as its value; the name is prefixed with a # symbol.
Creating Tables in HTML
You may want to consider using HTML tables in
your website. In addition to creating HTML tables to present data in rows and
columns, you can also create HTML tables to organize information on your web
page.
The process of creating an HTML table is similar
to the process that you used to create your web page and any elements that you
may have already included in your page, such as links or frames. Coding HTML
tables into your web page is fairly easy since you need only understand a few
basic table codes.
The basic structure of an HTML table consists of
the following tags:
-
Table tags:
-
Row tags: and
-
Cell tags: and
Constructing an HTML table consists of
describing the table between the beginning and the ending table tags,
. Between these tags, you then
construct each row and each cell in the row. To do this, you would first start
the row with the beginning row tag, , and then build the
row by creating each cell with the beginning cell tag, ,
adding the data for that cell, and then closing the cell with the ending cell
tag, . When you finish all of the cells for a row, you
would then close the row with the ending row tag, . Then,
for each new row, you would repeat the process of beginning the row, building
each cell in the row, and closing the row.
The following table is an example of a basic
table with three rows and two columns of data.
|
Data 1 |
Data 2 |
|
Data 3 |
Data 4 |
|
Data 5 |
Data 6 |
The codes that generated this table look like
this:
Data 1 |
Data 2 |
Data 3 |
Data 4 |
Data 5 |
Data 6 |
This table contains no border, title, or headings. If you wish to add any of
these elements to your table, you need to include additional HTML codes. The
codes for these elements are explained in the next section.
In addition to the basic table tags, several options are available for adding
additional elements to your table. For example, if you add a border, title, and
column headings to the table in the previous section, the table would then
resemble the following:
TABLE TITLE
Column A
Column B
|
Data 1 |
Data 2 |
|
Data 3 |
Data 4 |
|
Data 5 |
Data 6 |
The following codes generated the border, TABLE TITLE, and Column A and
Column B headings for this table:
TABLE TITLE
|
Column A
Column B
Note: If you wish to view the codes that generated the Data
1 through Data 6 cells, refer to the previous section.
Notice that the beginning table tag, , now includes
the border tag, BORDER="5", which places a border around the
table and frames each cell. The number that you ascribe to the border tag,
BORDER=n, sets the width of the table border.
Depending on how you design your table, you can then determine the border size
that best suits your table and the overall design of your web page.
To add a title to your table, you would place the title and the attributes of
that title between the row commands, and .
The heading codes, and , define a
heading cell and, by default, these codes center the heading and set it in bold
type. However, if you want the title to span across the columns below it, you
need to include the COLSPAN=n code. Since this table
has two columns, the COLSPAN="2" code was necessary. To add
emphasis to the header, you can use the header commands to make the text
larger. In this table, notice that the and
commands made the title larger. Finally, the
tag created
a space above the title.
The individual column headings are also described by the heading codes,
and . Since these codes, by
default, center the heading and set it in bold type, no additional commands or
attributes were included in the heading commands.
To give your table a more polished look, you can include commands that will
adjust the size of your table, add space in the cell, add space between rows,
and align the data in a cell. Working with these commands is basically a
process of trial and error to create the most appealing presentation of your
information. The type of table that you create and the overall design of your
web site will help you determine what works best for your table.
Some of the commands that enable you to customize your table include:
-
The WIDTH=n% command sets the
width of your table as a percentage of the screen. The letter n designates
the percentage that you assign to this command. For example, if you want
the width of your table to be one half the width of the screen, you would
include the WIDTH="50%" command in the beginning table
command.
-
The CELLPADDING=n command adjusts the vertical
dimension of the cells. The letter n designates the numerical
value that you assign to this command.
-
The CELLSPACING=n command sets the space or
border around the cells. The letter n designates the numerical
value that you assign to this command.
-
The ALIGN=(LEFT, RIGHT, or CENTER) command will
horizontally align the data in a cell. For example, if you wish to place
the data in the center of each cell in a row, you would include the
ALIGN=CENTER command within the row command.
-
The VALIGN=(TOP, MIDDLE, or BOTTOM) command will
vertically align the data in a cell. For example, if you wish to place the
data in the center of each cell in a row, you would include the
ALIGN=MIDDLE command within the row command.
In addition to the codes that were explained in the previous sections, the
table below now includes some of these commands.
TABLE TITLE
Column A
Column B
|
Data 1 |
Data 2 |
The following codes, along with codes previously discussed, created this
table:
TABLE TITLE
|
Column A
Column B
|
Data 1 |
Data 2 |
Notice that the TABLE command now includes the WIDTH="50%"
command. This command extends the table across one half of the width of the
text. Also, the CELLPADDING="4" command increases the vertical
dimension of the cells, and the CELLSPACING="3" command
increases the border around the cells. Finally, the ALIGN="CENTER"
command places Data 1 and Data 2 in the center of the cell.
|
