TLE REVIEWER (3rd Quarter) the <li> tag to create menu items.

- The <menu> tag is an alternative to

LESSON 1: HTML Lists
the <ul> tag and browsers will treat
List – HTML Lists allow web these two lists EQUALLY.
developers to group a set of related
- Example: menu list of a restaurant
items in lists.
5. Directory List <DIR>
5 Types of List:
- The <dir> tag was used in HTML 4 to
1. Unordered HTML List <UL> list directory titles.
- Starts with the <UL> tag.
- Examples: organization hierarchies,
- Each list item starts with the <Li>
organizational file structure, personal
tag.
file organization, website structure,
- The list items will be marked with
research data organization
bullets by default.
START specifies the value at which
- Examples: recipe ingredients, to-do
the numbered list would start.
lists, shopping lists, event agenda,
features of software TYPE specifies the numbering styles.
2. Ordered HTML List <OL>
- Starts with the <OL> tag.
- The list items will be marked with
numbers by default.
- Examples: step-by-step/tutorial
instructions, class list of students,
recipe directions
- numbering styles:
1 – arabic numbers
i – lowercase roman numerals
l – uppercase roman numerals
a – lowercase alphabet
A – uppercase alphabet
3. HTML Description List <DL>
- A description list is a list of terms,
with a description of each term.
- Description list tags: <dl> -
Description list, <dt> - Defines term
(name), <dd> - Describes each term
- Examples: reviewers, product
specifications, glossary of terms
4. Menu List <MENU>
- The <menu> tag defines an
unordered list of content.
- Use the <menu> tag together with
LESSON 2: HTML Links HTML Links – Email Address
- Mailto: Inside the href attribute to
Links – Found in nearly all web pages.
create a link that opens the user’s
It allows users to click their way
email
from page to page.
HTML Links – Button
HTML Links (Hyperlinks) – You can
- To use an HTML button as a link, you
click on a link and jump to another
have to add some JavaScript code.
document. When you move the mouse
over a link, the mouse arrow will turn - JavaScript allows you to specify
into a little hand. what happens at certain events, such
- NOTE: A link does not have to be a as a click of a button.
text. A link can be an image or any
Creating/Using Bookmark:
other HTML element.
Function – Known as anchor tag.
HTML Links – Syntax - <a> tag
Creates a hyperlink on a web page.
defines a hyperlink.
Attribute: NAME – create bookmark
Syntax: <a href = “url”>link text </a>
within the document.
How Links Will Appear:
Href – Specifies relative and absolute
1. Unvisited Link – Underlined blue hyperlink reference. To access
2. Visited Link – Underlined purple bookmark, place “#” symbol before
3. Active Link – Underlined red the name assigned as bookmark.
HTML Links – The Target Attribute – Steps:
By default, the linked page will be
1. Use the id attribute to create a
displayed in the current browser
bookmark
window. To change this, you must
2. Add a link to the bookmark from
specify another target for the link.
within the same page
Target Attribute – Specifies where to
Note:
open the linked document.
- Use the ID Attribute to define
Types of Target Attribute:
bookmarks in a page
1. _self – Default. Opens the - Use the Href Attribute to link to the
document in the same window/tab as bookmark
it was clicked.
2. _blank – Opens the document in a
new window or tab.
3. _parent – Opens the document in
the parent frame.
4. _top – Opens the document in the
full body of the window
HTML Links – Image as Link
- To use an image as a link, just put the
<img> tag inside the <a> tag.
LESSON 3: HTML Images Common Image Formats:
HTML Images – Images can improve APNG – Animated Portable Network
the design and the appearance of a Graphics
web page. GIF – Graphics Interchange Format
ICO – Microsoft Icon
HTML Images Syntax:
JPEG – Joint Photographic Expert
- <img> tag is used to embed an
Group Image
image in a web page.
PNG – Portable Network Graphics
- Images are not technically inserted
SVG – Scalable Vector Graphics
into a web page; images are linked to
WebP – Web Picture Format
web pages. The <img> tag creates a
holding space for the referenced
image.
Note: <img> tag is EMPTY, it contains
attributes only, and does not have a
closing tag.
<img> tag has two required attributes:
Src – specifies the path to the image
Alt – specifies an alternate text for
the image
Syntax: <img src=”url”
alt=”alternatetext”>
Images in another folder- If you have
your images in a sub-folder, you must
include the folder name in the src
attribute.
Images on another server/website –
Some web sites point to an image on
another server. To point to an image on
another server, you must specify an
absolute (full) URL in the src attribute.
Animated Images – HTML allows
animated GIFs
Image as a Link – To use an image as
a link, put the <img> tag inside the <a>
tag.
Image Floating – Use the CSS float
property to let the image float to t he
right or to the lieft of a text.
LESSON 4: HTML Tables space is between
the cell wall and the
contents of the cell
HTML Tables – Allows web WIDTH Defines the width of <TABLE WIDTH
developers to arrange data into rows the table cells in
pixels or as
= N>…</TABLE>

and columns. Is used to create percentage of the

container’s width
tabular data. Consists of table cells BACKGR Specifies the <TABLE
inside rows and columns. OUND graphic to be used BACKGROUND
as background =
“pathname/filena
Element Description Syntax me”>…<TABLE>
ROWS Used to define <TR>text</TR> BGCOLO Specifies the color <TABLE
the rows of R to be used as BGCOLOR =
background “#value”>…</TA
your table BLE>
DATA Used to define <TD>text</TD>
CELLS the table cell Attributes of the <TD>…</TD> tag
data or the
columns Attribute Description Syntax
COLSPAN Merges the <TD COLSPAN =
specified n>…</TD>
Table Cells – Each table cell is number of
columns
defined by a <td> and a </td> tag. ROWSPAN Merges the <TD ROWSPAN
specified = n>…</TD>
- Td stands for table data. number of rows
BACKGROU Specifies the <TD
ND graphic to be BACKGROUND
- Everything between <td> and </td> used as =
are the content of the table cell. background “pathname/filena
me”>…</TD>
BGCOLOR Specifies the <TD BGCOLOR
- NOTE: A table cell CAN contain ALL color to be used =
sorts of HTML elements: text, images, as background “#value”>…</TD
>
lists, links, other tables, etc.
Table Rows – Each table row starts
with a <tr> and ends with a </tr> tag.
- Tr stands for table row.
- You can have as many rows as you
like in a table; just make sure that the
number of cells are the same in each
row.
- NOTE: There are times when a row
can have LESS OR MORE CELLS
than another.
Attributes Description Syntax
BORDER Defines the line <TABLE
weight of the BORDER =
border around the N>…</TABLE>
table cells
CELLSPA Defines the <TABLE
CING horizontal spacing CELLSPACING
between adjacent = N>…</TABLE>
cells, and specifies
how much space is
between cells.
CELLPAD Defines the vertical <TABLE
DING spacing between CELLPADDING
adjacent cells and = N>…</TABLE>
specifies how much
LESSON 4: HTML Frames
HTML Frames – Multiple regions on
the browser. It is used to display more
than one HTML on the same browser
window. Frames are inserted within the
<FRAMESET>…</FRAMESET> tag.
- The <FRAMESET> tag replaces the
<BODY> in the structure of the HTML
document.
Size of Frame – Can be represented
by either relative or absolute
measurement.
- The asterisk (*) is used to indicate
that the next row or column will occupy
the remaining space of the browser
window.
Frameset – Frames are created by
defining elements on the frameset
document. A frameset document is an
HTML document that replaces the
<body> tag with the <frameset> tag.
<frameset> - container of the frames
to be displayed on the browser
window.
<frame> - the element that defines the
HTML document that will be displayed
on a specific region of the browser
window.
Advantages in using HTML frame:
1. Display multiple pages on the same
window.
2. Keep some content static while
other parts of the page changes.
3. When seamless frames are applied,
it can create the illusion of a single
page with dynamically changing
content.
Disadvantages in using HTML frames:
1. Frame-based site are sometimes
ignored by search engines.
2. Frames can have navigation
problems of the used has accessed
the HTML document contained in the
frames instead of accessing the
frameset document.
3. Some old browsers do not support
frames.
4. If added too much frames it could
crash, glitch, or lag.
Attributes in frameset:
Rows – specifies the layout of
horizontal frames.
Cols – specifies the layout of vertical
frames.
Id, class – document wide identifiers.
Title – element title
Style – inline style information
Name – assigns a name to the
current frame. This name may be
used as the target of subsequent links.
Longdesc – Specifies a link to a long
description of the frame.
Src – specifies the location of the
initial contents to be contained in the
frame.
Noresize – this boolean attribute tells
the user agent that the frame window
must not be resizeable.
Scrolling - specifies scroll information
for the frame window.
AUTO – This value tells the user agent
to provide scrolling devices for the
frame window when necessary. This is
the default value.
YES – Always provide scrolling
devices for the frame window.
NO – Not to provide scrolling devices
for the frame window.
Frameborder – provides the user
agent with information about the
frame border.
Marginwidth – Amount of space to be
left between the frame’s contents in its
left and right margins.
Marginheight – Amount of space to
be left between the frame’s contents in
its top and bottom margins.
Title – element title
style – inline style information
id, class – document wide identifiers
Iframes – Used to display a web page
within a web page.
Syntax: <iframe src=”url”
title=”description”></iframe>