Scribd
Upload
18 views

02 - HTML Elements

The document discusses HTML elements and tags. It defines common HTML elements like <html>, <head>, <body>, and provides examples of empty elements, formatting tags, list tags, table tags and grouping tags. It also explains the structure of HTML elements and how HTML works.

Uploaded by

punsherhaik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

02 - HTML Elements

The document discusses HTML elements and tags. It defines common HTML elements like <html>, <head>, <body>, and provides examples of empty elements, formatting tags, list tags, table tags and grouping tags. It also explains the structure of HTML elements and how HTML works.

Uploaded by

punsherhaik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

Recap

1.

3 2.

4
5.
Recap
❑ <!DOCTTYPE html>
- a document declaration that defines that this document is an html document. It helps the browser to
display a webpage correctly.

❑ <html> </html>
- a root element of an HTML page which encloses all other elements in the HTML page.

❑ <head> </head>
Contains information about the page, such as the title and metadata
❑ <title> </title>
Specifies a title for the HTML page which is shown in the browser’s title bar

❑ <body> </body>
- Contains information about the page, such as the title and metadata
Recap
1.

4
Parts of the website
1. Navigation Bar

Header

Body

Footer
Activity 3: Do you
know me?
Activity 3: Do you
know me?
Definition
HTML or HyperText Markup Language is used to structure and
format the content of websites on the World Wide Web.
❑ HyperText
- a way of organizing text that allows the reader to easily navigate
and access related information.
❑ Markup language
- It is a computer language that is used to add structure and
formatting to a text document. It uses a system of tags to define
the structure and content of a document.
Definition
❑ Web pages
- Web page stored on a web server, which makes the page available to users of
the Web, to view a Web page, the user runs a Web browser.
❑ Web browsers
- Are software program that retrieves the page and displays the web page.
- Examples Google Chrome, Safari, Internet Explorer
Activity 1
HTML
ELEMEN
TS
Learning
Objectives
At the end of the lesson, the student should be able to:

Identify the elements and syntax in a basic HTML document;

Use the HTML elements; and

Recognize the importance of each HTML elements through


designing and creating HTML document.
HTML vs. HTML 5
HTML Editors
HTML Editor
These are software applications used for creating web pages. Other
examples:

Editor’s Name Examples


Text Editor Notepat++, Microsoft Windows Notepad, TextEdit, Apple
Mac, VS Code
HTML Editor Microsoft Expression
Adobe Dreamweaver
Word Processing Programs Microsoft Word, Open Office, WPS
How to Use MS
Notepad
Go to Start Button of your Laptop or Desktop

Types the word “Notepad” on the box

Open the notepad


Microsoft
Notepad
Title Bar Control Buttons
Menu Bar

Text Area Scroll Bar


Visual Studio
Code
How HTML
works?
<!DOCTYPE Html>

It is not an HTML tag but it is a document declaration that helps the browser to
display a webpage correctly.
M E TA D ATA

Metadata is information or data about data. It is about the HTML document which
is placed in the head part and will not be displayed on the page.
M E TA D ATA
❑ Head – represents a collection of metadata for the document
❑ Title – represents the document title or name
❑ Base – Specifies document base URL for the purpose of resolving relatives URLs and name of the default
browsing context for the purposes of the following hyperlinks
❑ Link – Specifies the link of the document to other resources. It must have a real attribute
❑ Meta- represents the various kinds of metadata that cannot be expressed using the title, base, link, style
and script.
❑ Style – allows authors to embed style information in the document.
Three Major Markup
Components of HTML
Elements

Attributes

Values
HTML
❑ Elements
Components
- These are everything between the start tag and the end tags, including the tags.
❑ Attributes
- Provide additional information about the HTML elements
❑ Values
- It specifies the properties of the attribute which provide additional information about the HTML element
<h1> Hello

</h1>
Ta g s

• Tags are the basic units or building blocks of an HTML file. Web pages are
designed and HTML codes are made up of these tags – they control how
HTML does its structuring, laying out and formatting.
• They are enclosed in angle brackets < and >
?
< h1 > Hello </h1> ?

?
S t r u c t u re o f a n E l e m e n t

Start tag Ent tag

<tag name> Contents </tag name>


<h1> Hello Grade 9 </h1>
Structure of an
Element
▪ Start Tag – indicates the start or beginning tag and attributes are placed in the start tag.
▪ Attributes – it is used to provide additional information about the tag and go in name value pairs
separated by an equal sign “ = ”.
▪ Content – everything between the start and end tag is the content.
▪ End tag – signify the end of the tag and ultimately, the range of the content the tag.
▪ HTML Elements – they usually come in tag paris.
Empty Elements
▪ HTML elements with no content are called Empty elements.
▪ Examples are:
▪ <br>
▪ <hr>
▪ <img src = “logo.gif”>
HTML Tags
Tag Functions
The elements that defines a paragraph.
<p> </p>

<br> The elements that add line breaks within paragraphs.

<hr> The elements that defines horizontal line.


<h1>, <h2>,
The HTML heading tags, used to add headings to a webpage. <h1> tag denotes the most important
<h3>, <h4>,
heading on a webpage. <h6> denotes the least important heading.
<h5>, <h6>
HTML Tags
Tags Functions
<img> Defines an image

<style> Defines style information for a document

<link> Defines the relationship between a document and an external resource.

<a> Anchor tag. It defines links.


HTML Formatting
Tag
Tags
Functions
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternative voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
HTML List Tags
Tags Functions
<ol> Tag that defines an ordered list.

<ul> Tag that defines an unordered list.

<li> Tag that defines a list of item.

<dl> Tag that defines a definition list.

<dt> Tag that defines item in a definition list.

<dd> Tag that defines a description of an item in a definition list.


HTML Table Tags
Tags Functions
<table> The tags that defines a table.

<th> The tags that defines a header cell in a table.

<tr> The tags that defines a row in a table.

<td> The tags that defines a cell in a table.


<!- - - -> The HTML comments . The are not displayed by browsers and they are used to add notes
for documentation.
HTML Grouping Tags
Tags Functions
<div> Tag that defines a section in a document.

<span> Tag that defines a section in a document (inline format).


Thank
you!

You might also like