|
Text
Alright, so I couldn’t come up with something funny |
|
Introduction Text Links Images Backgrounds Tables Colors Utilities and other tips |
|
Working with text formatting.
First off, for those who didn’t know, text is just the words you see in the page. Anything written, meant for viewing, that’s text. If this news astounds you, then get ready for a real shock. You can customize the font, size, style, and color any way you wish. There are more advanced things you can do but we won’t get into those here. What you need to understand when messing around with text is that it can get kinda tricky and complicated. So much so where you’ll want to keep the modifications, the tags, on a line or lines all to themselves, then start the text on a new line, then close the tags on their own line as well. It’s not just about structuring what you see, but structuring what you can’t see. That makes it easy on you when you need to debug, or fix a mistake…or fifty… There’s a little something known among programmers called ‘whitespace’ (no, I’m not being raciest, that’s really what it’s called.) What whitespace is, is an area embedded in the text that contains no text at all, like a tab or multiple spaces or a new line. HTML deals with whitespace in a very straightforward manner….it doesn’t like it. To insert a new line or a tab, you must use a certain tag for each. The following table will give you a brief list of tags you can use to adjust text vertically and horizontally.
See the second section of this page for more details on text size.
There are a few others, but this should be enough for now. If you want more, you’ll have to either wait for the advanced tutorial (if there is going to be one) or look around the net for more info on it. The following link will be the first of many examples of how to use the tags shown and explained here. It is recommended you look through them so you know their usage…otherwise, well…yer probably just gonna feel really dumb trying to figure it out on your own if you don’t already have a good idea.
Things to remember about a few of these tags are as follows...<br> inserts a new line, just like hitting enter, it just drops you down one line and moves to wherever it’s been formatted to go, left, right, or center (via other tags). <p> starts a new paragraph block. This means it inserts two line breaks with a default alignment of text being left. It doesn’t require a close tag ( </p> ) but it’s always a good idea to close things that actually have the accompanying closure. <div> is similar to <p> but it doesn’t insert two line breaks, only one. Again, the closing tag ( </div> ) isn’t required but it may help prevent errors down the road. The tags <big> and <small> basically work against one another. You could replace </big> with <small> if you wanted but that could get confusing if you have a lot of them. There is more on resizing text in the second portion of this page. If you are going to increase or decrease text by more than one increment, it’s recommended that you use the <font> tag. Alright, now that you have a basic knowledge on text layout, time to move onto formatting. This is done with the <font> tag. Here’s where it gets tricky. You’ve got a few ‘attributes’ (different things you can edit with it) that you can fiddle around with, make your text do all kinds of funky things. You have to be careful though, you have to close your font tag when you’re done. Remember what we went over in the introduction? It looks like this... </font>. That will keep whatever modifications you made earlier from bleeding over into text you don’t want to be altered. There are other things that will stop the font tag, but it’s really just better if you use the closing tag, keeps you from having foul ups and bad stuffs like that there.
Here you can see the various attributes you can use when working with the <font> tag. Keep in mind you can put in more than one attribute but if you leave one out, it will revert to the default value of that attribute. Only put in attributes you want to change…saves space and prevents confusion
Again, I have coded a few examples for you, please take note of the usage of each tag…I’ve made it easy for you, you can just copy and paste what you need…just be sure to change the values/attributes as needed…you little plagiarists… As you can tell, there’s a little more here that you have to mess with. Now you have attributes which are embedded in the tag itself. All they are are details, making your coding more specific. You see that <p> has a few extra things to it, namely text alignment. It’s another form of layout is all. You simply add in the attribute and the value you want and it will be applied to all text it outputs until it either sees </p>, the beginning of another paragraph block, or the end of the block of text (which could be from a number of things, like the end of a table, or the end of the document for example.) It’s recommended you use the closure tag but it isn’t required…just use trial and error to figure out how you want it and how to get it to work. Another new tag is <font>. This is much more versatile than the others (at least with how much you’ve learned thus far.) <font> is used when you want to format text like you would in a word processor. It’s used to alter color, size, font style, and a whole slew of other things. We’ll only focus on those first three since they alone are enough to fill a few pages if you go through everything with them.
Color There is a whole section of this tutorial devoted to colors, as well there should be, we all know how many there are in the world. The problem with HTML is it only recognizes 256 colors…well…so it’s not THAT big of a problem…but it is a limit. There are a few ways you can alter color via the font tag, we’ll only go over the simplest one here and let the color section serve its purpose. To change a font color, insert the following tag at the START of where you want the color change to begin. DO NOT FORGET TO CLOSE IT!!! Otherwise, your color or other formatting will bleed through to text you didn’t want affected. It’s as simple as tacking on a </font>. For actually selecting a color, you can see the page on this topic to see the other ways to do it, but for now, just put in the keyword for the color you want. There are a number of keywords that HTML recognizes as colors and they are listed below.
Face Put simply, ‘face’ means what kind of font you’ll be using. Keep mind, every computer has a list of fonts available but not everyone has the same list. There are a few fonts that everyone shares. If you want to change your font, be sure it’s a font everyone who will be viewing it has. Again, like with color…DO NOT FORGET TO CLOSE IT!!! I can’t stress this enough. If you don’t close your font tags, you’ll end up making what you wanted to highlight the start of a mass of highlighted text and what you wanted pointed out will be lost in the sea you created. Size This is one of the stranger attributes of <font>. It can be done a number of ways so I advise you pick one you think you’d be most comfortable with and stick with it. Consistancy will save you LOTS of trouble in the long run. Here they are for your selecting pleasure…
And those are the basics when working with <font>. There are more advanced methods such as using cascading style sheets (which took me FOREVER AND A DAY to figure out…but once I got it down, I started using them all the time) which are good for multiple page sites that share the same formats, layouts, and styles. If you’re doing just one page, you might not want to try this. A tutorial on cascading style sheets can be found here on echoecho.com. Below are two example blocks of HTML coding that relate to the earlier instructions. The following tables are set up to display first, an example of what the tags explained do, and second, the coding used to create that example.
|