Horror.com Forums - Talk about horror.

Horror.com Forums - Talk about horror. (https://www.horror.com/forum/index.php)
-   Horror.com General Forum (https://www.horror.com/forum/forumdisplay.php?f=2)
-   -   Wanna Learn Web Design? (https://www.horror.com/forum/showthread.php?t=37268)

Vodstok 10-24-2008 04:52 AM

Wanna Learn Web Design?
 
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

Quote:

Originally Posted by The Mothman (Post 747819)
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

Quote:

Originally Posted by The Mothman (Post 747821)
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

Quote:

Originally Posted by missmacabre (Post 747837)
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

Quote:

Originally Posted by Festered (Post 747851)
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

Quote:

Originally Posted by Vodstok (Post 747855)

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

Quote:

Originally Posted by novakru (Post 748443)
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

Quote:

Originally Posted by Psycom5k (Post 748807)
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

Quote:

Originally Posted by missmacabre (Post 748818)
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

Quote:

Originally Posted by Festered (Post 748841)
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

Quote:

Originally Posted by missmacabre (Post 748852)
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/y17...onely/help.jpg

Quote:

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

Quote:

Originally Posted by Vodstok (Post 748947)
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

Quote:

Originally Posted by Ferox13 (Post 749190)
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>
<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>

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. 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

Quote:

Originally Posted by neverending (Post 749288)
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.


All times are GMT -8. The time now is 03:23 PM.