Scribd
Upload
15 views50 pages

FEWD Topic 2 - Introduction To HTML 5

This document provides an introduction to HTML5, covering its role in web development, document structure, text-level elements, lists, and forms. It outlines key learning outcomes for students, including understanding HTML basics and best practices. The content also includes examples of HTML code and the significance of various HTML elements for structuring web pages.

Uploaded by

xebulem
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
15 views50 pages

FEWD Topic 2 - Introduction To HTML 5

This document provides an introduction to HTML5, covering its role in web development, document structure, text-level elements, lists, and forms. It outlines key learning outcomes for students, including understanding HTML basics and best practices. The content also includes examples of HTML code and the significance of various HTML elements for structuring web pages.

Uploaded by

xebulem
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/ 50

Front End Web Development

Topic 2:
Introduction to HTML5

© NCC Education Limited


Introduction to HTML 5 Topic 2 - 2.2

Scope and Coverage


This topic will cover:
• HTML
• Role of HTML
• HTML Document Structure
• Text-level Elements
• HTML Lists
• HTML Forms
• HTML Best Practices
Introduction to HTML 5 Topic 2 - 2.3

Learning Outcomes

By the end of this topic students will be able to:


• Describe the use of HTML for website development
• Understand the basics of HTML5
• Explain the HTML structure
• Demonstrate understanding of HTML basics
Introduction to HTML 5 Topic 2 - 2.4

Unit Roadmap
Week Topic Week Topic
Overview of Web
1 Application Architecture 7 JavaScript - II

2 Introduction to HTML5 8 jQuery


Responsive CSS Framework:
3 Introduction to CSS 9
Bootstrap -I
HTML and CSS Responsive CSS Framework:
4 10
Bootstrap -II
CSS Flexbox and Grid Code Review, Testing and
5 11
Layout Collaboration
6 JavaScript - I 12 Unit Summary
Introduction to HTML 5 Topic 2 - 2.5

HTML
Introduction to HTML 5 Topic 2 - 2.6

HTML
• HTML stands for HyperText Markup Language.
• It is the standard markup language used for creating and structuring web pages
and web applications.
• HTML uses various elements and tags to define the content and layout of a
webpage.

What is hypertext?
What is markup language?
Introduction to HTML 5 Topic 2 - 2.7

HTML Code Example


<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the first paragraph of my webpage.</p>
<img src="example.jpg" alt="Example Image">
<a href="https://www.example.com">Visit Example Website</a>
</body>
</html>
Introduction to HTML 5 Topic 2 - 2.8

Roles of HTML (1)


• Foundation of Web Development:
• building block of web development
• structure and content for web pages
• Universal Language:
• supported by all web browsers and cross-platform compatibility
• Accessibility:
• improved user experience
• accessible to people with disabilities
• Structure:
• basic structure of a webpage
• defines headings, paragraphs, lists, and other content blocks
Introduction to HTML 5 Topic 2 - 2.9

Roles of HTML (2)


• Text Formatting:
• control the appearance of text, such as font styles, colors, and sizes
• Hyperlinks:
• create hyperlinks to navigate between pages and resources on the web
• Images and Media:
• allows embedding of images, videos, and audio on web pages
• Forms:
• elements to enable user interaction, such as receiving user input and data
• Semantic Markup:
• semantic elements that add meaning to the content, aiding search engines and
accessibility
Introduction to HTML 5 Topic 2 - 2.10

HTML Document Structure


<!DOCTYPE html>
• HTML follow a specific structure.
<html>
• Structure defines how the content of a <head>
webpage is organised and displayed. <title>My First Web Page</title>
• Necessary to create well-formed and </head>
valid web pages. <body>
• Basic structure of an HTML document <h1>Welcome to My Website</h1>
consists of several elements, each <p>This is the first paragraph of my webpage.</p>
serving a specific purpose. <img src="example.jpg" alt="Example Image">
<a href="https://www.example.com">Visit Example
Website</a>
</body>
</html>
Introduction to HTML 5 Topic 2 - 2.11

HTML Document Structure


Document Type Declaration <!DOCTYPE html>
(<!DOCTYPE html>) <html>
<head>
• The document type declaration <title>My First Web Page</title>
(DTD) specifies the version of
</head>
HTML to the browser.
<body>
• For HTML5 - <!DOCTYPE html> <h1>Welcome to My Website</h1>
indicates that the document is <p>This is the first paragraph of my webpage.</p>
written in HTML5. <img src="example.jpg" alt="Example Image">
<a href="https://www.example.com">Visit Example
Website</a>
</body>
</html>
Introduction to HTML 5 Topic 2 - 2.12

HTML Document Structure


<html> Element: <!DOCTYPE html>
<html>
• The <html> element is the root <head>
element in HTML.
<title>My First Web Page</title>
• It encapsulates all other elements </head>
of the webpage. <body>
• Every HTML document starts and <h1>Welcome to My Website</h1>
ends with this element. <p>This is the first paragraph of my webpage.</p>
<img src="example.jpg" alt="Example Image">
<a href="https://www.example.com">Visit Example
Website</a>
</body>
</html>
Introduction to HTML 5 Topic 2 - 2.13

HTML Document Structure


<head> Element: <!DOCTYPE html>
• Contains meta-information about the webpage. <html>
• Produces no visible content, provides <head>
important details to browsers and search <title>My First Web Page</title>
engines. </head>
• Common elements found inside the <head> <body>
element include:
<h1>Welcome to My Website</h1>
• <title>: Sets the title of the webpage, which
<p>This is the first paragraph of my webpage.</p>
appears in the browser's title bar or tab.
<img src="example.jpg" alt="Example Image">
• <meta>: Defines meta-information, such as
character encoding and viewport settings. <a href="https://www.example.com">Visit Example
<link>: Imports external resources like Website</a>
•
stylesheets and favicons. </body>
• <script>: Includes JavaScript files or code. </html>
Introduction to HTML 5 Topic 2 - 2.14

HTML Document Structure


<body> Element: <!DOCTYPE html>
<html>
• Consists the visible content of <head>
the webpage that is to be
<title>My First Web Page</title>
displayed on the webpage on
</head>
browser.
<body>
• Content such as text, images, <h1>Welcome to My Website</h1>
multimedia, and interactive <p>This is the first paragraph of my webpage.</p>
elements are declared within the <img src="example.jpg" alt="Example Image">
<body> element. <a href="https://www.example.com">Visit Example
• All the content that users see on Website</a>
the webpage should be placed </body>
inside this element. </html>
Introduction to HTML 5 Topic 2 - 2.15

HTML Document Structure


Structural Element:
• Defines the layout and organisation of the content within the <body> element.
• Examples:
• <header>: Represents the introductory content at the top of a webpage, often
containing logos and navigation menus.
• <nav>: Represents a section containing navigation links.
• <main>: Encloses the main content of the webpage.
• <article>: Defines a self-contained piece of content, like a blog post or article.
• <section>: Represents a thematic grouping of content within an article or webpage.
• <aside>: Represents content that is tangentially related to the main content, such as
sidebars or widgets.
• <footer>: Contains footer information, typically found at the bottom of the webpage.
Introduction to HTML 5 Topic 2 - 2.16

HTML TEXT LEVEL


ELEMENTS
Introduction to HTML 5 Topic 2 - 2.17

Text-level Elements
• Text-level elements in HTML are used to structure and format the
text content within a web page.
• Allows application of specific meanings and styles to different parts
of the text.
• Effective use of these elements:
• Improves the accessibility of webpage
• Helps with search engine optimization (SEO)
• Provides a more meaningful user experience
• Commonly used text-level elements are described in following
slides.
Introduction to HTML 5 Topic 2 - 2.18

Text-level Elements

<h1> to <h6> (Headings):


• These elements represent hierarchical headings, ranging from the most important
<h1> to the least important <h6>.
• Headings define the sections and sub-sections of a webpage.
• Allows content organisation and improves readability.
Introduction to HTML 5 Topic 2 - 2.19

Text-level Elements: h1 – h6 example


<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
</body>
</html>
Introduction to HTML 5 Topic 2 - 2.20

Text-level Elements
<p> (Paragraphs): <!DOCTYPE html>
<html>
• The <p> element defines a paragraph.
<head>
• It allows grouping together blocks of <title>My First Web Page</title>
text.
</head>
• Browsers add space before and after <body>
paragraphs to visually separate them. <p>This is a paragraph. It contains multiple
sentences and forms a coherent block of
text.</p>
<p> This is second paragraph.</p>
</body>
</html>
Introduction to HTML 5 Topic 2 - 2.21

Text-level Elements
<a> (Links):
• The <a> element creates hyperlinks.
• Allows users to navigate to other web pages or resources.
• The href attribute specifies the destination URL of the link.

<body>
<p>Check out my <a href="https://www.example.com">website</a> for more information.</p>
</body>
Introduction to HTML 5 Topic 2 - 2.22

Text-level Elements
<strong> and <em> (Emphasis):
• <strong> represents strong emphasis, often displayed as bold text by browsers.
• <em> represents emphasised text, typically displayed in italics by browsers.
• These elements add semantic meaning to the text, helping search engines and
assistive technologies.
<body>
<p><strong>Important:</strong> Please read the instructions carefully.</p>
<p>This quote is <em>very</em> inspiring.</p>
</body>
Introduction to HTML 5 Topic 2 - 2.23

Text-level Elements
<span> (Inline Container):
• The <span> element is an inline container.
• Allows to apply styles or add semantics to a specific section of text.
• Unlike block-level elements, <span> does not add line breaks before and after its
content.
<body>
<p>My bag is <span style="color:red">red</span> colour.</p>
</body>
Introduction to HTML 5 Topic 2 - 2.24

Text-level Elements
<abbr> (Abbreviation):
• The <abbr> element represents an abbreviation or acronym.
• Provides an additional information through a title attribute.

<body>
<p><abbr title="World Health Organization">WHO</abbr> provides health-related information.</p>
</body>
Introduction to HTML 5 Topic 2 - 2.25

Text-level Elements
<sub> and <sup> (Subscript and Superscript):
• <sub> is used for subscript text.
• Example: chemical formulas or mathematical expressions.
• <sup> is used for superscript text.
• Example: footnotes or exponentiation.

<body>
<p>H<sub>2</sub>O is the chemical formula for water.</p>
<p>2<sup>3</sup> = 8</p>
</body>
Introduction to HTML 5 Topic 2 - 2.26

Text-level Elements
<hr> (Horizontal Rule):
• The <hr> element inserts a horizontal line to separate content visually.
• It gives spacing between blocks.
• It is a self-closing element and does not have a closing tag.

<body>
<p>This paragraph is separated by a horizontal rule.</p>
<hr>
<p>Continuing with the next paragraph.</p>
</body>
Introduction to HTML 5 Topic 2 - 2.27

Text-level Elements
<blockquote> (Block Quote):
• The <blockquote> element represents a block of quoted content from another
source.
• Browsers typically indent and style blockquotes to distinguish them from regular
text.
<body>
<blockquote>
<p>"Be yourself; everyone else is already taken." - Oscar
Wilde</p>
</blockquote>
</body>
Introduction to HTML 5 Topic 2 - 2.28

Text-level Elements
<figure> and <figcaption> (Figure with Caption):
• The <figure> element:
• Represents content referenced from main content, such as images or videos.
• The <figcaption> element:
• Adds a caption or description to the content inside <figure>.
<body>
<figure>
<img src="image.jpg" alt="A beautiful landscape">
<figcaption>A breathtaking landscape.</figcaption>
</figure>
</body>
Introduction to HTML 5 Topic 2 - 2.29

HTML LISTS
Introduction to HTML 5 Topic 2 - 2.30

HTML Lists
Two types of lists:
• Unordered lists (bulleted lists)
– Created using the <ul> (unordered list) tag.
• Ordered lists (numbered lists)
– Created using the <ol> (ordered list) tag
• List items are represented by the <li> (list item) tag.
Introduction to HTML 5 Topic 2 - 2.31

HTML Lists
Unordered List (<ul>):
<body>
• A list of items without any specific order <ul>
or sequence.
<li>Item 1</li>
• Typically displayed as bullet points by <li>Item 2</li>
default. <li>Item 3</li>
• <ul> tag to create an unordered list </ul>
• Individual list items inside the <li> </body>
tags.
Introduction to HTML 5 Topic 2 - 2.32

HTML Lists
Ordered List (<ol>):
<body>
• Conversely, a list of items with a <ol>
specific order or sequence <li>Item 1</li>
• Typically displayed as bullet points by <li>Item 2</li>
default. <li>Item 3</li>
• <ol> tag to create an ordered list </ol>
</body>
• Individual list items inside the <li>
tags.
Introduction to HTML 5 Topic 2 - 2.33

HTML Lists
Nested Lists: <body>
• Lists can be nested inside <ul>
each other to create <li>Item 1</li>
hierarchical structures. <li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</body>
Introduction to HTML 5 Topic 2 - 2.34

HTML FORMS
Introduction to HTML 5 Topic 2 - 2.35

HTML Forms

Think for a website where you • Approach for users to submit data
use form before and discuss to a web server for processing.
the various types of form from
different websites. • Essential for various interactive
elements:
• Contact forms
• Login pages
• Search bars
Introduction to HTML 5 Topic 2 - 2.36

HTML Forms
• The <form> element is used to create an HTML form.
• Form elements:
• Input fields
• Buttons
• Checkboxes
• Radio buttons
• The action attribute specifies the URL where the form data will be
sent upon submission.
• The method attribute defines the HTTP method used for the form
submission (e.g., "GET" or "POST").
Introduction to HTML 5 Topic 2 - 2.37

HTML Forms
<input>:
• The <input> element represents various form controls like text input, radio
buttons, checkboxes, buttons, etc.
• The type attribute defines the type of input control to be displayed.
• The name attribute is used to identify the input field when the form is submitted.

<form action="/submit" method="post">


<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
Introduction to HTML 5 Topic 2 - 2.38

HTML Forms
<textarea>:
• The <textarea> element creates a multi-line text input area for longer
text entries.
• The name attribute is used to identify the textarea when the form is
submitted.
<form action="/submit" method="post">
<label for="message">Message:</label>
<textarea id="message" name="message"
rows="4" cols="50"></textarea>
<input type="submit" value="Submit">
</form>
Introduction to HTML 5 Topic 2 - 2.39

HTML Forms
<select> and <option>:
• The <select> element creates a dropdown list, and <option> elements define the
individual options in the list.
• The name attribute is used to identify the select field when the form is submitted.
<form action="/submit" method="post">
<label for="country">Country:</label>
<select id="country" name="country">
<option value="USA">United States</option>
<option value="UK">United Kingdom</option>
<option value="Canada">Canada</option>
</select>
<input type="submit" value="Submit">
</form>
Introduction to HTML 5 Topic 2 - 2.40

HTML Forms
<button>:
• The <button> element represents a clickable button within the form.
• It can be used for various purposes, such as submitting the form, triggering
JavaScript functions, etc.

<form action="/submit" method="post">


<button type="submit">Submit</button>
</form>
Introduction to HTML 5 Topic 2 - 2.41

HTML Forms
<fieldset> and <legend>: <form action="/submit" method="post">
<fieldset>
• The <fieldset> element groups
related form elements together and <legend>Contact Information</legend>
creates a visual boundary around <label for="name">Name:</label>
them. <input type="text" id="name" name="name">
<label for="email">Email:</label>
• The <legend> element provides a <input type="email" id="email" name="email">
caption or label for the fieldset.
</fieldset>
<input type="submit" value="Submit">
</form>
Introduction to HTML 5 Topic 2 - 2.42

HTML Forms
<input type="radio"> and <input <form action="/submit" method="post">
type="checkbox">: <label for="male">Male</label>
• The <input type="radio"> element <input type="radio" id="male" name="gender" value="male">
represents a radio button, allowing users
<label for="female">Female</label>
to select one option from a group of
options. <input type="radio" id="female" name="gender"
value="female">
• The <input type="checkbox"> element
represents a checkbox, allowing users to <br>
select one or more options from a group <label for="subscribe">Subscribe to Newsletter</label>
of options. <input type="checkbox" id="subscribe" name="newsletter"
value="subscribe">
<input type="submit" value="Submit">
</form>
Introduction to HTML 5 Topic 2 - 2.43

HTML Best Practices


• Use Semantic HTML:
• Semantic elements (e.g., <header>, <nav>, <main>, <article>, <section>,
<footer>).
• Provides meaning to the structure of your web page. This improves
accessibility and helps search engines understand the content.
• Close Tags Properly:
• Always close HTML tags.
• Some elements are self-closing (e.g., <br> and <img>)
• Some require closing tags (e.g., <p></p>).
• Use Meaningful Text in Links and Buttons:
• Provide descriptive link text and button labels that are meaningful.
Introduction to HTML 5 Topic 2 - 2.44

HTML Best Practices


• Lowercase Element Names and Attributes:
• Use lowercase for HTML element names and attribute names.
• Ensures consistency and better compatibility with XHTML and XML.
• Accessibility:
• Accessible to people with disabilities.
• Use appropriate headings, labels for form elements, descriptive link text.
• Valid and Well-Formatted HTML:
• Ensure your HTML code is valid.
• Adhering to the HTML standard.
• Use proper indentation and formatting to enhance readability for both humans
and machines.
Introduction to HTML 5 Topic 2 - 2.45

HTML Best Practices


• Test Cross-Browser Compatibility:
• Test web pages on different browsers (Chrome, Firefox, Safari, Edge, etc.).
• Ensure they display and function correctly across platforms.
• Avoid Deprecated Elements:
• Avoid using deprecated HTML elements and attributes.
• Check the current HTML specifications to ensure usage of the latest and
recommended elements.
• Mobile Responsiveness:
• Design your web pages to be mobile-responsive
• Adjust layout and content to different screen sizes and devices
Introduction to HTML 5 Topic 2 - 2.46

Quiz - 1
1. What is the correct order of elements in a basic HTML document structure?
A) <body>, <head>, <html>
B) <head>, <html>, <body>
C) <html>, <head>, <body>
D) <html>, <body>, <head>

2. Which HTML element is used to define the metadata of the document, such as its title and character set?
A) <body>
B) <header>
C) <meta>
D) <head>

3. What is the purpose of the <!DOCTYPE html> declaration?


A) It links the HTML document to a CSS file.
B) It declares the document type and version of HTML.
C) It includes JavaScript code in the HTML document.
D) It adds a title to the HTML document.
Introduction to HTML 5 Topic 2 - 2.47

Quiz - 2
1. Which element is used to define emphasized text in HTML?
A) <strong>
B) <em>
C) <mark>
D) <i>

2. What is the purpose of the <br> element in HTML?


A) To create a new paragraph
B) To insert a horizontal line
C) To add a line break within a text
D) To emphasize text

3. Which HTML element is used to define a part of text in an alternate voice or mood?
A) <blockquote>
B) <cite>
C) <q>
D) <s>
Introduction to HTML 5 Topic 2 - 2.48

Quiz - 3
1. What is the purpose of the <form> element in HTML?
A) To create a searchable database
B) To display user inputs
C) To collect user inputs
D) To format document sections

2. Which attribute specifies the method the form data should be sent to the server?
A) method
B) action
C) type
D) enctype

3. What type of form input is used to submit the form to the server?
A) <input type="text">
B) <input type="submit">
C) <input type="button">
D) <input type="checkbox">
Introduction to HTML 5 Topic 2 - 2.49

References
Introduction to HTML:
Mozilla Developer Network (MDN). (n.d.). Introduction to HTML. Available at:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML

HTML Document Structure:


Mozilla Developer Network (MDN). (n.d.). Getting started with HTML. Available at:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started

HTML Text Level Elements:


Mozilla Developer Network (MDN). (n.d.). HTML basics. Available at: https://developer.mozilla.org/en-
US/docs/Learn/HTML/Introduction_to_HTML/HTML_basics
Topic 2 – Introduction to HTML5

Any Questions?

You might also like