   Lesson 3. Text on Your Page. This is the longest lesson in the tutorial series.
It's aim is to teach you about using text and then to use text to illustrate
the use of other tags. Although quite intense to follow compared to
the other lessons, once you have mastered this, many items only have
to be illustrated in different contexts in the subsequent lesson. Although
this is not "the usual way" we feel it makes for a more holistic
understanding of HTML <BODY
text="colour" link="colour" alink="colour"
vlink="colour" > Here is not the place to go in-depth into hexadecimal values and how
they work, for more information on hexadecimal colour codes we have
a Resource sheet and further information
can be sourced from our HTML
Resource Centre. 
To make sure that all browsers understand that you are specifying an RGB hexadecimal you should implement a # symbol. This is a requirement for some browsers but most don't require the use of it and will read the colour values with the # omitted. .Implementing this into our previous script. 
You should end up with something like this...... 
Use Save As to save this file as script2.html in the same directory as the first. <A HREF> Links. The <A HREF> is used to create hyperlinks from one Webpage to another. Links fall into one of two categories, internal links and external links. An internal link is a link to another page on your own website and an external link is one to a page somewhere else on the Internet. To create a link to another page on your site using a text link you first have to open the anchor link <A> provide some text and then close the anchor link </A> in the usual way. <A>A Text Link</A> But as with the <BODY> tag we have to specify an additional parameter. In this case the parameter we need to specify is the location of the new file that we're directing the viewer to using HREF .. <A HREF="location of next page">A Text Link</A> The actual content for the location of the linked page follows the same basic principles as the directory structure on your computer. After all, the Web-server which will be hosting your site is made up of basically the same bits as the machine you're sitting at now with a "root" directory and subdirectories off it. However, whereas a local directory structure consists of \ to define paths, the Web-server uses /. We shall use this simple directory structure as an example with your HTML files in the htmlfiles directory. On the server this would be the root directory. Your web address (e.g. http://users.egovision.org/yourname) is the Internet reference for this directory. 
Now save this as "script3.html". View this script using your browser as before and hopefully you will see this..... 
A Text Link will be blue. The link points to a file that doesn't exist yet so it can't turn green because it hasn't been visited. A Visited Text Link is Green Click this link and you will see this again 
You have linked from script3,html to script1.html. Hit the back button and if that link was blue when you loaded the page up it will now have turned green. You have visited this page. Heading text. Heading text is the simplest variation on text themes and is a basic variation in text size, intended to denote the relative importance of particular strings. Heading text has six sizes and works as a Closed tag raging from the biggest <H1> to the smallest <H6>. The Heading Text tag is used in the following way... <H1>Some H1 text</H1> <H2>Some H2 text</H2>........ ......... <H6>Some H6 text</H6> Add one for each of the tags 1 to 6 to your "script3.html" file and save it as "script4.html". 
This should be the result. You should notice two things, firstly the previously blue text link has now changed to green. We have edited script3 and created script4, which the link points to. Now that we have viewed (or visited) the destination for this link, which is actually the page in the viewer window, the link colour has changed to the visited link (VLINK) colour of green. Secondly, you should notice the fact that closing a <H > tag also causes a line break so that the next action takes place on the following line, like someone has pressed the "return" or "enter" key. Heading tags and many others besides do this automatically. If however you want things to run continuously along a line you need to use nested tags. Now, there's the right way and the wrong way of doing this. Nesting is putting one element inside another. The closing tag for the H1 instruction is causing the line break so to stop that happening before the next piece of text is displayed you have to put this piece inside the tag as well, like this....... THE RIGHT WAY <H1>Some H1 text <H2>Some H2 text</H2></H1> This is the right way, the tags are opened and then closed in the reverse order. Quick tip Try to explain it to yourself, if its easy to fully explain then its probably right. "There is text between the H2 tags, the H2 tags and some more text are between the H1 tags" THE WRONG WAY <H1>Some H1 text <H2>Some H2 text</H1></H2> This is the wrong way, the tags are opened and closed sequentially. "There are two lots of text between the H1 tags along with the opening H2 tag but only one piece of text is between the H2 tags along with the closing H1 tag." Confused? So are browser packages when faced with a whole page of these. To put it another way, DO NOT SPLIT TAGS UP. The <B> Tag. <B> </B> The <B> tag is another closed tag and is used in the same way as the heading text tags. It creates BOLD text, an example like this Will give this sort of result...... Other Text Tags. Here are some of the many other tags used in formatting text. <I>text</I> gives this effect <ADDRESS>text</ADDRESS> gives this effect <STRONG>text</STRONG> gives this effect (similar to <B>) <em>text</em> gives this effect (similar to <I>) <CENTER>text</CENTER> Notice the American spelling of centER. This will occur in several other tags, such as COLOR. The <FONT> Tag. <FONT attributes > Text </FONT> The <FONT> tag is a Closed tag with attributes which are entered in the Open tag, in much the same way as we did with the <BODY> tag. The FONT tag works around text in the same way as the other tags we have just looked at, and in many ways supercedes the TEXT="" attribute in the BODY tag. The attributes which you can assign are FACE=" " which sets the font name that you wish to display the text in. You can use the name of any font you like, but it is better to stick to the more common ones. If you specify a font that is not installed on a machine that is browsing your page then the browser will use the default settings (usually Times New Roman) instead. Its also quite a good idea to specify more than one so that you still have control of a second and third choice of font if these are needed. e.g. FACE="Arial, Helvetica, sans-serif" COLOR=" " which uses the same hexadecimal numbering for colours as the BODY tag. SIZE=" " which works confusingly the other way round to the Heading Tags. You can specify sizes 1-7 or use a relative figure e.g. SIZE="+1" or SIZE="-3". By way of an example, to write this word Text like this you need to specify that the text SIZE is 6, the colour is green and its in the Arial font like so.... <FONT FACE="Arial, Helvetica, sans-serif" SIZE ="6" COLOR="#00FF00" > Text </FONT> The <BR> and <HR>Tags These are both Open tags, that is to say they describe a specific one-off action and do not have a closing pair. There is no such tag as </HR> or </BR>. <BR> is a line break and is used as you would use the ENTER key to return a line of text. An example of how this is used.......... Some Text<BR>and some more on another line. Would look like......... Some text and some more on another line <HR> is a horizontal rule or line. You can specify its WIDTH in pixels or as a percentage of the available total width and height in pixels as a SIZE attribute. You can also specify its alignment LEFT RIGHT or CENTER. Some examples...... <HR WIDTH="100%"> <HR WIDTH="75%" ALIGN="CENTER"> <HR WIDTH="75%"ALIGN="LEFT"> <HR WIDTH="50%"ALIGN="LEFT"> <HR WIDTH="25%"ALIGN="LEFT"> <HR WIDTH="25%"ALIGN="LEFT" SIZE="9"> Formatted Text <P> Text </P> Other than using the <CENTER> tag to control the position of text on a page you can also use the Paragraph tag <P ALIGN=" "> This align can be LEFT, CENTER, or RIGHT and is used in this form.......... <P ALIGN="right"> Text </P> Special Characters Obviously as HTML tags use symbols like < > " and so forth, if you actually want to display those "Special Characters" in your HTML document (for example in this tutorial itself) you cannot use the same symbols in your content because there would be no distinction between the real HTML and the text that you wish to display. For this purpose the use of code to represent the symbols is necessary. As an example, if you wished to show a tag bracket < or "less than" symbol you would have to use the equivalent code of < and there is a numerical equivalent that gives the same result < notice the need for the # to denote a numerical value and the trailing ; For a full list of these codes we have a Resource sheet and further information can be sourced from our HTML Resource Centre. If you've followed the tutorials through from the start you should now have the necessary skills to be able to create a series of documents each with their own text styles and colours which all link to one another. Move on to the next lesson for Images On Your Page....  Click
Hereto download the example files used in this lesson.  |
|
 HTML Resource Centre Lesson 1 Getting Started
Structuring Your Page
Text on Your Page
Images and Backgrounds
Tables and Formatting
|