html - coding your first website handout

8/14/2019 HTML - Coding your First Website Handout

1/30

Html Coding your first website!

Section 1: Let's get started

In this first Section, you will get a brief presentation of the tools you need to make a

website.

What is needed?

Most likely you already have everything you need.

You have a "browser". A browser is the program that makes it possible to browse andopen websites. Right now you are looking at this page in your browser.

It is not important which browser you use. The most common is Microsoft Internet

Explorer. But there are others such as Opera and Mozilla Firefox and they can all be used.

You might have heard about, or even used, programs such as Microsoft FrontPage,Macromedia Dreamweaver or even Microsoft Word, which can - or claim that they can -

create websites for you. Forget these programs for now! They are not of any help to you

when learning how to code your own website.

Instead, you need a simple text editor. If you are using Windows you can use Notepad,which is usually found in the start menu under Programs in Accessories:

Notepad is a very basic text editing program which is excellent for coding because it doesnot interfere with what you are typing. It gives you complete control. The problem with

many of the programs that claim they can create websites is that they have a lot of

standard functions, which you can choose from. The downside is that, everything needs

to fit into these standard functions. Thus, this type of programs often cannot create awebsite exactly as you want it. Or - even more annoyingly - they make changes to your


2/30

hand-written code. With Notepad or other simple text editors, you only have yourself to

thank for your successes and errors.

A browser and Notepad (or a similar simple text editor) are all you need to go through

this tutorial and make your own websites.

Do I need to be online?

You do not need to be connected to the Internet while making your websites.

You make the website on your computer's hard disk and upload it to the Internet when it

is finished.

Section 2: What is HTML?

This section will give you a brief presentation of your new friend, HTML.

What is HTML?

To make a long story short, HTML was invented in 1990 by a scientist called TimBerners-Lee. The purpose was to make it easier for scientists at different universities to

gain access to each other's research documents. The project became a bigger success than

Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for theweb as we know it today.

HTML is a language, which makes it possible to present information (e.g. scientific

research) on the Internet. What you see when you view a page on the Internet is your

browser's interpretation of HTML. To see the HTML code of a page on the Internet,simply click "View" in the top menu of your browser and choose "Source".

For the untrained eye, HTML code looks complicated but this handout will help youmake sense of it all.

What can I use HTML for?


3/30

If you want to make websites, there is no way around HTML. Even if you're using a

program to create websites, such as Dreamweaver, a basic knowledge of HTML can

make life a lot simpler and your website a lot better. The good news is that HTML is easyto learn and use. In just two Sections from now you will have learned how to make your

first website.

HTML is used to make websites. It is as simple as that!

Okay, but what does H-T-M-L stand for?

HTML is an abbreviation of "HyperText Mark-up Language" - which is already more

than you need to know at this stage. However, for the sake of good order, let us explain in

greater detail.

Hyper is the opposite of linear. In the good old days - when a mouse was

something the cat chased - computer programs ran linearly: when the program had

executed one action it went to the next line and after that, the next line and so on.

But HTML is different - you can go wherever you want and whenever you want.

For example, it is not necessary to visit MSN.com before you visit HTML.net. Text is self-explanatory.

Mark-up is what you do with the text. You are marking up the text the same way

you do in a text editing program with headings, bullets and bold text and so on.

Language is what HTML is. It uses many English words.

We will also be learning so-called XHTML (Extensible HyperText Mark-up Language)

which, in short, is a new and more well-structured way of writing HTML.

Now you know what HTML (and XHTML) stands for let's get started with what it is all

about: making websites.

Section 3: Elements and tags

You are now ready to learn the essence of HTML: elements.

Elements give structure to a HTML document and tells the browser how you want your

website to be presented. Generally elements consists of a start tag, some content, and anend tag.

"Tags"?Tags are labels you use to mark up the begining and end of an element.

All tags have the same format: they begin with a less-than sign "".


4/30

Generally speaking, there are two kinds of tags - opening tags: and closing tags:

. The only difference between an opening tag and a closing tag is the forward

slash "/". You label content by putting it between an opening tag and a closing tag.

HTML is all about elements. To learn HTML is to learn and use different tags.

Can you show me some examples?

Okay, the element em emphasis text. All text between the opening tag and the

closing tag is emphasised in the browser. ("em" is short for "emphasis".)

Example 1:

Emphasised text.

Will look like this in the browser:

Emphasised text.

The elements h1, h2, h3, h4, h5 and h6 is used to make headings (h stands for "heading"),

where h1 is the first level and normally the largest text, h2 is the second level and

normally slightly smaller text, and h6 is the sixth and last in the hierarchy of headings

and normally the smallest text.

Example 2:

This is a heading

This is a subheading


This is a heading

This is a subheading

So, I always need an opening tag and a closing tag?

As they say, there's an exception to every rule and in HTML the exception is that thereare a few elements which both open and close in the same tag. These so-called empty

elements are not connected to a specific passage in the text but rather are isolated labels,

for example, a line break which looks like this:
.

Should tags be typed in uppercase or lowercase?


5/30

Most browsers might not care if you type your tags in upper, lower or mixed cases.

, or will normally give the same result. However, the correct

way is to type tags in lowercase. So get into the habit of writing your tags in lowercase.

Where do I put all these tags?

You type your tags in an HTML document. A website contains one or more HTML

documents. When you surf the Web, you merely open different HTML documents.

Section 4: Create your first website

With what you learned in the previous Sections, you are now only minutes away from

making your first website.

How?In Section 1 we looked at what is needed to make a website: a browser and Notepad (or

similar text editor). Since you are reading this, you most likely already have your browser

open. The only thing you need to do is to open an extra browser window (open the

browser one more time) so you can read this tutorial and see your new website at thesame time.

Also, open Notepad (in Accessories under Programs in the Start menu):

Now we are ready!

What can I do?

Let us start with something simple. How about a page that says: "Hurrah! This is my firstwebsite." Read on and you'll find out how simple it is.

HTML is simple and logical. The browser reads HTML like you read English: fromthe top down and from left to right . Thus, an simple HTML document begins with

what should come first and ends with what should come last.

The first thing you need to do is to tell the browser that you will "talk" to it in the

language HTML. This is done with the tag (no surprises there). So before you doanything else type "" in the first line of your document in Notepad.

As you may recall from the previous Sections, is an opening tag and must be

closed with a closing tag when you are finished typing HTML. So to make sure you don't

forget the HTML close tag now type "" a couple of lines down and write the rest

of the document between and .


6/30

The next thing your document needs is a "head", which provides information about your

document, and a "body", which is the content of the document. Since HTML is nothing if

not logical, the head ( and ) is on top of the body ( and ).

Your document should now look like this:

Note how we structured the tags with new lines (using the Enter key) as well as indents

(using the Tab key). In principle, it does not matter how you structure your HTML

document. But to help you, and others reading your coding, to keep an overview, it isstrongly recommended that you structure your HTML in a neat way with line

breaks and indents, like the above example.

If your document looks like the above example, you have made your first website - aparticularly boring website and probably not what you dreamt of when you started this

tutorial but still some sort of a website. What you have made will be the basic template

for all your future HTML documents.

So far so good, but how do I add content to my website?

As you learnt earlier, your HTML document has two parts: a head and a body. In thehead section you write information about the page, while the body contains the

information that constitutes the page.

For example, if you want to give the page a title which will appear in the top bar of the

browser, it should be done in the "head" section. The element used for a title is title. I.e.

write the title of the page between the opening tag and the closing tag

:

My first website

Note that this title will not appear on the page itself. Anything you want to appear on thepage is content and must therefore be added between the "body" tags.

As promised, we want the page to say "Hurrah! This is my first website." This is the text

that we want to communicate and it therefore belongs in the body section. So in the body

section, type the following:

Hurrah! This is my first website.


7/30

The p in

is short for "paragraph" which is exactly what it is - a text paragraph.

Your HTML document should now look like this:

My first website

Hurrah! This is my website.

Done! You have now made your first real website!

Next all you have to do is to save it to your hard drive and then open it in your browser:

In Notepad choose "Save as..." under "File" in the top menu. Choose "All Files" in the "Save as type" box. This is very important - otherwise,

you save it as a text document and not as an HTML document.

Now save your document as "page1.htm" (the ending ".htm" indicates that it is an

HTML document. ".html" gives the same result. Save your file in yourWeb1folder - remember where you saved it so you can find it again.

Now go to the browser:

In the top menu choose "Open" under "File".

Click "Browse" in the box that appears.

Now find your HTML document and click "Open".

It now should say "Hurrah! This is my first website." in your browser.

Congratulations!

Section 5: What have you learned so far?

Always start with the basic template we made in the previous Section:


8/30

In the head section, always write a title: The title of your page. Notice

how the title will be shown in the upper left corner of your browser:

The title is especially important because it is used by search engines (such as Google) toindex your website and is shown in the search results.

In the body section, you write the actual content of the page. You already know some of

the most important elements:

Is used for paragraphs.

Emphasis text.

Heading

Subhead

Sub-subhead

Remember, the only way to learn HTML is by trial and error. But don't worry, there is noway you can destroy your computer or the Internet. So keep experimenting - that is the

best way to gain experience.

What is that supposed to mean?

Nobody becomes a good website creator by learning the examples in this tutorial. Whatyou get in this tutorial is simply a basic understanding of the building blocks - to become

good you must use the building blocks in new and creative ways.

So, get out in the deep water and stand on your own two feet... Okay, maybe not. But give

it a go and experiment with what you have learned.

So what's next?

Try to create a few pages yourself. For instance, make a page with a title, a heading, some

text, a subhead and some more text. It is perfectly okay to look in the tutorial while you

make your first pages. But later, see if you can do it on your own - without looking.


9/30

Section 6: A few more elements

Did you manage to make a few pages on your own? If not, here is an example:

My website

A Heading

text, text text, text

Subhead

text, text text, text

Now what?

Now it is time to learn seven new elements.

In the same way you emphasise the text by putting it between the openning tag and

the closing tag , you can give stronger emphasis by using the openning tag

and the closing tag .

Example 1:

Stronger emphasis.


Stronger emphasis.

Likewise, you can make your text smaller using small:

Example 2:

This should be in small.


This should be in small.


10/30

Can I use several elements at the same time?

You can easily use several elements at the same time as long as you avoid overlapping

elements. This is best illustrated by an example:

Example 3:

If you want to emphasise small text, it must be done like this:

Emphasised small text

And NOT like this:

Emphasise small text

The difference is that in the first example, we closed the tag we first opened last. Thisway we avoid confusing both ourselves and the browser.

More elements!

As mentioned in Section 3 there are elements which are opened and closed in the

same tag. These so-called empty elements are not connected to a specific passage in the

text but rather are isolated labels. An example of such a tag is
which creates a

forced line break:

Example 4:

Some text
and some more text in a new line


Some textand some more text in a new line

Notice that the tag is written as a contraction of an opening and closing tag with an empty

space and a forward slash at the end:
.

Another element that is opened and closed in the same tag is which is used to

draw a horizontal line ("hr" stands for "horizontal rule"):

Example 5:


11/30


Examples of elements that needs both an opening tag and a closing tag - as most elements

do - is ul, ol and li. These elements are used when you want to make lists.

ul is short for "unordered list" and inserts bullets for each list item. ol is short for

"ordered list" and numbers each list item. To make items in the list use the li tag ("listitem"). Confused? See the examples:

Example 7:

A list item

Another list item

will look like this in the browser:

A list item

Another list item

Example 8:

First list item

Second list item


1. First list item

2. Second list item

Phew! Is that all?

That is all for now. Again, experiment and make your own pages using some of the seven

new elements you learned in this Section:

Stronger emphasis

Small text

Line shift

Horizontal line

List

Ordered list

List item


12/30

Section 7: Attributes

You can add attributes to a number of elements.

What is an attribute?

As you probably remember, elements give structure to a HTML document and tells the

browser how you want your website to be presented (for example,
informs the

browser to make a line break). In some elements you can add more information. Suchadditional information is called an attribute.

Example 1:

My friendship with HTML

Attributes are always written within a start tag and are followed by an equals sign and the

attribute details written between inverted commas. The semicolon after the attribute is for

separating different style commands. We will get back to that later.

What is the catch?

There are many different attributes. The first one you will learn is style. With the style

attribute you can add layout to your website. For instance a background colour:

Example 2:

will show a completely red page in the browser - go ahead and see for yourself. We willexplain in greater detail how the colour system works in a few moments.

Note that some tags and attributes use US spelling i.e. color instead of colour. It is

important that you are careful to use the same spelling as we use in the examples in this

tutorial - otherwise, browsers will not be able to understand your codes. Also, don't forgetto always close the inverted commas after an attribute.


13/30

How did the page become red?

In the above example, we asked for the background colour with the code "#ff0000". This

is the colour code for red using so called hexadecimal numbers (HEX). Each colour has

its own hexadecimal number. Here are some examples:

White: #ffffff

Black: #000000 (zeros)Red: #ff0000Blue: #0000ff

Green: #00ff00

Yellow: #ffff00

A hexadecimal color code consists of # and six digits or letters. There are more than 1000HEX codes and it is not easy to figure out which HEX code is tied to a specific color.

(Google-ing hexadecimal will give you plenty of results)

You can also use the English name for the most common colours (white, black, red, blue,

green and yellow).

Example 3:

Enough about colors. Let's get back to the attributes.

Which elements can use attributes?

Different attributes can be applied to most elements.

You will often use attributes in tags such as the body tag while you will rarely use

attributes in, for example, a br tag since a line break normally is a line break without any

parameters to adjust.

Just as there are many different elements, so there are many different attributes. Some

attributes are tailor made for one particular element while others can be used for many

different element. And vice versa: some elements can only contain one kind of attribute

while others can contain many.

It may sound a bit confusing but once you get acquainted with the different attributes it is

actually very logical and you will soon see how easy they are to use and how many

possibilities they provide.

This tutorial will introduce you to the most important attributes.

Exactly what parts does an element consist of?


14/30

Generally an elements consist of a start tag with or without one or more attributes, some

content and an end tag. Simple as that. See the illustration below.

Section 8: Links

In this Section, you will learn how to make links between pages.

What do I need to make a link?To make links, you use what you always use when coding HTML: an element. A simpleelement with one attribute and you will be able to link to anything and everything.

Here is an example of what a link to Google.com could look like:

Example 1:

Here is a link to Google.com

Would look like this in the browser:

Here is a link to Google.com

The element a stands for "anchor". And the attribute href is short for "hypertext

reference", which specifies where the link leads to - typically an address on the internetor a file name.

In the above example the attribute href has the value "http://www.google.com", which is

the full address of Google.com and is called a URL (Uniform Resource Locator). Note

that "http://" must always be included in URLs. The sentence "Here is a link toGoogle.com" is the text that is shown in the browser as the link. Remember to close the

element with an .

What about links between my own pages?

If you want to make a link between pages on the same website, you do not need to spellout the entire address (URL) for the document. For example, if you have made two pages

(let us call them page1.htm and page2.htm) and saved them in the same folder you can
http://www.google.com/http://www.google.com/


15/30

make a link from one page to the other by only typing the name of the file in the link.

Under such circumstances a link from page1.htm to page2.htm could look like this:

Example 2:

Click here to go to page 2

If page 2 were placed in a subfolder (named "subfolder"), the link could look like this:

Example 3:

Click here to go to page 2

The other way around, a link from page 2 (in the subfolder) to page 1 would look like

this:

Example 4:

A link to page 1

"../" points to the folder one level up from position of the file from which the link is

made. Following the same system, you can also point two (or more) folders up by writing"../../".

Did you understand the system? Alternatively, you can always type the complete address

for the file (URL).

What about internal links within a page?

You can also create internal links within a page - for example a table of contents at the

top with links to each chapter below. All you need to use is a very useful attribute calledid (identification) and the symbol "#".

Use the id attribute to mark the element to which you want to link. For example:

heading 1

You can now create a link to that element by using "#" in the link attribute. The "#" must

be followed by the id of the tag you want to link to. For example:

Link to heading 1


16/30

All will become clear with an example:

Example 5:

Link to heading 1

Link to heading 2

heading 1

Text text text text

heading 2

Text text text text

will look like this in the browser (click on the two links):

Link to heading 1

Link to heading 2

Heading 1Text text text text

Heading 2

Text text text text

(Note: An id attribut must start with a letter)

Can I link to anything else?

You can also make a link to an e-mail address. It is done in almost the same way as when

you link to a document:
http://html.net/tutorials/html/lesson8.asp#heading1http://html.net/tutorials/html/lesson8.asp#heading2http://html.net/tutorials/html/lesson8.asp#heading1http://html.net/tutorials/html/lesson8.asp#heading2


17/30

Example 6:

Send an e-mail to JMelito at

CitrusHigh.com


Send an e-mail to JMelito at CitrusHigh.com

The only difference between a link to an e-mail and a link to a file is that instead of

typing the address of a document, you type mailto: followed by an e-mail address.

When the link is clicked, the default e-mail program opens with a new blank message

addressed to the specified e-mail address. Please note that this function will only work if

there is an e-mail program installed on your computer. Give it a try!

Are there any other attributes I should know of?

To create a link, you always have to use the href attribute. In addition, you can also put a

title on your link:

Example 7:

Google.com

Would look like this in the browser:

Google.com

The title attribute is used to type a short description of the link. If you - without clicking -

place the cursor over the link, you will see the text " Visit Google.com and search

for cool stuff " appears.

Section 9: Images

Wouldn't it be great if you could have an image of Jedi Master Yoda right in the centre of

your page?

That sounds like a bit of a challenge...

Maybe, but in fact it is pretty easy to do. All you need is an element:
mailto:[email protected]://www.html.net/mailto:[email protected]://www.html.net/


18/30

Example 1:


19/30

To make your own images, you need an image editing program. An image editingprogram is one of the most essential tools you need to create beautiful websites.

Unfortunately, no good image editing programs comes with Windows or other operating

systems. Thus, you might consider investing in either Paint Shop Pro, PhotoShop orMacromedia Fireworks, which are three of the best image editing programs currently on

the market.

It will not be necessary to buy expensive programs to begin creating webpages. For now,you can download the excellent image editing program IrfranView

(http://www.irfanview.com) or GIMP (http://www.gimp.org/downloads) which is so-

called freeware and therefore costs nothing.

Or you can just borrow images from other sites by downloading them. But please becareful not to violate copyrights when downloading pictures. Still, it's useful to know

how to download pictures, so here's how you do it:

1. Right-click on an image on any image on the Internet.

2. Choose "Save picture as..." in the menu that appears.3. Choose a location for the image on your computer and press "Save".

Is that all I need to know about images?

There are a few more things you should know about images.

First, you can easily insert pictures located in other folders, or even pictures that are

located on other websites:

Example 2:

Example 3:

Second, images can be links:

Example 4:

will look like this in the browser (try clicking on the image):
http://irfranview/http://www.irfanview.com/http://www.gimp.org/downloadshttp://irfranview/http://www.irfanview.com/http://www.gimp.org/downloads


20/30

Are there any other attributes I should know about?

You always need to use the attribute src, which tells the browser where the image is

located. Besides that, there are a number of other attributes which can be useful when

inserting images.

The alt attribute is used to give an alternate description of an image if, for some reason,

the image is not shown for the user. This is especially important for users with impaired

vision, or if the page is loaded very slowly. Therefore, always use the alt attribute:

Example 5:

Some browsers let the text of the alt attribute appear as a small pop-up box when the user

places their cursor over the picture. Please note that when using the alt attribute, the aim

is to provide an alternative description of the picture. The alt attribute should not be

used to create special pop-up messages for the user since then visually impaired users

will hear the message without knowing what the picture is.

The title attribute can be used to add information to the image:

Example 6:


If you, without clicking, place the cursor over the image, you will see the text "Searchwith Google" appear as a pop-up box.

Two other important attributes are width and height:


21/30

Example 7:


The width and height attributes can be used to set the height and width of an image. The

value that is used to set the width and height is pixels. Pixels are the units of

measurement used to measure the resolution of screens. (The most common screen

resolution is 1024x768 pixels). Unlike centimetres, pixels are relative units of

measurement which depend on the resolution of the screen. To a user with a high screenresolution, 25 pixels may correspond to 1 centimetre, while the same 25 pixel in a low

screen resolution may correspond to 1.5 centimetres on the screen.

If you do not set the width and height, the image will be inserted in its actual size. But

with width and height you can manipulate the size:

Example 8:


However, it is worth keeping in mind that the actual size in kilobytes of the image file

will remain the same so it will take the same time to load the image as it did before, eventhough it appears smaller on the screen. Therefore, you should never decrease theimage size by using the width and height attributes. Instead, you should always resize

your images in an image editing program to make your pages lighter and faster.

That said, it is still a good idea to use the width and height attributes because the browser

will then be able to detect how much space the image will need in the final page layout

before the image is fully downloaded. This allows your browser to set up the page nicelyin a quicker way.

Section 10: Tables

Tables are used when you need to show "tabular data" i.e. information that is

logically presented in rows and columns.


22/30

Is it difficult?

Building tables in HTML may at first seem complicated but if you keep cool and watch

your step, it is actually strictly logical - just like everything else in HTML.

Example 1:

Cell 1

Cell 2

Cell 3

Cell 4


Cell 1 Cell 2

Cell 3 Cell 4

What's the difference betweenand?

As you will see from the above example, this is probably the most complicated HTMLexample we have given you so far. Let's break it down and explain the different tags:

3 different elements are used to insert tables:

The opening tag and the closing tag starts and ends the table.

Logical.

stands for "table row" and starts and ends horizontal rows. Still logical.

is short for "table data". This tag starts and ends each cell in the rows of

your table. All simple and logical.

Here is what happens in Example 1: the table starts with a , followed by a ,

which indicates the beginning of a new row. Two cells are inserted in this row: Cell

1 and Cell 2. The row is hereafter closed with a and a new row

begins immediately after. The new row also contains two cells. The table is closedwith .

Just to make it clear: rows are horizontal lines of cells and columns are vertical lines

of cells:

Cell 1 Cell 2

Cell 3 Cell 4


23/30

Cell 1 and Cell 2 form a row. Cell 1 and Cell 3 form a column.

In the above example, the table has two rows and two columns. However, a table can

have an unlimited number of rows and columns.

Example 2:

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

Cell 6

Cell 7

Cell 8

Cell 9

Cell 10

Cell 11

Cell 12


Cell 1 Cell 2 Cell 3 Cell 4

Cell 5 Cell 6 Cell 7 Cell 8Cell 9 Cell 10 Cell 11 Cell 12

Are there any attributes?

Of course there are attributes. For example, the border attribute is used to specify the

thickness of the border around your table:

Example 3:

Cell 1

Cell 2

Cell 3

Cell 4


24/30


Cell 1 Cell 2

Cell 3 Cell 4

The thickness of the border is specified in pixels (See Section 9)

As with images, you can also set the width of a table in pixels - or alternatively in

percentage of the screen:

Example 4:

This example will be displayed in the browser as a table with the width of 30% of the

screen. Try it yourself.

More attributes?

There are lots of attributes for tables. Here are two more:

align: specifies the horizontal alignment of the content in the entire table, in a row

or in a single cell. For example, left, center or right.

valign: specifies the vertical alignment of the content in a cell. For example, top,

middle or bottom.

Example 5:

Cell 1

What can I insert in my tables?

Theoretically, you can insert anything in tables: text, links and images... BUT tables are

meant for presenting tabular data (i.e. data which can be meaningfully presented in

columns and rows) so refrain from putting things into tables simply because you want

them to be placed next to each other.

In the old days on the Internet - i.e. a few years ago - tables were often used as a layouttool. But if you want to control the presentation of texts and images there is a much

cooler way to do it (hint: CSS). But more about that later.

Now, put what you just learned to practice and design a number of tables in differentsizes, with different attributes and content. This should keep you busy for hours.
http://html.net/tutorials/html/lesson9.asphttp://html.net/tutorials/html/lesson9.asp


25/30

Section 11: More about tables

The title "More about tables" may sound a bit boring. But look at the positive side, when

you master tables, there is absolutely nothing about HTML that will knock you out.

What is left then?

The two attributes colspan and rowspan are used when you want to create fancy tables.

Colspan is short for "column span". Colspan is used in thetag to specify how

many columns the cell should span:

Example 1:

Cell 1

Cell 2

Cell 3

Cell 4


Cell 1

Cell 2 Cell 3 Cell 4

By setting colspan to "3", the cell in the first row spans three columns. If we instead had

set colspan to "2", the cell would only have spanned two columns and it would have

been necessary to insert an additional cell in the first row so that the number of columns

will fit in the two rows.

Example 2:


26/30

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5


Cell 1 Cell 2

Cell 3 Cell 4 Cell 5

What about rowspan?As you might already have guessed, rowspan specifies how many rows a cell should

span over:

Example 3:

Cell 1

Cell 2

Cell 3

Cell 4


Cell 1

Cell 2

Cell 3

Cell 4

In the example above rowspan is set to "3" in Cell 1. This specifies that the cell must

span over 3 rows (its own row plus an additional two). Cell 1 and Cell 2 are thereby in

the same row, while Cell 3 and Cell 4 form two independent rows.


27/30

Confused? Well, it is not uncomplicated and it is easy to lose track. Therefore, it might be

a good idea to draw the table on a piece of paper before you begin with the HTML.

Not confused? Then go ahead and create a couple of tables with both colspan and

rowspan on your own.

Section 12: Layout (CSS)

Wouldn't be great if you could give your pages the layout they deserve?

Sure, but how?

To give your website layout use Cascading Style Sheets (CSS). In this Section you will

get a short introduction to CSS. CSS is taught in Web Design 2 so consider this Section

only as an appetizer.

CSS is the better half of HTML. And in coding, there is no equality of status: HTML

takes care of the rough stuff (the structure), while CSS gives it a nice touch (layout).

As shown in Section 7, CSS can be added with the style attribute. For example, you

can set the font type and size on a paragraph:

Example 1:

This is typed in size 20px

This is typed in Courier

This is typed inCourier size 20px


This is typed in size 20px

This is typed in Courier

This is typed in Courier size 20px

In the example above we use the style attribute to specify the type of font to be used

(with the command font-family) and the font size (with the command font-size).

Notice how in the last paragraph we set both the font type and size with a separating

semicolon.

It seems like a lot of work?


28/30

One of the smart features of CSS is the possibility to manage your layout centrally.

Instead of using the style attribute in each tag, you can tell the browser once how it must

layout all the text on the page:

Example 2:

My first CSS page

h1 {font-size: 30px; font-family: arial;}h2 {font-size: 15px; font-family: courier;}p {font-size: 8px; font-family: "times new roman";}

My first CSS pageWelcome to my first CSS page

Here you can see how CSS works

In the example above CSS has been inserted in the head section and therefore appliesto the entire page. To do this, just use the tag which tells

the browser that you are typing CSS.

In the example all headings on the page will be in Arial in size 30px. All subheads will in

Courier size 15. And all text in normal paragraphs will be in Times New Roman size 8.

Another option is to type the CSS in a separate document. With a separate CSSdocument you can manage the layout of many pages all at once. Pretty smart if youwant to change the font type or size on a large website with hundreds or thousands of

pages. We won't go into that now but you can learn it later in our CSS tutorial.

What else can I do with CSS?

CSS can be used for much more than specifying font types and sizes. For example, youcan add colours and backgrounds. Here are some examples for you to experiment with:

Green text

Heading on blue background


29/30

Is CSS nothing but colours and font types?

Besides adding layout such as colors, font types etc., CSS can also be used to control

the page setup and presentation (margins, float, alignment, width, height etc.). Byregulating the different elements with CSS you are able to layout your pages elegantly

and precisely.

Example 3:

I love CSS


I love CSS

With the property float an element can either be floated to the right or to the left. The

following example illustrates the principle:

Example 4:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

sed diam nonummy nibh euismod tincidunt ut laoreet dolore

magna aliquam erat volutpat. Ut wisi enim ad minim veniam,

quis nostrud exerci tation ullamcorper suscipit

lobortis nisl ut aliquip ex ea commodo consequat...


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratvolutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation

ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

In the example, one element (the image) floats to the left and the other element (the text)

fills the hole.

With the property position, you can place an element exactly where you want it in your

page:


30/30

Example 5:

In the example the image is placed 50 pixels from the bottom and 10 pixels from the rightin the browser. But you can place it exactly where you want it. Give it a try. Pretty easy

and pretty cool, eh?

Cool, sure. But easy?

You do not learn CSS in 10 minutes. And as mentioned above, this Section is onlymeant as a brief introduction.

For now, concentrate on HTML, and move on to the next Section where you will learn

how to get your website out on the Internet so the whole world can see it!

html - coding your first website handout

Documents