503073
WEB PROGRAMMING & APPLICATIONS
Lesson 2: HyperText Markup Language
Instructor: Duong Huu Phuoc
1
OUTLINE
1. Introduction to HTML
2. Basic structure of an HTML document
3. HTML elements and attributes
4. Forms in HTML
5. HTML5 Elements
Nov 20, 2025 503073 - Lesson 2: HTML 2
HTML INTRODUCTION
Nov 20, 2025 503073 - Lesson 2: HTML 3
What is HTML?
HTML stands for Hyper Text Markup Language.
HTML is the standard markup language for creating Web pages.
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 label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
Nov 20, 2025 503073 - Lesson 2: HTML 4
Simple HTML Document
Nov 20, 2025 503073 - Lesson 2: HTML 5
Simple HTML Document
Nov 20, 2025 503073 - Lesson 2: HTML 6
HTML Page Structure
Nov 20, 2025 503073 - Lesson 2: HTML 7
The HTML Head Tag
The <head> element Is a container for metadata.
Metadata is data about the HTML document. Metadata is
not displayed.
Metadata typically define the document title, character set,
styles, scripts, and other meta information.
The following elements can go inside the <head> element:
<title>, <style>, <link>, <meta>, <script>
Nov 20, 2025 503073 - Lesson 2: HTML 8
The HTML Body Tag
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML
document, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
There can only be one <body> element in an HTML
document.
Nov 20, 2025 503073 - Lesson 2: HTML 9
BASIC HTML TAGS
Nov 20, 2025 503073 - Lesson 2: HTML 10
HTML Element
An HTML element is defined by a start tag, some content,
and an end tag.
A tag is a keyword enclosed by angle brackets: <table>
There are opening and closing tags for many but not all tags.
The affected text is between the two tags:
<b>Hello</b>
<i>Hello</i>
<br>
Nov 20, 2025 503073 - Lesson 2: HTML 11
Nested Tags
Whenever you have HTML tags within other HTML tags, you
must close the nearest tag first.
<p>Hello <b>this</b> is a <i>sample</i> text</p>
Nov 20, 2025 503073 - Lesson 2: HTML 12
HTML Attributes
All HTML elements can have attributes.
Attributes provide additional information about elements.
Attributes are always specified in the start tag.
Attributes usually come in name/value pairs like: name="value”.
<video width=“600px” height=“400px”>
<img src=“[Link]
<p style="color:red">This is a red paragraph</p>
Nov 20, 2025 503073 - Lesson 2: HTML 13
HTML Headings
HTML headings are titles or subtitles that you want to display on a
webpage.
Nov 20, 2025 503073 - Lesson 2: HTML 14
HTML Paragraphs
A paragraph always starts on a new line, and is usually a
block of text.
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and
after a paragraph.
Nov 20, 2025 503073 - Lesson 2: HTML 15
HTML Paragraphs
Nov 20, 2025 503073 - Lesson 2: HTML 16
HTML Paragraphs
Nov 20, 2025 503073 - Lesson 2: HTML 17
HTML Styles
The HTML style attribute is used to add styles to an element,
such as color, font, size, and more.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Nov 20, 2025 503073 - Lesson 2: HTML 18
HTML Styles
Nov 20, 2025 503073 - Lesson 2: HTML 19
HTML Styles: Background color
Nov 20, 2025 503073 - Lesson 2: HTML 20
HTML Styles: Background color
Nov 20, 2025 503073 - Lesson 2: HTML 21
HTML Styles: Text color
Nov 20, 2025 503073 - Lesson 2: HTML 22
HTML Styles: Text Size
Nov 20, 2025 503073 - Lesson 2: HTML 23
HTML Styles: Text Alignment
Nov 20, 2025 503073 - Lesson 2: HTML 24
HTML Color
HTML colors are specified with predefined color names, or
with RGB, HEX, HSL, RGBA, or HSLA values.
Color names: red, green, blue, tomato, orange …
RGB values:
rgb(66, 99, 245)
rgba(66, 99, 245, 0.5)
rgb(245, 108, 66)
HEX color: #ff0000, #000000, #00ff00
Nov 20, 2025 503073 - Lesson 2: HTML 25
HTML Color
Nov 20, 2025 503073 - Lesson 2: HTML 26
HTML Image
Images can improve the design and the appearance of a
web page.
<img src=”[Link] alt="Italian Trulli">
<img src=”[Link]" alt="Italian Trulli">
<img src=”images/[Link]">
<img src=”/images/[Link]">
<img src=”../images/[Link]">
Nov 20, 2025 503073 - Lesson 2: HTML 27
HTML Link
Links allow users to click their way from page to page.
A link does not have to be text. A link can be an image or
any other HTML element.
<a href="[Link] TDTU Website</a>
<a href="[Link] src=”images/[Link]"></a>
Nov 20, 2025 503073 - Lesson 2: HTML 28
HTML Link – Target Attribute
By default, the linked page will be displayed in the current browser
window.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self (Default): Opens the document in the same window/tab as it was
clicked.
_blank - Opens the document in a new window or tab.
_parent - Opens the document in the parent frame.
_top - Opens the document in the full body of the window.
Nov 20, 2025 503073 - Lesson 2: HTML 29
HTML LIST
Nov 20, 2025 503073 - Lesson 2: HTML 30
HTML List
There are two types of HTML list:
Ordered list: represented by <ol> tag
Unordered list: represented by <ul> tag
List items:
The items inside a list
Represented by <li> tag
Nov 20, 2025 503073 - Lesson 2: HTML 31
Unordered HTML List
Nov 20, 2025 503073 - Lesson 2: HTML 32
Unordered HTML List
The CSS list-style-type property is used to define the style of
the list item marker. It can have one of the following values:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
Nov 20, 2025 503073 - Lesson 2: HTML 33
Unordered HTML List
Nov 20, 2025 503073 - Lesson 2: HTML 34
Ordered HTML List
Nov 20, 2025 503073 - Lesson 2: HTML 35
Ordered HTML List
The type attribute of the <ol> tag, defines the type of the list
item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Nov 20, 2025 503073 - Lesson 2: HTML 36
Ordered HTML List
Nov 20, 2025 503073 - Lesson 2: HTML 37
HTML TABLE
Nov 20, 2025 503073 - Lesson 2: HTML 38
HTML Table
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag.
Each table header is defined with a <th> tag.
Each table data/cell is defined with a <td> tag.
Nov 20, 2025 503073 - Lesson 2: HTML 39
HTML Table
Nov 20, 2025 503073 - Lesson 2: HTML 40
HTML Table - Collapsed Borders
Nov 20, 2025 503073 - Lesson 2: HTML 41
HTML Table – Cell Padding
Nov 20, 2025 503073 - Lesson 2: HTML 42
HTML Table – Column Span
Nov 20, 2025 503073 - Lesson 2: HTML 43
HTML Table – Column Span
Nov 20, 2025 503073 - Lesson 2: HTML 44
HTML Table – Column Span
Nov 20, 2025 503073 - Lesson 2: HTML 45
HTML Table – Row Span
Nov 20, 2025 503073 - Lesson 2: HTML 46
HTML Table – Row Span
Nov 20, 2025 503073 - Lesson 2: HTML 47
BLOCK vs INLINE ELEMENTS
Nov 20, 2025 503073 - Lesson 2: HTML 48
Block and Inline Elements
Every HTML element has a default display value, depending
on what type of element it is.
There are two display values: block and inline.
Nov 20, 2025 503073 - Lesson 2: HTML 49
Block Elements
A block-level element 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).
Here are some block elements:
<table>
<p>
<form>
<div>
<ul>
<li>
<h1>-<h6>
Nov 20, 2025 503073 - Lesson 2: HTML 50
Inline Elements
An inline element does not start on a new line and it only
takes up as much width as necessary.
Here are some inline elements:
<a>
<img>
<b>, <u>, <i>
<span>
<input>, <select>, <textarea>, <button>
Nov 20, 2025 503073 - Lesson 2: HTML 51
HTML iFrame
An HTML iframe is used to display a web page within a web
page.
Nov 20, 2025 503073 - Lesson 2: HTML 52
HTML Responsive
Responsive web design is about creating web pages that
look good on all devices!
A responsive web design will automatically adjust for different
screen sizes and viewports.
Responsive Web Design is about using HTML and CSS to
automatically resize, hide, shrink, or enlarge, a website, to
make it look good on all devices (desktops, tablets, and
phones)
Nov 20, 2025 503073 - Lesson 2: HTML 53
HTML Responsive
Nov 20, 2025 503073 - Lesson 2: HTML 54
HTML Responsive - Setting The Viewport
To create a responsive website, add the following <meta>
tag to all your web pages.
This will give the browser instructions on how to control the
page's dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Nov 20, 2025 503073 - Lesson 2: HTML 55
HTML Responsive - Setting The Viewport
Nov 20, 2025 503073 - Lesson 2: HTML 56
Nov 20, 2025 503073 - Lesson 2: HTML 57
HTML FORMS
Nov 20, 2025 503073 - Lesson 2: HTML 58
HTML Form
An HTML form is used to collect user input. The user input is
most often sent to a server for processing.
Nov 20, 2025 503073 - Lesson 2: HTML 59
The <form> element
The HTML <form> element is used to create an HTML form for user input.
The <form> element is a container for different types of input elements,
such as: text fields, checkboxes, radio buttons, submit buttons, etc.
The action attribute defines the action to be performed when the form
is submitted.
The method attribute specifies the HTTP method to use used when
submitting the form data.
Nov 20, 2025 503073 - Lesson 2: HTML 60
The <form> element
Nov 20, 2025 503073 - Lesson 2: HTML 61
The <form> element
Nov 20, 2025 503073 - Lesson 2: HTML 62
Form Elements
The HTML <form> element can contain one or more of the
following form elements:
<label>, <input>
<select>, <option>
<textarea>, <button>, <datalist>
Nov 20, 2025 503073 - Lesson 2: HTML 63
The <input> elements
One of the most used form element is the <input> element.
The <input> element can be displayed in several ways,
depending on the type attribute.
Each input element must have a name.
Nov 20, 2025 503073 - Lesson 2: HTML 64
The <input> element: Text boxes & Buttons
Nov 20, 2025 503073 - Lesson 2: HTML 65
The <input> element: Text boxes & Buttons
Nov 20, 2025 503073 - Lesson 2: HTML 66
The <input> element: Checkboxes & Radio
Nov 20, 2025 503073 - Lesson 2: HTML 67
The <input> element: Checkboxes & Radio
Nov 20, 2025 503073 - Lesson 2: HTML 68
The <select> and <textarea> elements
Nov 20, 2025 503073 - Lesson 2: HTML 69
The <select> and <textarea> elements
Nov 20, 2025 503073 - Lesson 2: HTML 70
HTML5 Elements
Nov 20, 2025 503073 - Lesson 2: HTML 71
HTML5 Elements: Introduction
HTML5 introduced many new elements.
They provide semantic meaning and better structure for web
pages.
Easier for browsers, search engines, and developers to
understand content.
Visual Idea: Diagram comparing <div> vs. <header>,
<section> usage.
Nov 20, 2025 503073 - Lesson 2: HTML 72
HTML5 Semantic Elements
A semantic element clearly describes its meaning to both the
browser and the developer.
A semantic element clearly describes its meaning to both the
browser and the developer.
Many web sites contain HTML code like: <div id="nav"> <div
class="header"> <div id="footer"> to indicate navigation, header,
and footer.
Examples of semantic elements: <form>, <table>, and <article> -
Clearly defines its content.
Nov 20, 2025 503073 - Lesson 2: HTML 73
HTML5 Semantic Elements
In HTML there are some semantic elements that can be used
to define different parts of a web page:
<article>, <aside>, <details>, <figcaption>
<figure>, <footer>, <header>, <main>, <mark>
<nav>, <section>, <summary>, <time>
Nov 20, 2025 503073 - Lesson 2: HTML 74
HTML5 Media Elements
<audio>: embed audio files.
<video>: embed video files.
<source>: specify multiple media formats.
Nov 20, 2025 503073 - Lesson 2: HTML 75
HTML5 Form Enhancements
New input types: email, date, number, range, color.
Attributes: placeholder, required, autofocus.
Benefit: Built-in validation, better user experience.
Nov 20, 2025 503073 - Lesson 2: HTML 76
HTML5 Graphics & APIs
<canvas>: draw graphics with JavaScript.
<svg>: scalable vector graphics.
APIs introduced in HTML5: Geolocation, Local Storage, Drag
& Drop.
Nov 20, 2025 503073 - Lesson 2: HTML 77
HTML & HTML5 Recap
HTML Basics: page structure, tags & attributes
Core Elements: headings, paragraphs, links, images, lists, tables, forms
Forms: collect user input and submit data to a server
Block vs Inline: difference in display behavior
HTML5: semantic tags, audio/video, new inputs, canvas & responsive
design
Nov 20, 2025 503073 - Lesson 2: HTML 78