Scribd
Upload
2 views15 pages

Unit 1,2 - HTML Overview & Elements

The document provides an overview of HTML, including its definition, structure, and key components such as elements, attributes, and metadata. It explains the anatomy of an HTML document, the difference between block and inline elements, and how to properly nest elements. Additionally, it covers the use of comments in HTML source code.

Uploaded by

1612004tuan
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
2 views15 pages

Unit 1,2 - HTML Overview & Elements

The document provides an overview of HTML, including its definition, structure, and key components such as elements, attributes, and metadata. It explains the anatomy of an HTML document, the difference between block and inline elements, and how to properly nest elements. Additionally, it covers the use of comments in HTML source code.

Uploaded by

1612004tuan
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/ 15

HTML Essentials

HTMl Overview & HTML Elements

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 1


Overview
1. What is HTML
2. Anatomy of HTML document
3. Head & Metadata
4. Anatomy of HTML element
5. Element attribute
6. Nesting Element
7. Block & Inline
8. HTML Comments

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 2


1. What is HTML?
Ø HTML stands for Hyper Text Markup Language

§ HTML describes the structure of a Web page

§ HTML consists of a series of elements

§ HTML elements tell the browser how to display the content

§ HTML elements are represented by tags

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 3


1. What is HTML?
Ø Example of a basic HTML Document

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 4


2. Anatomy of HTML document
Ø Anatomy of HTML document

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 5


3. Head & metadata
Ø Head is a container for all the stuff you want to include on the HTML page
that isn't the content you are showing to your page's viewers
§ Meta
§ Link
§ Title
§ Style
§ Script

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 6


3. Head & metadata
Ø Metadata is data about data. The meta tag (<meta>) is used in an HTML
document to provide high level metadata about the web page, such as:
§ A page description and the keywords that describe the subject of the
page.
§ Page authorship information.
§ Instructions for specific browser actions.
§ Details about the page title, description, and author to be used when the
page is posted on social media or shown in SERPs.

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 7


4. Anatomy of HTML Element
Ø Anatomy of HTML Element

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 8


5. Element attribute

§ Attributes are always specified in the start


tag
§ Attributes usually come in name/value
pairs like: name="value"

q Id attribute: Specifies a unique id for an HTML element


q Class attribute: Define equal styles for elements with the same class name.

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 9


6. Nesting elements
Ø Nesting elements
§ HTML elements can be nested (elements can contain elements).
§ All HTML documents consist of nested HTML elements

v Note: Make sure that your elements are properly nested

=> Correct

=> Incorrect

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 10


7. Block & Inline

Take a look

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 11


7. Block & Inline
Ø Block elements:
§ Always starts on a new line and takes up the full width available
(stretches out to the left and right as far as it can).
§ Block elements in HTML

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 12


7. Block & Inline
Ø Inline elements:
§ Does not start on a new line and only takes up as much width as
necessary.
§ Inline elements in HTML

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 13


8. HMTL Comments
Ø HTML comments:
§ Comment tags are used to insert comments in the HTML source code
§ An HTML comment begins with <!– – and the comment closes with – –>

Ø You can add comments to your HTML source by using the following syntax:

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 14


Thank you

10/13/21 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 15

You might also like