Web Technologies Week 02-03 (HTML)

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

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

What is
HTML ?

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.

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.
HTML

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

Basic
Structure of
HTML

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

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?
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

HTML Elements
<!DOCTYPE HTML>
<html>
<head>
HTML <title>My First HTML Page</title>
</head>
Elements <body>
</body>
Five (05
</html>
Elements)
How many Elements are there?
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?

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

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

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.
<img src= "logo.gif" alt= "logo" />
</body>
</html>

Basic Structure of HTML

Famous
HTML Tags

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>
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>

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.
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>

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>

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.

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>

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.
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>

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.
Form Tag
<form action="process.php" method="POST">

<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.
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>
Form Tag

HTML
Styling
Attributes

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">

bgcolor Attribute: The bgcolor attribute sets the background color of an

element.
<table bgcolor="#f0f0f0">

</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">

border Attribute: The border attribute specifies the border width of table
cells.
<table border=“1">

</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>

Graded Self
Learning
Task
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.

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

Web Technologies Week 02-03 (HTML)

Uploaded by

Copyright:

Available Formats

You might also like

Web Technologies Week 02-03 (HTML)

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

Web Technologies Week 02-03 (HTML)

Uploaded by

Copyright:

Available Formats

Web Technologies (CSC336)

MIAN MUHAMMAD TALHA

03 Basic Structure of HTML

06 Graded Self Learning Task

Prepared by Mian Muhammad Talha 2

Prepared by Mian Muhammad Talha 3

• Web Technology is a broad field that encompasses the tools, processes,

• 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

Prepared by Mian Muhammad Talha 5

• HTML is the combination of Hypertext and Markup language.

• HTML, or HyperText Markup Language, is the foundation of web

Prepared by Mian Muhammad Talha 6

Prepared by Mian Muhammad Talha 8

• An HTML file must have an .htm or .html file extension

• HTML files can be created with text editors:

Prepared by Mian Muhammad Talha 9

Prepared by Mian Muhammad Talha 10

• A keyword written between angle brackets <xyz> is called a tag

• Start tag is like <xyz> while end tag is like </xyz>

• Anything within the start/end tag is called content

Prepared by Mian Muhammad Talha 11

• An HTML element is a structural component represented by a pair of tags

• HTML elements provide the framework for organizing and presenting

Prepared by Mian Muhammad Talha 13

How many Elements are there?

• An Attribute defines one property for an element

• HTML attributes let you customize elements

• They provide extra info about elements

• Values are usually in quotation marks

Prepared by Mian Muhammad Talha 16

<img src= "logo.gif" alt= "logo" />

Prepared by Mian Muhammad Talha 17

Prepared by Mian Muhammad Talha 18

Prepared by Mian Muhammad Talha 19

Prepared by Mian Muhammad Talha 21

<p>This is a sample paragraph. It demonstrates how the &lt;p&gt;

<p>Another paragraph follows here. You can use as many

Prepared by Mian Muhammad Talha 23

target defines which page to open.

<a href="#section"> Jump to Section </a>

Prepared by Mian Muhammad Talha 25

Prepared by Mian Muhammad Talha 26

<tr>: Represents a table row, containing cells or columns.

Prepared by Mian Muhammad Talha 27

Prepared by Mian Muhammad Talha 28

• Unordered List (<ul>):

Prepared by Mian Muhammad Talha 30

• It allows users to input data, which can then be submitted to a server

• Forms are commonly used for various purposes, such as user

• They play a significant role in creating dynamic and engaging web

Key attributes and elements of the <form> tag:

Prepared by Mian Muhammad Talha 34

Prepared by Mian Muhammad Talha 35

Prepared by Mian Muhammad Talha 36

<p>This is a sample paragraph. It demonstrates how the <p>