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>