|
-- Posted by Moridin at 5:26 pm on July 24, 2006
[SIZE=7]Introduction to HTML[/SIZE] HTML stands for Hyper Text Markup Language and is the most commonly used language on the web. It consists of markup tags and tells a browser how to display text. This the basic structure of an HTML document: | Code: |
Title_of_website
This is the body of the document. This text is underlined.
|
The first tag in your HTML document is . This marks the start of the HTML Document. marks the end of it. The text within the header tags ( and ) does not appear in your browser. It is used for code that will change the look or function of the website as a whole. The text in-between the tags will be displayed at the very top left of your browser. Everything found between the <body> tags is, as the name implies, the body of your HTML Document. This is what will show in your browser. The text located between the <u> tags will become underlined. <p> [SIZE=4]<b>How do I use HTML?</b>[/SIZE] <p> Well, you could either use HTML on your own computer or on a testbed. If you want to use a test bed, try <a href="http://www.jmarshall.com/easy/html/f_testbed.html" target="_top">J Marshall HTML Test Bed</a>. <p> The following will show you how to try HTML on your own computer. Note that this is for Windows only. <br> Create a new text document on your desktop. This can be done by right clicking -> New -> Text Document. Open it and paste the above HTML into it. Save it by going File -> Save As. Save the page as "something.html". Close it and open it in a browser (by double clicking on it). Now, your browser will display the page. <p> If you are browsing a web site and suddenly wonder something along the lines of "How did they do that?", there is an easy solution at hand. Simply right-click and choose View Page Source (on firefox) or View Source (on Internet Explorer). The short cut is Ctrl + U. This will allow you to see the source code that was used to create the web site. This is a great way to learn. Although it is a bad habit to try and memorize HTML tags, there are still a few you need to learn. <p> [SIZE=4]<b>Bold</b>[/SIZE] <p> Sometimes you might want to make text more visible because you need them to be more important in the context etc. Then you should make them in <b>bold</b>. To make text in bold, simply but bold tags around it like this: <p> <b>This text is bold</b> <p> [SIZE=4]<b>Italic</b>[/SIZE] <p> Another powerful way of making text stand out as an important word is by making it <i>italic</i>. To make text italic, just put italic tags around it like this: <p> <i>This text is italic</i> <p> [SIZE=4]<b>Underlined</b>[/SIZE] <p> As you have seen in the example above, to make something <u>underlined</u>: <p> <u>This text is underlined</u> <p> [SIZE=4]<b>Headings</b>[/SIZE] <p> Perhaps the most important thing in a document is headings. This separates sections from each other and makes it easy to find what you are looking for. Headings are defined with the <h1> to <h6> tags. The higher the number the smaller the heading. <p> <h1>This is a heading</h1> <br> <h2>This is a heading</h2> <br> <h3>This is a heading</h3> <br> <h4>This is a heading</h4> <br> <h5>This is a heading</h5> <br> <h6>This is a heading</h6> <p> [SIZE=4]<b>Paragraphs</b>[/SIZE] <p> To space out the different sections of a website, paragraphs are often used. This allows the user to easily read text and find what he or she is looking for. To make a paragraph, do this: <p> <p>This is a paragraph</p> <p> [SIZE=4]<b>Line Breaker and Horizontal Rule</b>[/SIZE] <p> A line breaker and a horizontal rule is both used to separate sections from one and another. They both use one tag only, but in the future, single tags must be closed as well, so that is what will be shown here. <p> A line breaker is used if you want to end a line, but not end a paragraph. Using the line breaker tag, the current line will break and another will begin. The line breaker tag looks like this (notice the space before the slash): <p> <br /> <p> A horizontal rule on the other hand, will insert a line in your page. This can be a useful tool to separate sections.The tag looks like this (notice the space before the slash): <p> <hr /> <p> [SIZE=4]<b>Images</b>[/SIZE] <p> If you want to display an image, you should use this HTML code: <p> <img src="URL_to_image" alt="If_your_image_do_not_show_this_text_will_show_instead" /> <p> URL_to_image can be <a href="http://img364.imageshack.us/img364/893/b4nn3rhdgf6.jpg" target="_top"><a href="http://img364.imageshack.us/img364/893/b4nn3rhdgf6.jpg" target="_top">http://img364.imageshack.us/img364/893/b4nn3rhdgf6.jpg</a></a> and so on. <p> [SIZE=4]<b>Alignment</b>[/SIZE] <p> Although you are required to use CSS if you want to use images in the newest "version" of HTML (XHTML 1.0 Strickt) you can use the following for any other "version" of HTML. <p> <u>Left:</u> <p> <div align="left">Item_that_you_want_to_be_aligned_to_the_left_here</div> <p> <u>Center:</u> <p> <div align="center">Item_that_you_want_to_be_aligned_to_the_left_here</div> <p> <u>Right:</u> <p> <div align="right">Item_that_you_want_to_be_aligned_to_the_left_here</div> <p> [SIZE=4]<b>Links</b>[/SIZE] <p> The HTML for the most basic hyperlinks looks this: <p> <a href="URL">Link Description</a> <p> Where URL is the URL (or "address") to the website you want to link to and "Link Description" is the text that you want to be displayed. <p> Let's say that you would want to create link to Google with the description "Search with Google!", your code would look like this: <p> <a href="<a href="http://www.google.com"" target="_top">http://www.google.com"</a>;>Search with Google!<a> <p> Which would give the following result: <p> <a href="http://www.google.com" target="_top">Search with Google!</a> <p> [SIZE=4]<b>Font size</b>[/SIZE] <p> There is no valid (X)HTML for font size, so we need to use (inline) CSS: <p> <span style="font-size: 150%">Text_that_you_want_in_another_size_here</span> <p> The above will make the text 150% bigger than it normally would be. The number can be just about any percentage. <p> [SIZE=4]<b>Font color</b>[/SIZE] <p> There is no valid (X)HTML for font size, so we need to use (inline) CSS: <p> <span style="font-color:red">text_in_red_here</span> <p> Change red to the color you want to have. <p> [SIZE=4]<b>Background color</b>[/SIZE] <p> The easiest way to add a background color is simply to add bgcolor="color" to your body tag like this: <p> <table cellpadding=3 border=0><tr><td><b><span class=poster>Code:</span></b></td></tr><tr><td class=code><body bgcolor="red"></td></tr></table> <p> The above will give your website a red background color. <p> -or- <p> However, there is no valid (X)HTML for background color either, so we need to use CSS again! <p> <table cellpadding=3 border=0><tr><td><b><span class=poster>Code:</span></b></td></tr><tr><td class=code><html> <br> <head> <br> <title>Title_of_website
Content of your website here
|