Lecture Notes-HTML Part 1

Web Development for Business Applications
Lecture Notes: Fundamentals of HTML (1)
Learning Objectives:
• Understand Tags, Elements and Attributes
• Understand the basic Structure of HTML
• Text Elements
• Lists
• Article Tag
• Tables
• Embedded Content: image, Audio, video, links etc.
• Forms
• Meta Tag
• Layout
• Additional Tags
1. Tags, Elements and Attributes:

Tags: Codes enclosed in brackets
Elements: Opening Tag, closing tag and anything
in between
Attributes: Additional details about the element
2. Basic Structure of HTML 1
1- Type of HTML version we are using

3
2- Root that tells it is HTML Document
3- Supporting files, title of your page,
Meta Data about your page,
Not displayed on the page
4- Body that defines all elements that will
4
Will display on the page
3. Text Elements
1|Page
Purpose of HTML Text elements: display text in format that is appealing and readable.
Benefits of text elements:
• Display headings and paragraphs
• Markup bold, italic and underlining text
• Show different format of text like java code and normal readable text
List of Text Elements inside Body
1- Headings: Display the title of the Paragraph, show some text in bigger size and bolder
There 6 heading tags from <h1> …..<h6>
Example:
2- Horizontal Lines: acts like a separator between sections and paragraphs (add space
between paragraphs)
<hr> is a self-enclosing tag, you don’t need to close it
We can add attributes to it like width=”50%”, align=” left”
Example :
<h1> This is heading 1 </h1>

<hr>
<h2> This is heading 2 </h2>
<hr width=”50%” align=”left”> with attributes
2|Page
3- Paragraphs: is place where you put most of the content to display on the browser
paragraphs tags helps to organize the content nicely into smaller container which makes
content easy to read and edit it
4- Single line break: Line breaks help to break the lines like new line (\n) start a new line
The more breaks you have the more lines are added
<br>: self-enclosing tag
5- Strong tag: helps to bold the text and highlight the text to emphasizes some line in the
paragraph it is the same like bold tag <b> <strong>
6- Emphasis: is used to emphasis a word or line in the paragraph similar to italic <em>
3|Page
7- Underline: simply underline the text, it is often used in the paragraphs
Example:
<u> Welcome to PSUT </u> → Welcome To PSUT
8- Italic Tag: will simply italic the text, it is often used in the paragraphs
<i> Welcome to PSUT </i> → Welcome To PSUT
9- Code: is used to display programming source code on the web page.
<code> Function Add (x, y) {return x+y} </code>
10- Preformatted tag: is used to display the white space and it will retain the indication of
the format that is written in HTML file
<pre>
<code> Public void add (int a, int b)
{
Return a+b;
}
</code>
11- More HTML Text Tags </pre>
Tag Description Example

<s> </s> Strikethrough <s> PSUT </s> → PSUT
<sup> </sup> Superscript x<sup> 2 </sup> → x2
<sub> </sub> Subscript H <sub>2</sub>O → H2O
<q> </q> Quotation <q>This text is quotation</q>
<mark> </mark> Indicates highlight text <mark>PSUT </mark> → PSUT
<abbr> Abbreviations <abbr title=” World Health

organization”>WHO</abbr>
4|Page
<center> </center> Center Alignment <center> PSUT </center>
PSUT
<big></big> Make text bigger <big>This is PSUT</big>
This is PSUT
<small> </small> Make text smaller <small> PSUT </small>
PSUT
<bdo></bdo> Text Direction <bdr dir=”rtl”>Text direction</bdr>
<cite></cite> Define the Title of creative <cite> The Scream</cite> by

works (poem, book, movie, Edward Munch. painted in 1983
article)
Style Arrtibute: is an attribute add on html tags to format text in way similar to CSS but
inside the tag will be discussed more later in CSS
Example:
<body style=” background-color: blue;”> Page Background
<h1 style=” color: red;”> Font Color
<p style=”font-family: Verdana;”> Font type
<h1 style=”text-align: center;”> Alignment
<h1 style=”text-decoration: underline; text-decoration-color: red;”> Underline color
<p style=”font-size:18px;”> Font size
4. Lists in HTML
Consist of three types:
❖ Definition List
❖ Ordered List
❖ Unordered List
5|Page
Definition List: Used to define definition of a list, it is often used as a header for the list
<dl>: Definition List

<dt>: Definition Title
<dd>: Definition data
Example:
<body><dl>
<dt> Hypertext Markup Language </dt>
<dd> is a markup language for the web that defines the structure of web pages </dd>
</dl></body>
Ordered List: is used to show list of items with numbers, used to list points like 1,2,3 the
number will generated by the tag
<ol>: ordered List

<li>: List
You can define Numbering type by having type attribute on <ol> Tag as follow
Types Description
<ol type=”1”> List will be numbers 1,2,3
<ol type=” A”> List will be uppercase letters A, B, C
<ol type=” a”> Lists will be in lowercase letters a,b,c
<ol type=” I”> Lists will be in uppercase Roman Number I II
<ol type=” i”> Lists will be in lowercase Roman Number i ii
6|Page
You can choose to start numbering from specific number like <ol Strat=”50”> here numbers will
begin from 50
<body>
Example 1 Example 2 : Nested Ordered List
<ol type=” A”>
<body>
<li> Engineering
<ol type=”1”>
<ol> <li> Electrical Engineering </li>
<li> Engineering </li>
<li> Power Engineering </li></ol></li>
<li> Computing Science </li>
<li> Computing Science </li>
<li> Business </li>
<ol> <li> Computer Science </li>
</ol>
<li> Animation</li>
</body>
<li>Software Engineering </li></ol></li>
<li> Business
<ol> <li> BIT </li>
<li> eMarketing</li>
<li> Business </li></ol></li>
</ol></body>
Unordered List: used to show list of items with circle dots, you can change the default list from
circle dot to any other symbol or image by using Style attribute in <ul> tag
<ul>: Unordered List

<li>: List Example:
<ul style=” list-style-type: disc;”> • <body>
<ul style=” list-style-type: circle;”> o <ul style=” list-style-type: square;”>
<ul style=” list-style-type: square;”>

▪ <li> Coffee </li>
<li> Tea </li>
<li> Milk </li>
</body>
7|Page

Lecture Notes-HTML Part 1

Uploaded by

Lecture Notes-HTML Part 1

Uploaded by

Web Development for Business Applications

Lecture Notes: Fundamentals of HTML (1)

1. Tags, Elements and Attributes:

2. Basic Structure of HTML 1

1- Type of HTML version we are using

<h1> This is heading 1 </h1>

<i> Welcome to PSUT </i> → Welcome To PSUT

9- Code: is used to display programming source code on the web page.

<code> Function Add (x, y) {return x+y} </code>

Tag Description Example

<sup> </sup> Superscript x<sup> 2 </sup> → x2

<sub> </sub> Subscript H <sub>2</sub>O → H2O

<q> </q> Quotation <q>This text is quotation</q>

<mark> </mark> Indicates highlight text <mark>PSUT </mark> → PSUT

<abbr> Abbreviations <abbr title=” World Health

<big></big> Make text bigger <big>This is PSUT</big>

<bdo></bdo> Text Direction <bdr dir=”rtl”>Text direction</bdr>

<cite></cite> Define the Title of creative <cite> The Scream</cite> by

<dl>: Definition List

<ol>: ordered List

<ul>: Unordered List

<ul style=” list-style-type: disc;”> • <body>

<ul style=” list-style-type: circle;”> o <ul style=” list-style-type: square;”>

<ul style=” list-style-type: square;”>

You might also like