4-1 Links
Any object such as text, graphic images etc. that leads us to a new page on the web is called a link. Links can point to a page on our site or to a web page on another site.
In this lesson we will learn how to make links.
4-2 Text links
Creating a text link is an easy task. We will use <A> </A> tag to do this. As before we will need extra parameters from this tag. Look at example below :
<HTML>
<HEAD>
<TITLE>Example 4-1</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.yahoo.com">Click here to visit Yahoo</A>
</BODY>
</HTML>
Above code will create a link that clicking on it will send the user to Yahoo website. We have used HREF parameter to specify destination web page. Text between <A> and </A> is link text which user will click on it to go to destination page.
4-3 Image links
In previous section we used a text as a link point. It is possible to use an image instead of text. To do this, you must replace link text between <A> and </A> with an <IMG> tag that displays an image file.
<HTML>
<HEAD>
<TITLE>Example 4-1</TITLE>
</HEAD>
<BODY>
Click on below picture to visit my homepage.<BR><BR>
<A HREF="http://www.angelfire.com/nt/sarmadys">
<IMG SRC="me.gif">
</A>
</BODY>
</HTML>
In above example clicking on picture will bring surfer to the address of <A HREF=".."> tag.
If you see the result in a browser you will notice a blue border around the picture. This blue border ais dded to image because it is a default for image links. If you don't want this border, use border=0 parameter.
<HTML>
<HEAD>
<TITLE>Example 4-2</TITLE>
</HEAD>
<BODY>
Click on below picture to visit my homepage.<BR><BR>
<A HREF="http://www.angelfire.com/nt/sarmadys">
<IMG SRC="me.gif">
</A>
<BR><BR>Without link border : <BR><BR>
<A HREF="http://www.angelfire.com/nt/sarmadys">
<IMG SRC="me.gif" border=0>
</A>
</BODY>
</HTML>
4-4 Email links
If you have surfed web for a while you have seen links that when you click on them your email program starts a "compose new message" window that its receiver address is entered from web page . This email address is the address you want email to be sent to. Look at example below to see how you can make a link to an email address.
<BODY>
Click on below link to send an email to me <BR>
<A HREF="mailto:webmaster@learnem.comt">
Email Me
</A>
</BODY>
It uses a "mailto:" string before desired email address to convert it into a link address.
If you want, you can use a subject for the email. This example will show you how to do this :
<HTML>
<HEAD>
<TITLE>Example 4-2</TITLE>
</HEAD>
<BODY>
Click on below link to send us your comments .<BR>
<A HREF="mailto:webmaster@learnem.com?
subject:comments about your site">Email Me</A>
</BODY>
</HTML>
Just know that some browsers and email programs do not support subject in email links.
4-5 Lists
There are times that you want to insert items related to a subject in list form in your web page.
HTML provides you with tags to do this. <UL></UL> tags are first choice of these tags.
<HTML>
<HEAD>
<TITLE>Example 4-3</TITLE>
</HEAD>
<BODY>
This is a list of subjects covered in this lesson :
<UL>
<LI>Text Links
<LI>Image Links
<LI>Email Links
<LI>List of Items
</UL>
</BODY>
</HTML>
Result page will display list items in separate lines started with a small bullet. You see that we have entered list items started with a <LI> tag between <UL></UL> tags. <UL> tag is a part of list tags.
If you want the items to start with numbers instead of bullets, you must use <OL></OL> tags instead of <UL></UL> tags.
<OL>
<LI>Text Links
<LI>Image Links
<LI>Email Links
<LI>List of Items
</OL>
Be sure to write down codes in a file and view it with a browser.
4-6 Horizontal Separator Rule
Another useful html tag that you will use, is <HR> tag. If you need to separate text in your web page by horizontal lines , you may use this tag.
<BODY>
First section
<HR>
Second section
</BODY>
Result is two lines of text separated by a horizontal rule. You can specify parameters for horizontal rule. If you want to change width of rule you can use width parameter.
<HR WIDTH="50%"> width in percent
<HR WIDTH="100"> width in pixels
You can also determine line size parameter to change line diameter.
<HR size=5>
It is obvious that you can mix parameters with each other.
Horizontal rule created by this tag is a line that has a shade. You can change the rule to a solid line instead of a shaded line, you can add a NOSHADE parameter.
<HR SIZE=1 NOSHADE>
You can also determine Color for your line:
<HR color="#000000">
Above line will not have a shade and it is a solid line.
5-1 Tables
Table is a matrix like object that holds other objects such as text, images, buttons and etc. Even if you don't see them they are present in all professional web pages. Hidden tables hold graphic images and text in their places in these pages.
5-2 Drawing a table
To draw a table we will use <TABLE> tag. We will need two other related tags to make table rows and columns. These are <TR> and <TD> tags. <TR> tag is used to create a row in table. Data that will fit in a row will be enclosed in <TR> </TR> tags.
Following example produces a table with two rows. We will need <TD> tag to create columns in each row.
<TABLE>
<TR>
<TD>First Row</TD>
</TR>
<TR>
<TD>Second Row</TD>
</TR>
</TABLE>
If you browse this code in a browser you may surprise. You will not see any table but two lines of code. In fact table is there but you cannot see it. <TABLE> Tag will not make table borders. You must use a parameter to add borders to the table.
You can specify a border width for a table by adding a border parameter to <TABLE> tag.
<TABLE BORDER=1>
<TR>
<TD>First Row</TD>
</TR>
<TR>
<TD>Second Row</TD>
</TR>
</TABLE>
As you may guess default border size is 0. When we do not specify sizes for a table it will be in a
size that it needs to be able to fit text or any other object that it will hold.
5-3 Specifying table sizes
You can specify width for a table both in percents of page width and in pixels.
<HTML>
<HEAD>
<TITLE>Example 5-1</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=50% BORDER=1>
<TR>
<TD>Cell Row1 Col1</TD>
<TD>Cell Row1 Col2</TD>
</TR>
<TR>
<TD>Cell Row2 Col1</TD>
<TD>Cell Row2 Col2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
If you want you can determine table width in pixels.
<TABLE WIDTH=250 BORDER=1>
<TR>
<TD>Cell Row1 Col1</TD>
<TD>Cell Row1 Col2</TD>
</TR>
<TR>
<TD>Cell Row2 Col1</TD>
<TD>Cell Row2 Col2</TD>
</TR>
</TABLE>
You can specify table height too. In this way you can determine height and width of table. Width and height of table will be divided between cells in rows and columns so if table width is 100 and there are 2 columns then width of each cell will be 50.
Just pay attention to this important point that if you put a lot of text in a cell of a table it will be expanded to fit the text in it.
5-4 Text alignment in table cells
By default text entered in a cell will appear at the left side of the cell. You can add either of these options to <TD> tag to specify horizontal alignment of text.
<TD ALIGN=CENTER> or
<TD ALIGN=RIGHT> or
<TD ALIGN=LEFT>
As we saw, left alignment is default for cells.
You can also determine vertical alignment of text in a cell by adding VALIGN option to <TD> tag.
There are three values for VALIGN option : TOP, BOTTOM and MIDDLE. MIDDLE is default value if
you do not use this parameter.
<HTML>
<HEAD>
<TITLE>Example 5-2</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=50% HEIGHT=100 BORDER=3>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>TOP LEFT</TD>
<TD ALIGN=RIGHT VALIGN=TOP>TOP RIGHT</TD>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>BOTTOM LEFT</TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
5-5 Images in table cells
You will soon need to insert images in table cells. As we told later tables will be used to hold images in their places. You can insert an image in a table cell by inserting <IMG> tag between <TD></TD> tags of a
certain cell.
<HTML>
<HEAD>
<TITLE>Example 5-3</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=4>
<TR>
<TD><IMG SRC="image53.gif"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
In this lesson you learned creating tables. Tables are one of important objects in web pages. In next lesson you will learn more about tables.
Any object such as text, graphic images etc. that leads us to a new page on the web is called a link. Links can point to a page on our site or to a web page on another site.
In this lesson we will learn how to make links.
4-2 Text links
Creating a text link is an easy task. We will use <A> </A> tag to do this. As before we will need extra parameters from this tag. Look at example below :
<HTML>
<HEAD>
<TITLE>Example 4-1</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.yahoo.com">Click here to visit Yahoo</A>
</BODY>
</HTML>
Above code will create a link that clicking on it will send the user to Yahoo website. We have used HREF parameter to specify destination web page. Text between <A> and </A> is link text which user will click on it to go to destination page.
4-3 Image links
In previous section we used a text as a link point. It is possible to use an image instead of text. To do this, you must replace link text between <A> and </A> with an <IMG> tag that displays an image file.
<HTML>
<HEAD>
<TITLE>Example 4-1</TITLE>
</HEAD>
<BODY>
Click on below picture to visit my homepage.<BR><BR>
<A HREF="http://www.angelfire.com/nt/sarmadys">
<IMG SRC="me.gif">
</A>
</BODY>
</HTML>
In above example clicking on picture will bring surfer to the address of <A HREF=".."> tag.
If you see the result in a browser you will notice a blue border around the picture. This blue border ais dded to image because it is a default for image links. If you don't want this border, use border=0 parameter.
<HTML>
<HEAD>
<TITLE>Example 4-2</TITLE>
</HEAD>
<BODY>
Click on below picture to visit my homepage.<BR><BR>
<A HREF="http://www.angelfire.com/nt/sarmadys">
<IMG SRC="me.gif">
</A>
<BR><BR>Without link border : <BR><BR>
<A HREF="http://www.angelfire.com/nt/sarmadys">
<IMG SRC="me.gif" border=0>
</A>
</BODY>
</HTML>
4-4 Email links
If you have surfed web for a while you have seen links that when you click on them your email program starts a "compose new message" window that its receiver address is entered from web page . This email address is the address you want email to be sent to. Look at example below to see how you can make a link to an email address.
<BODY>
Click on below link to send an email to me <BR>
<A HREF="mailto:webmaster@learnem.comt">
Email Me
</A>
</BODY>
It uses a "mailto:" string before desired email address to convert it into a link address.
If you want, you can use a subject for the email. This example will show you how to do this :
<HTML>
<HEAD>
<TITLE>Example 4-2</TITLE>
</HEAD>
<BODY>
Click on below link to send us your comments .<BR>
<A HREF="mailto:webmaster@learnem.com?
subject:comments about your site">Email Me</A>
</BODY>
</HTML>
Just know that some browsers and email programs do not support subject in email links.
4-5 Lists
There are times that you want to insert items related to a subject in list form in your web page.
HTML provides you with tags to do this. <UL></UL> tags are first choice of these tags.
<HTML>
<HEAD>
<TITLE>Example 4-3</TITLE>
</HEAD>
<BODY>
This is a list of subjects covered in this lesson :
<UL>
<LI>Text Links
<LI>Image Links
<LI>Email Links
<LI>List of Items
</UL>
</BODY>
</HTML>
Result page will display list items in separate lines started with a small bullet. You see that we have entered list items started with a <LI> tag between <UL></UL> tags. <UL> tag is a part of list tags.
If you want the items to start with numbers instead of bullets, you must use <OL></OL> tags instead of <UL></UL> tags.
<OL>
<LI>Text Links
<LI>Image Links
<LI>Email Links
<LI>List of Items
</OL>
Be sure to write down codes in a file and view it with a browser.
4-6 Horizontal Separator Rule
Another useful html tag that you will use, is <HR> tag. If you need to separate text in your web page by horizontal lines , you may use this tag.
<BODY>
First section
<HR>
Second section
</BODY>
Result is two lines of text separated by a horizontal rule. You can specify parameters for horizontal rule. If you want to change width of rule you can use width parameter.
<HR WIDTH="50%"> width in percent
<HR WIDTH="100"> width in pixels
You can also determine line size parameter to change line diameter.
<HR size=5>
It is obvious that you can mix parameters with each other.
Horizontal rule created by this tag is a line that has a shade. You can change the rule to a solid line instead of a shaded line, you can add a NOSHADE parameter.
<HR SIZE=1 NOSHADE>
You can also determine Color for your line:
<HR color="#000000">
Above line will not have a shade and it is a solid line.
5-1 Tables
Table is a matrix like object that holds other objects such as text, images, buttons and etc. Even if you don't see them they are present in all professional web pages. Hidden tables hold graphic images and text in their places in these pages.
5-2 Drawing a table
To draw a table we will use <TABLE> tag. We will need two other related tags to make table rows and columns. These are <TR> and <TD> tags. <TR> tag is used to create a row in table. Data that will fit in a row will be enclosed in <TR> </TR> tags.
Following example produces a table with two rows. We will need <TD> tag to create columns in each row.
<TABLE>
<TR>
<TD>First Row</TD>
</TR>
<TR>
<TD>Second Row</TD>
</TR>
</TABLE>
If you browse this code in a browser you may surprise. You will not see any table but two lines of code. In fact table is there but you cannot see it. <TABLE> Tag will not make table borders. You must use a parameter to add borders to the table.
You can specify a border width for a table by adding a border parameter to <TABLE> tag.
<TABLE BORDER=1>
<TR>
<TD>First Row</TD>
</TR>
<TR>
<TD>Second Row</TD>
</TR>
</TABLE>
As you may guess default border size is 0. When we do not specify sizes for a table it will be in a
size that it needs to be able to fit text or any other object that it will hold.
5-3 Specifying table sizes
You can specify width for a table both in percents of page width and in pixels.
<HTML>
<HEAD>
<TITLE>Example 5-1</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=50% BORDER=1>
<TR>
<TD>Cell Row1 Col1</TD>
<TD>Cell Row1 Col2</TD>
</TR>
<TR>
<TD>Cell Row2 Col1</TD>
<TD>Cell Row2 Col2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
If you want you can determine table width in pixels.
<TABLE WIDTH=250 BORDER=1>
<TR>
<TD>Cell Row1 Col1</TD>
<TD>Cell Row1 Col2</TD>
</TR>
<TR>
<TD>Cell Row2 Col1</TD>
<TD>Cell Row2 Col2</TD>
</TR>
</TABLE>
You can specify table height too. In this way you can determine height and width of table. Width and height of table will be divided between cells in rows and columns so if table width is 100 and there are 2 columns then width of each cell will be 50.
Just pay attention to this important point that if you put a lot of text in a cell of a table it will be expanded to fit the text in it.
5-4 Text alignment in table cells
By default text entered in a cell will appear at the left side of the cell. You can add either of these options to <TD> tag to specify horizontal alignment of text.
<TD ALIGN=CENTER> or
<TD ALIGN=RIGHT> or
<TD ALIGN=LEFT>
As we saw, left alignment is default for cells.
You can also determine vertical alignment of text in a cell by adding VALIGN option to <TD> tag.
There are three values for VALIGN option : TOP, BOTTOM and MIDDLE. MIDDLE is default value if
you do not use this parameter.
<HTML>
<HEAD>
<TITLE>Example 5-2</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=50% HEIGHT=100 BORDER=3>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>TOP LEFT</TD>
<TD ALIGN=RIGHT VALIGN=TOP>TOP RIGHT</TD>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>BOTTOM LEFT</TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
5-5 Images in table cells
You will soon need to insert images in table cells. As we told later tables will be used to hold images in their places. You can insert an image in a table cell by inserting <IMG> tag between <TD></TD> tags of a
certain cell.
<HTML>
<HEAD>
<TITLE>Example 5-3</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=4>
<TR>
<TD><IMG SRC="image53.gif"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
In this lesson you learned creating tables. Tables are one of important objects in web pages. In next lesson you will learn more about tables.
0 comments:
Post a Comment