KEMBAR78
Session 2 HTML Basics Structure and Elements | PDF | Html | Html Element
Scribd
Upload
11 views12 pages

Session 2 HTML Basics Structure and Elements

This document outlines the basics of HTML structure and elements, focusing on the creation of a well-structured HTML page. Key topics include the basic skeleton of an HTML document, the use of headings, paragraphs, links, images, and attributes. The session also emphasizes best practices for HTML coding and includes a hands-on activity for building a simple webpage.

Uploaded by

thihaaung.tt1660
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views12 pages

Session 2 HTML Basics Structure and Elements

This document outlines the basics of HTML structure and elements, focusing on the creation of a well-structured HTML page. Key topics include the basic skeleton of an HTML document, the use of headings, paragraphs, links, images, and attributes. The session also emphasizes best practices for HTML coding and includes a hands-on activity for building a simple webpage.

Uploaded by

thihaaung.tt1660
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML Basics: Structure and

Elements
Web Development Essentials - Session 2
Session Overview
Today’s Learning Goals:

● Understand the structure of an HTML document


● Learn key HTML elements and their uses
● Explore how to add content like text, links, images, and lists
● Create a well-structured HTML page
Review from Session 1
Recap: Basic structure of an HTML document

● <html>, <head>, <body>


● Tags and elements
● Created your first simple webpage

Moving Forward: More HTML elements to enhance web content


HTML Document Structure
Basic Skeleton of an HTML Page:

○ Doctype: Declares the document type (HTML5)


○ Head: Contains metadata (title, links to CSS/JS)
○ Body: Contains the visible content of the page
Headings and Paragraphs
Headings:

● <h1> to <h6>: Six levels of headings for titles and subtitles

Paragraphs:

● <p>: Used for blocks of text


Links and Images

Links (<a>):

● Creating hyperlinks using the anchor tag


● Syntax: <a href="url">Link Text</a>

Images (<img>):

● Displaying images using the img tag


● Attributes: src (source URL), alt (alternative text)
HTML Attributes

● What Are Attributes?


○ Provide additional information about an element
○ Syntax: <tagname attribute="value">
○ Example: <a href="url" target="_blank">
● Common Attributes:
○ href: For links
○ src: For images
○ alt: For image descriptions
○ target: Defines where to open a link
Creating a Simple Web Page

Live Demo:

● Creating a simple HTML page using headings, paragraphs, links, and images
Hands-On Activity

● Goal: Build a webpage with the following:


○ A heading (<h1>)
○ A paragraph (<p>)
○ A link to an external website (<a href="...">)
○ An image (<img>)
○ An unordered list (<ul>)
● Instructions:
○ Use your code editor (VS Code)
○ Test in your browser
Best Practices for HTML Structure

● Best Practices:
○ Use semantic tags (<header>, <footer>, <section>, etc.) to improve readability
○ Keep code clean and organized (indentation)
○ Always provide alternative text for images (accessibility)
○ Use meaningful link text (avoid “click here”)
Summary
What We Covered Today:

● HTML document structure


● Common elements (headings, paragraphs, links, images)
● HTML attributes
● Built a simple webpage
Questions?
Q&A Session

● Any questions before we wrap up?

Thank You & See You in the Next Class!

You might also like