Web Technologies (CSC336)
Week 02-03
Introduction to HTML
MIAN MUHAMMAD TALHA
LECTURER
DEPARTMENT OF COMPUTER SCIENCE
COMSATS UNIVERSITY ISLAMABAD, WAH
CAMPUS
Layout
01 Recap of Week 01
02 What is HTML?
03 Basic Structure of HTML
04 Famous HTML Tags
05 HTML Styling Attributes
06 Graded Self Learning Task
Prepared by Mian Muhammad Talha 2
01.
Recap of
Week 01
Prepared by Mian Muhammad Talha 3
Previous Week
• Web Technology is a broad field that encompasses the tools, processes,
and protocols used to create, deliver, and manage content over the
internet
• Web Structure (WWW, Web Browsers, Web Servers, Web Pages)
• Front-end / Backend Side
• Types of Web Developers
• Market Trends and Demands
Prepared by Mian Muhammad Talha 4
What is
HTML ?
Prepared by Mian Muhammad Talha 5
What is HTML?
• HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages and markup
language defines the text document within the tag that define the
structure of web pages.
• HTML, or HyperText Markup Language, is the foundation of web
development. It's a straightforward way to create and structure content
for the internet. Think of HTML as the skeleton of a web page – it
provides the basic structure and framework for everything you see
online.
Prepared by Mian Muhammad Talha 6
What is HTML?
• Basic Structure: HTML is a simple language that uses tags to create the
essential structure of a web page. It helps arrange content logically using
elements like headings, paragraphs, and lists, adding meaning to your web
content.
• Tag Pairs: HTML tags come in pairs, with an opening tag (<tag>) and a
closing tag (</tag>), and elements are formed by combining these tags.
• Attributes: Tags can have attributes like "src" for images, providing extra
information to control how elements are displayed.
• Browser Rendering: Web browsers read HTML code and convert it into
visible web pages, showing content as intended by interpreting the tags
and attributes.
Prepared by Mian Muhammad Talha 7
HTML
Prepared by Mian Muhammad Talha 8
HTML Web Page
• An HTML file must have an .htm or .html file extension
• HTML files can be created with text editors:
• NotePad, NotePad ++, PSPad
• Or IDEs like
• Visual Studio Code
• Sublime Text
• Atom
• Adobe Dreamweaver
Prepared by Mian Muhammad Talha 9
Basic
Structure of
HTML
Prepared by Mian Muhammad Talha 10
HTML Tags
• A keyword written between angle brackets <xyz> is called a tag
• Start tag is like <xyz> while end tag is like </xyz>
• HTML tags are hidden keywords that control formatting of a web page in
the browser and define the display of content
• Most tags have both start and end. Few tags only have start
• Anything within the start/end tag is called content
Prepared by Mian Muhammad Talha 11
HTML Tags
<!DOCTYPE HTML>
<html>
<head>
HTML <title>My First HTML Page</title>
</head>
Tags <body>
<p>This is some text...</p>
</body>
</html> Eleven (11 Tags)
How many tags are there?
Prepared by Mian Muhammad Talha 12
HTML Elements
• An HTML element is a structural component represented by a pair of tags
• HTML elements provide the framework for organizing and presenting
content on a webpage. They encompass a wide range of functions and
visual styles
• HTML elements are not hidden keywords which means whatever referred
between the starting and closing tag shown on the screen exactly as it is
Prepared by Mian Muhammad Talha 13
HTML Elements
<!DOCTYPE HTML>
<html>
<head>
HTML <title>My First HTML Page</title>
</head>
Elements <body>
<p>This is some text...</p>
</body>
Five (05
</html>
Elements)
How many Elements are there?
Prepared by Mian Muhammad Talha 14
HTML Header & Body
<!DOCTYPE HTML>
<html>
HTML header
Header <head>
<title>My First HTML Page</title>
/ </head>
<body>
Body <p>This is some text...</p>
</body>
</html> HTML body
How many Elements are there?
Prepared by Mian Muhammad Talha 15
HTML Attibutes
• An Attribute defines one property for an element
• Each attribute has a name and a value, and appears within the element's
start tag
• Start tag may contain any number of name/value pairs separated by spaces
• HTML attributes let you customize elements
• They provide extra info about elements
• Values are usually in quotation marks
Prepared by Mian Muhammad Talha 16
HTML Attributes
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
Attribute </head>
<body>
s <p>This is some text...</p>
Attributes
<img src= "logo.gif" alt= "logo" />
</body>
</html>
Values
Prepared by Mian Muhammad Talha 17
Basic Structure of HTML
<!DOCTYPE HTML>
Here it is a
<html> document type
<head> declaration (also
called DOCTYPE
<title>My First HTML Page</title> declaration) that
</head> identifies this
document as an
<body> HTML5
document.
<p>This is some text...</p>
<img src= "logo.gif" alt= "logo" />
</body>
</html>
Prepared by Mian Muhammad Talha 18
Basic Structure of HTML
Prepared by Mian Muhammad Talha 19
Prepared by Mian Muhammad Talha 20
Famous
HTML Tags
Prepared by Mian Muhammad Talha 21
Heading Tags
• Heading tags <h1> to <h6> provide a hierarchy for your content. The
larger the number, the smaller and less important the text becomes.
They help in structuring your webpage and making it visually
appealing while indicating the organization of information.
<body>
<h1>This is the Main Heading</h1>
<h2>This is a Subheading</h2>
<h3>Another Subheading</h3>
<h4>Sub-subheading</h4>
<h5>Small Sub-subheading</h5>
<h6>Tiniest Sub-subheading</h6>
</body>
Prepared by Mian Muhammad Talha 22
Paragraph Tag
<body>
<p>This is a sample paragraph. It demonstrates how the <p>
tag is used to structure text content on a webpage.</p>
<p>Another paragraph follows here. You can use as many
<p> tags as needed to create distinct paragraphs.</p>
</body>
Prepared by Mian Muhammad Talha 23
Anchor Tag
The anchor tag <a> is a fundamental HTML element used to create
hyperlinks, allowing users to navigate to different web pages or resources.
Here are the basics of using the anchor tag:
<a href="https://www.example.com" target="_blank">Visit
href: This attribute specifies theWebsite</a>
destination URL that the link points to. It
can be an absolute URL (e.g., https://www.example.com) or a relative URL
(e.g., page.html).
target defines which page to open.
(i) “_blank” opens in new window
(ii) “_self” opens the page in same window.
Visit Website: This is the visible text that users will see on the webpage.
When clicked, this text will act as the link to the specified URL.
Prepared by Mian Muhammad Talha 24
Anchor Tag
You can also use anchor tags to create links within the same webpage
(known as internal links) using relative URLs. For example:
<a href="#section"> Jump to Section </a>
In this case, clicking the link would scroll the user's view to the section
with the id attribute of "section" within the same page. Also, Known as
Bookmarks.
<h2 id=“section"> Section 4 </h2>
Prepared by Mian Muhammad Talha 25
Anchor Tag
<body>
<p>Facebook is one of the famous social media platform and if
you want to explore it see below</p>
<a href="https://www.facebook.com"
target="_blank">Facebook</a>
</body>
Prepared by Mian Muhammad Talha 26
Table Tag
The <table> tag is a fundamental HTML element used to create
structured tabular data on a webpage. It allows you to organize
information into rows and columns, making it easier to present and
comprehend data sets. The basic structure of a table includes:
<table>: The container element for the entire table.
<tr>: Represents a table row, containing cells or columns.
<th>: Represents a table header cell, typically used for column or row
headers.
<td>: Represents a table data cell, where the actual data is placed.
Prepared by Mian Muhammad Talha 27
Table Tag
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td> <table border="solid">
<td>Data 2</td>
</tr>
</table>
Prepared by Mian Muhammad Talha 28
Ordered and Unordered List Tag
• Ordered List (<ol>):
<ol> An ordered list represents a list of
<li>First item</li> items in a specific sequence,
<li>Second item</li> usually indicated by numbers or
<li>Third item</li> letters. It's commonly used for lists
where the order of items is
</ol>
important.
• Unordered List (<ul>):
<ul>
An unordered list represents
a list of items without any <li>Red</li>
specific sequence. It's <li>Green</li>
typically displayed with <li>Blue</li>
bullet points, dashes, or </ul>
other marker symbols.
Prepared by Mian Muhammad Talha 29
Ordered and Unordered List Tag
<body>
<ol> <ol>
<li>First item</li> <li>Main item 1
<li>Second item</li> <ul>
<li>Third item</li> <li>Subitem 1</li>
</ol> <li>Subitem 2</li>
<ul> </ul>
<li>Red</li> </li>
<li>Green</li> <li>Main item 2</li>
<li>Blue</li> </ol>
</ul> </body>
Prepared by Mian Muhammad Talha 30
Form Tag
• The <form> tag in HTML is a crucial element for creating interactive
and user-friendly web forms.
• It allows users to input data, which can then be submitted to a server
for processing.
• Forms are commonly used for various purposes, such as user
registration, login, search queries, feedback, and more.
• Forms are a crucial component of user interaction on the web and are
widely used to collect and process user input.
• They play a significant role in creating dynamic and engaging web
applications.
Prepared by Mian Muhammad Talha 31
Form Tag
<form action="process.php" method="POST">
<!-- Form fields and input elements go here -->
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="submit" value="Submit">
</form>
Key attributes and elements of the <form> tag:
action: Specifies the URL where the form data will be sent when the
user submits the form.
method: Determines how the form data is sent to the server. Common
methods are GET and POST.
Form fields: Various input elements like text fields, radio buttons,
checkboxes, etc., go within the form tag.
Prepared by Mian Muhammad Talha 32
Form Tag
<form action="/action_page.php" method="post">
<fieldset>
<legend>Personal Info:</legend>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name"
value="Talha"><br>
<label for="email"></label>Email: </label>
<input type="text" name="email" required><br>
<label for="country"></label>Country: </label>
<input type="text" name="country" value="PAK"
readonly><br><br>
What should be the Output of this code snippet?
<input type="submit" value="Submit">
How many new attributes you see?
</fieldset>
Prepared by Mian Muhammad Talha 33
Form Tag
Prepared by Mian Muhammad Talha 34
HTML
Styling
Attributes
Prepared by Mian Muhammad Talha 35
HTML Styling Attributes
style Attribute: You can use the style attribute to add inline styles
directly to an HTML element. Inline styles affect only that specific
element
<p style="color: blue; font-size: 18px;">This is a blue and larger
text.</p>
align Attribute: The align attribute is used to horizontally align content
within certain elements like <img>, <table>, and <div>.
<img src="image.jpg" alt="Image" align="right">
Prepared by Mian Muhammad Talha 36
HTML Styling Attributes
bgcolor Attribute: The bgcolor attribute sets the background color of an
element.
<table bgcolor="#f0f0f0">
<!-- Table content here -->
</table>
width and height Attributes: You can use these attributes to define the
dimensions of elements like images and table cells.
<img src="image.jpg" alt="Image" width="200"
height="150">
Prepared by Mian Muhammad Talha 37
HTML Styling Attributes
border Attribute: The border attribute specifies the border width of table
cells.
<table border=“1">
<!-- Table content here -->
</table>
bgcolor and color Attributes (Text Colors): The bgcolor attribute changes
the background color of the text, and the color attribute sets the text color.
<p bgcolor="yellow" color="red">This is some colored
text.</p>
Prepared by Mian Muhammad Talha 38
Graded Self
Learning
Task
Prepared by Mian Muhammad Talha 39
Graded Self Learning Task (Lab)
Prepare Tag Sheet Apply & Present
Please prepare a Highlight your practical use
Cheat Sheet of HTML of at least 10 HTML tags
Tags that start with the from class discussions and
Alphabet that have been your personal exploration.
assigned to you. Present your task in the
Create an Excel sheet with upcoming class/lab session
this information and to demonstrate your
submit it through understanding and effective
CUOnline implementation of these
tags.
Prepared by Mian Muhammad Talha 40
Code ki duniya ki kuch alag hi ha baat,
Tags ki chhaya mein, ho jayein saath saath,
<anchor> se judiye, or ho jayei engage,
HTML seekh ka banayein web page
Prepared by Mian Muhammad Talha 41
