DIGITAL TRANSFORMATION
MOVEMENT OF PAKISTAN
[Link]
HTML Introduction
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
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example
The <!DOCTYPE html> declaration defines that this document is an HTML5
document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks, tables,
lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add
some white space (a margin) before and after a paragraph.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Formatting Elements
Formatting elements were designed to display special types of text:
<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
Example
The HTML <b> element defines bold text, without any extra importance.
<b>This text is bold</b>
<strong>This text is important!</strong>
<em>This text is emphasized</em>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>This is <sub>subscripted</sub> text.</p>
Add Comments
With comments you can place notifications and reminders in your HTML code:
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more
information here –-! >
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
Example
<a
href="[Link]
isit [Link]!</a>
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was
clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
Example
Use target="_blank" to open the linked document in a new browser window
or tab:
<a href="[Link] target="_blank">Visit W3Schools!</a>
HTML 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.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax <img src="url" alt="alternatetext">
Define HTML Table
A table in HTML consists of table cells inside rows and columns.
A simple HTML table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
A simple HTML table:
<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>
HTML Lists
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 HTML 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>
Block-level Elements
A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out
to the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.
The <p> element is a block-level element.
The <div> element is a block-level element.
Example
<p>Hello World</p>
<div>Hello World</div>
<div> A Block Level Element
The <div> element is often used to group sections of a web page together.
Example
A <div> element with HTML elements:
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
id Attribute :
The id attribute specifies a unique id for an HTML element. The value of the id
attribute must be unique within the HTML document.
The id attribute is used to point to a specific style declaration in a style sheet.
It is also used by JavaScript to access and manipulate the element with the
specific id.
The syntax for id is: write a hash character (#), followed by an id name. Then,
define the CSS properties within curly braces {}.
In the following example we have an <h1> element that points to the id name
"myHeader". This <h1> element will be styled according to the #myHeader
style definition in the head section:
<!DOCTYPE html>
Example <html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
HTML Class Attribute
The HTML class attribute is used to specify a class for an HTML element.
Multiple HTML elements can share the same class.
Using The class Attribute
The class attribute is often used to point to a class name in a style sheet. It
can also be used by a JavaScript to access and manipulate elements with
the specific class name.
In the following example we have three <div> elements with a class attribute
with the value of "city". All of the three <div> elements will be styled equally
according to the .city style definition in the head section:
<!DOCTYPE html>
Example <html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
Example </div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
HTML Forms: <!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
HTML Forms:
<input type="text" id="lname" name="lname"
value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-
data will be sent to a page called
"/action_page.php".</p>
</body>
</html>
THANK
YOU!