Lesson 1: HTML Basics

HTML - Hyper Text Mark-up Language - is the most basic of coding languages on the web and can turn a simple page like this into something a bit nicer like this. It can also italicisize, bold or underline (and several other types of formatting) your pages to make them look more customised and interesting. For more HTML tags why not take a look at this list to see all the tags available with HTML? Be aware that I'll only be touching on half of those tags, though, for one reason or another.

HTML consists of tags which are commands that tell your browser how to display what you input. These tags are surrounded by the arrow brackets < > and the proper syntax would be:



The first tag, command (which is not an actual tag, but just there to show you the syntax), gives your browser the instructions it needs; the second tag, /endcommand, ends those instructions and tells your browser to go back to the default (which is usually Times New Roman font, white background, etc. at least for Internet Explorer).

Example


Just remember that all HTML should be placed inside the arrow brackets < > and that they should have an opening tag and an ending tag and the rest is easier. ^__^

Codes in order

On a webpage (outside of Neopets, anyway), there is a specific order in the way HTML is set up, which you can see in the textarea below, followed by a description of each tag.



Tag Description
html Tells your browser this document consists of HTML.
head Wraps around any tags that would affect your entire site or the entire page, such as style sheets, javascript, meta tags and the title of your page. Basically, this tells your browser that there's important stuff here that it should know before doing anything else.
title Displays the name of your site in the blue bar at the top of your browser (where it says Microsoft Internet Explorer, or the equivalent).
meta Helps search engines find your site, and other stuff you don't really need to know right now.
script Javascript that encompasses your entire site or the overall page, such as popups. You don't really need to know this right now.
style Your internal CSS style sheet goes here, which we'll start learning in lesson 3. Alternatively, you could link to an external style sheet, but it goes in the same place. ^__^
body Envelops the content of your site including tables and divs or simple text.

In the Neopian world, however, the only parts of this you'd be able to use are the style and body tags because TNT don't allow the rest on their site.

A Table Explained

So, remember this? To create that, I used a table and font tags, along with HTML you already know such as bold and underline. I want you to do something a little more adventurous though. You're going to create this:





Yup, you've now met the table *mwahahaha* Now for the explanations.

Tables are made up of boxes called cells that can contain text or images. You can determine things like the width of the table, how big its border is, how much space surrounds the table's content and what colour background it has.

To create a table, you first use the table tag. Once you've determined the overall width, you can create a new row with the tr tag. For every row you want in your table, you need a new set of tr /tr tags. Inside each row, you can create individual cells with the td /td tags. For a table like ours, with two columns, you'd have a very basic start like this:



table Starts a new table
tr Starts a new row (t=table; r=row)
td Starts a new cell (d=datacell)

But as you can see from the previous code when making this, we didn't stick with the basic code. Instead, we added a border, a 'header' cell that stretches across both columns and some 'white space' around the content.

Tag Description
cellpadding="10" Puts a 'white' space around your text - and images - inside the table so that your content doesn't hit the edge of the table. You can alter "10" to any random number and it will change the size of the white space. Go 'head, I dare you. Try 5. Then try 60. XD
border="1" This creates a border around the table, as well as around individual cells. Changing "1" will affect the width. Play around with that too. ^^;
width="400" Probably self-explanatory, but the width attribute determines how wide your table is. You can use exact pixels as I've done here, or you can use percentages such as width="50%" so that, no matter what resolution or browser the viewer uses, they will see exactly the same proportions.
You'll note that I've applied three separate width attributes: one to the overall table and one each to the two td columns. I wanted to ensure that both columns were the same width, which is where the td width comes in. I also wanted to make sure that the text didn't stretch the left column so I applied a width limit.

TIP: Tables don't overflow (scroll) so they automatically adjust in size to fit your content which is not always a good thing. Control the adjustment by applying the width attribute.
colspan="2" Colspan effectively merges two cells together so that one td is the equivalent of two. In this way, you can have a single cell stretch the way I've made the "Rapsodine" cell stretch. This comes in handy if you have an extra large image or paragraph that you want in your table without messing up its dimensions. Compare this with this.
align="center" Putting the align attribute into the table tag doesn't always work but is meant to align the entire table. Putting it in the tr tag ensures that every cell on that row is centred (or aligned right/left depending on your choice). Putting it into a specific td tag will align just that cell.

The above are all table-related HTML tags, but you'll note there are some missing from the code I gave you earlier. These are plain HTML tags that can be used outside of a table but they must go inside the body tags.

Tag Description
font Changes your font according to the attributes below.
size="1" HTML does not allow you to get your font all that small unless you alter your browser options (as I've done). Try size 1 in your own browser to see what you get. You can make it pretty huge, I think 78 makes one letter the size of your browser window, so have a play. ^^;
color="purple" Purple is my favourite colour, yay. If you want everyone to see exactly the same colour, use a hex code, which you can get from W3S. I say this because all browsers display named colours differently so it's more accurate if you use hex codes*.
face="verdana" IE defaults to Times New Roman on most computers, unless the user has altered their display options. You can change your font with this tag, but remember that most people only have the fonts that came with their computer. Georgia, Times New Roman, Courier New, Verdana, Tahoma and Arial are the most common and I'd recommend using one of those. Comic Sans MS is also a good choice.
img src The image tag is rare in that it doesn't have to have an accompanying /close tag. You can add a width attribute to resize it, a border attribute to add a border (or take away the default blue border) and add title when you hover your mouse over it.

Assignment

Here's where you get out your Notepad. ^__^ Play around with the code I gave you until you're comfortable making tables and then code one that: Lesson 2 ->