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
