HTML and the World Wide Web
By Oreoluwa Alebiosu, Jacob Martin,
Lathan Mastellar, Joseph Mindrup, and David Tomlin
History of HTML
In the Beginning
Tim
Berners-Lee, essentially the father of HTML, he worked at a European Particle
Physics Laboratory in Geneva Switzerland, CERN you may have heard of CERN it’s
the home of the famous Large Hadron Collider built from 1998 to 2008 . In this
industry there is a lot of collaboration going on, Tim knew that without a new,
improved form to collaborate the research would not peak at what everyone would
like to see it at. He had an innovative idea to create a form of digital text
format in which you could bounce from page to page from the click of a word on
a page, essentially linking directly relevant text to other documents or
research papers. Tim had made a prototype Hypertext system called “Enquire” in
1980.
Late 1980s: HyperCard
In the late 1980’s Bill Atkinson came
up with a system for mac called HyperCard. This allowed you to bounce to
different information (on the same computer) based on the filing card idea.
Although a large step there was yet the ability to do this with computers on a
global scale. Luckily in the mid 80’s the Internet had a new system for naming
computers Domain Names. This was huge because it was now simple to access a
page with just simple code for example “www.cis.ksu.edu”.
Early 1990s: Spreading HTML
Tim’s new language “HTML” is based on
a markup method; SGML. Using a formal way of writing a document as code. This
made the language very user friendly with a small amount of work and a general
knowledge of the subject matter. At this point in September of ’91 He started
spreading the word through the internet as fast and efficient as possible, from
which a electronic discussion group was formed where enthusiasts could exchange
thoughts. Dave Raggett seemed to catch light of the subject, Dave realizing how
big of an opportunity this is paid Tim a visit in 1992. At CERN where it all
started, the two sat down and put a valiant effort into making something like
HTML ready for the world, trying to make it more user accessible. Document
based media like magazines among other text layouts where observed for a sort
of base to the language, seeing as it was to be the most efficient way to
publish the same documents online. After returning home Dave then went on to
finish HTML+, a polished, more structurally sound HTML.
Late 1992:
Others are Intrigued
While this was happening,
Joseph Hardin and Dave Thompson of the National Center For Supercomputer
Applications at the University of Illinois saw what Tim had been working on.
They connected to the computer at CERN and downloaded copies of the free Web
browsers. They quickly saw the significance of what they had come across, so
NCSA decided to develop a web browser of their own called Mosaic.
December
1992: The Placement of the IMG
One of the programmers, Marc
Andreessen, who worked on the Mosaic web browser, had an idea on how images
should be inserted into HTML Documents. There were already many people
discussing on the way that this should be implemented and even what it would be
called. So Anderson came in on the discussion and introduced the idea for the
IMG tag giving credit to the Mosaic team. Not everyone was very keen on the
idea that she had presented but Anderson was persistent. The Mosaic team
implemented the IMG tag on its browser and still remains to this day
implemented in HTML.
1993: The
Year of the Browsers
By 1993 many people had heard
of what was happening with HTML and browsers. While the Mosaic team was working
hard on developing their browser Dave Raggett of Hewlett-Packard Labs in
Bristol began working on his Arena browser. His intention was to demonstrate
all sorts of newly invented features for HTML with his new browser. Then in
March Lou Montulli releases one of the first text-based browsers, the Lynx
browser. He wanted to remain loyal to the idea of developing HTML as an open
standard. Shortly after this in April The Mosaic
team released their browser.
May 1994: First conference showing off
HTML
Dave Raggett, the developer of the arena browser, had been
working on various new HTML ideas which he called HTML+. He showed off his
ideas at the conference and stated that his work should be carried forward to
lead to the development of an even more advanced HTML, HTML 3. Dave Raggett was
able to demonstrate various new abilities that he came up with using his new
ideas. An HTML working group was set up shortly after that by the internet
engineering task force.
The First draft of HTML3
Since he announced his work on HTML3 at the conference in
May of 1994, Dave Raggett had been working at releasing the first copy of
HTML3. In March of 1995 he formalized an Internet Draft for HTML3. The draft
was very well received; most if not all browser writers were very keen on
supporting HTML3. Dave Raggett continued work on his project.
1995 a Big Year for HTML
1995 was a big year in the development of HTML. In November
the HTML working group was having a very difficult time keeping up with
programming. Also the group was having a hard time coming to a consensus on a
given HTML feature. Later in the month style sheets for HTML began taking
shape. A group of people from the World Wide Web Consortium came up with and
deployed the Cascading Style Sheets or CSS. They developed a new language to
write for HTML. In December of that year The HTML working group was dismantled
due to not being able come to agreements fast enough for the fast paced
evolution of HTML.
HTML 3.2 and 4
In January of 1997 HTML 3.2 is finally ready for release. It
had been reviewed by the major browser vendors. And in spring of 1998 HTML 4.0
is released.
Sample
HTML
Common HTML
Tags
<!DOCTYPE html>
<html>
<body>
<h1>My first heading</h1>
<p>My first paragraph</p>
</body>
</html>
Explaining
the Tags
The <!DOCTYPE> declaration must be the very first
thing in your HTML5 document, before the <html> tag. 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, all <!DOCTYPE>
declarations require a reference to a DTD, because HTML 4.01 was based on SGML.
HTML5 is not based on SGML, and therefore does not require a reference to a
DTD. It is always necessary to add the <!DOCTYPE> declaration to your
HTML documents, so that the browser knows what type of document to expect (“HTML Reference”). The <html> tag is used to indicate the formatting of the tags
below are indeed of HTML and it is always necessary to add this tag. In
addition, a closing tag “</html>” is required usually as the last tag in
the document. In addition to the html tag the <body> tag indicates the
document’s body. This tag incorporates all the other tags within the html tag.
It contains the header, paragraphs, texts, lists etc. The header tag indicates
the header and the paragraph tag is used to indicate a paragraph. Usually the
paragraph tag can also contain tags used to edit texts written within the
paragraph. Such as hyperlinks, lists etc. The code above indicates the most important tags which are
often used in HTML.
Implementing
HTML
HTML/CSS with Dreamweaver
Now
that you have become accustomed to seeing HTML code made from scratch, we can
start getting into programs that help you write it just in case that it proves
difficult. A good example of that would be Adobe Dreamweaver. Adobe Dreamweaver
is a program that assists a user in typing HTML code with text window prompts
as code is being typed to help complete the line. As you get into Dreamweaver
you will also be introduced to Cascading style sheets, or CSS. When designing a
website with multiple pages, originally you would have to re-type the design
set up in every single web page source code to make sure they are uniform. A
Cascading style sheet changes that by applying a style to all pages that are
associated with it. There is only one thing that I would caution you over if
you decide to use a CSS, which is that the design typed in it has higher
priority than the code typed on the web page source page. Although it is
possible to make a web page differ from the CSS style of the other web pages,
the altered design traits of that web page must not be defined by the CSS,
because the CSS code will over rule it. For example, if you have the body color
of the page defined in the CSS as defaulted to blue, all web pages associated
with it will have the body color defined as blue. If you want a certain web
page to have the body color defined as red, you are going to have to make some
adjustments in your code to make it not conflict with the CSS. Now with that
piece of information established, let’s look at some specific examples of code.
Example Code
In
CSS, you will see code exactly the same as the design code you would put at the
top of the source code page.
body
{
background-color: #FC6;
color: #039;
font: Comic Sans MS;
font-size: 14pt;
}
This body code
would set the background color of the body to #FC6, the text color to #039, the
font type to Comic Sans MS and the font size to 14 points. This means that so
long as it is inside the body tag and the body tag alone, it must adhere to
this definition. The way to get around that is to put the code between another
tag set. For example:
h3
{
background-color: #39f;
border-bottom-color: #003;
border-bottom-width: thin;
border-bottom-style: solid;
text-align: center;
margin: 35px;
}
This now defines
that code as being defined strictly by the h3 tag set. Inside it, the
background color has been redefined as #39f inside the CSS or in the source
code if defined uniquely inside the web page. If it was defined in the CSS then
all h3 tag sets will strictly be bound by these rules. If defined by the web
page source code, then another web page can be defined with different
characteristics for h3.
Key Points
As
you bring your HTML/CSS code together, eventually it will start looking like an
official web site with half the coding that it would originally take you to
make it. This is done by default by Dreamweaver reading the CSS code and
applying the design code automatically. In the end, that is the function of the
CSS; it gives Dreamweaver a set of instructions when creating a web page
associated with that style sheet. This feature is not strictly used by
Dreamweaver alone. Just make sure that when creating a style sheet, save it
with “.css” at the end. This lets directories know that it is a style sheet,
not just a document of text or a website.
History of World Wide Web
What is the “Web”?
The World Wide Web (or “Web” as
we will refer to it) is an enormous collection of information and media shared
by users all over the world who are connected through the Internet. Do not confuse
the Web with the Internet, which is a common mistake. The Web is only a
service, like a social network, that takes place over the Internet. Its history
doesn’t date back too far (compared to the Internet) but is an interesting
story, because at the time, the idea was almost thrown out the window.
Tim Burners-Lee
In the year
1980, a man named Tim Berners-Lee, in Switzerland working for The European
Organization for Nuclear Research (CERN), had built a software project called
ENQUIRE, that was designed to have similar functions as the Web. The only
problem with ENQUIRE was that he was the only major user of his system. A
system that could be used by everybody was needed to spread his idea. This idea
was to allow people to make documents that had links to other documents, and
that one document could be updated without having to update the other. Another
problem with ENQUIRE was that it lacked the ability to communicate with a
database. The need for an easy to use system was needed but not necessarily in
high demand. Berners-Lee had left CERN only to return four years later. He
slowly continued pressing into his idea. The visualization he had was to make
information sharable all over the world, without common presentation software.
It was not until 1989 that Berners-Lee wrote his suggestion for a single,
global hypertext system with links from page to page. Although it sounds like a
great idea to us, because we now know of the benefits, at the time, the idea
was brushed off and got next to no attention. Nevertheless, Berners-Lee began
creating his vision, eventually settling on the name “World Wide Web”.
Devotion
Finding
businessmen to invest in Berners-Lee’s ideas proved to be more of a challenge
than anticipated. Even when Robert Cailliau rewrote the idea, the European
Conference on Hypertext Technology gave it no interest. Even in spite of this
rejection, Berners-Lee pressed on, building the tools he found essential for
building the Web. These tools included the HyperText Transfer Protocol (HTTP)
0.9, the HyperText Markup Language (HTML), the first Web browser (named
WorldWideWeb), the first HTTP server software, the first web server, and even
the first Web pages, which described the idea behind the Web. Talk about
sticking with it! However, there still remained one problem: the browser Burners-Lee had designed would
only run on the NeXT workstation available through CERN. A woman named Nicola
Pellow created a browser called the Line Mode Browser. This browser was a very
plain, simple one but was able to run on the majority of computers. The vision
was finally becoming a reality. After more development and further processing,
Burners-Lee decided to release his idea for public use. It was on August 6,
1991, when he listed a briefing of the World Wide Web project he created on the
alt.hypertext newsgroup.
Spreading the Idea
Now that the Web had been invited and
published, it needed to spread. Paul Kunz, who was with the Stanford Linear
Accelerator Center (SLAC), took a great deal of interest in the Web upon a
visit to CERN. Kunz obtained a copy of the software and brought it back with
him. He used the software for a method of displaying SLAC’s catalog of online
documents. The Web had finally spread to
somewhere other than Europe and could now journey throughout the US. The early
users of the Web kept its use very plain, to organize documents and link them
to one another. But others began seeing the Web as something that could be used
as a much more powerful tool. It was noted that the Web could be used to
display pictures, graphics, sounds, animations, etc. The only problem was that
a browser capable of handling these types of media had not yet been created. In
April 1992, an application called Erwise was released, marking it to be the
first graphical browser available. Unfortunately, modem speeds were extremely
slow compared to the ones we have today and pages with pictures or other large
amounts of data took too much time to load. Although Erwise was the first
graphical browser, it never took off in populariy.
The Release
The first defining moment for the Web
came with the invention of a web browser called Mosaic. Invented in 1993,
Mosaic was the first browser to really spread popularity of the Web. Again, the
biggest limitation was loading time; however, by the end of 1994, the number of
copies of browsers exceeded one million, with Mosaic being the most popular by
far. Then in 1994, Berners-Lee again contributed to his invention of the Web by
founding the World Wide Web Consortium (W3C). The W3C created standards for and
ideas to improve the Web. In order for people to easily conform to these ideas,
Berners-Lee made the Web openly available to all, with no payment of royalties
or patent. With the Web now being 100% free, it took off even higher numbers of
users, and by the mid 1990s, many businesses began making their own websites.
Free public publicity contributed to the success of many businesses. It even
allowed for a Web-based commerce, displaying products on pages linked to the
main page through hypertext. It was during this mid 90s boom that many of
today’s large Web-based businesses were started, such as Amazon and Google.
With all these businesses making websites, it marked the beginning of an era,
the Internet era. The Web grew rapidly through the late 90s, by over 2000%, and
there were approximately 750,000 commercial websites by 1998. But where some
succeeded, others failed. Many companies went under after the turn of the
millennium, but those who survived made fortunes.
The Web Today
In the early
2000s, the potential of the Web was finally beginning to be utilized. Social
networking sites such as MySpace and Facebook were created; blogging sites
began taking off and video viewing sites such as YouTube were made. The number
of sites and users expanded even farther. The impacts from the Web have become
nearly endless. Burners-Lee’s invention had surpassed even his own
expectations. Could you imagine the world today had the Web not been invented?
Works Cited
References:
“HTML Reference - (HTML5 Compliant)." HTML Reference.
N.p. Web. 01 Oct. 2012. <http://www.w3schools.com/html5/tag_doctype.asp>.
“History of the World Wide Web.” Wikipedia. 14 Sept. 2012.
Web. 27 Sept. 2012.
<http://en.wikipedia.org/wiki/History_of_the_World_Wide_Web>.
“Hypertext.”
Wikipedia. 12 Sept. 2012. Web. 27 Sept. 2012. <http://en.wikipedia.org/wiki/Hypertext>.
Peter, Ian. “History of the World Wide Web.” Net History.
2004. Web. 27 Sept. 2012.
<http://www.nethistory.info/History%20of%20the%20Internet/web.html>.
"2 -
A History of HTML." Chapter 2. N.p. Web. 01 Oct. 2012.
<http://www.w3.org/People/Raggett/book4/ch02.html>.