Scribd
Upload
6 views23 pages

Lecture 2 Iwt

Uploaded by

jannatbhuyan48
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views23 pages

Lecture 2 Iwt

Uploaded by

jannatbhuyan48
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

How to Write HTML program

Basic HTML
• Defines the content and structure of information
on a page
– Not the same a presentation (appearance in the
browser)
• Surrounds text content with opening and closing
tags
• Each tag’s name represents an HTML element
– Syntax: <tagname>Content goes here...</tagname>
• Most whitespace is collapsed or ignored in HTML
• We will use HTML5 syntax
Structure of HTML page
• DOCTYPE tells browser <!DOCTYPE html>
<html>
to interpret code as <head>
information about the page
HTML5 </head>
• HTML page is save in a <body>
page contents
file with extension .html </body>
</html>
• The header describes the
page, and the body holds
the page’s content
Page title: <title>
<!DOCTYPE html>
• Describes the title of <html>
<head>
the page Displayed in <title>Introduction to HTML
</title>
the Web browser’s title </head>
<body>
bar and when page contents
bookmarking a page </body>
</html>
Paragraph: <p>
<!DOCTYPE html>
• Describes a paragraph of text <html>
<head>
(block element) <title>Introduction to
HTML </title>
• This is placed within the body </head>
<body>
of the page <p>This is a paragraph of
text </p>
• Examples: </body>
</html>
http://www.w3schools.com/tags/
tryit.as
p?filename=tryhtml_paragraphs2
Headings: <h1>, <h2>, … <h6>
<!DOCTYPE html>
• Separate major areas of a <html>
<head>
page (block element) <title>Introduction to HTML </title>
– This is placed within the body </head>
<body>
of the page Examples: <p>This is a paragraph of text </p>
http://www.w3schools.com/t <h1>University of Smart People</h1>
ags/tryit.as <h2>Department of Computer S cience</h2>
p?filename=tryhtml_headers <h3>Sponsored by Big Rich Corporation</h3>
<h6>We teach the best stuff here!</h6>
</body>
</html>
HTML Attributes

• Attribute with Description


• alt :Specifies an alternative text for an image, when
the image cannot be displayed
• disabled :Specifies that an input element should be
disabled
• href : Specifies the URL (web address) for a link
• id : Specifies a unique id for an element
• src : Specifies the URL (web address) for an image
• Style: Specifies an inline CSS style for an element
• titleSpecifies extra information about an element
(displayed as a tool tip)
Tables:
• An HTML table is defined with the <table> tag.
• Each table row is defined with the <tr> tag.
• A table header is defined with the <th> tag.
• By default, table headings are bold and centered.
• A table data/cell is defined with the <td> tag.
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
Basic HTML Table
<th>Lastname</th>
Firstname Lastname Age
<th>Age</th>
Jill Smith 50
</tr> Eve Jackson 94
<tr> John Doe 80
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Adding a Border
• If you do not specify a border for the table, it will be displayed without borders.
• Example
table, th, td {
border: 1px solid black;
}
Collapsed Borders
• If you want the borders to collapse into one border
• Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.

Example
th, td {
padding: 15px;
}
Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use text-align property:
Example
th {
text-align: left;
}
Adding Border Spacing
• Border spacing specifies the space between the cells.
• To set the border spacing for a table, use border-spacing property:
Example
table {
border-spacing: 5px;
}
Cells that Span Many Columns
• To make a cell span more than one column, use the colspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Adding a Caption
• To add a caption to a table, use the <caption> tag:
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
<html> <table style="width:100%">
<head> <tr>
<style> <th>Firstname</th>
table, th, td { <th>Lastname</th>
border: 1px solid red; <th>Age</th>
border-collapse: collapse; </tr>
} <tr>
th, td { <td>Jill</td>
padding: 15px; <td>Smith</td>
} <td>50</td>
</style> </tr>
</head> <tr>
<body> <td>Eve</td>
<td>Jackson</td>
<h2>Cellpadding</h2> <td>94</td>
<p>Cell padding specifies the space between the cell </tr>
content and its borders.</p> <tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<p>Try to change the padding to 5px.</p>

</body>
</html>
• Exercise:
• Make the element below into a link
that goes to "https://vssut.ac.in".

• <a ……… =“https://vssut.ac.in">This


is a link</a>
HTML The class Attribute
Using The class Attribute
• The class attribute specifies one or more class names for an HTML element.
• The class name can be used by CSS and JavaScript to perform certain tasks for elements
with the specified class name.
• In CSS, to select elements with a specific class, write a period (.) character, followed by
the name of the class:

Example
Use CSS to style all elements with the class name "city":

<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Multiple Classes
HTML elements can have more than one class name, each class name must be
separated by a space.

Example
Style elements with the class name "city", also style elements with the class name
"main":

<h2 class="city main">London</h2>


<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

You might also like