Web Programming HTML.pptx

Web
Programming
HTML
(HYPER TEXT MARKUP LANGUAGE)

Application Layer
 The application layer is closest to the end user.
 Network applications enable users to send and receive data with ease.
 The application layer acts as interface between the applications and the underlying network.
 Application layer protocols help
exchange data between programs
running on the source and
destination hosts.
 The TCP/IP application layer
performs the functions of the upper
three layers of the OSI model.
 Common application layer protocols
include: HTTP, FTP, TFTP, DNS.

Presentation and Session Layer
 The presentation layer has three primary functions:
o Format data
o Compress data
o Encrypt data
 Common standards for video include QuickTime and Motion Picture Experts Group (MPEG).
 Common graphic image formats are:
• Graphics Interchange Format (GIF)
• Joint Photographic Experts Group (JPEG)
• Portable Network Graphics (PNG) format

Presentation and Session Layer (cont.)
 The session layer creates and maintains dialogs between source and destination applications.
 The session layer handles the exchange of information to initiate dialogs, keep them active, and
to restart sessions that are disrupted or idle for a long period of time.

TCP/IPApplication Layer Protocols
 TCP/IP application protocols specify the format and control information necessary for
common Internet functions.
 Application layer protocols must be implemented in both the source and destination
devices.

Hypertext Transfer Protocol (HTTP)
 An application-layer protocol for transmitting hypermedia
documents, such as HTML.
 It was designed for communication between web
browsers and web servers, but it can also be used for other
purposes.
 HTTP follows a classical client-server model, with a client
opening a connection to make a request, then waiting until
it receives a response.

Client-Server Model
 The device requesting the information is called a client.
 The device responding to the request is called a server.
 Client and server processes are in the application layer.
 The client requests data from the server.
 The server responds by sending one
or more streams of data to the client.
 Application layer protocols describe the format
of the requests and responses
 The contents of the data exchange depends of the application in use.
 Email is an example of a Client-Server interaction.

Hypertext Transfer Protocol and Hypertext Markup Language
 A web address or uniform resource locator (URL) is a reference to a web server. A URL
allows a web browser to establish a connection to that web server.
 The URL http://cisco.com/index.html has three basic parts:
o http (the protocol or scheme)
o www.cisco.com (the server name)
o index.html (the specific filename requested)
 Using DNS, the server name portion of
the URL is then translated to the
associated IP address before the server
can be contacted.

Hypertext Transfer Protocol and Hypertext Markup Language
(cont.)
 The browser sends a GET request to the
server’s IP address and asks for the
index.html file.
 The server sends the requested file to the
client.
 The index.html was specified in the
URL and contains the HTML code for
this web page.
 The browser processes the HTML code
and formats the page for the browser
window based on the code in the file.
HTTP Protocol Step 2

HTTP and HTTPS
 HTTP
o Is a request/response protocol.
o Has three common message types: GET, POST, PUT.
o Is not secure. Messages can be intercepted.
 HTTPS uses authentication and
encryption to secure data.

Email Protocols
 Email is a store-and-forward method of sending, storing, and retrieving electronic messages.
 Email messages are stored in databases on mail servers.
 Email clients communicate with mail
servers to send and receive email.
 Mail servers communicate with other
mail servers to transport messages
from one domain to another.
 Email clients do not communicate
directly when sending email.
 Email relies on three separate protocols
for operation: SMTP (sending),POP (retrieving),
IMAP (retrieving).

SMTP Operation
 SMTP message formats require a message header and body.
 The body can contain any amount of text.
 The header must have a properly formatted recipient email address and a sender address.
 An SMTP client sends an email by
connecting to a SMTP server on
port 25.
 The server receives the message and
stores it message in a local mailbox or
relays the message to another mail server.
 Users use email clients to retrieve messages
stored on the server.
 IMAP and POP are two protocols commonly
used by email clients to retrieve messages.

POP Operation
 Messages are downloaded from the server to the client.
 The server listens on port 110 TCP for client requests.
 Email clients direct their POP requests to mail servers on port TCP 110.
 The POP client and server exchange commands and responses until the connection is closed or
aborted.
 POP allows for email messages
to be downloaded to the client’s
device (computer or phone) and
removed from the server.
 There is no centralized location
where email messages are kept.
 A downloaded message resides on
the device that triggered the download.

IMAP Operation
 IMAP is another protocol used to retrieve email messages.
 Allows for messages to be displayed to the user rather than downloaded.
 The original messages reside on the server until manually deleted by the user.
 Users view copies of the messages in their email client software.
 Users can create a folder hierarchy on
the server to organize and store mail.
 That file structure is displayed on the
email client.
 When a user decides to delete a message,
the server synchronizes that action and
deletes the message from the server.

Domain Name Service
 While IP addresses are crucial for network communication, they are not easy to
memorize.
 Domain names are created to make server addresses more user-friendly.
 Domain names such as http://www.cisco.com are user-friendly addresses associated with
the IP address of a specific server.

Domain Name Service (cont.)
When you type a URL in the browser, the following
steps take place:
 The browser checks for a DNS record to find the
corresponding IP address of the website.
 Once the browser receives the correct IP address, it
will build a connection with the server that matches
the IP address to transfer information.
 The browser sends an HTTP request to the server.
 The server handles the request and sends back a
response.
 The browser displays the HTML content.

Uniform Resource Locator (URL)
 URL stands for Uniform Resource Locator. A URL is the address of a given unique
resource on the Web.
 This address tells us that the particular resource is hosted on that address server.
 There are different parts of a URL which are:
a) Scheme
The first part of the URL is the scheme, which indicates the protocol that the browser must use to request the
resource. Usually for websites the protocol is HTTPS or HTTP (its unsecured version).
b) WWW(Sub-domain)
After protocol comes the famous WWW, it simply means that the resource you are seeking by the means of
this URL resides in the WWW subdomain of your domain name.
c) Domain name
Then the name of the resource owner (i.e. domain name) comes which is google in our example.

Uniform Resource Locator (URL)
d) Top-level domain
Domain name is followed by the type of category in which the owner domain is registered. .com means that the website
which is making this resource available to you is of the commercial nature.
e) File Path
The path refers to the exact location of a page, post, file, or other asset. The path resides after the hostname and is
separated by “/” (forward slash). The path/file also consists of any asset file extension, such as images (.jpg or .png, etc.),
documents (.pdf or .docx), and more.
But it is not compulsory that all URL will display the path.

DNS Hierarchy
 The DNS protocol uses a hierarchical system, with the root at the top and branches below. The
naming structure is broken down into small, manageable zones.
 Each DNS server is only responsible for managing name-to-IP mappings for that small portion of
the DNS structure.
 Requests for zones not stored in a specific DNS server are forwarded to other servers for
translation.
 Top-level domains represent either the type
of domain or the country of origin.
Examples of top-level domains are:
o .com - a business or industry
o .org - a non-profit organization
o .au - Australia
o .co - Colombia

Hyper Text Markup Language
 HTML stands for Hyper Text Markup Language, which is the most widely used
language on Web to develop web pages.
 Hypertext refers to the way in which Web pages (HTML documents) are linked together.
Thus, the link available on a webpage is called Hypertext.
 Markup Language, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure it to
display.

Applications of HTML
 Web pages development - HTML is used to create pages which are rendered over the
web. Almost every page of web is having html tags in it to render its details in browser.
 Internet Navigation - HTML provides tags which are used to navigate from one page to
another and is heavily used in internet navigation.
 Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs,
desktop or laptops owing to responsive design strategy.
 Offline support HTML pages once loaded can be made available offline on the machine
without any need of internet.
 Game development- HTML5 has native support for rich experience and is now useful in
gaming development area as well.

HTML Elements
 An element usually consists of an opening tag (<element_name>), a closing tag
(</element_name>), which contain the element's name surrounded by angle brackets, and
the content in between, for example:
<element_name>...content...</element_name>
 There are some HTML elements that don't have a closing tag or any contents. These are
called void elements. Void elements include:
<img>, <meta>, <link> and <input>.
 It is important to note the difference between elements and tags:
Elements: video, audio, table, footer
Tags: <video>, <audio>, <table>, <footer>, </html>, </body>

HTML Elements
All the HTML elements can be categorized into two categories:
(a) Block Level Elements
Appear on the screen as if they have a line break before and after them. For example,
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, and
<address> elements are all block level elements. They all start on their own new line, and
anything that follows them appears on its own new line.
(b) Inline Elements.
Inline elements, on the other hand, can appear within sentences and do not have to appear
on a new line of their own.
<b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>,
<cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

HTMLAttributes
 Attributes contain additional pieces of information. Attributes take the form of an
opening tag and additional info is placed inside.
 An example of an attribute is:
<img src="mydog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of the <img>
tag.

Basic HTML Document
 In its simplest form, following is an example of an HTML document:
The resulted page structure displayed on the web browser :
<!DOCTYPE html>
<html lang =”eng”>
<head>
<title> Hello world Document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
This is a heading
Document content goes here.....

Basic Elements of HTML Document
 <!DOCTYPE html> declaration defines that this document is an HTML5 document
 <html> element is the root element of an HTML page. This tag contains an attribute
called lang, which has been given the value en. This particular attribute is stating that
the language of the document is English.
 <head> element contains meta information about the HTML page
 <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab).
 <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.
 <h1> element defines a large heading.
 <p> element defines a paragraph.

The Body Tag
 The HTML <body> tag defines the main content of the HTML document or the section
of the HTML document that will be directly visible on your web page. This tag is also
commonly referred to as the <body> element.
Attributes:
 background: It contains the URL of the background image. It is used to set the
background image.
 bgcolor: It is used to specify the background color of an image.
 alink: It is used to specify the color of the active link.
 link: It is used to specify the color of visited links.
 text: It specifies the color of the text in a document.
 vlink: It specifies the color of visited links.

The Body Tag
<!DOCTYPE html>
<html>

<body bgcolor="green">
<h2>GeeksforGeeks</h2>
<p> It is a Computer Science portal For
Geeks </p>
</body>

</html>
GeeksforGeeks
It is a Computer Science portal
For Geeks

The Paragraph tag
 The HTML <p> element defines a paragraph.
 The <p> tag offers a way to structure your text into different paragraphs.
 Each paragraph of text should go in between an opening <p> and a closing </p> tag.
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of
<p>Here is a second paragraph of
text.</p>
<p>Here is a third paragraph of
</body>
</html>
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.

Heading Tags
 HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>.
 <h1> defines the most important heading.
 <h6> defines the least important heading.
<!DOCTYPE html>
<html>
<head>
<title>Heading
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

Centering Content
 You can use <center> tag to put any content in the center of the page or any table cell.
<!DOCTYPE html><html>
<head>
<title>Centring Content
Example</title> </head>
<body>
<p>This text is not in the
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
This text is not in the center.
This text is in the center.

HTML Comments
 HTML comments are placed in between  tags.
 So, any content placed with-in  tags will be treated as
comment and will be completely ignored by the browser.

Empty HTML Elements
 The tags that do not contain any closing tags are empty tags. Empty tags contain only the
opening tag but they perform some action in the webpage.
Element Description
img
It accepts a source link of the image and some other attributes like height, width, etc, and is used to embed the image in the
HTML Document.
br The term br is an abbreviation for break, It introduces a line break in the document.
hr The horizontal rule is used to introduce a graphical line in the HTML document. It is also called a thematic break. Follow this .
area
The area element is used inside image map. It defines some particular clickable areas for the image which further may lead
user to a different link.
embed The embed element is used as a container to display any external resource like image, video, plugin etc.
input This element is used to receive input from user.
meta We write this element in the head tag of document, it is used to specify some meta data(information) about the page.
source The source element specifies media element for picture, video, or audio element.
col It is used inside the colgroup element of tables in html, and specifies the common properties of columns, ex- style.
link It establishes a link or association between some external resource and html document. It is generally used inside the head tag.

Empty Elements /Image Tag
 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 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.
 You can use the style attribute to specify the width and height of an image.
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
 Use the CSS float property to let the image float to the right or to the left of a text:
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

Empty Elements / Image Tag
 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. It has
the following syntax:
<img src="url" alt="alternatetext">
 The <img> tag has two required attributes:
 src - Specifies the path to the image
 alt - Specifies an alternate text for the image

Empty Elements / Image Tag
Image Size - Width and Height
 You can use the style attribute to specify the width and height of an image.
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Image Floating
 Use the CSS float property that will be explained in details later, to let the image float to
the right or to the left of a text:
 <p><img src= "smiley.gif"alt = “Smiley face“ style= "float:right; width:42px;
height:42px;" >
 <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

Empty Elements/ Line Break
 Whenever you use the <br /> element, anything following it starts from the next line.
 The <br /> tag has a space between the characters br and the forward slash.
<!DOCTYPE html>
<html>
<head> <title>Line Break
</head>
<body> <p>Hello <br />
You delivered your assignment ontime.<br
Thanks<br />
Maha</p>
</body>
</html>
Hello
You delivered your assignment on time.
Thanks
Maha

Empty Elements/ Horizontal line
 Horizontal lines are used to visually break-up sections of a document.
 The <hr> tag creates a line from the current position in the document to the right margin
and breaks the line accordingly.
<head> <title>Horizontal Line
Example</title> </head>
<body>
<p>This is paragraph one and should be on
top</p>
<hr />
<p>This is paragraph two and should be at
bottom</p> </body>
</html>
This is paragraph one and should be on top
This is paragraph two and should be at
bottom

Empty Elements /The <meta> Tag
 The HTML <meta> tag is used to provide metadata about the HTML document
which includes information about:
• page expiry,
• page author,
• list of keywords,
• page description etc.

Empty Elements /<link> Tag
 The HTML <link> tag is used to specify relationships between the current
document and external resource.
<head>
<title>HTML link Tag Example</title>
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

The Anchor Tag
 Links are included in an attribute opened by the <a> tag.
 The <a> (or anchor) opening tag is written in the format:
<a href="url">link text</a>
 The most important attribute of the <a> 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.
 Example:
<a href="https://blogging.com/how-to-start-a-blog/">Click Here </a>

The Anchor Tag
 By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue.
 A visited link is underlined and purple.
 An active link is underlined and red.

The Anchor Tag
Target Attribute
 By default, the linked page will be displayed in the current browser window.
The target attribute specifies where to open the linked document.
 _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
 <a href="https://www.youtube.com/" target="_blank">Visit youtubeA</a>

The Anchor Tag
Relative URL
Examples above are using an absolute URL (a full web address) in the 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)
<p><a href="https://www.w3.org/">W3C</a></p>
<p> <a href="https://www.google.com/">Google</a></p>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

The Anchor Tag
Image as alink
 To use an image as a link, just put the <img> tag inside the <a> tag:
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style=
"width:42px;height:42px;"> </a>

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

Grouping Content Elements
 The <div> and <span> elements allow you to group together several elements to create sections or subsections of a
page.
 <div> element is used to group some elements together appearing with the same format style.
<!DOCTYPE html><html><head>
<title>Div Tag Example</title> </head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a>
<a href = "/about/contact_us.htm">CONTACT</a>
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body></html>
HOME | CONTACT | ABOUT
Content Articles
Actual content goes here.....

Grouping Content Elements
 The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence
or paragraph which you want to group together, you could use the <span> element as follows.
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style =
"color:green">span tag</span>
and the <span style = "color:red">div
tag</span> along with CSS</p>
</body
</html>
This is the example of span tag and the div tag
along with CSS

Color Codes/Hex color codes
 Three byte hexadecimal numbers (meaning they consist of six digits), with each byte, or
pair of characters in the Hex code, representing the intensity of Red, Green and Blue in the
color respectively.
 Hex code byte values range from 00, which is the lowest intensity of a color, to FF which
represents the highest intensity.
 The color white is made by mixing each of the three primary colors at their full intensity,
resulting in the Hex color code of #FFFFFF.
 The three primary colors, red, green and blue, are made by mixing the highest intensity
of the desired color with the lowest intensities of the other two:
 #FF0000
 #00FF00
 #0000FF
 With modern browsers supporting the full spectrum of 24-bit color, there are 16,777,216

Color Codes /RGB Color Values
 A color can be specified as an RGB value, using this formula:
 rgb(red, green, blue)
 Each parameter (red, green, and blue) defines the intensity of the color with a value
between 0 and 255.
 This means that there are 256 x 256 x 256 = 16777216 possible colors!
 For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value
(255), and the other two (green and blue) are set to 0.
 Rgb(0, 255, 0) is displayed as green
 Rgb(0, 0, 255) is displayed as blue
 To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
 To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Color Codes RGBA
 RGBA color values are an extension of RGB color values with an Alpha
channel - which specifies the opacity for a color.
 rgba(red, green, blue, alpha)
 The alpha parameter is a number between 0.0 (fully transparent) and 1.0
(not transparent at all)

Color Codes /HLSA Color System
Used in photographic editing or design (in general).

Hue: can be any value between 0º and 360º and forms a "color wheel", where we can set
any color ([0º = red], [120º = green], [240º = blue]).

SATURATION (saturation): this value is a percentage (from 0% to 100%) where 0% we
get that there is no color, that is to say that we have a gray scale, and with 100% we have
the whole color.

BRIGHTNESS (lightness): this value is also a percentage, and controls the brightness of
the color, with 0% we have the color black, with 100% the color white and with 50% we
have color.

ALPHA: this value goes from 0 to 1, where 0 is transparent and 1 is opaque.


HTML Lists
Unordered lists
 create the familiar set of bullet points seen in Word documents.
 This list is created by using HTML <ul> tag.
 Each item in the list is marked with a bullet.
<head> <title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body></html
• Beetroot
• Ginger
• Potato
• Radish

HTML Lists
The type Attribute
 You can use type attribute for <ul> tag to specify the type of bullet you like.
 Square <ul type = "square">
• Disc <ul type =“disc”>
o Circle <ul type = “circle”>

HTML Lists
<ul type = "square">
<title>HTML Unordered List</title> </head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body></html>
 Beetroot
 Ginger
 Potato
 Radish

HTML Lists
<ul type = "disc">
<!DOCTYPE html><html> <head>
<title>HTML Unordered List</title> </head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body></html>
• Beetroot
• Ginger
• Potato
• Radish

HTML Lists
<ul type = "circle“>
<title>HTML Unordered List</title>
</head><body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body></html>
o Beetroot
o Ginger
o Potato
o Radish

Ordered Lists
 Ordered lists are identical to unordered lists, except they use the <ol> tag rather
than the <ul> tag.
<!DOCTYPE html><html><head> <title>HTML
Ordered List</title></head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body> </html>
1.Beetroot
2.Ginger
3.Potato
4.Radish

Ordered Lists
 <ol type = "1">
 <ol type = "I“>
 <ol type = "i“>
 <ol type = "A“>
 <ol type = "a“>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body></html>
1.Beetroot
2.Ginger
3.Potato
4.Radish

Ordered Lists
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body></html>
I. Beetroot
2. Ginger
3. Potato
4. Radish

Ordered Lists
<!DOCTYPE html><html><head> <title>
Ordered List</title> </head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body></html>
i. Beetroot
ii. Ginger
iii. Potato
iv. Radish

Ordered Lists
<title>HTML Ordered List</title> </head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body> </html>
A. Beetroot
B. Ginger
C. Potato
D. Radish

Ordered Lists
<!DOCTYPE html><html> <head><title>HTML
Ordered List</title></head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
a. Beetroot
b. Ginger
c. Potato
d. Radish

Ordered Lists
 The start Attribute:
You can use start attribute for <ol> tag to specify the starting point of numbering you
need. Following are the possible options:
 <ol type = "1" start = "4"> - Numerals starts with 4.
 <ol type = "I" start = "4"> - Numerals starts with IV.
 <ol type = "i" start = "4"> - Numerals starts with iv.
 <ol type = "a" start = "4"> - Letters starts with d.
 <ol type = "A" start = "4"> - Letters starts with D.

Definition Lists
 Entries are listed like in a dictionary .
 The definition list is the ideal way to present a glossary, list
of terms, or other name/value list.
 <dl> − Defines the start of the list
 <dt> − A term
 <dd> − Term definition
 </dl> − Defines the end of the list

Definition Lists
<title>HTML Definition List</title> </head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
HTML
This stands for Hyper Text Markup
Language
HTTP
This stands for Hyper Text Transfer
Protocol

Table Element
 You add one row at a time using the tr (table row) element and provide values
for all the relevant columns.
 The rows can either be added to the header, body or footer of the table.
 <tr> - represents rows
 <td> - used to create data cells
 <th> - used to add table headings
 <caption> - used to insert captions
 <thead> - adds a separate header to the table
 <tbody> - shows the main body of the table
 <tfoot> - creates a separate footer for the table

Table Element
 Cellpadding and Cellspacing Attributes
The cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the content
within a cell.
 Colspan and Rowspan Attributes
Colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or
more rows.

Table Element
<!DOCTYPE html>
<html>
<head><title>HTML Table Cellpadding</title> </head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr> <th>Name</th>
<th>Salary</th>
</tr>
<tr> <td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr> <td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>

Table Element
<head> <title>HTML Table Colspan/Rowspan</title> </head>
<body>
<table border = "1">
<tr> <th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr> <td>Row 2 Cell 2</td>
</tr>
<tr> <td colspan = "3">Row 3 Cell 1</td>
</tr>
</table></body></html>

Table Element
 Table background can be set using one of the following two ways :
 bgcolor attribute − sets background color for whole table or just for
one cell.
 background attribute − sets background image for whole table or just
for one cell.
 EX:
 <table border = "1" bordercolor = "green" bgcolor = "yellow">
 EX:
 <table border = "1" bordercolor = "green" background =
"/images/test.png">

Table Element
<!DOCTYPE html><html> <head> <title>HTML Table Colspan/Rowspan</title>
</head<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr> <th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr> <td rowspan = "2">Row 1 Cell 1</td>
</tr>
<tr> <td>Row 2 Cell 2</td>
</tr>
<tr> <td colspan = "3">Row 3 Cell 1</td> </tr>
</table>
</body></html

Table Element
Column 1 Column 2 Column 3
Row 1 Cell 1
Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Table Element
 A table width and height can be set using width and
height attributes
 <table border = "1" width = "400" height = "150">
 The three elements for separating the head, body, and foot of a table
are :
 <thead> − to create a separate table header.
 <tbody> − to indicate the main body of the table.
 <tfoot> − to create a separate table footer.

Marquee in HTML
 Marquee element is used to insert a scrolling area of text
Marquee attributes
 behavior :Sets how the text is scrolled within the marquee. Possible
values are scroll, slide and alternate. If no value is specified, the default
value is scroll.
 bgcolor :Sets the background color through color name or hexadecimal
value.
 direction :Sets the direction of the scrolling within the marquee.
Possible values are left, right, up and down. If no value is specified, the
default value is left.
 height :Sets the height in pixels or percentage value.
 hspace : Sets the horizontal margin.

Marquee in HTML
 loop :Sets the number of times the marquee will scroll. If no value is
specified, the default value is −1, which means the marquee will
scroll continuously.
 scrollamount :Sets the amount of scrolling at each interval in pixels.
The default value is 6.
 scrolldelay :Sets the interval between each scroll movement in
milliseconds. The default value is 85. Note that any value smaller than
60 is ignored and the value 60 is used instead unless truespeed is
specified.
 vspace :Sets the vertical margin in pixels or percentage value.
 width :Sets the width in pixels or percentage value.

Marquee in HTML
<marquee>This text will scroll from right to left</marquee>
<marquee direction="up">This text will scroll from bottom to top</marquee>
<marquee direction="down" width="250" height="200" behavior="alternate"
style="border:solid">
<marquee behavior="alternate"> This text will bounce </marquee>
</marquee>

Frameset
 The <frameset> tag defines, how to divide the window into frames.
 The rows attribute of <frameset> tag defines horizontal frames and cols
attribute defines vertical frames.
 Each frame is indicated by <frame> tag and it defines which HTML
document shall open into the frame.
 The <noframes> tag is the backup for those browsers that does not
support frames.

Frameset
<!DOCTYPE html><html><head><title>HTML Frames</title></head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src ="/html/main_frame.htm"/>
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body> </noframes>
</frameset></html>

Frameset
<!DOCTYPE html><html> <head> <title>HTML Frames</title> </head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset></html>

Iframe
 You can define an inline frame with HTML tag <iframe>.
 The <iframe> tag is not somehow related to <frameset> tag, instead,
it can appear anywhere in your document.
 The <iframe> tag defines a rectangular region within the document
in which the browser can display a separate document, including
scrollbars and borders. An inline frame is used to embed another
document within the current HTML document.

Iframe
<!DOCTYPE html><html> <head> <title>HTML
Iframes</title> </head> <body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height = "200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>

Iframe as target
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML iframe Tag</h2>
<p>Click the link text</p>
<iframe height="300"
width="350"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210910170539/gfg-
221x300.png"
name="iframe_a">
</iframe>
<p><a href=
"https://ide.geeksforgeeks.org/tryit.php"
target="iframe_a">
GeeksforGeeks IDE
</a> </p>
</body></html>

Forms
 A form is a set of input fields, grouped together inside a single
element.
 In HTML terms, forms are created with the <form> element.
Forms open with <form> and close with </form>
 <form>
.
form elements
.
</form>

Forms
 All forms start with the <FORM> tag and end with </FORM>.
 The form tag has two main properties: METHOD and ACTION.
 Action: Backend script ready to process your passed data.
 Method: Method to be used to upload data. The most frequently
used are GET and POST methods.
 Target: Specify the target window or frame where the result of the
script will be displayed. It takes values like _blank, _self, _parent
etc.
 Enctype: You can use the enctype attribute to specify how the
browser encodes the data before it sends it to the server.

Forms
 HTTP POST requests supply additional data from the client
(browser) to the server in the message body.
 In contrast, GET requests include all required data in the URL.
Forms in HTML can use either method by specifying
method="POST" or method="GET" (default) in the <form>
element.
 The method specified determines how form data is submitted to
the server. When the method is GET, all form data is encoded into
the URL, appended to the action URL as query string parameters.
 With POST, form data appears within the message body of the
HTTP request.

Forms
 GET:
 The submitted form data will be visible in the page address field.
For Example: http://localhost/form1.html?
username=Steve&email=steve@example.com
 Appends form-data into the URL in name/value pairs
URL?name=value&name=value.
 The length of a URL is limited (about 3000 characters).
 The GET method is appropriate for small forms

Forms
The action attribute defines the action to be 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.

Forms / Controls
 There are different types of form controls that you can use to collect data using
HTML form :
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button

Forms / The HTML <form> Elements
 <input> element can be displayed in several ways, depending on the type attribute.
<!DOCTYPE html>
<html>
<body>
<h2>The input Element</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

The different input types you can use in HTML:
•<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">
•<input type="submit">
•<input type="text">
•<input type="time">
•<input type="url">
•<input type="week">

 <label> defines a label for several form elements.
 The <select> element defines a drop-down list. To define a pre-selected
option, add the selected attribute to the option, while the size attribute to
specify the number of visible values. The multiple attribute to allow the
user to select more than one value .
 <option> used to define options in a drop-down list.

<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form></body></html>

 <textarea> It is used to get input long text content. The rows attribute
specifies the visible number of lines in a text area. The cols attribute
specifies the visible width of a text area.
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

 <button> It defines a clickable button to control other
elements or execute a functionality.
<button type="button" onclick="alert('Hello World!’)”>
Click Me! </button>

 <fieldset> It is used to draw a box around other form elements and
group the related data.
 <legend> It defines caption for fieldset elements.
<fieldset>
<legend>Personalia:</legend>
<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"><br><br>
<input type="submit" value="Submit">
</fieldset>

•<datalist> It is used to specify pre-defined list options for input controls.
•The list attribute of the <input> element,
•must refer to the id attribute of the <datalist> element.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

 <output> It displays the output of performed calculations.
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

Form/Radio button ex.
<form>
<p>Please select your preferred contact method:</p>
<div>
<input type="radio" id="contactChoice1"
name="contact" value="email">
<label for="contactChoice1">Email</label>
name="contact" value="phone">
<label for="contactChoice2">Phone</label>
name="contact" value="mail">
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>

Form/Checkboxs
 <form action="/action_page.php" method="get">
 <input name="vehicle" value="Bike" type="checkbox"> I have
a bike<br>
 <input name="vehicle" value="Car" checked="checked"
type="checkbox"> I have a car<br>
 <input value="Submit" type="submit">
 </form>

Bookmarks in HTML
 <p><a name="bottom">A lot of text that causes
scrolling goes here.</p>
 <p><a href="#bottom">Bottom</a></p>
 <p id="opening">Here is an introductory paragraph with
the selector 'opening' attached to it.</p>
 <p><a href="#opening">Jump to opening</a></p>

Image Map
 <img src="workplace.jpg" alt="Workplace"
usemap="#workmap">
<map name="workmap">
 <area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
 <area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.htm">

<area shape="circle" coords="337,300,44" alt="Coffee"
href="coffee.htm">
</map>

Semantic HTML Elements
A semantic element clearly describes its meaning to both
the browser and the developer.
Examples of non-semantic elements:
<div> and <span> - Tells nothing about its content.
Examples of semantic elements:
<form>, <table>, and <article> - Clearly defines its content.

Semantic Elements
Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure>
Specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

Web Programming HTML.pptx

More Related Content

Similar to Web Programming HTML.pptx

More from MarwaAnany1

Recently uploaded

Web Programming HTML.pptx

Editor's Notes