Scribd
Upload
12 views

Lecture 1 Html-Combined

The document discusses HTML topics including setting up development tools, basic HTML tags like headings, paragraphs and line breaks, lists, links, images and tables. It provides examples and explanations of HTML elements and tags.

Uploaded by

Ali Saab
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Lecture 1 Html-Combined

The document discusses HTML topics including setting up development tools, basic HTML tags like headings, paragraphs and line breaks, lists, links, images and tables. It provides examples and explanations of HTML elements and tags.

Uploaded by

Ali Saab
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 57

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>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

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:[email protected]">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>
By Muhammad Ismail </table>
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>
By Muhammad Ismail </table>
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>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="John" readonly><br>
<label for="lname">Last name:</label><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>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="John" disabled><br>
<label for="lname">Last name:</label><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

You might also like