SlideShare a Scribd company logo
HTML
Hyper Text MarkUp Language
What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating
Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the
content
• HTML elements label pieces of content such as "this is
a heading", "this is a paragraph", "this is a link", etc.
Simple HTML Document Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Simple HTML page
• <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Example Explained
• The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML
page
• The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a
container for all the visible contents, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
Example Explained
• The <html> element is the root element and it defines
the whole HTML document.
• It has a start tag <html> and an end tag </html>.
• Then, inside the <html> element there is
a <body> element:
• The <body> element defines the document's body.
• It has a start tag <body> and an end tag </body>.
• Then, inside the <body> element there are two other
elements: <h1> and <p>
• The <h1> element defines a heading.
• It has a start tag <h1> and an end tag </h1>
Example Explained
• The <p> element defines a paragraph.
• It has a start tag <p> and an end tag </p>
• HTML elements with no content are called
empty elements.
• The <br> tag defines a line break, and is an
empty element without a closing tag
HTML is Not Case Sensitive
• HTML tags are not case sensitive: <P> means
the same as <p>.
• The HTML standard does not require
lowercase tags, but it recommends lowercase
in HTML, and demands lowercase for stricter
document types like XHTML.
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important
heading. <h6> defines the least important heading.
• Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
The <title> tag
• Every web page should have a page title to describe the meaning of the
page.
• The <title> element adds a title to your page.
• Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
The content of the document......
</body>
</html>
• The title is shown in the browser's title bar.
Formatting elements were designed to display special types of text:
•<b> - Bold text
•<strong> - Important text
•<i> - Italic text
•<em> - Emphasized text
•<mark> - Marked text
•<small> - Smaller text
•<del> - Deleted text
•<ins> - Inserted text
•<sub> - Subscript text
•<sup> - Superscript text
•<u>- Underline text
HTML Links
• HTML links are defined with the <a> tag:
Example
<a href="https://www.w3schools.com">Th
is is a link</a>
• The link's destination is specified in
the href attribute.
• Attributes are used to provide additional
information about HTML elements.
HTML Images
• HTML images are defined with the <img> tag.
• The source file (src), alternative text (alt), width,
and height are provided as attributes:
• Example
• <img src="w3schools.jpg" alt="W3Schools.com"
width="104" height="142">
How to View HTML Source
• Have you ever seen a Web page and wondered "Hey! How did they do
that?"
• View HTML Source Code:
Click CTRL + U in an HTML page, or right-click on the page and
select "View Page Source". This will open a new tab containing
the HTML source code of the page.
• Inspect an HTML Element:
Right-click on an element (or a blank area), and choose
"Inspect" to see what elements are made up of (you will see both
the HTML and the CSS). You can also edit the HTML or CSS on-the-fly
in the Elements or Styles panel that opens.

More Related Content

Similar to FEWDD Lec 1 web development presentation (20)

PPTX
HTML Basics, Web Development Part-1 .pptx
Farzana Younas
 
PPTX
html.pptx class notes to prepare html completly
mamathapragada
 
DOCX
Lesson A.1 - Introduction to Web Development.docx
MarlonMagtibay3
 
DOCX
Html.docx
Noman Ali
 
PPTX
DICT-Standard-Template-4-3-ratio.pptx
Eduardo Yu
 
PPTX
html (1) (1).pptx for all students to learn
aveshgopalJonnadula
 
PPTX
Learn html Basics
McSoftsis
 
PPTX
learnhtmlbyvipuladissanayake-170516061515 (1).pptx
ManuAbraham17
 
PPTX
Html 1
pavishkumarsingh
 
PPSX
Html introduction
Dalia Elbadry
 
PDF
"Innovative Web Design & Development Hub
kyereernest560
 
DOCX
Html example
Dorothy Dominic
 
PDF
Html full
GulshanKumar368
 
PPTX
Week-1_PPT_WEBAPPS-done.pptx
JuvyIlustrisimo
 
PPTX
htmlbcjdkkdkcjcjcjfkjccjckcjcjc_doc1.pptx
DSAISUBRAHMANYAAASHR
 
PPTX
HTML/HTML5
People Strategists
 
PPTX
HTML.pptx
VikramKalwani1
 
PDF
htmlnotes Which tells about all the basic
hemanthkalyan25
 
PDF
htmlnotes-180924151434.pdf dafdkzndsvkdvdd
hemanthkalyan25
 
PDF
HTML Presentation
pradeepthakur87
 
HTML Basics, Web Development Part-1 .pptx
Farzana Younas
 
html.pptx class notes to prepare html completly
mamathapragada
 
Lesson A.1 - Introduction to Web Development.docx
MarlonMagtibay3
 
Html.docx
Noman Ali
 
DICT-Standard-Template-4-3-ratio.pptx
Eduardo Yu
 
html (1) (1).pptx for all students to learn
aveshgopalJonnadula
 
Learn html Basics
McSoftsis
 
learnhtmlbyvipuladissanayake-170516061515 (1).pptx
ManuAbraham17
 
Html introduction
Dalia Elbadry
 
"Innovative Web Design & Development Hub
kyereernest560
 
Html example
Dorothy Dominic
 
Html full
GulshanKumar368
 
Week-1_PPT_WEBAPPS-done.pptx
JuvyIlustrisimo
 
htmlbcjdkkdkcjcjcjfkjccjckcjcjc_doc1.pptx
DSAISUBRAHMANYAAASHR
 
HTML/HTML5
People Strategists
 
HTML.pptx
VikramKalwani1
 
htmlnotes Which tells about all the basic
hemanthkalyan25
 
htmlnotes-180924151434.pdf dafdkzndsvkdvdd
hemanthkalyan25
 
HTML Presentation
pradeepthakur87
 

Recently uploaded (20)

PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PPTX
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
PDF
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
PPTX
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
PDF
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
PDF
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
PDF
NewMind AI - Journal 100 Insights After The 100th Issue
NewMind AI
 
PDF
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
PDF
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
PDF
The Builder’s Playbook - 2025 State of AI Report.pdf
jeroen339954
 
PDF
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
CIFDAQ Weekly Market Wrap for 11th July 2025
CIFDAQ
 
PDF
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
PDF
From Code to Challenge: Crafting Skill-Based Games That Engage and Reward
aiyshauae
 
PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
PPTX
UiPath Academic Alliance Educator Panels: Session 2 - Business Analyst Content
DianaGray10
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PDF
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PDF
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
Building Search Using OpenSearch: Limitations and Workarounds
Sease
 
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
NewMind AI - Journal 100 Insights After The 100th Issue
NewMind AI
 
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
The Builder’s Playbook - 2025 State of AI Report.pdf
jeroen339954
 
Transcript: New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
CIFDAQ Weekly Market Wrap for 11th July 2025
CIFDAQ
 
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
From Code to Challenge: Crafting Skill-Based Games That Engage and Reward
aiyshauae
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
UiPath Academic Alliance Educator Panels: Session 2 - Business Analyst Content
DianaGray10
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
Ad

FEWDD Lec 1 web development presentation

  • 2. What is HTML? • HTML stands for Hyper Text Markup Language • HTML is the standard markup language for creating Web pages • HTML describes the structure of a Web page • HTML consists of a series of elements • HTML elements tell the browser how to display the content • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
  • 3. Simple HTML Document Example <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • 4. Simple HTML page • <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
  • 5. Example Explained • The <!DOCTYPE html> declaration defines that this document is an HTML5 document • The <html> element is the root element of an HTML page • The <head> element contains meta information about the HTML page • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. • The <h1> element defines a large heading • The <p> element defines a paragraph
  • 6. Example Explained • The <html> element is the root element and it defines the whole HTML document. • It has a start tag <html> and an end tag </html>. • Then, inside the <html> element there is a <body> element: • The <body> element defines the document's body. • It has a start tag <body> and an end tag </body>. • Then, inside the <body> element there are two other elements: <h1> and <p> • The <h1> element defines a heading. • It has a start tag <h1> and an end tag </h1>
  • 7. Example Explained • The <p> element defines a paragraph. • It has a start tag <p> and an end tag </p> • HTML elements with no content are called empty elements. • The <br> tag defines a line break, and is an empty element without a closing tag
  • 8. HTML is Not Case Sensitive • HTML tags are not case sensitive: <P> means the same as <p>. • The HTML standard does not require lowercase tags, but it recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
  • 9. • HTML headings are defined with the <h1> to <h6> tags. • <h1> defines the most important heading. <h6> defines the least important heading. • Example <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
  • 10. The <title> tag • Every web page should have a page title to describe the meaning of the page. • The <title> element adds a title to your page. • Example <!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> The content of the document...... </body> </html> • The title is shown in the browser's title bar.
  • 11. Formatting elements were designed to display special types of text: •<b> - Bold text •<strong> - Important text •<i> - Italic text •<em> - Emphasized text •<mark> - Marked text •<small> - Smaller text •<del> - Deleted text •<ins> - Inserted text •<sub> - Subscript text •<sup> - Superscript text •<u>- Underline text
  • 12. HTML Links • HTML links are defined with the <a> tag: Example <a href="https://www.w3schools.com">Th is is a link</a> • The link's destination is specified in the href attribute. • Attributes are used to provide additional information about HTML elements.
  • 13. HTML Images • HTML images are defined with the <img> tag. • The source file (src), alternative text (alt), width, and height are provided as attributes: • Example • <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
  • 14. How to View HTML Source • Have you ever seen a Web page and wondered "Hey! How did they do that?" • View HTML Source Code: Click CTRL + U in an HTML page, or right-click on the page and select "View Page Source". This will open a new tab containing the HTML source code of the page. • Inspect an HTML Element: Right-click on an element (or a blank area), and choose "Inspect" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.