Basic Formatting
Ok, so you have written a short page to prove you can write HTML. It's wonderful and all, but it lacks that certain something doesn't it? You want things to stand out more, want to skip lines and use italics.
You want to format.
This page was last updated on 2012-08-21
- Note:
- You should have both your editor and your browser open at the same time while you're coding. Whenever you make changes to your html code, save it, switch to your browser and press refresh and the page will update itself to the newest version.
Formatting the Text
Well, you remember from the last tutorial how you needed a start tag and an end tag right? Start with the start tag, end with the end tag. Simple. You already know that <b> means bold. Let's refresh.
Hi, my name is Ross and I'm brilliant. Yeah, that's right I'm brilliant!
Ah...now I feel good. Plus, I cunningly disguised that as a lesson in HTML. To make the bold text, here's what I did:
<b>brilliant</b>
That's all there is to it. Just surround the text you want in those tags.
Hoping it'll get more exciting soon, eh? Alrighty, want to learn italics? That's just as easy. The code for that is i. So, in the same fashion:
<i>superb stuff</i> becomes superb stuff.
Underlining is laughably easy too — just use <u>
<u>Just hit me with the underline, maaan</u>
Harking back to the days of ration cards, you can even make your text look like it was bashed out on a typewriter — use tt.
<tt>Day twelve. The Germans have surrounded our farm</tt>
becomes... that in this sort of text.
The examples above all use presentational tags. You may want to use logical tags instead, which make your content more accessible.
Your browser only displays one space between words. If you add in more spaces in the source code, they will be ignored. If you want to forcefully add in extra blank spaces, you can use the special character , which stands for 'non-breaking space'. With this you can create indents for your text.
<p> This text will be indented</p>
Tag Questions
Do the tags have to be in CAPITALISED text?
Nope, they don't. You can use <b> or <B>. I prefer to make all of mine lowercase because it looks much neater when you're reading and editing your code, and suits the version of HTML I code in, but it doesn't change how they work. It's up to you.
Can I mix them together?
You really are getting adventurous aren't you? Yes, you can. Simply surround the text you want with both sets of tags — <b><i>like this</i></b>
Something to note however, is the order you put them in. If you start with b, you end with b. In the example above, <i> was the last tag opened, so it is the first one closed. This is something you should remember, because the importance of your tag syntax becomes critical later on. This style of opening and closing is called LIFO — Last In, First Out.
Putting tags inside each other like this is called nesting.
Skipping Lines
You've probably noticed by now that when displayed in a browser your page seems to have lost all its paragraphs and whatnot. Your browser ignores any returns and indents. So what do you do? You use <br>, which stands for 'line BReak'. This is known as an 'empty element' — a tag which doesn't need an end tag — just type that and the text will start on a new line.
Or how about skipping a line and creating paragraphs? To do that, use <p>, which stands for 'Paragraph'. There are two ways to go about using p. You can just put it at the end of a paragraph to skip a line on to the next; or you can put a <p> at the start of the paragraph and a </p> at the end. I prefer the latter, because it looks neater, and allows you more flexibility. You should use it too.
<p>Welcome to my page.<br>
I hope you enjoy your visit.</p>
Attributes
Now I'm going to get slightly more advanced. To center text, the basic tag is <center>. But, this is being replaced, so a better way of doing this is to align a paragraph. This involves giving the tag an attribute. The tag on its own does something, but then you can add attributes to further define what the tag does. You will see many other tags having attributes later on — they are a very important part of HTML. The structure of an attribute is:
All tags can have several attributes at a time, but only some attributes work for certain tags. It's just a matter of learning them off. Also, don't forget to encase the value in quotation marks.
So, to add the center value to the p tag, the structure is:
<p align="center">Centered Text</p>
Compare that to the example above to see what's what. p is the tag, align is the attribute, and center is the attribute's value.
Note that when closing the original tag (p), all its attributes are taken with it, and all you need is the normal closing tag (i.e. don't start putting attributes into it).
Obviously, if it can be aligned to the center, it can be aligned in other ways too. You can align left and right. But there's no point in writing <p align="left">, because all text aligns to the left anyway. This is known as a default.
Headings
In the beginning, heading tags were invented as a graded method of information layout and division. You used big headings for the main points in a page and go down through the numbers. There are 6 gradings or levels of HTML headings: <h1> to <h6>. Graphically, these create decreasingly large text, with h1 being the biggest, and h6 being the smallest of the group.
So let’s see them!
Oh, that's my cue. Ok: here are the examples:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
You just wrap the preferred heading tag around the text, like so:
<h3>Heading 3</h3>
The text will then appear bold and big. One thing to note is that headings are always apart from the rest of your text, like a paragraph. This is a property of block-level tags. You cannot flow headings and normal text together. If you want text to follow straight away, you should just change the font size and not use a heading.
The title of your page should be made into a level-one heading. The rest of your page should be divided into sections with further heading tags, getting progressively smaller for points and sub-points. Try not to skip levels (like going from a <h2> to a <h4>).
sourcetip: Headings take on the color and font face of the surrounding text, so you can change a headings color, say, by wrapping a font color around the h tag. Read this tutorial on font and color for more.
Headings can also be aligned. Values are center, justify, left or right.
Lines
Some other very simple stuff is using lines across the page. To make them, use <hr>, which stands for 'Horizontal Rule'.
Just put that anywhere on your page (no end tag is needed) and the text will stop and a big
will appear and then your text will continue on. Nice, eh?
These can be manipulated through attributes too. They can be aligned left and right, like p above. They also have two other attributes that relate to the size of the line.
<hr width="100"> would create
a little guy like that. You are specifying the width in pixels here, or you could use a percentage, like <hr width="80%">, which will create a line that is 80% as wide as the available screen width.
To make stronger lines, <hr size="4" noshade> would create a big, beefy
Did you see that noshade bit there? That is a special attribute unique to hr, and it doesn't need a value. It stops the hr having two shades of gray in it.
It also shows that many different attributes can be used on the same tag at the same time. Experiment with them a bit.
Comments
Once your documents start getting filled with confusing tags and sections you're going to need to know which part is which. You use HTML comments to add notes to your code so that you can read it easily the next time you come back to edit it. The code for a comment is a little different than for other tags:
<!-- Navigation starts here -->
Anything you put between the <!-- --> lines will be completely skipped by your browser. You can add in some hash marks (#) to make your comments stand out. When scrolling through the HTML code of a page you want your structure comments to jump out. Comments will be used later on in HTML to hide things from old browsers. They're very useful — use them and help yourself out.
Spaced Out
How you lay out your source code is a matter of taste in most regards. You can indent some tags off the left margin so they're easy to see, and skip lines after each paragraph. It doesn't matter much to your browser, which usually disregards spaces, tabs, blank lines and other 'white space' characters when it is displaying your pages. I should warn you that sometimes however, extra spacing characters will mess up something on you. It's not serious, but a line like the one below should be fixed:
<p><u>Some underlined text. </u></p>
The space character before the closing </u> tag will make the underline effect run on for longer than the sentence, which looks sloppy. Later on, with table tags especially, leaving in spaces like this can ruin a layout by adding gaps between your elements. So, code tightly, with no spaces between text and end tags.
First Validate
You've probably introduced quite a lot of new tags into your page now. Validation is the process by which you make sure that in all of your tinkering, you haven't introduced any nasty mistakes into your lovely simple code. To check if a HTML file is valid, you can use an online validator like the » W3C validator. It's a free service that scans your file (either online or any page on your computer) and returns a list of errors, if it finds any. It's easy to use — enter the address of a webpage into the form and it will go off and do the necessary tests.
When an error is diagnosed it is usually a simple process to track it down and eliminate it with great prejudice. Don't take the validator's warnings lightly; this is an important process, and one that many careless coders disregard. Later on, they regret it. Oh yes they do.
If your code is valid, it has a much better chance of working in every browser, which means more people can read your stuff. While the chances of having many critical errors in your code are small at the moment, once you have an entire site to maintain the gremlins can often sneak into your code, threatening the accessibility of your pages. So, validate often. Whenever any more major work is done on your site, run it through the machine again just to make sure everything's hunky-dory. It'll keep me happy.
And now; we link!
