[TUT] Basic HTML

Alright well at school today we learned the basic format of HTML and what it should Include. Basically what I want to do with this thread is through my lessons I will update what we did and how we did it just to get some people started toward HTML. So Listen up Class! PS: Feel free to correct me at any part if im wrong.
IMPORTANT READ: ALL THE . I PUT INFRONT OF THE TAGS REMOVE THEM THAY ARE JUST SO IT DOESNT DISSAPEAR

So HTML. WTF IS TAHT??
Well, HTML stands for; Hypertext Markup Language: a set of tags and rules (conforming to SGML) for using them in developing hypertext documents.

Huh?

What do you use HTML for.
Mainly websites and what not. But if you get into it go google some uses for it.

Alright so to begin I will tell you HOW to start a HTML text document.
For this we will use notepad. Simple,Easy, everyone has it (almost).
Open the text document and the first thing you should do is Save as.

Save it as something.html If you want to put spaces use a _ because other than that it will not work.

Lesson 1:
How to setup,create title, create body,how to view your creation.

1. After the save is done you will want to start like so:

Code:

remove the .<.html>

<./html> These tags are necessary to start. If you do not have these your site ill most likely be corrupted or just not work.

2. Ok so now that you have <.html> <./html> Notice how there is a / in the last <.html>. That is a closing tag. You put that in front of any tag you want. For example:

Code:

Bold: Would be <.b>InsertTextHere<./b><<<Is used to stop bold. Get it? Got it? Good.

3. So maybe you want a title. For example look at the top of your browser. The title of posting a new thread is MPGH - MultiPlayer Game Hacking - Post New Thread. That is a title.
Title tags are as follows:

Code:

<.title> Insert Title Here <./title> <<<Notice again   the  ClosingTags

4. So now that you have the title, it doesnt show up? WRONG! By title it means the top left remember the sentence. I said above.

Now you got your title. What now? Lemme know how to put text in der...
This is called the BODY of your HTML page.

Code:

Body Tags are as follows:
<.body>InsertTextHere<./body>
This is the main text that shows up on your page. You can adjust sizes, font, ext by putting diff tags inside those tags. [List is below]

If you want a 'title' that WILL show up on your page you need heading tags.
These tags create a Bold text that will act like a 'Article'.

Tags:

Code:

<h1></h1> Also if you want more than 1 'Article' or heading you can replace the 1 with a 2,3,4,ext but you need the previous one. For Example:<h1> Hi im Alex! </h1> 
I want another one: <h2> Hi I like soccer! </h2> 
Get it? Got it? Good.

5.Ok so now your done basically with the basic setup. How to view it? Best with FireFox: http://mirror.netcologne.de/mozilla....up%203.5.2.exe

Get that installed and open it up.
Once it is up follow as instructed.
Go to File>Open File> and Locate and Open the HTML wordpad document that you have. BUT make sure you saved it after you added the new stuff.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -End: Lesson 1

Lesson 2: More Tags

Ok in lesson 2 we will be learning about how to add some Pictures and or how to add a website link to your page.

Objective: Learn and successfully add a link and Img to your webpage.

Ok so. Where should I start. How bout adding a Image to your webpage.

The most important thing to remember in posting a img is the file size. The size should maintain boundaries and by that I mean no like 300mb file size img lol kk? For example. A picture of a dog you took. If you open it up on your comp and it is a fairly large size then use any photo editing software (IE

hotoshop) and lower the size.

Once you have a image you want to post up save it, and place it at the same file location as you .html or else it will not work...

To put the image on the website:

Tag:

Code:

<.img src:"InsertImageNameHere.gif" /> 
Be sure if you drew the image you save it as a .jpg. If like so the dog picture 

you just cropped then make it a .gif. Also notice the spaces I put. Those are 

necessary (based on my instructor). Remember the img will not work if it is 

not in the same folder as the .html file your constructing the website on. IE 

Desktop>NewFolder> Includes-first_website.html and blabla.gif

If done correctly it should look like this:[IMG]http://i816.photobucke*****m/albums/zz89/alexrules777/w53.jpg[/IMG]

Ok so now you have your image, how bout some sites? We are going to create a heading with the title My favorite Sites

Remember heading tags are <h1> </h1>
Now that this is done add a website. This is the tag for it.

Tags:

Code:

<p> (not necessary) <a href="http://www.mpgh.net">MultiPlayer Game Hacks(title of the link)</a></p>

If it works this should happen:[IMG]http://i816.photobucke*****m/albums/zz89/alexrules777/as112.jpg[/IMG] It creates a Link that redirects you to a new website.
End~
-------------------------------------------------------------------------

Lesson 3:Coming soon~

First off, great tut, Looks good

Originally Posted by liquidforce

wrong.. you are only limited to what you know, if you know alot about html, you can do really awesome things with it, just because php and c++ have fancy prgrams to assist you, doesnt mean you can't do it with html, html is as good if not better and easier code to work with than php

on topic/off topic

Html is very powerful, and can do alot more then most new designers think, alot more, some people think you may need php for alot of things that you can do in html , however hand's down PHP is the more powerful of the two languages, as it's possibilities are numerous compared to html,

Both great, but in either case, Html is a great web design language, and this tut was good too.

[TUT] Basic HTML

Post a Reply

Similar Threads

Tags for this Thread