Post by Dead on Jan 24, 2011 3:46:40 GMT -5
So I wanted to make a tutorial, and first I ahd a hard time deciding what kind of tutorial to make.....
But then I remembered my old site (dead now) and I also remembered my xhtml tutorial!
So I started searching and after a while I found the tutorial and decided to post it here! But first Ir ead throught it and adapted it to be easier to read (it was from the beggining a horrible and huge block of text) So here it is!
Lesson 0, extra stuff!:
Now that you know that Here's the tutorial:
Lesson 1, the very basics!
Lesson 2, basic text:
lesson 3, basic formatting:
lesson 4, the important title!:
lesson 5, adding some content!:
lesson 6, Images to make the site pretty:
lesson 7, some color, eh?:
lesson 8, Links and using subpages!
lesson 9, Uploading it (windows only):
also Lesson 10, Special characters, eg åäö....:
But then I remembered my old site (dead now) and I also remembered my xhtml tutorial!
So I started searching and after a while I found the tutorial and decided to post it here! But first Ir ead throught it and adapted it to be easier to read (it was from the beggining a horrible and huge block of text) So here it is!
Lesson 0, extra stuff!:
The difference between Html and Xhtml is this
Html:
<p>
<H6>
hello!
</p>
</H>
And Xhtml:
<p>
<H6>
hello!
</H>
</p>
basiacally that means that in xhtml you need to close the tags the right way, ALWAYS the "child" tags first (the one's after the first tag eg <center><p><H3> ok the right way would be this </H></p></center> the wrong way would be <center><p><H3> ok the right way would be this </center></H></p>) This will make it possible for mobile phones to connect and view the page.
Html:
<p>
<H6>
hello!
</p>
</H>
And Xhtml:
<p>
<H6>
hello!
</H>
</p>
basiacally that means that in xhtml you need to close the tags the right way, ALWAYS the "child" tags first (the one's after the first tag eg <center><p><H3> ok the right way would be this </H></p></center> the wrong way would be <center><p><H3> ok the right way would be this </center></H></p>) This will make it possible for mobile phones to connect and view the page.
Now that you know that Here's the tutorial:
Lesson 1, the very basics!
Ok here's a neewbie tutorial for xhtml (and of course also html)
Ok Here's what you need to start with EVERY TIME You make a web page!
<html>
<Head>
</head>
<Body>
</body>
</html>
Let's explain!
The <html> and </html> tags are the tags that tell the web browser that it's a web page. (only needed for really old browsers, but it's a good habbit of writing them out anyway).
The <head> and </head> tags are where title and such goes^^
And the <body> and </body> tags are for the main part of your page!
So you got that, otherwise read it again untill you get it^^, Let's make it into a web page!
Ok Here's what you need to start with EVERY TIME You make a web page!
<html>
<Head>
</head>
<Body>
</body>
</html>
Let's explain!
The <html> and </html> tags are the tags that tell the web browser that it's a web page. (only needed for really old browsers, but it's a good habbit of writing them out anyway).
The <head> and </head> tags are where title and such goes^^
And the <body> and </body> tags are for the main part of your page!
So you got that, otherwise read it again untill you get it^^, Let's make it into a web page!
Lesson 2, basic text:
Copy and paste this into an empty NOTEPAD document:
<html>
<head>
This is a very pretty site!
</head>
<Body>
<p>
<H6>
Hello this is a site, nothing special here^^
</H>
</p>
</Body>
</html>
You noticed I added two more sets of tags?
Let's explain!
The <p> and </p> are the paragraph tags, Pretty self explanatory
and the <H6> and <H> tags are the Header tags, also pretty self explanatory^^^, It can have these values <H1 (2) (3) (4) (5) (6)>
Check how your site looks! Remember to save it as .htm or .html!
Pretty boring tho =(
!!! I have an idea!!!
<html>
<head>
This is a very pretty site!
</head>
<Body>
<p>
<H6>
Hello this is a site, nothing special here^^
</H>
</p>
</Body>
</html>
You noticed I added two more sets of tags?
Let's explain!
The <p> and </p> are the paragraph tags, Pretty self explanatory
and the <H6> and <H> tags are the Header tags, also pretty self explanatory^^^, It can have these values <H1 (2) (3) (4) (5) (6)>
Check how your site looks! Remember to save it as .htm or .html!
Pretty boring tho =(
!!! I have an idea!!!
lesson 3, basic formatting:
Let's see if this helps!
<html>
<head>
<center>
This is a very pretty site!
</center>
</head>
<Body>
<p>
<H1>
<Center>
Hello this is a site, nothing special here^^
</center>
</H>
</p>
</Body>
</html>
That might do the trick!!
No It didn't but The <center> and </center> tags are for centering text!
Try It! And don't forget to save!!
<html>
<head>
<center>
This is a very pretty site!
</center>
</head>
<Body>
<p>
<H1>
<Center>
Hello this is a site, nothing special here^^
</center>
</H>
</p>
</Body>
</html>
That might do the trick!!
No It didn't but The <center> and </center> tags are for centering text!
Try It! And don't forget to save!!
lesson 4, the important title!:
Ok now let's add a title to the page!
<html>
<head>
<center>
<title>
hello
</title>
This is a very pretty site!
</center>
</head>
<Body>
<p>
<H1>
<Center>
Hello this is a site, nothing special here^^
</center>
</H>
</p>
</Body>
</html>
The <title> and </title> tags are self explanatory
<html>
<head>
<center>
<title>
hello
</title>
This is a very pretty site!
</center>
</head>
<Body>
<p>
<H1>
<Center>
Hello this is a site, nothing special here^^
</center>
</H>
</p>
</Body>
</html>
The <title> and </title> tags are self explanatory
lesson 5, adding some content!:
ok time to add some content to the site!
<html>
<head>
<center>
<title>
hello
</title>
This is a very pretty site!
</center>
</head>
<Body>
<p>
<H1>
<Center>
<hr>
Hello this is a site, nothing special here^^
<hr>
</center>
</H>
</p>
<center>
<table width=80% border=1>
<tr>
<td width=50%> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</table>
</center>
</Body>
</html>
Ok
<table width=80% border=1>
<tr>
<td width=50%> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</table>
This is for adding tables to your site^^
here you can change the "??%" values and the border=1
you can also change the "cell?" values
and for the <hr> tag this draws a lina across the page and has no closing tag as this is not necessary
Try It! And don't forget to save!
<html>
<head>
<center>
<title>
hello
</title>
This is a very pretty site!
</center>
</head>
<Body>
<p>
<H1>
<Center>
<hr>
Hello this is a site, nothing special here^^
<hr>
</center>
</H>
</p>
<center>
<table width=80% border=1>
<tr>
<td width=50%> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</table>
</center>
</Body>
</html>
Ok
<table width=80% border=1>
<tr>
<td width=50%> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</table>
This is for adding tables to your site^^
here you can change the "??%" values and the border=1
you can also change the "cell?" values
and for the <hr> tag this draws a lina across the page and has no closing tag as this is not necessary
Try It! And don't forget to save!
lesson 6, Images to make the site pretty:
Ok now is the time for adding pictures!
<IMG> - add a picture!
SRC="url address" -the searchway for the image
ALT="text" -text that shows if the img cannot be shown
ISMAP -parts of the picture are clickable
ALIGN="top", "bottom", "middle", "left", "right" - places the picture
as the "___" says
BORDER="number" -How thick the border will be around the image in pixels
HSPACE="points" -Horisontall distance between pictures and other objects ( text)
VSPACE="points" -Vertiikal distance between picyure and other objects
HEIGHT="points" -defines the pictures hight in pixels
WIDTH="points" - the pictures width in pixels
Ok! Lets test it!
<html>
<head>
<center>
<title>
hello
</title>
This is a very pretty site!
</center>
</head>
<Body>
<p>
<H1>
<Center>
<hr>
Hello this is a site, nothing special here^^
<hr>
</center>
</H>
</p>
<center>
<table width=80% border=1>
<tr>
<td width=50%> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</table>
</center>
<IMG src="abc.jpg" alt="abc" border="0">
</Body>
</html>
Did it work? if not do it again!
NOTE!!! If the picture is not in the same folder as the website you will have to enter the full searchpath e.g <img src="/wwwroot/Images/abc.jpg" alt="abc" border="5">
Remember save before you test it!
<IMG> - add a picture!
SRC="url address" -the searchway for the image
ALT="text" -text that shows if the img cannot be shown
ISMAP -parts of the picture are clickable
ALIGN="top", "bottom", "middle", "left", "right" - places the picture
as the "___" says
BORDER="number" -How thick the border will be around the image in pixels
HSPACE="points" -Horisontall distance between pictures and other objects ( text)
VSPACE="points" -Vertiikal distance between picyure and other objects
HEIGHT="points" -defines the pictures hight in pixels
WIDTH="points" - the pictures width in pixels
Ok! Lets test it!
<html>
<head>
<center>
<title>
hello
</title>
This is a very pretty site!
</center>
</head>
<Body>
<p>
<H1>
<Center>
<hr>
Hello this is a site, nothing special here^^
<hr>
</center>
</H>
</p>
<center>
<table width=80% border=1>
<tr>
<td width=50%> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</table>
</center>
<IMG src="abc.jpg" alt="abc" border="0">
</Body>
</html>
Did it work? if not do it again!
NOTE!!! If the picture is not in the same folder as the website you will have to enter the full searchpath e.g <img src="/wwwroot/Images/abc.jpg" alt="abc" border="5">
Remember save before you test it!
lesson 7, some color, eh?:
Ok!
So, You wanna get some color to the page, eh?
<html>
<head>
<center>
<title>
hello
</title>
This is a very pretty site!
</center>
</head>
<BODY BACKGROUND="example.jpg" BGCOLOR="#FFFFFF" TEXT="#000000"
LINK="#000088" VLINK="#770077" ALINK="#00FF00">
<p>
<H1>
<Center>
<hr>
Hello this is a site, nothing special here^^
<hr>
</center>
</H>
</p>
<center>
<table width=80% border=1>
<tr>
<td width=50%> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</table>
</center>
<IMG src="abc.jpg" alt="abc" border="0">
</Body>
</html>
Noticed what I added?
Well here it is!
<BODY BACKGROUND="example.jpg" BGCOLOR="#FFFFFF" TEXT="#000000"
LINK="#000088" VLINK="#770077" ALINK="#00FF00">
So the Background is the background image
The BGCOLOR is background color
TEXT is text color
LINK is link color and so on.......
Got it?
Well Try It out then!
And don't Forget to save first!
So, You wanna get some color to the page, eh?
<html>
<head>
<center>
<title>
hello
</title>
This is a very pretty site!
</center>
</head>
<BODY BACKGROUND="example.jpg" BGCOLOR="#FFFFFF" TEXT="#000000"
LINK="#000088" VLINK="#770077" ALINK="#00FF00">
<p>
<H1>
<Center>
<hr>
Hello this is a site, nothing special here^^
<hr>
</center>
</H>
</p>
<center>
<table width=80% border=1>
<tr>
<td width=50%> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</table>
</center>
<IMG src="abc.jpg" alt="abc" border="0">
</Body>
</html>
Noticed what I added?
Well here it is!
<BODY BACKGROUND="example.jpg" BGCOLOR="#FFFFFF" TEXT="#000000"
LINK="#000088" VLINK="#770077" ALINK="#00FF00">
So the Background is the background image
The BGCOLOR is background color
TEXT is text color
LINK is link color and so on.......
Got it?
Well Try It out then!
And don't Forget to save first!
lesson 8, Links and using subpages!
and the <A HREF=....> </a> tags are for linking to OTHER websites and such
But also To make internal links.
you could write <A HREF="A.html">GAMES</a> For an example
or for other websites this is an example
<A HREF="http://www.glitchkill.proboards.com/index.cgi?action=arcade">GAMES</a>
But also To make internal links.
you could write <A HREF="A.html">GAMES</a> For an example
or for other websites this is an example
<A HREF="http://www.glitchkill.proboards.com/index.cgi?action=arcade">GAMES</a>
lesson 9, Uploading it (windows only):
And of course how to upload it
(Assuming you're using windows)
Go to control panel and click Add/Remove program
when there click add/remove Windows components
Chose Internet Information services (IIS)
When installing it will ask for the Windows CD.
When the installation is done go to main root (Usually C:\ )
And click "Inetpub" (I think it was anyway^^)
Go to the subdirectory wwwroot
In the folder there will be alot of files
Just add your Index.html (or whatever you named it)
and all other files that are a part of your website like images videos
and all subpages like Games.html
If it's not working contact me for help!^^
NOTE: You will need a domain name too, this tutorial will not cover how to register one but I will give you two places where you can get free domain names
www.dot.tk
and
www.co.cc
(Assuming you're using windows)
Go to control panel and click Add/Remove program
when there click add/remove Windows components
Chose Internet Information services (IIS)
When installing it will ask for the Windows CD.
When the installation is done go to main root (Usually C:\ )
And click "Inetpub" (I think it was anyway^^)
Go to the subdirectory wwwroot
In the folder there will be alot of files
Just add your Index.html (or whatever you named it)
and all other files that are a part of your website like images videos
and all subpages like Games.html
If it's not working contact me for help!^^
NOTE: You will need a domain name too, this tutorial will not cover how to register one but I will give you two places where you can get free domain names
www.dot.tk
and
www.co.cc
also Lesson 10, Special characters, eg åäö....:
Ok! Now we want to add some special signs to the page!
the copyright sign (©) is written like this: & copy; without the space between "&" and "copy;"
å
Å
ä
Ä
ö
Ö
<
>
&
"
æ
Æ
ø
Ø
The above are written like this: without the space between & and XXXX;
& aring;
& Aring;
& auml;
& Auml;
& ouml;
& Ouml;
& lt;
& gt;
& amp;
& quot;
& aelig;
& AElig;
& oslash;
& Oslash;
**Will add more content later**
the copyright sign (©) is written like this: & copy; without the space between "&" and "copy;"
å
Å
ä
Ä
ö
Ö
<
>
&
"
æ
Æ
ø
Ø
The above are written like this: without the space between & and XXXX;
& aring;
& Aring;
& auml;
& Auml;
& ouml;
& Ouml;
& lt;
& gt;
& amp;
& quot;
& aelig;
& AElig;
& oslash;
& Oslash;
**Will add more content later**
</LI>
