So if you want to begin learning HTML then you found the right place ^^First thing that you need to create websites is an editor. You can just use the normal editor that everyone who uses windows should have. Otherwise you can just download WEAVERSLAVE. It's a really good editor (you can also write Javascript or PHP there and it highlights different elements with different colors!).
So now you have an editor and we can begin =D
First of all there is the document-type declaration. For beginners it may look scary and complicated but you really don't have to worry. With time you'll be able to do it in your sleep ^^
Here it is:
- Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Yeah, it looks scary - it did for me too when I started! And I didn't use it at all. But for good HTML-style you really ought to write that. You have to put this code at the very beginning with nothing before it.
Just so you know: This is only one way. You can define this declaration for strict HTML-documents, for framesets, etc. But this one will do for you now because this one allows plain text between the body-tag (which I will explain soon).
The URL is optional. Means, you don't have to include it because most browsers have the rules for HTML themselves so you don't need to show them to your browser a second time
Logically? Yeah. For now, just copy this code in every HTML-document. But it would be best if you wrote it all by yourself to really learn it.So now the basics
In HTML every command is called tag.
Almost all tags have a closing tag that marks the end of the command. If I don't say that the tag has no closing tag then it HAS one.
There are many different tags that you will learn here
Every tag begins with an "<" and ends with an ">".
Each and every HTML-document starts with the HTML-tag and ends with the closing HTML-tag.
- Code: Select all
<html>
...the rest...
</html>
Everything else stands between those two tags. They indicate that you use HTML-codes.
Next is the head-tag
- Code: Select all
<head>
...
</head>
Everything that is written within this tag (where the "..." are) won't be visible on your homepage but here you can set the title of the current page and use Cascading Stylesheets (CSS), though you won't learn those codes here so it's not important at the moment
Within the head-tag you can use the title-tag
- Code: Select all
<title>Your title</title>
Easy enough? Yeah, it is. The title will be displayed in the far top bar of your internet browser (internet explorer, firefox, opera, etc.). Or on the tabs if you use them.
Now the most important part: the body-tag
- Code: Select all
<body>
everything that will be visible on your website comes here
</body>
Now you can start creating your homepage within this tag.
So the base frame of a website looks like this:
- Code: Select all
<html>
<head>
<title>Your title</title>
</head>
<body>
...
</body>
</html>
What I recommend you to do is to set an encoding for languages. For example, if someone from Asia comes to your website he will only see his/her letters because he/she uses another encoding. But it won't make any sense because the letters won't be in the right order to build words or even sentences.
You can set the encoding within the head-tag like this:
- Code: Select all
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
Here, http-equiv="content-type" means that it will send to your computer the type of the content of your site. The content-type is text/html (which is self-explanatory). After that you use the semicolon (";") to seperate charset from the other code. With charset you set the encoding. For West-European countries you mostly use the one I already put there (ISO-8859-1).
When you save your site in the normal editor (or in weaveslaver) you can choose with which charset you want to save your text. If you choose ISO-8859-1 you most likely can even use apostrophes or German letters like "ä", "ö", "ü" or "ß".
They will (most likely) display normally. But in some cases it's recommended to use workarounds for those letters or characters. For now, I won't explain it - maybe later.
I guess now you're really excited because we will start with the real website now. Ready?
First of all, text formatting. Because you will use this A LOT.
At first I'll show you how you can center a text. It's really simple:
- Code: Select all
<center>TEXT</center>
That's all, you ask? Yeah, that's really all there is to it!
You can do it in another way too. But we'll learn that later on.
Now headings.
Heading-tags work like this: you open the tag and write <h
then you can insert a number from 1 to 6 (1 is the biggest and 6 the smallest). Now it looks like this
- Code: Select all
<h1>
Of course you have to close the tag like this:
- Code: Select all
</h1>
You have to use the same number as in the opening tag to close it. If you use a heading with the size 2 then you have to close it accordingly with </h2>.
Note that headings are NOT used to make the text bigger and bolder. It's not called a heading for nothing!
Next will be the font color.
Basically, you use this code: <font color="">
Within the "" you can either write the color's name (like "blue" or "red") or the hexadecimal code (like #000000 for black).
You can look up the color names or hexadecimal codes HERE
The color names are obvious and the Code unter "Hex" is the hexadecimal code.
I, personally, prefer the hexadecimal code, but you can use the names if you like.
So the code now looks something like this:
- Code: Select all
<font color="black">
OR
<font color="#000000">
Bold, cursive or underlined text
I'll only give you the codes, because you don't have much to learn here:
- Code: Select all
<b>BOLD TEXT</b>
<i>CURSIVE (i stands for italic=cursive) TEXT</i>
<u>UNDERLINED TEXT</u>
Background color and image
To set a background color or a background image, you have to use the following codes in the body-tag:
Background color:
- Code: Select all
<body bgcolor="#000000">
OR
<body bgcolor="black">
background image:
- Code: Select all
<body background="yourgraphicURL.jpg/png/gif/...">
If the graphic is in the same folder as the site you want to use it on, you can just type the graphic's name like this: "background.jpg".
If it's in another folder that is IN the folder where your site is, you have to write it like this: "otherfolder/background.jpg".
Basically, you have to write the folder first, then a slash ("/") and then the graphic's name. If it's in another folder in the folder you have to repeat that (otherfolder/anotherfolder/background.jpg). It's rather simple ^^
You can also copy the whole URL of the pic and paste it.
How to include graphics
To include graphics you have to use this code:
- Code: Select all
<img src="graphicURL.jpg/png/gif/...">
This tag has NO closing tag. You can leave it like that. The same URL rules apply here as for the background image.
Note: It's best if you set the image-size so that the text doesn't jump when the graphics are loaded. It would be good HTML-style if you do so
This is how you set the size:
- Code: Select all
<img src="graphicURL.jpg" width="100" height="100">
The names are self-explanatory. "Width" sets the width in pixels and "height" the height in pixels. If you want to look up how wide and how big your graphic is, just hold the mouse over your image on your computer in your folder. It will display it's size like this: 100x100.
The first number is the width and the second the height.
Now the fun stuff! Tables!
And this is a whole (simple) table-code:
- Code: Select all
<table>
<tr>
<td>First column</td>
<td>second column</td>
</tr>
</table>
To indicate a table you use the table-tag (<table>). Each row/line is indicated with the <tr>-tag and each column with the <td>-tag. You can add as many <td>-tags into one line as you like (of course I wouldn't add too many, else you have to scroll too much). You can also add as many lines as you like.
You have to close each tag and can only put text or images within the <td>-tag.
If you want to add a border, just write into the table tag like this "<table border="1">"
The border will be very thin. If you want a thicker border, just increase type a bigger number (2, 3, 4, ...)
If you want a background color or an image, do it like this:
Color:
<table border="1" bgcolor="#000000">
It's basically the same as for the body-tag.
For the image it's a little more complicated because the HTML-code isn't interpreted by many browsers and it won't be. For this, you will have to use CSS (cascading stylesheets). So, no table background image for you! Sorry! This is still a basics tutorial.
So, this is part one. I will add a second part later. It's already late where I am ^^
I hope I could help you. If you still have questions, just post here and I'll answer as soon as I can!
)
It can help out a lot of people who don't know HTML.
