Programming C, C++, Java, PHP, Ruby, Turing, VB
Computer Science Canada 
Programming C, C++, Java, PHP, Ruby, Turing, VB  

Username:   Password: 
 RegisterRegister   
 [Tutorial] Fun With Text
Index -> Graphics and Design, Web Design -> (X)HTML Tutorials
View previous topic Printable versionDownload TopicRate TopicSubscribe to this topicPrivate MessagesRefresh page View next topic
Author Message
ZeroPaladn




PostPosted: Wed Nov 02, 2005 11:35 am   Post subject: [Tutorial] Fun With Text

Having Fun with Fonts!

So you making your own webpage, hmm? Well, might as well make it look fancy by, you guessed it, having fun with the font and style of your test.

<P> Tag
This is also known as the paragraph tag, you should, but you dont have to, use it every time you add text to your webpage, keeps it neat. There are many add ons to this tag, which inclue...
FONT
ALIGN
COLOR (note the american spelling of the word)
SIZE
MARQUEE

FONT

This allows you to change your font at will, which is useful, since the default font is very plain. To change your font, all you need to do is add FONT FACE="whatever your font is" to your <P> tag.
code:
<P FONT FACE="arial"> text here </P>

There are many types of fonts, but i only know a few...
ARIAL (default)
BOOKMAN
COURIER
MODERN
and many more that i have yet to discover...

ALIGNMENT

Aligning your page can make of break a page, it makes it look either neat or cool, but for whatever reason it may be, its a good thing to have. Same thing as FONT, just add ALIGN="alignment" to the <P> tag.
code:
<P ALIGN="RIGHT"> text here </P>

There are 3 basic alignments...
RIGHT (default)
LEFT
MIDDLE

COLOR

YAY! COLOR! (note the american spelling) Color can give you page its own look, and sometimes the predefined colors arent enough. Simple, use RBG coloring system to make your own! It's not that hard, but is fusturating. The tag is used for this purpose, and you can with input the predefs, or make your own. The predefined colors are...
RED
ORANGE
YELLOW
GREEN
BLUE
VIOLET
CYAN
BLACK
WHITE
GREY
and a few others i cant remember...

MAking your own colors is done using the RBG Hexidecimal system, and kinda looks like this...
code:
<COLOR="ffffff"> text here </COLOR>

This is white, and ffffff is black. Mess around with it and your learn that its fun to make your own colors!

MARQUEE

Oh joy, what is this? It's called marquee, and it allows us to move the text around the screen! It uses the <MARQUEE> tag and has a lot of addons to it...
DIRECTION
BEHAVIOUR
LOOP (looks fammiliar anyone?)

DIRECTION
This chooses which way the test will go, its basically either left or right, and goes into the tag like so...
code:
<MARQUEE DIRECTION="direction"> text here </MARQUEE>


BEHAVIOUR
This lets you choose how the test will move, whether it will jsut go as normal, or will it bounce back and forth on the screen...
code:
<MARQUEE BEHAVIOUR="behaviour"> text here </MARQUEE>


LOOP
Simple, this determines how long it will go for, you can put a number, or you can put "infinite". Self explanatory.

That about covers it, thanks for reading guys. Now, lets start raking in the bits Laughing
Sponsor
Sponsor
Sponsor
sponsor
rdrake




PostPosted: Wed Nov 02, 2005 3:41 pm   Post subject: (No subject)

Here's the CSS way of changing colours on text.

The following is the HTML.
code:
<p class="coloured">This is going to be a different colour</p>
Now that we've assigned a class to the section of text, we need to use CSS to assign that particular section a colour. This is done with the following code
code:
p.coloured {
    color:  #ff0000;
}
This will colour the text that particular colour (I believe that one is red).

Don't forget to read this before using things like the marquee tag, particularly the section on accessibility.

Also, try to use the p tag as much as you can instead of using the font tag. The font tag is depreciated and it won't be supported in the future.
md




PostPosted: Wed Nov 02, 2005 4:18 pm   Post subject: Re: [Tutorial] Fun With Text

Quote:

FONT
ALIGN
COLOR (note the american spelling of the word)
SIZE

All of these attributes have been depreciated in favour of CSS, if your really going to make a web page at least try learning xhtml and CSS instead of old depreciated standards.

Quote:

MARQUEE

While this does work (firefox too I think), it's not standard AT ALL, so don't use it.

Also, xhtml is a subset of xml; so all tags should be lower case to be correct. If you want to see if yoru page is valid check out the w3c validator http://validator.w3.org. If your page doesn't pass this test then you can be sure that there are people who won't see it right. Plus, if you don't take the time to make sure your page is actually valid then what are the chances of your site even being worth visiting anyways?
beard0




PostPosted: Wed Nov 02, 2005 4:24 pm   Post subject: Re: [Tutorial] Fun With Text

Cornflake wrote:
If your page doesn't pass this test then you can be sure that there are people who won't see it right.


With I.E. being the most used browser still, no matter what you do people wont see it right. Validation does help however, and is generally a good idea.

Conforming to standards is not, however, my reason, nor the best reason, for using css. My reason is quite simply that it's a whole lot easier, to set up initially, and to change later.
ZeroPaladn




PostPosted: Thu Nov 03, 2005 9:30 am   Post subject: (No subject)

... at least i tried.
md




PostPosted: Thu Nov 03, 2005 10:33 am   Post subject: (No subject)

beard0 wrote:
Conforming to standards is not, however, my reason, nor the best reason, for using css. My reason is quite simply that it's a whole lot easier, to set up initially, and to change later.
Whatever your reasons at least your using CSS Very Happy

ZeroPaladn wrote:
... at least i tried.
Trying is the first step in learning, so it was a good idea Smile

**note, the link in my last post has been updated
codemage




PostPosted: Thu Nov 03, 2005 1:23 pm   Post subject: (No subject)

The validator (@ http://validator.w3.org) is an awesome resource. It's amazing how many professional and corporate pages fail miserably.

www.hotmail.com : 4 errors
www.forbes.com : 178 errors (won't even load in my lab here).
rdrake




PostPosted: Thu Nov 03, 2005 9:28 pm   Post subject: (No subject)

ZeroPaladn wrote:
... at least i tried.
We're just trying to point you in the right direction, not discourage you. Don't worry, we all started off where you are, just keep learning.
Sponsor
Sponsor
Sponsor
sponsor
ZeroPaladn




PostPosted: Fri Nov 04, 2005 10:57 am   Post subject: (No subject)

lolz, thanks shark. maybe ill look up XHTML at http://www.w3schools.com/ thats where i learnt my base HTML.
rdrake




PostPosted: Fri Nov 04, 2005 3:58 pm   Post subject: (No subject)

ZeroPaladn wrote:
maybe ill look up XHTML at http://www.w3schools.com/ thats where i learnt my base HTML.
Basically with XHTML there's a bit more strictness to the rules. Every tag must be closed (ie. no <br>, must be <br />) and quite a few of the old depreciated tags aren't included. The DOCTYPE declarations at the top are pretty similar to those of regular HTML, only at a different location. HTML works just as well for everything that I've ever needed, and it leaves a bit more to work with.
michaelp




PostPosted: Sun Aug 05, 2007 7:09 pm   Post subject: RE:[Tutorial] Fun With Text

I know this topic is 2 years old but, with the behaviour part of marquee, how do you make it bounce back and forth?
rdrake




PostPosted: Sun Aug 05, 2007 7:49 pm   Post subject: Re: RE:[Tutorial] Fun With Text

michaelp @ Sun Aug 05, 2007 7:09 pm wrote:
I know this topic is 2 years old but, with the behaviour part of marquee, how do you make it bounce back and forth?
As far as I know, there's no standard way of emulating the marquee tag without using the actual tag. Believe me, you're better off without it.
Display posts from previous:   
   Index -> Graphics and Design, Web Design -> (X)HTML Tutorials
View previous topic Tell A FriendPrintable versionDownload TopicRate TopicSubscribe to this topicPrivate MessagesRefresh page View next topic

Page 1 of 1  [ 12 Posts ]
Jump to:   


Style:  
Search: