HTML Overview

Web application with HTML and CSS

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 1

Lesson Objectives
▪ HTML Overview
▪ HTML Element
▪ Block vs Inline
▪ Heading & Paragraph
▪ Structure & Semantic

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 2

Session 1

HTML OVERVIEW

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 3

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

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 4

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

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 5

2. Anatomy of HTML document
➢ Anatomy of HTML document

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 6

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

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 7

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.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 8

Demo

CREATE HEAD & METADATA

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 9

4. Anatomy of HTML Element
➢ Anatomy of HTML Element

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

 5. Element attribute

▪ Attributes are always specified in the start

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

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

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

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 11

6. Nesting elements
➢ Nesting elements
▪ HTML elements can be nested (elements can contain elements).
▪ All HTML documents consist of nested HTML elements

❖ Note: Make sure that your elements are properly nested

=> Correct

=> Incorrect

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 12

7. Block & Inline

Take a look

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

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

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 14

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

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 15

Demo

CREATE HTML ELEMENTS

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 16

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:

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 17

HTML Entities
▪ Reserved characters in HTML must be replaced with
character entities.
▪ Some Useful HTML Character Entities

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 18

HTML Entities
Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160;

< less than &lt; &#60;

> greater than &gt; &#62;

& ampersand &amp; &#38;

" double quotation mark &quot; &#34;

' single quotation mark &apos; &#39;

(apostrophe)

© copyright &copy; &#169;

® registered trademark &reg; &#174;

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 19

Section 2

HEADING AND PARAGRAPH

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 20

1. Heading
➢ Heading: There are six heading elements — <h1>, <h2>, <h3>, <h4>, <h5>,
and <h6>.

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

1. Heading
➢ Heading: Each element represents a different level of content in the
document; <h1> represents the main heading, <h2> represents subheadings,
<h3> represents sub-subheadings, and so on.

➢ Purpose of Heading:
▪ Search engines use the headings to index the structure and content of
your web pages.
▪ Users often skim a page by its headings. It is important to use headings
to show the document structure.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 22

1. Heading
➢ Usage notes:
▪ Avoid using heading tags to resize text. Instead, use the CSS font-size
property.
▪ Avoid skipping heading levels: always start from <h1>, next use <h2> and
so on.
▪ You should only use one <h1> per page.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 23

2. Paragraph
➢ Paragraph: <p> element represents a paragraph. HTML paragraphs can be any
structural grouping of related content, such as images or form fields.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 24

Section 3

STRUCTURE AND SEMANTIC

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 25

3. Structure hierarchy
➢ Structure hierarchy:
▪ Should just use a single <h1> per page — this is the top level heading,
and all others sit below this in the hierarchy.
▪ Make sure you use the headings in the correct order in the hierarchy.
▪ Of the six heading levels available, you should aim to use no more than
three per page, unless you feel it is necessary.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 26

4.Why structure hierarchy is important?
➢ Why structure hierarchy is important?
▪ Users looking at a web page tend to scan quickly to find relevant content,
often just reading the headings to begin.
▪ Search engines indexing your page consider the contents of headings as
important keywords for influencing the page's search rankings.
▪ To style content with CSS, or make it do interesting things with Javascript,
you need to have elements wrapping the relevant content, so
CSS/JavaScript can effectively target it.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 27

5. Semantics
➢ Semantics: A semantic element clearly describes its meaning to both the
browser and the developer.
▪ Examples of non-semantic elements:
<div> and <span> - Tells nothing about its content.

▪ Examples of semantic elements:

<form>, <table>, and <article> - Clearly defines its content.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 28

5. Semantics
➢ Compare Semantics and Non-Semantics

VS

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 29

5. Semantics
➢ Compare Semantics and Non-Semantics
▪ The semantics is much easier to read.
▪ The semantics has greater accessibility: Well-support for Search Engine.
▪ The semantics lead to more consistent code.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 30

5. Semantics
➢ Some semantics elements in HTML5

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 31

Section 4

HTML 5 SEMANTIC TAGS

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 32

HTML5 Semantic
Element Description

<header>...</header> Indicates the header information on the webpage. Header content typically consists of a business
name or logo and is commonly positioned immediately after the opening <body> tag.
<nav>…</nav> Indicates the start and end of a navigation area within the webpage. The nav element contains
hyperlinks to other webpages within a website and is commonly positioned immediately after the
closing </header> tag.
<main>...</main> Indicates the start and end of the main content area of a webpage. Contains the primary content of
the webpage. Only one main element can appear on a page.
<footer>…</footer> Indicates the start and end of the footer area of a webpage. Contains the footer content of the
webpage.
<section>…</section> Indicates the start and end of a section area of a webpage. Contains a specific grouping of content
on the webpage.
<article>…</article> Indicates the start and end of an article area of a webpage. Contains content such as forum or blog
posts.
<aside>…</aside> Indicates the start and end of an aside area of a webpage. Contains information about nearby
content and is typically displayed as a sidebar.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 33

▪ Create HTML page with:
✓ header,
✓ nav,
✓ main,
✓ section,
✓ article,
✓ footer

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 34

Create HTML page

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 35

Lesson Summary

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 36

 Thank you

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 37