Part 1: HTML Language
1 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Overview
2 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Introduction
HTML = HyperText Markup Language
Hypertext: text document displayed with references
(hyperlinks) to other documents
Markup Language: a computer language using tags to define
elements within a document
Language of the web
History
1989: First version proposed by Tim Berners-Lee along with
WWW
1995: HTML 2
1997: HTML 3, HTML 4
2014: HTML 5
3 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
General Notes
Plain text files, with extension .htm or .html
HTML is case-insensitive, meaning that either upper or
lower case may be used
4 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Working Environment Setup
5 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Working Environment
Working with browsers:
Chrome
Working with editors:
Notepad
Notepad++
VS Code
6 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
HTML Basics
7 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
First-Page.html
<!doctype html>
<html>
<head>
<title>My First HTML Page</title>
</head>
opening tag closing tag
<body>
<p>This is 1st paragraph...</p>
<p>This is 2nd paragraph...</p>
</body>
</html>
8 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Hierarchy of Elements
<!doctype html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is 1st paragraph...</p>
<p>This is 2nd paragraph...</p>
</body>
</html>
descendants
children
html
head body
ancestors
parent
title p p
siblings
9 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Formatting Tags
<p>This text is <em>emphasized</em></p>
<p>This text is <strong>strong</strong></p>
<p>This text is both
<strong><em>strong and emphasized</em></strong>
</p>
<p>This paragraph has a<br />
new line</p>
self-closing tag
Try some other tags: <b>, <i>, <u>, <small>, <big>,
<sub>, <sup>, <del>, <ins>, <mark>, <pre>
10 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Element Nesting
To properly construct a hierarchy of elements, the
browser expects each element to be properly nested: a
child’s ending tag must occur before its parent’s ending
tag Correct Nesting
<h1>Share Your <strong>Travels</strong></h1>
<h1>Share Your <strong>Travels</h1></strong>
Incorrect Nesting
11 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Images
<img src="picture.png"
width="200"
alt="Alternate text" />
12 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Elements and Attributes
Opening Tag Closing Tag
<a href="http://www.centralpark.com">Central Park</a>
Element Name Attribute Content
May be text or other HTML elements
Trailing Slash
Example empty element <br />
Element Name
13 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Hyperlinks
Links are created using the <a> element (a stands for
anchor)
A link has two main parts: the destination and the label
Examples:
<a href="#section2">
Section 2
</a>
<a href="target-page.html">
Visit another page
</a>
<a href="https://www.google.com/fit/">
Google Fit
</a>
14 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Types of Links
You can use the anchor element to create a wide range of
links:
Links to external sites (or to individual resources such as
images or movies on an external site)
Links to other pages or resources within the current site
Links to downloadable resources
Links to other places within the current page
Links to particular locations on another page
Links that are instructions to the browser to start the user’s
email program
Links that are instructions to the browser to execute a
JavaScript function
15 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
More Examples of Links
Link to external site
<a href="http://www.centralpark.com">Central Park</a>
Link to resource on external site
<a href="http://www.centralpark.com/logo.gif">Central Park</a>
Link to another page on same site as this page
<a href="index.html">Home</a>
Link to another place on the same page
<a href="#top">Go to Top of Document</a>
Link to specific place on another page
<a href="productX.html#reviews">Reviews for product X</a>
Link to email
<a href="mailto://person@somewhere.com">Someone</a>
Link to javascript function
<a href="javascript://OpenAnnoyingPopup();">See This</a>
Link to telephone (automatically dials the number
when user clicks on it using a smartphone browser)
<a href="tel:+18009220579">Call toll free (800) 922-0579</a>
16 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
URL Absolute Referencing
When referencing a page or resource on an external site,
a full absolute reference is required:
the protocol (typically, http:// or https://)
the domain name
any paths
the file name of the desired resource
17 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
URL Relative Referencing
We also need to be able to successfully reference files
within our site
When referencing a resource that is on the same server
as your HTML document, then you can use briefer relative
referencing. If the URL does not include the “http://” or
“https://” then the browser will request the current
server for the file
The pathname tells the browser where to locate the file
on the server
Forward slashes (“/”) are used to separate directory names
from each other and from file names
Double-periods (“..”) are used to reference a directory “above”
the current one in the directory tree
18 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
URL Relative Referencing
Share-Your-Travels
Relative Link Type Example
/ (root folder) 1 Same Directory To link to example.html from
about.html (in Figure 2.18), use:
index.html To link to a file within the same
<a href="example.html">
folder, simply use the file name.
about.html
2 Child Directory To link to logo.gif from about.html,
1 7
example.html use:
To link to a file within a subdirectory,
<a href="images/logo.gif">
images/ use the name of the subdirectory
2 and a slash before the file name.
logo.gif Grandchild/Descendant To link to background.gif from
3 Directory about.html, use:
central-park.jpg
<a
To link to a file that is multiple
css/ href="css/images/background.g
subdirectories below the current
if">
main.css one, construct the full path by
including each subdirectory name
images/ (separated by slashes) before the file
3
name.
background.gif
4 Parent/Ancestor Directory To link to about.html from
members/ index.html in members, use:
4 5 Use “../” to reference a folder
<a href="../about.html">
index.html above the current one. If trying to
reference a file several levels above To link to about.html from
randyc/
6
the current one, simply string bio.html, use:
bio.html together multiple “../”.
<a href="../../about.html">
19 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
URL Relative Referencing
5 Sibling Directory To link to logo.gif from index.html in
Share-Your-Travels
members, use:
/ (root folder)
Use “../”to move up to the appropriate
<a href="../images/about.html">
level, and then use the same technique as
index.html
for child or grandchild directories. To link to background.gif from bio.html,
use:
about.html
1 7 <a
example.html href="../../css/images/background.gi
6 f">
images/ Root Reference To link to about.html from bio.html, use:
2
logo.gif <a href="/about.html">
An alternative approach for ancestor and
central-park.jpg sibling references is to use the so-called To link to background.gif from bio.html,
root reference approach. In this approach, use:
css/ begin the reference with the root reference
<a href="/images/background.gif">
(the “/”) and then use the same technique
main.css
as for child or grandchild directories. Note
that these will only work on the server!
images/
That is, they will not work when you test it
3
background.gif 7 out on your local machine.
Default Document To link to index.html in members from
members/
about.html, use either:
4 5 Web servers allow references to directory
index.html <a href="members">
names without file names. In such a case,
randyc/ the web server will serve the default Or
6 document, which is usually a file called
<a href="/members">
bio.html
index.html (apache) or default.html
(IIS). Again, this will only generally work on
20 the web server.
AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
A More Complete Document
1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
21 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
!doctype
Tells the browser (or any other client software) what type
of document it is about to process
Because the browser is capable to process other types: svg,
xml,…
Notice that it does not indicate what version of HTML is
contained within the document: it only specifies that it
contains HTML
22 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<html>, <head>, <body>
HTML5 does not require the use of the <html>,
<head>, and <body>
However, in XHTML they were required, and most web
authors continue to use them
It is also a good practice to use them
The <html> element is sometimes called the root
element as it contains all the other HTML elements in the
document
The <head> contains descriptive elements about the
document
The <body> contains content that will be displayed by
the browser
23 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Inside <head>
Notice that the <head> element contains a variety of
additional elements
The <meta> element in the example declares that the
character encoding for the document is UTF-8
The <link> specifies an external CSS stylesheet file that is
used with this document
➔ to be studied in Part 2
The <script> references an external JavaScript file
➔ to be studied in Part 3
24 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Another Example…
<body>
<h1>Share Your Travels</h1>
1
<h2>New York - Central Park</h2>
2 <p>Photo by Randy Connolly</p>
<p>This photo of Conservatory Pond in
<a href="http://www.centralpark.com/">Central Park</a> 3
New York City was taken on October 22, 2011 with a
<strong>Canon EOS 30D</strong> camera.
</p> 4
5 <img src="images/central-park.jpg" alt="Central Park" />
<h3>Reviews</h3>
6 <div> 7
<p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<div>
<p>By Susan on <time>October 1, 2012</time></p>
<p>I love Central Park.</p>
</div>
8
<p><small>Copyright © 2012 Share Your Travels</small></p>
</body> 9
25 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Paragraphs: <p>
Paragraphs are the most basic unit of text in an HTML
document
Notice that the <p> tag is a container and can contain
HTML and other inline HTML elements
Inline HTML elements refers to HTML elements that do
not cause a paragraph break but are part of the regular
“flow” of the text
26 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Divisions: <div>
This <div> tag is also a container element and is used to
create a logical grouping of content
The <div> element has no intrinsic presentation
It is frequently used in contemporary CSS-based layouts
to mark out sections
27 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
More HTML Elements
28 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Audios: <audio>
<audio controls>
<source src="Kalimba.mp3" type="audio/mpeg" />
</audio>
More attributes: autoplay, loop, muted, preload,
src
29 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Videos: <video>
<video width="500" height="300" controls>
<source src="compile.mp4" type="video/mp4" />
</video>
More attributes: autoplay, loop, muted, preload,
src, poster
30 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Inline Frames: <iframe>
Used to display external objects including other
webpages within a webpage
The content inside an iframe exists entirely independent
from the surrounding elements
Ex:
<iframe src="hello.html" width="400"
height="200"></iframe>
31 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Block and Inline Elements
Block elements add a line break before and after them
Ex: <div>, <table>, <hr>, headings, lists, <p>…
Inline elements don’t break the text before and after
them
Useful for modifying a specific portion of text
Ex: <span>, <a>, <em>, <strong>, <b>, <img>,
<audio>, <video>, <iframe>…
32 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Character Entities
Special characters for symbols for which there is either no
way easy way to type in via a keyboard (such as the
copyright symbol or accented characters) or which have a
reserved meaning in HTML (for instance the “<” or “>”
symbols)
They can be used in an HTML document by using the
entity name or the entity number
Ex:
©
>
<
33 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Comments
Pieces of code which is ignored by any web browser
It is a good practice to add comments, to indicate sections
of a document, and any other notes to anyone looking at
the code
HTML comments are placed in between <!-- ... -->
tags
Ex:
<!-- Comment text
can span through as many as
lines you like -->
34 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
XHTML vs. HTML
XHTML is stricter than HTML
Tags and attribute names must be in
lowercase
All tags must be closed (<br/>, <img/>)
while HTML allows <br>, <img> and implies
missing closing tags (<p>par1 <p>par2)
XHTML allows only one root <html>
element (HTML allows more than one)
Many element attributes are deprecated
in XHTML, most are moved to CSS
Attribute minimization is forbidden, e.g.
<input type="checkbox" checked>
<input type="checkbox" checked="checked" />
Note: Browsers load XHTML faster than HTML and valid code
faster than invalid!
35 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Headings
36 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Headings
HTML provides 6 levels of heading (<h1>, <h2>,
<h3>,…, <h6>), with the higher heading number
indicating a heading of less importance
Headings are an essential way for document authors use
to show their readers the structure of the document
Good practice:
Don’t use headings to make your text look BIG or bold; use
them only for highlighting the heading of your document and
to show the document structure
Search engines use headings to index the structure and
content of the web pages so use them very wisely in your
webpage
37 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Example
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
38 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Lists
39 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Lists
Unordered lists: Collections of items in no particular
order; these are by default rendered by the browser as a
bulleted list
Ordered lists: Collections of items that have a set order;
these are by default rendered by the browser as a
numbered list
Definition lists: Collection of name and definition pairs
(Ex: FAQ list)
40 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Unordered Lists
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
circle, disc, square, none
<ul style="list-style-type:square">
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
41 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Ordered Lists
<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ol>
lower-alpha, lower-greek, lower-latin, lower-roman,
upper-alpha, upper-greek, upper-latin, upper-roman,
decimal
<ol start="10" style="list-style-type:upper-roman">
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ol>
42 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Definition Lists
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
43 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
Create HTML pages presenting the following contents:
44 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Tables
45 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Definitions
A table is a matrix formed by the intersection of horizontal
rows and vertical columns
Column 1 Column 2 Column 3 Column 4
Row 1
Row 2 cell
Row 3
The intersection of a column and row is called a cell
46 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<table>, <tr>, <th>, <td>
HTML expects everything between <table> and
</table> to be part of the table
<tr>: a row container
Within each row container, each cell is defined by either table
header <th>, or table data <td>
<th> is for table header, having exactly the same output as
the combination: <td><center><b>
<td> is for ordinary table data
47 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
colspan, rowspan Attributes
colspan="x": forces the cell to cover x columns
(default = 1)
Ex:
<td colspan="3"> . . . </td>
rowspan="y": forces the cell to cover y rows (default =
1)
Ex:
<td rowspan="2"> . . . </td>
48 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Other Table Options
<thead> defines a header section, contains <tr>
elements
If used, it MUST precede a <tbody>
<tbody> contains the usual table rows, and this should
be followed by a footer
<tfoot> defines a footer section
These three are optional unless the first is used
49 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Example
<table>
<thead>
<tr> <th colspan="3" align="center">Header</th> </tr>
</thead>
<tbody>
<tr> <th>Row Header</th> <td>Data</td> <td>Data</td> </tr>
<tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr>
</tbody>
<tfoot>
<tr> <th colspan="3" align="center">Footer</th> </tr>
</tfoot>
</table>
50 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
Create a HTML presenting the following table:
51 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Styles
52 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Inline Styles
It is possible to change the appearance and some
behaviors of elements using style attribute:
<p style="background-color:red">…</p>
Multiple style properties can be combined
<p style="color:blue; font-size:2em">…</p>
Common style properties:
color, background-color, font-family, font-
size, font-style, font-weight
text-align, vertical-align, display, float
height, width, border, margin, padding
➔ To be studied in Part 2
53 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology