HTML & CSS

An Introduction to Creating and Stylizing Webpages

This tutorial is not going to bore you with all that background stuff about how HTML came about or whatever - you know, the things you really don’t care about. This is going to go straight to the point so you can start building your own website. This tutorial is also not going to go into advanced details about CSS and HTML - it will just give you a basis to start with. You are encouraged to learn this material and then view the source code of some websites and see if you can interpret what is going on. You can also copy all the source code and make a new document for yourself, change some stuff and see how it affects the appearance.

First note that HTML and CSS are really not considered programming. This is because they don't use any algorithms. They are basically just a series of definitions. HTML is made up of tags, of which there are several types, and each has their own set of properties you can define. The quick basics are that every HTML document must begin with <html> and end with </html>. Each HTML page also includes (a) a <head> section, which is where all the behind-the-scenes stuff goes, and (b) a <body> section, which is where what you see on the page goes.

Open up a text-editor (like Notepad in Windows or text-edit in Mac, for example) so you can start creating your sample webpage as we go.

Type the following:

...and save this page as "index.html"

Now you can open the file with a browser and view the webpage (though we haven't put anything on it yet!)

Part 1: CSS Stylesheets [back to top]

CSS stands for Cascading Style Sheets. These are basically just a series of definitions used to define how aspects of a webpage look. For example, when you go to type a paper, you might make the font size 14 pt, the font color black and the font face Times New Roman. You might also change things such as the leading (line-height) or letter-spacing. These are all examples of style.

Your stylesheet is simply comprised of (a) the name of the style and (b) – between curly brackets {} – a series of definitions that go in the form:

{ property: value; }

In case you haven't realized yet what the purpose of stylesheets are, they are so that you can have different types of texts on a page instead of everything being one color, one size, one font. (Stylesheets can do a lot more besides font styles, but we’ll get into that later).

For now, let's define some simple styles. Within the <head> section of your HTML page, we must begin the style tag. To do this, simply write:

...and then a few lines below, close the tag with:

</style>

**Important Note: This must all be within the <head> section.

Ok. There are two main types of styles: classes and IDs. To name a class, type '.' and then the name you want to call your style. To name an ID, type '#' and then the name you want to call your style.

For example:

.header { }

...creates a new style class called "header".

Now let's fill in some definitions. You want to specify what font-family, font-size and color of your text will be. Following with the format above, you simply write:

.header {
   font-family: Arial, sans-serif;
   font-size: 14px;
   color: #000000;
}

This would make font that looks like this!

Change the font-size to 23px and it will look like this!

**The color is represented in hexadecimal, which is broken down into RGB components. Since there are 6 digits, the first two are the red component, the next two are the green component and the last two are the blue component. You can easily find color charts online that give you the hex code of different colors.

Suppose we want to create another style called footer, which has a smaller text size and is also gray in color. What do we write?

.footer {
   font-family: Arial, sans-serif;
   font-size: 9px;
   color: #999999;
}

You get the idea. There’s a whole range of definitions you can specify, but the basics for now are just the font-family, size and color. You can also do things such as specify the border style, padding, margin, and more!

NOW then - you can put all your styles in the <style> tag in your head OR you can make a separate stylesheet (save it with the extension .css) and you can link to it from your HTML page by putting this in your <head> tag:

...obviously replacing "yourstylename.css" with the actual name of your stylesheet.

You can also specify the background in a style - you can specify the background color and/or if you want an image in the background and you want it to repeat or not:

background: url(bluestripe.gif) repeat-x;

...will give this style's background the image "bluestripe.gif" and will repeat it horizontally, for example.

For more information and help, visit the CSS Cheat-Sheet.

Part 2: Tables [back to top]

Now let's get to the HTML part. Remember, this part goes within the <body> section. Everything in HTML is written in these open-close brackets, with their special properties written within the tag. The first step to laying out your HTML page is through the use of tables. These help divide up the page into sections, which you can then fill with pictures and text.

Note: Any numerical value doesn't have to be specified as pixels like in the stylesheets. For any value in HTML, the pixel unit is assumed.

The <table> tag has these fundamental properties:
- border (does it have a border? How big is the border?)
- cellspacing (how far apart are each of the cells in the table?)
- cellpadding (how far inside the cell from the border are the items?)
- width
- height
- align (center? Left? Right?)
You specify these attributes within the <table> tag. For example:

...would create something that looks like this:

cell 1	cell 2
cell 3	cell 4

So if we add more style to this table, we might add to the <table> tag:

...and that would make the table look like this:

cell 1	cell 2
cell 3	cell 4

...and adding:

...would center the table and make it look like this:

cell 1	cell 2
cell 3	cell 4

Now then, the best way to figure out what these properties do is to create your own test HTML file and play around by changing the values, saving the page and viewing it in a browser window. Make sure that when you're testing, you set the border to something greater than 0, otherwise you won’t see any structure!

Within the tables are table rows <tr> and table data <td>. The table rows should be obvious, but table data is really the columns in each row. It's best not to define anything within the <tr> tag and rather define it all in the <td> tag. This tag has properties such as:
- bgcolor (background color)
- width
- height
- align (for the objects within the cell, how are they aligned?)
- style

Not only can you align the entire table to either side or to the middle, you can also align the text, or images, or whatever, inside a cell to either side, middle, or to the top or bottom. For instance:

center

right

You simply put the align attribute in the <td> tag (or in the <tr> if you want to affect the whole row). Like <td align="right">.

valign means Vertical Align. In the first cell below the valign is set to bottom and in the second valign="top".

bottom

top

middle

left is the default for align and middle is for valign.

Now let's just quickly talk about how to include our styles from our stylesheet. This is where you link your stylesheet styles in with your HTML. For example,

...says that any text that goes into this cell will be formatted according to what we previously defined in our header class in the style tag. So, go ahead and type any text you want within the <td> tag, save the page and view in a browser and the text should be formatted according to the style you defined.

Part 3: Links and Images [back to top]

FIRST, just randomly, the <br/> tag is used to end one line and begin another (the br comes from break). So having:

The cat and<br/>
the mouse

...would print:

The cat and
the mouse

Links are made using the <a> tag. Here's a sample:

<a href="http://www.google.com">Google Link</a>

...which will create a link to the Google website. Try typing that in your <td> tag, save and view in a browser.

The a stands for anchor, which means link. The href means hypertext reference. A note on style: if you want to stylize your links, you can either specify a style in your stylesheet for all links (by writing a { } and specifying all the definitions you want OR you can put the style in a class and write .header a { } and then any link that is stylized from the class "header" will have the style.

Images have a <img> tag and are formed in a similar manner to links:

...and that will display my squares.gif pic:

We can also specially style images with the <style> attribute (if you recall):

...and that makes the image appear as such:

Just like the <a> tag, you can specify a style for all images, or just for those in a class. You can also make an image a link to something by putting the img code in place of the text in a link tag. For example:

...would display some image called google.gif and when you clicked it, you would be linked to the Google website.

IMPORTANT NOTE: if you are linking to a webpage that's out of your site -- meaning it's not one of your own pages -- then you have to include the http:// before the web address. If you don't, it will search for the specified webpage name within the same folder that you have your current page!

Part 4: Forms [back to top]

Forms are the only way to get information from the user. For example if you wanted to have the user's email address, or if you wanted to sign into a website. Let's start with a basic form:

...would create a form called "myForm" and which has a single input field of type "text" (because it will be for your email address) and the input's name is "email." Then we have a submit button (type="submit") and the attribute value="" is for making the button say whatever you want. In this case, we have it display "submit." Here is the form below:

Now you can enter your email address and press submit and the form will direct you to "newPage.html" which might have the code that tells you what to do with this information now. SEE THE PHP PAGE FOR HOW TO HANDLE FORMS

We can style our forms too, either by adding the style="" within the <input> tag or by creating a special class and writing <input type="text" class="inputtext">. For now, let's just define the style within the <input> tag.

See how we've styled it now? If you type in the box, the font is smaller too. You can play around with all sorts of styles.

There are other input types as well: checkbox and radio (radio button):

(radio button)

(checkbox)

Note: if you want a series of radio buttons or checkboxes and only allow ONE of them to be selected, then you have to name each checkbox/radio button THE SAME NAME.

There's also a form tag <select> which is used for drop-down menus. Take a look here:

<select name="mySelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

If you write SELECTED then that particular option will be the current one showing. Otherwise the default is the first option.

<select name="mySelect">
<option value="1">Option 1</option>
<option value="2" SELECTED>Option 2</option>
</select>

One more thing: textareas. If you want to submit a large amount of text, like a message for example, the other form type is <textarea>:

<textarea name="myText" style="width:300px; height:100px; border:1px solid #999999;">The text you enter goes here!</textarea>

Unlike the type="text" whatever you write ends up between the <textarea></textarea> tags - NOT in the value=""

Part 5: Lists [back to top]

Suppose you want to make bullet points - or something similar. There's a special tag for that: <ul> (unordered list) and <ol> (ordered list). Observe:

<ul>
  <li>Bullet 1</li>
  <li>Bullet 2</li>
  <li>Bullet 3</li>
</ul>

...which would create:

Bullet 1
Bullet 2
Bullet 3

The <li> stands for List Item - and each one corresponds to another bullet point. Note that you don't need to add line breaks: <br/> at the end to get to the next line because closing the <li> tag automatically jumps to the next line (although with CSS you can alter this...)

There are different bullet styles! Specify the "type" within the <li> tag:

<ul>
  <li type="circle">This is a circle</li>
  <li type="square">This is a square</li>
  <li type="disk">This is the default, a disk</li>
</ul>

...which would create:

This is a circle
This is a square
This is the default, a disk

If you use an ordered list, then each list item will have a number in front of it and you can't specify the bullet types:

First is the worst
Second is the best
Third is an idiot

(you also don't have to start at 1 all the time - just write <ol start="5"> for example and it will start the count at 5)

Part 6: Conclusion [back to top]

So that about does it for an introduction to HTML and CSS. Where should you go from here? As mentioned above, go look online at webpage source code. To view that code, you either right-click on the page and select "View Source Code" from the menu OR you go up to "View" and click "View Source Code."

You may want to view a site's source code, select it all, copy and paste into your text editor, save and view in a browser. You won't get any of their images necessarily, but you can still have a fairly good idea of the site's structure. Then you can go into the code and change some stuff and see how it affects the page.

Seriously, the best way to learn this is by trial and error. You view a site and see something you haven't seen before, test it out and get that "Oh! So THAT'S what that does" revelation. It's fun. Try it out on the HTML Tester Page and look at the CSS Cheatsheet to see how to create some cool styles.

Again, HTML and CSS are just simply a bunch of definitions of properties and attributes. There aren't any algorithms - no problem-solving. You're basically just telling the web browser how the page should be displayed: what colors to use, what fonts to use, where things should be placed and aligned, etc.

Want to take a look at the stylesheet for THIS website? Visit this stylesheet and look at the styles. You should be able to understand most of it.