Scribd
Upload
17 views

CHAPTER 2 - HTML - Elements and Lists

The document discusses HTML elements and attributes. It explains basic HTML tags like paragraphs and headings. It also covers lists, both ordered and unordered. The document then discusses common attributes that can be applied to elements like ID, title, class and style.

Uploaded by

Yojin Maru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

CHAPTER 2 - HTML - Elements and Lists

The document discusses HTML elements and attributes. It explains basic HTML tags like paragraphs and headings. It also covers lists, both ordered and unordered. The document then discusses common attributes that can be applied to elements like ID, title, class and style.

Uploaded by

Yojin Maru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Web Page Programming (Using HTML and JavaScript)

Chapter 2 HTML – Elements and Lists


An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the
element name is preceded by a forward slash as shown below with few tags:

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some HTML elements which
don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are known as void elements.

HTML documents consists of a tree of these elements and they specify how HTML documents should be built, and what
kind of content should be placed in what part of an HTML document.

Nested HTML Elements


It is very much allowed to keep one HTML element inside another HTML element:

<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>

1|Page
Web Page Programming (Using HTML and JavaScript)
Invisible Comments and Background
Invisible Comments
Aside from white spaces, there are other things your Web browser ignores, these are comments. Since they will not be
displayed by the browser, comments can be used to put significant statements and/or remarks that you do not want to be
displayed. The comment tag is a container tag that uses <!-- as a starting tag and --> as an ending tag.

Example:
<!--
This is my comment which will not be displayed on the page.
-->

Changing the Background Color of a Page


You can change the background color of the page by using the bgcolor attribute

<body bgcolor=”value”>…</body>

2|Page
Web Page Programming (Using HTML and JavaScript)
Lists
When you want to present data in an enumerated format, you actually list them, right? In HTML, you can display
information in list formats using the list tags.
Ordered List
The first type of list is the ordered list or more known as the numbered list. This is the type of list where each item is
numbered usually starting at 1 (but can be changed using the start attribute). The ordered list uses the container tag
<ol></ol>. Each item in this list is specified by the empty tag <li>.
The ordered list has different types of numbering and can be specified by keying the specified value for the type
attribute: ❖ 1 for regular numbering (1, 2, 3, 4, etc.)
❖ a for lowercase alphabet (a, b, c, d, etc.)
❖ A for uppercase alphabet (A, B, C, D, etc.)
❖ i for lowercase Roman Numeral (i, ii, iii, iv, etc.)
❖ I for uppercase Roman Numeral (I, II, III, IV, etc.)

ATTRIBUTE NAME DEFINITION EXAMPLAE type Indicates the type of numbering to be used in the list <ol
type=’A’></ol> start Indicates the value or number of the first item in the list <ol type=’1’ start=’3’></ol> The values
of these attributes are enclosed in single quotes.

3|Page
Web Page Programming (Using HTML and JavaScript)
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h3>Types of Colors</h3>
<ol>
<li>Primary
<li>Secondary
<li>Tertiary
</ol>
<h3>Classroom Officers</h3>
<ol>
<li>President
<li>Vice-President
<li>Secretary
</ol>
<h3>College of Computer Studies</h3>
<ol>
<li>BSCS
<li>BSIT
<li>BSIS
<li>ACT
</ol>
</body>
</html>

4|Page
Web Page Programming (Using HTML and JavaScript)
Unordered List
If there’s an ordered or numbered type of list, there is also an unordered type of list. This type of list that enumerates ea ch
item is not numbered but rather bulleted and uses the container tag <ul></ul>. Like the ordered list, each item in this list is
specified by the empty tag <li>.
The unordered list has different types of bullet to be used and can be specified by keying the specified value for the type
attribute:
❖ disc for round bullets, for example <ul type=”disk”>
❖ circle for circular bullets, for example <ul type=”circle”>
❖ square for square bullets, for example <ul type=”square”>

5|Page
Web Page Programming (Using HTML and JavaScript)
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h3>Types of Colors</h3>
<ul>
<li>Primary
<li>Secondary
<li>Tertiary
</ul>
<h3>Classroom Officers</h3>
<ul type="circle">
<li>President
<li>Vice-President
<li>Secretary
</ul>
<h3>College of Computer
Studies</h3> <ul type="square">
<li>BSCS
<li>BSIT
<li>BSIS
<li>ACT
</ul>
</body>
</html>

6|Page
Web Page Programming (Using HTML and JavaScript)
7|Page

Web Page Programming (Using HTML and JavaScript)

HTML – Attributes
We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of
information.

An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All
attributes are made up of two parts: a name and a value:
❖ The name is the property you want to set. For example, the paragraph <p> element in the example carries an
attribute whose name is align, which you can use to indicate the alignment of paragraph on the page. ❖ The value is
what you want the value of the property to be set and always put within quotations. The below example shows three
possible values of align attribute: left, center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends
lowercase attributes/attribute values in their HTML 4 recommendation.

<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right 8|Page
aligned</p> </body>
</html>
Web Page Programming (Using HTML and JavaScript)

The Core Attributes


We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and other tags.The four
core attributes that can be used on the majority of HTML elements (although not all) are:
❖ Id
❖ Title
❖ Class
❖ Style

The id Attributes
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary
reasons that you might want to use an id attribute on an element:
❖ If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content. ❖
If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to
distinguish between elements that have the same name.

We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish between two paragraph
elements as shown below.

<p id="html">This para explains what is HTML</p>


<p id="css">This para explains what is Cascading Style Sheet</p>

The title Attribute


The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id
attribute:
The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when
cursor comes over the element or while the element is loading.

9|Page
Web Page Programming (Using HTML and JavaScript)

<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title you used in your code
is coming out as a tooltip of the cursor.

The class Attribute


The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn
more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.
The value of the attribute may also be a space-separated list of class names. For example:

class="className1 className2 className3"

The style Attribute


The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

10 | P a g e
Web Page Programming (Using HTML and JavaScript)

<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
Internationalization Attributes
There are three internationalization attributes, which are available for most (although not all) XHTML
elements. ❖ dir
❖ lang
❖ xml:lang

The dir Attribute


The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can
take one of two values, as you can see in the table that follows:

<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>
11 | P a g e
Web Page Programming (Using HTML and JavaScript)

When dir attribute is used within the tag, it determines how text will be presented within the entire document. When used
within another tag, it controls the text's direction for just the content of that tag.
The lang Attribute
The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only
for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new
XHTML documents.
The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO
639 for a complete list of language codes.

<!DOCTYPE html>
<html lang="en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>

12 | P a g e

The xml:lang Attribute


Web Page Programming (Using HTML and JavaScript)

The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an
ISO 639 country code as mentioned in previous section.
Generics Attribute
Here's a table of some other attributes that are readily usable with many of the HTML tags.

13 | P a g e
Web Page Programming (Using HTML and JavaScript)

We will see related examples as we will proceed to study other HTML tags. For a complete list of HTML Tags and related
attributes please check reference to HTML Tags List.
14 | P a g e

You might also like