...
PDA

HTML Coding Help! Please!

Memnto02
06-03-2012, 11:24 PM
Hi I'm obviously brand new. I'm trying to create this webpage with HTML and I have it completed but for whatever reason the color is not showing up properly. I used text edit on my Mac. I don't know if the makes a difference. I also couldn't get the fonts to show up properly which is why I only stuck to comic sans and cursive (those were the only ones that would work). If anyone could help me get the color right that would be awesome! I have no idea why it runs together or why they show up all weird. I'm completely new to using HTML...I just self taught today. Hehehe. Thanks to anyone willing to help!

<html>
<head><title>Juan's First Webpage</title>
</head>
<body>
<p align = center>
<font size=7 color=red>
All About Juan
</font></p>
<p align=left>
<table border=1>
<tr>
<th colspan="2">Fun Facts</th>
</tr>
<tr>
<td>I work for Archstone in Rancho Santa Margarita</td>
<td rowspan="4" align="center">
<img src="http://www.connemaraterrier.com/NutsBolts/raisingourpuppies_files/dsc_2059-2.jpg" />
</td>
</tr>
<tr>
<td>I recently bought my first home in Santa Ana</td>
</tr>
<tr>
<td>I was born in Mexico</td>
</tr>
<tr>
<td>I own a Jack Russell Terrier</td>
</tr>
</table></p>
<p align=left>
<font size=20 color=blue font face="ariel">
My Hobbies...
</font>
<ul><font size=5 color=gold font face="comic sans ms"</font><li>Yoga</li>
<font size=5 color=lime green font face="cursive"</font><li>Dancing</li>
<font size=5 color=cyan font face="comic sans ms"</font><li>Playing video games</li>
<font size=5 color=purple font face="cursive"</font><li>Travel</li>
</ul></font></p>
<p align=left>
<font size=20 color=blue font face="ariel">
My Favorite Websites...
</font>
<ol><font color=black</font><li><a href="https://www.facebook.com/"><font color=black</font>More about me</a></li>
<font color=pink</font><li><a href="https://www.bankofamerica.com/"><font color=pink</font>Always have to check my finances</a></li>
<font color=black</font><li><a href="http://www.bestbuy.com/"><font color=black</font>I love electronics</a></li>
<font color=pink</font><li><a href="http://www.vevo.com/"><font color=pink</font>Music videos make me dance</a></li>
<font color=black</font><li><a href="http://www.youtube.com/"><font color=black</font>Whenever I need a good laugh</a></li>
</ol></font></p>
<h1>Website Feedback Form</h1>
<p>
Please fill out this form to let me know what you think about the website so that I can improve it and make it a better experiences for you and future visitors.
</p>
<form method="post" action="">
<!--insert a textbox to gather information about the user-->
<p><label>Full Name:
<input name="fullname" type="text" size="40"/>
</label></p>
<p><label>E-mail:
<input name="email" type="text" size="25"/>
</label></p>
<p><strong><em>What is your age?</em></strong></p>
<!-- radio buttons, user can only select one -->
<p>
<label>Less than 20<input name="interest" type="radio" value="less than 20" checked="checked"/>
</label>
<label>20-40<input name="interest" type="radio" value="20-40"/>
</label>
<label>40 or older<input name="interest" type="radio" value="40 or older"/>
</label>
</p>
<p><strong><em>Check off all of the colors that you liked:</em></strong></p>
<!-- insert checkboxes for the user to check off what he or she likes -->
<p>
<label><font color=red</font>Red<input name="likes" type="checkbox" value="red"/>
</label>
<label><font color=lime green</font>Blue<input name="likes" type="checkbox" value="blue"/>
</label>
<label><font color=gold</font>Gold<input name="likes" type="checkbox" value="gold"/>
</label>
<label><font color=cyan</font>Cyan<input name="likes" type="checkbox" value="cyan"/>
</label>
<label><font color=purple</font>purple<input name="likes" type="checkbox" value="purple"/>
</label></p>
<p><strong><em>Please give us any additional feedback that you may have.</em></strong></p>
<!-- user can enter in multiple lines of information in a textarea -->
<p>
<label>Comments: <br><textarea name = "comments" rows = "4" cols = "40"></textarea>
</label>
</p>
<p>
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Reset" />
</p>
</form>
</html>
Lerura
06-04-2012, 01:39 AM
wrong! in many ways!

1) <font> is a long time deprecated tag. (13 Years)
along with a lot of attributes that have been deprecated for just as long.
nowadays it's equivalent is <span style="color:blue"></span>

2) You have not ended the opening <font> tag.
Thus the rest of the document is wrongly affected by that color change.

3) a properly written <font> tag will only affect the text between the opening and the closing tag. You have placed the text that should be affected, after the closing tag.

4) the <font> is only valid up to html4.0, but at the same time, you are closing your <input> with the xHtml singleton-tag closing character "/"
So you are using a mixture of to incompatible versions.

5) you have no doctype and no closing body tag.

Slightly out of topic: when you are posting some code in your posts, then please enclose it by using the # above the editor's text field.
Memnto02
06-04-2012, 02:23 AM
Can you give me examples of where you are talking about the different sections? I have been looking at this all day that I don't even see what you're talking about. Thanks.
Lerura
06-04-2012, 03:53 AM
example:<a href="http://www.youtube.com/"><font color=black</font>Whenever I need a good laugh</a>

<font color=black</font> is seen by the browser as a opening tag only.
it understands color=black but not </font, which it discards. As there from the browser POV is no closing tag, the color is applied for the rest of the document, or until an alike tag is met.

And the text you want to apply it to would be placed outside the font tag, if it had been written properly.
The right way to use the font tag was:
<a href="http://www.youtube.com/"><font color=black>Whenever I need a good laugh</font></a>

but since the font tag, - and the color attribute, is deprecated, this should now be:
<a href="http://www.youtube.com/"><span style="color:black">Whenever I need a good laugh</span></a>

<input name="interest" type="radio" value="40 or older"/>The / is the way singleton tags (tags that do not have a closing tag, such as <br> <img> <input> <hr> ) is closed in xHtml.
-----
a doctype must be inserted to tell the browser which version the document is written in.
Then it renders the content acording to the rules that are defined for the version.
The two most recommended doctypes is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> and <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
which must be the very first in the document.

the span way of styling is required for both doctypes and the / is only valid in xHTML
---
and your don't have any </body> which must be placed right before </html>.

You can of course also code in earlier vesions of Html, which your basically is, which do not require a doctype.

But bear in mind that there is alot of thing that you can't do then, which you will been able to if you use one of the recommended version.
-----
And then the are HTML5. The newest version, which though still not a final version. But it still requires that you use the right tags, attributes etc. And that you write it properly.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum