[Maqic]

[TUT] HTML Beginner Tutorial [HTML]

What is HTML?

HTML is a short word for Hyper Text Markup Language. The purpose of HTML is to code and publish websites. HTML has another side to it, in which is the coding language “CSS”. CSS stands for Cascading Style Sheets. In this thread, we will stick with HTML.

Could HTML get me a job?

Most definitely, if you are a successful coder then there are many jobs out there for you. For instance, creating templates and selling them.

HTML Elements and Meanings

<html> - Start and End the coded language.
<title> - The Title of the project.
<head> - Head text, where you put the website name.
<body> - For Elements such as background color, font color etc.
<p> - Paragraph tag, used for information about your website.
<marquee> Get moving text on your website.
<h1 - h6> - h1 = Biggest text size, h6 = smallest text size.

In this tutorial, we will be using the code tags above.

Lets Begin.

Spoiler (Click to View)
<html>


Now, we always have to start and end our work with <html>

Next up, we will be using <title>.

Spoiler (Click to View)
<html>
<title> "Your Website Name" </title>



Notice how I have ended the tag with </title>. This is very vital, and important.

Next up, we will be adding colours to the body.
For this, we will be using the body background tags, read on to find out more.

Spoiler (Click to View)
<html>
<title> "Your Website Name" </title>

<body>

<body bgcolor="black">
<font color="white">

</body>
</html>



Now, I have used the colour white for the font colour, and the colour black for the background. You can change it if you want. We will be adding text soon.

Next up, I will be adding text and moving the text around.

Spoiler (Click to View)
<html>

<title> "Your Website Name" </title>

<body>

<body bgcolor="black">
<font color="white">

<p>

<head><h1><b> "Website Name" </b></h1></head>

<h2>This is a tutorial by Maqic.</h2>

</p>

</body>
</html>


So far, I have added text and added a head. But your probably thinking, this is so ugly; I want to move it around and space it up.

Well, now I will be showing you the <center> & <br> tag.

Center and br tag added.

Spoiler (Click to View)
<html>

<title> "Your Website Name" </title>

<body>

<body bgcolor="black">
<font color="white">

[The <center> tag goes here]

<p>

<head><h1><b> "Website Name" </b></h1></head>

[The <br> tag goes here]

<h2>This is a tutorial by Maqic.</h2>

</p>

</body>
</html>


If your wondering about where the tags have been put. Then you can change it. Where you want a center, you put a <center> and end where you want it to stop with a </center>.

Now for <br>. What is br? <br> is a tag that allows you to split up text in lines. For every br you have, you will get a split in your text.

So far, we have added some text in our work. Well thats not enough, we can still add some text and make the website fancy.

Next up

Spoiler (Click to View)
<html>

<title> "Your Website Name" </title>

<body>

<body bgcolor="black">
<font color="white">

[The <center> tag goes here]

<p>

<head><h1><b> "Website Name" </b></h1></head>

[The <br> tag goes here]

<h2>This is a tutorial by Maqic.</h2><br>

(Now the text below, I have added a marquee to it.)

<marquee><h4> I am Maqic, I like to help others code HTML. If you would like some help, PM me on Hack Forums. </h4></marquee>

[Some br lines I have added]

<br><br><br><br><br>

<h4> Made by Maqic </h4>

</p>

</body>
</html>


Now that should be about it, if your a beginner. This should be good for you. You can find more help around here:

w3schools
HF Coding and Programming
PM Me
Find eBooks

Thank you for reading my tutorial, I have been Maqic, goodluck in the future.

[Human Skulls]

For this mans second post. I wanna say, it is rare for a new member to actually put forth this kind of contribution. +1 from me my friend. I hope this wasn't ripped :) Glad to have you around

[Maqic]

For this mans second post. I wanna say, it is rare for a new member to actually put forth this kind of contribution. +1 from me my friend. I hope this wasn't ripped :) Glad to have you around

Thanks mate, after learning a months html. I thought I'd make a quick beginners tutorial for others. I come from Otaku Forums, there I just played MC and Habbo.

Back to the thread, I managed to finish and complete it within 2 hours (Taking breaks etc).

[#Purple]

Good HQ tut Man! Welcome To HF.
Spoiler (Click to View)PS. NEVER ask for rep, it just gets you red apples.

[Maqic]

Good HQ tut Man! Welcome To HF.
Spoiler (Click to View)PS. NEVER ask for rep, it just gets you red apples.

Cool, I'll stick to your advice bro :). I read the rules and understood everything everything before posting my first thread.

[Yak Is Bak]

nice man might post some html tuts myself to help some people out

[Justin4880]

Nice tut this helped me out thanks bro

[Maqic]

Thanks for the feedback ;). I will be adding images, music and more code lines to my Advance Tutorial that I will release soon.

[6ft2]

Nice guide.. but you can find stuff like this easy on the internet.

http://www.web-source.net/html_codes_chart.htm

in much more detail.

[Maqic]

Thanks for the feedback everyone, really appreciate it.

[Poppins]

Errm just a couple of things:

A) What's with mentioning the marquee tag? I thought that died out when people when still using tables for layouts.

Code

<p>

<head><h1><b> "Website Name" </b></h1></head>

<h2>This is a tutorial by Maqic.</h2>

</p>

There's so much wrong with that snippet of code.
B) Why are you wrapping it all in a p tag? P tags are meant to show paragraphs. In a decent layout you wouldn't have:

Code

<p><h1>blur</h1><h2>blur</h2>blur</p>

You should have:

Code

<h1>blur</h1>
<h2>blur</h2>
<p>blur</p>

C) Why are you using the <head> tag like that!? A head tag goes outside and before the body tag to show meta data and what not. You shouldn't be having any content output in the head tags. If you are going for semantic tags then at least use HTML5s <header> tags with the HTML5shiv.

D) Why are you using the font tag? Use an external CSS file to edit any font. Same with the 'bgcolor' thing.
E) BR tags are meant to be self closing. EG: <br /> not <br>
F) There's no doctype or META charset there at all.

I know you probably meant well by providing this tutorial but beginners shouldn't follow this at all. You seem like you started writing HTML about an hour ago. You don't actually explain a thing to beginners. You just go 'put this title tag in' and don't even explain what it's for.

[Icymanipulator]

Thanx for the share, any new info I can learn about HTML is awesome!!!

---

Thanx for the share, any new info I can learn about HTML is awesome!!!

[Han.]

Marquee is deprecated and it's heavily advised that you stay the hell away from it.

All HTML tags to do with style are old and obsolete, CSS handles ALL style now.

[Justin P Was Here]

this is a good tutorial. Would be even better with some pictures though :D

[Cerr0r]

This guide shoudn't be here why would anyone learn something that's older than html 5?