Scribd
Upload
2 views

Topic 1 - Introduction to HTML 5

The document provides an overview of HTML, the standard markup language for creating web pages and applications, detailing its structure, elements, and roles. It covers the basic components of an HTML document, including the <html>, <head>, and <body> elements, as well as various text-level elements and lists. Additionally, it explains the significance of HTML in web development, accessibility, and semantic markup.

Uploaded by

Thusharika Thilakaratne
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Topic 1 - Introduction to HTML 5

The document provides an overview of HTML, the standard markup language for creating web pages and applications, detailing its structure, elements, and roles. It covers the basic components of an HTML document, including the <html>, <head>, and <body> elements, as well as various text-level elements and lists. Additionally, it explains the significance of HTML in web development, accessibility, and semantic markup.

Uploaded by

Thusharika Thilakaratne
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 44

HTML

IAL IT: Unit 2 Thusharika Thilakaratne 1


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

What is hypertext?
What is markup language?

IAL IT: Unit 2 Thusharika Thilakaratne 2


<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
HTML <body>

Code <h1>Welcome to My Website</h1>


<p>This is the first paragraph of my
Example webpage.</p>
<img src="example.jpg" alt="Example
Image">
<a href="https://www.example.com">Visit
Example Website</a>
</body>
</html>
IAL IT: Unit 2 Thusharika Thilakaratne 3
• 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

Roles of • Accessibility:
• improved user experience
HTML (1) • accessible to people with disabilities
• Structure:
• basic structure of a webpage
• defines headings, paragraphs, lists, and other content
blocks

IAL IT: Unit 2 Thusharika Thilakaratne 4


• 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:
Roles of • allows embedding of images, videos, and audio on
web pages
HTML (2) • 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

IAL IT: Unit 2 Thusharika Thilakaratne 5


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
serving a specific purpose. webpage.</p>
<img src="example.jpg" alt="Example
Image">
<a
href="https://www.example.com">Visit
Example Website</a>
IAL IT: Unit 2 </body>
Thusharika Thilakaratne 6
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
HTML to the browser. </head>
<body>
• For HTML5 - <!DOCTYPE html>
<h1>Welcome to My Website</h1>
indicates that the document is
<p>This is the first paragraph of my
written in HTML5.
webpage.</p>
<img src="example.jpg" alt="Example
Image">
<a href="https://www.example.com">Visit
Example Website</a>
</body>
IAL IT: Unit 2 </html>
Thusharika Thilakaratne 7
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>
IAL IT: Unit 2 </html>
Thusharika Thilakaratne 8
HTML Document Structure
<head> Element: <!DOCTYPE html>
• Contains meta-information about the webpage. <html>
• Produces no visible content, provides important <head>
details to browsers and search engines. <title>My First Web Page</title>
• Common elements found inside the <head> </head>
element include:
• <title>: Sets the title of the webpage, <body>
which appears in the browser's title bar <h1>Welcome to My Website</h1>
or tab. <p>This is the first paragraph of my
• <meta>: Defines meta-information, such webpage.</p>
as character encoding and viewport
settings. <img src="example.jpg" alt="Example
• <link>: Imports external resources like Image">
stylesheets and favicons. <a
• <script>: Includes JavaScript files or href="https://www.example.com">Visit
code. Example Website</a>
IAL IT: Unit 2
</body>
Thusharika Thilakaratne 9
</html>
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
browser. </head>
<body>
• Content such as text, images,
<h1>Welcome to My Website</h1>
multimedia, and interactive
<p>This is the first paragraph of my
elements are declared within the
webpage.</p>
<body> element.
<img src="example.jpg" alt="Example
• All the content that users see on Image">
the webpage should be placed <a href="https://www.example.com">Visit
inside this element. Example Website</a>
</body>
IAL IT: Unit 2 </html>
Thusharika Thilakaratne 10
Structural Element:
• Defines the layout and organisation of the content within
the <body> element.
• Examples:

HTML
• <header>: Represents the introductory content at the
top of a webpage, often containing logos and
navigation menus.

Documen •

•
<nav>: Represents a section containing navigation
links.
<main>: Encloses the main content of the webpage.

t •

•
<article>: Defines a self-contained piece of content,
like a blog post or article.
<section>: Represents a thematic grouping of

Structure •
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.

IAL IT: Unit 2 Thusharika Thilakaratne 11


HTML Text
Level
Elements

IAL IT: Unit 2 Thusharika Thilakaratne 12


• 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.
Text-level • Effective use of these elements:
• Improves the accessibility of webpage
Elements • Helps with search engine optimization
(SEO)
• Provides a more meaningful user
experience
• Commonly used text-level elements are
described in following slides.

IAL IT: Unit 2 Thusharika Thilakaratne 13


<h1> to <h6> (Headings):

Text-level
• These elements represent hierarchical
headings, ranging from the most important
<h1> to the least important <h6>.
Elements • Headings define the sections and sub-
sections of a webpage.
• Allows content organisation and improves
readability.

IAL IT: Unit 2 Thusharika Thilakaratne 14


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>

IAL IT: Unit 2 Thusharika Thilakaratne 15


Text-level Elements
<p> (Paragraphs): <!DOCTYPE html>
• The <p> element defines a paragraph. <html>
<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>

IAL IT: Unit 2 Thusharika Thilakaratne 16


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>

IAL IT: Unit 2 Thusharika Thilakaratne 17


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>

IAL IT: Unit 2 Thusharika Thilakaratne 18


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>

IAL IT: Unit 2 Thusharika Thilakaratne 19


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>

IAL IT: Unit 2 Thusharika Thilakaratne 20


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>

IAL IT: Unit 2 Thusharika Thilakaratne 21


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>

IAL IT: Unit 2 Thusharika Thilakaratne 22


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>

IAL IT: Unit 2 Thusharika Thilakaratne 23


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>
IAL IT: Unit 2 Thusharika Thilakaratne 24
HTML Lists

IAL IT: Unit 2 Thusharika Thilakaratne 25


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

IAL IT: Unit 2 Thusharika Thilakaratne 26


HTML Lists
Unordered List (<ul>):
• A list of items without any specific order <body>
<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.

IAL IT: Unit 2 Thusharika Thilakaratne 27


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>
• Individual list items inside the <li> </body>
tags.

IAL IT: Unit 2 Thusharika Thilakaratne 28


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>

IAL IT: Unit 2 Thusharika Thilakaratne 29


HTML
Forms

IAL IT: Unit 2 Thusharika Thilakaratne 30


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

IAL IT: Unit 2 Thusharika Thilakaratne 31


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").

IAL IT: Unit 2 Thusharika Thilakaratne 32


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>

IAL IT: Unit 2 Thusharika Thilakaratne 33


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"
IAL IT: Unit 2 Thusharika Thilakaratne 34
value="Submit">
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">
IAL IT: Unit 2</form> Thusharika Thilakaratne 35
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>

IAL IT: Unit 2 Thusharika Thilakaratne 36


HTML Forms
<fieldset> and <legend>: <form action="/submit" method="post">
• The <fieldset> element groups <fieldset>
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">
• The <legend> element provides a
<label for="email">Email:</label>
caption or label for the fieldset.
<input type="email" id="email"
name="email">
</fieldset>
<input type="submit" value="Submit">
</form>

IAL IT: Unit 2 Thusharika Thilakaratne 37


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"
represents a radio button, allowing users value="male">
to select one option from a group of
options. <label for="female">Female</label>
• The <input type="checkbox"> element <input type="radio" id="female"
represents a checkbox, allowing users to name="gender" value="female">
select one or more options from a group <br>
of options. <label for="subscribe">Subscribe to
Newsletter</label>
<input type="checkbox" id="subscribe"
name="newsletter" value="subscribe">
<input type="submit" value="Submit">
</form>
IAL IT: Unit 2 Thusharika Thilakaratne 38
• 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.

HTML Best • Close Tags Properly:


• Always close HTML tags.

Practices •
•
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.

IAL IT: Unit 2 Thusharika Thilakaratne 39


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.

IAL IT: Unit 2 Thusharika Thilakaratne 40


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

IAL IT: Unit 2 Thusharika Thilakaratne 41


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.

IAL IT: Unit 2 Thusharika Thilakaratne 42


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>

IAL IT: Unit 2 Thusharika Thilakaratne 43


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">

IAL IT: Unit 2 Thusharika Thilakaratne 44

You might also like