Session 2

Chief · February 13, 2011

Session 2: 2/12/2011

Alright. I am terribly sorry about the huge delay's, Ive been working hard on a website of my own.

Session 2 will be about using a Table to create a simple layout. This is now way, way outdated, but seeing as I'm sure that every great web designer started out that way. I will also teach you how to search out a free web host, and upload files, via FTP, or the provided up-loader.

First thing I want you to do, is start a new, blank web page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Untitled Document</title>
</head>
<body>

</body>
</html>

Alright, now, table's are very simple. HTML is always very self explanatory, so you should catch on very quickly.

First, we start with the <table> tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Untitled Document</title>
</head>
<body>
	<table>

	</table>
</body>
</html>

Next, we add a row, then we will add 2 cells. It will start to piece together shortly. <tr> is a row, and the <td> tag is a cell within the row.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Untitled Document</title>
</head>
<body>
	<table>
		<tr>
			<td>
				This is the First Cell.
			</td>
			<td>
				This is the Second Cell.
			</td>
		</tr>
	</table>
</body>
</html>

Next, we create a second row, and two more cells within it. It should looks just like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Untitled Document</title>
</head>
<body>
	<table>
		<tr>
			<td>
				This is the First Cell.
			</td>
			<td>
				This is the Second Cell.
			</td>
		</tr>
		<tr>
			<td>
				This is the Third Cell.
			</td>
			<td>
				This is the Fourth Cell.
			</td>
		</tr>
	</table>
</body>
</html>

Now, you might be wondering; How does this turn out to, even remotely, look like a website? Tag attributes.

What is a tag attribute? These are the necessary puzzle pieces to style your web page. Without them, you're pretty much left with just the skeleton of a webpage, and you'll miss all the flesh of it.

Where do tag attributes go? in the tag, right after the actual "tag word" (which would be 'table' etc). Here's an example:

<body bgcolor="#fff2e3">

You may use whatever colors you wish. A good way to find some color codes, is to go to google, and type in "web safe color chart"

This tag attribute will change the background color. Now, this should actually be done via CSS, but we have yet to get there, so we will use a fairly outdated system until we get further.

So, go ahead and apply that attribute to the body, and we'll move on.

No, we're going to add a "logo" to the first cell. go ahead and replace the text in the first cell, with this:

<img src="http://i52.tinypic.com/2yn2ro9.png" />

Next, replace the second cell text with this:

<h1>My First Website</h1>

You should now have something that looks like this:

Now, we are going to turn the third cell into our "navigation"

In order to do this, we will need to use the "anchor" tag. It will look like this:

<a href="#">Home Page</a> (the '#' is just there as a filler, and won't direct you anywhere)

After each link, we will add a line break, to create a vertical navigation bar. a line break is <br />.

Now, your whole document should look something like this. You can change the links to say whatever you wish:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Untitled Document</title>
</head>
<body bgcolor="#fff2e3">
	<table>
		<tr>
			<td>
				<img src="http://i52.tinypic.com/2yn2ro9.png" />
			</td>
			<td>
				<h1>My First Website</h1>
			</td>
		</tr>
		<tr>
			<td>
				<a href="#">Home Page</a><br>
				<a href="#">About Me</a><br>
				<a href="#">My Portfolio</a><br>
				<a href="#">Links</a><br>
				<a href="#">Contact Me</a>
			</td>
			<td>
				This is the Fourth Cell.
			</td>
		</tr>
	</table>
</body>
</html>

What you will now notice, is that the text in the fourth cell, is vertically aligning itself with the height of cell 3. What we do now, is apply a new cell attribute to our cell 4:

<td valign="top">

valign is just the vertical alignment of the content within that cell, and the "top" is self explanatory.

What the page should looks similar to now:

Now, lets go grab some page filler. go to http://www.lipsum.com/ and generate 1 paragraph, then replace the text in cell 4, with your newly generated filler paragraph.

This text is just some filler content, good to fill the page until real content is ready to be added.

So, we have the bone structure of our web page, how about we make it look like one? lol. here's what we shall do. First, place a <center> tag right above the table. Then, edit the table attributes to look just like this:

<center>
	<table width="900" bgcolor="#e4c7a5" cellspacing="0" cellpadding="5" border="1" bordercolor="#cda16d">

You should start to see a website being formed. Next, we apply the same 'valign' from the fourth cell, to the third cell.

Now, we have a fully functioning website. Sure, its really outdated, but it works for now, right? We will get into a serious website next session.

Anyways, I want you to be able to link your pages together, so follow these steps.

1. Figure out how many web pages you have in your navigation.

2. Replace the "#" in the links, with the name of a page you wish to create, followed by .html (ie: contact_us.html)

3. Create one page for each page, and give it a name (index should already be there, give the other's names that make sense ie: links.html)

(for step two, just copy the index page, and rename it to what you have them set to in your webpage)

4. Make sure all the pages are named correctly and correspond with the names you've given them in your HTML document.

Alright. We won;t worry about changing the content of the pages right now, we will do that next session as well.

This next step is the easy part. Finding a web host. In this case, a Free one.

Go to http://www.free-webhosts.com/webhosting-01.php

Now, I do want us all to use the same one for this session at least, but after that, you are free to choose whichever host you wish, even paid.

Go to: http://www.110mb.com/

Sign up for a Free hosting account, confirm the email address, then log in to your account.

Then, go to the file manager, its easy to spot.

After you are in, you will see that there is an "index.htm" file. Go ahead and delete it.

Then, once it is gone, click on "upload files"

You will have to choose one at a time with this system, but it is fine.

Once it has uploaded, go ahead and open a new tab, and type in "your username".110mb.com

It should looks something like this:

http://chiefshtmlclass.110mb.com/

If not, let me know, and we will get it fixed up for you.

Aright, that concludes Session 2!

It was messier than Session 1, but I promised to have it up today, and I still have 45 minutes my time, lol.

Let me know if you want something specific in the upcoming sessions, or if you think I should do something better next time?

I hope to see your progress really soon!

Marked · February 13, 2011

Ah I remember the good old days when we used to be on 110mb.com. In fact its thanks to them (and EmilyAnnCoons) that this site came about really.

Anyway, I hear that some people have trouble distinguishing between a row and a column. If you make websites, this will eventually come naturally, like which hand is your left and right.

If you just remember that a row contains columns, and therefore a row stretches out horizontally. Then columns divide your row up. Columns are stacked side-by side, and rows are stacked up on top of each other. You can remember which is the row with tables because of the r in

.

You know what may be a good next lesson? The same HTML structure as you have here, but with CSS.

Chief · February 13, 2011

Thats exactly the plan Marked. Css+Div's for the next session. Recreating this simple layout.

Getting more and more advanced with each one.

I hope to accelerate quickly though, so hopefully everyone is reading each thing thoroughly.

Kiriashi · February 13, 2011

Simply amazing guide. Great job Chief!

Chief · February 14, 2011

Thanks! If I could figure out how to send a PM to multiple recipants at once, I would send one to all my "students" but I can't do it, lol. Hopefully They'll see it within the next few days.

Dark Den · February 16, 2011

Great tutorial,I finished making all the html pages ^_^

But i still havent found a host for my website , the register button on the regiester page on 110mb.com doesnt work for me. Other sites dont work , some sites dont have my country <_<

I'm still looking though, will post my link when im done lol

Kiriashi · February 16, 2011

You should be able to PM six people at once. : /

rgangsta · February 16, 2011

Sweeet. I never knew what the <table> tag was for.

:D I'm learning! :P

Would you by any chance have a session about using Photoshop to create websites (like the splice tool and exporting as HTML and images)?

Chief · February 16, 2011

I don't even use the splice tool, but I can cover how I design and cut up a website. Sure, no problem.

Also, the <table> element isn't used for actual layouts anymore. I will proved a great example of a table used for date though.

Kiriashi · February 17, 2011

I find it kinda' amusing how this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Untitled Document</title>
</head>
<body>

</body>
</html>

... is a blank page. xD

Chief · February 17, 2011

lol, it can get really really long... and still be a blank page, lol.

Kiriashi · February 17, 2011

Lol. That's interesting.

I don't plan on actually learning HTML but I'm going to keep reading anyways.

madanchi · February 21, 2011

aha I'll get going with this soon :) sorry I didnt start sooner, been busy recently - as usual i guess

gRaViJa · February 22, 2011

Just out of interest where you are going with this (so it's not critique!). Tables are almost never used by more developed web designers, instead we use divs. And styling like the coloring are always made up in an external css file. Are these two things you'll explain to your students later on? :)

@ kiriashi: it kinda is, but this is an empty page when i create one:

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

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

<title>Portfolio Kevin Verhoeven</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<link rel="stylesheet" type="text/css" href="css/nivo-slider.css">

<link rel="stylesheet" type="text/css" href="css/reset.css">

<script type="text/javascript" src="js/rollover.js"></script>

<link rel="stylesheet" type="text/css" href="css/screen.css"

media="only screen and (min-width: 951px)">

<link rel="stylesheet" type="text/css" href="css/mobile.css"

media="only screen and (max-width: 950px), only screen and (max-device-width: 950px)">

</head>

<body>

</body>

</html>

+ css:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

/* remember to highlight inserts somehow! */

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: collapse;

border-spacing: 0;

}

p

{

font-style:normal;

font-family: Tahoma, Arial;

font-size: 12px;

}

So Chief is doing a good job at keeping this simple :P

Chief · February 22, 2011

You might want to actually read.

using a Table to create a simple layout. This is now way, way outdated, but seeing as I'm sure that every great web designer started out that way, so will we.

I am fully aware of what I am teaching, and made sure that those learning, were also aware. I could beat you any day in a web design-off, lol, so don't try critiquing my code.

Next lesson is recreating the same web page, using Div's and CSS. I am very well versed in HTML/CSS.

Also, your CSS is very messy, lol, but thats just me. I like to go all uber organization on it.

gRaViJa · February 22, 2011

You might want to actually read.

I am fully aware of what I am teaching, and made sure that those learning, were also aware. I could beat you any day in a web design-off, lol, so don't try critiquing my code.

Next lesson is recreating the same web page, using Div's and CSS. I am very well versed in HTML/CSS.

Also, your CSS is very messy, lol, but thats just me. I like to go all uber organization on it.

I did not in any way meant this as an offense. I find it great that people are sharing their knowledge with classes like this one. I just wanted to see what your future plans re with this. I did not mean to question your skills in any way. I was just responding to Kiriashi showing that you can indeed have LOADS of coding ans still have a blank screen. I should have read the starting post a little better though, yes.

However, you don't have to attack me, but let me answer :P

* that's a reset.css, it's a standard file, that you always have to include. So it's not written by me. it's just a must-have to star with. I never write or change anything in it, so no problem if this particular file is messy.

* I'm a professional webdesigner with html/css/javascript/php/mysql/mssql/asp/flex/flash/cms-software. So let's get it on xD funny thing is i still suck at ruby/rgss/c# an all other game-related scripting :P

AAaanyway, i'm actually willing to help giving this class, if you want a helping hand! I've been thinking of doing something alike since a while.

Kiriashi · February 22, 2011

I did not in any way meant this as an offense. I find it great that people are sharing their knowledge with classes like this one. I just wanted to see what your future plans re with this. I did not mean to question your skills in any way. I was just responding to Kiriashi showing that you can indeed have LOADS of coding ans still have a blank screen. I should have read the starting post a little better though, yes.

However, you don't have to attack me, but let me answer :P

* that's a reset.css, it's a standard file, that you always have to include. So it's not written by me. it's just a must-have to star with. I never write or change anything in it, so no problem if this particular file is messy.

* I'm a professional webdesigner with html/css/javascript/php/mysql/mssql/asp/flex/flash/cms-software. So let's get it on xD funny thing is i still suck at ruby/rgss/c# an all other game-related scripting :P

AAaanyway, i'm actually willing to help giving this class, if you want a helping hand! I've been thinking of doing something alike since a while.

Well yeah, you can have thousands of lines of coding with a blank screen, but they'd be doing stuff like calculations and what not.

This coding is just to.. make the blank screen? : /

gRaViJa · February 22, 2011

Well yeah, you can have thousands of lines of coding with a blank screen, but they'd be doing stuff like calculations and what not.

This coding is just to.. make the blank screen? : /

The html code so far is declaring teh type of html and is linking to different css files. One that has to be used when you are browsing with a computer, one that has to be used when you are browing with an ipad and the last one is for iPhones/android phones etc. Than there is also a link to a javascript file that will make a cool slider.

the css file will reset all default styles. for example, to make a certain sentence a title you have to use the <h1> tag on it. By default this tag will make the text Verdana 18pt (not sure if it's Verdana, but, just an example). However chances are that you want your titles to be for example Arial 16pt. This is something you have to declare in your css file. However, if you don't have a reset.css, this new rule (Arial 16pt) might clash with the default rule (Verdana 18pt). (99% of the time it will be fine, but that 1% can be leathal).

Anyway, i'm sorry for hijacking this thread lol :P I hope this was still usefull to people who want to learn html/css so it's not 100% offtopic :)

Edited February 22, 2011 by gRaViJa

Kiriashi · February 22, 2011

Oh I see.. Verdana for the win. ^_^

I wonder if I would have any use for HTML

Chief · February 23, 2011

gravija, you should totally start a PHP Class. Every time I try to tackle php, I get a big headache, lol. I do need to learn it for sure in the future, I just have yet to do so.

I could still beat you in HTML/CSS though, lol.

Kiriashi · February 23, 2011

Now now, there's no need to compete. We can all have classes. The more the merrier.

gRaViJa · February 23, 2011

gravija, you should totally start a PHP Class. Every time I try to tackle php, I get a big headache, lol. I do need to learn it for sure in the future, I just have yet to do so.

I could still beat you in HTML/CSS though, lol.

Good idea :) if i do, i'll start it after your html class is finished, because we can only start php when your students have a decent knowledge of html/css. I'll keep my eye on this :)

Chief · February 23, 2011

Very true.

For those watching, I should have session 3 up tonight.

Sign In

Session 2

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Please sign in to comment

Recently Browsing 0 members