SlideShare a Scribd company logo
1 of 23
What is a Web Page?
•Web pages are text files containing HTML
•HTML – Hyper Text Markup Language
•A notation for describing
•document structure (semantic markup)
•formatting (presentation markup)
•Looks (looked?) like:
•A Microsoft Word document
•The markup tags provide information about the
page content structure
How the Web Works?
• WWW use classical client / server architecture
– HTTP is text-based request-response protocol
HTTP
Page request
Server response
Client running a Web
Browser
Server running Web
Server Software
(IIS, Apache, etc.)
HTTP
Creating HTML Pages
• An HTML file must have an .htm or .html file
extension
• HTML files can be created with text editors:
– NotePad, NotePad ++, PSPad
• HTML editors (WYSIWYG Editors):
– Microsoft FrontPage
– Macromedia Dreamweaver
– Netscape Composer
– Microsoft Word
– Visual Studio
HTML Structure
• a standard HTML document has two main structural elements
– head contains setup information for the browser & the Web page
• e.g., the title for the browser window, style definitions, JavaScript code, …
– body contains the actual content to be displayed in the Web page
<html>
<!–- Version information --
-- File: page01.html --
-- Author: COMP519 --
-- Creation: 22.09.09 --
-- Description: introductory page --
-- Copyright: U.Liverpool --
-->
<head>
<title>My first HTML document</title>
</head>
<body>
<p> Hello world! </p>
</body>
</html>
HTML documents begin and end
with <html> and </html> tags
Comments appear between <!-- and
-->
head section enclosed between
<head> and </head> tags
body section enclosed between
<body> and </body>
view page
First HTML Page: Tags
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
Opening tag
Closing tag
First HTML Page: Header
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML header
First HTML Page: Body
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
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>
Headings and Paragraphs – Example
headings.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>
</body>
</html>
Text Formatting
• Text formatting tags modify the text between
the opening tag and the closing tag
• Ex. <b>Hello</b> makes “Hello” bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
<small></small> Decreases the size of the font
<html><head>
<title>Text Variations and Escape Sequences</title> </head>
<body>
<h1>Text Variations</h1>
<p>We can use <b>simple</b> tags to
<i>change</i> the appearance of
<strong>text</strong> within
<tt>Web pages</tt>.
Even super<sup>script</sup>
and sub<sub>scripts</sub> are
<em>supported</em>.</p>
<h1>Text Escape Sequences</h1>
<p> &amp; &lt; &gt; &quot; &copy; </p>
<h1>Preformatted text</h1>
<pre>hello
India
</pre> </body> </html>
Output:
Line Breaks:
<body>
<p>The Earth<br />gets
one hundred tons
heavier every
day<br/>due to falling
space dust.</p>
</body>
• Output:
The Earth
gets one hundred tons heavier every day
due to falling space dust.
Abbreviations
<body>
<p><abbr
title="Professor">Prof</abbr>
Stephen Hawking is a
theoretical physicist and
cosmologist.</p>
<p><acronym title="National
Aeronautics and Space
Administration">NASA</acrony
m> do some crazy space
stuff.</p>
</body>
Output:
Definitions
<body>
<p>A <dfn>black hole</dfn> is a region of
space from which nothing, not even light,
can escape.</p>
</body>
Output-
A black hole is a region of space from which nothing, not even
light, can escape.
Quotations
<body>
<blockquote cite="http://en.wikipedia.org"> <p>Did you ever stop to
think, and forget to start again?</p> </blockquote>
<p>As A.A. Milne said, <q>Some people talk to animals. Not many
listen though. That's the problem.</q></p>
</body>
Output:
Did you ever stop to think, and forget to start again?
As A.A. Milne said, “Some people talk to animals. Not many listen
though. That's the problem.”
Citation
<p><cite>A Brief History of Time</cite> by
Stephen Hawking has sold over ten million copies
worldwide.</p>
Output:
A Brief History of Time by Stephen Hawking has
sold over ten million copies worldwide.
Strikethrough
<p><s>Was $995</s></p>
Output:
Was $995
Insert And Delete
<p>It was the <del>worst</del> <ins>best</ins> idea
she had ever had.</p>
Output
It was the worst best idea she had ever had.
Miscellaneous Tags
• <hr />: Draws a horizontal rule (line):
• <hr size="5" width="70%" />
• <center></center>: Deprecated!
• <center>Hello World!</center>
• <font></font>: Deprecated!
• <font size="3"
color="blue">Font3</font>
• <font size="+4"
color="blue">Font+4</font>
Miscellaneous Tags – Example
<html>
<head>
<title>Miscellaneous Tags
Example</title>
</head>
<body>
<hr size="5" width="70%" />
<center>Hello World!</center>
<font size="3" color="blue">Font3</font>
<font size="+4"
color="blue">Font+4</font>
</body>
</html>
HTML Entities
£
&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
Special Characters – Example
<p>[&gt;&gt;&nbsp;&nbsp;Welcome
&nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards:
A&#9827;, K&#9830; and
9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835;
music &#9835;</p>
<p>&copy; 2006 by Svetlin Nakov
&amp; his team</p>
WTL1HTML-TEXT.ppt

More Related Content

Similar to WTL1HTML-TEXT.ppt

How the Web Works Using HTML
How the Web Works Using HTMLHow the Web Works Using HTML
How the Web Works Using HTMLMarlon Jamera
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmleShikshak
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to htmlpalhaftab
 
02 HTML-01.pdf
02 HTML-01.pdf02 HTML-01.pdf
02 HTML-01.pdfEshaYasir1
 
Basic HTML
Basic HTMLBasic HTML
Basic HTMLSayan De
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單偉格 高
 
If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!Dr Sukhpal Singh Gill
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)Ahsan Rahim
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02Aditya Varma
 
HTML CSS by Anubhav Singh
HTML CSS by Anubhav SinghHTML CSS by Anubhav Singh
HTML CSS by Anubhav SinghAnubhav659
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 FundamentalLanh Le
 
FEWDD Lec 1 web development presentation
FEWDD Lec 1 web development presentationFEWDD Lec 1 web development presentation
FEWDD Lec 1 web development presentationNamitSeth3
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.Beqa Chacha
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlvinita mathur
 

Similar to WTL1HTML-TEXT.ppt (20)

How the Web Works Using HTML
How the Web Works Using HTMLHow the Web Works Using HTML
How the Web Works Using HTML
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Web development basics
Web development basicsWeb development basics
Web development basics
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
02 HTML-01.pdf
02 HTML-01.pdf02 HTML-01.pdf
02 HTML-01.pdf
 
Html5.pptx
Html5.pptxHtml5.pptx
Html5.pptx
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
 
HTML CSS by Anubhav Singh
HTML CSS by Anubhav SinghHTML CSS by Anubhav Singh
HTML CSS by Anubhav Singh
 
HTML 5 Tutorial
HTML 5 TutorialHTML 5 Tutorial
HTML 5 Tutorial
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 Fundamental
 
FEWDD Lec 1 web development presentation
FEWDD Lec 1 web development presentationFEWDD Lec 1 web development presentation
FEWDD Lec 1 web development presentation
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
 
HTML
HTMLHTML
HTML
 
Dhtml chapter2
Dhtml chapter2Dhtml chapter2
Dhtml chapter2
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 

Recently uploaded

Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...
Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...
Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...ssuserdfc773
 
Online electricity billing project report..pdf
Online electricity billing project report..pdfOnline electricity billing project report..pdf
Online electricity billing project report..pdfKamal Acharya
 
Memory Interfacing of 8086 with DMA 8257
Memory Interfacing of 8086 with DMA 8257Memory Interfacing of 8086 with DMA 8257
Memory Interfacing of 8086 with DMA 8257subhasishdas79
 
AIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech studentsAIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech studentsvanyagupta248
 
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...HenryBriggs2
 
School management system project Report.pdf
School management system project Report.pdfSchool management system project Report.pdf
School management system project Report.pdfKamal Acharya
 
Introduction to Serverless with AWS Lambda
Introduction to Serverless with AWS LambdaIntroduction to Serverless with AWS Lambda
Introduction to Serverless with AWS LambdaOmar Fathy
 
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...Amil baba
 
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptxHOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptxSCMS School of Architecture
 
Query optimization and processing for advanced database systems
Query optimization and processing for advanced database systemsQuery optimization and processing for advanced database systems
Query optimization and processing for advanced database systemsmeharikiros2
 
Path loss model, OKUMURA Model, Hata Model
Path loss model, OKUMURA Model, Hata ModelPath loss model, OKUMURA Model, Hata Model
Path loss model, OKUMURA Model, Hata ModelDrAjayKumarYadav4
 
Linux Systems Programming: Inter Process Communication (IPC) using Pipes
Linux Systems Programming: Inter Process Communication (IPC) using PipesLinux Systems Programming: Inter Process Communication (IPC) using Pipes
Linux Systems Programming: Inter Process Communication (IPC) using PipesRashidFaridChishti
 
HAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKAR
HAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKARHAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKAR
HAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKARKOUSTAV SARKAR
 
fitting shop and tools used in fitting shop .ppt
fitting shop and tools used in fitting shop .pptfitting shop and tools used in fitting shop .ppt
fitting shop and tools used in fitting shop .pptAfnanAhmad53
 
Augmented Reality (AR) with Augin Software.pptx
Augmented Reality (AR) with Augin Software.pptxAugmented Reality (AR) with Augin Software.pptx
Augmented Reality (AR) with Augin Software.pptxMustafa Ahmed
 
Ground Improvement Technique: Earth Reinforcement
Ground Improvement Technique: Earth ReinforcementGround Improvement Technique: Earth Reinforcement
Ground Improvement Technique: Earth ReinforcementDr. Deepak Mudgal
 
Employee leave management system project.
Employee leave management system project.Employee leave management system project.
Employee leave management system project.Kamal Acharya
 
8th International Conference on Soft Computing, Mathematics and Control (SMC ...
8th International Conference on Soft Computing, Mathematics and Control (SMC ...8th International Conference on Soft Computing, Mathematics and Control (SMC ...
8th International Conference on Soft Computing, Mathematics and Control (SMC ...josephjonse
 
PE 459 LECTURE 2- natural gas basic concepts and properties
PE 459 LECTURE 2- natural gas basic concepts and propertiesPE 459 LECTURE 2- natural gas basic concepts and properties
PE 459 LECTURE 2- natural gas basic concepts and propertiessarkmank1
 
👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...manju garg
 

Recently uploaded (20)

Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...
Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...
Convergence of Robotics and Gen AI offers excellent opportunities for Entrepr...
 
Online electricity billing project report..pdf
Online electricity billing project report..pdfOnline electricity billing project report..pdf
Online electricity billing project report..pdf
 
Memory Interfacing of 8086 with DMA 8257
Memory Interfacing of 8086 with DMA 8257Memory Interfacing of 8086 with DMA 8257
Memory Interfacing of 8086 with DMA 8257
 
AIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech studentsAIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech students
 
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
 
School management system project Report.pdf
School management system project Report.pdfSchool management system project Report.pdf
School management system project Report.pdf
 
Introduction to Serverless with AWS Lambda
Introduction to Serverless with AWS LambdaIntroduction to Serverless with AWS Lambda
Introduction to Serverless with AWS Lambda
 
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
NO1 Top No1 Amil Baba In Azad Kashmir, Kashmir Black Magic Specialist Expert ...
 
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptxHOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
 
Query optimization and processing for advanced database systems
Query optimization and processing for advanced database systemsQuery optimization and processing for advanced database systems
Query optimization and processing for advanced database systems
 
Path loss model, OKUMURA Model, Hata Model
Path loss model, OKUMURA Model, Hata ModelPath loss model, OKUMURA Model, Hata Model
Path loss model, OKUMURA Model, Hata Model
 
Linux Systems Programming: Inter Process Communication (IPC) using Pipes
Linux Systems Programming: Inter Process Communication (IPC) using PipesLinux Systems Programming: Inter Process Communication (IPC) using Pipes
Linux Systems Programming: Inter Process Communication (IPC) using Pipes
 
HAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKAR
HAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKARHAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKAR
HAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKAR
 
fitting shop and tools used in fitting shop .ppt
fitting shop and tools used in fitting shop .pptfitting shop and tools used in fitting shop .ppt
fitting shop and tools used in fitting shop .ppt
 
Augmented Reality (AR) with Augin Software.pptx
Augmented Reality (AR) with Augin Software.pptxAugmented Reality (AR) with Augin Software.pptx
Augmented Reality (AR) with Augin Software.pptx
 
Ground Improvement Technique: Earth Reinforcement
Ground Improvement Technique: Earth ReinforcementGround Improvement Technique: Earth Reinforcement
Ground Improvement Technique: Earth Reinforcement
 
Employee leave management system project.
Employee leave management system project.Employee leave management system project.
Employee leave management system project.
 
8th International Conference on Soft Computing, Mathematics and Control (SMC ...
8th International Conference on Soft Computing, Mathematics and Control (SMC ...8th International Conference on Soft Computing, Mathematics and Control (SMC ...
8th International Conference on Soft Computing, Mathematics and Control (SMC ...
 
PE 459 LECTURE 2- natural gas basic concepts and properties
PE 459 LECTURE 2- natural gas basic concepts and propertiesPE 459 LECTURE 2- natural gas basic concepts and properties
PE 459 LECTURE 2- natural gas basic concepts and properties
 
👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
👉 Yavatmal Call Girls Service Just Call 🍑👄6378878445 🍑👄 Top Class Call Girl S...
 

WTL1HTML-TEXT.ppt

  • 1. What is a Web Page? •Web pages are text files containing HTML •HTML – Hyper Text Markup Language •A notation for describing •document structure (semantic markup) •formatting (presentation markup) •Looks (looked?) like: •A Microsoft Word document •The markup tags provide information about the page content structure
  • 2. How the Web Works? • WWW use classical client / server architecture – HTTP is text-based request-response protocol HTTP Page request Server response Client running a Web Browser Server running Web Server Software (IIS, Apache, etc.) HTTP
  • 3. Creating HTML Pages • An HTML file must have an .htm or .html file extension • HTML files can be created with text editors: – NotePad, NotePad ++, PSPad • HTML editors (WYSIWYG Editors): – Microsoft FrontPage – Macromedia Dreamweaver – Netscape Composer – Microsoft Word – Visual Studio
  • 4. HTML Structure • a standard HTML document has two main structural elements – head contains setup information for the browser & the Web page • e.g., the title for the browser window, style definitions, JavaScript code, … – body contains the actual content to be displayed in the Web page <html> <!–- Version information -- -- File: page01.html -- -- Author: COMP519 -- -- Creation: 22.09.09 -- -- Description: introductory page -- -- Copyright: U.Liverpool -- --> <head> <title>My first HTML document</title> </head> <body> <p> Hello world! </p> </body> </html> HTML documents begin and end with <html> and </html> tags Comments appear between <!-- and --> head section enclosed between <head> and </head> tags body section enclosed between <body> and </body> view page
  • 5. First HTML Page: Tags <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> Opening tag Closing tag
  • 6. First HTML Page: Header <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> HTML header
  • 7. First HTML Page: Body <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> HTML body
  • 8. 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>
  • 9. Headings and Paragraphs – Example headings.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> </body> </html>
  • 10. Text Formatting • Text formatting tags modify the text between the opening tag and the closing tag • Ex. <b>Hello</b> makes “Hello” bold <b></b> bold <i></i> italicized <u></u> underlined <sup></sup> Samplesuperscript <sub></sub> Samplesubscript <strong></strong> strong <em></em> emphasized <pre></pre> Preformatted text <blockquote></blockquote> Quoted text block <del></del> Deleted text – strike through <small></small> Decreases the size of the font
  • 11. <html><head> <title>Text Variations and Escape Sequences</title> </head> <body> <h1>Text Variations</h1> <p>We can use <b>simple</b> tags to <i>change</i> the appearance of <strong>text</strong> within <tt>Web pages</tt>. Even super<sup>script</sup> and sub<sub>scripts</sub> are <em>supported</em>.</p> <h1>Text Escape Sequences</h1> <p> &amp; &lt; &gt; &quot; &copy; </p> <h1>Preformatted text</h1> <pre>hello India </pre> </body> </html>
  • 13. Line Breaks: <body> <p>The Earth<br />gets one hundred tons heavier every day<br/>due to falling space dust.</p> </body> • Output: The Earth gets one hundred tons heavier every day due to falling space dust.
  • 14. Abbreviations <body> <p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p> <p><acronym title="National Aeronautics and Space Administration">NASA</acrony m> do some crazy space stuff.</p> </body> Output:
  • 15. Definitions <body> <p>A <dfn>black hole</dfn> is a region of space from which nothing, not even light, can escape.</p> </body> Output- A black hole is a region of space from which nothing, not even light, can escape.
  • 16. Quotations <body> <blockquote cite="http://en.wikipedia.org"> <p>Did you ever stop to think, and forget to start again?</p> </blockquote> <p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p> </body> Output: Did you ever stop to think, and forget to start again? As A.A. Milne said, “Some people talk to animals. Not many listen though. That's the problem.”
  • 17. Citation <p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide.</p> Output: A Brief History of Time by Stephen Hawking has sold over ten million copies worldwide.
  • 18. Strikethrough <p><s>Was $995</s></p> Output: Was $995 Insert And Delete <p>It was the <del>worst</del> <ins>best</ins> idea she had ever had.</p> Output It was the worst best idea she had ever had.
  • 19. Miscellaneous Tags • <hr />: Draws a horizontal rule (line): • <hr size="5" width="70%" /> • <center></center>: Deprecated! • <center>Hello World!</center> • <font></font>: Deprecated! • <font size="3" color="blue">Font3</font> • <font size="+4" color="blue">Font+4</font>
  • 20. Miscellaneous Tags – Example <html> <head> <title>Miscellaneous Tags Example</title> </head> <body> <hr size="5" width="70%" /> <center>Hello World!</center> <font size="3" color="blue">Font3</font> <font size="+4" color="blue">Font+4</font> </body> </html>
  • 21. HTML Entities £ &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
  • 22. Special Characters – Example <p>[&gt;&gt;&nbsp;&nbsp;Welcome &nbsp;&nbsp;&lt;&lt;]</p> <p>&#9658;I have following cards: A&#9827;, K&#9830; and 9&#9829;.</p> <p>&#9658;I prefer hard rock &#9835; music &#9835;</p> <p>&copy; 2006 by Svetlin Nakov &amp; his team</p>