View Full Version : Wanna Learn Web Design?
Vodstok
10-24-2008, 04:52 AM
Here is a thread for those of you who might be interested in how web pages and websites go together. (Thank Nova for inspiring this) you can use notepad for editing/writing webpages, but it is a pain in the butt.
here are some editors to make life easier:
http://www.microsoft.com/express/vwd/
http://www.coffeecup.com/free-editor/
I personally like the Microsoft one, but it isnt for everyone. Plus it defaults to ASP .Net which is way more complicated than HTML (although I can teach that too if enough people ask).
Anyway, I will start with the basics. What i will be teaching is actually called XHTML, it is more anal than regular HTML, but it is clearer and opens way more doors for you if you ever intend to do this proffessionally.
here is the layout for a typical HTML page:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Think of this as a bare minimum. Pages will display just fine without this, but pretend they won't. everything that "does" stuff in HTML is called a tag. They are anything that starts with < and ends with >. In HTML, almost every tag has an opening and closing tag. There are exceptions, but we'll wait to get to them.
For straight HTML, the file needs to be named with .htm or .html. .html is old and unecessary, so i would stick with .htm. So if you cut and paste the above code into a text file and name it "index.htm", and save it, then open it in a browser, you see:
That's right, nothing. BUT, if you right click the page and look at the source (view source in IE), you see the tags above. Congrats, you just made a bare-bones web page.
Thats all for right now. I will cover regular, basic old XHTML, plus I will cover CSS (cascading style sheets) and maybe even some basic JavaScript.
I will leave this post with some words of advice: Copy and paste is your friend. If you see a bit of code that does something cool , but you dont want to get into how it works too deeply, just copy and paste. It isn't plagerism, welcome to the world of professional coding :D
The Mothman
10-24-2008, 05:13 AM
0010110110110!!! 00101101000011011?
:)
Vodstok
10-24-2008, 05:17 AM
0010110110110!!! 00101101000011011?
:)
Congradulations, you have out-geeked me. I have no idea what represents.
Although give me about 15 minutes and I will write a program that can read it :p
The Mothman
10-24-2008, 05:19 AM
You dont speak Binary!?
haha, neither do I.
ive dabbled in HTML before, but im far too stupid for it.
Vodstok
10-24-2008, 05:36 AM
You dont speak Binary!?
haha, neither do I.
ive dabbled in HTML before, but im far too stupid for it.
No one is too stupid for it. Does that make you feel better?
Just kidding. It isnt very hard, but it takes some time to get the hang of it, and if you dont have the patience, it can be a bear.
Part of the reason I am doing this here is that a lot of places that teach HTML dont have anywhere to ask questions of the person teching you, its just a static resource. I'm hoping this way people can ask questions, and it will be overall more usefull.
I am a programmer making a really good living these days because I took the time to learn HTML back in '99. I should make an infomercial "You can be just like me!" http://horror.com/forum/images/icons/icon14.gif
missmacabre
10-24-2008, 06:10 AM
Ooh yay. I may have some questions about tables before the weekend is over. I've got this tables assignment and I missed the class yesterday cause I had the flu.
I also have an html/css assignment that relies mainly on linking pages and images but I think I've got that covered.
Vodstok
10-24-2008, 06:42 AM
Ooh yay. I may have some questions about tables before the weekend is over. I've got this tables assignment and I missed the class yesterday cause I had the flu.
Just let me know what they are :)
Festered
10-24-2008, 06:55 AM
Nice thread. I'm starting to get the hang of html fairly well, but CSS is really throwing me, and a lot of newer sites are using it more. I keep hearing that html is getting phased out because it doesn't work equally on various browsers. True or false?
Doc Faustus
10-24-2008, 06:59 AM
I should really learn more about web design. My website blows.
Vodstok
10-24-2008, 07:04 AM
Nice thread. I'm starting to get the hang of html fairly well, but CSS is really throwing me, and a lot of newer sites are using it more. I keep hearing that html is getting phased out because it doesn't work equally on various browsers. True or false?
HTML isnt going anywhere. It is the basic framework that pretty much every website uses. Some use a combination of XSL/XML, but they are by no means the rule, and a wholesale change would be ridiculously messy. :) It would also invalidate site sthat have been around with little change for over a decade now, and the w3c (the poeple who set the rules for HTML and the general web-standards) is very big on beckwards compatibility.
So to answer your question, no, it isnt going anywhere. :D
the most complex languages and technoiogies out there for creating web sites (ASP .Net, Classic ASP, JSP, PHP, Coldfusion) all ultimately send HTML to the browser.
think of it this way: The various technologies you see are fast food restaurants. No matter what they do behind the scenes, ultimately you are getting a cheeseburger at every one of them. And HTML will be phased out around the same time cheeseburgers get phased out of fast food. Sorry if I am beating a dead horse, but I kept thinking of analogies ;)
I will definitely introduce CSS once I get the html basics in place, so keep your eyes peeled.
Festered
10-24-2008, 07:09 AM
I will definitely introduce CSS once I get the html basics in place, so keep your eyes peeled.
Consider this thread bookmarked! :cool:
Vodstok
10-24-2008, 07:41 AM
Okay, so now we have a boring white page. Cool. Now we want to actually show something in it. Lets break down what we have so far:
We have the outer HTML tags:
<html>
</html>
This tells the browser, “This is a web page”. It’s kind of like starting every sentence with “I’m speaking English”, its pretty unnecessary and will get ignored, but include them anyway.
Next, we have the head tags, which are holding the title tags:
<head>
<title></title>
</head>
The head holds lots of important things that will be explained later (especially when we get into CSS and JavaScript), but for now, we are only concerned with the title. What does it do? Notice how the top of your web browser says “Horror.com – Talk about horror” or something similar? That’s the title. That’s is what it does. Nothing else. But that is pretty cool, right? If you put something in the Title tags, it shows up in the title bar of the browser.
For the record, it will not display images or formatting, so you cant italicize the title or anything fun like that.
Finally, we have the body tags:
<body>
</body>
This is where “everything else” (otherwise known as “content”) goes. This is where every other tutorial in existence has you type in “Hello World!”. Not me though. Type in something else; anything else. Try cutting and pasting this into your HTML page:
<html>
<head>
<title>This is my kick-ass page title!!!</title>
</head>
<body>
My page has a hot body.
</body>
</html>
Yes, it’s very immature. Complain to someone who cares. Otherwise, enjoy my sparkling wit.
Vodstok
10-24-2008, 07:42 AM
Now for some notes:
If you are using one of the html editors I suggested, you may notice that rather than tags, you are getting gobbledygook. That is because some of them are too smart for their own good and capture the formatting from web pages when you copy and paste. To avoid this, copy and paste into notebook, then copy and paste that. Notebook is a “plain text” editor, so all formatting is stripped and only clean, pretty code is left.
I will also use this opportunity to share with you a little bit of “Best Practice”, basically the “right” or “Best” way to do things. As this is going to be XHTML rather than plain old HTML, there are some rules. Every tag must have a closing tag. So every <html> must have a </html>, every <head> must have a </head>, etc etc. There are “non enclosing” tags that seem to break this rule, but we will cover that later, and how they don’t really break the rule.
The last bit is this, pay attention to your nesting. Notice how the head and body are completely inside the <html> tags, and how the <title> tags are completely inside the <head>? This is very important. If you don’t, you end up with some batshit crazy looking page that will make you pull your hair out trying to figure out what the hell you did wrong. For a visual example:
GOOD:
<html>
<head>
<title>This is my kick-ass page title!!!</title>
</head>
<body>
My page has a hot body.
</body>
</html>
BAD:
<html><title>
<head>
This is my kick-ass page title!!!</title>
</head>
<body>
My page has a hot body.
</html></body>
Dropped on its head as a child, saves the day with the fat kid:
<title>
</ht
<heml> BA-BY RUTH!!!</title>
</head>
<bodad>
<hty>
HEY YOU GUYS!!!!
ml></body>
Festered
10-25-2008, 11:10 AM
So, when's the next installment. I knew this stuff already.
novakru
10-25-2008, 11:24 AM
Not so fast Festered
Some people here are in the back of the classroom.
I'm still on the first page...for the third time:o
Festered
10-25-2008, 12:09 PM
Not so fast Festered
Some people here are in the back of the classroom.
I'm still on the first page...for the third time:o
"Little brown eel comes out of the cave... Swims into the hole... Comes out of the hole... Goes back into the cave again... It's not too good is it Chief?"- Quint in Jaws
missmacabre
10-25-2008, 10:33 PM
Question: Why don't you have this bit at the beginning? We were told by the head of our department that you must have it at the beginning of a site.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
neverending
10-25-2008, 11:00 PM
Vodstock is teaching the very basics of html here, and your instructor is talking about XHTML- an updated and expanded version of html. You can read about the differences between html 4 and XHTML, and why you need that statement at the beginning of an XHTML document, here:
http://www.w3.org/TR/xhtml1/
If you're just going to use pretty basic htrml and some tricks here and there, you don't need to worry about DOCTYPE declarations.
Psycom5k
10-26-2008, 09:21 AM
01111001 01101111 01110101 00100000 01100111 01110101 01111001 01110011 00100000 01110011 01110101 01100011 01101011 00100000 01100001 01110100 00100000 01100010 01101001 01101110 01100001 01110010 01111001
missmacabre
10-26-2008, 09:31 AM
01111001 01101111 01110101 00100000 01100111 01110101 01111001 01110011 00100000 01110011 01110101 01100011 01101011 00100000 01100001 01110100 00100000 01100010 01101001 01101110 01100001 01110010 01111001
01000001 01101110 01111001 01101111 01101110 01100101 00100000 01100011 01100001 01101110 00100000 01100110 01101001 01101110 01100100 00100000 01100001 00100000 01100010 01101001 01101110 01100001 01110010 01111001 00100000 01110100 01110010 01100001 01101110 01110011 01101100 01100001 01110100 01101111 01110010 00101110
Psycom5k
10-26-2008, 09:33 AM
01000001 01101110 01111001 01101111 01101110 01100101 00100000 01100011 01100001 01101110 00100000 01100110 01101001 01101110 01100100 00100000 01100001 00100000 01100010 01101001 01101110 01100001 01110010 01111001 00100000 01110100 01110010 01100001 01101110 01110011 01101100 01100001 01110100 01101111 01110010 00101110
01011001 01100101 01110011 00100000 01110100 01101000 01100001 01110100 01110011 00100000 01110100 01110010 01110101 01100101 00100000 01100001 01101110 01100100 00100000 01100001 01101100 01101100 00101100 00100000 01100010 01110101 01110100 00100000 01001001 00100000 01110011 01110100 01101001 01101100 01101100 00100000 01110100 01101000 01101001 01101110 01101011 00100000 01110100 01101000 01100101 01111001 00100000 01110011 01110101 01100011 01101011 00100000 01100001 01110100 00100000 01101001 01110100 00101110 00100000 01000010 01111001 00100000 01110100 01101000 01100101 00100000 01110111 01100001 01111001 00101100 00100000 01110111 01101000 01100101 01101110 00100000 01100001 01110010 01100101 00100000 01110111 01100101 00100000 01100111 01100101 01110100 01110100 01101001 01101110 01100111 00100000 01101101 01100001 01110010 01110010 01101001 01100101 01100100 00111111
Festered
10-26-2008, 10:15 AM
Gee, it's nice to see that Vodstok's efforts aren't going to waste here. :)
Psycom5k
10-26-2008, 10:16 AM
Gee, it's nice to see that Vodstok's efforts aren't going to waste here. :)
I'm going to look at this seriously, just at a later point, I'm not in the mood to learn HTML at the moment.
missmacabre
10-26-2008, 10:41 AM
I take this shit seriously. There's a lot of stuff I'm gonna want to know but haven't yet learned in class because I learn faster and work ahead of the rest of the class. Plus I'm just curious about a lot of stuff. So I assure you I will be using Vod as a friendly, lovable resource.
Psycom5k
10-26-2008, 11:10 AM
I take this shit seriously. There's a lot of stuff I'm gonna want to know but haven't yet learned in class because I learn faster and work ahead of the rest of the class. Plus I'm just curious about a lot of stuff. So I assure you I will be using Vod as a friendly, lovable resource.
I wish you'd use me..... :o :D
missmacabre
10-26-2008, 11:18 AM
Help! I have a project due by midnight tonight. It's a 3 page website done in xhtml and css. There is a header and footer each 760 px in width. I've set margins for my paragraph and header tags so that the text lines up with the text on the header. My only problem is that I end up with this gap on the right side of the page that goes past the end of the header/footer.
http://i5.photobucket.com/albums/y177/perfectlylonely/help.jpg
body {background-color: #FCF8F1;
margin:10px;}
p {margin-left: 40px;
margin-right: 260px;
font-family: georgia, verdana;
font-size: 14px;
color: #0C1A2F;}
h2 {margin-left: 40px;
font-family: georgia, verdana;
color: #32507E;}
a {color: #0C1A2F;}
a:visited {color: 32507E;}
a:hover {color: #B3D1FE;}
a:active {color: #D9E8FE;}
img {margin: 10px;}
that's my css so far. Is there anything I can add to format nicer?
Vodstok
10-26-2008, 01:36 PM
Hmmmm.. Depends on what you want. if you want the image to appear to go all the way across, there are some tricks to pull. Alternately, you could have a nice consistent gap on both sides pretty easy.
Festered
10-26-2008, 01:41 PM
I go the lazy man's route. Recrop the pages in photoshop and just post the image. Course you'll probably get an F.
missmacabre
10-26-2008, 02:12 PM
Hmmmm.. Depends on what you want. if you want the image to appear to go all the way across, there are some tricks to pull. Alternately, you could have a nice consistent gap on both sides pretty easy.
How do I go about making the space even on both sides? Margins, padding? I've been working on this all day and am so out of patience.
EDIT: figured it out using left and right padding. Thanks for the help.
Ferox13
10-26-2008, 11:23 PM
i look forward to the css tips - i never got around to learning some..
Vodstok
10-27-2008, 03:41 AM
i look forward to the css tips - i never got around to learning some..
I will be putting together some more HTML (the actual tags that get used in the body), but I think due to popular demand I may go ahead and start a CSS thread too.
Vodstok
10-27-2008, 05:40 AM
Now we move on to the most basic tags. Most of the internet is made with these, and you can make just about anything with the, so long as you aren’t trying to do anything fancy or allow people to interact with the site (like submit forms and stuff like that, that is for the next one)
First, here is a very ugly html page with all the tags I will cover:
<html>
<head>
<title>The title is here</title>
</head>
<body>
<a href="Http://google.com">Anchor Tag</a><br />
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
<ul>
<li>this is an unordered list</li>
<li>this is an unordered list</li>
<li>this is an unordered list</li>
<li>this is an unordered list</li>
<li>this is an unordered list</li>
</ul>
<ol>
<li>this is an ordered list</li>
<li>this is an ordered list</li>
<li>this is an ordered list</li>
<li>this is an ordered list</li>
<li>this is an ordered list</li>
</ol>
<p>
Paragraph Tag</p>
Vodstok
10-27-2008, 05:41 AM
<tableborder="1">
<tr>
<td>Table Row 1 Table Cell 1
</td>
<td>Table Row 1 Table Cell 2
</td>
</tr>
<tr>
<td>Table Row 2 Table Cell 1
</td>
<td>Table Row 2 Table Cell 2
</td>
</tr>
<tr>
<td>Table Row 3 Table Cell 1
</td>
<td>Table Row 3 Table Cell 2
</td>
</tr>
</table>
<div>Div Tag</div>
</body>
</html>
The output of this page is hideous, but it gives you an idea of how these things work.
First is the anchor tag, which looks like this:
<ahref="Http://google.com">Anchor Tag</a>
This is a link in its simplest form. Notice for the first time we don’t just have an opening and closing tag, the anchor has href=Http://google.com (http://google.com/). This is called an Attribute, and they become very important, very quickly, especially once we step into CSS. In this case, the href attribute tells the browser where to go when the text contained in the tag is clicked. Notice if you cut and paste this page into an HTML file and open it in the browser, all you see id the words Anchor Tag in blue (if you have most browser’s default settings in place). If you click it, you are magically whisked away to google. The is WAY more to anchor tags, but we have to start small.
Notice right after the anchor is this:
<br/>
Vodstok
10-27-2008, 05:41 AM
This is a break tag, and it is the html equivalent of hitting the return key. Notice how it has /> at the end of it. This is XHTML at work. Regular old HTML allows you to just put <br>, but XHTML requires all tags to close. You could just as easily do this <br></br>, but it is ugly, and way easier to do it the other way. This is how XHTML handles 1 tag tags, just throw /> on the end of it.
Which brings us to the next tag:
<imgsrc="http://www.google.com/intl/en_ALL/images/logo.gif"/>
this is the Image tag. Aside from the anchor, it is probably the most used and important tag of the bunch. This is how you show, you guessed it, Images. Notice how it closes itself, just like the break tag. It also has an attribuite, just like the anchor. In this case it is “src”, or source. This tells the tag where to find the image it will display. Without getting into stuff we will be building on later, there isnt mouch more to this. You can also add the “alt” tag to set text to display when either the image is missing, or if the cursor is hovering over the image. It would look like this:
<imgalt="This picture comes from google."src="http://www.google.com/intl/en_ALL/images/logo.gif"/>
Next are order and unorderd lists:
<ul>
<li>this is an unordered list</li>
<li>this is an unordered list</li>
<li>this is an unordered list</li>
<li>this is an unordered list</li>
<li>this is an unordered list</li>
</ul>
<ol>
<li>this is an ordered list</li>
<li>this is an ordered list</li>
<li>this is an ordered list</li>
<li>this is an ordered list</li>
<li>this is an ordered list</li>
</ol>
if you look at your document in the browser, you can see the difference between the two. Both have to have the <li></li> tags inside for each item, these are, List Items. Hard concept, eh? They are pretty much self contained, as you can see. They automatically separate themselves from the surrounding tags, so no need to use
Vodstok
10-27-2008, 05:42 AM
break tags to start them on a new line, but you can if you want to add more space. They are generally used for creating outlines or a numbered list where the look is consistent.
Next up is the paragraph tag:
<p>Paragraph Tag</p>
This is very similar to <br />, except that it is used to wrap around text rather than just on the end of it, and works similar to double-spacing in a word document. Text in a <p> tag is padded and kept separate from the rest of the text in a document, and is generally a lot nicer looking than breaks. Take a look at scared yet and you’ll see that most of my formatting is done in these, because they look nice and are predictable. And I wrote the articles way before the use of Div tags became rampant. More on them in a bit.
Next is the red-headed stepchild of HTML formatting, the table. They look similar to this:
Vodstok
10-27-2008, 05:43 AM
<tableborder="1">
<tr>
<td>Table Row 1 Table Cell 1
</td>
<td>Table Row 1 Table Cell 2
</td>
<td>Table Row 1 Table Cell 3
</td>
</tr>
<tr>
<td>Table Row 2 Table Cell 1
</td>
<td>Table Row 2 Table Cell 2
</td>
<td>Table Row 2 Table Cell 3
</td>
</tr>
<tr>
<td>Table Row 3 Table Cell 1
</td>
<td>Table Row 3 Table Cell 2
</td>
<td>Table Row 3 Table Cell 13
</td>
</tr>
</table>
the border attribute was included so you could actually see the table in the browser. Display attributes like this are apparently evil and will bring about the end of the world if you use them sine CSS was introduced. As will the use of tables, apparently, so don’t. Except that they are the easiest way to format things in HTML, which is why they were used so extensively, even though that was never their intended purpose.
They were originally intended to be used for displaying things in a spreadsheet style table and that is it. However, developers learned that they could be styled in such a way as to provide a nice layout to an entire page.
Vodstok
10-27-2008, 05:44 AM
I wont bother to show you this, because if you ever intend to use HTML in a professional setting, you will get picked on and possibly not hired due to rampant “web 2.0” snobbery. So we’ll just cover the basics, because no matter how reviled tables are, they do a good job.
The entire table must be enclosed in <table></table>.
Now notice that inside the Table tags are 3 sets of <tr> tags. These are table rows. Pretty easy concept, each TR creates a row, or a vertically stacked horizontal space. Contained within each row are <td> tags, or table cells. Wait, what? “TD” means “Table Cell”? Don’t ask me, I just work here. I don’t get it either. Anyway, td tags create the horizontally aligned cells in each row of a table. Stick to the general layout in the example above, and you’ll be fine. Table tags need Tr tags which need TD tags, and vice versa. They can all be used without the others, but that is like trying to use a car engine and seats without the rest of the car; it may work, but not the way you expected. And it looks like shit.
Remember the web 2.0 snobbery I mentioned? Well, those douche bags are in hot steamy love with this tag:
<div>Div Tag</div>
The Div tag. It means Division. And in web design, it is Jesus, Muhammad and Buddha all rolled up into one tight little versatile tag that can format the living shit out of any document and, with the right use of CSS, cook you breakfast and perform oral sex on you.
Maybe just format, but that’s good, right?
Without any formatting, divs are basically paragraph tags with more letters. They behave a little differently in each browser type, but essentially, they hold text.
Once we move into CSS, though, they are like cold fusion. With whipped cream. And snobs love them.
Below is the entire doc unbroken so you can copy and paste it. Stupid forum post limits...
Vodstok
10-27-2008, 05:45 AM
<html>
<head>
<title>The title is here</title>
</head>
<body>
<ahref="Http://google.com">Anchor Tag</a><br/>
<imgsrc="http://www.google.com/intl/en_ALL/images/logo.gif"/>
<ul>
<li>this is an unordered list</li>
<li>this is an unordered list</li>
<li>this is an unordered list</li>
<li>this is an unordered list</li>
<li>this is an unordered list</li>
</ul>
<ol>
<li>this is an ordered list</li>
<li>this is an ordered list</li>
<li>this is an ordered list</li>
<li>this is an ordered list</li>
<li>this is an ordered list</li>
</ol>
<p>
Paragraph Tag</p>
<tableborder="1">
<tr>
<td>Table Row 1 Table Cell 1
</td>
<td>Table Row 1 Table Cell 2
</td>
</tr>
<tr>
<td>Table Row 2 Table Cell 1
</td>
<td>Table Row 2 Table Cell 2
</td>
</tr>
<tr>
<td>Table Row 3 Table Cell 1
</td>
<td>Table Row 3 Table Cell 2
</td>
</tr>
</table>
<div>Div Tag</div>
</body>
</html>
neverending
10-27-2008, 06:16 AM
I love tables. I love them so much my web design studies never went much beyond them.
Vodstok
10-27-2008, 06:24 AM
I love tables. I love them so much my web design studies never went much beyond them.
I have gotten away from them, basically because in the industry i work it is carreer suicide to not be up with the latest and greatest, but yeah. Tables work perfectly well, and the whole div thing is exactly what I called it: snobbery.
Some things are 10 times harder with divs and css, but thats what "the cool kids" use. And HR people and project managers who only know buzzwords are sticklers for them.
Vodstok
10-28-2008, 03:12 AM
BUMP.............:)
Festered
10-28-2008, 06:37 AM
I love tables. I love them so much my web design studies never went much beyond them.
Doesn't excessive use of tables on a website bring your Alexa ranking down? More apt to be glided over by search engines?
neverending
10-28-2008, 07:06 AM
Well, I don't know about that.....
http://www.google.com/search?hl=en&safe=off&q=halloween+radio+stations&btnG=Search
Festered
10-28-2008, 07:13 AM
Well, I don't know about that.....
http://www.google.com/search?hl=en&safe=off&q=halloween+radio+stations&btnG=Search
Actually, your ranking isn't too bad, just a bit over 3 mil(out of the few billion websites around). I'd post the link, but it has personal details in it.
neverending
10-28-2008, 07:17 AM
Seems irrelevant as long as people can find my site via search engines. I'll take a #1 listing in google any day.
Festered
10-28-2008, 07:22 AM
You're probably getting that #1 as a result of your Alexa. You're probably the best in the category of online radio that specializes in what you do(sorry, haven't got round to listening to it yet, I got a funky sound card in my pc).
Vodstok
10-28-2008, 07:41 AM
I have no idea about alexa, i havent done any search engine optimization in a long time. Tables are technically more "heavy" since they require more text in the document for formatting as opposed to the formatting being all held in a single css file, but as far as "better", i still think it comes to personall preference.
missmacabre
10-29-2008, 11:44 AM
Tables are gay. That is just my assumption, as I am having difficulties with them right now.
<head>
<title>Table 4</title>
<style type="text/css">
table {border: solid 1px #000;
width: 600px;}
</style>
</head>
<body>
<table border="1"
cellpadding="10">
<caption style= text-align:left;><span style= "font-family:comic sans MS; font-size:12pt;">The SIMS 2 Promotional Enclosure</span></caption>
<tr>
<thead><td colspan="2"><span style= "font-family:comic sans MS; font-weight: bold; font-size:18pt;"> Complete Your Expansion Pack Library</span></td></thead>
</tr>
<tfoot><tr>
<td colspan="2"><span style= "font-family:comic sans MS; font-size:10pt;">LATEST SIMS 2 EXPANSION PACK<br>Now your Sims can enjoy hobbies!<br>COMING 2008!</span></td>
</tr></tfoot>
<tbody><tr>
<td><span style="font-family:comic sans MS; font-weight:bold; font-size:14pt;">SIMS 2 University</span><br><span style="font-family:georgia; font-size:10pt;">Your Sims are taking over campus.</span></td>
<td><span style="font-family:comic sans MS; font-weight:bold; font-size:14pt;">SIMS 2 Open for Business</span><br><span style="font-family:georgia; font-size:10pt;">Get down to business with your Sims.</span></td>
</tr>
<tr>
<td><span style="font-family:comic sans MS; font-weight:bold; font-size:16pt;">SIMS 2 Pets</span><br><span style="font-family:georgia; font-size:10pt;">Create perfect pets for your Sims.</span></td>
<td><span style="font-family:comic sans MS; font-weight:bold; font-size:16pt;">SIMS 2 Seasons</span><br><span style="font-family:georgia;font-size:10pt;">Enjoy all four seasons with your Sims.</span></td>
</tr></tbody>
</table>
</body>
Okay so I have the cellpadding there, and have double and triple checked it to my text book, aswell as w3school and when I preview my table it shows no padding at all. I know I saved it and everything. Help?
neverending
10-29-2008, 11:52 AM
Your cellpadding is there. The cellpadding is the space INSIDE the cell between the text and the cell wall. None of your text extends as far as the cell wall so you can't tell the cellpadding is there.
missmacabre
10-30-2008, 08:39 AM
Your cellpadding is there. The cellpadding is the space INSIDE the cell between the text and the cell wall. None of your text extends as far as the cell wall so you can't tell the cellpadding is there.
Hmm okay, well the assignment we were given asked us to use cell padding to make it look as if there was a margin there essentially. I'll just leave it as is then since I did what was asked. Thanks NE.
neverending
10-30-2008, 08:56 AM
Take the borders off your tables- I think that may be what he's going for. That's what cellpadding is generally used for. Whan you have no borders on your tables, and there's no cellpadding, the text can bump right up next to the text in the next cell, but if you put cellpadding there, it will make a space between the 2 cells.
missmacabre
10-30-2008, 10:55 AM
I left the borders on because that was part of the assignment, but I set the cell padding to 20px which worked nicely. The next question asked us to remove the border, which I think looks so much better. So now I'm done that. Just have an essay worth 40% of my mark now haha
missmacabre
01-25-2009, 08:26 PM
anyone good at java? i understand all the logic but am having a hard time knowing where to start on my project.