Scribd
Upload
21 views

Unit 2 - Listing, Image, Hyperlink, Table

The document discusses HTML lists, images, hyperlinks, and tables. It covers the different types of lists in HTML and how to create them. It also describes how to add images and hyperlinks to webpages, and how to make tables with HTML tags.

Uploaded by

linh nguyen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Unit 2 - Listing, Image, Hyperlink, Table

The document discusses HTML lists, images, hyperlinks, and tables. It covers the different types of lists in HTML and how to create them. It also describes how to add images and hyperlinks to webpages, and how to make tables with HTML tags.

Uploaded by

linh nguyen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

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

You might also like