HTML For Beginners
Saturday, February 6th, 2010I’ve been inspired to write an explanation of how HTML works, and how webpages are created in general, so that the average person, computer-savvy or not, can understand, and even do their own work with HTML. But, I’m gonna start at the WAY beginning, so if you already sorta get it, then don’t start here.
So first, an explanation of what HTML is. HTML is what us web designers and developers use to tell a person’s internet browser how to make the webpage look. How about an analogy. Say you just painted a room in your house, and to do it, you took everything out of the room and put it in a pile. Now you need to put all the stuff back into the room, all in a specific place. Certain things need to look certain ways. Pictures need to be hung on the wall, furniture needs to be up against the wall, books need to be on shelves, and lamps need to be plugged in. Now think of the webpage as the room, and all the things you have to put in your room are the pictures and text and links you want in your webpage. All those different things have to look certain ways, and for a person’s browser to know where to put everything on the page, it needs HTML to explain it.
Let’s get a bit more specific. Every webpage you ever look at has HTML in it. The basis of HTML is something called a tag. The tag is what you put around different types of things on your webpage so the internet browser knows what to make it look like. There is a tag for paragraphs, for images, and for links, in fact there are about 100 different types of tags (Here’s a list of all HTML tags). Really, only about 20 are commonly used though, so don’t worry. All tags look something like this (but for the example, this is a paragraph tag):
<p>Your paragraph goes inside here.</p>
You’ll notice the paragraph tag opens, then you put in the paragraph, and then it closes with the slash you see above. You can also put tags inside of other tags. In fact, that is really the basis of all HTML pages. Say for example you wanted a link inside of your paragraph. You’ll obviously have a link tag inside your paragraph tag. That would look like this:
<p>Your paragraph goes inside here. And here is a <a href="www.google.com">link</a></p>
The a means a link, and href is where you put the destination of the link. Similarly, images are put into tags. Images have the img at the beginning for image, then the source (src) where the image is (if you copy and paste that url into your browser, you’ll visit a page with just the image), then the height and width of the image (in pixels), and then alternative text (alt) if the image doesn’t display.
<img src="http://www.davidjrush.com/images/main/web.jpg" height="100" width="200" alt="davidjrush website design" />
Now you’ll notice that there is no closing tag for the img tag, because nothing goes "inside" of it. So, it closes itself at the end with a slash.
Some other common tags you’ll see, and what they mean:
<html></html> - The entire HTML page is wrapped inside an html tag <head></head> - Things like the title and description of the page go in the head tag <body></body> - The body tag contains all the displayed HTML <table><tr><td></td></tr></table> - This is a table like in Microsoft Excel. First you open the table, then you have as many rows as you want (tr) with as many columns as you want in each row (td). <ul><li></li></ul> - This is an unordered list (ul) with lots of list items in it (li). Unordered lists have bullets. Ordered lists (ol) have numbers. <h1></h1> - This is a header tag. Titles and bigger text go in here. There are 6 header tags that display smaller as you increase the number (h2, h3, h4, h5, and h6). <div></div> - Think of the div tag as a two-dimensional box. You can put stuff in it, tell it how big to be, and tell it where to show up on the webpage. This is probably the most common HTML tag, and also the hardest one to understand.
Alright, that’s enough of those for now, because those are the major ones. Browsers have default ways of displaying those tags. Then, what web designers do, is they apply special rules to those tags so they display just how they want them to. That’s what makes different websites look so different! Those special styles are included in different files called CSS files, or Cascading Style Sheets. I’ve written many posts on CSS, here’s the CSS Back To Basics post. Any questions, feel free to ask! And if you are ever curious how a webpage is written, you can go to your browser, click the view menu, and select to view the source. That will let you see all the HTML that makes the page you are viewing! Don’t get overwhelmed though, just give it a shot and take your time.
