Page 1 of 1

Guide to the Web and Design part III Fonts and Colors Rate Topic: -----

#1 capty99  Icon User is offline

  • i am colt mccoy
  • member icon

Reputation: 98
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Posted 03 October 2006 - 10:05 PM

HTML BASICS – Fonts/Colors

Disclaimer * CSS is a language we will talk about later that takes a lot of the formatting struggles out of html, it consolidates it into a much simpler project and has a lot more powerful capabilities than what I am going to show you. Nonetheless, it is important to know the basics to understand the new stuff.
First, lets change the background of the page, spice it up a little bit instead of that bland white.
To do this we are going to expand on the body tag that you already have on your site. Yes you can expand on these tags with attributes that help define the tag, anything within those brackets will remain part of the tags identity.
Alright... so
<body bgcolor=”white”>
, that is what your browser is interpreting the body tag as right now, so pretty much, we can just change the 'white' to any of the 8 basic colors and it will change the background.
<body bgcolor=”red”>
Try that on your page, should work with a bright red background. Simple huh? It really is, but say we want something a darker red than that, you cant say for instance “maroon” and expect the browser to know how to interpret it. So we turn to Hex Code, its a way of numbering colors so that the browser will see what your talking about. There are rather long definitions of why hex code is what it is, just go ahead and search google for an explanation, for our purposes just know that numbers represent colors. There are small software programs you can download to help you pick the exact color you want, or you can look at online lists, much like this :
http://www.htmlgoodi...cle.php/3478961
that do not have a ton of colors, but from which you can play with one close to the color you want and eventually find what you need.
So lets say
<body bgcolor=”#87CEFA”>
... there you are, you just throw a number sign in front of the digits and you have a light sky blue background.
Note that this bgcolor attribute can be used on tables, paragraphs and other basic tags you will use on your website.
Now lets check out the attributes for fonts, they are used in the same way and are also easy to use. So, you've got your text set up in a paragraph, lets change the first paragraph to a different font and color. Your going to not actually change the <p> tag but add a new <font> that will contain the text.
Example :
<font face=”verdana” color=”blue” size=”16”>

If you put that code in front of the text you want to change and then close the tag afterwards,
then your text will not be in times new roman, but instead in the font face verdana, the color will be blue and it will be size 16. You can leave out whatever attributes you do not want to change and the browser will just use its defaults. Remember you can also use hex code to change font color. Type faces are a little bit different, the only faces you will want to use are those that most computers have, otherwise, if you specify one type face to achieve an effect, if the computer that loads up your website does not have that font installed on it then your page will not come out as intended. Your normal fonts that MOST computers will have is arial, verdana, courier, courier new, georgia, times new roman, geneva and helvetica. This list is slightly outdated and there are probably a good number of fonts that also fit into the vast majority of computers, but if you stay with those you should be safe.

Other Useful Tags for Fonts :

<strong></strong>

Bolds your text[/code]

<em></em>

Emphasises (italicizes) your text

<center></center>

Centers your text

<p align=”left”> or <p align=”right”>

Actually an attribute of your paragraph container that specifies where to align your text
So, I have added a little bit of content, changed some colors, and this is what we got... don't grade me on my design here, I am setting it up like this to show you how it works, not to create a masterpiece.
<html>
<head>
<title> Personal About Page </title>
</head>
<body bgcolor="#3399FF"> <center><h1> Tyler Lee </h1></center>
<p> <center><font face="verdana" color="#FFCC00" size="4pt">The true story of the man of mystery.</font>
</center>
<p> Tyler was born in Dallas, Texas, the <em>greatest</em> city and state in the U.S.A.
</body>
</html>

This post has been edited by capty99: 04 October 2006 - 07:08 AM


Is This A Good Question/Topic? 1
  • +

Replies To: Guide to the Web and Design part III

#2 FiendKing04  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 10-August 08

Posted 24 December 2009 - 04:02 AM

Another nice part. Can't wait to move onto the next one!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1