Lecture 4 HTML Elements

ITU 07204: Fundamentals of Web
Technologies
Lecture 4: HTML Elements
Dr. Lupiana, D
FCIM, Institute of Finance Management
Semester 2
Agenda:
• Intro to HTML
• HTML elements
Basic Web Development Tools

• An HTML editor e.g. Dreamweaver, FrontPage
or any plain text editor like Notepad or
Notepad++
• Browser e.g. Firefox, Chrome or Internet
Explorer
1
Basic Web Development Tools
• A Web Server
– This is required if you are dealing with server-side
scripting languages such as PHP, ASP and Ruby
• File Transfer Mechanism – FTP

– In most cases it is required only when deploying
your web application to a host.
– It is used to transfer files from developer’s local
computer to a Web server of a Web hosting
company
4
HTML Basics
• A web page is created through an HTML
document
• HTML document is a text file saved with .html
or .htm file extension
HTML Basics
• An HTML document consists of two sections;
HEAD section and BODY section
<html>
<head>
</head>
<body>
</body>
</html>
6
2
HTML Basics
• The Head section provides information about
an HTML document
– It can be used to specify a title of a Web page,
style, links to other pages such JavaScript and CSS
• In the Body section is where content of a web page
is presented and organized
– It is the visible content of an HTML page
– Through the body, a web developer creates a web
page as represented by the page’s mockup
HTML Basics
• HTML document is written by HTML – Hyper
Text Markup Language
• HTML – Hyper Text Markup Language
– It is a clear text and case insensitive language
– It ignores any white space
• HTML consists of tags.

– A tag is a keyword enclosed in angle brackets <>,
used to lay out a web page.
8
HTML Basics
• HTML tags generally ‘open’ and ‘close’ – except for
single-element tags like <img>, <br> and <hr>.
• The syntax for HTML tag is as follows

<tag name> and </tag name>
Opening tag Closing tag
3
HTML Basics
• Comments are enclosed in 
• Example

<p>This is a regular paragraph</p>
10
10
HTML Elements
• HTML documents are made up of HTML
elements.
• HTML elements are made by a combination of
a start tag, end tag and content in between.
<tag name> content </tag name>
Start tag End tag
11
11
HTML Element
• The HTML element is everything from the
start HTML tag to the end HTML tag.
• HTML elements with no contents (i.e. have no
closing tag) are called empty HTML elements.
• Examples of empty HTML elements;
– <img> (for defining images)
– <br> (for inserting line break)
– <hr> (for defining an horizontal rule/line)
12
12
4
HTML Element
• Every HTML element has a default display
value, depending on what type of element it is.
• The default display value for most elements is
block or inline.
• Consequently, elements are categorized as;
– Block-level elements
– Inline elements
13
13
HTML Elements: Block-level elements

• A block-level element always starts on a new
line and takes up the full width available.
– Any element immediately after a block element
begins on a new line
14
14

• Examples of block-level elements;
– <section> (for defining a section)
– <div> (for defining a division)
– <p> (for defining a paragraph)
– <article> (for defining a subsection)
– <h1> - <h6> (for defining headings)
– <form> (for defining an HTML form)
– <table> (for defining an HTML table)
15
15
5
• Block-level elements may contain inline
elements and other block-level elements.
• However, the paragraph <p> element cannot

contain any other block-level element
(including itself).
– Thus the paragraph <p> element can only contain
texts and inline elements.
16
16
HTML Elements: Inline elements

• An inline element does not start on a new line
and only takes up as much width as necessary.
• Inline elements may contain only text and
other inline elements.
• Examples of inline elements;
– <audio> (for adding an audio)
– <a> (for defining a hyperlink)
– <img> (for adding images)
17
17
HTML Elements: Nesting of HTML Elements
• Since HTML documents are made up of many

HTML elements, nesting them is inevitable.
• Nesting simply means putting one HTML
element inside another HTML element.
• For instance, putting the paragraph <p>
element inside the division <div> element is
considered as nesting.
18
18
6
:: Rules for Nesting HTML elements
1. An inline element cannot contain a block-

level element
– For instance, you cannot define the division <div>
element inside the span <span> element.
2. A block-level element cannot contain just any

other block-level element
– This is because some are bigger than others.
– The division <div> element is at the top of
hierarchy and thus you cannot define it inside
another block-level element.
19
19
:: Rules for Nesting HTML elements
3. The paragraph <p> element cannot contain

any other block-level element (including
itself).
– Thus the paragraph element can only contain text
and inline elements.
20
20
HTML Elements: Attributes

• HTML elements can have attributes.
• An HTML attribute is an associated property of
an HTML element
– Attributes provide additional information about
an element.
– Attributes are used to extend the capability of an
HTML element.
21
21
7
• Attributes are always specified in the start tag
(in between “<” and “>” signs of the tag) and
come in name and value pairs.
• Name is the name of a property you want to
set whereas value is what you want the
attribute to be set.
• Values are written after the “=“ sign after the
name of the attribute.
22
22
• For example, the id attribute of the division

<div> element can be defined as follows;
23
23
HTML Elements: Attributes: Style

• Setting the style of an HTML element, can be
done with the style attribute.
• Unlike other attributes, the style attribute
“houses” other attributes
– The value of the style attribute is one or more
property with its value.
– A value of a property is specified after a colon and
not after an equal sign as in other attributes.
24
24
8
• For example, the style attribute of the division
<div> element can be defined as follow;
property value
25
25

• The style attribute can have more than one
attribute.
• To define more than one attribute, you simply
put a semicolon after every attribute.
26
26
HTML Elements: Attributes: Class

• With style attribute, for two or more similar
elements to have exactly the same style, the
style should be defined in each element
– This creates unnecessary redundancy.
• The class attribute allows for a single style to

be defined and used repeatedly
– That is, using the class attribute you can define a
common style for all your division <div> elements.
27
27
9
• Unlike other attributes, the class attribute
must be defined by a developer before it can
be used.
• The class attribute is defined with the <style>
element in the <head> element of an HTML
document.
28
28

• To define a class, first define the <style>
element in the <head> element.
• Inside the <style> element, specify the
element you wish to format followed by a full
stop and name of the class.
• After the class name, define the style while
enclosing it with curl brackets.
29
29

• For example, a class for the division <div>
element can be defined as follows;
30
30
10
• After you have defined the class, you can use
the class to change the style of relevant HTML
elements.
• To use the defined class, when defining a
relevant HTML element, you simply assign it
as a value of a class attribute.
31
31

• Below is an example of using the class
“appearance” we defined previously.
32
32

• An HTML element can have more than one
attribute.
• To define more than one attribute, you simply
leave a space after every attribute.
33
33
11
• Although single quotes can also be used, it is
common in HTML for a value of an attribute to
be specified in double quotes.
• It is necessary, however, to use single quotes
when the attribute value itself contains
double quotes.
34
34
12

Lecture 4 HTML Elements

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 4 HTML Elements

Uploaded by

Copyright:

Available Formats

ITU 07204: Fundamentals of Web

Basic Web Development Tools

• File Transfer Mechanism – FTP

• HTML consists of tags.

• The syntax for HTML tag is as follows

Opening tag Closing tag

Start tag End tag

HTML Elements: Block-level elements

HTML Elements: Block-level elements

• However, the paragraph <p> element cannot

HTML Elements: Inline elements

HTML Elements: Nesting of HTML Elements

• Since HTML documents are made up of many

1. An inline element cannot contain a block-

2. A block-level element cannot contain just any

:: Rules for Nesting HTML elements

3. The paragraph <p> element cannot contain

HTML Elements: Attributes

HTML Elements: Attributes

• For example, the id attribute of the division

HTML Elements: Attributes: Style

HTML Elements: Attributes: Style

HTML Elements: Attributes: Class

• The class attribute allows for a single style to

HTML Elements: Attributes: Class

HTML Elements: Attributes: Class

HTML Elements: Attributes: Class

HTML Elements: Attributes

You might also like