Scribd
Upload
18 views12 pages

Unit Two

Uploaded by

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

Unit Two

Uploaded by

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

Unit Two:- Create Document

Structure
Overview of Unit Two
• Objective: Understand how to create and
structure a simple HTML document.
• Key Topics:
– Introduction to HTML
– Basic document elements and tags
– Structuring a document
Introduction to HTML
• What is HTML?
– HyperText Markup Language used for creating
web pages.
• Purpose:
– Defines the structure and layout of a webpage
using tags.
• History:
– Developed by Tim Berners-Lee in the early 1990s.
Basic HTML Document Structure
• Essential Components:
– <!DOCTYPE html>: Specifies the document type.
– <html>: Root element for an HTML document.
– <head>: Contains metadata, title, and links to
stylesheets.
– <body>: Contains the visible content of the
webpage.
HTML Head Section
• Purpose: Provides metadata and links for
styling and scripts.
• Common Elements:
– <title>: Sets the webpage’s title in the browser
tab.
– <meta>: Specifies character sets, descriptions, and
keywords.
– <link>: Connects to external stylesheets.
HTML Body Section
• Purpose: Holds all visible content of the
webpage.
• Common Tags in Body:
– <h1> - <h6>: Heading tags for titles and subtitles.
– <p>: Defines a paragraph.
– <a>: Hyperlink to other pages or sections.
– <img>: Adds images.
– <div> and <span>: Containers for styling and
layout.
Creating Document Structure
• Folder Structure: Organize project files
efficiently.
– Root Folder: Contains all files for the website.
– Subfolders:
• Images: Store graphics and media.
• Styles: CSS files for consistent design.
• Scripts: JavaScript files for interactivity.
Basic HTML Example
Sample Code Structure:html
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1> <p>This is a
paragraph of text.</p> <a href="page2.html">Visit
Page 2</a>
</body>
</html>
Best Practices for Document
• Organize Files and Folders: Keep assets in
logical subfolders.
• Use Semantic Tags: Improve accessibility and
SEO.
• Consistency: Maintain consistent naming and
structure.
Document Structure Elements in Detail
• Headings: <h1> to <h6> for organizing content
hierarchy.
• Paragraphs and Line Breaks: <p> for
paragraphs, <br> for line breaks.
• Lists:
– Ordered Lists (<ol>): Numbered lists.
– Unordered Lists (<ul>): Bulleted lists.
– List Items (<li>): Items within lists.
Self Check Questions
• Questions to Test Understanding:
– What is the purpose of the <head> and <body>
tags?
– How would you create a folder structure for a new
website?
– What is the role of the <title> tag?
Summary of Unit Two
• Created Document Structure: Defined
elements for webpage layout.
• Organized Content: Head and body sections in
HTML.
• File and Folder Organization: Best practices
for efficient workflow.

You might also like