HTMLPresentation

HTML
HYPERTEXT MARKUP LANGUAGE

WHAT IS HTML?
 HTML is the standard markup language for Web pages.
 HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989.
 HTML is the language in which most websites are written.
 HTML is used to create pages and make them functional. It consists of a series of elements.
 Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another
document altogether.
 A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses
two things: Tags and Attributes.

<!DOCTYPE html> All HTML documents must start with a
<html> document type declaration: <!DOCTYPE html>.
<body>
The HTML document itself begins
with <html> and ends with </html>.
<h1>My First Heading</h1>
<p>My first paragraph.</p> The visible part of the HTML document is
between <body> and </body>.
</body>
</html>
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.

Tag Name Purpose
<html> … </html> The root element
<head> … </head> The document head
<title> … </title> The page title
<body> … </body> The page’s content
<h1> … </h1> A section heading
<p> … </p> A paragraph
<a> … </a> A link
<img> An image
<div> … </div> A block-level container for content
<span> … </span> An inline container for content
<br> or <br/> Break the Line (Next line)
<table>…</table> Generate a Table
<font>…</font> Changes font attributes for text within tags
<input>…</input> Generate a Checkbox
<form>…</form> Generates a container for all form elements
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: name="value“
• Example:
i. <img src="img_girl.jpg" width="500" height="600">
ii. <a href="https://www.ABC.com">Click Here</a>
IMAGE TAG
<img src="animal.png" height="180" width="300" alt="animal image">
1) src
It is a necessary attribute that describes the source or path of the image..
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe the image in words.
3) width
It is an optional attribute which is used to specify the width to display the image. It is not recommended now.
4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image and object elements.
FONT TAG
(Not Supported in HTML5)
(Supported in HTML5)
<p>
<p>This is normal text without any font styling</p>
<font color="blue">Text with normal size and default face</

font>
<p style="color: blue;">Text with normal size and default face</p>
</p>
<p style="font-
<p> <font size="5" color="green">Text with Increased size and de
size: 25px; color: green;">Text with Increased size and default face </
fault face</font>
p>
</p>
<p style="font-family: cursive; color: red;">Text with Changed face</
<p> p>
<font color="red" face="cursive">Text with Changed face</
font>
</p>
HTML ANCHOR
 The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well
as files, location, or any URL. The "href" attribute is the most important attribute of the HTML a tag. and which links to
destination page or URL.
 href attribute of HTML anchor tag

 The href attribute is used to define the address of the file to be linked. In other words, it points out the destination page.
 The syntax of HTML anchor tag is given below.
 Syntax
<a href="second.html">Click for Second Page</a>
<!DOCTYPE html>  Notes
<html> • An unvisited link is displayed underlined and blue.
<body> • A visited link displayed underlined and purple.
• An active link is underlined and red.
<ahref="https://www.edubridgeindia.com/login” • The target attribute can only use with
target="_blank"> Click Here </a> • href attribute in anchor tag.
• If we will not use target attribute then
</body> • link will open in same page.
</html>
 NAV tag : The HTML <nav> element is used to define a set of navigation links.
<nav>
<a href="https://html.com/">HTML</a>|
<a href="https://www.java.com/">Java</a>|
<a href="https://www.php.net/">PHP</a>|
<a href=" https://www.python.org/">CSS</a>|
</nav>
STYLE TAG
The HTML <Style> attribute is used to add styles to an element, such as color, font, size, and more.
Setting the style of an HTML element, can be done with the Style attributes.
 Use the style attribute for styling HTML elements

 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment
Examples:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<h1 style="color:blue;">This is a heading</h1>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
<p style="text-align:center;">Centred paragraph.</p>
</body>
FRAME TAG
 HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML <iframe> tag
defines an inline frame, hence it is also called as an Inline frame.
 An HTML iframe embeds another document within the current HTML document in the rectangular region.
 The webpage content and iframe contents can interact with each other using JavaScript.
iframe Syntax
 An HTML iframe is defined with the <iframe> tag:
 <iframe src="URL"></iframe>
<!DOCTYPE html>(Not Supported in <!DOCTYPE html> (Supported in <!DOCTYPE html>
HTML5) <html>
HTML5)
<html> <head> <body>
<style>
<head> <h2>HTML Iframes</h2>
div{
<title>Frame tag</title> background-color: #7fffd4; <p>Using iFrame tag</p>

height: 500px;
</head> <iframe src="https://www.edubridge.com/" style=
}
“height:300px; width:400px"></iframe>
</style>
<frameset cols="25%,50%,25%">
</head> </body>
<frame src="frame1.html" > <body>
<frame src="frame2.html"> </html>
<div>
<frame src="frame3.html">
<h2>This is first frame</h2>
</frameset> </div>
</body>
</html>
</html>
 HTML Headings
There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest level h1
(main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is
used for least important.
<h1>Heading no. 1</h1>
 HTML bold tag
HTML bold tag is represented by <b> tag.

HTML <b> tag is used to display the written text in bold format. It is strictly a presentational element. If you want to show your
text in bold letters and not have real semantic meaning, then put it within <b>.......</b> tag.
Note: According to HTML5 specification, b tag should be used only if no other tag is appropriate. For example: If you want to write a heading, you
must use the header tag <h1> to <h6>. Important statement should be denoted within <strong>.....</strong> tag, and the text you want to mark
or highlight, must be put within <mark>...</mark> tag.
 HTML <i> tag
HTML <i> tag is used to represent a part of text in a different voice from the surrounding text. The content within <i> tag
usually renders in italic type on the browser.
 HTML <u> tag
HTML <u> tag is used to define a span of inline text with a non-textual annotation. It rendered as an solid underlined text, but it
can be changed using CSS properties. This tag was deprecated in HTML 4.0 and redefined in HTML5.
In HTML5, <u> tag is used to represent the text that is stylistically different with normal text.
HTML Character Entities
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark (apostrophe) ' '
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered trademark ® ®

<!DOCTYPE html>
<html> <!DOCTYPE html>
<body> <html>
<head>
<h1>HTML Entity Example</h1> <meta charset="UTF-8">
</head>
<h2>The less-than sign: <</h2> <body>
</body> <p>I will display A B C</p>

</html> <p>I will display A B C</p>
<h1>My First Emoji</h1>

<!DOCTYPE html> <p>😀</p>
<html>
<body> <h1>Sized Emojis</h1>
<h1>HTML Entity Example</h1> <p style="font-size:48px">

😀 😄 😍 💗
<h2>The ampersand (and) sign: &</h2> </p>
</body> </body>
</html> </html>
LIST IN HTML
 HTML Lists are used to specify lists of information. All lists may contain one or more list elements.
 Note: We can create a list inside another list, which will be termed as nested List.
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a
description list
<dd> Describes the term in a
description list
<p>List of Indian States with their capital</p> <!DOCTYPE html>
<ol> <html>
<li>Delhi
<ul> <dl>
<li>NewDelhi</li>
</ul> <dt>Java</dt>
</li> <dd>- Java is platform independent and object-oriented programming
<li>Haryana language.</dd>
<ul>
<li>Chandigarh</li> <dt>Hibernate</dt>
</ul> <dd>- Hibernate is an open source object relational mapping tool for
</li> Java.</dd>
<li>Gujarat
<ul> <dt>Oracle</dt>
<li>Gandhinagar</li> <dd>- It is a multinational technology corporation.</dd>
</ul>
</li> </dl>
<li>Rajasthan </html>
<ul>
<li>Jaipur</li>
</ul>
</li>
<li>Maharashtra
<ul>
<li>Mumbai</li>
</ul>
</li>
<li>Uttarpradesh
<ul>
<li>Lucknow</li></ul>
</li>
</ol>
TABLE IN HTML
HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.
We can create a table to display data in tabular form, using <table>
element, with the help of <tr> , <td>, and <th> elements.
td
caption
Defines a table cell. Must be a direct child of a <tr>
Defines a title of a <table>.
tfoot
table
Defines a group of table rows <tr> at the end of a <table>
Defines a container for tabular data.
th
tbody
Defines a table header. Must be a direct child of a <tr>
Defines a group of table rows <tr>
tr
thead
Defines a table row.
Defines a group of table rows <tr> at the start of a <table>
Example 1: Example 2: </tfoot>
<tbody>
<table> <head> <tr>
<caption>The Beatles</caption> <style> <td>John Lennon</td>
<tr> table, th, td { <td>Rhythm Guitar</td>
<td>John Lennon</td> border: 1px solid black; </tr>
<td>Rhythm Guitar</td> } <tr>
</tr> table.center { <td>Paul McCartney</td>
<tr> margin-left: auto;
<td>Paul McCartney</td> margin-right: auto;
<td>Bass</td> } <td>Bass</td>
</tr> </style> </tr>
<tr> </head> <tr>
<td>George Harrison</td> <body> <td>George Harrison</td>
<td>Lead Guitar</td> <table> <td>Lead Guitar</td>
</tr> <thead> </tr>
<tr> <tr> <tr>
<td>Ringo Starr</td> <th>Name</th> <td>Ringo Starr</td>
<td>Drums</td> <th>Instrument</th> <td>Drums</td>
</tr> </tr> </tr>
</table> </thead> </tbody>
<tfoot> </table>
<tr>
<th>Name</th>
<th>Instrument</th>
</tr>
LEGEND TAG
• The <legend> element adds a caption to a <fieldset>.
• This element helps users better understand input elements and forms.
• The <legend> tag must be the first tag inside <fieldset>.
Example:
<fieldset>
<legend>Choose your favorite monster</legend>
<input type="radio" id="kraken" name="monster">

<label for="kraken">Kraken</label><br/>
<input type="radio" id="sasquatch" name="monster">

<label for="sasquatch">Sasquatch</label><br/>
<input type="radio" id="mothman" name="monster">

<label for="mothman">Mothman</label>
</fieldset>
PROGRESS TAG
The <progress> tag represents the completion progress of a task.
Tip: Always add the <label> tag for best accessibility practices!
Example:
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
HEADER AND FOOTER
• HTML <header> tag is used as a container of introductory content or navigation links. Generally a <header> element contains one or more heading elements, logo or icons or
author's information.
• You can use several <header> elements in one document, but a <header> element cannot be placed within a <footer>, <address> or another <header> element.
• HTML <footer> tag is used to define a footer for a document or a section. It is generally used in the last of the section (bottom of the page).
• The footer tag is included in HTML5.
• HTML <footer> tag contains information about its containing elements for example:
• author information
• contact information
• copyright information
• sitemap
• back to top links
• related documents etc.
• Note: You can have one or many footer elements in one document.
Examples
<header> <footer>
<h2>ABC.com</h2> <p>Posted by: ABC</p>
<p> World's no.1 shopping website</p> <p>
</header> <address>Baner, Pune Maharashtra
India </address> </p>
<p>Contact information:
<a href="mailto:shraddha@gmail.com">shraddha@gmail
.com</a>.
</p>
</footer>
Vector Graphics:
This is a new addition to the revised version which has hugely impacted the use of Adobe Flash in websites. It
can be used to draw graphics with various shapes and colors via scripting usually JS. Vector graphics are scalable,
easy to create and edit. It also supports interactivity and animation. Having a smaller file size makes transferring and
loading graphics much faster on the web. That’s the reason why many people prefer to use vector graphics.
Example:
<svg id = "svgelem" height = "200" xmlns = "http://www.abc.org/2000/svg">
<circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
</svg>
Figure and Figcaption:
HTML5 allows to use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a
caption for the photo. The <figcaption> tag defines a caption for a <figure> element. This tag provides a container for
content that is equivalent to a figure. It can be used to group a caption with one or more images, a block of code, or other
content.
Example:
<figure>
<img
src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/
download3.png" alt="GFG" style="width:50%">
<figcaption>Fig.1 - Geeksforgeeks.</figcaption>
</figure>
Placeholder Attribute:
The placeholder attribute specifies a short hint that describes the expected value of an input field/text area. The short
hint is displayed in the field before the user enters a value.
Example:
<body>
<center>
<h1 style="font-size:25px;font-style:italic;">
Application Form
</h1>
<h2 style="font-size:25px;font-style:italic;">
Placeholder Attribute in Input Element
</h2>
<form action=" ">
<input type="text" name="fname"
placeholder="First name">
<br>
<input type="text" name="lname"
placeholder="Last name">
<br>
<input type="submit" value="Submit">
</form>
</center>
</body>
New Features Of HTML5:
 Storage: In the case of HTML, we can use the browser as the temporary storage whereas, in the case of HTML5, application cache, web SQL database,
and web storage is used.
 Ease of use: While HTML5 does have risks like constant updates, it is generally easy to keep up with the changes & updates because of simpler syntax
as compared to other versions of HTML.
 New types for input tags: input is an attribute which is an old attribute but in HTML, it is reintroduced with new values like email, month,
number, range, search, Tel, color, week, URL, time, date, datetime-local etc. These are the new values which can be contain by the input tag.
• ContentEditable: It is an attribute which is used to permit the user to edit the content. It creates What You See What You Get so easy. Content will
be editable by clicking on it.
• Progress: This tag is used to check the progress of a task during execution of that. Progress tag can used with the conjunction of JavaScript. It is like
progress bar.
<progress value="22" max="100"></progress>
• Section: Section tag is used to divide a document or in parts or sections. For example: An article can have many sections like header, footer,
latest news and section for main content etc.
• Main: main is a tag which is used to contain the main content of the page. More than one main tag is not accepted in the document and this tag
can not be inside in article, aside, footer, header tags. It does not include the navigation bar, header and footer.
 Required Attribute
It is another important features that is there in the form tag. It helps in gathering of all the mandatory information that is there in the form. Without this
it will not be possible to submit the form. It is Boolean attribute. The form will all the required fields being filled will be allowed to submit.
It works with text, URL, email, password, date, numbers, checkbox, file etc.
 Preload Videos
It is an amazing feature for uploading the videos. It specifies the way to upload the video along with the loading of the page. This helps the browser in
knowing about the improvisation of the user experience of the webpage. Though this is not a too mandatory features that is too be added. It helps in
better representation of the page.
 Display Control
Display attribute helps in specifying the behavior of the elements. When this property is not specified, then the default values are taken.
 Regular Expressions
With the help of regular expression we can add the particular pattern as an input. Such as the most common pattern that is used is [A-Za-z] {5,11}. It
accepts the uppercase as well as lowercase letters. Along with this it states that the minimum length of characters is 5 and the maximum length of
characters that is acceptable is 11.
 Accessibility
With the invent of HTML5 it has played a great role in providing the best of the accessibility features to a website. This has made the use of website
simplified. the people of almost an kind of disability such as visually impaired, color blind, low vision, blind etc can have access to the websites that have
been designed with the accessibility features of HTML5.
Such as in forms the validation is the best example of providing accessibility. Labels should be properly marked.
 Inline elements
To keep code up to mark, semantically these inline elements help a lot :
• mark – It highlights the content that is marked in some or the other way.
• time – This helps in adding current time as well as date to the webpage.
• meter – It helps in indicating that how much space in the storage disk is still there.
• progress bar – It helps in knowing the progress of the task that has been assigned for its completion.
 Dynamic Page Support

Now a days there is need of dynamic as well as interactive websites rather than static websites. Here are enormous features that provide the dynamic touch
to the website :
• mark – It highlights the content that is marked in some or the other way.
• time – This helps in adding current time as well as date to the webpage.
• meter – It helps in indicating that how much space in the storage disk is still there.
• progress bar – It helps in knowing the progress of the task that has been assigned for its completion.
SPELL CHECK
 The Spell Check feature in HTML is used to detect grammatical or spelling mistakes in the text fields.
The Spell Check feature can be applied to HTML forms using the spellcheck attribute. The spellcheck attribute is
an enumerated attribute which defines whether the HTML element will be checked for errors or not. It can be
used with “input” and “textarea” fields in HTML.
 Syntax:
<textarea type="text" spellcheck="value"></textarea>
<input type="text" spellcheck="value">
<input type="text" spellcheck="value">

<!DOCTYPE html>
<html>
<body>
<h3>Example of Enabling SpellCheck</h3>
<form>
<p>
<input type="text" spellcheck="true">
</p>
<p>
<textarea spellcheck="true"></textarea>
</p>
<button type="reset">Reset</button>
</form>
</body>
</html>
GEO-LOCATION
 In this article, we will know HTML Geolocation, various properties, methods & their implementation through the examples.
 Geo-location in HTML5 is used to share the location with some websites and be aware of the exact location. It is mainly used for local
businesses, restaurants, or showing locations on the map. It uses JavaScript to give latitude and longitude to the backend server. Most of the
browsers support Geolocation API. Geo-location API uses a global
 Location Properties: The following table determines properties used in getCurrentPosition() and their returning values.
• coords.latitude: Always returns latitude as a decimal number.
• coords.accuracy: Always returns the accuracy of position.
• coords.longitude: Always returns longitude as a decimal number.
• coords.altitude: Returns the altitude in meters above sea level if available.
• coords.altitudeAccuracy: Returns altitude accuracy of position if available.
• coords.heading: Returns heading in degree clockwise from North if available
• coords.speed: Returns speed in mps, if available.
• timestamp: Returns date or time of response if available
Example 1:
<!DOCTYPE html>
<html>
<body>
<p>Displaying location using Latitude and Longitude</p>

<button class="geeks" onclick="getlocation()">
Click Me
</button>
<p id="demo1"></p>
<script>
var variable1 = document.getElementById("demo1");

function getlocation() {
navigator.geolocation.getCurrentPosition(showLoc);
}
function showLoc(pos) {
variable1.innerHTML ="Latitude: " + pos.coords.latitude + "<br>Longitude: " + pos.coords.longitude;
}
</script>
</body>
</html>
Example 2:
<!DOCTYPE html> function getlocation() }
<html> {
if (navigator.geolocation) function errHand(err) {
<head> { switch (err.code) {
<title>Display location in map</title> navigator.geolocation.getCurrentPosition(showLoc, case err.PERMISSION_DENIED:
<style> errHand); result.innerHTML = "The application doesn't have
.MapLoc { } the permission"
margin-left: 150px; } + "to make use of location services";
} break;
function showLoc(pos) { case err.POSITION_UNAVAILABLE:
p { result.innerHTML = "The location of the device is
font-size: 20px; latt = pos.coords.latitude; uncertain";
margin-left: 20px; long = pos.coords.longitude; break;
} var lattlong = new google.maps.LatLng(latt, case err.TIMEOUT:
</style> long); result.innerHTML = "The request to get user
</head> var OPTions = { location timed out";
center : lattlong, break;
<body> zoom : 10, case err.UNKNOWN_ERROR:
mapTypeControl : true, result.innerHTML = "Time to fetch location
<p>Display location in map</p> navigationControlOptions : { information exceeded"
style : google.maps.NavigationControlStyle.SMALL, + "the maximum timeout interval";
<button class="MapLoc" type="button" }, break;
onclick="getlocation();"> }; }
Current Position</button> }
<div id="demo2" style="width: 500px; height: var mapg = new </script>
500px"></div> google.maps.Map(document.getElementById("demo2"), </body>
<script src="https://maps.google.com/maps/api/js? OPTions);
sensor=false"> var markerg = new google.maps.Marker({ </html>
position : lattlong,
</script> map : mapg,
<script type="text/javascript"> title : "You are here!",
});

HTMLPresentation

Uploaded by

Document Information

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

HTMLPresentation

Uploaded by

Copyright:

Available Formats

HTML

HYPERTEXT MARKUP LANGUAGE

 HTML is the standard markup language for Web pages.

 HTML is the language in which most websites are written.

The <!DOCTYPE> declaration is not case sensitive.

• All HTML elements can have attributes

 href attribute of HTML anchor tag

 Use the style attribute for styling HTML elements

<title>Frame tag</title> background-color: #7fffd4; <p>Using iFrame tag</p>

HTML bold tag is represented by <b> tag.

 HTML <i> tag

 HTML <u> tag

> greater than &gt; &#62;

& ampersand &amp; &#38;

" double quotation mark &quot; &#34;

' single quotation mark (apostrophe) &apos; &#39;

¢ cent &cent; &#162;

£ pound &pound; &#163;

¥ yen &yen; &#165;

€ euro &euro; &#8364;

© copyright &copy; &#169;

® registered trademark &reg; &#174;

</body> <p>I will display A B C</p>

<h1>My First Emoji</h1>

<h1>HTML Entity Example</h1> <p style="font-size:48px">

<input type="radio" id="kraken" name="monster">

<input type="radio" id="sasquatch" name="monster">

<input type="radio" id="mothman" name="monster">

The <progress> tag represents the completion progress of a task.

Tip: Always add the <label> tag for best accessibility practices!

 Dynamic Page Support

<input type="text" spellcheck="value">

<p>Displaying location using Latitude and Longitude</p>

var variable1 = document.getElementById("demo1");

You might also like

> greater than > >

& ampersand & &

" double quotation mark " "

' single quotation mark (apostrophe) ' '

¢ cent ¢ ¢

£ pound £ £

¥ yen ¥ ¥

€ euro € €

© copyright © ©

® registered trademark ® ®