Darkside_RG > Html (the Basics)

Darkside_RG > Technical Discussions > Guides/How To > General

wheels2285

Nov 2 2007, 08:17 PM

HTML (The Basics)

HTML stands for (Hyper-Text Mark-up Language)

It's the main language used in making websites. I'll teach you how to create a very basic website within a few minutes. (This is by far the easiest, most basic tutorial on making web pages as I can make it)

Starting out

First, open Notepad.exe in windows
Call your document index.html and change the type to all types.

this will change the document from a notepad document, to what looks to be an internet file.

now right click on the file and click edit or open with and open it with notepad again.

you always start out your document by typing in the basics that are in every HTML file.

in the document type this:

<html>
<head><title></title></head>
<body>

</body>
</html>

Now I'll explain all of it.

<html> - This indicates that your starting an HTML document and tells the browser to open it as one
<head> - the heading of your document. this is where you might put other codes
<title></title> - Between these tags, you type the title of your website.
ex. <title>Welcome to my Website</title>
I'll show you what this does soon.
</head> - Ends the header of your page
<body> - This is where you put all the webpage properties. (i'll get into more detail about it soon)
</body> - Indicates the end of your webpage
</html> - Indicates the end of your HTML document

now lets go back to the <title>Welcome to my Website Tutorial</title> tags.

our website should look like this in the text form

<html>
<head><title>Welcome to my Website Tutorial</title></head>
<body>

</body>
</html>

Save your file.

now double click on it and open it with either IE or Firefox (depending on what your default browser is)

it will be completely blank, right?
Wrong. look at the every top of the window. you'll see this

notice the "Welcome to my Website Tutorial" in the bar. you can edit this between the <title></title> tags to say whatever you want.

Now that we covered that, we can move on to the <body> Tag.

The body tag can have a ton of functions. i'll show you the basics for now

right now we have just <body>

right now we're gonna change the background color to black and the text to white. (the defaults are reversed)

replace the <body> tag with this:

<body bgcolor="black" text="white">[b]

see how this is working now? all my properties of the document are going directly after <body and before the >

bgcolor - is the background color. here we can use the origional 16 colors by name, or use a hex number for more colors
ex. black, blue, green, #000000, #0000ff, #00ff00 or even more complex colors with hex #CF36A5 which is some sort of pink I believe.

if we wanted to put a picture as a background, this is what you would do:

<body background="pic.jpg">
this will work if it's a small picture pattern.

for a big picture that you don't want to move (IE only)
<body background="pic.jpg" bgproperties="fixed">

for some reason the fixed aspect doesn't work with firefox.

now for more basic <body> properties:

link - The link color (will go into links a bit later)
alink - active link color
vlink - already visited link color

you put these in like so

[b]<body bgcolor="black" text="white" link="blue" alink="#CF36A5" vlink="#00ff00">

now, lets save that just so we don't get too ahead of ourselves. (it's always good to save your progress and check it every so often)
If you double clicked on index.html right now, a window will pop up and just be black cause that's the background color.

now, lets add something to the website.

lets start with a large welcome and center it.

there are 2 ways to do this, use what your comfortable with, each has it's advantage.

1st way
<h1 align="center">Welcome</h1>

h1 - refers to the text size. h1 being the biggest, h6 being the smallest
align="center" - Centers the text on the page. you can also replace center with left or right
</h1> - tells the browser your done with that code.
using this method it also bolds the text automatically

2nd way
This way is a bit trickier, but it has it's advantages.

<center>Welcome</center>

<center></center> - anything between this tag will be centered
 - this makes the text between these tags bigger than the default size by 5
the 5 can be changed to however big or small you want the text. can even use negative numbers ex. -5
It is not bolded by default. to bold it it's simply this:

<center>Welcome</center>

the is bold between the tags.
 - is Italics
 - this is used to drop down a line on the website. you do not need to close the tag with 

but lets stick with the second way without the bold tags for this tutorial
paste this in so your page source looks like this

<html>
<head><title>Welcome to my Website Tutorial</title></head>
<body bgcolor="black" text="white" link="blue" alink="#CF36A5" vlink="#00ff00">
<center>Welcome</center>

</body>
</html>

Links

Making links is a bit more difficult. depending on what you want to do.

A simple link

after <center>Welcome</center> type 
this means drop down 3 lines.

now to make the link.

<a href="http://www.soozoo.ca">Soozoo.ca Link</a>

This is a basic tag. simply the Soozoo.ca Link is displayed in blue (blue because that's what you set the link to be unless you've already visited this link before, then the color would be whatever you set the vlink to be) and is clickable by whomever is on your site and it brings them to soozoo.ca.

if you want the link to be displayed in a new window instead of the current window (ie, your site) then add this little bit of code

<a href="http://www.soozoo.ca" target="_blank">Soozoo.ca Link</a>

the target="_blank" means open in a new blank window and go to http://www.soozoo.ca

once you learn to put images on, you can also make them clickable. I'll show you how to put images on right now.

Images

to make an image display on your website, simply add this code

<img src="yourpicture.jpg">

that's it. just make sure that your picture is in the same directory as the page.

If the picture is in a directory called images, then modify the code to look like this
<img src="images/yourpicture.jpg">

now, you can keep the default size of the picture or you can modify the picture to be the size you want

like this

<img src="yourpicture.jpg" width="100" height="80">

the width and height are pretty straight forward commands.

now, to make an image clickable.

<a href="http://www.soozoo.ca" target="_blank"><img src="yourpicture.jpg" width="100" height="80"></a>

now, when people click on your picture, they will be brought to soozoo.ca in a new window.

Your HTML document may look something like this

[b]<html>
<head><title>Welcome to my site tutorial</title></head>
<body bgcolor="black" text="white" link="blue" alink="#CF36A5" vlink="#00ff00">
<center>Welcome</center> 
<a href="http://www.soozoo.ca" target="_blank"><img src="yourpicture.jpg" width="100" height="80"></a>
</body>
</html>[b]

now save it, and look at it in your browser. if you didn't have a picture in the right place, or spelled the name of it wrong, it will come up with an X. if you did have a picture there, everything should work fine.

I'm gonna stop this tutorial there because anything after this, gets a lot harder.

Practice this and when your ready, you can explore more HTML codes to make your website much more appealing.

There is so much more you can do with html, but I can't get into it right now cause it might confuse you. once you think you got this down pat. then you can learn more advanced HTML.

Enjoy

yes_no_maybe?

Nov 5 2007, 03:51 PM

Thanks wheels2285. I'm gonna save that and practice it, been thinking of learning some HTML for a while.
Cool

Zeb

Nov 5 2007, 08:52 PM

The default view for Windows looking at files is to hide the extension from files if they're known. This means .txt, .wav, .jpg and other won't show those extensions. If you save mymusic.mp3 all you'll see is mymusic. If you see these extensions then you don't have to read any more.

This hiding of extensions is to help prevent people "damaging" files by changing extensions themselves. Windows (99.9%) of the time uses these file extensions to identify what a file is. For example, if you change a ".txt" to ".jpg" and try and open the file by double-clicking it, your text editor won't load but instead Windows Picture And Fax Viewer will open (or whatever else .jpg has been set to open with).

Why am I saying this?

If by accident you save your HTML file out without manually adding ".html" on the end of the filename when you save it. Notepad doesn't know it is an HTML file and if you forget to add it it'll add ".txt" instead. If this happens you can fix this here:

Control Panel>Folder Options>"View" tab

In the listview section make sure the following is UNTICKED:
Hide extensions for known file types

Click "OK" and all those strange extensions will make themselves known.

In addition to wheel's great tutorial...

HTML has a lot of tags and each tag can have a multitude of parameters. I've been making web sites for about 5 years now and I can't remember all of them. It's all very well buying books - they can be expensive and one is never enough. The only web design books I have are pocket guides to CSS and Javascript, a book on MySQL and a dummies guide to PHP (both latter books were mistakes and I wish I never purchased them!)

If you want to look up a particular tag just fire up Google and type:
html <tag>
Replacing <tag> with the tag you want information on (eg. html body)

I used this site to teach myself HTML, PHP and MySQL:
http://www.w3schools.com

trexaurus

Nov 8 2009, 02:07 AM

QUOTE (wheels2285 @ Nov 3 2007, 12:47 AM)

HTML (The Basics)

Thanks for the post, but If u dont mind I would like to draw our attention to make world simpler, smarter, and sorted place. So we must follow standards which would help us make web a better place to be in. Some of the tags are not standard compliant, like : bgcolor, img etc. CSS (Cascading style sheets) have taken their place.

Directing users to w3schools.org will be a better idea to help them learn the mid layer of our beautiful web

Flatline

Nov 8 2009, 06:15 AM

Hey trexaurus and welcome to the Darkside

I notice you haven't post a introduction yet. Please feel free to do so here although by no means should you feel obliged.

As far as I was aware those tags are still support they are just outdated. Browsers do tend to be backwards compatible with code, and for creating a very basic page this is a great guide. CSS gets a bit complex for beginners to HTML. Although W3Schools is a excellent place to learn.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.