Wednesday, November 17, 2010

Easy CSS/HTML Page

Hey there. CSS and HTML are just letters, that mean a webpage that can be adjusted easily, to look however you want. Here's a simple example to get you started:

<html> <head>
<title>the page's title</title>
</head>
<body>
main stuff (content) here
</body>
</html>

Above is the HTML page that you'll save with the extension .html - you can save it from some simple editor like notepad, by showing all the files, and then saving, otherwise it'll save as a text file. Optionally, when saving, you can place quotes around the file, like "mypage.html", that will save it as an html file.

So that was the HTML part. Now we can write the CSS part:

<style type="text/css">
body {
background-color:#333333;
font-size:1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#eeeeee;
}
</style>

Now, you can put this CSS right above the closing </head> tag of the HTML file. So you can see that we need to let the browser see the CSS stuff first, before it sees the main content in the body.

Then, open up a browser, like Internet Explorer, Firefox, or Safari. Go to the file open, and look for your .html file that you saved on your computer. Open the file, and you'll notice the dark background color, with the lighter text (font).

You could learn HTML and CSS if you like. Another way is to just absorb it from making pages do different things that you want. The basic commands (tags) you'll need are what we wrote above.

Each HTML tag has this form:

<tag></tag>

The first one is the opening tag, and the last one is the closing tag. Likewise, the form for CSS is:

tag { }

The first word is what you're trying to change, and the curly brackets hold the changes between them.

Next, there are separate parts of the HTML page, like the html, head, title, and body.

  • The <html></html> tag simply means to begin writing html page tags, telling the browser where the html is (between the html tags).
  • The <head></head> tag holds any information the browser needs to know about the main content in the body (especially CSS styling).
  • The <title></title> tag is the text you'll see at the top of the browser (where you drag your browser around, and minimize/maximize, or close it).
  • The <body></body> tag is the main body of your content, that holds the text and pics of the subject of your site. This is the part that the CSS in the head section controls.
  • The <style></style> tag tells the browser where to look for CSS (between the style tags). What type of style is the type="text/css" , meaning the browser should look for text and CSS styling within the content.

Stay tuned as I explain the CSS stuff between the curly brackets. It basically has to do with fonts, and how they look. Then, we'll learn about adding a doctype and moving things around in the page (positioning).

Part 2