Lecture 2 Iwt

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
<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
<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>

Lecture 2 Iwt

Uploaded by

Copyright:

Available Formats

Lecture 2 Iwt

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 2 Iwt

Uploaded by

Copyright:

Available Formats

How to Write HTML program

• Attribute with Description

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

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

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

You might also like