Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

HTML/CSS Tutorials

HTML Basics

Introduction:

In these tutorials I will strive to show you how to code HTML and CSS together, as they have become basic web essentials. HTML is used to define your content and CSS is used to style your content. The sections 'HTML Basics', and 'Before you Code' will give you the run down on how to get started; each section thereafter is a tutorial in itself although they are quite dependant on the previous tutorial's knowledge and should be done in order.

HTML:

HTML (Hyper Text Markup Language) - A text-based language used to structure text and multimedia documents and to set up hypertext links between documents; used extensively on the World Wide Web.

HTML is a text based language used to create Web Documents. There are other languages that can be used in the creation of Web Documents but all Web Pages have some form of HTML.

HTML is a language made up of a set of tags. Tags are made up of three parts: the opening tag '<' (a less-than symbol); the name of the tag; and the closing tag '>' (a greater-than symbol).

Most tags have an opening (ie. <html>) and closing (ie. </html>) tag. Closing tags are a repeat of the opening tag but with a forward slash in front of them (/).

Opening tags can contain different attributes such as style, class, id, title, onclick and more. This is important to introduce in advance as these attributes enhance what you can do with your tags including adding CSS styles and javascript functions.

ex: <div class="column" style="padding:10px;">My division contents</div>

Coding HTML can entail more than just getting a web page to display. There are dos and don'ts, and varying levels of well written code. Your goal in learning HTML should be to write valid, semantic markup.

Valid code:

The main association responsible for developing web standards is the World Wide Web Consortium (W3C). Their mandate is:

"To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web."

Further:

"W3C primarily pursues its mission through the creation of Web standards and guidelines. Since 1994, W3C has published more than ninety such standards, called W3C Recommendations. W3C also engages in education and outreach, develops software, and serves as an open forum for discussion about the Web. In order for the Web to reach its full potential, the most fundamental Web technologies must be compatible with one another and allow any hardware and software used to access the Web to work together. W3C refers to this goal as "Web interoperability." By publishing open (non-proprietary) standards for Web languages and protocols, W3C seeks to avoid market fragmentation and thus Web fragmentation."taken from w3.org


The W3C has classified certain HTML tags as not being valid in the current version of HTML which is version 4.01. These tags are called 'deprecated tags' and you should try not to use them. A deprecated element or attribute is one that has been outdated by newer constructs such as CSS styles.

Deprecated tags:

If you write valid code, it is most likely that your web page will display correctly in all browsers. The W3C offers HTML validators to help you in your goal to write valid code. If you run your code through the validator, it will help you identify areas where your skills need improvement, and thus, help you to become better at writing HTML. The following tags are no longer valid:

ex: <applet><basefont><center><dir><font><isindex><menu><strike><u><xmp>

Semantic Code:

Writing semantic code means that you are using html tags for their given purpose. HTML was originally intended to describe the contents of a document, not to make it look pretty. Keep in mind that semantic code is a return to describing the contents of your document, and that this is advantageous for accessibility, for your rank in the search engines, for display on PDAs and text browsers etc.

ex: <div style="font: bold 18px arial, sans-serif">My Main Page Title</div>
vs: <h1>My Main Page Title</h1>

An H1 tag is the largest header tag and should therefore be used to describe your main page title.

Formatting HTML:

HTML documents can be long or short, either way you should use a consistent method for formatting your code which will make it easier for you to detect errors in your code such as missing closing tags. The best way to format your code is to 'nest' your tags using indents.

The first and last item on my page is the html tag; therefore, everything that comes in between these tags will be indented by one tab. My <head> tag is inside of my <html> tag, it is, therefore; indented by one tab, but everything within my tags should also be indented and so on.

ex:
<html>

    <head>
        <title>My page title</title>
    </head>

    <body>
        <p>My page Contents</p>
    </body>
	
</html>

See how easy it is to ensure that all of my tags are closed?

Using Comments:

While we're on the subject of formatting code, it is a very good practice to use what are called 'comments'. Comments are special pieces of code that are ignored by browsers that let you leave notes for yourself and others, in order to understand your document.

A comment opens with <!-- and ends with -->

ex:
<!-- this is my current navigation, don't forget to add the page for photos -->
<!-- my navigation ends here -->

Comments are also useful when you want to remove code that you may put back in later. Ie. you can comment out parts of your code.

<!--Put this back in once you've got images on your photos page
<a href="photos.html">View my photos</a> -->

Comments can be as long as you wish them to be, they only end when you close the comment (-->).

CSS:

rule

CSS stands for Cascading Style Sheets and is very useful in styling your HTML. Styles are called 'rules' and there are two parts to each rule; the selector and the declaration. The selector is the HTML element to which the style will be applied. The declaration defines the style in two parts; the property and the value. It doesn't take a long time to learn the various properties and values that you can use, but a good reference is handy when you're starting out.

There are several ways to use CSS: inline styles; embedded styles sheets, and external style sheets.

Inline styles: Use inline styles to modify the appearance of a single element by specifying the 'style attribute' of a given HTML tag.

<h1 style="font: bold 18px arial, sans-serif;">Your title</h1>

Embedded style sheet: Use an embedded style sheet to declare several styles in your document. An embedded style sheet is placed between the <head></head> tags of your HTML document.

<style type="text/css"> 
 h1 {font: bold 18px arial, sans-serif;}
 h2 {font: bold 16px arial, sans-serif;}
 h3 {font: bold 14px arial, sans-serif;}
</style> 

External style sheet: Use an external style sheet when you have many styles and wish to keep your HTML clean and separate. Link to your stylesheet by placing the following in between the <head> </head> tags of your HTML document. You can link to the same external style sheet from all pages of your website.

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

Using classes and ids:

Each HTML tag supports class, id, and style attributes and you can use all three at once should you so desire. The purpose of class and id are to provide a reference point for similar elements from your embedded or external style sheet. If I have a title that I want to be bold and red, and it is used throughout my page or site, I can create a class name for that style. Let's say I choose to name the style, redTitle. I can name any element redTitle and the style will be applied to it.

Note: If your class or id has declarations that can only be applied to a block level element, inline elements given the same class or id name will ignore that declaration.

ex: <h1 class="redTitle">My title</h1>

If I have a subtitle further along, and I want it to look the same but smaller, I can combine two styles.

ex: <h3 class="redTitle" style="font-size: 13px;">My sub-title</h3>

My embedded, or external style declarations will include font, color, and text-decoration. The way to define, or identify a class in an embedded or external style sheet is to use a period in front of my class name like this:

ex:  .redTitle {font: bold 16px arial, sans-serif; color: #ff0000; text-decoration: underline;}

An 'id' is used to reference a style that is only used ONCE on a page. You use a hash mark to declare an id like this:

ex:  #redTitle {font: bold 16px arial, sans-serif; color: #ff0000;}

CSS uses a color system called hexadecimal. It is a combination of three letter/number pairs that each represents one of the RGB values. For more information on hexadecimal colors read this article. We also offer a hexadecimal color reference chart.

Tip: You can use all three methods of declaring your styles. An inline style will override an embedded or external style, and an embedded style will override an external one. This is why styles are called 'Cascading'.