Introduction to HTML
(PowerPoint Notes)
Basics of Web Development
Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
What is HTML?
HyperText Markup Language
The foundational language for crafting web pages
Standard Document Type
Acts as the standard for web document creation
Content Structure
Provides structure and content for everything you see on
the internet
How HTML Works
<html>This is the root element</html>
HTML uses tags in angle brackets to structure content
Tags define and structure content on the web
1/8
Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
Understanding HTML Tags
What are Tags?
Keywords enclosed in angle brackets that define
elements
Tag Pairs
Tags come in pairs: opening and closing
Tag Errors
Unclosed tags can cause formatting errors
Tag Examples
<html> HTML document content </html>
<head> Page metadata </head>
<body> Visible content </body>
Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
2/8
Basic HTML Document Structure
Every HTML page follows a fundamental structure defined by
core tags:
<html>
Declares webpage is HTML, root element
<head>
Contains metadata, stylesheets, scripts
<body>
Encloses visible content in browser window
HTML Document Structure
<html> ← Root element
<head> ← Metadata section
</head>
<body> ← Content section
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
Proper nesting of tags is essential for valid HTML
Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
3/8
The Head Section and Page Title
<head> Section
• Contains metadata about the HTML document
• Metadata includes title, stylesheets, and scripts
• Content is not directly displayed on the web page
Head Section Example
<html>
<head>
<title>Page Title</title>
<link> to stylesheets
<script> for interactivity
</head>
<body>Visible content</body>
</html>
The <title> Tag
• Defines the title of the web page
• Displayed in the browser's title bar or tab
• Not displayed on the actual web page content
• Serves as an identifier for browsers and search engines
Title Tag Example
<title>This appears in the browser tab</title>
The title is important for SEO and browser functionality
Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
4/8
Text Formatting Basics
Heading Tags
HTML provides heading tags from h1 to h6
h1 - Most Important Heading
h2 - Second Level
h6 - Least Important Heading
Paragraph Tags
The p tag defines paragraphs
<p>This is a paragraph.</p>
Line Breaks
The br tag forces a line break
<p>First line.
<br>Second line.</p>
Why It Matters
Organizes content with clear hierarchy
Improves readability and structure
Helps search engines understand content
Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
5/8
Common HTML Elements
Lists
Organize information in a clear, digestible format
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
Horizontal Rules
Visually separate content with horizontal lines
<hr>
Images
Embed visual content with the img tag
<img src="image.jpg" alt="Description">
Hyperlinks
Create connections between web pages and resources
<a href="https://example.com">Link Text</a>
Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
6/8
Building Complete Web Pages
Piece Together Elements
Combine structural tags, text formatting, and other elements to
create functional websites
Build Complete Documents
Create well-structured web pages using HTML fundamentals
Essential Foundation
This knowledge serves as an essential starting point for anyone
venturing into web design
Complete HTML Example
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
</body>
</html>
All elements work together to create a functional website
Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
7/8
References
Beginner's Guide to Web Design - Kristen S
https://mason.gmu.edu/~kshiffl4/375/module5-2.html
HTML Styles - W3Schools
https://www.w3schools.com/html/html_css.asp
HTML JavaScript - W3Schools
https://www.w3schools.com/html/html_scripts.asp
Some facts about HTML which everyone knows - Ashish Aryan 's Blog
https://ashisharyan5680.hashnode.dev/some-facts-about-html-which-everyone-knows
Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
8/8

Week 7 Introduction to HTML PowerPoint Notes.pptx

  • 1.
    Introduction to HTML (PowerPointNotes) Basics of Web Development Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
  • 2.
    What is HTML? HyperTextMarkup Language The foundational language for crafting web pages Standard Document Type Acts as the standard for web document creation Content Structure Provides structure and content for everything you see on the internet How HTML Works <html>This is the root element</html> HTML uses tags in angle brackets to structure content Tags define and structure content on the web 1/8 Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/
  • 3.
    Understanding HTML Tags Whatare Tags? Keywords enclosed in angle brackets that define elements Tag Pairs Tags come in pairs: opening and closing Tag Errors Unclosed tags can cause formatting errors Tag Examples <html> HTML document content </html> <head> Page metadata </head> <body> Visible content </body> Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 2/8
  • 4.
    Basic HTML DocumentStructure Every HTML page follows a fundamental structure defined by core tags: <html> Declares webpage is HTML, root element <head> Contains metadata, stylesheets, scripts <body> Encloses visible content in browser window HTML Document Structure <html> ← Root element <head> ← Metadata section </head> <body> ← Content section <h1>Heading</h1> <p>Paragraph</p> </body> </html> Proper nesting of tags is essential for valid HTML Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 3/8
  • 5.
    The Head Sectionand Page Title <head> Section • Contains metadata about the HTML document • Metadata includes title, stylesheets, and scripts • Content is not directly displayed on the web page Head Section Example <html> <head> <title>Page Title</title> <link> to stylesheets <script> for interactivity </head> <body>Visible content</body> </html> The <title> Tag • Defines the title of the web page • Displayed in the browser's title bar or tab • Not displayed on the actual web page content • Serves as an identifier for browsers and search engines Title Tag Example <title>This appears in the browser tab</title> The title is important for SEO and browser functionality Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 4/8
  • 6.
    Text Formatting Basics HeadingTags HTML provides heading tags from h1 to h6 h1 - Most Important Heading h2 - Second Level h6 - Least Important Heading Paragraph Tags The p tag defines paragraphs <p>This is a paragraph.</p> Line Breaks The br tag forces a line break <p>First line. <br>Second line.</p> Why It Matters Organizes content with clear hierarchy Improves readability and structure Helps search engines understand content Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 5/8
  • 7.
    Common HTML Elements Lists Organizeinformation in a clear, digestible format <ul> <li>Unordered list item</li> <li>Unordered list item</li> </ul> Horizontal Rules Visually separate content with horizontal lines <hr> Images Embed visual content with the img tag <img src="image.jpg" alt="Description"> Hyperlinks Create connections between web pages and resources <a href="https://example.com">Link Text</a> Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 6/8
  • 8.
    Building Complete WebPages Piece Together Elements Combine structural tags, text formatting, and other elements to create functional websites Build Complete Documents Create well-structured web pages using HTML fundamentals Essential Foundation This knowledge serves as an essential starting point for anyone venturing into web design Complete HTML Example <html> <head> <title>My Web Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph of text.</p> <ul> <li>First item</li> <li>Second item</li> </ul> </body> </html> All elements work together to create a functional website Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 7/8
  • 9.
    References Beginner's Guide toWeb Design - Kristen S https://mason.gmu.edu/~kshiffl4/375/module5-2.html HTML Styles - W3Schools https://www.w3schools.com/html/html_css.asp HTML JavaScript - W3Schools https://www.w3schools.com/html/html_scripts.asp Some facts about HTML which everyone knows - Ashish Aryan 's Blog https://ashisharyan5680.hashnode.dev/some-facts-about-html-which-everyone-knows Introduction to HTML PowerPoint Notes © 2025 by Lesanda .M.W. is licensed under CC BY-SA 4.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ 8/8