Lecture 1 Html-Combined

Lecture 1
HTML
Setup & HTML
By Muhammad Ismail
Setup ❏ Google Chrome
https://www.google.com/chro
me/?brand=FHFK&gclid=Cj0K
CQiApb2bBhDYARIsAChHC9u
kVt1vxMYW3AOUcwDCz38Lr
RDXKVpL9msOx05f6Ly4qse4
QGVEGxgaAjcHEALw_wcB&gc
lsrc=aw.ds
❏ Visual Studio Code
https://code.visualstudio.com/
HTML What is HTML?
● 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
Example <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Lecture 2
HTML
HTML Text tags
By Muhammad Ismail
INTRODUCTION:
Basic HTML Tags
The most important tags in HTML are
tags that define headings, paragraphs
and line breaks. The best way to learn
HTML is to work with examples.
❏ Headings
❏ Paragraphs
❏ Line Breaks
❏ Comments in HTML
By Muhammad Ismail
Headings are defined with the <h1> to <h6>
Headings tags. <h1> defines the largest heading. <h6>
defines the smallest heading.
<h1>This is a heading</h1>
By Muhammad Ismail
Paragraphs Paragraphs are defined with the
<p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra
blank line before and after a
paragraph.
By Muhammad Ismail
Line Breaks The <br> tag is used when you
want to end a line, but don't
want to start a new paragraph.
The <br> tag forces a line break
wherever you place it.
<p>This <br> is a para <br>

graph with line breaks </p>The
<br> tag is an empty tag. It has
no closing tag.
By Muhammad Ismail
Comments in The comment tag is used to insert a
comment in the HTML source code. A
HTML comment will be ignored by the
browser.
You can use comments to explain your

code, which can help you when you edit
the source code at a later date.
< !-- This is a comment --> Note that you

need an exclamation point after the
opening bracket, but not before the
closing bracket.
By Muhammad Ismail
Lecture 3
HTML
Lists (ul and ol)
By Muhammad Ismail
Html Lists With HTML, there are
three ways of adding
lists.
❏ Unordered Lists
❏ Ordered Lists
❏ Description Lists
By Muhammad Ismail
An unordered list starts with the <ul>
tag. Each list item starts with the <li>
Unordered List 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>
By Muhammad Ismail
An ordered list starts with the <ol>
Ordered List 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>
By Muhammad Ismail
HTML also supports description lists.
Description Lists A description list is a list of terms, with a

description of each term.
The <dl> tag defines the description list, the
<dt> tag defines the term (name), and the
<dd> tag describes each term:
Example:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
By Muhammad Ismail </dl>

Lecture 4
HTML
LINKS
By Muhammad Ismail
HTML Links - HTML links are hyperlinks.
Hyperlinks You can click on a link and jump to

another document.
When you move the mouse over a

link, the mouse arrow will turn into
a little hand.
Syntax
<a href="url">link text</a>
By Muhammad Ismail
The most important attribute of the <a>
Href Attribute
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.
<a href="https://beqabil.com/">Visit
BeQabil!</a>
By Muhammad Ismail
Both examples above are using an
Absolute URLs vs. absolute URL (a full web address) in the
Relative URLs href attribute.
A local link (a link to a page within the
same website) is specified with a relative
URL (without the "https://www" part):
<h2>Absolute URLs</h2>
<p><a href="https://beqabil.com/">BeQabil</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

By Muhammad Ismail
Use mailto: inside the href attribute to create a
Link to an Email link that opens the user's email program (to let
Address them send a new email):
<a href="mailto:someone@example.com">Send
email</a>
Link title:
The title attribute specifies extra information

about an element. The information is most
often shown as a tooltip text when the mouse
moves over the element
<a href="https://beqabil.com/" title="Go to

BeQabil web">Visit our page</a>
By Muhammad Ismail
Lecture 5
HTML
IMAGES
By Muhammad Ismail
Images can improve the design and the
HTML Images appearance of a web page.
Images Syntax
The HTML <img> tag is used to embed an

image in a web page.
Images are not technically inserted into a

web page; images are linked to web pages.
The <img> tag creates a holding space for the
referenced image.
<img src="url" alt="alternatetext">
By Muhammad Ismail
The required alt attribute provides an
The alt Attribute
alternate text for an image, if the user
for some reason cannot view it (because
of slow connection, an error in the src
attribute, or if the user uses a screen
reader).
The value of the alt attribute should

describe the image:
Example:
<img src="img_chania.jpg" alt="Flowers

By Muhammad Ismail in Pakistan">
Lecture 6
HTML
TABLES
By Muhammad Ismail
A table in HTML consists of table cells
HTML Table inside rows and columns.
Syntax:
<table>
<tr>
<th>Country</th>
</tr>
<tr>
<td>Germany</td>
</tr>
</table>
By Muhammad Ismail
Each table cell is defined by a <td> and a
Table Cells
</td> tag.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
By Muhammad Ismail
Each table row starts with a <tr> and
Table Rows ends with a </tr> tag.
<table>
<tr>
<td>Linus</td>
</tr>
<tr>
<td>10</td>
</tr>
</table>
By Muhammad Ismail
Sometimes you want your cells to be
Table Headers table header cells. In those cases use the
<th> tag instead of the <td> tag:
<table>
<tr>
<th>Person 1</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Linus</td>
</tr>
By Muhammad Ismail </table>

HTML Table - Colspan
Table Colspan
To make a cell span over multiple
columns, use the colspan attribute:
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
HTML Table - Rowspan
Table Rowspan
To make a cell span over multiple rows, use
the rowspan attribute:
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
Lecture 7
HTML
FORMS
By Muhammad Ismail
An HTML form is used to collect user input.
HTML Forms The user input is most often sent to a server
for processing.
Form Element:
The HTML <form> element is used to create

an HTML form for user input:
<form>
form elements
</form>
The <form> element is a container for

different types of input elements, such as:
text fields, checkboxes, radio buttons, submit
By Muhammad Ismail
buttons, etc.
The HTML <input> element is the most
The <input> Element used form element. An <input> element
can be displayed in many ways,
depending on the type attribute. Here
are some examples:
Example:
<input type="text">
<input type="radio">
<input type="checkbox">
<input type="submit">
<input type="button">
By Muhammad Ismail
The action attribute defines the action to be
The Action Attribute performed when the form is submitted.
Usually, the form data is sent to a file on the

server when the user clicks on the submit
button.
In the example below, the form data is sent to a

file called "action_page.php". This file contains a
server-side script that handles the form data:
Example:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<input type="submit" value="Submit">
</form>
By Muhammad Ismail
The method attribute specifies the HTTP method to
The Method Attribute be used when submitting the form data.
The form-data can be sent as URL variables (with

method="get") or as HTTP post transaction (with
method="post").
The default HTTP method when submitting form

data is GET.
Example:
This example uses the GET method when

submitting the form data:
<form action="/action_page.php" method="get">
This example uses the POST method when

submitting the form data:
By Muhammad Ismail <form action="/action_page.php" method="post">

The HTML <form> element can contain
The HTML <form> one or more of the following form
elements:
Elements
Example:
● <input>
● <label>
● <select>
● <textarea>
● <button>
● <fieldset>
● <legend>
● <datalist>
● <output>
● <option>
By Muhammad Ismail ● <optgroup>
Here are the different input types you can use in
HTML Input Types HTML:
Example:
● <input type="button">
● <input type="checkbox">
● <input type="color">
● <input type="date">
● <input type="datetime-local">
● <input type="email">
● <input type="file">
● <input type="hidden">
● <input type="image">
● <input type="month">
● <input type="number">
● <input type="password">
● <input type="radio">
● <input type="range">
● <input type="reset">
● <input type="search">
By Muhammad Ismail ● <input type="submit">
The value Attribute
HTML Input
The input value attribute specifies an initial
Attributes value for an input field:
Example:
Input fields with initial (default) values:
<form>
<label for="fname">First
name:</label><br>
<input type="text" id="fname"
name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname"
name="lname" value="Doe">
By Muhammad Ismail
</form>
The readonly Attribute
HTML Input The input readonly attribute specifies that an input field
is read-only.
Attributes A read-only input field cannot be modified (however, a
user can tab to it, highlight it, and copy the text from it).
The value of a read-only input field will be sent when
submitting the form!
Example:
A read-only input field:
<form>
value="John" readonly><br>
<input type="text" id="lname" name="lname"
value="Doe">
By Muhammad Ismail </form>
The disabled Attribute
HTML Input The input disabled attribute specifies that an input field
should be disabled.
Attributes A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when
submitting the form!
Example:
A disabled input field:
<form>
value="John" disabled><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
By Muhammad Ismail
Lecture 8
HTML
Html5 (Video & audio)
By Muhammad Ismail
The HTML <video> element is used to show a
HTML Video video on a web page.
The HTML <video> Element:
To show a video in HTML, use the <video>

element:
Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
By Muhammad Ismail
To start a video automatically, use the
HTML <video> autoplay attribute:
Autoplay
Add muted after autoplay to let your video
start playing automatically (but muted):
Example:
<video width="320" height="240" autoplay

muted>
<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
By Muhammad Ismail </video>

The HTML <audio> element is used to play
HTML Audio an audio file on a web page.
The HTML <audio> Element
To play an audio file in HTML, use the

<audio> element:
Example:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3"
type="audio/mpeg">
Your browser does not support the audio
element.
</audio>
By Muhammad Ismail
The controls attribute adds audio controls, like play,
pause, and volume.
HTML Audio - How It
The <source> element allows you to specify alternative
Works audio files which the browser may choose from. The
browser will use the first recognized format.
The text between the <audio> and </audio> tags will

only be displayed in browsers that do not support the
<audio> element.
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay

attribute:
Example:
<audio controls autoplay>

<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
By Muhammad Ismail Your browser does not support the audio element.
</audio>
Add muted after autoplay to let your
HTML Audio - How It audio file start playing automatically
(but muted):
Works
Example:
<audio controls autoplay muted>

<source src="horse.ogg"
type="audio/ogg">
<source src="horse.mp3"
type="audio/mpeg">
Your browser does not support the
audio element.
</audio>
By Muhammad Ismail
Lecture 9
HTML
Attributes, id and class difference
By Muhammad Ismail
HTML attributes provide additional
HTML Attributes information about HTML elements.
HTML Attributes:
● All HTML elements can have
attributes
● Attributes provide additional
information about elements
● Attributes are always specified in
the start tag
● Attributes usually come in
name/value pairs like:
By Muhammad Ismail name="value"
The <a> tag defines a hyperlink. The href
The href and src attribute specifies the URL of the page the link
Attribute goes to:
Example:
<a href="https://beqabil.com/">Visit
BeQabil</a>
The src Attribute

The <img> tag is used to embed an image in an
HTML page. The src attribute specifies the path
to the image to be displayed:
Example:
By Muhammad Ismail <img src="img_girl.jpg">

The required alt attribute for the <img> tag
The alt Attribute specifies an alternate text for an image, if the
image for some reason cannot be displayed.
This can be due to a slow connection, or an
error in the src attribute, or if the user uses a
screen reader.
Example:
<img src="img_girl.jpg" alt="Girl with a

jacket">
See what happens if we try to display an

image that does not exist:
<img src="img_typo.jpg" alt="Girl with a

By Muhammad Ismail jacket">
The style attribute is used to add styles to an
The style and title element, such as color, font, size, and more.
Attribute
Example:
<p style="color:red;">This is a red

paragraph.</p>
The title Attribute:
The title attribute defines some extra

information about an element.
The value of the title attribute will be displayed

as a tooltip when you mouse over the element:
Example:
By Muhammad Ismail
<p title="I'm a tooltip">This is a paragraph.</p>
You should always include the lang attribute
The lang Attribute inside the <html> tag, to declare the
language of the Web page. This is meant to
assist search engines and browsers.
The following example specifies English as

the language:
Example:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
By Muhammad Ismail
</html>
Difference between id HTML id Attribute:
and class Attributes in The id attribute is a unique identifier

HTML that is used to specify the document.
It is used by CSS and JavaScript to
perform a certain task for a unique
element. In CSS, the id attribute is
written using the # symbol followed
by id.
Example:
By Muhammad Ismail <element id="id_name">

HTML class Attribute:
Difference between id
and class Attributes in The class attribute is used to specify one
HTML or more class names for an HTML
element. The class attribute can be used
on any HTML element. The class name
can be used by CSS and JavaScript to
perform certain tasks for elements with
the specified class name. The class name
in CSS stylesheet using “.” symbol.
Example:
By Muhammad Ismail <element class="class_name">

Lecture 10
HTML
Layout method
By Muhammad Ismail
Websites often display content in
HTML Layout
multiple columns (like a magazine or a
Elements newspaper).
By Muhammad Ismail
HTML has several semantic elements
HTML Layout
that define the different parts of a web
Elements
page:
● header
● nav
● section
● article
● aside
● footer
● details
By Muhammad Ismail ● summary

Lecture 1 Html-Combined

Uploaded by

Document Information

Original Title

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 1 Html-Combined

Uploaded by

Copyright:

Available Formats

Lecture 1

❏ Visual Studio Code

● HTML stands for Hyper Text Markup

<h1>My First Heading</h1>

<p>This is another paragraph</p>

HTML automatically adds an extra

blank line before and after a

<p>This <br> is a para <br>

You can use comments to explain your

< !-- This is a comment --> Note that you

Description Lists A description list is a list of terms, with a

By Muhammad Ismail </dl>

Hyperlinks You can click on a link and jump to

When you move the mouse over a

<a href="url">link text</a>

The link text is the part that will be

Clicking on the link text, will send the

<p><a href="html_images.asp">HTML Images</a></p>

<p><a href="/css/default.asp">CSS Tutorial</a></p>

Address them send a new email):

The title attribute speciﬁes extra information

<a href="https://beqabil.com/" title="Go to

The HTML <img> tag is used to embed an

Images are not technically inserted into a

<img src="url" alt="alternatetext">

The value of the alt attribute should

<img src="img_chania.jpg" alt="Flowers

By Muhammad Ismail </table>

The HTML <form> element is used to create

The <form> element is a container for

Usually, the form data is sent to a ﬁle on the

In the example below, the form data is sent to a

The form-data can be sent as URL variables (with

The default HTTP method when submitting form

This example uses the GET method when

<form action="/action_page.php" method="get">

This example uses the POST method when

By Muhammad Ismail <form action="/action_page.php" method="post">

The HTML <video> Element:

To show a video in HTML, use the <video>

<video width="320" height="240" autoplay

<source src="movie.mp4" type="video/mp4">

By Muhammad Ismail </video>

The HTML <audio> Element

To play an audio ﬁle in HTML, use the

The text between the <audio> and </audio> tags will

HTML <audio> Autoplay

To start an audio ﬁle automatically, use the autoplay

<audio controls autoplay>

<audio controls autoplay muted>

The src Attribute

By Muhammad Ismail <img src="img_girl.jpg">

<img src="img_girl.jpg" alt="Girl with a

See what happens if we try to display an

<img src="img_typo.jpg" alt="Girl with a

<p style="color:red;">This is a red

The title Attribute:

The title attribute deﬁnes some extra

The value of the title attribute will be displayed

The following example speciﬁes English as

and class Attributes in The id attribute is a unique identiﬁer

By Muhammad Ismail <element id="id_name">

By Muhammad Ismail <element class="class_name">