Scribd
Upload
15 views

HTML-basics-unit1

Uploaded by

Janardan Srinivasan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

HTML-basics-unit1

Uploaded by

Janardan Srinivasan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

HTML

o HTML stands for HyperText Markup Language.


o HTML is used to create web pages and web applications.
o HTML is widely used language on the web.
o We can create a static website by HTML only.
o Technically, HTML is a Markup language rather than a programming
language.

HTML Example with HTML Editor


<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>

Output

Write Your First Heading


Write Your First Paragraph.

What is HTML
HTML is an acronym which stands for Hyper Text Markup
Language which is used for creating web pages and web applications.

Hyper Text: HyperText simply means "Text within Text." A text has a link
within it, is a hypertext. Whenever you click on a link which brings you to
a new webpage, you have clicked on a hypertext. HyperText is a way to
link two or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is


used to apply layout and formatting conventions to a text document.
Markup language makes text more interactive and dynamic. It can turn
text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in


HTML and translated by a web browser. A web page can be identified by
entering an URL. A Web page can be of the static or dynamic type. With
the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive


web pages with the help of styling, and which looks in a nice format on a
web browser. An HTML document is made of many HTML tags and each
HTML tag contains different content.

Let's see a simple example of HTML.

<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>

Description of HTML Example


<!DOCTYPE>: It defines the document type or it instruct the browser
about the version of HTML.

<html > :This tag informs the browser that it is an HTML document. Text
between html tag describes the web document. It is a container for all
other elements of HTML except <!DOCTYPE>

<head>: It should be the first element inside the <html> element, which
contains the metadata(information about the document). It must be
closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page
which appears at the top of the browser window. It must be placed inside
the head tag and should close immediately. (Optional)

<body> : Text between body tag describes the body content of the page
that is visible to the end user. This tag contains the main content of the
HTML document.

<h1> : Text between <h1> tag describes the first level heading of the
webpage.

<p> : Text between <p> tag describes the paragraph of the webpage.

Brief History of HTML


In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at
CERN, proposed a system for CERN researchers. In 1989, he wrote a
memo proposing an internet based hypertext system.

Tim Berners-Lee is known as the father of HTML. The first available


description of HTML was a document called "HTML Tags" proposed by Tim
in late 1991. The latest version of HTML is HTML5

HTML Versions
Since the time HTML was invented there are lots of HTML versions in
market, the brief introduction about the HTML version is given below:

HTML 1.0: The first version of HTML was 1.0, which was the barebones
version of HTML language, and it was released in1991.

HTML 2.0: This was the next version which was released in 1995, and it
was standard language version for website design. HTML 2.0 was able to
support extra features such as form-based file upload, form elements such
as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This
version was capable of creating tables and providing support for extra
options for form elements. It can also support a web page with complex
mathematical equations. It became an official standard for any browser till
January 1997. Today it is practically supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is
a very stable version of HTML language. This version is the current official
standard, and it provides added support for stylesheets (CSS) and
scripting ability for various multimedia elements.

HTML5 : HTML5 is the newest version of HyperText Markup language.


The first draft of this version was announced in January 2008. There are
two major organizations one is W3C (World Wide Web Consortium), and
another one is WHATWG( Web Hypertext Application Technology Working
Group) which are involved in the development of HTML 5 version, and still,
it is under development.

Features of HTML
1) It is a very easy and simple language. It can be easily understood
and modified.

2) It is very easy to make an effective presentation with HTML because


it has a lot of formatting tags.

3) It is a markup language, so it provides a flexible way to design web


pages along with the text.

4) It facilitates programmers to add a link on the web pages (by html


anchor tag), so it enhances the interest of browsing of the user.

5) It is platform-independent because it can be displayed on any


platform like Windows, Linux, and Macintosh, etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to


the web pages which makes it more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags


either in lower-case or upper-case.

HTML5
HTML5 is the next major revision of the HTML standard superseding HTML
4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
presenting content on the World Wide Web.
HTML5 is a cooperation between the World Wide Web Consortium (W3C)
and the Web Hypertext Application Technology Working Group
(WHATWG).
The new standard incorporates features like video playback and drag-and-
drop that have been previously dependent on third-party browser plug-ins
such as Adobe Flash, Microsoft Silverlight, and Google Gears.

Browser Support
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and
Opera all support many HTML5 features and Internet Explorer 9.0 will also
have support for some HTML5 functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and
Android phones all have excellent support for HTML5.

HTML 5 Benefits

Following are the benefits of HTML 5 making it more compatible


than HTML 4:

Better Consistency
The new HTML 5 will provide a far better consistency in terms of HTML
code which is used to design a web page thus making it easier to grasp
the structuring of a web page for web designers and developers.

Cleaner Code
HTML 5 will allow developers to make use of a cleaner code. New
structural elements like article tag and section tag are introduced
replacing most div tags.
Client side database
HTML 5 will offer a new SQL-based database API to facilitate data storage
locally i.e. client side. By using a real SQL database, a developer can save
structured data on the client side. One can stock up the structured data
temporarily as it’s not a permanent database. Even when the client is
disconnected for a short time period, data can be accessed without any
difficulty.

Enhanced Accessibility
HTML 5 new elements improve the accessibility by making it possible for
assistive technologies to spread out the features offered by them to the
users.

Geo-Location
Any HTML 5 compatible browser-based application can be directly used for
finding out a location with the new HTML 5 geo-location APIs. The Google
Latitude for the iPhone can be considered as a fine example of it.

Improved Semantics
The semantic values of all web pages will be improved due to the usage of
new standardize elements of HTML 5 for coding a web page making it
easy to notice various divisions of the web page such as headers, nav,
footers, aside, etc.

Interactivity
The greatest benefit of HTML 5 is that the functionality is built into the
browser. HTML 5 resolves the web application complexity issues with DOM
and HTML support, for high-quality drawings, video & audio embedding,
charts & animation and many other types of rich content required by
users.

Sharper focus on Web application Requirements


HTML 5 is designed for making search front-ends easier to construct.
Functionalities like real-time chat, drag & drop tools, discussion boards
etc. are available with more efficiency.

Superior forms
New enhanced forms are introduced with up gradations in text inputs,
search boxes and other fields providing better controls for data validation
and interaction on the page.

Thread-like Operations
‘Web workers’ is a tool that enables faster thread-like processing with
coordination using message-passing.

HTML 5 will free the multimedia content. It will be harder to differentiate


between web applications and desktop applications and will surely be a
step towards the future of internet.
New Features
HTML5 introduces a number of new elements and attributes that can help
you in building modern websites. Here is a set of some of the most
prominent features introduced in HTML5.
 New Semantic Elements − These are like <header>,
<footer>, and <section>.
 Forms 2.0 − Improvements to HTML web forms where new
attributes have been introduced for <input> tag.
 Persistent Local Storage − To achieve without resorting to
third-party plugins.
 WebSocket − A next-generation bidirectional communication
technology for web applications.
 Server-Sent Events − HTML5 introduces events which flow
from web server to the web browsers and they are called
Server-Sent Events (SSE).
 Canvas − This supports a two-dimensional drawing surface
that you can program with JavaScript.
 Audio & Video − You can embed audio or video on your
webpages without resorting to third-party plugins.
 Geolocation − Now visitors can choose to share their physical
location with your web application.
 Microdata − This lets you create your own vocabularies
beyond HTML5 and extend your web pages with custom
semantics.
 Drag and drop − Drag and drop the items from one location
to another location on the same webpage.
.

HTML 4 Drawbacks/Limitations

 Audio support- You can’t add Add audio to a web page with a single tag in HTML4.
 Using javascript for animation, drawing and other feature was the toughest task.
 Video Support- Unable to add Video with a single tag in the website.
 External Plugins – Requires external plugins to run flash, media controls.
 Very few input controls are available. E.g. form inputs.
 2-3D Supports- Does not support 2D and 3D animations.
First HTML5 Document
Example:
<!DOCTYPE html>

<html>

<head>

<title>HTML 5</title>

<style>

h1 {

font-size:30px;

</style>

</head>

<body>

<h1>hello world</h1>

</body>

</html>

Output:
Building blocks of HTML
An HTML document consist of its basic building blocks which are:

o Tags: An HTML tag surrounds the content and apply meaning to it.
It is written between < and > brackets.
o Attribute: An attribute in HTML provides extra information about
the element, and it is applied within the start tag. An HTML attribute
contains two fields: name & value.

Syntax
1. <tag name attribute_name= " attr_value"> content </ tag name>

o Elements: An HTML element is an individual component of an HTML


file. In an HTML file, everything written within tags are termed as
HTML elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>The basic building blocks of HTML</title>
</head>
<body>
<h2>The building blocks</h2>
<p>This is a paragraph tag</p>
<p style="color: red">The style is attribute of paragraph tag</p>
<span>The element contains tag, attribute and content</span>
</body>
</html>

Output:

The building blocks


This is a paragraph tag

The style is attribute of paragraph tag

The element contains tag, attribute and content

HTML Tags
HTML tags are like keywords which defines that how web browser will
format and display the content. With the help of tags, a web browser can
distinguish between an HTML content and a simple content. HTML tags
contain three main parts: opening tag, content and closing tag. But some
HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top
to bottom and left to right. HTML tags are used to create HTML documents
and render their properties. Each HTML tags have different properties.

An HTML file must have some essential tags so that web browser can
differentiate between a simple text and HTML text. You can use as many
tags you want as per your code requirement.

o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag
</tag> (except some tags)

Syntax
<tag> content </tag>

HTML Tag Examples


Note: HTML Tags are always written in lowercase letters. The basic HTML tags are
given below:

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>


<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>

Unclosed HTML Tags


Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line
across the webpage.

HTML Meta Tags


DOCTYPE, title, link, meta and style
HTML Text Tags
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>,
<abbr>, <acronym>, <address>,

HTML Link Tags


<a> and <base>

HTML Image and Object Tags


<img>, <area>, <map>, <param> and <object>

HTML List Tags


<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags


table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags


form, input, textarea, select, option, optgroup, button, label, fieldset and
legend

HTML Scripting Tags


script and noscript

HTML Attribute
o HTML attributes are special words which provide additional
information about the elements or attributes are the modifier of the
HTML element.
o Each element or tag can have attributes, which defines the
behaviour of that element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive, and it is
recommended by W3C that it should be written in Lowercase only.
o You can add multiple attributes in one HTML element, but need to
give space between two attributes.

Syntax
<element attribute_name="value">content</element>

Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style="height: 50px; color: blue">It will add style property in eleme
nt</p>
<p style="color: red">It will change the color of content</p>
</body>

Output:
Explanation of above example:

1. <p style="height: 50px; color: blue">It will add style property in ele
ment</pIn the above statement, we have used paragraph tags in
which we have applied style attribute. This attribute is used for
applying CSS property on any HTML element. It provides height to
paragraph element of 50px and turns it colour to blue.

1. <p style="color: red">It will change the color of content</p>

In the above statement we have again used style attribute in paragraph


tag, which turns its colour red.

Note: There are some commonly used attributes are given below, and the complete list
and explanation of all attributes are given in HTML attributes List.

The title attribute in HTML


Description: The title attribute is used as text tooltip in most of the
browsers. It display its text when user move the cursor over a link or any
text. You can use it with any text or link to show the description about
that link or text. In our example, we are taking this with paragraph tag
and heading tag.

Example
With <h1> tag:

<h1 title="This is heading tag">Example of title attribute</h1>


With <p> tag:

<p title="This is paragraph tag">Move the cursor over the heading an


d paragraph, and you will see a description as a tooltip</p>

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 title="This is heading tag">Example of title attribute</h1>


<p title="This is paragraph tag">Move the cursor over the heading a
nd paragraph, and you will see a description as a tooltip</p>

</body>
</html>

Output:

The href attribute in HTML


Description: The href attribute is the main attribute of <a> anchor tag.
This attribute gives the link address which is specified in that link. The
href attribute provides the hyperlink, and if it is blank, then it will
remain in same page.
Example
With link address:

<a href="https://www.wpnotes.com/html-anchor">This is a link</a>

Without link address:

<a href="">This is a link</a>

Core Attributes
The four core attributes that can be used on the majority of HTML
elements (although not all) are −

 Id
 Title
 Class
 Style
The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any
element within an HTML page. There are two primary reasons that you
might want to use an id attribute on an element −
 If an element carries an id attribute as a unique identifier, it is
possible to identify just that element and its content.
 If you have two elements of the same name within a Web page
(or style sheet), you can use the id attribute to distinguish
between elements that have the same name. Let's use the id
attribute to distinguish between two paragraph elements as
shown below.
Example
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>
The title Attribute
The title attribute gives a suggested title for the element. They syntax for
the title attribute is similar as explained for id attribute −
The behavior of this attribute will depend upon the element that carries it,
although it is often displayed as a tooltip when cursor comes over the
element or while the element is loading.
Example
<!DOCTYPE html>
<html>

<head>
<title>The title Attribute Example</title>
</head>

<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>

</html>
This will produce the following result –
Titled Heading Tag Example

Now try to bring your cursor over "Titled Heading Tag Example" and you
will see that whatever title you used in your code is coming out as a
tooltip of the cursor.

The class Attribute


The class attribute is used to associate an element with a style sheet, and
specifies the class of element.
The value of the attribute may also be a space-separated list of class
names. For example −
class = "className1 className2 className3"
The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules
within the element.
<!DOCTYPE html>
<html>

<head>
<title>The style Attribute</title>
</head>

<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>

</html>
This will produce the following result –

Internationalization Attributes
There are three internationalization attributes, which are available for
most (although not all) XHTML elements.

 dir
 lang
 xml:lang
The dir Attribute
The dir attribute allows you to indicate to the browser about the direction
in which the text should flow. The dir attribute can take one of two values,
as you can see in the table that follows −

Valu Meaning
e

ltr Left to right (the default value)

rtl Right to left (for languages such as Hebrew or Arabic that are read right to
left)

Example
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>

<body>
This is how IE 5 renders right-to-left directed text.
</body>

</html>
This will produce the following result –

When dir attribute is used within the <html> tag, it determines how text
will be presented within the entire document. When used within another
tag, it controls the text's direction for just the content of that tag.

The lang Attribute


The lang attribute allows you to indicate the main language used in a
document, but this attribute was kept in HTML only for backwards
compatibility with earlier versions of HTML. This attribute has been
replaced by the xml:lang attribute in new XHTML documents.
The values of the lang attribute are ISO-639 standard two-character
language codes.
Example
<!DOCTYPE html>
<html lang = "en">

<head>
<title>English Language Page</title>
</head>

<body>
This page is using English Language
</body>

</html>
This will produce the following result –
The xml:lang Attribute
The xml:lang attribute is the XHTML replacement for the lang attribute.
The value of the xml:lang attribute should be an ISO-639 country code as
mentioned in previous section.

You might also like