Hack Forums
[Tutorial] The Great HTML Tutorial *Noobfriendly** - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Coding (https://hackforums.net/forumdisplay.php?fid=151)
+---- Forum: Coders Lounge (https://hackforums.net/forumdisplay.php?fid=5)
+---- Thread: [Tutorial] The Great HTML Tutorial *Noobfriendly** (/showthread.php?tid=3013345)

[Tutorial] The Great HTML Tutorial *Noobfriendly** - ComplexUnicorn - Nov 11, 2012

Hey guys!!!✌

Though I wanted to make a big HTML tutorial since there isnt any around here covering the basics.
There is probably some HTML tutorials covering some of the stuff ill be posting, but please dont hate about that.

Part 1: Basic codes


There is some lines that we always want to include. The very first line should be:
Code
<!DOCTYPE html>

The code makes the document type into html so that we can write html.

An HTML element is everything from the start tag to the end tag. Example:
Code
<html> (This is a start tag)
</html> (This is an endtag)

So whenever we are writing a HTML code we always want to start with start tags and finish with end tags. That is probably what is the most difficult about HTML in my opinion.

Okay, so lets go ahead and make a heading.
The code for a heading depending on the size is <h1> at the biggest and <h3> at the smallest also we have to include the end tag.

Just like we do it batch, open notepad.
And write:
Code
<!DOCTYPE html>
<html>
<body>


Thats the start tags, now to the header.
Code
<h1> This is a large header! </h1>
<h2> This is a medium header! </h2>
<h3> This is the smallest header! </h3>

Like I said <h1> is the biggest and <h3> is the smallest.

Now lets add the end tags.
Code
</html>
</body>

Everything together should look like this:
Code
<!DOCTYPE html>
<html>
<body>

<h1> This is a large header! </h1>
<h2> This is a medium header! </h2>
<h3> This is the smallest header! </h3>

</html>
</body>

File > Save As > NAME.html > Desktop > Change the "save as type" to All files.

Now there should be a blank icon on your desktop like this:

[Image: 7kTfy.png]

Double click it and it will open in your webbrowser!

NOTE!!:
*Save the code as .txt file too, because when you're going to continue coding you'll have to delete the html file and save it again when you're gonna test it again!

Part 2: Inputs

The start and end tag for an input is <form> and </form>

So we will always use that tag when we are coding an input.

There are 5 types of inputs/forms in HTML.

1. Text Fields
2. Password Field
3. Radio Buttons
4. Checkboxes
5. Submit Button

Each of these uses the tag <form>

1. Text Fields:

Code
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Thats two boxes that you can write in. In the example, First Name and Last Name. As you can see the input type is text, that means we can write text in it. And as you can see it says: name="firstname". Thats our variable. Like in batch we write like: if %firstname%==. This is like HTML's variable. so that if we change it to example test. Test is our variable. So, whatever you type in there is the variable. (Before hating, Thats the way I learned it. Im not 100% sure. But Im pretty sure I am because its very selfexplained)

Should look like this:
[Image: zZiUD.png]

2. Password Field

Code
<form>
Password: <input type="password" name="pwd">
</form>

As you can see the input type is now password, that makes every letter a black circle like when you type in a password :) Very selfexplained too.

Should look like this:
[Image: jDrfg.png]
I wrote password in the box.

3. Radio Buttons

Code
<form>
<input type="radio" name="choice" value="yes">Yes!<br>
<input type="radio" name="choice" value="no">No!
</form>

The choice is yes or no.

It should look like this:
[Image: IAjIE.png]

4. Checkboxes

Code
<form>
<input type="checkbox" name="socialmedia" value="fb">Facebook<br>
<input type="checkbox" name="socialmedia" value="yt">Youtube
</form>

Should look like this:
[Image: 7TzI4.png]
I chose Facebook and Youtube as example.

5. Submit Button

Code
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

This box says: Username:

Looks like this:
[Image: RNdNL.png]

Thats it for inputs :)

Part 3: Colors

When you want a background color we just add some stuff to the body tag.

Colors can be found here!

I want my color to be DodgerBlue, so my code will be:
Code
<!DOCTYPE html>
<html>
<body style="background-color:DodgerBlue;">

<h1> This is a my HTML document </h1>

</html>
</body>

It will look like this when I open my html file in my browser:
[Image: 53p5D.png]

Easy as that! 👍

Now to the last part.

Part 4: Paragraphs

Paragraphs is like the main text at normal font (11 or 12 I think) so when youre writing a website in HTML you'll be using alot of paragraphs.

The start and end tag og paragraphs is <p> and </p> so thats very simple.

So the code will be:
Code
<p>This is a paragraph! </p>
<p>This is another paragraph! </p>

Easy to remember.

You can also add <br> in the middle of the text to brea (enter) so that it will continue below.

Thats it for my tutorial.

Feel free to reply if I forgot something. 🤝

No hate, spent alot of time on this 🤮

Thanks alot! ✌✌

-ComplexUnicorn 🎉

[Source: w3schools]

* - SmG R3c0N - Nov 11, 2012

You could add some other simple things like:
1.Head part with the title tag
2.Simple anchors and linking
3.Images
4.Marquee (as an example of basic effect) XD
5.Formatting with tags for italics, bold, underline, etc.

That would make it look cool for beginners. :P

* - rockandralph - Nov 11, 2012

Thank you for this thread,
This could be helpful for me as a newbie in HTML :)

* - ComplexUnicorn - Nov 11, 2012

(Nov 11, 2012 07:54 AM)SmG R3c0N Wrote:  You could add some other simple things like:
1.Head part with the title tag
2.Simple anchors and linking
3.Images
4.Marquee (as an example of basic effect) XD
5.Formatting with tags for italics, bold, underline, etc.

That would make it look cool for beginners. :P

I know, but I didnt want to be a total copycat from w3schools :)

* - Camile7 - Nov 11, 2012

Thank you for this great html guide very usefull

* - SmG R3c0N - Nov 12, 2012

lol was just pointing out, the tutorial is good enough for beginners, I'm sure those interested will find other sources of those not included here. :D

* - evol - Nov 12, 2012

Ok you've read this tutorial and the many others and you think your good enough to code in HTML now its time to take a challenge to see just how good you are.

So goto <code/racer> - http://coderace.me/