Your first web site Part 1 - How the web works

From Web Education Community Group
Jump to: navigation, search

Surfing the web is easy, creating the web is too!


Learning how to create web pages can be confusing (unless you’ve got a super-geek friend to help you out). There are so many ways to create a web page, and so many things to consider in terms of how you want to make it look, what tools to use to code it, where to store your files on the Web, and how to get them up there. And before you’ve even started to implement it, you have to answer the all-important questions what should my page do?, and what should it say to people? Maybe you just want a web page for the fun of it, and don’t really want it to do or say anything. Maybe at this point you’re wondering why anyone bothers to go to all the effort.

There are easier solutions available than doing the whole thing yourself too. You can get your own web page by joining a social network such as MyOpera, or using a service like Live journal or Blogger. But making your own is much more rewarding — you can do anything you like to the look and feel of it, limited only by your imagination. Third party sites are usually pretty limited in terms of what design and type of site you can make. In addition, having someone else running your site means that anything you put up there is controlled by them, and not you. What if the social networking site you used suddenly closed down? Plus those types of sites usually have a revenue model paid for my advertisements popping up everywhere. Wouldn’t it be nice to have an advert free site?

Getting a simple page up on the web isn’t actually that difficult, as long as you know what to do, and what to avoid.

In this article series I’ll introduce you to the basics that you need to create a simple web page and put it up on the Web for the world to see. I’ll take you step by step through how the web works, the process of creating a basic page, giving your page some style, and getting it on the Web. I’ll also provide you with a template that you can write your information into, and show you how to do basic customisations on it to get it looking like your own.

This article in particular will look at the tools you will use to build your first web page, how the web works, and the basics of HTML, the language your content is stored in. The table of contents is as follows:

This article is for complete beginners; if you want a more thorough treatment of the subject, check out Opera’s comprehensive web design and development learning course — The Opera web standards curriculum.

What tools do I need?

An image of a big soup of acronyms and a scared-looking guy would be great

You don’t need to go wading through a huge sea of acronyms and complicated terms at this stage in your learning. There are many technologies you could use, but in this article I’ll just keep it simple, and introduce you to the two most important technologies on the web today — HTML and CSS.

  • HTML is the language that all your text is stored in; HTML defines the structure of your text — is it a paragraph, or a table of data, or a list of bullet points?
  • CSS is the language that you use to style your page — do you want to use a different font, or change the colour of your text or background, or add spacing to make your text more readable, or move it around on the screen?

You might have created your own page before, on a site such as MyOpera, MySpace, Orkut or Beebo — these kinds of sites usually allow you to make certain customizations, such as adding custom background images, text, photos, etc. If so, then you’ve done some web design already, it’s just that those sites do the complicated stuff for you. But it really isn’t that complicated to write your own HTML and CSS either — in this article series I’ll show you how simple the basics are, and you’ll soon be putting up your own personal pages, free from the trappings of a third-party site.

Ok, I know what I said above, but don’t get too confident. You’re not going to build another Facebook or in a week — they are very complicated web applications built by teams of professional web developers. They all had to start somewhere though, and this article series will give you that start.

How does the web work?

Before we go any further, I’ll say a few words about how the web actually works. Gerbils? Hamsters? Nope — servers. The web is a collection of computers, categorized as servers and clients.

a typical client-server interaction image would be nice here

Servers store web sites. When a client machine — such as your computer — requests a web page from a server, the server sends the client the files that it needs to use to display the web page to the person using the client. A client machine usually sends such a request to a server using a web browser such as Opera or Internet Explorer — when you first visited this page (either by typing in the web address or by following a link here), you did exactly that.

Expressing yourself through HTML

HTML, as we said before, is what you use to structure your information on the page, turning it from raw unstructured text into paragraphs, lists of bullet points, pictures, etc. It isn’t a programming language as such; it is termed a markup language. You wrap your information inside elements, and the different elements available to you in the HTML language make the text you wrap in them behave in different ways, when your web browser loads them up.

how HTML elements work

Creating an HTML document

HTML is stored inside a file with an extension at the end of .html. To create one, you can open up any simple text editor (for example Notepad++ on Windows, or Text Wrangler on Mac, or EMacs on Linux), create a new document, then go to Save As... in the File menu and type a name followed by the correct extension, for example myhtmlfile.html. The file extension tells a web browser (or other appropriate program) what kind of content to expect in that file, and therefore what to do with it when it opens the file.

On most computers, you can create documents and call them pretty much whatever you want. The web works a bit differently, and many characters are not allowed in file names, plus you’ll need to enter files names regularly when including images, links and other resources in web pages, and typing errors can easily happen! To avoid as many problems as possible, I would advise you to stick with short, easy to remember file names, all in lower case letters. mypetdog.jpg is nice and easy; isn'tmylovelylittle_dogPREtty?Sheis8monthsold!.jpg is hard to remember, and will cause errors, even if you do spell the file name correctly.

The anatomy of an HTML element

An HTML element is made up of an opening tag, closing tag, attributes (which specify other information the element needs to do its job) and the content inside it. Bear in mind that HTML elements can contain other HTML elements, and also that some HTML elements don’t have any content inside them, so are referred to as empty elements

an HTML element

The structure of an HTML file

At this point I’d like you to download my sample web page template, unzip the file (double click it on Mac; on Windows and Linux you might have to install a program such as Winzip or Stuffit Expander), and then have a look at the cvtemplate.html file inside the 7-finishedexample folder — open it in a text editor like the ones mentioned above so you can see the code. This may look complicated at first glance, but it really isn’t. All properly written HTML files have the same structure:

the structure of an HTML file

The items inside the file are as follows:

  1. The doctype: The first line of an HTML file is always the doctype — don’t worry about this; you won’t need to remember it. Just keep a copy somewhere safe, and copy and paste it into the top of each new HTML page your create. This basically tells the web browser to follow a certain set of rules when displaying your marked up information.
  2. The html element: This element contains the whole of your web page — every other element that makes up the page should go inside this one. It consists of the opening <html> tag, the closing </html> tag, and everything inside the two
  3. The head element: This element contains other elements that describe or provide information about the web page. None of the contents of these elements are directly seen when the web page is loaded in a browser. It consists of the opening <head> tag, the closing </head> tag, and everything inside the two
  4. The body element: This element contains other elements that are directly seen in the web browser — this is where the content of your page goes; your paragraphs, images, etc. It consists of the opening <body> tag, the closing </body> tag, and everything inside the two

HTML as a tree structure

It is useful to think of an HTML page as a tree. Indeed, they are often said to have a tree structure, and the html element is often called the root element, meaning that it is the lowest level element in the page. Think of this as the root and the main stem of the tree, and all the other elements inside it as the branches of the tree. Other commonly used terminology here is parent and child. An element’s parent element is the one it is inside. An element’s child elements are the elements inside it.

parent-child relationships in HTML

  1. The <ul>'s child elements
  2. The <li>'s parent element


By this point, you should know the basics of how the Web, and HTML — the language that you use to structure your content on the Web — work. That’s all for now — in the next article I will take you through the structure of the HTML head and body in detail, showing you what all the elements inside do.