Hyper Text Markup
Language (HTML)
HTML Lists
- HTML lists allow web developers to group a set
of related items in lists.
<h2>An Unordered HTML
List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML
List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li> By: Engr. Richard P. Cabales
HTML Description Lists
- A description list is a list of terms, with a
description of each term.
- The <dl> tag defines the description list, the
<dt> tag defines the term (name), and the <dd>
tag describes each term:
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot
drink</dd>
<dt>Milk</dt>
<dd>- white cold
drink</dd>
</dl>
By: Engr. Richard P. Cabales
HTML Unordered Lists
- The HTML <ul> tag defines an unordered
(bulleted) list.
- Each list item starts with the <li> tag.
- The list items will be marked with bullets (small
black circles) by default:
<h2>An unordered HTML
list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
By: Engr. Richard P. Cabales
HTML Unordered Lists -
Marker
- The CSS list-style-type property is used to
define the style of the list item marker.
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
By: Engr. Richard P. Cabales
Nested HTML Lists
- Lists can be nested (list inside list):
<h2>A Nested List</h2>
<p>Lists can be nested (list inside
list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
By: Engr. Richard P. Cabales
Horizontal List with CSS
- HTML lists can be styled in many different ways
with CSS.
- One popular way is to style a list horizontally, to
create a navigation menu:
By: Engr. Richard P. Cabales
Horizontal List with CSS
<style> <h2>Navigation Menu</h2>
ul { <p>In this example, we use CSS to
list-style-type: none; style the list horizontally, to
margin: 0; create a navigation menu:</p>
padding: 0;
overflow: hidden; <ul>
background-color: #333333; <li><a href="#home">Home</a></li>
} <li><a href="#news">News</a></li>
<li><a
li { href="#contact">Contact</a></li>
float: left; <li><a
} href="#about">About</a></li>
</ul>
li a {
display: block;
color: white; By: Engr. Richard P. Cabales
HTML Ordered Lists
- The HTML <ol> tag defines an ordered list. An
ordered list can be numerical or alphabetical.
- Each list item starts with the <li> tag.
- The list items will be marked with numbers by
default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
By: Engr. Richard P. Cabales
Ordered HTML List - The Type
Attribute
- The type attribute of the <ol> tag, defines the
type of the list item marker:
By: Engr. Richard P. Cabales
Ordered HTML List - The Type
Attribute
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
By: Engr. Richard P. Cabales
Control List Counting
- By default, an ordered list will start counting from
1. If you want to start counting from a specified
number, you can use the start attribute:
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
By: Engr. Richard P. Cabales
Nested HTML Lists
- Lists can be nested (list inside list):
<h2>A Nested List</h2>
<p>Lists can be nested (list inside
list):</p>
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
By: Engr. Richard P. Cabales
HTML Block and Inline
Elements
- Every HTML element has a default display value,
depending on what type of element it is.
- There are two display values: block and inline.
By: Engr. Richard P. Cabales
Block-level Elements
- A block-level element always starts on a new
line, and the browsers automatically add some
space (a margin) before and after the element.
- A block-level element always takes up the full
width available (stretches out to the left and
right as far as it can).
- Commonly used block elements are
• <p>
• <div>
By: Engr. Richard P. Cabales
Block-level Elements
- Commonly used block elements are
• <p>
• <div>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello
World</div>
<p>The P and the DIV elements are both block
elements, and they will always start on a new line
and take up the full width available (stretches
out to the left and right as far as it can).</p>
By: Engr. Richard P. Cabales
Here are the block-level
elements in HTML:
By: Engr. Richard P. Cabales
Inline Elements
- An inline element does not start on a new line.
- An inline element only takes up as much width
as necessary.
<p>This is an inline span <span style="border: 1px
solid black">Hello World</span> element inside a
paragraph.</p>
<p>The SPAN element is an inline element, and will
not start on a new line and only takes up as much
width as necessary.</p>
By: Engr. Richard P. Cabales
Here are the inline elements
in HTML:
By: Engr. Richard P. Cabales
The <div> Element
- The <div> element is often used as a container
for other HTML elements.
- The <div> element has no required attributes,
but style, class and id are common.
- When used together with CSS, the <div>
element can be used to style blocks of content:
By: Engr. Richard P. Cabales
The <div> Element
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan area
of over 13 million inhabitants.</p>
</div>
By: Engr. Richard P. Cabales
The <span> Element
- The <span> element is an inline container used
to mark up a part of a text, or a part of a
document.
- The <span> element has no required attributes,
but style, class and id are common.
<p>My mother has <span style="color:blue;font-
weight:bold;">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-weight:bold;">dark
green</span> eyes.</p>
By: Engr. Richard P. Cabales
HTML class Attribute
- The HTML class attribute is used to specify a
class for an HTML element.
- Multiple HTML elements can share the same
class.
- The class attribute is often used to point to a
class name in a style sheet. It can also be used
by a JavaScript to access and manipulate
elements with the specific class name.
By: Engr. Richard P. Cabales
HTML class Attribute
<div class="city">
<h2>London</h2>
<p>London is the
<style> capital of England.</p>
.city { </div>
background-
color: tomato; <div class="city">
color: white; <h2>Paris</h2>
border: 2px solid <p>Paris is the capital
black; of France.</p>
margin: 20px; </div>
padding: 20px;
} <div class="city2">
.city2 <h2>Tokyo</h2>
{ <p>Tokyo is the capital
background- of Japan.</p>
color: green; </div>
color: white;
border: 2px solid
black; By: Engr. Richard P. Cabales
HTML class Attribute
<h1>My <span class="note"
<style>
>Important</
.note {
span> Heading</h1>
font-size: 120%;
<p>This is
color: red;
some <span class="note">i
}
mportant</span> text.</p>
</style>
By: Engr. Richard P. Cabales
The Syntax For Class
- To create a class; write a period (.) character,
followed by a class name. Then, define the CSS
properties within curly braces {}:
<h2 class="city">London</h2>
<style> <p>London is the capital of
.city { England.</p>
background-
color: tomato; <h2 class="city">Paris</h2>
color: white; <p>Paris is the capital of
padding: 10px; France.</p>
}
</style> <h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of
Japan.</p>
By: Engr. Richard P. Cabales
Multiple Classes
- HTML elements can belong to more than one class.
- To define multiple classes, separate the class
names with a space, e.g. <div class="city main">.
The element will be styled according to all the
classes specified.
<style>
.city {
<h2 class="city
background-color:
main">London</h2>
tomato;
<h2 class="city">Paris</h2>
color: white;
<h2 class="city">Tokyo</h2>
padding: 10px;
}
.main {
text-align: center;
}
</style> By: Engr. Richard P. Cabales
Different Elements Can Share
Same Class
- Different HTML elements can point to the same
class name.
<style>
.city {
background-color: <h2 class="city">Paris</
tomato; h2>
color: white; <p class="city">Paris is
padding: 10px; the capital of France</p>
}
</style>
By: Engr. Richard P. Cabales
Use of The class Attribute in
JavaScript
- The class name can also be used <script>
function myFunction() {
by JavaScript to perform certain var x
= document.getElementsByC
tasks for specific elements. lassName("city");
for (var i = 0; i <
- JavaScript can access elements x.length; i++) {
with a specific class name with x[i].style.display = "non
the getElementsByClassName() e";
}
method: }
</script>
By: Engr. Richard P. Cabales
HTML id Attribute
- The HTML id attribute is used to specify a unique id
for an HTML element.
- The value of the id attribute must be unique
within the HTML document.
- You cannot have more than one element with the
same id in an HTML document.
By: Engr. Richard P. Cabales
HTML id Attribute - Syntax
- The syntax for id is: write a hash character (#),
followed by an id name. Then, define the CSS
properties within curly braces {}.
<style>
#myHeader {
background- <h1 id="myHeader">My
color: lightblue; Header</h1>
color: black;
padding: 40px;
text-align: center;
}
By: Engr. Richard P. Cabales
Difference Between Class and
ID
- A class name can be used by multiple HTML
elements, while an id name must only be used by
one HTML element within the page:
By: Engr. Richard P. Cabales
Difference Between Class and
<style>
ID
/* Style the element with the id
"myHeader" */
<!-- An element with a unique id
-->
<h1 id="myHeader">My Cities</h1>
#myHeader {
background-color: lightblue; <!-- Multiple elements with same
color: black; class -->
padding: 40px; <h2 class="city">London</h2>
text-align: center; <p>London is the capital of
} England.</p>
/* Style all elements with the class name <h2 class="city">Paris</h2>
"city" */ <p>Paris is the capital of
.city { France.</p>
background-color: tomato;
color: white; <h2 class="city">Tokyo</h2>
padding: 10px; <p>Tokyo is the capital of
} Japan.</p>
</style>
By: Engr. Richard P. Cabales
Difference Between Class and
ID
- A class name can be used
by multiple HTML
elements, while an id name
must only be used by one
HTML element within the
page:
By: Engr. Richard P. Cabales
HTML Bookmarks with ID and
Links
- HTML bookmarks are used to allow readers to
jump to specific parts of a webpage.
- Bookmarks can be useful if your page is very long.
<h2 id="C4">Chapter
4</h2>
<a href="#C4">Jump to Chapter
4</a>
Or, add a link to the bookmark ("Jump to Chapter 4"),
from another page:
<a href="html_demo.html#C4">Jump to Chapter
4</a>
By: Engr. Richard P. Cabales
Using The id Attribute in
JavaScript
- The id attribute can also be used by JavaScript to
perform some tasks for that specific element.
- JavaScript can access an element with a specific id
with the getElementById() method:
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice
day!";
}
</script>
By: Engr. Richard P. Cabales
