CSI

WEB
TECHNOLOGIES
WORKSHOP
INFORMATION TECHNOLOGY
 Lists

* HTML can be used to display content in the form of lists such as bulleted list, numbered lines etc.
◦ * There are 3 types of Lists in HTML - Ordered, Un-ordered and Definition Lists.
◦ * Ordered Lists: An Ordered list in HTML can be created using <OL> & <LI> tags. For example, a
list with numbers or alphabets.
◦ * Un-ordered Lists: An un-ordered list in HTML can be created using <UL> & <LI> tags. For
example, bulleted list.
◦ * Definition Lists: An Definition list in HTML can be created using <DL>, <DT> & <DD>tags. For
example, dictionary like list.
 ORDERED LIST
Usage:
<OL>
<LI> Bhimavaram</LI>
<LI> Akuveedu </LI>
<LI> Kaikaluru</LI>
</OL>
Output:
1. Bhimavaram
2.Akuveedu
3.Kaikaluru

<OL> Attributes: An Ordered list has 2 attributes 'type' & 'start'. Type can be 'A' or 'a'(for alphabets); 'I' or
'i' (for roman letters). Default is numbered list. 'start' attribute can be used to indicate the beginning value of
the list. For example, <ol type='A' start='5'> will display the list in alphabets starting from E.
 UN-ORDERED LIST

◦ Usage:
◦ <UL>
<LI> Bhimavaram</LI>
<LI> Akuveedu </LI>
<LI> Kaikaluru</LI>
</UL>
Output:
. Bhimavaram
.Akuveedu
.Kaikaluru

<UL> Attributes: Inorder to change the bullet type, an attribute named 'type' exists. The values of the
attribute 'type' can be 'square', 'disc' or 'circle'. Default: disc.
 DEFINITION LIST

◦ Usage:
◦ <DL>
<DT> Apple</DT>
<DD> Its a fruit, usually red in color. </DD>
<DT> Cricket</DT>
<DD> Its a game played by 11 members in a team.</DD>
</DL>
◦ Output:
◦ Apple
◦ Its a fruit,usually red in color.
◦ Cricket
◦ Its a game played by 11 members in a tea.
 HYPER LINKS

◦ A Hyperlink (or link) is a text or image when clicked on it takes you to a new document or to a
particular section of the same document.
◦ Hyperlinks are very useful for navigation of different webpages of a website.
◦ Hyperlinks in HTML can be created using 'anchor' tag (<A> ).
◦ Hyperlink Syntax: <A href='URL'> Link Text </A>
◦ Hyperlink Example: <A href='http://www.google.com'> Google Home Page </A> that displays as
follows Google Home Page
◦ 'href' Attribute: The href (hyperlink reference) attribute of <A> tag is a mandatory attribute that
is used to specify an URL / Document to which it is linked.
◦ 'target' Attribute: The 'target' attribute specifies where to open the linked document (URL). For
example, target='_blank' will always open the document in a new blank browser window.
.

Hyper Links
◦ To make an image as a hyperlink ,surround the image tag with anchor tag,for example
◦ <a href=www.srkrec.ac.in><img src=“logo.jpg”></a>
◦ Internal Hyperlinking:
◦ Internal Hyperlinking is the process of creating hyperlinks that point to a particular section of the
same page or a different page.
◦ This can be done using the name attribute. The tags with name attribute are called named
anchors (Example: <a name='sec1'> Section 1</a>).
• The process of creating internal hyperlink is done in 2 steps.
• First create a named anchor to a specific section of text in the document (Eg. name it as 'xyz’) as
follows

<a name=‘about’>About</a>
• Secondly, you can link to this 'xyz' section using the anchor tag as follows:
• <a href=‘#xyz’>Go to About</a>
 HTML TABLES
◦ Text in webpages can also be organised and displayed in the form of tables using <TABLE> tag.
◦ Table in HTML are a set of rows created by <TR> (Table Row) Tag.
◦ Any data in the table should be inside the <TD> tags. The data can be plain text, images, lists, hyperlinks or
even other tables.
◦ The following is the syntax of a normal table: (2 X 2 Table)
TABLE CODE:

◦ <TABLE border='1'>
◦ <TR>
◦ <TD> Cell 1 </TD> <TD> Cell 2</TD>
◦ </TR>
<TR>
◦ <TD> Cell 3 </TD> <TD> Cell 4</TD>
◦ </TR>
◦ </TABLE>
 TABLE ATTRIBUTES
◦ Border:
◦ <Table border=‘3’>
◦ <TABLE border='0'> creates a table with no border. A positive value defines the thickness of the border. The
greater the number, the more thick the border will be.
◦ Width:
◦ <TABLE width='100%’>
◦ The value can be relative (%) or absolute (px). Eg. <TABLE width='75%'> creates a table that spans 75% of the
horizontal space where as <TABLE width='350px'> will create a table with an exact width of 350px.
◦ Height:
◦ <TABLE height='100%’>
◦ Similar to width, the height value can be relative (%) or absolute (px).
 TABLE ATTRIBUTES
◦ Cellpadding:
◦ <TABLE cellpadding='2’>
◦ Specifies the space between the text and the cell borders. cellpadding='0' will display the text very adjacent to the
cell border where as a larger number gives more padding (space between text & border).
◦ Cellspacing:
◦ <TABLE cellspacing='2’>
◦ Specifies the space between two cells in a table. A larger number gives more space between two cells and the
inner borders look thicker.
 TD ATTRIBUTES
◦ Align:
◦ <TD align='right’>
◦ Aligns the text in the cell horizontally. The values are 'left' / 'right' / 'center’
◦ Valign:
◦ <TD valign='top’>
◦ Aligns the text in the cell vertically. The values are 'top' / 'middle' / 'bottom'. One can also use this along with the
align attribute.
◦ Colspan:
◦ <TD colspan='3’>
◦ Will merge 3 columns towards right. We need to replace 3 TD elements with one TD
◦ Rowspan:
◦ <TD rowspan='2’>
◦ Will merge 2 cells vertically. The TD element will merge with the cell of below row.
 ASSIGNMENT

◦ Create Your Class Timetble Using Html Tables