|
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 |
0010110110110!!! 00101101000011011?
:) |
Quote:
Although give me about 15 minutes and I will write a program that can read it :p |
You dont speak Binary!?
haha, neither do I. ive dabbled in HTML before, but im far too stupid for it. |
Quote:
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 |
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. |
Quote:
|
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?
|
I should really learn more about web design. My website blows.
|
Quote:
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. |
Quote:
|
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. |
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> |
So, when's the next installment. I knew this stuff already.
|
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 |
Quote:
|
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"> |
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. |
01111001 01101111 01110101 00100000 01100111 01110101 01111001 01110011 00100000 01110011 01110101 01100011 01101011 00100000 01100001 01110100 00100000 01100010 01101001 01101110 01100001 01110010 01111001
|
Quote:
|
Quote:
|
Gee, it's nice to see that Vodstok's efforts aren't going to waste here. :)
|
Quote:
|
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.
|
Quote:
|
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:
|
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.
|
I go the lazy man's route. Recrop the pages in photoshop and just post the image. Course you'll probably get an F.
|
Quote:
EDIT: figured it out using left and right padding. Thanks for the help. |
i look forward to the css tips - i never got around to learning some..
|
Quote:
|
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> |
<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/> |
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 |
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: |
<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. |
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... |
<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> |
I love tables. I love them so much my web design studies never went much beyond them.
|
Quote:
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 01:05 PM. |