| Author | Message | Time |
|---|---|---|
| DecA | Well, if you've ever wanted to have you're own webpage on the internet, you know that it can be pretty frustrating trying to find out how. What you need to know is that building a page requires knowledge of HTML, which stands for Hyper Text Markup Language. Behind every page is a large amount of code. But what is this code if you don't know what it means? Nothing. It's absolutely nothing, and if you want to make something at the undisputed easiest language on the internet, you should keep reading. I will provide four scripts. Each time I add a new tag to the script, I will explain the new tag just like I did the rest. I used tabs for easier reading. First of all, lets start up with something simple. I'll explain the tags after I'm finished with the code. [code] <html> <body bgcolor="#C0C0C0"> <title>New HTML Page</title> <font face="Verdana" size="15" color="red"> <!- The text here is important -> <body> Welcome to my new HTML page. You need no knowledge of HTML to view this page. <p> It was made by me,<br> (Your Name) </body> </font> </html> [/code] Now, lets take it step by step. <html> and </html> These tags mark the beginning and the end of an HTML document. These documents end with .html or .htm extensions. <body bgcolor="#hex or color"> This specifies the page's background color. You can either enter a hexidecimal string for the color, or thanks to new upgrades in browsers, just specify a color, such as "red". <title> and </title> Mark the beginning and the end of the text located at the top of the browser. Any text is allowed here. <font face="font" size="size" color="color or #hex"> and </font> This is to specify the type of font used for the text following it. Note that also you can write each "sub-tag" such as "face", "size", and "color" as its own tag, like this. <font face="font> </font> <font size="size"> </font size> <font color="color or #hex"> </font color> But you have to close them individually, so it's quicker to just incorporate them into one tag. <!-- Comment --> This is a commentary tag. The text within this tag will not show up on the page, and does not affect this page as long as you close the comment with --> or --!> (the number of underscores does not matter). These tags are used to give the reader of the HTML source accompanying the page he or she is reading some information about the site, such as the author or date of publication. <body> and </body> Mark the beginning of the body of a document. Not necessary, but are often used to organize the document a little better. <p> A paragraph tag. Each tag inserted creates a new paragraph. <br> A line break. Each tag inserted automatically puts the next text or image at the next line. Now that you know some basic tags, lets get on to a script that's a "step" higher. [code] <html> <body bgcolor="#800000"> <title>HTML PAGE 2</title> <font face="verdana" size="14" color="#cccccc"> <p align="center"> <body> <br> <img src="pic.gif"> <p> Welcome to my HTML page. If you need to learn more about HTML, click <a href="page.html">here</a>. </p> </font> </body> </html> [/code] <p align="center"> and </p> "align" is a "sub-tag" for <p>. It is used to specify the alignment of the text within the new paragraph. <img src="pic.gif"> This inserts an image where it is placed. <a href="link.html"> and </a> This tag inserts a hyperlink. The link is specified in the "href" section of the link, and the text directly after the first tag is closed. After you have already typed the text that you wish to hyperlink and you are ready to end the link, you end the tag, using </a>. Lets go on to another script. [code] <html> <body bgcolor="#800000"> <title>HTML PAGE 3</title> <font face="verdana" size="14" color="#cccccc"> <p align="center"> <body> <table> <tr><td bgcolor="green"> <marquee>Welcome to my page. It is a page about HTML, but you do not need knowledge of HTML to view it.</marquee></tr></td></table> <br> <a href="page.html"> <img src="pic.gif"> </a> <p> Welcome to my HTML page. If you need to learn more about HTML, click <a href="page.html" style="text-decoration: none">here</a>. Although you may wish to learn more about HTML, I can only provide so much information, since my website is on limited space, and my cheap host only gave me eighty kilobytes. </p> </font> </body> </html> [/code] <table> and </table> Starts a table. The cells and rows are made with the following. <TR> and </TR> Specifies a new row. <TD> and </TD> Specifies a new cell. <marquee> and </marquee> Starts a marquee. A marquee is a line of text that scrolls across the screen. Some viewers find it annoying, so I put it in its own little table cell to make it look more organized. <a href="page.html" style="text-decoration: none"> and </a> style="text-decoration: none" This specifies that you want the link which you are inserting to have no underline, or text-decoration. Without this, by default, most browsers underline hyperlinks. [code] <html> <style> body { scrollbar-arrow-color: black; scrollbar-base-color: gray } </style> <body bgcolor="#800000" text="#000000" alink="#000080" link="#000080" vlink="#000080"> <title>HTML PAGE 4</title> <font face="verdana" size="14"> <p align="center"> <body> <table bordercolor="gray" bgcolor="red"> <tr><td> <marquee>Welcome to my page. It is a page about HTML, but you do not need knowledge of HTML to view it.</marquee></tr></td></table> <br> <a href="page.html"> <img src="pic.gif"> </a> <p> Welcome to my HTML page. If you need to learn more about HTML, click <a href="page.html" style="text-decoration: none">here</a>. Although you may wish to learn more about HTML, I can only provide so much information, since my website is on limited space, and my cheap host only gave me eighty kilobytes. </p> </font> </body> </html> [/code] <body> and </body> text="color or #hex" =Specifies the color of plain text for the whole page. alink="color or #hex ="Specifies the color of the active links for the whole page. link="color or #hex" =Specifies the color for the regular links for the whole page. vlink="color or #hex" =Specifies the color for the visited links for the whole page. <table> and </table> bordercolor="color or #hex" =Specifies the border color for the table. bgcolor="color or #hex" =Specifies the background color for the table. <td> and </td> bgcolor="color or #hex" =Specifies the background color for that specific cell. [code] <html> <!-- This page was written by Deca[xL]--> <style> body { scrollbar-arrow-color: black; SCROLLBAR-BASE-COLOR: gray } </style> <body bgcolor="#800000" text="#000000" alink="#000080" link="#000080" vlink="#000080"> <title>HTML PAGE 4</title> <font face="verdana" size="14"> <p align="center"> <body> <table bordercolor="gray" bgcolor="red"> <tr><td> <marquee>Welcome to my page. It is a page about HTML, but you do not need knowledge of HTML to view it.</marquee></tr></td></table> <br> <a href="page.html"> <img src="pic.gif"> </a> <p> Welcome to my HTML page. If you need to learn more about HTML, click <a href="page.html" style="text-decoration: none">here</a>. Although you may wish to learn more about HTML, I can only provide so much information, since my website is on limited space, and my cheap host only gave me three kilobytes. </p> </font> </body> </html> [/code] <!-- Comment --> The last , and certainly least thing we are going to talk about are comments. These tags are a waste of bytes really; all they do is give the reader of the source information about it. They do not show up on the finished product. I hope this guide helped you learn a little about | January 7, 2004, 12:23 PM |
| Grok | Good post. Has some errors, but they're not worth pointing out right now. Do some more lessons, and use the forum's [ code ] [ / code ] tags to surround your HTML. | January 7, 2004, 12:28 PM |
| j0k3r | Wow fist post a helpful one, that's a first. Great job, pretty thourough, if you do it again use the code tags as grok suggested because most people learning HTML don't have alot/any previous programming experience, and it could be difficult for them to dicifer what is HTML code and what is you speaking. +1 | January 7, 2004, 12:36 PM |
| The-Rabid-Lord | Its a good post but man u must have been bored to sit down and type it all out. :o | January 7, 2004, 5:13 PM |
| St0rm.iD | Added code tags. | January 7, 2004, 8:07 PM |
| WinSocks | i always though that the font tags could only be within the <body> tags. it is always better to even out the table tag and it's table rows and table data tags. well thats only when you go nuts with tables within tables, it helps me keep track of which table i'm in. :P btw, good use of comments :) you odn't really see many people using comment tags in html projects. | January 8, 2004, 2:50 AM |
| peofeoknight | font tags should not be used at all, they are... wait grok gets angry when I say the word. But (I do say crap like this a lot don't I) accourding to the w3 css should be used for font. <span style="font: italic small-caps 900 12px arial">text</span> or <style type="text/css"> p { font: italic small-caps 900 12px arial } </style> or use a class or id, so on and so fourth. | January 8, 2004, 2:54 AM |
| Grok | [quote author=peofeoknight link=board=22;threadid=4629;start=0#msg38786 date=1073530445] font tags should not be used at all, they are... wait grok gets angry when I say the word.[/quote] Chill out. I was attempting to realize you were unconsciously saying depreciated in place of deprecated. http://www.w3.org/TR/REC-html40/conform.html#deprecated | January 8, 2004, 5:14 AM |
| peofeoknight | oh... Thanks for telling me lol, I feel like a fool now. :-[, But better the me continueing to say it. | January 8, 2004, 10:11 PM |
| Mitosis | Great lesson, but like Grok said , you should fix things. Example your forgetting the line <head>. | January 8, 2004, 10:51 PM |
| The-Rabid-Lord | I havce never real knowen or cared about the [code]<head> and </head> tags.[/code] What are they for? | January 9, 2004, 5:11 PM |
| Grok | [quote author=The-Rabid-Lord link=board=22;threadid=4629;start=0#msg38994 date=1073668293] I havce never real knowen or cared about the [code]<head> and </head> tags.[/code] What are they for? [/quote] The HEAD section loads information about the document, in general, and is processed entirely before any scripting. See http://www.w3.org/TR/html4/struct/global.html#h-7.4.1 for details. | January 9, 2004, 5:14 PM |
| peofeoknight | The head section is for your meta tags title styles and scripts, it is important. | January 9, 2004, 11:08 PM |
| dodge | everyone also forgot (or didnt bother saying, but i will) that the <title> </title> goes in the <head> </head> tags.... and please no one say its not important or they dont worry about it because it remines me when people use .tk and dont know how to set the title bar so you see the URL of the site.. really annoying to me atleast. | April 28, 2004, 8:03 PM |
| Myndfyr | Since this was bumped anyway, I feel obliged to point out that, with a few modifications, we can make pretty XHTML: 1.) Use all lowercase. 2.) Ensure that all tags have a terminator. For HTML tags that don't have a terminator that would make sense (such as the img tag), you can use the following syntax: <img src="http://some-url/some-img.ext" /> <br /> 3.) Ensure that all values have assigned values that are in quotes. For example, the iframe tag allows you to define the contant "allowTransparency", making the frame transparent. Proper setting would be: <iframe allowTransparency="true" /> where it could be without XHTML: <iframe allowTransparency /> 4.) Ensure that your document is well-formed -- that is, all tags terminate in the proper order: Invalid: <b><i>Bold and italics</b></i> Valid: <b><i>Bold and italics</i></b> Cheers. | April 28, 2004, 10:13 PM |
| Grok | Sure you, me, St0rm, peofeoknight, and lots of other people could really rip the lesson apart. But if we did, we would be discouraging beginners and intermediate people from putting their work in public, to help others. That's why I offered praise for a pretty good introductory lesson, rather than go into detail about the state of the web today, and the newer technologies. | April 28, 2004, 11:22 PM |
| Myndfyr | [quote author=Grok link=board=22;threadid=4629;start=15#msg57405 date=1083194579] Sure you, me, St0rm, peofeoknight, and lots of other people could really rip the lesson apart. But if we did, we would be discouraging beginners and intermediate people from putting their work in public, to help others. That's why I offered praise for a pretty good introductory lesson, rather than go into detail about the state of the web today, and the newer technologies. [/quote] I was totally not meaning to "rip the lesson apart" -- I hadn't even read through the entire lesson. The lesson was, in fact, about four months old. I just wanted to tack on a little extra info for people who might want to be a little more standards-compliant (and to let them know about stuff like the <br /> tags -- the first time I saw it, I had no idea what it meant). What I did read -- the info on formatting and links -- was very helpful I thought, and overall I did think it was a good post. It was certainly not my intention to rip the lesson apart, or even remotely to criticize it. | April 29, 2004, 5:41 AM |
| peofeoknight | Shoot, I still use html 4.01 transitional. I use xhtml 1.1 too of course, but when I get form intensive I go back to trans because I sort of enjoy my happy little asp.net event aware controls.... I could use request.forms and go back to the world of client side forms, but then I might as well be using asp classic. So instead of going through all the effort of having xhtml with asp.net I just go back to transitional. Its all good as long as it is valid :P | April 29, 2004, 6:26 AM |
| Myndfyr | You know, I recently created a website where I set the DTD to XHTML 1.0 strict. I don't know if ASP.NET is honoring that, but it's just a side-note. | April 29, 2004, 9:58 PM |
| DecA | Hmm, this was a very long time ago. Thanks for pointing out all the things I could have done, btw. Sorry i never wrote a follow up lesson to this. | October 26, 2004, 12:22 PM |
| peofeoknight | [quote author=MyndFyre link=topic=4629.msg57624#msg57624 date=1083275925] You know, I recently created a website where I set the DTD to XHTML 1.0 strict. I don't know if ASP.NET is honoring that, but it's just a side-note. [/quote] It depends on what you do with asp.net. If you use the server side form then do not hold your breath. Asp.net likes to output the name attribute which is not valid xhtml. But really its no big deal, it does not create an accessibility problem. Validation is not a must, accessibility is, but if your page is invalid because of one stupid attribute that will not affect th accessibility of the site then you loose a gold star... so what. If you do things without the server side form, with the html form and the action (which I sometimes do for some more control) then you will not have problems with validation but you forsake those quasi-event-oriented features (big deal). I still use html 4 a lot because it is still in use, and will continue to be in use for a long time. Xhtml is cool, but it has some disadvantages, like browser support issues, so html4 is still probably the way to go. If you use html4 strict you should not have problems getting asp.net to validate. | October 27, 2004, 1:48 AM |