ak html

HTML

Atul Kahate

[email protected]

HTML | Atul Kahate 2

HTML History Physicists at CERN (Centre Europeen

pour la Recherche Nucleaire) needed a way to easily share information

In 1980, Tim Berners-Lee developed the initial program for linking documents with each other

A decade of development led to WWW and HTML, including Web browsers


HTML Basics HTML stands for Hyper Text Markup

Language An HTML file is a text file containing

small markup tags The markup tags tell the Web browser

how to display the page An HTML file must have an htm or html

file extension An HTML file can be created using a

simple text editor

HTML Syntaxes


Sample HTML Page<html><head><title>Title of page</title></head><body>This is my first homepage. <b>This text is bold</b></body></html>


How to view it? Save it with a .htm or .html

extension Open it in browser or by simply

double clicking on it


HTML Tags HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two

characters < and > HTML tags normally come in pairs like <b> and

</b> The first tag in a pair is the start tag, the

second tag is the end tag The text between the start and end tags is the

element content HTML tags are not case sensitive, <b> means

the same as <B>


Why lowercase tags? The World Wide Web Consortium

(W3C) recommends lowercase tags in their HTML 4 recommendation

XHTML (the next generation HTML) demands lowercase tags


Tag Attributes Attributes provide additional information

regarding HTML tags/elements Always added to the start tag Come in name=“value” pairs Examples

<body bgcolor="red"> bgcolor attribute provides additional information

about the body tag (that the background color should be red)

<table border="0"> border attribute states that this table should not

have a border


Headings Headings are defined with the

<h1> to <h6> tags <h1> defines the largest heading <h6> defines the smallest heading HTML automatically adds an extra

blank line before and after a heading


Headings Example<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3><h4>This is a heading</h4><h5>This is a heading</h5><h6>This is a heading</h6>


Aligning Headings Use “align=left/center/right”

attribute Example

<H1 align=“center”>Heading in the center</H1>


Paragraphs Paragraphs are defined with the

<p> tag HTML automatically adds an extra

blank line before and after a paragraph


Paragraphs Example<p>This is a paragraph</p><p>This is another paragraph</p>


Line Breaks <br> tag is used when you want to

end a line Does not start a new paragraph The <br> tag forces a line break

wherever you place it Does not have a closing </br> tag


Line Breaks Example<p>This <br> is a para<br>graph

with line breaks</p>


Comments The comment tag is used to insert a

comment in the HTML source code A comment will be ignored by the

browser You can use comments to explain

your code, which can help you when you edit the source code at a later date

Comments Example

General tips


General Tips – 1 Different browsers display the

same HTML text differently The display size also drives this The text will be reformatted every

time the user resizes the window Never try to format the text in your

editor by adding empty lines and spaces to the text


General Tips – 2 HTML will truncate the spaces in your

text Any number of spaces count as one Using empty paragraphs <p> to insert

blank lines is a bad habit Use the <br> tag instead

HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading


Character Entities – 1 Some characters such as < have a

special meaning in HTML They cannot be used as they are,

inside text Character entities are used in their

place


Character Entities – 2 Made up of three parts

& Entity name or # and the ASCII value

of the character ;

Example < or < should be used in the

place of <


Common Entities

Result Description Entity Name Entity

Number

non-breaking space

< less than < <> greater than > >& ampersand & &" quotation mark " "' apostrophe ' '


Anchor Tag and Href Attribute The anchor tag can be used to

create a link to another document Called as hyperlink or URL The tag is <a>


Anchor Tag and Href Attribute Syntax

<a href="url">Text to be displayed</a> a = Create an anchor href = Target URL Text = Text to be displayed as substitute for

the URL Example

<a href="http://www.yahoo.com/">Visit Yahoo!</a>

Result: visit Yahoo!

HTML Tables


TablesTag Use<table> Marks a table within an HTML

document.<tr> Marks a row within a table.

<td> Marks a cell (table data) within a row.

<th> Marks a heading cell within a row.


Table Exercise Create the following HTML table

Book Name AuthorComputer Networks TanenbaumTCP/IP ComerTCP/IP Protocol Suite Forouzan


Solution – 1 Start with the <table> and </table> tags

<table></table>

Add <tr> tags between the boundaries noted above for each row.<table><tr></tr><tr></tr><tr></tr><tr></tr></table>


Solution – 2 Add <th> tags for the headings

<table><tr>

<th></th><th></th>

</tr><tr></tr><tr></tr><tr></tr></table>


Solution – 3 Add <td> tags for the data

<table><tr>

<th></th><th></th>

</tr><td></td><td></td>

<tr><td></td><td></td>

</tr><tr>

<td></td><td></td>

</tr></table>


Solution – 4 Add the element for each cell, including headers

<table><tr>

<th>Book Name</th><th>Author</th>

</tr><tr>

<td>Computer Networks</td><td>Tanenbaum</td>

</tr><tr>

<td>TCP/IP</td><td>Comer</td>

</tr><tr>

<td>TCP/IP Protocol Suite</td><td>Forouzan</td>

</tr></table>


Exercises1. How would add rows to this

table?2. How would add columns to this

table?


Solutions1. Add one more <tr> and </tr>

pair.2. Add one more <th> and </th>

pair.


Table ExampleHTML Code<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>Output

row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2


Table HeadingsHTML Code<table border="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>

Output

Heading Another Heading

row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2


Spanning Rows and Columns Spanning means stretching a cell

over multiple rows or columns Example

Publisher Book Name AuthorComputer Networks Tanenbaum

Pearson TCP/IPComer

Modern Operating SystemsTanenbaum


HTML Syntax for SpanningAttribute UseRowspan=n Used in <td> or <th> tags,

indicates how many rows the cell should span. For example, rowspan=3 spans three rows.

Colspan=n Used in <td> or <th> tags, indicates how many columns the cell should span. For example, colspan=3 spans three columns.


Exercise Create the following HTML table

Publisher Book Name AuthorComputer Networks Tanenbaum

Pearson TCP/IPComer

Modern Operating SystemsTanenbaum


Solution – 1 Start with the basic HTML table

<table><tr>

<th>Book Name</th><th>Author</th>

</tr><td>Computer Networks</td><td>Tanenbaum</td>

<tr><td>TCP/IP</td><td>Comer</td>

</tr><tr>


</tr></table>


Solution – 2 Add a new column for the Publisher title and name: Output would be distorted at

this stage<table><tr>

<th>Publisher</th><th>Book Name</th><th>Author</th>

</tr><tr>

<td>Pearson</td><td>Computer Networks</td><td>Tanenbaum</td>

</tr><tr>


</tr><tr>


</tr></table>


Solution – 3 Add rowspan attribute to the <th> or <td> tag that we want to span across

rows<table><tr>

<th>Publisher</th><th>Book Name</th><th>Author</th>

</tr><tr>

<td rowspan=3>Pearson</td><td>Computer Networks</td><td>Tanenbaum</td>

</tr><tr>


</tr><tr>


</tr></table>


Exercise Create the following table

Organization Project Completion %FCIB 90%

i-flex GCB 50%ADCB 95%


Column Spanning Create the following table

structureBook Descriptive information

Type Name Price ClassificationC++ 100 Language

Ref Java 200 LanguageWeb Tech 250 Concepts


Solution – 1 Start with the following<table><tr>

<th>Type</th><th>Name</th><th>Price</th><th>Classification</th>

</tr><tr>

<td rowspan=3>Ref</td><td>C++</td><td>100</td><td>Language</td>

</tr><tr>

<td>Java</td><td>200</td><td>Language</td>

</tr><tr>

<td>Web Tech</td><td>250</td><td>Concepts</td>

</tr></table>


Solution – 2 Add a <TR> tag with <TH> for spanning<table><tr>

<th>Book</th><th>Descriptive information</th>

</tr><tr>


</tr><tr>


</tr><tr>


</tr><tr>


</tr></table>


Solution – 3 Add <colspan> attribute for spanning<table><tr>

<th colspan=2>Book</th><th colspan=2>Descriptive information</th>

</tr><tr>


</tr><tr>


</tr><tr>


</tr><tr>


</tr></table>


Table Colors, Alignment <TABLE BGCOLOR = “…”> allows

us to specify the background color <TR ALIGN> allows specifying the

text alignment

Text Colors


Setting Text Colors Use the <TEXT = “Color”> tag

Example <BODY TEXT = “BLUE”>

Use the <FONT> tag Set font size, color, face (style) Example

<FONT FACE = “Comical” SIZE = “+2” COLOR = “RED”> Look at this! </FONT>

HTML Lists


Lists Two types

Unordered List of items marked with bullets Starts with <ul>, each item starts with

<li> Ordered

List of items marked with numbers Starts with <ol>, each item starts with

<li>


Allowed “types” in Lists Numbered lists

Type=“A”Number or letter with which the list should start; other options are a, I, i, or 1 (Default)

Bulleted lists Type=“disc” Bullet type to be used; other

options are square and circle


Unordered List ExampleHTML code<ul><li>Coffee</li><li>Milk</li></ul>

Output• Coffee • Milk


Another Unordered List Example

HTML code<ul type=“square”><li>Coffee</li><li>Milk</li></ul>

Output Coffee Milk


Ordered List ExampleHTML code<ol><li>Coffee</li><li>Milk</li></ol>

Output1. Coffee 2. Milk


Another Ordered List Example

HTML code<ol type=“A”><li>Coffee</li><li>Milk</li></ol>

OutputA. Coffee B. Milk


Nested List ExampleHTML code<html><body>

<h4>A nested List:</h4><ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>

</body></html>


Output of Nested List Example• Coffee • Tea

o Black tea o Green tea

• Milk

HTML Forms


Forms Form is an area containing form

elements A form element allows user to enter

information Text fields Drop-down buttons Radio buttons Checkboxes

<form> and </form> tags are used


<input> tag Most commonly used form element Type of input is specified with the

type attribute Concept

<form><input type=“text” …>…</form>


Input field tag and attributesTag/Attribute

Use

<input> Sets an area in a form for user inputType=“…” Text, Password, Checkbox, Radio, File, Hidden,

Image, Submit, ResetName=“…” Processes form resultsValue=“…” Provide default valuesSize=“n” Sets visible size for text inputsMaxlength=“n”

Maximum input size for text fields

Selected Default selection when form is initially displayed or reloaded


Forms Example – Textboxes<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>

Output:

First name:

Last name:


Forms Example – Radio Buttons<form><input type="radio" name=“fruit" value=“apple"> Apple<br><input type="radio" name=“fruit" value=“orange"> Orange</form>

Output:

o Appleo Orange


Forms Example – Checkboxes<form><input type="checkbox" name=“vehicle“ value=“bike”>I have a bike<br><input type="checkbox" name=“vehicle“ value=“car”>I have a car</form>

Output:

I have a bike I have a car


Forms Example – Submit Buttons<form name="input" action="html_form_action.asp“ method="get"> Username: <input type="text" name="user">

<input type="submit" value="Submit"></form>

Output:

Username: Submit


Forms Example – Dropdown Boxes<form><select name="cars"><option value="volvo">Volvo<option value="saab">Saab<option value="fiat">Fiat<option value="audi">Audi</select></form>

Output:

A dropdown box showing these four car names


Exercise Create the following form with guidelines

as specified below. Fields in the form should be first name, last

name, email, address, city, state, pin, and country

All text fields except City should have display length of 40 and maximum length of 50

City should have display length of 20 and maximum length of 40

State should have the following set of values to choose from: AP, Bi, Ma, MP, TN


Solution<html><body>

<title> Forms Example </title>

<form><input type="text" name="firstname" size="40" maxlength="50">First Name<br><input type="text" name="lastname" size="40" maxlength="50">Last Name<br><input type="text" name="email" size="40" maxlength="50">Email Address<br><input type="text" name="address" size="40" maxlength="50">Postal Address<br><input type="text" name="city" size="20" maxlength="40">City<select name="state"><option value="ap">AP<option value="bi">Bi<option value="ma">MH<option value="mp">MP<option value="mp">TN</select>State<input type="text" name="pin" size="10" maxlength="15">Pin code<br><input type="text" name="country" size="40" maxlength="50">Country<br>

</body></html>


Text areas Used for multi-line

inputs Example:<textarea

name=“comments” rows=“5” cols=“40”> Please provide comments</textarea>

Tag/Attribute

Use

<textarea> Area for multi-line user input

Name=“…” Name for the text area

Rows=“n” Number of visible rows

Cols=“n” Number of visible rows


Formatting Forms <html>

<head> <title>Formatted Form Example</title> </head>

<body> <form action="donothing.jsp" metod="POST">

<table border="2">

<tr> <th>Choose your payment mechanism:</th> <td> <select name="paymentmode"> <option value="creditcard">Credit Card</option> <option value="debitcard">Debit Card</option> </select> </td> </tr>

<tr> <th align="left">Type:</th> <td> <input type="radio" name="cardtype" value="visa">Visa <br> <input type="radio" name="cardtype" value="master">Master <br> <input type="radio" name="cardtype" value="other">Other </td> </tr>

</table> </form> </body> </html>

Images


Images The <img> tag is used The <src> tag specifies the URL of the

image we want to display Syntax

<img src="url"> The ‘alt’ attribute is used to define

alternate text for an image, in case the image is not found e.g. <img src="boat.gif" alt="Big Boat">


Image Example<html><body>

<h3>Image Example</h3>

<img src="crypto.jpg">

</body></html>


Sizing Images We can set the width and height of

images in pixels Example:

<img src=“crypto.jpg” width=“800” height=“400”>


Adding Background Images<html><body background="background.jpg">

<h3>Look: A background image!</h3>

<p>Both gif and jpg files can be used as HTML backgrounds.</p>

<p>If the image is smaller than the page, the image will repeat itself.</p>

</body></html>

Stylesheets


Formatting Nightmares The original HTML was never intended to

contain tags for formatting a document HTML tags were intended to define the

content of the document like: <p>This is a paragraph</p> <ul>This is an unordered list</ul>

When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare

A long, expensive and unduly painful process!


Enter HTML 4.0 All formatting can be moved out of

the HTML document and into a separate style sheet

Separation of the presentation of the document from its structure

Total control of presentation layout without messing up the document content


One css, Many html documents

Corporate.css

Document1.html

Document2.html

Document3.html

Document4.html


Styles When a browser comes across a

style sheet, it formats the document according to it

Three ways External style sheet Internal style sheet Inline style sheet


External Style Sheet Ideal when the style is applied to many

pages With an external style sheet, you can

change the look of an entire Web site by changing one file

Two methods to use such a style sheet Each page must link to the style sheet using the

<link> tag The <link> tag goes inside the head section

Use the @import directive

External Style Sheet Example: Using link Allows different style sheets to be used

with one HTML (e.g. view.css, print.css) One of these would be used, depending

on the requirement

<head><link rel="stylesheet" type="text/css"href=“view.css"> </head>


External Style Sheet Example: Using import Multiple style sheets, each one having

a separate function (e.g. one for organization, one for department, …)

<HEAD><STYLE>@import url (“red.css”)@import url (“green.css”)</STYLE>


Internal Style Sheet Should be used when a single

document has a unique style You define internal styles in the

head section with the <style> tag


Internal Style Sheet Example<head><style type="text/css">body {background-color: red}p {margin-left: 20px}</style></head>


Inline Style Sheet Should be used when a unique

style is to be applied to a single occurrence of an element

To use inline styles you use the style attribute in the relevant tag

The style attribute can contain any CSS property


Inline Style Sheet Example<p style="color: red; margin-left:

20px">This is a paragraph</p>


HTML Head The head element contains general information,

also called meta-information, about a document Meta means "information about" Meta-information means information about

information Elements inside the Head element are not

displayed by the browser According to the HTML standard, only a few tags

are legal inside the head section: <base>, <link>, <meta>, <title>, <style>, and <script>


HTML URLs Uniform Resource Locator (URL) is used to

address a document (or other data) on the World Wide Web

scheme://host.domain:port/path/filename Scheme: Type of Internet service. The most

common type is http. Domain: The Internet domain name, e.g.

yahoo.com. Host: The domain host (default is www) :Port: The port number at the host (Default 80) Path: Path (a sub directory) on the server Filename: The name of the document


HTML URL Examples Email

<a href="mailto:[email protected]">[email protected]</a>

JavaScript: Introduction


HTML Scripts Scripts make static HTML pages

interactive <script> tag is used Browsers are programmed to

interpret scripts


Script Example<html><head></head><body><script type="text/javascript">document.write("Hello World!")</script></body></html>Output:

Hello World!


Handling Old Browsers Old browsers that cannot interpret

scripts will display the scripting code on the screen!

To prevent this, we can comment out the scripting code Old browsers would ignore scripts Newer browsers would interpret and

execute the scripts, as expected See next slide

Handling Old Browsers – Code JavaScript:

<script type="text/javascript"></script>

VBScript:<script type="text/vbscript"></script>

Thank you!

Questions and Comments Welcome!

ak html

Education