[Tutorial] [Basics] Learning HTML - Step One [/Basics]

tz3 · November 11, 2012

Hey Guys!

This is Romeo here and hoping this to be a good thread to start off on Maxcheaters Forum. HTML is one of the basics and most important languages to learn. PHP and HTML are inter-linked. HTML can exist in PHP. It is also one of the most diverse internet language out there and is also my personal favourite. I will go through the absolute basics of HTML so that both youn'uns and old'uns can understand this tutorial with ease! So, what are we waiting for, lets get started!

What is HTML?

HTML stands for HyperText Markup Language. It is essentially the building blocks of programming languages and I reckon one of the easiest to learn. Other online programming languages, such as PHP, CSS styling and other languages can be implemented with HTML, hence it being such an important piece of programming language. HTML can be hosted on any type of server, unlike PHP and ASPX it requires no external installation for the server to read the file. You can easily demonstrate this yourself is by making a small HTML file in NotePad and saving it as .html and then opening it up in your browser. Despite being the PHP now being also one of the most frequently used, HTML cannot be ignored, but is much more client-sided than PHP and are almost incapable of doing many capabilities that PHP can attain. This is the reason why HTML and PHP can be implemented together to get the best results

The Practical Side of HTML

Ok. Now you know what HTML is and its connections. We will now introduce you to the start of HTML coding.

Before I continue, I must say some very important points about HTML that is unlike other languages:

<html>

<head>
<title>Title of the Webpage</title>
</head>

<body>
<!--This is a comment tag. The server will ignore this when loading and is just a "comment".-->
</body>

[/html]

Now, I will explain what the hell all of that gibberish means.

Every single element in HTML is marked by <> tags and to signal the ending of an element it is finished witha </>. Every HTML file will have <html> at the top and the </html> at the very bottom. The <head> are used to contain head elements and head elements ONLY. The example I chose was the <title></title>. This symbolises the titling of the webpage. Those that can be in the head include:

<title>
<style>
<base>
<link>
<meta>
<script>
<noscript>

I will not explain about heads yet, because they can be a little complicated. The Body. <body></body> contains just about all the coding in side a html file.

Some of its Functions

Some of these functions and basics allow you to manipulate words and small theming and also adding in external or internal images depending on the existence of them. The first thing I will teach is headings.

<html>

<body>

<h1>This is heading 1 [Largest]</h1>
<h2>This is a heading</h2>
<h3>This is a  heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is heading 6 [smallest]</h6>

You will realise that if you run this locally on your computer the H1 Tag which contains "This is heading 1 [Largest]" would be the largest text and gradually becoming smaller until <h6>. Remember to end or signal the ending of a tag you must have a </[element]> and put the element of whatever you are ending.

Next, Paragraphing which is basically putting spaces in between text the correct way without entering the spaces via practically.

<html>

<body>

<p>Basically this is the first paragraph.</p>

<!--That is the first paragraph and the second one is below.-->

<p>This is the second paragraph which is spaced with one line.</p>

</body>

</html>

Paragraphing just enters a line in between text and you will find is actually a very useful element.

HTML Linking

HTML linking is extremely useful. You can use a variety of variable to carry out linking. Such as:

Buttons
Pictures
Specific Text
On-Mouse-Over
On-Click

Since I want to keep it basic I will use text linking instead and if the poll I will add is good and everybody wants a part 2 then I will keep going :yeye:.

<a href="http://www.maxcheaters.com">This will link you to maxcheaters</a>

The above code works thus:

1. href = "http://www.maxcheaters.com" is the link that the link will take you.

2. "This will link you to maxcheaters" is the text that would appear when the html file is run.

3. Click on it and maxcheaters should appear.

HTML Images

HTML imaging is basically imputing an image into a html document. You can do linking etc.

<img src="url" alt="some_text"/>

It is used with a <img> tag. Take note it works differently to the HF version. It is not<img>urlhere</img> this is just shortened form for HF usage and easier. Try not to get used to it :nono:. The url is where the direct link of the image is. And the alt is just alternate information for the user, but is not necessary.

You can take it further and edit the size of the image to fit what you like:

<img src="url" alt="alternationthingy" width="100" height="100" />

The width and height are in pixels. You just play around with it until you get a sizing you prefer 8)

HTML Conclusion

This is the pure basics of HTML. I hope this has helped and that you will do the poll if you would like a Part 2.

Thanks and Ciao. :P

Nicolás™ · November 11, 2012

<a href="http://www.maxcheaters.com">This will link you to maxcheaters</a>
The above code works thus:

1. href = "http://www.maxcheaters.comt" is the link that the link will take you.

2. "This will link you to anarchyforums" is the text that would appear when the html file is run.

3. Click on it and maxcheaters should appear.

One mistake here,

Credit yours? Keep up mate!

JaharakaL · November 11, 2012

Great tutorial Romeo.+1 from me

tz3 · November 11, 2012

One mistake here,

Credit yours? Keep up mate!

oh thanks i will fix it very soon

Tonight i have to make Step Two

RandomDude · November 11, 2012

Very good and simple tutorial. This will differently be usefull for lot of people!

Waiting part 2

tz3 · November 11, 2012

Very good and simple tutorial. This will differently be usefull for lot of people!

Waiting part 2

Coming Soon Part Two

Thanks

`Heroin · November 11, 2012

Awesome Romeo =)

tz3 · November 11, 2012

Awesome Romeo =)

8)

`BoØmBoØm · November 11, 2012

awesome +1

Traitor™ · November 11, 2012

no words. Nice guide dude. GZ for your work.

tz3 · November 11, 2012

no words. Nice guide dude. GZ for your work.

Thank u Traitor.

Step 3 Coming Tommorow

[Tutorial] [Basics] Learning HTML - Step One [/Basics]

Recommended Posts

tz3

Nicolás™

JaharakaL

tz3

RandomDude

tz3

`Heroin

tz3

`BoØmBoØm

Traitor™

tz3

Create an account or sign in to comment

Create an account

Sign in

Posts

Topics

Browse

Activity

Store

Important Information