SlideShare a Scribd company logo
HTML
• Hyper Text Markup Language
• It is used for describing web documents or
web pages.
• A markup language is set of markup tags.
• HTML documents are described by HTML tags.
• Each HTML tag describes different HTML
content.
4/11/2024 1
GAGAN THAKRAL(ABES)
HTML
• An HTML file must have an .htm or .html file
extension
• HTML files can be created with text editors:
– NotePad, NotePad ++, PSPad
• Or HTML editors:
– Microsoft FrontPage
– Macromedia Dreamweaver
– Netscape Composer
– Microsoft Word
– Visual Studio
4/11/2024 2
GAGAN THAKRAL(ABES)
HTML Example
4/11/2024 3
GAGAN THAKRAL(ABES)
HTML Example
4/11/2024 4
GAGAN THAKRAL(ABES)
HTML Versions
4/11/2024 5
GAGAN THAKRAL(ABES)
Some Simple Tags
• Hyperlink Tags
<a href="http://www.google.com/">Link to
google Web site</a>
• Image Tags
<img src="logo.gif" alt="logo" />
• Text formatting tags
• This text is <em>emphasized.</em>
• <br />new line<br />
• This one is
• <strong> more emphasized </strong>
4/11/2024 6
GAGAN THAKRAL(ABES)
Some Simple Tags Example
• <!DOCTYPE HTML>
• <html>
• <head>
• <title>Simple Tags Demo</title>
• </head>
• <body>
• <a href="http://www.google.com/">This is a link
</a>
• <br />
• <img src="logo.gif" alt="logo" />
• <br />
• <b><strong>Bold</strong></b> and
<i><em>italic</em></i> text.
• </body>
• </html>
4/11/2024 7
GAGAN THAKRAL(ABES)
Some Simple Tags Example
4/11/2024 8
GAGAN THAKRAL(ABES)
Tags Attributes
• Tags can have attributes
– Attributes specify properties and behavior
– Few attributes can apply to every element:
• id, style, class, title
• The id is unique in the document
• Content of title attribute is displayed as hint when the
element is hovered with the mouse.
4/11/2024 9
GAGAN THAKRAL(ABES)
Headings and Paragraphs
• Heading Tags (h1 – h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
• Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
• Sections: div
<div style="background: skyblue;">This is a div
</div>
4/11/2024 10
GAGAN THAKRAL(ABES)
Headings and Paragraphs Example
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div style="background:skyblue">
This is a div</div>
</body>
</html>
4/11/2024 11
GAGAN THAKRAL(ABES)
Headings and Paragraphs Example
4/11/2024 12
GAGAN THAKRAL(ABES)
Ordered Lists: <ol> Tag
• Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
• Attribute values for type are 1, A, a, or i
4/11/2024 13
GAGAN THAKRAL(ABES)
Unordered Lists: <ul> Tag
• Create an Unordered List using <ul></ul>:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
• Attribute values for type are:
- disk, circle or square
4/11/2024 14
GAGAN THAKRAL(ABES)
Definition List
• A definition list is a list of items, with a
description of items
• Eg.
<dl>
<dt>CS</dt>
<dd>Computer Science</dd>
<dt>IT</dt>
<dd>Information Technology</dd>
</dl>
4/11/2024 15
GAGAN THAKRAL(ABES)
Some more simple tags
• <big>
• <small>
• <q>
• <strong>
• <sub>
• <sup>
• <del>
• <pre>
4/11/2024 16
GAGAN THAKRAL(ABES)
HTML Tables
• Tables represent tabular data
– A table consists of one or several rows
– Each row has one or more columns
• Tables comprised of several core tags:
<table></table>: begin / end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
4/11/2024 17
GAGAN THAKRAL(ABES)
HTML Tables
• Start and end of a table
- <table> …… </table>
• Start and end of a row
- <tr> ……. </tr>
• Start and end of a cell in a row
- <td> …….. </td>
4/11/2024 18
GAGAN THAKRAL(ABES)
Simple HTML Table Example
• <html><head><title>Simple Table </title></head>
• <body>
• <table cellspacing="0" cellpadding="5">
• <tr>
• <td>Web Technology</td>
• <td><a href="lecture1.ppt">Lecture 1</a></td>
• </tr>
• <tr>
• <td>Web Technology</td>
• <td><a href="lecture2.ppt">Lecture 2</a></td>
• </tr>
• <tr>
• <td>Web Technology</td>
• <td><a href="lecture2-demos.zip">
• Lecture 2 - Demos</a></td>
• </tr>
• </table></body></html>
4/11/2024 19
GAGAN THAKRAL(ABES)
Simple HTML Table Example
4/11/2024 20
GAGAN THAKRAL(ABES)
Complete HTML Tables
• Table rows split into three semantic sections:
header, body and footer
– <thead> denotes table header and contains <th>
elements, instead of <td> elements
– <tbody> denotes collection of table rows that
contains the data
– <tfoot> denotes table footer but comes BEFORE
the <tbody> tag
4/11/2024 21
GAGAN THAKRAL(ABES)
Complete HTML Table Example
• <table>
• <thead>
• <tr><th>Column 1</th><th>Column 2</th></tr>
• </thead>
• <tfoot>
• <tr><td>Footer 1</td><td>Footer 2</td></tr>
• </tfoot>
• <tbody>
• <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
• <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
• </tbody>
• </table>
4/11/2024 22
GAGAN THAKRAL(ABES)
Complete HTML Table Example
4/11/2024 23
GAGAN THAKRAL(ABES)
Cell Spacing and Padding
• Tables have two important attributes:
• Cellspacing cellpadding
cell cell
cell cell
cell
cell
cell
cell
4/11/2024 24
GAGAN THAKRAL(ABES)
Cell Spacing and Padding
• cellspacing
- Defines the empty space between cells
• cellpadding
- Defines the empty space around the cell
content
4/11/2024 25
GAGAN THAKRAL(ABES)
Column and Row Span
• Table cells have two important attributes:
• colspan
- Defines how many columns the cell occupies
• Rowspan
- Defines how many rows the cell occupies
4/11/2024 26
GAGAN THAKRAL(ABES)
Column and Row Span Example
<table border="1">
<tr>
<td>Cell[1,1]</td>
<td colspan="2“ align="center"> Cell[2,1] </td>
</tr>
<tr>
<td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td>
</tr>
<tr>
<td>Cell[1,3]</td>
<td>Cell[2,3]</td>
</tr>
</table>
4/11/2024 27
GAGAN THAKRAL(ABES)
Column and Row Span Example
4/11/2024 28
GAGAN THAKRAL(ABES)
HTML Forms
• Forms are the primary method for gathering
data from site visitors
• Create a form block with
- <form> … </form>
• Example:
• <form name="myForm" method="post"
action="path/to/some-script.php">
• ...
• </form>
4/11/2024 29
GAGAN THAKRAL(ABES)
HTML Forms
• The “method" attribute tells how the form
data should be sent – via GET or POST
request
• The "action" attribute tells where the form
data should be sent
4/11/2024 30
GAGAN THAKRAL(ABES)
Form Fields
• Single-line text input fields:
- <input type="text" name="FirstName"
value="This is a text field" />
• Multi-line textarea fields:
- <textarea name="Comments">This is a
multi-line text field</textarea>
• Hidden fields contain data not shown to the user:
- <input type="hidden" name="Account"
value="This is a hidden text field"
/>
4/11/2024 31
GAGAN THAKRAL(ABES)
Form Fields
• Checkboxes:
- <input type="checkbox" name="fruit"
value="apple" />
• Radio buttons:
- <input type="radio" name="title"
value="Mr." />
• Radio buttons can be grouped, allowing only one to be
selected from a group:
- <input type="radio" name="city"
value=“Ghaziabad" />
- <input type="radio" name="city"
value=“Faridabad" />
4/11/2024 32
GAGAN THAKRAL(ABES)
Form Fields
• Dropdown menus:
<select name="gender">
<option value="Value 1“
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>
• Submit button:
- <input type="submit" name="submitBtn"
value="Apply Now" />
4/11/2024 33
GAGAN THAKRAL(ABES)
Form Fields
• Reset button – brings the form to its initial state
- <input type="reset" name="resetBtn"
value="Reset the form" />
• Image button – acts like submit but image is
displayed and click coordinates are sent
- <input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />
4/11/2024 34
GAGAN THAKRAL(ABES)
Form Fields
• Password input – a text field which masks the entered text
with * signs
- <input type="password" name="pass" />
• Multiple select field – displays the list of items in multiple
lines, instead of one
- <select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>
4/11/2024 35
GAGAN THAKRAL(ABES)
HTML Frames
4/11/2024 36
GAGAN THAKRAL(ABES)
HTML Frames
• Frames provide a way to show multiple HTML
documents in a single Web page
• The page can be split into separate views
(frames) horizontally and vertically
• Frames were popular in the early ages of
HTML development, but now their usage is
rejected
• Frames are not supported by all user agents
(browsers, search engines, etc.)
4/11/2024 37
GAGAN THAKRAL(ABES)
HTML Frames Example
<html>
<head><title>Frames
Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>
4/11/2024 38
GAGAN THAKRAL(ABES)
HTML Frames Example
<html>
<head><title>Frames
Example</title></head>
<frameset rows=“25%,*,25%">
<frame src=“Top.html" />
<frame src=“Main.html" />
<frame src=“Bottom.html" />
</frameset>
</html>
4/11/2024 39
GAGAN THAKRAL(ABES)
HTML Special Characters
£
&pound;
British Pound
€
&#8364;
Euro
"
&quot;
Quotation Mark
¥
&yen;
Japanese Yen
—
&mdash;
Em Dash
&nbsp;
Non-breaking Space
&
&amp;
Ampersand
>
&gt;
Greater Than
<
&lt;
Less Than
™
&trade;
Trademark Sign
®
&reg;
Registered Trademark Sign
©
&copy;
Copyright Sign
Symbol
HTML Entity
Symbol Name
4/11/2024 40
GAGAN THAKRAL(ABES)

More Related Content

Similar to hyper text markup language ppt presentation

Introduction to Html by Ankitkumar Singh
Introduction to Html by Ankitkumar SinghIntroduction to Html by Ankitkumar Singh
Introduction to Html by Ankitkumar Singh
Ankitkumar Singh
 
Hyper Text Markup Language - Presentation.pptx
Hyper Text Markup Language - Presentation.pptxHyper Text Markup Language - Presentation.pptx
Hyper Text Markup Language - Presentation.pptx
vanajaanbarasu
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
Taha Malampatti
 
Web Developement Workshop (Oct 2009 -Day 1)
Web Developement Workshop (Oct 2009 -Day 1)Web Developement Workshop (Oct 2009 -Day 1)
Web Developement Workshop (Oct 2009 -Day 1)
Linux User's Group
 
INTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptxINTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptx
SarthakrOkr
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
veena parihar
 
BITM3730 9-13.pptx
BITM3730 9-13.pptxBITM3730 9-13.pptx
BITM3730 9-13.pptx
MattMarino13
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
DipaliJagtap6
 
Basic HTML Tags.PPT
Basic HTML Tags.PPTBasic HTML Tags.PPT
Basic HTML Tags.PPT
bcanawakadalcollege
 
Html
HtmlHtml
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
vanajaanbarasu
 
Html
HtmlHtml
Html (1)
Html (1)Html (1)
Html (1)
smitha273566
 
Practicals it
Practicals itPracticals it
Practicals it
Gulbir Chaudhary
 
Html ,css,xml
Html ,css,xmlHtml ,css,xml
Html ,css,xml
Shweta Wankhade
 
Introduction to web development - HTML 5
Introduction to web development - HTML 5Introduction to web development - HTML 5
Introduction to web development - HTML 5
Ayoub Ghozzi
 
BITM3730 9-12.pptx
BITM3730 9-12.pptxBITM3730 9-12.pptx
BITM3730 9-12.pptx
MattMarino13
 
learnhtmlbyvipuladissanayake-170516061515 (1).pptx
learnhtmlbyvipuladissanayake-170516061515 (1).pptxlearnhtmlbyvipuladissanayake-170516061515 (1).pptx
learnhtmlbyvipuladissanayake-170516061515 (1).pptx
ManuAbraham17
 
Unit 1wt
Unit 1wtUnit 1wt
Unit 1wt
vamsitricks
 
HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Forms
tina1357
 

Similar to hyper text markup language ppt presentation (20)

Introduction to Html by Ankitkumar Singh
Introduction to Html by Ankitkumar SinghIntroduction to Html by Ankitkumar Singh
Introduction to Html by Ankitkumar Singh
 
Hyper Text Markup Language - Presentation.pptx
Hyper Text Markup Language - Presentation.pptxHyper Text Markup Language - Presentation.pptx
Hyper Text Markup Language - Presentation.pptx
 
Intodcution to Html
Intodcution to HtmlIntodcution to Html
Intodcution to Html
 
Web Developement Workshop (Oct 2009 -Day 1)
Web Developement Workshop (Oct 2009 -Day 1)Web Developement Workshop (Oct 2009 -Day 1)
Web Developement Workshop (Oct 2009 -Day 1)
 
INTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptxINTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptx
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
BITM3730 9-13.pptx
BITM3730 9-13.pptxBITM3730 9-13.pptx
BITM3730 9-13.pptx
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Basic HTML Tags.PPT
Basic HTML Tags.PPTBasic HTML Tags.PPT
Basic HTML Tags.PPT
 
Html
HtmlHtml
Html
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Html
HtmlHtml
Html
 
Html (1)
Html (1)Html (1)
Html (1)
 
Practicals it
Practicals itPracticals it
Practicals it
 
Html ,css,xml
Html ,css,xmlHtml ,css,xml
Html ,css,xml
 
Introduction to web development - HTML 5
Introduction to web development - HTML 5Introduction to web development - HTML 5
Introduction to web development - HTML 5
 
BITM3730 9-12.pptx
BITM3730 9-12.pptxBITM3730 9-12.pptx
BITM3730 9-12.pptx
 
learnhtmlbyvipuladissanayake-170516061515 (1).pptx
learnhtmlbyvipuladissanayake-170516061515 (1).pptxlearnhtmlbyvipuladissanayake-170516061515 (1).pptx
learnhtmlbyvipuladissanayake-170516061515 (1).pptx
 
Unit 1wt
Unit 1wtUnit 1wt
Unit 1wt
 
HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Forms
 

Recently uploaded

مصحف القراءات العشر أعد أحرف الخلاف سمير بسيوني.pdf
مصحف القراءات العشر   أعد أحرف الخلاف سمير بسيوني.pdfمصحف القراءات العشر   أعد أحرف الخلاف سمير بسيوني.pdf
مصحف القراءات العشر أعد أحرف الخلاف سمير بسيوني.pdf
سمير بسيوني
 
Educational Technology in the Health Sciences
Educational Technology in the Health SciencesEducational Technology in the Health Sciences
Educational Technology in the Health Sciences
Iris Thiele Isip-Tan
 
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) CurriculumPhilippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
MJDuyan
 
math operations ued in python and all used
math operations ued in python and all usedmath operations ued in python and all used
math operations ued in python and all used
ssuser13ffe4
 
Haunted Houses by H W Longfellow for class 10
Haunted Houses by H W Longfellow for class 10Haunted Houses by H W Longfellow for class 10
Haunted Houses by H W Longfellow for class 10
nitinpv4ai
 
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
Nguyen Thanh Tu Collection
 
How Barcodes Can Be Leveraged Within Odoo 17
How Barcodes Can Be Leveraged Within Odoo 17How Barcodes Can Be Leveraged Within Odoo 17
How Barcodes Can Be Leveraged Within Odoo 17
Celine George
 
Bonku-Babus-Friend by Sathyajith Ray (9)
Bonku-Babus-Friend by Sathyajith Ray  (9)Bonku-Babus-Friend by Sathyajith Ray  (9)
Bonku-Babus-Friend by Sathyajith Ray (9)
nitinpv4ai
 
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
PECB
 
Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"
National Information Standards Organization (NISO)
 
Temple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation resultsTemple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation results
Krassimira Luka
 
MDP on air pollution of class 8 year 2024-2025
MDP on air pollution of class 8 year 2024-2025MDP on air pollution of class 8 year 2024-2025
MDP on air pollution of class 8 year 2024-2025
khuleseema60
 
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptxChapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Denish Jangid
 
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
Nguyen Thanh Tu Collection
 
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.pptLevel 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
Henry Hollis
 
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptxPengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Fajar Baskoro
 
Stack Memory Organization of 8086 Microprocessor
Stack Memory Organization of 8086 MicroprocessorStack Memory Organization of 8086 Microprocessor
Stack Memory Organization of 8086 Microprocessor
JomonJoseph58
 
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skillsspot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
haiqairshad
 
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
imrankhan141184
 
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptxBIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
RidwanHassanYusuf
 

Recently uploaded (20)

مصحف القراءات العشر أعد أحرف الخلاف سمير بسيوني.pdf
مصحف القراءات العشر   أعد أحرف الخلاف سمير بسيوني.pdfمصحف القراءات العشر   أعد أحرف الخلاف سمير بسيوني.pdf
مصحف القراءات العشر أعد أحرف الخلاف سمير بسيوني.pdf
 
Educational Technology in the Health Sciences
Educational Technology in the Health SciencesEducational Technology in the Health Sciences
Educational Technology in the Health Sciences
 
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) CurriculumPhilippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
 
math operations ued in python and all used
math operations ued in python and all usedmath operations ued in python and all used
math operations ued in python and all used
 
Haunted Houses by H W Longfellow for class 10
Haunted Houses by H W Longfellow for class 10Haunted Houses by H W Longfellow for class 10
Haunted Houses by H W Longfellow for class 10
 
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
 
How Barcodes Can Be Leveraged Within Odoo 17
How Barcodes Can Be Leveraged Within Odoo 17How Barcodes Can Be Leveraged Within Odoo 17
How Barcodes Can Be Leveraged Within Odoo 17
 
Bonku-Babus-Friend by Sathyajith Ray (9)
Bonku-Babus-Friend by Sathyajith Ray  (9)Bonku-Babus-Friend by Sathyajith Ray  (9)
Bonku-Babus-Friend by Sathyajith Ray (9)
 
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
 
Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"
 
Temple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation resultsTemple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation results
 
MDP on air pollution of class 8 year 2024-2025
MDP on air pollution of class 8 year 2024-2025MDP on air pollution of class 8 year 2024-2025
MDP on air pollution of class 8 year 2024-2025
 
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptxChapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptx
 
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
 
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.pptLevel 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
 
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptxPengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
 
Stack Memory Organization of 8086 Microprocessor
Stack Memory Organization of 8086 MicroprocessorStack Memory Organization of 8086 Microprocessor
Stack Memory Organization of 8086 Microprocessor
 
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skillsspot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
 
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
 
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptxBIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
 

hyper text markup language ppt presentation

  • 1. HTML • Hyper Text Markup Language • It is used for describing web documents or web pages. • A markup language is set of markup tags. • HTML documents are described by HTML tags. • Each HTML tag describes different HTML content. 4/11/2024 1 GAGAN THAKRAL(ABES)
  • 2. HTML • An HTML file must have an .htm or .html file extension • HTML files can be created with text editors: – NotePad, NotePad ++, PSPad • Or HTML editors: – Microsoft FrontPage – Macromedia Dreamweaver – Netscape Composer – Microsoft Word – Visual Studio 4/11/2024 2 GAGAN THAKRAL(ABES)
  • 6. Some Simple Tags • Hyperlink Tags <a href="http://www.google.com/">Link to google Web site</a> • Image Tags <img src="logo.gif" alt="logo" /> • Text formatting tags • This text is <em>emphasized.</em> • <br />new line<br /> • This one is • <strong> more emphasized </strong> 4/11/2024 6 GAGAN THAKRAL(ABES)
  • 7. Some Simple Tags Example • <!DOCTYPE HTML> • <html> • <head> • <title>Simple Tags Demo</title> • </head> • <body> • <a href="http://www.google.com/">This is a link </a> • <br /> • <img src="logo.gif" alt="logo" /> • <br /> • <b><strong>Bold</strong></b> and <i><em>italic</em></i> text. • </body> • </html> 4/11/2024 7 GAGAN THAKRAL(ABES)
  • 8. Some Simple Tags Example 4/11/2024 8 GAGAN THAKRAL(ABES)
  • 9. Tags Attributes • Tags can have attributes – Attributes specify properties and behavior – Few attributes can apply to every element: • id, style, class, title • The id is unique in the document • Content of title attribute is displayed as hint when the element is hovered with the mouse. 4/11/2024 9 GAGAN THAKRAL(ABES)
  • 10. Headings and Paragraphs • Heading Tags (h1 – h6) <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> • Paragraph Tags <p>This is my first paragraph</p> <p>This is my second paragraph</p> • Sections: div <div style="background: skyblue;">This is a div </div> 4/11/2024 10 GAGAN THAKRAL(ABES)
  • 11. Headings and Paragraphs Example <!DOCTYPE HTML> <html> <head><title>Headings and paragraphs</title></head> <body> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> <div style="background:skyblue"> This is a div</div> </body> </html> 4/11/2024 11 GAGAN THAKRAL(ABES)
  • 12. Headings and Paragraphs Example 4/11/2024 12 GAGAN THAKRAL(ABES)
  • 13. Ordered Lists: <ol> Tag • Create an Ordered List using <ol></ol>: <ol type="1"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ol> • Attribute values for type are 1, A, a, or i 4/11/2024 13 GAGAN THAKRAL(ABES)
  • 14. Unordered Lists: <ul> Tag • Create an Unordered List using <ul></ul>: <ul type="disk"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul> • Attribute values for type are: - disk, circle or square 4/11/2024 14 GAGAN THAKRAL(ABES)
  • 15. Definition List • A definition list is a list of items, with a description of items • Eg. <dl> <dt>CS</dt> <dd>Computer Science</dd> <dt>IT</dt> <dd>Information Technology</dd> </dl> 4/11/2024 15 GAGAN THAKRAL(ABES)
  • 16. Some more simple tags • <big> • <small> • <q> • <strong> • <sub> • <sup> • <del> • <pre> 4/11/2024 16 GAGAN THAKRAL(ABES)
  • 17. HTML Tables • Tables represent tabular data – A table consists of one or several rows – Each row has one or more columns • Tables comprised of several core tags: <table></table>: begin / end the table <tr></tr>: create a table row <td></td>: create tabular data (cell) 4/11/2024 17 GAGAN THAKRAL(ABES)
  • 18. HTML Tables • Start and end of a table - <table> …… </table> • Start and end of a row - <tr> ……. </tr> • Start and end of a cell in a row - <td> …….. </td> 4/11/2024 18 GAGAN THAKRAL(ABES)
  • 19. Simple HTML Table Example • <html><head><title>Simple Table </title></head> • <body> • <table cellspacing="0" cellpadding="5"> • <tr> • <td>Web Technology</td> • <td><a href="lecture1.ppt">Lecture 1</a></td> • </tr> • <tr> • <td>Web Technology</td> • <td><a href="lecture2.ppt">Lecture 2</a></td> • </tr> • <tr> • <td>Web Technology</td> • <td><a href="lecture2-demos.zip"> • Lecture 2 - Demos</a></td> • </tr> • </table></body></html> 4/11/2024 19 GAGAN THAKRAL(ABES)
  • 20. Simple HTML Table Example 4/11/2024 20 GAGAN THAKRAL(ABES)
  • 21. Complete HTML Tables • Table rows split into three semantic sections: header, body and footer – <thead> denotes table header and contains <th> elements, instead of <td> elements – <tbody> denotes collection of table rows that contains the data – <tfoot> denotes table footer but comes BEFORE the <tbody> tag 4/11/2024 21 GAGAN THAKRAL(ABES)
  • 22. Complete HTML Table Example • <table> • <thead> • <tr><th>Column 1</th><th>Column 2</th></tr> • </thead> • <tfoot> • <tr><td>Footer 1</td><td>Footer 2</td></tr> • </tfoot> • <tbody> • <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> • <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr> • </tbody> • </table> 4/11/2024 22 GAGAN THAKRAL(ABES)
  • 23. Complete HTML Table Example 4/11/2024 23 GAGAN THAKRAL(ABES)
  • 24. Cell Spacing and Padding • Tables have two important attributes: • Cellspacing cellpadding cell cell cell cell cell cell cell cell 4/11/2024 24 GAGAN THAKRAL(ABES)
  • 25. Cell Spacing and Padding • cellspacing - Defines the empty space between cells • cellpadding - Defines the empty space around the cell content 4/11/2024 25 GAGAN THAKRAL(ABES)
  • 26. Column and Row Span • Table cells have two important attributes: • colspan - Defines how many columns the cell occupies • Rowspan - Defines how many rows the cell occupies 4/11/2024 26 GAGAN THAKRAL(ABES)
  • 27. Column and Row Span Example <table border="1"> <tr> <td>Cell[1,1]</td> <td colspan="2“ align="center"> Cell[2,1] </td> </tr> <tr> <td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td> </tr> <tr> <td>Cell[1,3]</td> <td>Cell[2,3]</td> </tr> </table> 4/11/2024 27 GAGAN THAKRAL(ABES)
  • 28. Column and Row Span Example 4/11/2024 28 GAGAN THAKRAL(ABES)
  • 29. HTML Forms • Forms are the primary method for gathering data from site visitors • Create a form block with - <form> … </form> • Example: • <form name="myForm" method="post" action="path/to/some-script.php"> • ... • </form> 4/11/2024 29 GAGAN THAKRAL(ABES)
  • 30. HTML Forms • The “method" attribute tells how the form data should be sent – via GET or POST request • The "action" attribute tells where the form data should be sent 4/11/2024 30 GAGAN THAKRAL(ABES)
  • 31. Form Fields • Single-line text input fields: - <input type="text" name="FirstName" value="This is a text field" /> • Multi-line textarea fields: - <textarea name="Comments">This is a multi-line text field</textarea> • Hidden fields contain data not shown to the user: - <input type="hidden" name="Account" value="This is a hidden text field" /> 4/11/2024 31 GAGAN THAKRAL(ABES)
  • 32. Form Fields • Checkboxes: - <input type="checkbox" name="fruit" value="apple" /> • Radio buttons: - <input type="radio" name="title" value="Mr." /> • Radio buttons can be grouped, allowing only one to be selected from a group: - <input type="radio" name="city" value=“Ghaziabad" /> - <input type="radio" name="city" value=“Faridabad" /> 4/11/2024 32 GAGAN THAKRAL(ABES)
  • 33. Form Fields • Dropdown menus: <select name="gender"> <option value="Value 1“ selected="selected">Male</option> <option value="Value 2">Female</option> <option value="Value 3">Other</option> </select> • Submit button: - <input type="submit" name="submitBtn" value="Apply Now" /> 4/11/2024 33 GAGAN THAKRAL(ABES)
  • 34. Form Fields • Reset button – brings the form to its initial state - <input type="reset" name="resetBtn" value="Reset the form" /> • Image button – acts like submit but image is displayed and click coordinates are sent - <input type="image" src="submit.gif" name="submitBtn" alt="Submit" /> 4/11/2024 34 GAGAN THAKRAL(ABES)
  • 35. Form Fields • Password input – a text field which masks the entered text with * signs - <input type="password" name="pass" /> • Multiple select field – displays the list of items in multiple lines, instead of one - <select name="products" multiple="multiple"> <option value="Value 1" selected="selected">keyboard</option> <option value="Value 2">mouse</option> <option value="Value 3">speakers</option> </select> 4/11/2024 35 GAGAN THAKRAL(ABES)
  • 37. HTML Frames • Frames provide a way to show multiple HTML documents in a single Web page • The page can be split into separate views (frames) horizontally and vertically • Frames were popular in the early ages of HTML development, but now their usage is rejected • Frames are not supported by all user agents (browsers, search engines, etc.) 4/11/2024 37 GAGAN THAKRAL(ABES)
  • 38. HTML Frames Example <html> <head><title>Frames Example</title></head> <frameset cols="180px,*,150px"> <frame src="left.html" /> <frame src="middle.html" /> <frame src="right.html" /> </frameset> </html> 4/11/2024 38 GAGAN THAKRAL(ABES)
  • 39. HTML Frames Example <html> <head><title>Frames Example</title></head> <frameset rows=“25%,*,25%"> <frame src=“Top.html" /> <frame src=“Main.html" /> <frame src=“Bottom.html" /> </frameset> </html> 4/11/2024 39 GAGAN THAKRAL(ABES)
  • 40. HTML Special Characters £ &pound; British Pound € &#8364; Euro " &quot; Quotation Mark ¥ &yen; Japanese Yen — &mdash; Em Dash &nbsp; Non-breaking Space & &amp; Ampersand > &gt; Greater Than < &lt; Less Than ™ &trade; Trademark Sign ® &reg; Registered Trademark Sign © &copy; Copyright Sign Symbol HTML Entity Symbol Name 4/11/2024 40 GAGAN THAKRAL(ABES)