• Hey all, due to some issues with false DMCA takedown requests, we've had to remove and censor a few things until the situation is resolved. Sorry for any inconvenience.
  • Be sure to join the discussion on our discord at: Discord.gg/serebii
  • If you're still waiting for the e-mail, be sure to check your junk/spam e-mail folders

HTML coding help

L

Lugia81

Lugia Master
I'm writing a website from scratch and am using HTML to code it.I am having trouble with aligning a header and changing the font,eather one of the other doesn't work<and thats after working on just changing to alignment because 5 different ways were givin.>
Here's the code:
Code: 
<h2 style="text-align:center;font-family:TrebuchetMS;">
Welcome To The <u><i>SR-71's</i></u> Offcial Clan Homepage.<!--Error,text font won't display!-->
</style>
Please repair the code and tell me what exactly was wrong.
 
There's a bunch of things wrong with your implementation:

1. The font "TrebuchetMS" does not exist. Instead, it's named "Trebuchet MS". Yes, that space is important. When attaching a font that includes a space in it's name, enclose the name of the font in double-quotes ("").
2.You do not need a < /style> closing bracket for an inline css statement, unless you are declaring it in the format of the following, at the beginning of the file:

Code: 
<style type="text/css">
h 
{
blah
blah
}
h2
{
blah
blah
}
</style>

instead you should simply close the < h2> element with a < /h2> (the fact that this was missing is actually another problem as well).
3. Avoid inline CSS. It's hard to read through and fix problems, it's always better to write your CSS in a seperate file and link to it. Example:

index.html:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>CSS Example</title>
	<link rel="stylesheet" type="text/css" href="test.css" />
<h2>
Welcome To The <u><i>SR-71's</i></u> Offcial Clan Homepage.
</h2>
</head>
</html>

style.css:

Code: 
h2 {
text-align: center;
font-family: "Trebuchet MS";
}


It's also worth mentioning that "Trebuchet MS" looks almost exactly like "Times New Roman", the default font in most applications (aside from Arial, which also resembles Trebuchet). There's not much point in specifying it as a font, as it's bound to just cause platform issues, with little visual gain.

P.S I didn't include a simple "fixed" version of your code, as you'll learn better if you read through my explanations and think about them. If you have trouble understanding, just ask, I'll explain in more detail. If I were to simply post a fixed version, you'd just copy-paste it and never really learn from your mistakes.
 
GetOutOfBox said:
There's a bunch of things wrong with your implementation:

1. The font "TrebuchetMS" does not exist. Instead, it's named "Trebuchet MS". Yes, that space is important. When attaching a font that includes a space in it's name, enclose the name of the font in double-quotes ("").
2.You do not need a < /style> closing bracket for an inline css statement, unless you are declaring it in the format of the following, at the beginning of the file:

Code: 
<style type="text/css">
h 
{
blah
blah
}
h2
{
blah
blah
}
</style>

instead you should simply close the < h2> element with a < /h2> (the fact that this was missing is actually another problem as well).
3. Avoid inline CSS. It's hard to read through and fix problems, it's always better to write your CSS in a seperate file and link to it. Example:

index.html:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" type="text/css" href="test.css" />
<h2>
Welcome To The <u><i>SR-71's</i></u> Offcial Clan Homepage.
</h2>
</head>
</html>

style.css:

Code: 
h2 {
text-align: center;
font-family: "Trebuchet MS";
}


It's also worth mentioning that "Trebuchet MS" looks almost exactly like "Times New Roman", the default font in most applications (aside from Arial, which also resembles Trebuchet). There's not much point in specifying it as a font, as it's bound to just cause platform issues, with little visual gain.

P.S I didn't include a simple "fixed" version of your code, as you'll learn better if you read through my explanations and think about them. If you have trouble understanding, just ask, I'll explain in more detail. If I were to simply post a fixed version, you'd just copy-paste it and never really learn from your mistakes.
Click to expand...

I highly aprechiat your help,I didn't want to resort to Cascading style sheets because I'm just now learning the procese of it all although I am somewhat familiar with HTML and XHTML(pretty much the same thing)
I had been using an online source to learn HTML about 6-12 months ago.I also have a book I'm using to help me with CSS,which is a little complicated to me.But yet again thank you for the help I will look through and study my mistakes and what you have said.The reason there are so many mistakes is because I have been twiking the code so much that I probable broke half the HTML coding rules,and I really am just an amature.


P.S.Hope it's ok if I ask you some more HTML/CSS questions and problems as they occur.(And sorry for the craptastic spelling.)
 
Last edited:
Lugia81 said:
I highly aprechiat your help,I didn't want to resort to Cascading style sheets because I'm just now learning the procese of it all although I am somewhat familiar with HTML and XHTML(pretty much the same thing)
I had been using an online source to learn HTML about 6-12 months ago.I also have a book I'm using to help me with CSS,which is a little complicated to me.But yet again thank you for the help I will look through and study my mistakes and what you have said.The reason there are so many mistakes is because I have been twiking the code so much that I probable broke half the HTML coding rules,and I really am just an amature.


P.S.Hope it's ok if I ask you some more HTML/CSS questions and problems as they occur.(And sorry for the craptastic spelling.)
Click to expand...

Don't worry to much about pristine code, most browsers can interpret even terribly coded pages. For example, the Microsoft fails to pass the W3C HTML Standards Compliance test on their main website, with 5 errors and 1 warning, Amazon's website fails the test with 534 errors, and 122 warnings. Of course, having perfect code is ideal, but don't get to obsessed with it, as long as the website functions in major browsers (the ones to check for are: iPhone Safari, Firefox, Internet Explorer, Google Chrome, and Mac Safari) there's no point in worrying too much.

What you originally used is CSS, it's just what's called inline CSS, meaning it's integrated into the HTML document. A seperate stylesheet pretty much follows the same syntax, except you don't use HTML tags. For example, to apply certain CSS attributes to an external HTML tag, you'd do something like:

Code: 
h {
blah
blah
blah
}

If you wanted to apply CSS properties to a certain section of an HTML element, or to something other than the standard "h", "h2", etc, elements, you would enclose the section you wanted formatted in "div" tags inside the HTML document, and then reference said tags with a hash symbol (#) followed by the id of the div tag.

For example:

HTML Doc:
Code: 
<h2>
LOLOLOLOLOLOLOLOL
<div id="lol">
Trolololololo
</div>
</h2>

CSS Sheet:
Code: 
#lol {
font-family: arial;
}

A good website to learn HTML/CSS is "HTML Dog". It's important to use a good website, since many of the popular ones like "W3 Schools" are notorious for incorrect examples or downright incorrect lessons.

Feel free to PM me if you have any questions at any time, I absolutely don't mind answering them if I can.
 
GetOutOfBox said:
A good website to learn HTML/CSS is "HTML Dog". It's important to use a good website, since many of the popular ones like "W3 Schools" are notorious for incorrect examples or downright incorrect lessons.

Feel free to PM me if you have any questions at any time, I absolutely don't mind answering them if I can.
Click to expand...

Ops...I used W3 Schools! Thats what I'm talking about though,all these sites giving different ways to say the same thing.But I do think I'm going to try avoiding CSS for atleast alittle bit...Because it's still so confusing!

How do I center an image with out the old <center> tags?
 
Last edited:
Lugia81 said:
Ops...I used W3 Schools! Thats what I'm talking about though,all these sites giving different ways to say the same thing.But I do think I'm going to try avoiding CSS for atleast alittle bit...Because it's still so confusing!

How do I center an image with out the old <center> tags?
Click to expand...

I advise against using W3 Schools, they have a bad name in the website coder community. They not only impersonate the real W3 organization (manager of HTML standards), their tutorials are filled with mistakes and improper usages. The website HTML Dog, which I provided a link to in an earlier post, is a much better and well respected source for tutorials.
 
Ok,I didn't know they had a bad name...Thanks for leting me know.I already added HTMLdog to my favs.But how do you center an image?I'll look at HTMLdog and see if it tells me.HTMLdog doesn't say how to center an image. :(
Nevermind I will just use <center> tags.
 
Last edited:
You must log in or register to reply here.
Back
Top