Have you ever seen a website and wondered how it was made? How does a programmer even get started building one? Well, wonder no longer - I'm going to give you a quick rundown of the building blocks for a modern website.
When you access a website via your web browser, you are connecting to another computer that gives you back a set of files that make up the website. This other computer is referred to as a "server" because it serves your browser (the "client") with a webpage. While the inner workings of the server might be pretty complicated, the files your browser handles are reasonably easy to understand.
A website such as the New York Times homepage http://www.nytimes.com can be thought of in three separate layers - presentation, behavior and structure. First there's the structure - the definition of what blocks of text make up the page, what images are on the page, and which bits of text are links. Then there's behavior, like tabs that show and hide content without reloading the page, or dropdowns that activate when you click on them. Finally there's the presentation layer - the way the page looks, what fonts and colors different blocks of text have, and even where the blocks are placed.
These three layers each have a language provides your web browser with the information it needs to display a page when it is retrieved from a site. They make up what is known as the client-side of a web page, and will be what we focus on for the rest of this article.
The structure of a site is provided by HTML (HyperText Markup Language). HTML uses specialized tags to add structure to an otherwise plain text document. HTML started when Tim Berners-Lee came up with the idea of the world wide web project in 1990. The idea of using tags to mark up text was based on another language called SGML, but he introduced one key element: hyperlinks. You can still see one of the earliest example pages online, showing this cool new concept. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/Link.html It doesn't seem like much now, since you probably click on links all the time, but the introduction of the link was essential to building the internet as we know it today.
The language has evolved somewhat since then, in large part due to different people taking and extending the language to do new things such as show images or allow styling of the page. Despite the evolution the core idea still remains intact - tags to add structure. There are tags to mark the title of a page, tags to mark separate paragraphs and, of course, a tag to create links between pages.
Let's take a look at some of the basic tags you might encounter while looking at the source code of a webpage (which is actually quite easy to do: http://webdesign.about.com/od/chrome/a/view-source-chrome.htm for how to do it in chrome, other browsers should also be easy - there are links to them at the bottom of the article.)
When your browser visits a page, the server might respond with a simple bit of HTML that looks like the snippet below. Don't worry if you don't understand it, we'll break it down below:
<body>
<h1>Searcher</h1>
<form class="search">
<input id="search-box">
<a id="search" href="#">Search Me!</a>
</form>
</body>
This HTML would build a page with a header "Searcher" and a form with a search
box and a link that said "Search Me!" in text. The way the browser interprets
this is with what are called tags: <body> is the tag representing the
entire body of the page, which then wraps around a form tag, which
wraps around other tags.
Tags might have attributes, extra information inside the tag between the
angle brackets to help the browser out. <form class="search"> says that our
form has an attribute named class with a value of "search", for example.
There are many possible attributes for elements (some differing based on
element), class and id are two commonly used attributes for identifying,
styling and adding behavior to items on a page.
Most of the tags are closed with repeats of themselves with a slash in front:
</body>, for instance, represents that the end of the body has been reached.
Inside the form is an input element, which is represented by your browser as a
field you can type text into. After the input is a <a> tag, representing the
all-important hyperlink. The href attribute of a hyperlink points to another
page, the text wrapped in the tag is what the link says when you view the page
(often in blue underlined text).
CSS provides the presentational details of a site. After people started playing with HTML, they started wanting to be able to make things look a certain way. Different browsers started offering creators of web pages different options to style their page with HTML. It was hard to know what a page would look like in other browsers, since every browser had special ways to style a page.
Developers decided to get together and create a standard for styling HTML using stylesheets, allowing a separation of presentation and markup. The idea of stylesheets - files for defining the style of a page of markup had existed since before HTML, and a few proposals for a standard way to use them for HTML came out. Two of the proposals came together to form what we know of as CSS today and the initial version finalized in 1996 - six years after HTML came out.
It took quite a while for some browsers to get up to the spec, and it's had a lot of additions since then, the latest version - CSS3, includes support for advanced things like shadows and 3d transformations.
The CSS language can be embedded in HTML with the <style> tags, or included
as a separate file with a <link>. Here's a bit of CSS that will make our
header (<h1>) bigger and center our form, giving it a blue background
<style>
h1 { font-size: larger }
.search {
margin: 200px auto;
width: 50%;
background: blue;
}
</style>
Above we have a simple snippet of CSS that might style some HTML we saw
earlier. The way CSS works is a selector, followed by a set of rules in curly
braces. A selector might be a simple html tag (like h1), which would style
all h1 tags. It could be something with a class, like .search, which styles
any element with that class, or it could be several of those together - if
there's a whitespace between, like h1 span, it would mean you want all spans
that are inside of h1s, but not any other spans. If mashed together, you're
specifying something extra about the element: input.search-box specifies
all inputs with search-box as a class attribute.
There are lots of different style options that can be applied to different elements, such as making headers have larger font sizes or adding a top margin of 200px and auto margins (to center the form - automatically filling the margins equally on each side). You can also set colors. Here we've set some ugly base ones, including one using hexadecimal RGB colors: #ff0000 represents bright red.
Behavior, the last layer of a modern website, is provided with Javascript. Around the same time people were playing with different ways to stylize their pages, other people were trying to figure out ways to make pages more interactive so that you could do stuff with them. Netscape Navigator, a popular early web browser, came out with a language called Livescript that would allow creators of web pages to include actual programs in their sites. Around this time, a language requiring a browser plugin called Java also came out. Netscape Navigator accepted the Java plugin and decided to rename their Livescript to Javascript to go along with it.
Internet Explorer, Microsoft's browser, came jscript which was enough like javascript that in some cases you could write code that worked in both Netscape and IE. As IE added more and more functionality to jscript to mimic javascript, it started to become clear that it should become a standard that all browsers could work on. The standardization process began right around the same time CSS was being standardized.
The DOM - document object model - allows a javascript programmer to inspect and alter the page (document) being viewed by the browser. This lets javascript do things like read what you type into a box, or change the page to add an element. A bit of javascript on a page might look like this:
<script>
document.getElementById('search').onclick = function(){
alert("You wanted to search: '"+ document.getElementById('search-box').value + "'");
}
</script>
This bit of code says that when the we click on an element with the id of
search, we want to run a bit of code called a function. Our function will
first figure out the current value the user has typed into the search box
(document.getElementById('search-box').value). Then it will send an
alert dialog says "You wanted to search {something}" where something is the
value it found in the search box.
And there you have it, a brief rundown of the building blocks of a web page. You should have a basic enough grasp to look at the code of the complete example and understand how it works, to some extent. While a web designer has more knowledge about the different HTML elements and CSS styles available, they will generally be dealing with the same basic concepts I've touched on here - presentation (with CSS), behavior (with Javascript) and structure (with HTML).
(attach example.html)