INTRODUCTION TO HTML

[Link]

to join class point. kindly use your registration number

 to join class point. kindly use your registration number
What is html ?
• HTML stands for Hyper Text Markup Language, which is the core language
used to structure content on the web.
• It organizes text, images, links, and media using tags and elements that
browsers can interpret.
• As of 2025, over 95% of websites rely on HTML alongside CSS and
JavaScript, making it a fundamental tool in modern web development.
• It is a markup language, not a programming language. This means it annotates text
to define how it is structured and displayed by web browsers.
• It is a static language, meaning it does not inherently provide interactive features
• HTML is all about organizing and displaying information on a webpage.
We can think of it as the bones or structure of a webpage.
How could you demonstrate the difference
between a markup language and a programming
language using HTML?
A. By showing that HTML can execute algorithms
B. By explaining how HTML structures text and is not capable of logic
operations
C. By demonstrating HTML's ability to create animations
D. By comparing HTML with other programming languages like Python
The picture can't be display ed.

Correct answer: B
Which of the following best describes the purpose
of HTML?
A. To create dynamic interactions on a webpage
B. To structure and display content on the web
C. To enhance graphics and animations on web pages
D. To manage server-side operations
The picture can't be display ed.

Correct answer: B
What is a webpage?
• A web page is a single document that is displayed through a web browser.
• It is a part of a website and can include text, images, videos, links, and
interactive elements.
• Web pages are primarily written in HTML (HyperText Markup Language),
styled with CSS (Cascading Style Sheets), and have dynamic elements
with JavaScript.
• A web page shows text, images, and videos to provide information.
• It includes elements like forms and buttons that users can click or fill out.
• A web page has links that let users move between different pages or
sections.
Types of Web Pages

• Web pages can be classified based on their functionality. The two

main types of web pages are:
• Static Web Pages
• Dynamic Web Pages
• Static web pages are simple and do not contain dynamic content or
interactive elements.
• They are also called flat or stationary web pages.
• These pages stay the same and show the same content to all users, no matter
what actions they take. Static web pages are created using HTML and CSS.
Dynamic Web Pages

• Dynamic web pages display different content depending on user actions or

other factors.
• They make websites more interactive and engaging. For example, content
such as image slideshows, videos, or user-specific data can change each
time a page is loaded.
• Dynamic web pages can be further divided into two categories:
• Server-Side Scripting: Server-side scripting involves languages like PHP, [Link],
and JSP. It enables web pages to interact with databases, modify their content, and
respond to user actions.
• Client-Side Scripting: This method involves JavaScript or other languages like Dart to
create web pages that can update in real-time based on events such as user clicks,
mouse movements, or keyboard presses.
If you were to design a dynamic web page that
reacts immediately to user inputs like button clicks,
which type of scripting would be most appropriate?
A. Server-side scripting
B. Static HTML
C. Client-side scripting
D. WebAssembly
The picture can't be display ed.

Correct answer: C
Which of the following best explains the primary
purpose of dynamic web pages?
A. To display static images and text
B. To make websites more interactive and responsive to user actions
C. To load faster than static web pages
D. To ensure compatibility across all browsers
The picture can't be display ed.

Correct answer: B
Using HTML to create a webpage
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages.
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
•
Elements, Tags and Attributes
• As mentioned earlier, HTML is all about organizing and displaying
information on a webpage.
• HTML uses elements.
• Elements are defined using tags.
 HTML TAGS
• A html tag is defined using < and > symbols. <h1>my heading</h1>
• <tag name>
<title>my page <br>title</title>
• There are two types of tags.
• opening tags <tagname> : marks the beginning of an element
• Closing tag </tagname> :marks the end of an element
• A tag is the actual keyword or name enclosed in angle
brackets (< >) that tells the browser what kind of content to
expect
Which of the following correctly defines an opening
HTML tag?
A. <tagname>
B. </tagname>
C. <tagname/>
D. <tagname end>
The picture can't be display ed.

Correct answer: A
 HTML ELEMENTS
• Elements are the basic building blocks of a webpage.
• They can represent different types of content, such as text, links,
images, or headings.
• An HTML Element consists of a start tag, content, and an end tag,
which together define the element's structure and functionality.
• Syntax
• <tagname >Your Contents... </tagname>
The HTML element is everything from the start tag to
the end tag:
<tagname>Content goes here...</tagname>
HTML Page Structure

• all web pages are created using the basic structure of an HTML page.
• The structure contains the essential building-block elements which
includes:
• doctype declaration,
• HTML,
• head,
• title, and
• body elements upon which all web pages are created.
• <!DOCTYPE html> - This is the document type declaration, not a tag.
• It declares that the document is an HTML5 document.
• <html> - This is called the HTML root element.
• All other elements are contained within it.
• <head> - The head tag contains the "behind the scenes" elements for a
webpage.
• Elements within the head aren't visible on the front end of a webpage.
• Typical elements inside the <head> include:
• <title>: Defines the title displayed on the browser tab.
• <meta>: Provides information like the character set or viewport settings.
• <link>: Links external stylesheets or resources.
• <style>: Embeds internal CSS styles.
• <script>: Embeds JavaScript for functionality.
• <title> - The title is what is displayed on the top of your browser
when you visit a website and contains the title of the webpage that
you are viewing.
• <h1> element defines a large heading
• <h2> - The <h2> tag is a second-level heading tag.
• Heading elements h1..h6

• <p>- The <p> tag represents a paragraph of text.

• <body> - The body tag is used to enclose all the visible content of a
webpage. In other words, the body content is what the browser will
show on the front end.
HTML Document Structure
Basic HTML Code Example

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph of text!</p>
<p>I am learning HTML from DeKUT</p>
</body>
</html>
Key Points About HTML Elements

Syntax:
•An opening tag indicates where the content begins: <tagname>.
•A closing tag indicates where the content ends: </tagname>.
•The actual content resides between the opening and closing tags.
Case Sensitivity:
•HTML tags are not case-sensitive. For example, <B> and <b> both represent bold text.
•However, it’s a best practice to use lowercase tags for consistency and readability.
Block-Level Elements and Inline Elements
• In HTML, elements are broadly categorized into two main types based on how
they display in the document layout: block-level elements and inline elements.
• Block-Level Elements
• Inline Elements
• Block-Level Elements:
• Block-level elements typically start on a new line and take up the full width available to them,
regardless of their actual content width.
• This means they stack vertically and can contain other block-level elements as well as inline
elements.
• Here are some examples of block-level elements:
• Examples:
• <div>: A general-purpose container for other elements.
• <p>: Defines a paragraph.
• <h1>, <h2>, ..., <h6>: Heading elements of different levels.
• <ol>, <ul>: Ordered and unordered lists.
• <table>: Defines a table.
• <form>: Used for HTML forms to collect user inputs.
• <section>, <article>, <nav>, <aside>, <header>, <footer>: Semantic elements that define areas of a
webpage.
Inline Elements
• Inline elements do not start on a new line;
• they appear on the same line as adjacent content, as long as there is space.
• They only take up as much width as their content requires.
• Inline elements are typically used within block-level elements to add content or
style.
• Here are some examples of inline elements:
• Examples:
• <span>: A general-purpose inline container for phrasing content.
• <a>: Creates hyperlinks.
• <img>: Embeds an image.
• <strong>, <b>: Used for strong emphasis and bold text, respectively.
• <em>, <i>: Used for emphasis and italic text, respectively.
• <br>: Inserts a line break within text.
• <input>: Creates interactive controls for forms.
HTML Empty Element

• HTML Elements without any content i.e., that do not print anything
are called Empty elements.
• Empty HTML elements do not have an ending tag.
• For instance. <br>, <hr>, <link>, <input> etc are HTML elements.
Example: In this example <br> tag doesn't print anything. It is used as a
line break that breaks the line.
<!DOCTYPE html>
<html>

<head>
<title>Empty HTML Elements</title>
</head>

<body>
<h2>come see empty elements</h2>
<p>that was an empty <br> element.</p>

</body>

</html>
 Nested HTML Elements

• HTML elements can be nested (this means

that elements can contain other elements).
• All HTML documents consist of nested
HTML elements.
• The following example contains four HTML
elements (<html>, <body>, <h1> and <p>):
• <!DOCTYPE html> • The <html> element is the root
<html> element and it defines the whole
<body> HTML document.

<h1>My First Heading</h1>

<p>My first paragraph.</p> • It has a start tag <html> and an end
tag </html>.
</body>
</html> • Then, inside the <html> element
there is a <body> element:
Important html elements
• Headings:
• HTML headings are used to define the titles and subtitles of sections on a
webpage. They help organize the content and create a structure that is easy
to navigate.
• Proper use of headings enhances readability by organizing content into clear
sections.
• Search engines utilize headings to understand page structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<h1>This is the Main Heading</h1>
<h2>This is a Subheading</h2>
<h3>This is a Smaller Subheading</h3>
<h4>This is a Sub-Subheading</h4>
<h5>This is a Minor Subheading</h5>
<h6>This is the Smallest Heading</h6>
</body>
</html>
• A paragraph in HTML is simply a block of text
enclosed within the <p> tag.
• The <p> tag helps divide content into manageable,
readable sections.
• It’s the go-to element for wrapping text in a web page
that is meant to be displayed as a distinct paragraph.
• Syntax:
• <p> Some Content... </p>
HTML Text Formatting

•<b> - Bold text

•<strong> - Important text
•<i> - Italic text
•<em> - Emphasized text
•<mark> - Marked text
•<small> - Smaller text
•<del> - Deleted text
•<ins> - Inserted text
•<sub> - Subscript text
•<sup> - Superscript text
HTML Links

• HTML links are hyperlinks.

• You can click on a link and jump to another document.
• The HTML <a> tag defines a hyperlink. It has the following syntax:
• Example:
• <a href="url">link text</a>
• The most important attribute of the <a> element is the href attribute,
which indicates the link's destination
• The link text is the part that will be visible to the reader.
• Clicking on the link text, will send the reader to the specified URL
address.
Assignment:
1. Distinguish between Absolute URLs and Relative URLs
HTML Lists

• HTML lists allow web developers to group a set of related items in

lists.
• Lists can be ordered or unordered
An unordered HTML list:
• Item
• Item
• Item
• Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
unordered list
• An unordered list starts with the <ul> tag
• Each list item starts with the <li> tag
• The list items will be marked with bullets (small black circles) by
default:
• example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ordered list
• An ordered list starts with the <ol> tag
• Each list item starts with the <li> tag
• The list items will be marked with numbers by default:
• example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Tables

• A table in HTML consists of table cells inside rows and columns.

• Example:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
• Each table cell is defined by a <td> and a </td> tag
• td stands for table data
• Everything between <td> and</td> is the content of a table cell.
• <table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
table row
• Each table row is defined by a <tr> and a </tr> tag
• tr stands for table row
• <table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Table header
• Sometimes you want your cells to be table header cells. In those cases use the <th> tags
• <table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Other table elements
Tag Description
1 <table> Defines a table
2 <th> Defines a header cell in a table
3 <tr> Defines a row in a table
4 <td> Defines a cell in a table
5 <caption> Defines a table caption
6 <colgroup> Specifies a group of one or more columns in a table for formatting
7 <col> Specifies column properties for each column within a <colgroup> element
8 <thead> Groups the header content in a table

9 <tbody> Groups the body content in a table

10 <tfoot> Groups the footer content in a table
11
HTML Div Element
• The <div> element is used as a container for other HTML elements.
• The <div> element is by default a block element, meaning that it takes
all available width, and comes with line breaks before and after.
• Example:
Lorem Ipsum <div>I am a div</div> dolor sit amet.
• Out put:
• <div> element is often used to group sections of a web page together.
• <div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
Multiple <div> elements

• <div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 700,000 inhabitants.</p>
</div>
<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has over 4 million inhabitants.</p>
</div>
Aligning <div> elements side by side

• When building web pages, you often want to have two or more <div>
elements side by side, like this

• There are different methods for aligning elements side by side, all
include some CSS styling. We will look at the most common methods:
• They include:
• Float
• Inline-block
• Flex
• Grid
• We will discuss this items after we discuss attributes and CSS
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• They are placed inside the opening tag /start tag
• Attributes usually come in name/value pairs like: name="value"
• Common attributes include class, id, href, and src.
THANK YOU.