Html Tutorial 2: Text Editing
July 6th 2006 01:03
Last lesson we constructed a simple web page and this time we are going to make it look a little neater and more presentable. We will start with a website as coded below. If you saved it last time then open it up again in your text editor. However, click save as and choose "lesson2.html" as a file name and choose save as type: "all files".
<html>
<head>
<title>Your title here</title>
</head>
<body>
your text here
</body>
</html>
The first thing we are going to do is add a heading. Html defines a number of headings for you, so by simple writing <h1>your heading here</h1> you will create a heading. These defined headings go from <h1>, which is the largest, to <h6>, which is the smallest.
However, it is also possible to manually edit the way text will appear. If you enclose the text in <b> tags (so <b>your text</b>
you will get bold text. Similarly, <i> delivers italic text.If you want to manually modify the way your text looks then you will need the <font> </font> tags. Within the font tag you can modify size (ie. <font size="3">
color (<font color = "red"> or the font you are using <font face="arial"> or all three. So if you wanted a red arial, size 4 font then you would write:<font size="3" color="red" face="arial">
And it should be noted that whatever you write in the font tag, you can still end it with just </font>.
It is also important to realise that Html uses different sizes to your word processor, with size 3 in Html being size 12 in your processor.
You can also align your text (position it where you want on the screen), by enclosing it in the <P Align ="right">text here</p> for right align, and <p align="left">text here</p> for left align. The tag <center>text here</center> centers the text.
Finally a paragraph can be enclosed in <p>paragraph here</p> tags, and if you want a line break without starting a new paragraph you just use the <br> tag, which you don't have to end.
So, below is a bit of example code, but you format whatever text you are using and then have a look at it to see how it's going.
<html>
<head>
<title>Your title here</title>
</head>
<body>
<h1>This is a big heading</h1>
<font face="arial" color="blue">This piece of writing is blue and in arial font</font>
<br>
<font color="red">But this piece of writing is red and uses the default font </font>
<h3>This is a smaller heading</h3>
<b><center><font size="5">But headings can also be done manually</b></center></font>
<p align="right">This is one paragraph enclosed with the paragraph tag and aligned to the right</P>
<p align="center">This is a new paragraph <br>, but this here is the same paragraph just separated by a line break. That is why it is all in the center.</p>
</body>
</html>
Well that is it for today. Hope it helped,
Adam
| 88 |
| Vote |
Shared on
Subscribe to this blog
