HYPER TEXT MARKUP LANGUAGELecture No 5

INTRODUCTION

Stands for Hyper-Text Markup Language

Hyper-Text: String of Words in One Document

Directly Linked to Some Other Document

The Other Document can be Present anywhere on the Web

Used to Create Web Pages

Updated Version is XHTML

XHTML stands for eXtensible Hyper-Text Markup Language

WEB PAGES Web Pages are Present on Specialized

Computers

These Computers are Called Web Servers

These Servers can be accessed by any Device using Internet

Web Pages are Displayed by Web Browsers

Popular Web Browsers are:

1. Internet Explorer2. Google Chrome3. Opera4. Mozilla5. Safari

WEB PAGES In Simplest Form are HTML Documents

HTML Documents have Extensions:

.html .htm

Web Pages contain HTML Tags/Markups

Web Browsers Read these Tags and Display Appropriate Format

Also called HTML Documents

HTML Documents contain HTML Tags and Plain Simple Text

HYPER-TEXT MARKUP LANGUAGE (CONT.)

Not a Programming Language

No if Structure No Variables No Loops No Functions No Constants No Database Connectivity

Just a Markup Language Markup Language is Set of Markup Tags Tags Occur in a Pair 1st One is Start Tag and 2nd One is End Tag Start Tag also called Opening Tag End Tag also called Closing Tag

HYPER-TEXT MARKUP LANGUAGE

Markup Language is a System for Specifying and Describing Various Components of a HTML Document

Components can be:

Headings

Paragraphs

Anchors (Links)

Images

Tables

BRIEF HISTORY (CONT.)

Appeared in 1990 Official Language of World Wide Web Product of SGML

SGML: Standard Generalized Markup Language ISO Standard Technology for defining

Generalized Markup Languages for Documents Markup Describes Documents Structure and Attributes

Markup Does not Describe the Processing Complex Collection of Technical Specification

Markup Languages These were used in Electronic Document

Exchange

BRIEF HISTORYHTML:

HTML was created to facilitate persons who are not specialized in SGML

Gone Through many changes and Enhancements

New Features were Added Outdated Features were Removed Technical Specifications are available

from http://www.w3.org/ Technical Specifications contain Standards These Standards ensure that Web Sites

Operate Consistently on variety of Web Browsers and Operating Systems

VERSIONS OF HTML(CONT.)

HTML 1.0: First Version Published in 1993

HTML 2.0: Extended from HTML 1.0 Released in 1995

HTML 3.0: Came after HTML 3.0 1996

HTML 4.0: Published in 1997

HTML 4.01: Few Minor Changes in HTML 4.0 Released in 1999 Was Final, Complete Specification

of HTML

VERSIONS OF HTML

XHTML: Extensible HTML Came in 2000 Powerful Language Similar to HTML 4.01 Current Version is XHTML 1.0 Stricter and Cleaner Version Pre-Defined Set of Tags Have to Choose Tags to use User Cannot Create Tags

EXTENSIBLE MARKUP LANGUAGE

XML Much Like HTML Designed to Carry Data Not Designed to Display Data XML Tags are not Pre-Defined User can Define his/her Own Tags Designed to be Self-Descriptive Doesn`t Do Anything XML was Created to:

Structure Information Store Information Transport Information

XML Contains Information Wrapped in Tags

DIFFERENCE BETWEEN HTML AND XML

Not A Replacement of HTML XML has Focus on Data HTML has Focus on Data Display Format XML has No Pre-Defined Tags HTML has All Per-Defined Tags User can Define Tags in XML User cannot Define Tags in HTML

CHOOSING AN EDITOR FOR HTMLWindows:

Notepad Word Pad

Linux: VI Emacs

VI and Emacs are Text Editors in LinuxMac:

TextEdit

CHOOSING A WEB-BROWSER FOR HTML (CONT.)Internet Explorer:

Default Browser for Microsoft Windows Operating Systems

Integrated in the Windows PackageGoogle Chrome:

Browser from GoogleApple Safari:

Default Browser for Mac OS X Available for Microsoft Windows

Mozilla Firefox: Free Browser Available for Windows, Linux, Mac

OS XOpera:

Free Browser Available for Variety of Operating

Systems

CHOOSING A WEB-BROWSER FOR HTMLKonqueror:

Browser for Linux

Netscape Navigator: Same Software Powers as of

Firefox Available for Windows, Linux, Mac

OS XOmniWeb:

Shareware Costs a Small Fee Browser for Mac OS X

URL

Uniform Resource Locator An Address Allows Web Connected Devices to Locate

a Specific File on Specific Server in order to Download and Display it to user

PARTS OF MARKUP

Three Parts of Markup:

1. Tag

2. Element

3. Attribute

TAGS

Coded Symbols Separate and Distinguish One Portion of

Content from the Other Informs the Browser about the Content`s

Type Most of Tags in HTML and XHTML have

Names Names Describe what Tags Exactly Do Names Describe the Type of Content such

as Heading, Paragraph, Text Box etc etc……

Tags are Surrounded by Angle Brackets < >

Angle Brackets Distinguish Tags from Ordinary Text

Examples: <html> <h1>, <h2>, <h3> <p>

HOW TO WRITE TAGS(CONT.)

Write First Angle Bracket <

Write the Name of Tag such as:h1, h2, p,

html

Write Second Angle Bracket after Tag Name >

Tag will look like as:

<h1>, <h2>, <p>, <html>Note:

In HTML Tag Names are not Case-Sensitive

In XHTML Tag Names are Case-Sensitive and Written in Lower Case Letters

HOW TO WRITE TAGS

Tags come in Pairs

Opening Tag or Start Tag Marks the Beginning of Content Type as:<html>

Closing Tag or End Tag Marks the End of Content Type as: </html>

Opening and Closing Tags are also called Twin TagsExample:

<p>This is a Paragraph</p>

Opening Tag Closing Tag

ELEMENTS

Twin Tags and Everything between them Elements are Basic Building Blocks of

XHTML In HTML Some Elements do not Require

Closing Tag In XHTML All Elements must have a

Closing Tag Elements for Line Break and Horizontal

Rule are Empty Elements Empty Elements Contain No Contents Empty Elements just contain Tags

Example:

<h1>Heading No 1</h1>

Element

ATTRIBUTES (CONT.)

Opening Tag can Carry Attributes in it Attributes Provide More Information of

Element Attributes Describe Properties that an

Element has Attribute contains two things:

1. Attribute Name2. Attribute Value

Attributes Names and Attribute Values are Case Sensitive

Lower Case Letters are used for Attributes Attribute Values are Enclosed in Double

QuotesExample:

<p align=“center”/>This is Paragraph</p>Here ‘align’ is Attribute Name and ‘center’ is Attribute Value

ATTRIBUTES

Opening Tag can Contain More than One Attributes in it

Example:

<img src=“c:\img1.bmp” width=“200” height=“200” /> </img>

This Element has Multiple Attributes in the Opening Tag

TAGS, ELEMENTS, ATTRIBUTES

RECIPE TO WRITE HTML DOCUMENT

Step 1: Open HTML EditorStep 2: Write <html> TagStep 3: Write <head> TagStep 4: Write <title> Tag and Close itStep 5: Close <head> TagStep 6: Start <body> TagStep 7: <body> Tag Contains the Actual

PageStep 8: Write Contents in <body> TagStep 9: Close <body> TagStep 10: Close <html> Tag

FIRST PAGE IN HTML<html>

<head><title>Page No 1</title>

</head><body>

<h1>Heading 1</h1><p>Paragraph</p>

</body></html>Note the Following:

…. This Page will have Title Contents ‘Page No 1’…. Title Tag is Included in Head Tag…. This Page will have Heading Contents ‘Heading 1’…. This Page will have Paragraph Contents ‘Paragraph’…. The Actual Contents of Web Page are Present in Body Tag

FIRST PAGE PREVIEW

NESTING ELEMENTS Elements can be Nested Nesting must be Performed Correctly Opening and Closing Tags must Appear in

Correct Order Occurrence of Closing Tags must be in

Accordance with the Sequence of Opening Tags Example:

<p><strong>This is Paragraph</strong></p>

This Nesting has Correct Order of Opening and Closing Tags

WHITE SPACE ALLOWED HTML Document can be Formatted with

Blank Spaces These Spaces are Ignored by Web

Browsers Blank Spaces can be used to Increase

Readability and Clear Look Blank Spaces are Removed Blank Space Can be: Spaces, Tabs

Example:

<p>Thisis a

Paragraph</p>

This Produces following Output in the Web Browser:This is a Paragraph

HEADINGS Headings are Important Headings are Defined with following Tags:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

<h1> is the Largest Heading <h6> is the Smallest Heading

Browsers Automatically Add Empty Line Before and After Heading

PARAGRAPHS, LINE BREAK, HORIZONTAL RULE

Defined with <p> Tag

Browsers Automatically Add a Blank Line After and Before <p> Tag

Line Break: <br /> Tag Defines a Line Break Inserts a New Line

Horizontal Rule: <hr /> Tag Defines a Horizontal Rule Inserts a Horizontal Line Used to Separate Contents

FORMATTING (CONT.) Tags Used:

<b> Defines Bold Text <i> Defines Italic Text <u> Defines Underlined Text <big> Defines Big Text <em> Defines Emphasized Text <small> Defines Small Text <strong> Defines Strong Text <sub> Defines Subscripted Text <sup> Defines Superscripted Text <ins> Defines Inserted Text <del> Defines Deleted Text

Deleted Text has a Line Through it

FORMATTING

<code> Defines Compute Coded Text

<kbd> Defines Keyboard Text

<samp> Defines Sample Computer Code

<tt> Defines Teletype Text

<var> Defines a Variable Text

<pre> Defines Pre-Formatted Text

Preformatted Text Displays Text as it is WrittenIt Preserves both Blank Spaces and

Line Breaks

HYPERLINKS

Links are Mostly Used Allow users to Move from one Page to

Another by Clicking the Link

<a> Tag is used for HyperlinksExample:

<a href=http://www.gmail.com/ /> GMAIL </a>

This Element with <a> Tag Creates a Hyperlink Named ‘GMAIL’When User Clicks the Hyperlink then ‘www.gmail.com’ will be Opened

href is Attribute which defines the URL of the Page to be Moved to

IMAGES

Images are Important Part of HTML <img> Tag is used to Insert Images Path of Image is given in ‘src’ Attribute

Example:

<img src=“c:\myimage.bmp” ?>

This Element with <img> Tag Displays Image named ‘myimage.bmp’ in the Browser‘src’ Attribute is the URL of the Image

Also: alt Attribute is also used in <img> TagThis Attribute is Used to Define the Text to be

Displayed when Image cannot be Displayed

TABLES

Tables are used to Display Data in Proper Format and Organized Way

<table> Tag is used to Define Tables‘border’ Attribute is used to Define the

Border Width of the Tableborder=“0” Indicates No Border

<tr> Tag is used within <table> Tag <tr> Tag Defines Table Row Table Row contains Columns Columns are Defined by <td> Tag Table Headers are Defined using <th>

Tag

EXAMPLE----TABLES<html>

<head><title>Tables</title>

</head><body>

<h1>Table</h1> <table border="1">

<tr><th>Roll No</th><th>Name</th>

</tr><tr>

<td>0001</td><td>Student 1</td>

</tr><tr>

<td>0002</td><td>Student 2</td>

</tr></table>

</body></html>

LISTS

Lists can be Ordered and Unordered Unordered List is defined with <ul> Tag Ordered List is defined with <ol> Tag Lists contains Items List Items are Defined with <li> Tag

UNORDERED LIST----EXAMPLE<html>

<head><title>Unordered List</title>

</head><body>

<h1>Unordered List</h1><ul>

<li>Pakistan</li><li>India</li><li>Sri-Lanka</li>

</ul></body>

</html>

ORDERED LIST----EXAMPLE<html>

<head><title>Ordered List</title>

</head><body>

<h1>Ordered List</h1><ol>

<li>Pakistan</li><li>India</li><li>Sri-Lanka</li>

</ol></body>

</html>

FORMS

Forms are used for Different Kinds of User Input

Used to Pass Data to Servers for Processing

<form> Tag is used to Create Form Content

Form has Input Elements Like:

1. Text Field2. Password Field3. Option Button (Radio Button)4. Checkbox5. Lists6. Buttons

INPUT BOX----EXAMPLE<html>

<head><title>Input Box</title>

</head><body>

<h1>Input Box</h1><form>

Name:<input type=“text” name=“nam” />

</form></body>

</html>

PASSWORD FIELD----EXAMPLE<html>

<head><title>Password Field</title>

</head><body>

<h1>Password</h1><form>Pass:<input type=“password”

name=“pass” /></form>

</body></html>

RADIO BUTTON----EXAMPLE<html>

<head><title>Radio Button</title>

</head><body>

<h1>Radio Button</h1><form> <input type=“radio” name=“gender”

value=“m” />Male <input type=“radio” name=“gender”

value=“f” />Female</form>

</body></html>

CHECKBOX----EXAMPLE<html>

<head><title>Check Boxes</title>

</head><body>

<h1>Check Box</h1><form>

<input type=“checkbox” name=“gender” value=“m” />Male

<input type=“checkbox” name=“gender” value=“f” />Female

</form></body>

</html>

BUTTON----EXAMPLE<html>

<head><title>Buttons</title>

</head><body>

<h1>Buttons</h1><form>

<input type=“button” name=“btn1” value=“Button” />

<input type=“submit” name=“btn2” /></form>

</body></html>

DROP-DOWN SELECTION LIST<html>

<head><title>Drop Down List</title>

</head><body>

<h1>Drop Down List</h1><form>

<select><option>Pakistan</option><option>India</option><option>Sri-Lanka</option>

</select> </form>

</body></html>