HTML-
HYPERTEXT MARKUP LANGUAGE
Everyone came across the word HTMLand also you can use it in your day to day life. Right now also you are using since you read this blog content on the web purely made up of HTML! Sounds good Right! Go through little concepts in HTML now!
What is HTML
HTML is a Markup Language for creating Web pages.
Description
HTML stands
for HyperText Markup Language. It is used to create Web pages. That is, Web pages all
over the world consist of HTML.
We can look at how other people have coded their Web pages. Click on the "View" menu and then on "Source".
We can look at how other people have coded their Web pages. Click on the "View" menu and then on "Source".
<!doctype html>
<html lang="en">
<head>
<title>Sample Web page</title>
</head>
<body>
<p>Here is a paragraph</p>
</body>
History
The
HyperText Markup Language (HTML) is the
publishing language of the World Wide
Web. The first version of HTML was described by Tim Berners-Lee in late 1991. For its first five years (1990-1995),
HTML went through a number of revisions and experienced a number of extensions,
primarily hosted first at CERN (the European Organization for Nuclear
Research), and then at the IETF (Internet Engineering Task Force).
With the
creation of the W3C, HTML's development changed venue again. A first abortive
attempt at extending HTML in 1995 known as HTML 3.0 then made way to a more
pragmatic approach known as HTML 3.2, which was completed in 1997. HTML 4
followed, reaching completion in 1998.
Version
|
Published year
|
HTML+
|
1993
|
HTML 2.0
|
1995
|
HTML 3.2
|
1997
|
HTML 4.01
|
1999
|
Tag
HTML uses markup tags to create Web pages. All
content on the Web page is determined by the tags, such as: "Here is a
paragraph," "This is an image," and so on.
Tag syntax
HTML is
using tags for its syntax. A tag is composed with special characters: <, > and /. They are interpreted by software to compose an HTML
element.
Decomposition of HTML elements
HTML
elements usually come in tag pairs.
For opening a simple element with a start tag
1. it
starts with <
2. then
a list of characters without space, the tag name (or element)
3. ends
usually with a >.
Then closing
the simple element with an end tag
1. it
starts with </
2. then
the same list of characters without space, the tag
name (or element)
3. ends
usually with a >.
If the tag
name is "cite", then you get
<cite></cite>
Some
elements do not have an end tag (because they are implied by the following
tags). For example you might have seen:
<br>
An element
can have attributes to refine its meaning.
These attributes are specified on the
start tag. They consist of a name and
a value, separated by an "=" character. Such as:
<tagname attribute="value"></tagname>
In HTML, the
attribute value can remain unquoted if it doesn't contain spaces or any of the
following characters: " ' ` = < or >. Otherwise, it has to be quoted
using either single or double quotes. The value, along with the "="
character, can be omitted altogether if the value is the empty string. Once you
are working in a team you might want to choose a common way of authoring your
code.
These are
examples of syntaxes you might see on the Web:
<!-- empty attributes -->
<input disabled>
<input disabled="">
<input disabled=""/>
<!-- attributes with a value -->
<input name=address>
<input name='address'>
<input name="address">
Create HTML
Edit tools
You don't
need a special tool for making HTML. We can write HTML by hand using a basic
text editor such as Notepad on Windows, TextEdit on MacOS, gedit on Ubuntu Linux, etc. However you should choose an editor
that allows you to save a page in the UTF-8 encoding (see more details below).
Web
developers often use HTML editors:
·
Adobe Dreamweaver
·
Microsoft FrontPage or Expression Web
·
Bluefish
...etc.
Although the
HTML markup of a Web page can be written with any text editor, specialized HTML
editors can offer convenience and added functionality. But, I recommend that
you use a plain text editor. This is often the best way to learn HTML.
Saving the file
When you
save the HTML document, you should follow the following two sections.
File
names
File name's
rules are as follows:
·
use either the ".htm"
or the ".html" file extension.
·
use only alphabets,
numbers, "-" (hyphen), and "_" (underscore).
Character
Encoding
There are
two rules for the setting of the character encoding.
1. The
markup within the document must properly designate the encoding.
2. The file,
itself, must be saved in the proper encoding format.
The
explanation of first point is learnt in the following chapter. In this chapter,
you will learn second point. That is, setting the character encoding of the
HTML document file.
Web browsers
A Web
browser is a software application
for viewing Web pages. There are many
kinds of Web browsers and each may display Web pages differently:
·
Internet Explorer (Microsoft)
·
Firefox (Mozilla)
·
Chrome (Google)
·
Safari (Apple)
·
Opera (Opera)
...etc
You should
check whether the Web page is correctly made by two or more Web browsers.
HTML Document
The
following example is a basic HTML document:
<!doctype html>
<html lang="en">
<head>
Document metadata
</head>
<body>
Document contents
</body>
</html>
Description
doctype
The DOCTYPE must be specified, and be top
in the HTML document. That is, the DOCTYPE exists before the <html>
start tag.
The DOCTYPE declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax.
The DOCTYPE declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax.
<!DOCTYPE html> or <!doctype html>
html
element
The html element represents the root of an HTML
document.
·
The html element should always have a lang attribute. The lang attribute Specifies the primary language for the contents of
the element. For example, "en"
means "English", "fr" means "French". There are tools
available which provide additional help while searching the language tag, such
as Richard Ishida's Language
Subtag Lookup tool.
·
The <html> ... </html> contains a head element followed by a body element.
<html lang="en"> </html>
head
element
The head
element represents a collection of
metadata for the Document.
·
The <head> ... </head> contains the title, and information on style sheets and scripts.
·
Contents
in the head tag are not displayed
on a Web browser.
<head> </head>
body
element
The body
element represents the main content of
the document.
·
The <body> ... </body> contains the markup with the visible content.
<body> <p>Here is the visible content</p> </body>
Metadata
The
following example represents the document metadata:
<head> <meta charset="utf-8">
<title>About W3C | World Wide Web Consortium(W3C)</title>
<meta name="description" content="The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff and the public work together to develop Web standards.">
<meta name="keywords" content="W3C, HTML, HTML5, XHTML,CSS, CSS3, SVG, MathML, WCAG"> </head>
character setting
The
character encoding used by the document is specified by the charset attribute for the meta element.
<meta charset="utf-8">
title
Web page's
title is specified by <title>.
·
Title is used in a title bar of Web browsers, user's history,
bookmarks, or in search results.
·
You should use titles that identify their documents even when they
are used out of context.
<title>About W3C | World Wide Web Consortium(W3C)</title>
Web page's description
Web page's
description is specified by <meta name="description">.
·
You describe the Web page's description in the content attribute.
<meta name="description" content="The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.">
Web page's keywords
Web page's
keywords are specified by <meta name="keywords">.
·
You describe the Web page's keywords in the content attribute.
<meta name="keywords" content="W3C, HTML, HTML5, XHTML, CSS, CSS3, SVG, MathML, WCAG">
Basic content
The
following example is a basic content.
<body> <h1>ABOUT W3C</h1>
<p>The World Wide Web Consortium (W3C) is an international community where Member organizations,a full-time staff, and the public work together to develop Web standards.</p> <hr>
<h2>Questions About W3C or the Web?</h2>
<p>Please consult the Help and FAQ for answers to questions such as:</p>
<ul>
<li>What does W3C do?</li>
<li>How is W3C funded?</li>
<li>Is W3C sending me spam?</li>
</ul> </body>
So far so good! I thought you lean some fundamental things in HTML. Soon we will see about HTML elements and its advance concepts.
No comments:
Post a Comment