Question:

What is wrong with this html coding?

by | earlier

<b><u><font color="#FF9900"><font size="7"><style> body {font-family = century gothic} </style> Hi and welcome to my site</font></font></u></b>

I want it to be bold underlined orange size 7 and in century gothic font and how do i correct it?

Sorry i am just learning html as i am bored in the hols.

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

5 ANSWERS

Sort By: Date | Rating

David is right.  Your total approach is very 1990s.  We do it very differently now.  The best way to do this now is with CSS.  You do it by putting only very minimal code in the HTML, like this:

<style id = "greeting">

Hi and welcome to my site

</style>

You then put all the instructions for how the code should look in your heading, in a special area called a style sheet. It would look something like this:

<style type = "text/css">

.greeting {

  font-weight: bold;

  text-decoration: underlined;

  font-color: #FF9900;

  font-size: 1em;

  font-family: "century gothic", fantasy;

}

</style>

This separates the display commands from the content of the site. CSS is also much more flexible and powerful than the older HTML commands.

Here's a few more thoughts on the style:

o You should really avoid underlining, because users will think the text is a link.

o Font size 7 is the default size, which is not very useful.  In CSS font size is best measured in percentages of standard size or in ems (the width of a capital M of the current font)

o There's no way to guarantee that a particular font will display because it may not be present on the user's computer. Be sure to include at least one default font.

See examples from my book at

http://www.aharrisbooks.net/xfd
Report (0) (0) |   earlier
You should add some quotes in the century gothic, so it should be "century gothic"

They should be like this :

<b><u><font color="#FF9900"><font size="7"><style> body {font-family = "century gothic"} </style> Hi and welcome to my site</font></font></u></b>

Without quotes, Century Gothic will be treated as century.

Hope this help.

HSP
Report (0) (0) | earlier
The b element is presentational and should not be used. Use CSS instead.

The u element is presentational, makes things that are not links look like links, and should not be used. Don't underline things that are not links.

The font element is presentational, deprecated and should not be used. Use CSS instead.

The style element is forbidden inside font elements, it may only appear as a child element of the head element.

The type attribute is not optional for style elements

CSS property / value pairs are linked with colons, not equals signs.

Font names containing white space (such as a regular space) should be surrounded with quote marks.
Report (0) (0) | earlier
David is absolutely correct and here's what he means:

1. Don't use <b>. Rather, use font-wieght: bold; inside your <style> element.

2. Refrane from underlining things unless they're a hyperlink, so don't use <u> here.

3. <font> is dead. It should no longer be used as part of any web page.

4. <style> has to go between the <head> element and should not appear anywhere else in a web page.

Example: <head><style type="text/css">'your CSS goes here'</style></head>

5. <style> has a required attribute called "type" and the value here should be "text/css", so your <style> tag should look like:

<style type="text/css">'your CSS goes here'</style>

6. CSS properties/values are what go inside your <style> element. You seperate the two with a colon. They should look like:

<style type="text/css">

font-family: "Century Gothic";

</style>

(Notice the use of the colon instead of an equal sign between the CSS property font-family and it's value "Century Gothic" ).

7. If you're using a font name that contains spaces such as Century Gothic, you must surround it with quotation marks.

Example: font-family: "Century Gothic";

By the way, CSS stands for Cascading Style Sheets. CSS is used to style your HTML document. That is, the presentation of your document, how your document looks.

----------------------------

The markup you posted above is invalid. I've pasted, below, the valid HTML you're looking for. Copy, paste and save this as an HTML file and then take a look. You should validate your web pages before posting them online. You can do this at http://validator.w3.org.

You may be wondering why the invalid markup still works as you expect it to when you view your web page. Well, that's because web browsers are terribly friendly and they try to guess at what you're trying to do when they come across invalid markup. Sometimes they get it right and your page looks fine and sometimes they don't and your page looks a total mess!

Take a look at http://www.w3schools.com. It's an excellent resource for learning *valid* HTML/XHTML, CSS, and tons more.

Hope this helps!

----------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-...

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>HTML Help</title>

<style type="text/css">

body {

font-family: "Century Gothic";

font-size: 7pt;

font-weight: bold;

color: #FF9900;

}

</style>

</head>

<body>

Hi and welcome to my site

</body>

</html>
Report (0) (0) | earlier
Download SeaMonkey for free and use Composer, the Website building tool - (Window > Composer or Pencil icon at bottom).

As well as the HTML view, it has a WYSIWYG tool too (what you see is what you get) so you can see instantly the font you want. It is as easy to use as Word.
Report (0) (0) | earlier