HTML

HTML
World Wide Web

The World Wide Webcommonly referred to as WWW, W3, or the Webis a system of interconnected public
webpages accessible through the Internet. The Web is not the same as the Internet: the Web is one of many
applications built on top of the Internet.
Tim Berners-Lee proposed the architecture of what became known as the World Wide Web. He created the first
web server, web browser, and webpage on his computer at the CERN physics research lab in 1990. In 1991, he
announced his creation on the alt.hypertext newsgroup, marking the first time the Web was made public.
What we know as "the Web" consists of several components:
The HTTP protocol governs data transfer between a server and a client.
To access a Web component, a client supplies a unique universal identifier, called a URL (uniform resource
location) or URI (uniform resource identifier) (formally called Universal Document Identifier (UDI)).
HTML (hypertext markup language) is the most common format for publishing web documents.
Linking, or connecting resources through hyperlinks, is a major concept giving the Web its identity as collection of
connected documents.
Soon after inventing the Web, Tim Berners-Lee founded the W3C (World Wide Web Consortium) to standardize and
develop the Web. The consortium consists of the main interest groups for the Web, like web browser developers,
government entities, researchers, and universities. Its mission also includes education and outreach.
A brief history of HTML
In the late 1980s, Tim Berners-Lee was working as a physicist at CERN (the European Organization for Nuclear
Research). He devised a way for scientists to share documents over the internet. Prior to his invention,
communication via the internet was limited to plain text, using technologies such as email, FTP (File Transfer
Protocol), and Usenet-based discussion boards. The invention of HTML made use of a model of content stored on a
central server that could be transferred and displayed on a local workstation via a browser. It simplified access to
content and enabled the display of "rich" content (such as sophisticated text formatting and the display of images).
What is HTML?
HTML is a markup language. A markup language as it relates to browsers is a language with specific syntax that gives
instructions to a web browser about how to display a page. HTML separates "content" (words, images, audio, video,
and so on) from "presentation" (the definition of the type of content and the instructions for how that type of
content should be displayed). HTML uses a pre-defined set of elements to identify content types. Elements contain
one or more "tags" that contain or express content.
Elements the basic building blocks
HTML consists of a set of elements. Elements define the semantic meaning of their content. Elements include
everything between two matching element tags, including the tags themselves. For example, the "<p>" element
indicates a paragraph; the "<img>" element indicates an image.
Most elements may contain other elements, forming a hierarchic structure. A very simple but complete web page
looks like this:
<html>
<body>
<p> you are in your beginning stage of HTML</p>
</body>
</html>
As you can see, the <html> element surround the rest of the document, and the <body> element surround the page
content. This structure is often thought of as a tree with branches (in this case, the <body> and <p> elements)
growing from the trunk (<html>). This hierarchical structure is called the DOM: the Document Object Model.
Tags
HTML attaches special meaning to anything that starts with the less-than sign ("<") and ends with the greater-than
sign (">"). Such markup is called a tag. Make sure to close the tag, as some tags are closed by default, whereas
others might produce unexpected errors if you forget the end tag.
Here is a simple example:
<p>This is text within a paragraph.</p>
In this example there is a start tag and a closing tag. Closing tags are the same as the start tag but also contain
a forward slash immediately after the leading less-than sign. Most elements in HTML are written using both start and
closing tags. Start and closing tags should be properly nested--that is, closing tags should be written in the opposite
order of the start tags. Proper nesting is one rule that must be obeyed in order to write valid code.
This is an an example of valid code:
<em>I <strong>really</strong> mean that</em>.
This is an example of invalid code:
Invalid: <em>I <strong>really</em> mean that</strong>.
Note that in the valid example, the closing tag for the nested element is placed before the closing tag for the
element in which it is nested. In the invalid code, they are nested.
Some elements do not contain any text content or any other elements. These are empty elements and need no
closing tag. This is an example:
<img src="smileyface.jpg" alt="Smiley face" >
Empty elements in XHTML mode are usually closed using a trailing forward slash.
<img src="smileyface.jpg" alt="Smiley face" />
Attributes
The start tag may contain additional information, as in the preceding example. Such information is called
an attribute. Attributes usually consist of 2 parts:
An attribute name
An attribute value
A few attributes can only have one value. They are Boolean attributes and may be shortened by only specifying the
attribute name or leaving the attribute value empty. Thus, the following 3 examples have the same meaning:
<input required="required">
<input required="">
<input required>
Attribute values that consist of a single word or number may be written as they are, but as soon as there are two or
more strings of characters in the value, it must be written within quotation marks. Both single quotes (') and double
quotes (") are allowed. Many developers prefer to always use quotes to make the code less ambiguous to the eye
and to avoid mistakes. The following is such a mistake:
<p class=foo bar> (Beware, this probably does not mean what you think it
means.)
In this example the value was supposed to be "foo bar" but since there were no quotes the code is interpreted as if it
had been written like this:
<p class="foo" bar="">
Named character references
Named character references (often casually called entities) are used to print characters that have a special meaning
in HTML. For example, HTML interprets the less-than and greater-than symbols as tag delimiters. When you want to
display a greater-than symbol in the text, you can use a named character reference. There are four common named
character references one must know:
> denotes the greater than sign (>)
< denotes the less than sign (<)
& denotes the ampersand (&)
" denotes double quote (")
There are many more entities, but these four are the most important because they represent characters that have a
special meaning in HTML.
Doctype and comments
In addition to tags, text content, and entities, an HTML document must contain a doctype declaration as the first
line. The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML
the page is written in.
In HTML 4.01, doctype refers to a DTD (Document Type Definition) as it was based on SGML. There are three
different doctype declarations in HTML 4.01.
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements
(like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font).
Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
In HTML 5, there is only one declaration and is written like this:
<!DOCTYPE html>
doctype tells the browser to interpret the HTML and CSS code according to W3C standards.
HTML has a mechanism for embedding comments that are not displayed when the page is rendered in a browser.
This is useful for explaining a section of markup, leaving notes for other people who might work on the page, or for
leaving reminders for yourself. HTML comments are enclosed in symbols as follows:

A complete but small document
<!DOCTYPE html>
<html lang="en">
<head>
<title>A RMScreenprint</title>
</head>
<body>
<h1>Main heading in my document</h1>

<p>Look Ma, I am coding <abbr title="Hyper Text Markup
Language">HTML</abbr>.</p>
</body>
</html>
Introduction to URI
In computing, a uniform resource identifier (URI) is a string of characters used to identify a name of a resource. The
most common form of URI is the uniform resource locator (URL), frequently referred to informally as a web address.
More rarely seen in usage is the uniform resource name (URN), which was designed to complement URLs by
providing a mechanism for the identification of resources in particular namespaces.
The relationship between URIs, URLs, and URNs
A uniform resource name (URN) functions like a person's name, while a uniform resource locator (URL) resembles
that person's street address. In other words: the URN defines an item's identity, while the URL provides a method for
finding it.
URLs
A URL is a URI that, in addition to identifying a web resource, specifies the means of acting upon or obtaining the
representation, specifying both its primary access mechanism and network location. For example, the URL
http://example.org/wiki/Main_Page refers to a resource identified as /wiki/Main_Page whose representation, in the
form of HTML and related code, is obtainable via HyperText Transfer Protocol (http) from a network host whose
domain name is example.org.
URNs
A URN is a URI that identifies a resource by name in a particular namespace. A URN can be used to talk about a
resource without implying its location or how to access it.
The International Standard Book Number (ISBN) system for uniquely identifying books provides a typical example of
the use of URNs. ISBN 0-486-27557-4 cites unambiguously a specific edition of Shakespeare's play Romeo and Juliet.
The URN for that edition would be urn:isbn:0-486-27557-4. To gain access to this object and read the book, its
location is needed, for which a URL would have to be specified.
Basic Tags of HTML
<HTML>
The <html> tag tells the browser that this is an HTML document.
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).
Attributes
Attribute Value Description
manifest URL Specifies the address of the document's cache manifest

(for offline browsing)
xmlns http://www.w3.org/1999/xhtml Specifies the XML namespace attribute (If you need your
content to conform to XHTML)
<head> Tag
The <head> element is a container for all the head elements.
The following elements can go inside the <head> element:
<title> (this element is required in an HTML document)
<style>
<base>
<link>
<meta>
<script>
<noscript>
Attributes
profile URL Not supported in HTML5.

Specifies a URL to a document that contains a set of rules. The rules can
be read by browsers to clearly understand the information in the <meta>
tag's content attribute
<base>
The <base> tag specifies the base URL/target for all relative URLs in a document.
There can be at maximum one <base> element in a document, and it must be inside the <head> element.
Attributes
href URL Specifies the base URL for all relative URLs in the page
target _blank Specifies the default target for all hyperlinks and forms in the page
_parent
_self
_top
framename
<body>
Attributes
alink color Not supported in HTML5.

Specifies the color of an active link in a document
background URL Not supported in HTML5.

Specifies a background image for a document
bgcolor color Not supported in HTML5.

Specifies the background color of a document
link color Not supported in HTML5.

Specifies the color of unvisited links in a document
text color Not supported in HTML5.
Specifies the color of the text in a document
vlink color Not supported in HTML5.

Specifies the color of visited links in a document
<h1> to <h6>
Attributes
Align left Not supported in HTML5.

center Specifies the alignment of a heading
right
justify
<font>
The <font> tag specifies the font face, font size, and color of text.
Optional Attributes
color rgb(x,x,x) Not supported in HTML5.

#xxxxxx Specifies the color of text
colorname
face font_family Not supported in HTML5.

Specifies the font of text
size Number Not supported in HTML5.

Specifies the size of text
(1 to 7, browser default is 3)
<basefont>
The <basefont> tag specifies a default text-color, font-size, or font-family for all the text in a document. It
is contained in head element.
Optional Attributes
Same as <font> tag.
<p>
The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and after each <p>
element. The margins can be modified with CSS (with the margin properties).
Attributes
align
BR
Comment in HTML
Formatting Text (B, I, U, EM, BLOCKQUOTE, PREFORMATTED(attribute width), SUB,
SUP, STRIKE)
<a>
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
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
Attributes
charset char_encoding Not supported in HTML5.

Specifies the character-set of a linked document
coords coordinates Not supported in HTML5.

Specifies the coordinates of a link
download filename Specifies that the target will be downloaded when a user clicks
on the hyperlink
href URL Specifies the URL of the page the link goes to
hreflang language_code Specifies the language of the linked document
media media_query Specifies what media/device the linked document is optimized

for
name section_name Not supported in HTML5. Use the global id attribute instead.
Specifies the name of an anchor
rel alternate Specifies the relationship between the current document and
author the linked document
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
rev text Not supported in HTML5.

Specifies the relationship between the linked document and
the current document
shape default Not supported in HTML5.

rect Specifies the shape of a link
circle
poly
target _blank Specifies where to open the linked document

_parent
_self
_top
framename
type media_type Specifies the media type of the linked document
The following attributes: download, hreflang, media, rel, target, and type cannot be present if the href attribute is
not present.
<a> href Attribute

The href attribute specifies the URL of the page the link goes to. If the href attribute is not present, the <a> tag is not
a hyperlink.
Attribute Values
Value Description
URL The URL of the link.

Possible values:
An absolute URL - points to another web site (like
href="http://www.example.com/default.htm")
A relative URL - points to a file within a web site (like href="default.htm")
Link to an element with a specified id within the page (like href="#top")
Other protocols (like https://, ftp://, mailto:, file:, etc..)
A script (like href="javascript:alert('Hello');")
Email Links
mailto:
To create a link that starts up the user's email program and addresses an email to a specified email address, you use
the <a> element. However, this time the value of the href attribute starts with mailto: and is followed by the email
address you want the email to be sent to.
Example:
<a href="mailto:someone@example.org">Email Someone</a>
On the above you can see that an email link looks just like any other link but, when it is clicked on, the user's email
program will open a new email message and address it to the person specified in the link.
Linking to a Specific Part of the Same Page
At the top of a long page you might want to add a list of contents that links to the corresponding sections lower
down. Or you might want to add a link from part way down the page back to the top of it to save users from having
to scroll back to the top.
Before you can link to a specific part of a page, you need to identify the points in the page that the link will go to. You
do this using the id attribute (which can be used on every HTML element). The value of the id attribute should start
with a letter or an underscore (not a number or any other character) and, on a single page; no two id attributes
should have the same value. To link to an element that uses an id attribute you use the <a> element again, but the
value of the href attribute starts with the # symbol, followed by the value of the id attribute of the element you want
to link to.
Linking to a Specific Part of Another Page
If you want to link to a specific part of a different page (whether on your own site or a different website) you can use
a similar technique. As long as the page you are linking to has id attributes that identify specific parts of the page,
you can simply add the same syntax to the end of the link for that page. Therefore, the href attribute will contain the
address for the page (either an absolute URL or a relative URL), followed by the # symbol, and followed by the value
of the id attribute that is used on the element you are linking to.
<img>
The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag
creates a holding space for the referenced image.
Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.
Attributes
ALIGN, SRC, WIDTH, HEIGHT, ALT
Image Link
Horizontal Rules <HR ALIGN, WIDTH, SIZE, NOSHADE>
Creating Tables
Border
TH, TR
TD
CELLSPACING
CELLPADDING
WIDTH
COLSPAN
CAPTION
ALIGN
Frames
Percentage dimensions
Relative dimensions
Frame- Src
Frameborder
height and width
Creating two or more rows Frames <FRAMESET ROWS>
Creating two or more Columns Frames <FRAMESET COLS>
<FRAME NAME SRC MARGINHEIGHT MARGINWIDTH SCROLLING AUTO NORESIZE>
<NOFRAMES>
</NOFRAMES>;

HTML - MDN

Uploaded by

Document Information

Original Title

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

HTML - MDN

Uploaded by

Copyright:

Available Formats

World Wide Web

The relationship between URIs, URLs, and URNs

manifest URL Specifies the address of the document's cache manifest

Attribute Value Description

profile URL Not supported in HTML5.

Attribute Value Description

Attribute Value Description

alink color Not supported in HTML5.

background URL Not supported in HTML5.

bgcolor color Not supported in HTML5.

link color Not supported in HTML5.

vlink color Not supported in HTML5.

Attribute Value Description

Align left Not supported in HTML5.

Attribute Value Description

color rgb(x,x,x) Not supported in HTML5.

face font_family Not supported in HTML5.

size Number Not supported in HTML5.

charset char_encoding Not supported in HTML5.

coords coordinates Not supported in HTML5.

hreflang language_code Specifies the language of the linked document

media media_query Specifies what media/device the linked document is optimized

rev text Not supported in HTML5.

shape default Not supported in HTML5.

target _blank Specifies where to open the linked document

type media_type Specifies the media type of the linked document

<a> href Attribute

URL The URL of the link.

Horizontal Rules <HR ALIGN, WIDTH, SIZE, NOSHADE>

height and width

Creating two or more rows Frames <FRAMESET ROWS>

Creating two or more Columns Frames <FRAMESET COLS>

<FRAME NAME SRC MARGINHEIGHT MARGINWIDTH SCROLLING AUTO NORESIZE>

You might also like