HTML

From Wikipedia, the free encyclopedia

".htm" and ".html" redirect here. For other uses, see HTM (disambiguation).
For the use of HTML on Wikipedia, see Help:HTML in wikitext.
HTML
(HyperText Markup Language)
HTML.svg
Filename extension
.html
.htm
Internet media type
Type code

text/html

TEXT

Developed by W3C & WHATWG

Initial release 1993; 23 years ago
Latest release
5.0 / 5.1 (working draft)
(28 October 2014; 20 months ago)
Type of formatDocument file format
Extended fromSGML
Extended to
Standard
ISO/IEC 15445
W3C HTML5

XHTML

HTML Living Standard

W3C HTML 5.1
Open format? Yes
Website
www.w3.org/html/
whatwg.org
HTML
HTML Dynamic HTML
HTML5 (audio canvas video)
XHTML (Basic Mobile Profile C-HTML)
HTML element (span and div)
HTML attribute HTML frame HTML editor
Character encodings (Unicode)
Language code
Document Object Model
Browser Object Model
Style sheets (Cascading (CSS))
Font family Web colors
HTML scripting
JavaScript (WebGL WebCL)
W3C (Validator)
WHATWG Quirks mode Web storage
Web browser (layout) engine

Comparisons
Document markup languages
Web browsers
Layout engine support
HTML Non-standard HTML
HTML5 (canvas media)
XHTML (1.1)
vte
HyperText Markup Language, commonly abbreviated as HTML, is the standard markup
language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone
technology used to create web pages,[1] as well as to create user interfaces for mobile and web
applications. Web browsers can read HTML files and render them into visible or audible web
pages. HTML describes the structure of a website semantically and, before the advent of
Cascading Style Sheets (CSS), included cues for the presentation or appearance of the
document (web page), making it a markup language, rather than a programming language.

HTML elements form the building blocks of HTML pages. HTML allows images and other
objects to be embedded and it can be used to create interactive forms. It provides a means to
create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written
using angle brackets. Tags such as <img /> and <input /> introduce content into the page
directly. Others such as <p>...</p> surround and provide information about document text and
may include other tags as sub-elements. Browsers do not display the HTML tags, but use them
to interpret the content of the page.

HTML can embed scripts written in languages such as JavaScript which affect the behavior of
HTML web pages. HTML markup can also refer the browser to Cascading Style Sheets (CSS)
to define the look and layout of text and other material. The World Wide Web Consortium (W3C),

maintainer of both the HTML and the CSS standards, has encouraged the use of CSS over
explicit presentational HTML since 1997.[2]
HTML Structure

Delimiters: <, >, /

Delimiters surround the tag and inform the parser that it should read the enclosed information as
an HTML element.
Tags:
Tags contain elements which provide instructions for how information will be processed or
displayed. There are both starter tags <TAG> and end tags </TAGS>
Elements:
A basic unit of an HTML document. The name of the element is given in the name of the tag, and
specifies the meaning associated with a block of text. Some elements are empty since they
don't effect a block of text. Elements that have contents are also called containers, i.e., they
contain attributes.
Example: the <HR> tag contains the Horizontal Ruler element. It is an empty element in that it
has no attribute.
Attribute:
Defines a special property of an HTML element.
Example: <IMG SRC="image.gif"> means that the element IMG has an attribute SRC, which
specifies the name of the image file, which is assigned the value "image.gif".
HTML is a structured hierarchical language that requires you to follow its rules if you wish your
documents to appear correctly. For example, certain elements and tags are required to fit within
other elements and tags and will not work unless they are properly placed.
HTML Tags

Structure Tags

<HTML>...</HTML>
Encloses the entire HTML document. This tag tells the browser that it is reading an HTML
document and to display as such. Without this tag your information will display as source code
on the client's browser.
An HTML document is divided into a HEAD and BODY.
<HEAD>...</HEAD>
Encloses the head of the HTML document. The HEAD element contains information about the
document.
Can include: <TITLE>, <ISINDEX>, <BASE>, <META>, <NEXTID>, <LINK>
<BODY>...</BODY>
Encloses the body (text, images, tags, links) of the HTML document. The BODY element
contains the information in the document.
Contains all tags except the <HTML> and those in the <HEAD>
HEAD ELEMENTS

<TITLE>...</TITLE>
Indicates the title of the document and appears in a browser's bookmark file.

<BASE>
This is an optional tag. It is an empty tag in that it doesn't effect a block of text. <BASE> is used
to indicate the original base URL of the web document. If a the document is moved, then all
related documents with relative URL's will be referred back to the <BASE> URL. If you do not
insert the <BASE> tag the relative URL's will be determined from the URL used to access the
document. If you do a good job with your relative addresses you should have no problem in

leaving the <BASE> tag out. However, there may be times when it is helpful.

Attribute: HREF

<ISINDEX>
This is an optional tag. <ISINDEX> informs the browser that the document can be examined
using a keyword search. <ISINDEX> does not mean that the document appearing on the screen
can be searched, rather, it invokes a program on the server which calls a database, which is
searched and displayed as a web document.

<META>
This is an optional tag. <META> allows meta-information about the document to be placed in the
HEAD. This allows the author to provide information about the document that can be used in the
indexing of the document. If you use <META> it must take the CONTENT attribute and either the
NAME or HTTP-EQUIV attributes.

CONTENT="string". Assigns the content associated with either NAME or HTTP-EQUIV.

NAME="name". Specifies the meta-information name.
Example: <META NAME="descriptors" CONTENT="christology ecclesiology patristics">

HTTP-EQUIV="string". Tells the HTTP server to parse the values in the HTTP-EQUIV attribute
and display it in the appropriate way in the HEAD of the document.
Example: <META HTTP-EQUIV="Creation-Date" CONTENT="15-May-1996">
BODY ELEMENTS

Headings <H3>, <H2>, <H3>, <H4>, <H5>, <H6>

FIRST through SIXTH level headings

Allowed inside <BLOCKQUOTE>, <BODY>, <FORM>
Paragraph & Line Break Tags

<P>...</P>
Encloses a paragraph and places a space between blocks of text. The </P> is optional, and
standard use (HTML 2.0+) places the <P> tag at the beginning of the paragraph. I recommend
you use both opening and closing tags, it doesn't hurt and HTML 3.0 may require both.
<BR>
Placed at the end of a block of text where you want a line break to occur, but do not want a space
placed between the current and the next text block.
Link & Image Tags

Before we explore using links, we need to examine the difference between relative and absolute
links. A link can have an absolute or relative structure. An absolute link describes a document's
aULress in absolute terms. A relative link describes a document relative to another document.
Relative links are often used inside a set of web documents. The value of using relative links lies
in the ability to move documents from one server to another, or from one directory to another
within the same server, without having to change the link address tags. When you use absolute
links you often loose this flexibility. As a rule you should use relative links within your web
documents.

Absolute links look like this:

HREF="http://www.stthomas.edu/aimlhtml/pages/htmlintro.html"

Relative links look like this:

HREF="netscape.html" (netscape.html is located in the current directory)
HREF="./pages/netscape.html" (netscape.html is located in the directory "pages" which is
located in the current directory)
HREF="../netscape.html" (netscape.html is located in the directory one level up from the
current directory)
HREF="../../netscape.html" (netscape.html is located two directory levels up from the current
directory)
Anchor Tag, <A>...</A>
Attributes:
HREF="..."
NAME="..."
MAILTO:"..."
The HREF attribute creates a link to another document or anchor; the NAME attribute creates
an anchor within a document that can be linked to. (NOTE: When designing web pages on your
desktop computer you must use a relative aULress, or use "file:///c|/" to indicate an absolute
link. The "c|/" indicates your drive aULress--and you must use "c|/" rather than "c:\". These
absolute links will all have to be changed to "http://" when you mount your pages on a HTTP
server.)
Can include: <IMG>, <BR>, <EM>, <STRONG>, <CODE>, <SAMP>, <KBD>, <VAR>, <CITE>,
<TT>, <STRONG>, <EM>
The MAILTO attribute is used to insert an e-mail link into the document. MAILTO gives readers a
way to respond to the web page author. In order for MAILTO to work the web page reader must
have an e-mail account and must have their browser configured to send mail. The aULressees
email aULress will automatically be inserted in the "TO:" line of the e-mail system. You should
always include a MAILTO link on your home page so that readers can send you comments.
Note that by making your full e-mail aULress the link, you give those who dont have the ability to
take advantage of the MAILTO command a way to easily copy or print the aULress for future

use.
EXAMPLE: Send mail to <A "MAILTO:webteam@literacy.kent.edu>"
webteam@literacy.kent.edu </A>
Send mail to webteam@literacy.kent.edu (Press the link and see what happens)
Image Tag, <IMG>
Image tags link images into a HTML document. Each image tag places a separate request upon
the server. A HTML document with four images will require five separate calls to be made to a
server, one for the HTML document, four more for the images. If your server is slow or
overloaded you will want to keep the number of distinct connections required to load a page to a
minimum. You must also be aware of the file size of your images. The larger the image file size,
the longer it will take to load. You can reduce the file size of your images by reducing the number
of unique colors that your image contains. You can reduce the number of unique colors in an
image with graphic manipulation software like Paint Shop Pro or Photoshop.

Attributes:
SRC="..." The URL of the image
ALT="..." The text that will be displayed in non-graphical browsers
ALIGN="..." Alignment of text before & after the image. Values include: TOP, MIDDLE,
BOTTOM.
ISMAP: A clickable image map
List Tags

Unordered (Bulleted) Lists, <UL>...</UL>

An unordered (bulleted) list
Can Include: <LI>
Allowed Inside: <BLOCKQUOTE>, <BODY>, <UL>, <FORM>, <LI>

Unordered (Bulleted) List Examples

Ordered (Numbered) Lists, <OL>...</OL>
An ordered (numbered) list
Can Include: <LI>
Allowed Inside: <BLOCKQUOTE>, <BODY>, <UL>, <FORM>, <LI>
Ordered (Numbered) List Examples
Definition Lists
<DL>...</DL>
A definition list tag. The COMPACT attribute specifies a formatting that takes less white space to
present
Attributes: COMPACT
Can Include: <DT>, <UL>
<DT>...</DT>
A definition term tag. Definition terms are used within the <DL> tag in a similar way that the <LI>
tag is used within <UL> and <OL>.
<UL>...</UL>
A definition tag. The corresponding definition to a definition term.
Definition List Examples
Other Useful HTML 2.0 Tags

<HR>
Places a horizontal ruler line across the page. This tag is useful in dividing a web page into
distinct units.

EXAMPLE:
<STRONG>...</STRONG>
Strong emphasis (usually displayed as bold). Use instead of the <B> tag.

<EM>...</EM>
Emphasis (usually displayed as itallics). Use instead of the <I> tag.

<CITE>...</CITE>
Used for inserting a citation into the document. The text in a citation tag usually is displayed in
italics.

<AULRESS>...</AULRESS>
Used for general information about the document's author. Every web page should provide
information about the author, and ideally, it should also provide an option for the reader to send
e-mail to the author (i.e., the mailto attribute of the anchor tag).

<BLOCKQUOTE>...</BLOCKQUOTE>
Used for long quotes or citations.

<COMMENT>...</COMMENT>
Allows the web author to place comments in the document that are hiULen from the user. This
tag is often used to place information about the document in the HEADER. I use it to place
publication information about the document in the HEADER which can be used by human or
automated indexers to catalog the document (see the Home Page of this document). You can
also use it in the body to insert comments about your choice of tags or design considerations.

<PRE>...</PRE>
Used to insert preformated text into a page. The preformated element allows the web page
author to display text in unique ways that may not be allowed by other HTML elements. Text in
this element will display in courier font, so be aware that the text display will be different than
your surrounding text.
HTML element
From Wikipedia, the free encyclopedia
This article is about the HTML elements in general. For information on how to format Wikipedia
entries, see Help:Wiki markup and Help:HTML in wikitext.
"nobr" redirects here. For the chemical compound NOBr, see Nitrosyl bromide.
Ambox current red.svg
Parts of this article (those related to new elements and modifications in HTML 5) are outdated.
Please update this article to reflect recent events or newly available information. (December
2014)
HTML
HTML Dynamic HTML
HTML5 (audio canvas video)
XHTML (Basic Mobile Profile C-HTML)
HTML element (span and div)
HTML attribute HTML frame HTML editor
Character encodings (Unicode)
Language code
Document Object Model
Browser Object Model

Style sheets (Cascading (CSS))

Font family Web colors
HTML scripting
JavaScript (WebGL WebCL)
W3C (Validator)
WHATWG Quirks mode Web storage
Web browser (layout) engine
Comparisons
Document markup languages
Web browsers
Layout engine support
HTML Non-standard HTML
HTML5 (canvas media)
XHTML (1.1)
vte
An HTML element is an individual component of an HTML document or web page, once this has
been parsed into the Document Object Model. HTML is composed of a tree of HTML elements
and other nodes, such as text nodes. Each element can have HTML attributes specified.
Elements can also have content, including other elements and text. Many HTML elements
represent semantics, or meaning. For example, the title element represents the title of the
document.

In the HTML syntax, most elements are written with a start tag and an end tag, with the content
in between. An HTML tag is composed of the name of the element, surrounded by angle
brackets. An end tag also has a slash after the opening angle bracket, to distinguish it from the

start tag. For example, a paragraph, which is represented by the p element, would be written as

<p>In the HTML syntax, most elements are written ...</p>

However, not all of these elements require the end tag, or even the start tag, to be present.
Some elements, the so-called void elements, do not have an end tag. A typical example is the br
element, which represents a significant line break, such as in a poem or an address. A void
element's behaviour is predefined, and it cannot contain any content or other elements. For
example, an address would be written as

<p>P. Sherman<br>42 Wallaby Way<br>Sydney</p>

When using an XHTML DTD, it is required to open and close the element with a single tag. To
specify that it is a void element, a "/" is included at the end of the tag (not to be confused with
the "/" at the beginning of a closing tag).

<p>P. Sherman<br/>42 Wallaby Way<br/>Sydney</p>

HTML attributes are specified inside the start tag. For example, the abbr element, which
represents an abbreviation, expects a title attribute within its opening tag. This would be written
as

<abbr title="abbreviation">abbr.</abbr>
Front and back ends
From Wikipedia, the free encyclopedia

This article has multiple issues. Please help improve it or discuss these issues on the talk page.
(Learn how and when to remove these template messages)
This article may need to be rewritten entirely to comply with Wikipedia's quality standards. (May

2013)
This article needs additional citations for verification. (August 2011)
It has been suggested that this article be merged with Multitier architecture. (Discuss) Proposed
since May 2016.
In software engineering, front end and back end distinguish between the separation of concerns
between the presentation layer (the front end) - which is the interface between the user - and the
data access layer (the back end). The front and back ends may be distributed among one or
more systems.

In software architecture, there may be many layers between the hardware and end user. Each
can be spoken of as having a front end and a back end. The front is an abstraction, simplifying
the underlying component by providing a user-friendly interface.

In software design, for example, the model-view-controller architecture provides front and back
ends for the database, the user and the data processing components. The separation of
software systems into front and back ends simplifies development and separates maintenance.
A rule of thumb is that the front (or "client") side is any component manipulated by the user. The
server-side (or "back end") code resides on the server. The confusion arises when one must
make front-end edits to server-side files. Most HTML designers, for instance, don't need to be
on the server when they are developing the HTML. Conversely, the server-side engineers are,
by definition, never on anything but a server. It takes both to make a functioning, interactive
website.

For major computer subsystems, a graphical file manager is a front end to the computers file
system, and a shell interfaces with the operating system. The front end faces the user, and the
back end launches the programs of the operating system in response.
Using the command-line interface (CLI) requires the acquisition of special terminology and
memorization of commands, so a graphical user interface (GUI) acts as a front end desktop
environment instead. In the Unix environment, ncurses is a simpler, semi-graphical front end to

the CLI. At the level of the Unix CLI itself, most byte stream-oriented (that is, using
stdin/stdout/stderr as their interface) programs act as filtersstandalone programs that can
also serve as front ends and back ends to other programs. (They function by piping data
between themselves, mostly for text processing; for example: $ grep word ~user/dir/infile | sort
| tee ~user/dir/outfile)

In network computing, front end can refer to any hardware that optimizes or protects network
traffic. It is called application front-end hardware because it is placed on the network's
outward-facing front end or boundary. Network traffic passes through the front-end hardware
before entering the network.

In content management systems, the terms front end and back end may refer to the end-user
facing views of the CMS and the administrative views, respectively.

In compilers, the front end translates a computer programming source code into an intermediate
representation, and the back end works with the intermediate representation to produce code in
a computer output language. The back end usually optimizes to produce code that runs faster.
The front-end/back-end distinction can separate the parser section that deals with source code
and the back end that generates code and optimizes. Some designs, such as GCC, offer
choices between multiple front ends (parsing different source languages) or back ends
(generating code for different target processors).

In speech synthesis, the front end refers to the part of the synthesis system that converts the
input text into a symbolic phonetic representation, and the back end converts the symbolic
phonetic representation into actual sounds.

In the context of WWW applications, a mediator is a service that functions simultaneously as a

server on its front end and as a client on its back end.[1]

Web design
From Wikipedia, the free encyclopedia
Web design encompasses many different skills and disciplines in the production and
maintenance of websites. The different areas of web design include web graphic design;
interface design; authoring, including standardised code and proprietary software; user
experience design; and search engine optimization. Often many individuals will work in teams
covering different aspects of the design process, although some designers will cover them
all.[1] The term web design is normally used to describe the design process relating to the
front-end (client side) design of a website including writing mark up. Web design partially
overlaps web engineering in the broader scope of web development. Web designers are
expected to have an awareness of usability and if their role involves creating mark up then they
are also expected to be up to date with web accessibility guidelines.
Web development is a broad term for the work involved in developing a web site for the Internet
(World Wide Web) or an intranet (a private network). Web development can range from
developing the simplest static single page of plain text to the most complex web-based internet
applications, electronic businesses, and social network services. A more comprehensive list of
tasks to which web development commonly refers, may include web engineering, web design,
web content development, client liaison, client-side/server-side scripting, web server and
network security configuration, and e-commerce development. Among web professionals, "web
development" usually refers to the main non-design aspects of building web sites: writing
markup and coding. Most recently Web development has come to mean the creation of content
management systems or CMS. These CMS can be made from scratch, proprietary or open
source. In broad terms the CMS acts as middleware between the database and the user through
the browser. A principle benefit of a CMS is that it allows non-technical people to make changes
to their web site without having technical knowledge.[1]
For larger organizations and businesses, web development teams can consist of hundreds of
people (web developers) and follow standard methods like Agile methodologies while
developing websites. Smaller organizations may only require a single permanent or contracting
developer, or secondary assignment to related job positions such as a graphic designer and/or
information systems technician. Web development may be a collaborative effort between
departments rather than the domain of a designated department

A client is a piece of computer hardware or software that accesses a service made available by
a server. The server is often (but not always) on another computer system, in which case the
client accesses the service by way of a network.[1] The term applies to the role that programs or
devices play in the clientserver model.
Server (computing)
From Wikipedia, the free encyclopedia

This article needs additional citations for verification. Please help improve this article by adding
citations to reliable sources. Unsourced material may be challenged and removed. (July 2015)
(Learn how and when to remove this template message)

Wikimedia Foundation servers

In computing, a server is a computer program or a device that provides functionality for other
programs or devices, called "clients". This architecture is called the clientserver model, and a
single overall computation is distributed across multiple processes or devices. Servers can
provide various functionalities, often called "services", such as sharing data or resources
among multiple clients, or performing computation for a client. A single server can serve multiple
clients, and a single client can use multiple servers. A client process may run on the same
device or may connect over a network to a server on a different device.[1] Typical servers are
database servers, file servers, mail servers, print servers, web servers, game servers,
and application servers.[2]

Clientserver systems are today most frequently implemented by (and often identified with) the
requestresponse model: a client sends a request to the server, which performs some action
and sends a response back to the client, typically with a result or acknowledgement.
Designating a computer as "server-class hardware" implies that it is specialized for running
servers on it. This often implies that it is more powerful and reliable than standard personal
computers, but alternatively, large computing clusters may be composed of many relatively
simple, replaceable server components.