HTML: The BasicsThe 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!
And oh, whatever, no biggie 
