H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language...
-
Upload
scarlett-griffin -
Category
Documents
-
view
219 -
download
0
Transcript of H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language...
![Page 1: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/1.jpg)
HYPER TEXT MARKUP LANGUAGELecture No 5
![Page 2: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/2.jpg)
![Page 3: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/3.jpg)
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
![Page 4: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/4.jpg)
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
![Page 5: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/5.jpg)
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
![Page 6: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/6.jpg)
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
![Page 7: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/7.jpg)
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
![Page 8: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/8.jpg)
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
![Page 9: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/9.jpg)
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
![Page 10: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/10.jpg)
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
![Page 11: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/11.jpg)
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
![Page 12: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/12.jpg)
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
![Page 13: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/13.jpg)
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
![Page 14: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/14.jpg)
![Page 15: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/15.jpg)
CHOOSING AN EDITOR FOR HTMLWindows:
Notepad Word Pad
Linux: VI Emacs
VI and Emacs are Text Editors in LinuxMac:
TextEdit
![Page 16: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/16.jpg)
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
![Page 17: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/17.jpg)
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
![Page 18: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/18.jpg)
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
![Page 19: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/19.jpg)
PARTS OF MARKUP
Three Parts of Markup:
1. Tag
2. Element
3. Attribute
![Page 20: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/20.jpg)
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>
![Page 21: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/21.jpg)
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
![Page 22: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/22.jpg)
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
![Page 23: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/23.jpg)
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
![Page 24: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/24.jpg)
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
![Page 25: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/25.jpg)
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
![Page 26: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/26.jpg)
TAGS, ELEMENTS, ATTRIBUTES
![Page 27: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/27.jpg)
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
![Page 28: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/28.jpg)
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
![Page 29: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/29.jpg)
FIRST PAGE PREVIEW
![Page 30: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/30.jpg)
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
![Page 31: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/31.jpg)
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
![Page 32: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/32.jpg)
![Page 33: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/33.jpg)
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
![Page 34: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/34.jpg)
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
![Page 35: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/35.jpg)
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
![Page 36: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/36.jpg)
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
![Page 37: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/37.jpg)
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
![Page 38: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/38.jpg)
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
![Page 39: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/39.jpg)
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
![Page 40: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/40.jpg)
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>
![Page 41: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/41.jpg)
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
![Page 42: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/42.jpg)
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>
![Page 43: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/43.jpg)
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>
![Page 44: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/44.jpg)
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
![Page 45: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/45.jpg)
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>
![Page 46: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/46.jpg)
PASSWORD FIELD----EXAMPLE<html>
<head><title>Password Field</title>
</head><body>
<h1>Password</h1><form>Pass:<input type=“password”
name=“pass” /></form>
</body></html>
![Page 47: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/47.jpg)
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>
![Page 48: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/48.jpg)
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>
![Page 49: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/49.jpg)
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>
![Page 50: H YPER T EXT M ARKUP L ANGUAGE Lecture No 5. I NTRODUCTION Stands for Hyper-Text Markup Language Hyper-Text: String of Words in One Document Directly.](https://reader034.fdocuments.us/reader034/viewer/2022051316/5697bf721a28abf838c7e9c2/html5/thumbnails/50.jpg)
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>