HTML stands for HyperText Markup Language, which is a fancy way of saying it defines what items are on a page and where. The HTML document will contain the actual text you want visitors to see on your site, as well as text that tells the browser how to arrange everything. The instruction parts of HTML is contained within angle brackets, like this:
<div class="red">
This is text the visitor will be able to read.
</div>
We'll pick that apart more later, but the first line tells the web browser to create a div (division) who's class is "red". Everything after that will be contained inside that div until we close it. Line 3 tells the browser that we want to close that division.
So where does CSS come in? CSS stands for Cascading Style Sheet. HTML tells the browser where to put things on the page, but CSS tells it how items should look. CSS is written in a completely different way than HTML because CSS is essentially a list of styles we want to apply, kind of like Layer Styles in Photoshop, but all text and much more basic.
Above we made a div with the class "red". The class part of the markup tells the browser to look in the CSS for a section called "red" and apply those styles to the div. Without the CSS the div would be invisible and just big enough to hold the text inside it. I want to make the div 200x400px with a red background. I also want to make the text inside 16px high and colored black. We'd write the CSS like this:
.red {
width: 400px;
height:200px;
font-size: 16px;
background-color: red;
color: black;
}
".red" means this will be for items in the HTML that have the class "red". The attributes are then put between braces. The "red" class makes the background red and any text inside it 16px high. Text is black by default, but you can change that by changing the "color: XXX" line. For colors you can use simple names like red, black, blue, fuchsia, etc, or hex codes like #FF0000. You can define the height, width, borders, margins, and tons of other attributes with CSS, but we'll keep it simple for now.
When we put the CSS and HTML together we have this.
This is text the visitor will be able to read.
Know that we understand the basics of writing the code, we'll start with a blank HTML template page, which looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
</body>
</html>
There are a few key things to notice here. The first line starts with a "<!", which means that line is a comment and will be ignored by the browser. This comment, however, is needed by the browser to define what kind of document this is. There are a few different kinds of HTML (strict, transitional, frameset, older versions) so you need to declare what doctype you want to use. I'm not going to explain the differences, just know that Transitional is what we want to use.
Line 2 starts the HTML section of the document. The xlmns tag is a little complicated to explain, and it really doesn't even have to be there (if it isn't there the browser just assumes it is anyway), but I like to include it just in case.
Line 3 opens the Head of the document. The head contains information about the site you are building, but not the actual site itself. In the Head you will link to the CSS document, any JS scripts you may be using, you can include the title for your page, etc. Line 3 is an example of this. It tells the browser that you want to use the UTF-8 character set. There are a few different character sets you can use, but UTF-8 works best.
The head is then closed with </head>.
Then starts the Body of the page. The Body holds the part of the site your visitors will actually see. The div example at the beginning of this post would belong here. Go ahead and copy it in and save the document. When you have everything in place you close it with </body>, then close the open <html> with </html> at the bottom of the whole page.
Next we can work on the CSS. Style Scripts don't require any fancy headers or information, just the code. Since we have the "red" div in our HTML lets add a "red" section to your CSS, which simply looks like this:
.red {
width: 400px;
height:200px;
font-size: 16px;
background-color: red;
color: black;
}
Feel free to change anything you want in the CSS so you can see the effects on your HTML page. The CSS document doesn't need anything else so save it as something easy to remember, like "style.css".
The HTML is done and the CSS is done, now we need to put them together. There are two ways to include CSS in the HTML. The first is the proper way, by linking to it. Make sure the CSS and HTML documents are in the same folder and add this line in the Head section of your HTML:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
The REL tells your browser this is a style sheet being linked to. HREF is how a browser finds files. You'll be using HREF to link to other pages of your site later. TYPE is self-explanatory. MEDIA tells your browser that this is meant for a computer screen. You can specify add a print, projection, tv, etc CSS document if you need to. You'll never need to.
The other way to add CSS to your HTML is through <style> tags. This is improper, but is useful when writing a site. You would add this inside the Head of your HTML:
<style type="text/css" media="screen">
</style>
Then paste the CSS inside those tags, like this:
<style type="text/css" media="screen">
.red {
width: 400px;
height:200px;
font-size: 16px;
background-color: red;
color: black;
}
</style>
It can be easier when developing the site because you are only working with one document that contains both your HTML and CSS so you don't need to switch back and forth constantly. If you choose to work this way you should switch the CSS over to its own document before publishing.
When you are done including your CSS save everything and we can test the site. Open your browser and in the File menu choose Open File. Find the HTML document we just made and open it up. Pretty boring, but its a start. There is a huge list of CSS properties at W3C with examples of how to use it. Read through it so you have an idea of what CSS can do on your site.
In the next post I'm going to talk about images, links, divs inside of divs, and a few other odd things.
You can download the documents from this post here:
http://www.box.net/shared/p3imkfug6b
No comments:
Post a Comment