June 26, 2005
Technical Difficulties Series: A Crash Course in Weblog Coding
Part 1: Understanding HTML and CSS
What is the first thing someone notices when she comes to a webpage? Be honest, we all do it. We look at the asthetic value of a page. If it looks like a block of words randomly thrown here and there, if it doesn't have a pretty font, if it has a... (blasphemous) horizontal scrollbar, we skip over it. No one likes to look at colors that clash or text that looks uncomfortably rigid.
What's more is that we look for originality... It just can't be good, it has to be original and good. The answer to this problem is being code-smart. HTML and CSS are what control how the page is to be displayed. If you are new to the blogosphere, I have included links and a short tutorial on understanding HTML and CSS, so open up your blog account and let's get started...
*Please note, a slight working knowledge of HTML is useful to understand the tutorial. A good HTML tutorial can be found at w3schools.
In your templates under "Main Index," there should be a html document. You may notice that many of the < div > tags have more information in them. (ex: < div id="links" > or < div class="titlebar" >) These are attributes and they are referencing fields in your stylesheet. Since the < div > tags make boxes in layers, the stylesheet customizes the way these layers should be displayed.
If you check out your stylesheet, you will most likely find something like this:
/*#links{
float: right;
font-family: arial;
}
div.titlebar{
background-color: #CCCCCC;
color: #FFFFFF;
}*/
(minus the /*'s)
Seeing the pattern? The selector (links) is preceded by a pound sign (#) because it is to be called as an id. When you place an id attribute in your tags with a value of "links," you are grabbing the style values to format the style of the div layer.
The same applies to the period, the difference is that it is a class. The attribute you use to call the style is "class" and not "id".
Under the id "links" there are properties (float: and font-family:). These are properties of the style of the layers. float: makes the layer, well, "float" on the page and causes all text to wrap around it. The thing about CSS is if you tell it to jump it asks, "how high?" So, you have to tell the property where to float. Thus, after the colon put a value, right;<--and don't forget the semicolon!
For a complete list of properties and values for your stylesheet, visit w3schools.
Some basic properties that'll come in handy:
background-color:
this chooses the background color of the layer you specify or the body, not to be confused with color:, which chooses the color of the text. Both can recognize names or hex code (ex: #C0C0C0)
font-family:
this lets you specify what font to use within the tag you specify
border:
this lets you put a border around the layer you specify
(ex: 1px dashed #000000)
font-size:
lets you control the size of the text within the specified tag
(small, medium, large, etc.)
Examples of well-designed blogs:
Tags were spaced to prevent them from being read.
Please leave any unanswered questions in my comments!
Posted by EvanReynolds at June 26, 2005 9:20 PM
Trackback Pings
TrackBack URL for this entry:
Comments
Hey, thanks for the title of “well-designed” blog! I’m flattered :-) Yours is looking tidy and spiffy as well, if I may say so.
Posted by: Karissa at July 11, 2005 9:12 PM
Re the brief conversation we had in my office the other day… you might want to check out this discussion of a book on PHP and MySQL
http://books.slashdot.org/books/05/06/29/2049214.shtml?tid=221&tid=169&tid=156&tid=6
Posted by: Dennis G. Jerz at June 30, 2005 11:49 PM