Newsfeed Yumestate's Twitter Yumestate's Facebook 
Yumestate

NOTICE: Yumestate Anime is no longer being maintained and thus has been put on Archive mode. Links and functionality are limited.

small image Design: Basics of HTML and CSS

January 27, 2011 9:59 pm by small image

In the next couple of blogs I will be covering a lot of technical things related to building a website. To familiarize yourself with the content, I wanted provide a very brief overview of what HTML and CSS is and what they can do. Don’t worry. You’re not going to become a HTML/CSS master after reading my posts. I just want you to understand the techno babble so that you won’t get lost. If you want to become one, then I suggest you read the more advanced posts that I will post at a later date.

So HTML, it sounds like a lot of work to write something on the internet.

It’s not. HTML is a programming language, but it’s very easy to use and implement (when you know it). Even for those that find programming and technology difficult to use, HTML can be learned if taught properly and understood in small steps.

Opening and Closing tags

HTML consists basically of an OPEN TAG and a CLOSE TAG. An HTML document is a combination of different kinds of tags that work conjunction with one another. Information on tags can easily be found on the rest of the internet so I won’t talk about them. More specifically, we shall take a look at how your internet browser (USE FIREFOX!) interprets HTML. Let’s use Microsoft Word as an example. When you want to BOLD something, you highlight the words you want, and then you click the little B on your toolbar right? HTML is the same thing, except you manually type that out.

Okay, so how do you manually highlight something if you’re editing just text?

Let’s say I wanted to bold “The quick brown fox jumps over the lazy dog.” Let’s pretend you don’t have a mouse. You can’t click and highlight the text, so how can you select the phrase to bold? Simple! You put special brackets around your phrase. In HTML, that means to enclose it with the OPEN TAG and CLOSE TAG for bold. The HTML tag for bold is <b> and </b>.

Quickbrown.png

So in the HTML document instead, it would look like this: <b>”The quick brown fox jumps over the lazy dog.”</b>. When you display it in your browser (I use Firefox), it will look like “The quick brown fox jumps over the lazy dog.” That’s it! Simple enough? If I confused you, I guess you’ll just have to read a book on HTML or I’ll have to come up with a better example. Hopefully this makes sense for you and you won’t have to read a textbook or anything like that. Moving on CSS!

I hear CSS all the time, what’s it do?

noheader.png

It stands for Cascading Style Sheets. It can take a while to understand, but it becomes infinitely easier the more you work with it. CSS is the biggest factor in how StudioTim looks the way it does. The best way for me to explain it would be to use a similar example that’s much more common. Again we’re going to go with Microsoft Word, since everyone uses or has used it at some point. It doesn’t matter which version, although users of the 2007 and now 2010 version may relate more easily to what I’m talking about. When you’re typing in a document it’s just text right? It’s designed to be plain so the reader can read it and when you print the document it looks like what it does on the monitor.

withheader.png

So what happens when you start adding CSS? It looks like this metaphorically in Microsoft Word. You see how the headers change colour and the font for the normal portion of the text changes size and shape? You are changing the STYLE and formatting of your word document. In fact, if you look at the top of Microsoft Word where there’s a toolbar for formatting, it’s even called “Styles and Formatting”. That’s essentially what CSS does for HTML. The only difference is you can customize every single bit of detail in your style, rather than have Microsoft Word give you presets.

Here’s an example of how much you can customize your entire website simply with CSS. You can make it so that anything with a <b> tag (remember bold tag) to do 5 different things at once. I will make my bold tag:

  1. overlined (a line above the text)
  2. blue coloured
  3. Georgia font
  4. font size: 20
  5. have a border of 2 pixels

Here is the code for anyone interested:
<b style=”padding:5px;
text-decoration:overline;
color:blue;
font-family:Georgia;
font-size:20px;
border:5px solid;”>

“the quick brown fox jumps over the lazy dog.”

Anyway, that’s pretty much all I have to say about the basics of HTML and CSS. I hope you’ve learned something today, and even if you didn’t at least you read something that may be useful in the future. In today’s world where technology can be a driving factor in decision-making, understanding little bits of programming/coding may be helpful! Leave a comment if you enjoyed this post, or have suggestions on other types of coding with HTML and CSS.