|
|
||||||||||||||||||||
|
|
|
|
||||||||||||||||||
|
|
||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|||||||||||||
|
|
||||||||||||||||||||
|
#31
10-27-2008, 03:41 AM
|
||||
|
||||
|
Quote:
|
|
#32
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>
|
|
#33
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/>
|
|
#34
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
|
|
#35
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:
|
|
#36
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.
|
|
#37
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...
|
|
#38
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>
|
|
#39
10-27-2008, 06:16 AM
|
||||
|
||||
|
I love tables. I love them so much my web design studies never went much beyond them.
__________________
Lee Widener, Author Website  Cartoon Artwork, Underground Art, Other Weird Stuff 
|
|
#40
10-27-2008, 06:24 AM
|
||||
|
||||
|
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.
|
 |
| Thread Tools | |
|
|
