Scribd
Upload
4 views

HTML Language

The document discusses HTML (Hypertext Markup Language), the main language for building web pages. It provides a brief history of HTML and notes that HTML pages are plain text files with .htm or .html extensions. It also discusses setting up a basic working environment for building web pages using browsers like Chrome and text editors like Notepad.

Uploaded by

Lunas Bin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML Language

The document discusses HTML (Hypertext Markup Language), the main language for building web pages. It provides a brief history of HTML and notes that HTML pages are plain text files with .htm or .html extensions. It also discusses setting up a basic working environment for building web pages using browsers like Chrome and text editors like Notepad.

Uploaded by

Lunas Bin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

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 &copy; 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:
 &nbsp;
 &copy;
 &gt;
 &lt;

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

You might also like