You will nest other tags inside paragraph tag for fonts, styles and other tags that will be used inside a paragraph. There is another option in forming text that is using
tag. Text between
tags will be displayed exactly
file:///F|/new folder/lesson3.html (1 of 6) [12/27/2000 10:13:10 PM]
Webpage design course
as it is typed in html source. Therefore you will not need tags to break lines. It is enough to enter text in separate lines with enter key (new line character) at their end. 3-2 Space between texts Browser does not show more than one space between to words even if you have entered a hundred spaces between them in html source. If you want to enter more than one blank character between two words you will need to use a small code for this purpose. It is " " without the quotes. Here we insert 5 extra spaces. 3-3 Paragraph alignments in your web page You can determine how a paragraph will be aligned in a web page. You can align text in left, right or center of a web page. To specify alignment for a paragraph you must use an extra parameter for your paragraph tag.You can use one of these combinations:
Example 3-1: Example 3-1
You can align text in left.
You can align text in center.
You can align text in right.
3-4 Indented Text If you need a text that is indented from both sides of web page you can use
tag. Text that is enclosed in this tag will have a margin from left and right of your web page. Example 3-2: Example 3-2 We see block quotes here:
In cases that you want to emphasis on a paragraph in your text you can use this tag. It will indent your text from
file:///F|/new folder/lesson3.html (2 of 6) [12/27/2000 10:13:10 PM]
Webpage design course
both sides.
3-5 Images in your web page In previous lesson you learned how to use an image as a background for web pages. It was Here we want to learn how to add an image in a web page. Tag that will be used for this purpose is tag. Actually we will need parameters for this tag that specify image file location, file name and other optional parameters. Look at this example: Example 3-3: Example 3-3This is an image: In this example I have used both a background image and an image between text.Also you may have noticed that this tag is also a single tag that does not need an ending tag. If you want to show your image in a different size than its real size, you can specify its size as below. Example 3-4: Example 3-4 This is an image: 3-6 Alignment and border size for images You can align image in your web page by inclosing it in a paragraph that is aligned as aligned to left, right or center.
file:///F|/new folder/lesson3.html (3 of 6) [12/27/2000 10:13:10 PM]
Webpage design course
See example below Example 3-5: Example 3-5 This is an image:
You can add a border to an image by adding a border parameter to tag. See the results of this html code. You can see examples of this lesson in our site. Go to email course section in our site to see ready examples. Example 3-6: Example 3-6
4-4 Email links
file:///F|/new folder/lesson4.html (2 of 5) [12/27/2000 10:13:11 PM]
Webpage design course
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. Click on below link to send an email to me Email Me 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 : Example 4-3: Example 4-2 Click on below link to send us your comments . Email Me 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.
tags are first choice of these tags. Example 4-4: Example 4-3 This is a list of subjects covered in this lesson :
Text Links
Image Links
Email Links
List of Items
Result page will display list items in separate lines started with a small bullet. You see that we
file:///F|/new folder/lesson4.html (3 of 5) [12/27/2000 10:13:11 PM]
Webpage design course
have entered list items started with a
tag between
tags.
tag is a part of list tags. If you want the items to start with numbers instead of bullets, you must use tags instead of
tag. We will need two other related tags to make table rows and columns. These are
and
tags.
tag is used to create a row in table. Data that will fit in a row will be enclosed in
tags. Following example produces a table with two rows. We will need
tag to create columns in each row.
file:///F|/new folder/lesson5.html (1 of 5) [12/27/2000 10:13:11 PM]
Webpage design course
First Row
Second Row
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.
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
tag.
First Row
Second Row
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. Example 5-1: Example 5-1
Cell Row1 Col1
Cell Row1 Col2
Cell Row2 Col1
Cell Row2 Col2
If you want you can determine table width in pixels.
file:///F|/new folder/lesson5.html (2 of 5) [12/27/2000 10:13:11 PM]
Webpage design course
Cell Row1 Col1
Cell Row1 Col2
Cell Row2 Col1
Cell Row2 Col2
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
tag to specify horizontal alignment of text.
or
or
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
tag. There are three values for VALIGN option : TOP, BOTTOM and MIDDLE. MIDDLE is default value if you do not use this parameter. Example 5-2: Example 5-2
TOP LEFT
TOP RIGHT
BOTTOM LEFT
BOTTOM RIGHT
file:///F|/new folder/lesson5.html (3 of 5) [12/27/2000 10:13:11 PM]
Webpage design course
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 tag between
In above table we have not determined sizes for two cells in first row. In this way you will not be able to say how will these cells display in different browsers and different screen modes. You can determine width of each column in your table by specifying width of cells in first row. Just be careful about correctness of sizes you specify. For example if your table width is 200 pixels sum of cell widths must be exactly 200. Example 6-1a: Example 6-1a
TOP LEFT
TOP RIGHT
BOTTOM LEFT
BOTTOM RIGHT
You can also determine cell widths in percent. Sum of cell width percentages must be 100%. Example 6-1b: Example 6-1b
When you determine sizes of first row cells you will not need to determine widths for second row cells. If you want a cell to be empty, you cannot omit definition for that cell. Insert cell definition, and enter a between
tags .As we told in later lessons this means a space character. You must enter at least a space in this form if you need an empty cell.Otherwise area of that cell will not apear like an empty cell. Example 6-2: Example 6-2
TOP LEFT
BOTTOM RIGHT
In above example we have two empty cells but as we have specified both table and cell sizes, table will not lose it's shape. If we remove sizes, we cannot guarantee how it will be displayed on different browsers and screen modes. For the above reason we suggest you to determine table sizes in every table you use. Using fixed sizes is not a good idea. Use percent sizes instead of fixed sizes. 6-3 Cell padding You can specify two other important size parameters for a table. Cell padding is the space between cell borders and table contents such as text, image etc. Example 6-3: Example 6-3
file:///F|/new folder/lesson6.html (3 of 6) [12/27/2000 10:13:12 PM]
Webpage design course
Cell padding effect :
TOP LEFT
TOP RIGHT
BOTTOM LEFT
BOTTOM RIGHT
Default value for this option is 1. It means that contents of a cell will have a distance of one pixel with borders. If you don't want any space between object inside the cells and its borders you can determine the value of 0 for this option. 6-4 Cell spacing Cell spacing parameter determines the space between inner and outer parts of a table. In fact a table is constructed form two borders . A border area and a cell area. There is a space between cell area and outer border. We call this "cell spacing". If you increase this value you will have a thick border. Default value for this property is 2. If you specify 0 for it, you will have a very thin border. Example 6-4: Example 6-4 Cell spacing effect :
TOP LEFT
TOP RIGHT
BOTTOM LEFT
BOTTOM RIGHT
You can also mix cell spacing and cell padding options to make specific tables that you need. 6-5 Tables and images Sometimes you need an image that when users clicks on different parts of it they go to different
file:///F|/new folder/lesson6.html (4 of 6) [12/27/2000 10:13:12 PM]
Webpage design course
pages. In previous lessons you learned how to use an image as a link to another address or page. In this special case you will need to cut your picture into as many parts as you need and insert them in a table that holds image parts beside each other. Then you will link each image part to a different page. You will also need to set both cell spacing and cell padding to the value of 0 to prevent the table to be seen between image parts. In this way users will see a single image but when they click on different parts of image they will go to different addresses. You can see an example of this technique in example page for this lesson on our site among other examples. 6-6 Working with graphic editing programs As a web designer you need a graphics manipulation program.There are many professional programs in the market. Photoshop is a very professional and powerful program but it is an expensive program. You can use PaintShop Pro instead. This is another professional but easy program. You can even download limited versions of this program from many download sites. These programs will enable you to cut pictures into parts, add many effects on your graphics, decrease graphics size etc. Now in this lesson you will need such a program. You must work with the program to increase your expertise with it. In this way it will be possible for you to make interesting images for your web pages. In exercises of this lesson you must use sucha program to cut an image into four parts. It is a starting point. One side of web design art is graphics design. So start Now ! Notice: You can find examples of this lessons in our website. There you must go to resources section and then click on "Web email course example page."
Exercises:
Attention: Do not use any html editing program like MS FrontPage . You must work on the codes yourself. Course support: Paid students must send exercises to their tutor. Tutor will return corrected exercise to the student. Others can ask their questions in Support forums in our web site.
1- In previous lesson we asked you to create a 2*2 table with images inside each cell that gather
file:///F|/new folder/lesson6.html (5 of 6) [12/27/2000 10:13:12 PM]
Webpage design course
at the center of the table. As we did not know how to omit cell padding and cell spacing, image parts had a little space between them. Rewrite that example in a way that picture parts stick to each other so that the user can not realize that they are different images. Cut a ready image to four parts with your desired graphics editing program. Then use these 4 images for this exercise. If you send your exercise to your tutor send pictures too. Also tell which program you are using for editing images. 2- Rewrite above example so that each part of image links us to a different page in your website. Use inside
In above example entire table will change to new color even table borders. You can also determine background color for each row of your table. If you want to do this, you must use BGCOLOR option inside
tag of the desired row. This second method will only change colors of cells in specified row. Example 7-2: Example 7-2
A
B
C
D
You can even change color of individual cells by using BGCOLOR option in
cell tags. You can mix all above options to create your desired table. In next example we will change color of first row to "#336699". Then we will change color of two cells in second row to "#66CCFF" and "#CCFFFF" respectively. Example 7-3: Example 7-3
7-2 Column Span Sometimes you need to join two cells in a row to each other. For example in a 2*3 table we may want to join two cells with each other . In this way we will have two cells in first row and three cells in second row. Enter this html code in a file and browse it in your browser to see what is column span.
Example 7-4: Example 7-4
A
B
A
B
C
Just be careful that when you have for example 2 cells in first row and first one uses column span parameter COLSPAN=2 it means that it is equal to two cells. Therefore you must have three cells in next row (three
tags) or you may use COLSPAN to create cells that when you add them, it will be equal to previous row or 3 in this example. 7-3 Row Span This time we want to join two cells in a column (from different rows). This is the same as previous section with the difference that we will join cells from different rows rather than cells in different columns. This time we must use ROWSPAN instead of COLSPAN.
Example 7-5: Example 7-5
file:///F|/new folder/lesson7.html (3 of 6) [12/27/2000 10:13:12 PM]
Webpage design course
A
B
C
D
E
Again you must be careful that when you have for example a cell in first column that you have joined two cells to create it using the option ROWSPAN=2 then your table must have two rows and you must take this in mind in next parts of your table. In above example we only entered two cells in second row (started from second
) as first cell of first row has occupied first cell of this row too and we have only two cells left of 3 cells. Enter this example and browse it to see the results. You may want to mix these tags to create your custom tables however this is a complicated task and you must work hard to gain needed experience with these tables. 7-4 Nested Tables Yes we can nest tables in each other. If you are going to design complicated web pages you will always do this. For example you need a table with border size of 3 in a specific part of a web page. To fix position of that table in your desired place you will need a table with border size of 0. In this case first table can be seen as its border size is 2 but second one will not be seen as you used it just for positioning of first table. Anyway, writing a nested table code is easy. Example 7-6: Example 7-6