Class - Learn Web Design ( Part 1 )

[hobo218]

Ok, here's mine.
I pretty much just did the basics of you were looking instead of putting other things in since I was somewhat rushed for time.
Also, I considered black a color and I have my image as the background...


Oh, and next time don't make us do so many different colored fonts. Makes the page look kinda ugly...


[EDIT]
Just did a slight update to my page. The updated version is now attached.

 

[Tonks]

Count me out. I don't have enough time, as it turns out.

 

[New_U.S.]

Here my version, it doesn't follow your rules to well, but it uses the same ideas. It a bad 'About me' For Jigsaw

 

[pheonixashes]

Ok, here are a couple things I don't exactly understand:

I get how to fill in the rows of the data with the tables, but how do you fill in the columns? I know you denote them with <td>, but how do you format it so you know which column matches with which row, etc?

If I just type text, it will show up as text right? Nevermind, I got it.

And finally, apparently the table doesn't show too well...

EDIT: Nevermind, I viewed the online lessons and I figured it out.

 

[DDRtists]

Guys, I'll help you out later.

My girlfriend of 1 1/2 years just broke up with me, so I'm really not in a stable mood to help with coding. I'm sorry.

The class will continue, but I will be a bit slow on replsy.

 

[Mr Zero]

Hmm... I dont get it with the table.
Row is sideways while columns goes downwards, right?
While you are write it like it was backwards...

Anyway:

<table>
<tr>
<td>Color</td>
<td>Name</td>
<td>Hex Code</td>
</tr>
<tr>
<td><img src="http://img341.imageshack.us/img341/6044/unavngivetgr6.png"/></td>
<td><FONT COLOR="#FF0000">Red</FONT></td>
<td>#FF0000</td>
</tr>
<tr>
<td><img src="http://img150.imageshack.us/img150/1342/unavngivetwa5.png"/></td>
<td><FONT COLOR="#0000FF">Blue</FONT></td>
<td>#0000FF</td>
</tr>
<tr>
<td><img src="http://img262.imageshack.us/img262/3347/unavngivetgu1.png"/></td>
<td><FONT COLOR="#800080">Purple</FONT></td>
<td>#800080</td>
</tr>
<tr>
<td><img src="http://img295.imageshack.us/img295/3423/unavngivethd4.png"/></td>
<td><FONT COLOR="#00FF00">Green</FONT></td>
<td>#00FF00</td>
</tr>
</table>

Simple ...

 

[DDRtists]

Oh wow, I did.

Good job, though.

 

[IKilledKEnny]

<table>
<tr>
<td>What is you name?</td>
<td>Favorite color?</td>
<td>Hobbies?</td>
</tr>
<tr>
<td><img src="http://www.adamtierney.com/CG/blah.gif"/></td>
<td><FONT COLOR="#FFcc00">Blizzard's Yellow</FONT></td>
</tr>
<tr>
<td><img src="http://img150.imageshack.us/img150/1342/unavngivetwa5.png"/></td>
<td><FONT COLOR="#0000FF">Blue</FONT></td>
<td>#0000FF</td>
</tr>
<tr>
<td><img src="http://blah.de/bilder/blah-postkarte-vorderseite.jpg"/></td>
<td><FONT COLOR="#0cfcba">Random color</FONT></td>
</tr>
<tr>
<td><img src="http://www.explodingdog.com/dumbpict51/blah.gif"/></td>
<td><FONT COLOR="#55FF22">Variation of green</FONT></td>
</tr>
</table>

My try, hopes it ok.

 

[Monovertex]

My page

Btw, sorry to hear about your gf, happened to me as well a couple of weeks ago. And don't worry, we'll have the patience .

 

[DDRtists]

Meh, all is good.

By they way, the next lesson will be much harder, I just wanted to make sure you all had basic ideas on how HTML is formed.

 

[phyrex1an]

You forgot to mention that the alt attribute is required in the img tag, also if you are teaching xhtml (and since you are using the self close tag I suppose you do) then all tags should be in lower case, font instead of FONT. Btw, while the font tag maybe have a educational purpose I rather not see it in any new web pages. It's already deprecated and if you want to take advantage of the next generation of (x)html standards then you better forget it.

Even if this is a very basic lesion I see no reason why these fundamentals should be left out.

 

[Monovertex]

Btw, indeed, why is the alt attribute required?... The page is not screwed up in any way...

 

[Jindo]

Computer Broken , I'll find another way to upload to my site .

Edit =D

 

[phyrex1an]

>why is the alt attribute required?
Because the most recent (x)html standards says so.

>The page is not screwed up in any way...
Most browsers handle errors like this pretty well. However, it's not defined in any standars how browsers should handle errors (the html recommendation is that browsers should 'handle them as good as possibly') so it's not the browsers error is they replace all images with missing alt tag with pictures of the development team of the browser.
When the choose stands between writing correct markup (with well defined rules how browser should display it) and incorrect markup (browsers can deal with the markup as they want) the choose is pretty easy imo.

Also, the alt tag has the nice behavior that if the browser can't load the image (maybe it's a text browser or the user just uses a slow connection) it will display the alt text instead thus giving the user an idea on what they are missing

 

[Monovertex]

Ok, thanks for the explanation .

 

[DDRtists]

I was unaware of the font thing.

What do you suggest instead of font?

 

[phyrex1an]

>What do you suggest instead of font?
Css, it was made for styling unlike html.

 

[Ur-Quan]

I got my page tried and ready:

<table>
<head>
<title>Ur-Quan</title>
</head>
<table border="1">
<tr>
<td>Name: </td>
<td>Some</td>
<td>One</td>
</tr>
<tr>
<td>Age: </td>
<td>Some</td>
<td>Thing</td>
</tr>
<tr>
<td>Color: </td>
<td><FONT COLOR="#00FF00">Green</FONT></td>
<td> </td>
</tr>
<tr>
<td>Professons: </td>
<td>Learning</td>
<td> XHTML </td>
</tr>
<tr>
<td>Picture: </td>
<td> </td>
</tr>
<tr>
<td><img src="http://www.thehelper.net/forums/customavatars/avatar13287_1.gif" /></td>
</tr>
</table>

<Hint>
You can just go view google page in the source,
remove its code,
add yours,
press apply changes
and you have your code tested
</hint>

 

[pheonixashes]

DDRtists, I might not be able to make the time limit, my comp is acting a bit weird, along with my handling of images.

I'll probably get it in at around 10:00 PM, GMT-8.

 

[DDRtists]

Kay, haha.