Basic Formatting

html source=excellent

Ok, so you have written a short page to prove you can write HTML. Its wonderful and all, but it lacks that certain something doesnt it? You want things to stand out more, want to skip lines and use italics.

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 youre coding. Whenever you make changes to your html code, save it, switch to your browser and pressrefreshand the page will update itself to the newest version.Formatting the Text

Well, you remember from thelast tutorialhow you needed astart tagand anend tagright? Start with the start tag, end with the end tag. Simple. You already know thatbmeans bold. Lets refresh.

Hi, my name is Ross and Imbrilliant. Yeah, thats right Imbrilliant!

Ah…now I feel good. Plus, I cunningly disguised that as a lesson in HTML. To make the bold text, heres what I did:

Thats all there is to it. Just surround the text you want in those tags.

Hoping itll get more exciting soon, eh? Alrighty, want to learnitalics? Thats just as easy. The code for that isi. So, in the same fashion:

isuperb stuff/ibecomessuperb stuff.

Underliningis laughably easy too just useu

uJust 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 usett.

ttDay twelve. The Germans have surrounded our farm/tt

becomes… that inthis sort of text.

The examples above all use presentational tags. You may want to uselogical tagsinstead, which make your content moreaccessible.

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 thespecial character, which stands for non-breaking space. With this you can create indents for your text.

pThis text will be indented/p

Do the tags have to be in CAPITALISED text?

Nope, they dont. You can useborB. I prefer to make all of mine lowercase because it looks much neater when youre reading and editing your code, and suits theversion of HTMLI code in, but it doesnt change how they work. Its up to you.

You really are getting adventurous arent you? Yes, you can. Simply surround the text you want with both sets of tags bilike this/i/b

Something to note however, is theorder you put them in. If you start withb, you end withb. In the example above,iwas the last tag opened, so it is thefirstone 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 calledLIFO Last In, First Out.

Putting tags inside each other like this is callednesting.

Youve 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 usebr, which stands for lineBReak. This is known as an empty element a tag which doesnt 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, usep, which stands forParagraph. There are two ways to go about usingp. You can just put it at the end of a paragraph to skip a line on to the next; or you can put apat the start of the paragraph and a/pat the end. I prefer the latter, because it looks neater, and allows you more flexibility. You should use it too.

pWelcome to my page.br

I hope you enjoy your visit./p

Now Im going to getslightlymore advanced. To center text, the basic tag iscenter. But, this is beingreplaced, so a better way of doing this is toaligna paragraph. This involves giving the tag anattribute. 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. Its just a matter of learning them off. Also, dont forget to encase thevalueinquotation marks.

So, to add thecentervalue to theptag, the structure is:

p align=centerCentered Text/p

Compare that to the example above to see whats what.pis the tag,alignis the attribute, andcenteris the attributes value.

Note that whenclosingthe original tag (p), all its attributes are taken with it, and all you need is the normal closing tag (i.e. dont start putting attributes into it).

Obviously, if it can be aligned to the center, it can be aligned in other ways too. You canalignleftandright. But theres no point in writingp align=left, because all text aligns to the left anyway. This is known as adefault.

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:h1toh6. Graphically, these create decreasingly large text, withh1being the biggest, andh6being the smallest of the group.

Oh, thats my cue. Ok: here are the examples:

You just wrap the preferred heading tag around the text, like so:

The text will then appear bold and big. One thing to note is that headings are alwaysapartfrom the rest of your text, like a paragraph. This is a property ofblock-leveltags. 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 ah2to ah4).

sourcetip:Headings take on the color and font face of the surrounding text, so you can change a headings color, say, by wrapping afont coloraround thehtag. Read this tutorial onfont and colorfor more.

Headings can also bealigned. Values arecenter,justify,leftorright.

Some other very simple stuff is using lines across the page. To make them, usehr, which stands forHorizontalRule.

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 throughattributestoo. They can bealigned left and right, likepabove. They also have two other attributes that relate to the size of the line.

hrwidth=100would create

a little guy like that. You are specifying the width inpixelshere, or you could use a percentage, likehr width=80%, which will create a line that is 80% as wide as the available screen width.

To make stronger lines,hrsize=4 noshadewould create a big, beefy

Did you see thatnoshadebit there? That is a special attribute unique tohr, and it doesnt need a value. It stops thehrhaving 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.

Once your documents start getting filled with confusing tags and sections youre going to need to know which part is which. You use HTML comments toadd notes to your codeso 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:

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. Theyre very useful use them and help yourself 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 theyre easy to see, and skip lines after each paragraph. It doesnt 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. Its not serious, but a line like the one below should be fixed:

puSome underlined text. /u/p

The space character before the closing/utag will make the underline effect run on for longer than the sentence, which looks sloppy. Later on, withtabletags 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.

Youve probably introduced quite a lot of new tags into your page now.Validationis the process by which you make sure that in all of your tinkering, you havent 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. Its 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. Its 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. Dont take the validators 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 amuch 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 everythings hunky-dory. Itll keep me happy.

Other My First Site Articles//My First Page Basic FormattingBasic LinksBasic Imagesbody AttributesBasic Web DesignHTML Tag ReferenceUploading your Site

Whats Related//The font TagFull Text Formatting List

HomepageFull IndexSection Index

Just print pages normally, our stylesheet will automatically reformat the page for you.

We use (and teach!) only the finestvalid HTMLandCSS, for your comfort and safety.

HTML Source is by me, Ross Shannon. Im a web designer from Ireland, and am currently finishing my PhD in Computer Science.

You can support HTML Source by making a small donation.

© 20002018 Ross Shannon