The Basics of (x)HTML Table of content A brief introduction Getting started Text & colors Images and hyperlinks Frames and tables Afterword A brief introduction Hello! This guide is about the very basics of HTML. HTML stands for Hyper Text Markup Language. The language is the base of every website and it's simple to learn. So let's get to work! Getting started To learn HTML you will need nothing but a simple text editor. I personally prefer using Notepad, I think it's the easiest to work with. Write down the following: Code: <html> <head> <title>"Your title"</title> </head> <body> </body> </html> (What does this mean?) <html> Because it's a HTML file. <head> For title & mega tags (stuff for later) <title>"Your title."</title> Basically, the title </head> For title & mega tags (stuff for later) <body> The actual website </body> The actual website </html> Because it's a HTML file. Now save it as anything.HTML, change file type from .txt to All files. You should now see an internet page on your desktop. That's right, you just made your own website. Click it. Ehh, that website is a bit simple, don't you think? Let's add some fancy text! Text & colors You will place your text between the <body></body> tags. Markup <b></b> Bold text <i></i> Italic text <u></u> Underlined text <h*><h*> Text size, replace the * with a number from 1 to 6. <p> Starts a new paragraph <p align=*><p align=*> Aligns your text, replace the * with left (unnecesarry), right or center. Okay, so let's apply what we have learned. To edit your internet page, right mousebutton → open with → notepad Example: Code: <html> <head> <title>Welcome!</title> </head> <body> <p align=center><b><i><u>Welcome to my very first website</i></u></b><p align=center> </body> </html> Now your page should look like this: Now let's add some colors to it! To define a color, you use '#'. After that comes a hex number, here are a few basic colors. black #000000 white #FFFFFF blue #0000FF green #008000 yellow #FFFF00 red #FF0000 purple #800080 brown #A52A2A You can easily find more color codes on the web. For example, here. You can use this color to change the text color, but you can also use it to change the background color. Code: <body bgcolor=#oooooo text=#ffffff></body> bgcolor is used for the background. text is used, indeed, for the text. This doesn't mean you have to use one color for all your text, you can change the color of a certain part by using <font color=#?></font> tags. Let's try it out. Example: Code: <html> <head> <title>Welcome!</title> </head> <body bgcolor=##A52A2A text=#FFFF00> Your basic text <font color=#FF0000>Text in another color than the default</font> </body> </html> Images Every decent site has images. To add an image: Code: <img src=> Move the image to the same folder as your HTML file. (Thanks, SMR!) Example: Code: <img src="Sythe.png"> Hyperlinks Code: <a href=http://www.YOURSITEHERE>Link</a> Example: <a href=http://www.sythe.org>Click here to go to Sythe!</a> Tables For a table, you use <Table></Table> tags. For a row, you use <tr></tr> tags. For a column, you use <td></td> tags. Example: Code: <html> <head> <title>'Your title'</title> </head> <body> <table> <tr> <td> 'text' </td> <td> 'text2' </td> </tr> <tr> <td> 'text3' </td> <td> 'text4' </td> </tr> </table> </body> </html> You don't have any lines yet, so I'll show you how to add a border. Code: <table width=*% height=*% border=*> </table> Example: Code: <html> <head> <title>'Your title'</title> </head> <body> <table width=60% height=40% border=2> <tr> <td> 'text' </td> <td> 'text2' </td> </tr> <tr> <td> 'text3' </td> <td> 'text4' </td> </tr> </table> </body> </html> It should look like this: Note: I used different proportions in the code. Frames Okay, this is the most complicated part of this guide. A site will never look professional unless you use frames to divide the page into seperate parts. Let's create some more pages first. Page 1: Code: <html> <head> <title> Title </title> </head> <body bgcolor=#00FF00 text=#3300FF> <h1><p align=center><u>Your title</u></p></h1> <p align=center><i>Example</i></p> </body> </html> Page 2: Code: <html> <head> <title> Title </title> <body bgcolor=#CCCCCC txt=#000000> <h1><p align=center><u>Home</u></p></h1> <p align=center><i>Homepage</i></p> </body> </html> Page 3: Code: <html> <head> <title>Title</title> </head> <body> Extra page </body> </html> Linkpage: Code: <html> <head> <title> Title </title> </head> <body bgcolor=#000000 text=#ffffff> Go to: <p><a href=page2.html>Homepage</a> <p><a href=page3.html>Extra page</a> </body> </html> (Make sure they're all on your desktop/in the same map!) Click on the linkpage and it should look like this: Okay, now we can finally make our frame. A frame has frame tags instead of body tags. Example: Code: <frameset rows=*%,*%> <frame src=*.html> The 1st % is for height, the 2nd is for width. Let's apply it to the pages we already have. Example: Code: <html> <head> <title> Title </title> </head> <frameset rows=20%,80%> <frame src="page1.html"> <frameset cols=20%,80%> <frame src="linkpage.html"> <frame src="page2.html"> </frameset> </frameset> It should look like this: You made a website, congratulations! Publishing/Hosting You have a website, but you are the only one who can see it. That's because it isn't published yet. Unfortunately, publishing a website isn't free. You will have to pay for a domain name and hosting. A domain name is the name of your site (for example, www.sythe.org) and Sythe needs to pay hosting monthly (or every year) to keep Sythe online. So the domain is yours forever, but as soon as you stop paying for the host, your site will become unavailable to others. Below is a list of websites that offer cheap and decent hosting. Some of these also sell domains, some don't. I suggest you google some keywords if you want to find out more. Good luck! http://www.hosting.com/ http://www.ixwebhosting.com/ http://www.webhostingpad.com/ http://www.fatcow.com/ http://www.ipage.com/ipage/index.html http://www.webhostingtalk.com/ Domains only: http://www.buydomains.com/ Afterword Thanks for reading my guide! I'd like to thank SMR for solving a problem with the pictures part. As always, please leave honest feedback and tell me what you (dis)like about this guide. If you have any questions regarding the guide, feel free to drop me a PM and I will get back to you as soon as possible!
just a small correction, this is named xhtml also it might be fun experimenting with java files isn't too hard and makes awesome improvements overall opinion: looks great ^^
Bravo! This is an excellent guide; although HTML is somewhat dated, it is still the backbone of almost any webpage. A friend of mine was tasked with creating a website for his Physics211 class; maybe I'll direct him to this guide, as it's nearly flawless as far as I can tell. Your content is very thorough; nearly everything needed for a basic website is included. There are a few additional commands in a basic HTML vocabulary (like <marquee>), but these are more than enough for somebody posting their first blogs or something. Also, I'd like to commend your images: they are perfectly sized. I see far too many guides where people screenshot their browser in maximized view; I'm glad to see that your pictures were shrunk to an appropriate size. Perhaps the only thing I'd say you should add is possibly a few websites that will host your webpage for you. I don't know any off the top of my head, so I doubt most people do. Again, bravo on this guide; it's A+ material in my book.
Thanks! It would be great to redirect your friend to this guide, I am sure he could help me to tweak a few things. Yes, I may write a part II later, but I tried to be as 'to the point' as possible. And, you're right, I added some links to hosting sites. Thanks for all the ideas and the kind words, I really appreciate that you take your time to do this. Cheers!
