TUTORIAL #3
Description:
I will attempt to show you how to make you page pretty :)
Intro:
Okay, there are probably many ways to make you page visually appealing, but I will skip the intro on html. The web is a evolving entity, and it changes quite quickly. I have noticed that web pages nowadays contain very little html formatting (formatting is the process of making your text different; ie - bold, italic, colored, font face, etc.). The new thing is CSS, which stands for Cascading Style Sheets. Now at the moment, my page is a combination of html formatting and css and a little javascript. Why CSS? In HTML, if one has a page element, one must format and style the element by placing html tags around it. Easy enough. But if you have several elements that you wish to style or format in a particular way, formatting and styling each individual element in HTML is not only tedious, but its looks sloppy and it often gets frustrating keeping track of your tags and where each one needs to be closed and typos and what-not. A great example is hyperlinks. To make a simple hyperlink, all you have to do is inclose the text you wish to be a hyperlink with [a href="http://whatever"] and a [/a] (you must change the [] brackets to <> brackets). By default, hyperlinks show as a blue color but what if I want all them to be a different color, like green? I can go to each little hyperlink and use a font tag and change the color of each one individualy (over 50 on my page alone) OR I can insert a single line of css like this:
a {color:#0000ff;}
And, Ta-daa! that single line will change ALL my hyperlinks to be green :). CSS is just as powerful in creating a pretty layout for your page as it is for changing your text different colors!
Hmmmm... I realize that this a little hard to understand and that you're probably losing interest at this point. So, what were going to do is take our index.html and fix it up a little. Here is our original code. Be aware that you cannot just copy paste this! I will provide a file at the bottom from which you can copy paste:
<![CDATA[<html>
<head>
</head>
<body>
hello world!
<br/>
<font color="#FF0000">
This text is red. This is done in RGB hex with "F" being the
<br/> highest value and zero (0) being the lowest.The
step below "F" would be "E" and so on. Don't worry about this now,
well get back to hex later<br/>
The font tag has many options other then color<br/>
like font face and if you like you can put what is a called <br/>
an inline style to format and make your text pretty :)<br/>
</font>
</body>
</html>
]]>
You see that "font" tag? Well, we can do the same thing with CSS. We'll start off by defining a CSS header in our "head" section (you see it under the "html" tag). Then we will take out the "font" tag and replace it with a "div" and give it a label. Labels are given by putting a id="blah" or class="blah" in the "div", "table" tag or any other tags the define sections of code. I decided to call this "div" 'redtext'.
<![CDATA[<html>
<head>
]]>
<![CDATA[<style type="text/css">
</style>]]>
<![CDATA[
</head>
<body>
hello world!
<br/>]]>
<![CDATA[<div class="redtext">]]>
<![CDATA[ This text is red. This is done in RGB hex with "F" being the
<br/> highest value and zero (0) being the lowest.The
step below "F" would be "E" and so on. Don't worry about this now,
well get back to hex later<br/>
The font tag has many options other then color<br/>
like font face and if you like you can put what is a called <br/>
an inline style to format and make your text pretty :)<br/>]]>
<![CDATA[</div>]]>
<![CDATA[
</body>
</html>
]]>
Now we just tell the css to color our "redtext" red. Since I labled the "div" using a class, you must put a period before the name you gave it. If I had used a "id" tag no period would be nessesary, but from experiance "class" labels are easier to work with when they are buried deep in you code because you dont have to define all the other div, table, table rows and columns that your section might be inside. Sounds complicated, I know. Just take my word for it and use the class label for right now. Okay, so for now on, if we want a section of text to be red all we have to do is put the section inside a "div" or a "table" and label it 'redtext'. Here is the code with the instructions to make 'redtext' red.
<![CDATA[<html>
<head>
<style type="text/css">
]]><![CDATA[.redtext {color:red}]]><![CDATA[
</style>
</head>
<body>
hello world!
<br/>
<div class="redtext">
This text is red. This is done in RGB hex with "F" being the
<br/> highest value and zero (0) being the lowest.The
step below "F" would be "E" and so on. Don't worry about this now,
well get back to hex later<br/>
The font tag has many options other then color<br/>
like font face and if you like you can put what is a called <br/>
an inline style to format and make your text pretty :)<br/>
</div>
</body>
</html>
]]>
You'll notice that I literally told the CSS to make 'redtext' 'red' instead of using hex. This is possible for some common colors like red, green, white, black, yellow, etc.. I prefer to use hex because you have full access to the 255 colors possible with hex. Now lets play a little more. lets say I want the background to be blue, the text to be yellow, bold, italic, and in the Sans Serif font face. All i have to do is this:
<![CDATA[<html>
<head>
<style type="text/css">
]]><![CDATA[
body {
background-color:blue;
}
.redtext {
color: yellow;
font-weight: bold;
font-style: italic;
font-family: sans-serif;
}
]]><![CDATA[
</style>
</head>
<body>
hello world!
<br/>
<div class="redtext">
This text is red. This is done in RGB hex with "F" being the
<br/> highest value and zero (0) being the lowest.The
step below "F" would be "E" and so on. Don't worry about this now,
well get back to hex later<br/>
The font tag has many options other then color<br/>
like font face and if you like you can put what is a called <br/>
an inline style to format and make your text pretty :)<br/>
</div>
</body>
</html>
]]>
Pay special attention that you end each attribute with a semi-colon. You can find a list of CSS font attributes at W3Schools here , text attributes here, and background attributes here. If you dont want them to open in this window, ctrl+click them, and they will open in new tabs if you are in Firefox. Also, if your in Firefox you can press ctrl+U to see the source code on any page. If you do that here you can see the code I wrote. Youll notice that all the "div" sections labled with 'code' are light grey the text the inside them is 12 pt, black, and are in the courier font. All that was done to all the sections lables 'code' simply by a line in this css section that told the css to do that to all the sections labled 'code'. So now you know how to format and change the color or the page. In the next tutorial, tutorial#4, I will show you how to contruct a layout to organize your page.
Copy and paste this.
|