About HTML & CSS

The basic building blocks of webpages are HTML and CSS. Both concepts are explained here. They are very much interrelated, but to clearly explain these concepts, they will be handelled seperatly. It comes down to this: with HTML the structure of a document's content is defined and CSS then allows us to layout the document to make it graphically appealing. This is also the order in which we will approach the building of a webpage. Perhaps you might already have learnt building websites in Dreamweaver, we will instead go back to basics and start looking at the code of HTML and CSS. This way it is easier to understand how it really works and you will have more control over the final output. Both HTML and CSS can be written in a simple text editor like Notepad, we will use Netbeans. Open up Netbeans to try out the examples while reading this tutorial. We will start off with HTML.

HTML

HTML concept

HTML is a language to define the structure of the contents of our webpage. Just like you would structure a normale text document, we will define sections, heading and paragraphs for the webpage, called elements. This structure allows us to easily read the contents of the document and later on provides us a way to layout the webpage using CSS.

Attributes

Now that we know what tags are, we can extend them by using "attributes". Every tag can have multiple attributes. These define additional information about the element which is wrapped inside the tags. For example a name can be provided for the element. An element with several attributes looks like this:

<tagname attribute="value" attribute="value">content of this element</tagname>

Notice that the attributes are separated from each other or the tagname by a blank space. Each attribute has a value which is inside quotation marks.

Keep this in mind

That's it! That is how HTML works. Ofcourse you will still have little knowledge of the different tags and attributes, but we will expand that knowledge in the next section. If you understand this basic concept of HTML, you have come a long way. Many of the people that write HTML don't know all the available tags and attributes by hart. But they know where to find them. In the next section we will explain many of the common tags, but you will probably use a reference to look them up frequently. Links to these resources are provided in the section 'HTML useful resources'.

Some rules for the HTML language

We will use the latest version of HTML to write our code in, this is called XHTML. That means that we have to obey certain rules that did not necessarily apply to older versions of the language. Just to explain these rules we will refer to XHTML. In the rest of this tutorial we will refer to XHTML as HTML, just to keep it simple. While writing HTML keep these rules in mind:

All tags and attributes need to be written in lower-case. XHTML is case-sensitive, so an attribute value "valuE" is not the same as "value".
Every XHTML element needs to be closed. (i.e. a <p> tag must be followed by a </p> tag closing it somewhere.)
If you place an element inside another element, which is perfectly fine, you need to close it correctly inside the parent element. For example: <html><body></html></body> is wrong. <html><body></body></html> is correct.

HTML building blocks

HTML document structure

(Almost) every webpage has the following basic structure. This structure, though a little bit extended, is provided for you to start working from. File:AR0051 webtemplate.zip

```
<html>
```
```
	<head></head>
```
```
	<body></body>
```
```
</html>
```

Notice that for clarity reasons for you to read the document while writing, the elements "head" and "body", which are inside the "html" element, are tab-indented to show the hierarchical structure of the document. Elements inside other elements are called nested elements.

The first tag you encounter is the <html> tag. All code written for the webpage is enclosed between html-tags, it then can be interpreted correctly as HTML language. The html-tag can have attributes. For a complete reference of attributes for the html-tag, see http://www.w3schools.com/tags/tag_html.asp.

Inside the "html" element are the "head" and the "body" element. The "head" element contains all information about the document that is not visible in the browser. The "body" element contains all information that is visible in the browser.

The "head" element can contain for example the page title (<title>), the page style rules (<style>) or additional meta-information (<meta>). For a complete reference of the <head> tag's attributes and containing elements see http://www.w3schools.com/html/html_head.asp. Allthough the information provided in the head of the HTML document can be very important, in this section we will focus on the elements that are used in the "body" element. They will provide the actual structure for the visible content and therefore probably require the most attention during the building of a webpage.

HTML body elements

Structuring the content

It was already mentioned before that HTML defines the structure of a webpage. The tags that are available to define this structure are <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p> and <div>.

<h1> to <h6> are tags to define headings, like for example a chapter title or a section title. <h1> is the largest and <h6> is the smallest.

<p> is the tag to define a paragraph of the content. The "paragraph" element can contain any inline content like text or images.

<div> is the tag to define divisions in the webpage. With "division" elements you could define sections in your document. The "division" element is very commonly used in conjunction to CSS to position and style sections of the webpage.

With the current knowledge the following example could be written. Try to understand the function of every part of the HTML by analysing it carefully. If it is unclear, go back and read again what the function of each element is. Also save this code as a HTML-document to view it in the browser and see what it will look like.

```
<html>
```
```
	<head>
```
```
		<title>Example document</title>
```
```
	</head>
```
```
	<body>
```
```
		<div>
```

			<h1>Heading 1 in the first division</h1>

```
			<p>
```

			This text is content of a paragraph in the first division.

```
			</p>
```
```
		</div>
```
```
		<div id="divisionIndentifier">
```

			<h1>Heading 1 in the second division</h1>

			<h2>Heading 2 in the second division</h2>

```
			<p>
```

			This text is content of a paragraph in the second division.

```
			</p>
```

			<h2>Another heading 2 in the second division</h2>

```
			<p>
```

			This text is content of another paragraph in the second division.

```
			</p>
```
```
		</div>
```
```
	</body>
```
```
</html>
```

Hyperlinks

You are already familiar to hyperlinks, otherwise you would probably not be able to reach this page. A hyperlink is a reference to a resource on the web. This resource can be another webpage, a document like an image or movie, or another place on the same webpage. An anchor is a term used to define a hyperlink destination inside a document. For both the definition of hyperlinks and hyperlink destinations the anchor element <a> is used. The following example describes best how it works.

<a href="http:www.google.com" target="_blank">Link text</a>

The href attribute discribes the address of the resource (in this case another webpage). This address is called a URL.

URL's can be either absolute or relative. In the case of the example above. The URL is absolute, it describes the full path to the resource. This is very clear, but in some cases not very useful. First of all, for every link to a page on our website, we would have to type the whole address again. If I'm on the page http://toi.bk.tudelft.nl and I would link to the image http://toi.bk.tudelft.nl/image.jpg, the first part of the URL is the same. Instead I could use the relative path "image.jpg" to link to the image. A relative URL is the path to the resource relative from the current page. The URL of the current page will be added before the relative URL to form the correct absolute URL to the resource. This is also very useful when you move your website from your local computer to some other location like a webserver. Allthough the first part of all URL's is changed, by using relative URL's, the absolute URL's can still be constructed.

The target attribute is another very usefull attribute. It provides the possibility to open a resources in the same browser window or in another one.

Adding images

We have seen that it is possible to structure some content using common HTML tags in the example above. In the example only text content is added. To add images the <img> tag is used.

<img> is the tag that is used to add image. This is done together with some required attributes for the <img> tag. The following example describes best how it works.

<img src="images/imagename.jpg" alt="short image description" width="100px" height="50px" />

The first thing you will notice is the fact that the <img> tag doesn't need a closing tag. Every piece of information required to add the images is inside the opening tag, so no closing tag is needed. Therefore the closing of the element is done by adding a slash at the end of the tag, just before the greater than sign.

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.

The alt attribute is also required in the img tag and gives a short description of the image. This is very helpfull for blind people to understand a webpage.

Allthough the width and height attributes are not required, but they are very helpfull for the browser to know the dimensions of the image before the image is actually loaded. It makes the webpage appear to load quicker.

Tables

To insert spreadsheet-like content into a webpage, you can make use of tables. Tables are created with the <table> tag. Tables can be very simple or very complex. Many tags can be used inside the table element to construct a table. In this tutorial we will only provide a simple example. For a more extensive explanation and reference on tables see http://www.w3schools.com/html/html_tables.asp.

```
<table>
```
```
	<tr>
```
```
		<td>row 1, cell 1</td>
```
```
		<td>row 1, cell 2</td>
```
```
	</tr>
```
```
	<tr>
```
```
		<td>row 2, cell 1</td>
```
```
		<td>row 2, cell 2</td>
```
```
	</tr>
```
```
</table>
```

Lists

Like tables are useful to insert spreadsheet-like data into a webpage, lists can be useful to insert list type data into a webpage. There are three types of lists: unordered lists, ordered lists and definition lists. In this tutorial we will only provide a simple example. For a more extensive explanation and reference on lists see http://www.w3schools.com/html/html_lists.asp.

```
<ul>
```
```
	<li>First list item</li>
```
```
	<li>Second list item</li>
```
```
	<li>Third list item</li>
```
```
</ul>
```

Some simple formatting

Allthough the styling of a webpage is done seperately using CSS, some HTML tags are useful to provide some simple formatting tools. It is though recommended to keep formatting using HTML tags to a minimum. Useful HTML formatting tags are <strong>, <em> and <br/>.

<strong> is the tag to make text pop out by making it stronger than regular text. Most browser will format text between strong tags as bold text. Example: <strong>This text is formatted as strong</strong>.

<em> is the tag to emphasize text. Most browsers will format text between emphasis tags a italic text. Example: <em>This text is formatted as emphasized text</em>.

<br/> is the tag to force a line break inside a piece of content like text. As mentioned before, the blank space in the HTML document is ignored, so it doesn't matter how many hard returns you place inside the HTML document, they will not show as blank lines. The break tag allows you to insert line breaks instead. Example: a piece of text. <br/> another piece of text.

Comments

While writing the HTML code, especially when it is gradually becoming more complex, it is very usefull to add comments as a remider for yourself. For example to explain why you placed something at that paticular place or when you need to remind yourself to add additional code later. Obviously you don't want these comments to be visible when the page is viewed in the browser. If you enclose comments between the following tags  they won't be visible in the browser and won't affect the webpage in any way.

Identifying elements - The bridge to CSS

Aside from the specific attributes for each html tag, there are some standard attributes that can be added to almost any tag. The ones that are relevant for CSS are the id and the class attribute.

The id attribute can be added to a tag to define a unique identifier for that specific element. We can use the identifier to select this element with CSS.

Example: <div id="idname">content</div>

The class attribute can be added to a tag to define a global identifier for that element. We can use this identiefier with CSS to select any element that has this identifier.

Example: <div class="classname">content</div>

HTML useful resources

Extensive HTML tutorial with references and examples, W3 Schools - http://www.w3schools.com/html/default.asp

Full html-tag reference, W3 Schools - http://www.w3schools.com/tags/default.asp

CSS

CSS concept

Finally the concept of CSS will be demistified. CSS stands for Cascading Style Sheets. We have used the shorthand definition CSS for it in the until now and we will keep using it. CSS makes it possible to define the layout of a webpage in a seperate document from the HTML document. It seperates contents (HTML) from style (CSS), which is a good thing and it is possible to efficiently define the style of HTML elements. CSS is, like HTML, a language that can be written in a simple text editor. We will use Netbeans for our CSS too.

CSS works by selecting one or more HTML elements and then add one or more style rules to them. A typical line of CSS code looks like this:

selector {property:value; property:value;}

A CSS document will have many of these style rules. To save a CSS document, save it with the .css extension, for example "document.css".

Here is an example of a CSS document:

p {font-size:10px; color:#000000;}
 
#idname {
   background-color:#fff333;
   height:50px;
   width:200px;
}
 
.classname {
	color:#ffffff;
}

Attach the style sheet to the HTML document(s)

Now we have two seperate documents, one HTML document and one CSS document. To attach the style sheet to a HTML document we have to add one line of code to the HTML document inside the head element.

```
<head>
```

	<link rel="stylesheet" type="text/css" href="style.css">

```
</head>
```

Make sure you add the relative URL of your stylesheet as the value of the href attribute.

Now your stylesheet is attached to your HTML document. The advantage is that you can easily edit your stylesheet, even attach another stylesheet to it making the page appear totally different or attach the same stylesheet to many other HTML documents. See this example of a website where you can attach different stylesheets to the same HTML document and see the visual style change significantly. http://www.csszengarden.com/

Selectors

There are four ways to select HTML elements.

Select the element(s) by their tag name
Select the element(s) by their class name
Select the element by its id name
Select the element(s) by their pseudo-class

These can be used seperately or in combination with each other.

Pseudo-classes

Pseudo-classes do not actually exist in CSS, but can exist after certain events have happend. An example of a pseudo-class is a:hover, this exist when a link is hovered over with the mouse. These pseudo-classes can be very useful to create some basic dynamics in your page. Learn more about pseudo-classes on http://www.w3schools.com/css/css_pseudo_classes.asp

Some examples of different selectors

p {font-size:10px;}

This line of code selects all paragraph elements and sets the font-size to 10 pixels.

.textblock {border-width:1px}

This line of code selects all elements that have the class "textblock" assigned to it and sets their border-width to 1 pixel.

#menubar {background-color:blue}

This line of code selects the element with the ID of "idname" and sets the background-color to blue.

.mainColumn div p {color:#000000;}

This line of code selects all paragraph elements that are within a div that is insided an element that has the "mainColumn" class assigned to it and sets the text color for these elements to the hexadecimal code #000000, which corresponds to black.

h1, h2, h3, p {font-family:serif; color:black;}

This line of code selects all h1, h2, h3 and all paragraph tags and sets the font-family to serif and the text color to black.

a:visited {color:red;}

This line of code selects all hyperlinks that are visited and sets the text color to red.

Properties

There are many CSS properties that you can use to style your HTML elements. It is beyond the scope of this tutorial to describe them all in detail. Have a look at this page for a full reference of all CSS properties available: http://www.w3schools.com/css/css_reference_atoz.asp

Boxmodel

When styling HTML elements it is important to understand how they behave. The boxmodel explains how an elements behaves. The concept of the boxmodel is describe on this page: http://www.w3schools.com/css/css_boxmodel.asp

CSS Useful resources

Extensive CSS tutorial with references and examples, W3 Schools - http://www.w3schools.com/css/default.asp

Full reference of CSS properties, W3 Schools - http://www.w3schools.com/css/css_reference_atoz.asp

HTML code basics

Contents