Its All About The Text
Now that you have created your first page we are going to look at how you can change the format of your page to suit your own specific needs.
Most of the examples I will be writing will be without all the <HTML> and <BODY> tags. You may be best to create a template so you are not writing the basic structure over and over again. All of the examples in this section need to be put in the body section.
We will be creating paragraphs, headings, changing the format and size of the text
HEADINGS
Headings are mostly used for the titles on pages and other places where you want the text to be large and stand out. Headings range in size from <H1> to <H6>.
We will create an example so you can see the size of the headings. This maybe useful to keep as it may be good as a reference in the future, until you get used to what size you want when doing headings.
Task
We will create an example so you can see the size of the headings.
Open a new notepad file and type the following HTML
<HTML>
<HEAD>
<TITLE>Heading sizes</TITLE>
</HEAD>
<BODY>
<H1>Heading size 1</H1>
<H2>Heading size 2</H2>
<H3>Heading size 3</H3>
<H4>Heading size 4</H4>
<H5>Heading size 5</H5>
<H6>Heading size 6</H6>
</BODY>
</HTML>
As you did with the first page you created go to file/save as and in the web design book folder you created save this file as headingsizes.htm.
If you double click the new file you have created, a new browser window will open and you will see 6 different lines which represent the 6 different sizes.
Spacing
Line spacing is done by using the <BR> tag. The <BR> tag basically puts a blank line in your text.
Example(try this if you wish)
Put the following in the <BODY> Section of a new web page.
My name is Freddy<BR>
I Fancy A Curry<BR><BR>
But They Give Me Gas<BR><BR><BR>
If done correctly you should see a web page where all these lines are split up some have more spaces than others. Remember each <BR> inserts a blank line. <BR> is also one of the rare times you do not need to close the tag as all it is doing is inserting a line so there is NO NEED to close it with </BR>
When you type sentences and put a space between words it is always counted as one space.
For example you could put:
Hello My name is Freddy.
The browser would output this as:
Hello my name is Freddy.
As you can see all the spaces you entered would be removed. There is a way to avoid this you can use the <PRE> tag to make the text appear in your browser exactly as you type it but always remember to close the tag afterwards </PRE>.
Horizontal Lines
If you have ever wondered how people did the horizontal lines across the screen as I used to do you will be amazed at how easy that is.
<HR COLOR="red">
That is all there is to it. You can change it to whatever colour you want. Also Note that colour is spelt the American way!!
Go ahead give it a try in your heading size document. Put the above code in the Body section below any code you already have. If you are using internet explorer you will see a red line. In other browsers it maybe grey.
Alignment
Text can be aligned a number of ways Left Aligned, Right Aligned, Center Aligned and also Justified(The text on each side is aligned making the text level on both sides).
Alignment can be applied to the <H> tag and also can be applied to the <P> tag.
The <P> tag is something we have not looked at yet. The P basically stands for paragraph. So when you have a block of text you basically start with <P> then write your paragraph then close the tag with </P>. You will understand the <P> tag further on in the exercise but for now we will start with the<H> tag that we have been covering.
So as a scenario say we wanted to have a big title at the top of the page that said “Products”. But we didn’t want it on the left hand side of the page we wanted it smack in the middle of page we could use the following
<H1 ALIGN=”center”>Products</H1>
Please note that centre in any HTML code is spelt the American way.
I have highlighted the code I have just put in. Formatting of any kind generally goes in the opening tag. We tell it what we want it to do which is ALIGN then we say we want it to align to the centre by using =”center”. As you can see where we want it to align to is put in double quotes. This would do exactly what we want and put the Heading in the centre of the page.
There are also 2 more types of alignment that come in handy. You can also align text or headings to the top or bottom using VALIGN. Valign stands for “Vertical Alignment”. This may not sound like it could have any use at the moment but as you progress you will find this useful. I won’t go into detail but I guarantee you will use this at some point so it’s worth remembering that the example is here.
<H1 VALIGN=”top”>Test</H1> - This aligns the heading to the top of the page or table cell.
<H1 VALIGN=”bottom”>Test</H1> - This aligns the heading to the bottom of page or table cell.
Its now time for some Practical exercises.
Type the code below into a new notepad document:
<HTML>
<HEAD>
<TITLE>Text And Heading Alignment</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">This is centrally aligned</H1>
<BR>
<P ALIGN="left">This is a paragraph that is left-aligned to the page. The first letter of each line appears under the first letter of the previous line. You may have to add more text than this to see its actual effect. I you have high resolution your page can eat up a lot of letters before it has to go to a new line</P>
<P ALIGN="right">This is a paragraph that is right-aligned to the page. The Last Letter of each line appears under and level with the last letter of the previous line. You may have to add more text than this to see its actual effect. I you have high resolution your page can eat up a lot of letters before it has to go to a new line </P>
<P ALIGN="justify">This paragraph is justified to the page, which means
that the first and last letters of each line will appear under the first
And last letters of the previous line. We are putting a lot of text in this part as this paragraph needs to be relatively long to show the effects of a paragraph been justified if when you open this file all this text is on one or two line add more text until you have about 4 lines of text and you can see the effects. The weather is cold here today and I am getting very bored of writing sentences that don’t really make any sense and im tired so that makes it all the worse. Ok maybe that should do it I better go and see if it is long enough</P>
</BODY>
</HTML>
As you can see we have a little bit of everything we have learnt in here.
We have a heading that is aligned then a line space. We have Paragraphs that align in various ways and are closed off with the </P> closing tag.
Text Formatting
To finish off this section we are going to look at the different styles of text you can have and the different fonts you can use.
As in programs like Word you can make text Bold Italic or Underlined or even a combination, Bold Italic, Bold Underlined
This can be done by using the following tags
<I> Will give you italics <B> Will make the text bold <U> Will Underline the text
Remember you must turn the tags off when you no longer want the text Bold for example
<B>I want this part BOLD</B>I don’t want this part bold
You can try this by putting the above code into a test file or in one of the files you have already created and seeing the results.
Different Fonts
As you may be aware from using other programs such as word processors there are a variety of fonts available. HTML gives you the ability to choose what font you want by using the <FONT> tag. If you don’t specify a font in your code it will always default to whatever font is select in the browser options.
The <FONT> tag also allows you to specify a font size unlike the <H> tag you have a choice of 1-7. In the below example I have selected The font Papyrus and a size of 5.
<FONT FACE=”papyrus” SIZE=”5”>This is Papyrus Size 5</FONT>
This would give me the following:
This is papyrus Size 5
Try this out yourself and experiment with different font faces and sizes. ALWAYS remember to close off the font tag when you want to stop using the font.
Below is an exercise that will try to get you to use what you have learnt. Have fun and see what you can do…
Exercise
Create a Page that has a heading in the largest heading size possible about any subject you want Have a paragraph that is left Aligned that is about 3 lines long and is bold. Have 3 or 4 Line spaces Have another paragraph that is justified and is a different font and size to the first paragraph Have 3 or 4 more lines spaces Have a third and final paragraph. This paragraph again needs to be a different font and size to the first 2, this one should have the first sentence in italics the second sentence underlined and the third in bold. When you have finished save the file as mysecondpage.htm and view your hard work in your browser
That’s it for this section. Have a practice on your own and look over the examples again if you are still unsure. If you are feeling confident lets move on to section 3.
Developer of 7 years and founder of CA-Development - Web Design and web application design and development, aswell as bespoke software solutions and freelance work.
