Want to create interactive content? It’s easy in Genially!
Lesson 3.2a: Anatomy of an HTML Document
Jasmine
Created on October 1, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Memories Presentation
View
Pechakucha Presentation
View
Decades Presentation
View
Color and Shapes Presentation
View
Historical Presentation
View
To the Moon Presentation
View
Projection Presentation
Transcript
Lesson 3.2a:
anatomy of html
Start
1. Objectives
index
2. Vocabulary
3. Exploration of HTML
4. Guided Practice
5. Activity
Objectives
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.
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.
11:00
<html>Tags
Containers tags
<p> This is a Paragraph! </p>
Containter Tags
It consists of an opening tag, content, and a closing tag, which together form an element known as container tags.
Opening tags
closing tags
<p> This is a Paragraph! </p>
<p> This is a Paragraph! </p>
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.
Exploration of HTML Structure
<!DOCTYPE html>
<body></body>
<meta>
<html></html>
<head></head>
HTML Element
Document Type Declaration
Metadata Tag
Body Element
Head Element
Exploration of HTML Structure
<!DOCTYPE HTML> <HTML> <HEAD> <META></META> <TITLE></TITLE> </HEAD> <BODY> <H1></H1> <P></P> <BUTTON></BUTTON> </BODY> </HTML>
Declares the document type and version of HTML.
The root element that contains all the content of the webpage.
Contains meta-information about the document.
describes and gives information about other data.
displayed in the browser tab.
Contains the visible content of the webpage
Additional HTML Tags
`<title>`
**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.
`<body>`
**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.
`<h1> to <h6>`
**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.
`<p>`
**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.
`<hr>`
**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.
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>