Listing, Image, Hyperlink,
Table
Web application with HTML and CSS
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 1
Lesson Objectives
▪ Listing
▪ Image
▪ Hyperlink
▪ Table
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 2
Section 1
LISTING
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 3
Listing
➢ HTML Lists: Are used to present list of information in well formed and
semantic way.
➢ There are three different types of list in HTML and each one has a specific
purpose and meaning.
▪ Unordered list — Used to create a list of related items, in no particular
order.
▪ Ordered list — Used to create a list of related items, in a specific order.
▪ Description list — Used to create a list of terms and their descriptions.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 4
Unordered list
➢ Unordered list
Output
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 5
Order list
➢ Order list
Output
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 6
Description list
➢ Description list
Output
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 7
Nesting list
➢ Nesting list: List can be nested (lists inside lists):
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 8
Practice
CREATE LIST PRODUCTS
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 9
Section 2
IMAGE, HYPERLINK
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 10
Image
➢ Image: <img> element used to embed a simple image in a webpage.
➢ Attributes
▪ src: Specifies the URL of an image
▪ alt: Specifies an alternate text for an image
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 11
URL & Path
➢ URL (Uniform Resource Locator): A string of text that
defines where something is located on the Web.
➢ Path: URLs use paths to find files. Paths specify where in
the filesystem the file you need is located.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 12
URL & Path
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 13
URL & Path
➢ Absolute URL: Points to a location defined by its
absolute location on the web, including protocol and
domain name.
▪ An absolute URL will always point to the same location, no matter where
it is used.
➢ Relative URL: Points to a location that is relative to the
file you are linking from.
▪ A relative URL will point to different places depending on the actual
location of the file you refer from
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 14
Folder and Subfolders
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 15
Hyperlink
➢ The <a> tag defines a hyperlink, which is used to link from one page to
another.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 16
Title and Image
➢ The title attribute: Specifies extra information about an
element. The information is most often shown as a tooltip
text when the mouse moves over the element.
➢ Block level link: A link can wrap any content, even block
level elements, like that
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 17
Link to part of HTML
➢ Link to part of HTML:
▪ Add an id attribute to your anchor element to give a name to the section
of the page.
▪ Create a hyperlink using the id of the link target, preceded by #.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 18
E-mail links
➢ Email link: Open a new outgoing email message instead of linking to a
resource or page.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 19
E-mail links
➢ Email link: Open a new outgoing email message instead of linking to a
resource or page.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 20
Practice
LINK IN MENU
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 21
Section 3
TABLE
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 22
HMTL Table
➢ Table: A structured set of data made up of rows and columns (tabular data).
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 23
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.
▪ By default, the text in <th> elements are bold and centered.
▪ By default, the text in <td> elements are regular and left-
aligned.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 24
HMTL Table
➢ Attributes:
▪ Align: This enumerated attribute indicates how the table must be aligned
inside the containing document. It may have the following values: (letf,
center, right)
▪ Bgcolor: Specifies the background color of the table.
▪ Border: This integer attribute defines, in pixels, the size of the frame
surrounding the table. If set to 0, the frame attribute is set to void.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 25
HMTL Table
➢ Attributes:
▪ border-collapse: Sets whether the table borders should be collapsed into
a single border
▪ padding: Control the space between the border and the content in a table
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 26
Table Caption
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 27
Cell that Spans Many Columns
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 28
Cell that Spans Many Rows
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 29
HTML Table Tags
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 30
Practice
CREATE TABLE
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 31
Create table
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 32
Lesson Summary
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 33
Thank you
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 34
