Lesson 3.2a: Anatomy of an HTML Document
Jasmine
Created on October 1, 2024
Over 30 million people create interactive content in Genially.
Check out what others have designed:
PRODUCT MANAGEMENT IN MOVIES & TV SHOWS
Presentation
A GLIMPSE INTO CAPE TOWN’S PAST
Presentation
VEGETARIANISM
Presentation
ALTERNATIVE DIETS
Presentation
MUSIC PROJECT
Presentation
GEO PROJECT (SINGAPORE)
Presentation
Coca-Cola Real Magic
Presentation
Transcript
Lesson 3.2a:
Start
anatomy of html
5. Activity
4. Guided Practice
3. Exploration of HTML
2. Vocabulary
1. Objectives
index
By the end of this lesson, students will understand the structure of an HTML document, recognize HTML elements and tags, and be able to create a basic HTML document.
Objectives
11:00
Vocabulary
File Extension: a suffix to the name of a computer file that indicates the characteristics of the file’s contents. HTML Elements: a type of HTML document component composed of tags. Document Type Declaration: an instruction that associates a particular document with a version of HTML. Root Element: encloses all other elements and acts as the sole parent element to all other elements. Nesting: the process of placing elements within other elements. Metadata: data that provides information about other data but is not content itself.
<p> This is a Paragraph! </p>
<p> This is a Paragraph! </p>
<p> This is a Paragraph! </p>
Containers tags
For example: in the tag `<p>This is a paragraph</p>`, the `<p>` is the opening tag, "This is a paragraph" is the content, and `</p>` is the closing tag.
It consists of an opening tag, content, and a closing tag, which together form an element known as container tags.
Containter Tags
closing tags
Opening tags
<html>Tags
Body Element
<body></body>
Metadata Tag
<meta>
Head Element
<head></head>
HTML Element
<html></html>
Document Type Declaration
Exploration of HTML Structure
<!DOCTYPE html>
Contains the visible content of the webpage
displayed in the browser tab.
describes and gives information about other data.
Contains meta-information about the document.
The root element that contains all the content of the webpage.
Declares the document type and version of HTML.
<!DOCTYPE HTML> <HTML> <HEAD> <META></META> <TITLE></TITLE> </HEAD> <BODY> <H1></H1> <P></P> <BUTTON></BUTTON> </BODY> </HTML>
Exploration of HTML Structure
**Purpose:** Inserts a horizontal rule (line) to separate content. ```html <hr> <p>Here’s some more content after a horizontal rule.</p> ``` - Creates a horizontal line across the page.
`<hr>`
**Purpose:** Defines a paragraph of text. ```html <p>This is a paragraph of text that explains something on the page.</p> ``` - A block-level element that represents a paragraph.
`<p>`
**Purpose:** Define headings of various levels. ```html <h1>Main Heading</h1> <h2>Subheading</h2> <h3>Smaller Subheading</h3> - `<h1>` is the largest and most important heading, while `<h6>` is the smallest.
`<h1> to <h6>`
**Purpose:** Contains the visible content of the webpage, such as text, images, and links. ```html <body> <p>This is the first paragraph of content.</p> </body> - All visible content goes inside this tag.
`<body>`
Additional HTML Tags
**Purpose:** Sets the title of the web page displayed in the browser tab. ```html <title>My First Webpage</title> - The text inside this tag will appear in the browser’s title bar or tab.
`<title>`
Activity: Creating a Simple HTML Document
Activity Instructions: - Create a basic HTML document that includes a DOCTYPE declaration, `<html>`, `<head>`, and `<body>` elements. - Add a title to the document inside the `<title>` tag within the `<head>`. - In the `<body>`, include an `<h1>` heading and a paragraph of text. - Submit your index.html into canvas once completed.
HTML Element
Represents the root of an HTML document and acts as the parent container for all other HTML elements. **Purpose:** The root element that contains all the content of the webpage.
<html> <!-- The rest of the document will go inside here --> </html> ``` - The entire HTML document must be wrapped in this tag. ---
Document Type Declaration
All HTML documents must start with a DOCTYPE declaration, this is not an HTML tag instead it acts as information for our browser so it knows what version of HTML is going to be within the document. **Purpose:** Declares the document type and version of HTML. It helps browsers interpret the document correctly.
Example: <!DOCTYPE html> ``` - It tells the browser to expect an HTML5 document.
Metadata Tag
Tags used to define the metadata of an HTML document, these are always placed within the <head> element and are not displayed on the webpage. It’s similar to a library catalog record, documenting the who, what, when, how, and why of a data resource. Purpose: Provides metadata, a set of data that describes and gives information about other data, like the character set or description of the page. <meta> tags go in the <head> section and contain important information for search engines and browsers.
<html><meta charset="UTF-8"><meta name="description" content="A brief description of the webpage"></html>
Head Element
The container for metadata, going within the <html> element and above the <body> element. **Purpose:** Contains meta-information about the document, like the title and links to stylesheets. Content inside the `<head>` tag does not appear on the webpage itself but includes important metadata like the page's title, character set, and external CSS/JS files.
```html <head> <title>My First Webpage</title> </head>
Body Element
Defines the visible contents of an HTML document, such as headings, paragraphs, images, links, etc. **Purpose:** Contains the visible content of the webpage, such as text, images, and links. - All visible content goes inside this tag.
<body> <h1>Welcome to My Website</h1> <p>This is the first paragraph of content.</p></body>