Web Technolgies
Introduction
BY:
IRSHAD KHAN
Image Insertion
For image insertion <img> tag is used
Place all images in the same directory/folder where you web
pages are
<html>
<head>
<title>image Insertion</title>
</head>
<body>
<p>This is the inserted image:</p> <br>
<img src=“[Link] “ border=“1” hspace=“10px”
vspace=“10px” alt="image not found" width="40px"
height="40" />
</body>
</html>
marquee
Marquee help in scrolling the text:
<marquee direction=“right”> text </marquee>
Direction can be “right”,“left”,”up” and
“down”
scrollamount="int"
onMouseOver="[Link]()"
onMouseOut="[Link]() "
Hyperlinks
Hyperlinking is used to link web pages.
Suppose we want to link two web pages [Link] and
[Link]….
Syntax:
<Html>
<body>
<a href=“[Link]”>jump to page2</a>
</body>
</html>
Attribute:Download
Download
<a href=“link" download>Abc</a>
Target
<a target="_blank">
_blank = Opens the linked document in a new
window or tab.
_self = Opens the linked document in the same
frame as it was clicked (this is default)
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag),
And each row is divided into data cells (with the <td> tag). td
stands for "table data," and holds the content of a data cell.
A <td> tag can contain text, links, images, lists, forms, other
tables, etc.
<table border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
HTML Table
Table Headers
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
Table caption
<caption>Table Example</caption>
Table footer
<tfoot>
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</tfoot>
HTML Table Attributes
Align
Align content in the cell
Left, right, center
Bgcolor
Specifies the background color for a table
#xxxxxx, colorname
Cellpadding
Specifies the space between the cell wall and the cell content
Cellspacing
Specifies the space between cells
Width
Specifies the width of a table
HTML Table Attributes
Align
Aligns the content in a cell
Left, right, center
Bgcolor
Specifies a background color for a cell
Nowrap
Specifies that the content inside a cell should not wrap
RowSpan
Sets the number of rows a cell should span
ColSpan
Specifies the number of columns a cell should span
Height
Sets the height of a cell
HTML Lists
The most common html lists are ordered list and un ordered list.
An ordered list
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items are marked with numbers.
<ol>
<li>item1</li>
<li>item2</li>
<li>item2</li>
</ol>
o Attributes:
Start = number, alpabet
Type = 1, A, a, I, I
Reversed = true/false
Title = “text”
Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
The list items are marked with bullets (typically small black
circles).
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
o Attributes:
Type = disc, square, circle
Title = “text”
