Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

Basics of HTML. ( Tutorial )

Basics of HTML.


Welcome to my first tutorial on HTML.

Definition of html.
HTML or HyperText Markup Language is the main markup language for creating web pages and other information that can be displayed in a web browser.

Source wikipedia.
Spoiler (Click to View)


Unlike C+ or other coding languages HTML does not require a IDE to run / write just a notepad and some patience.

Please note I am on linux I will add pictures when I go back on windows.

Lets get started.

Things you will need.
  • Notepad.

  • Patience.

  • A internet browser.



Before I throw you in the deep end lets go through some tags.

<HTML> Always at the top of every page.
</HTML> Always at the bottom on every page.
<Body> The main part of your website. </body>
<Title> What will be shown on the tab at the top of the browser </title>

There are hundrends more tags but we are going to use these for now.
So lets make a small website :)

So we want to type in our notepad
Code
<html>
<title>
Hello HF
</title>
</html>

Now go save as "Name".html [ EG : HF.html ] save as all file types aswell.

Once we have done that double click it and let it run in your browser and you will see in the tab area " Hello HF " if you dont you may have saved it as a .txt or not saved as all file types.

Now go back to the notepad we are using and lets take the nest step and get some content on our website.

So editing of the code we already have lets add a message letting people know what our site has.
Code
<html>
<title>
Hello HF
</title>
<body>
Hello everyone this is .... and this is me learning HTML on hackforums :)
</body>
</html>

Now we have made our first little site.



I am ending this tutroial here as I want to test the water with people and see if you would like me to dig deeper into <HTML> ?
It would be better if you post tutorials related to HTML5 which is the latest
(Feb 1, 2014 12:12 AM)Numinous Wrote:  It would be better if you post tutorials related to HTML5 which is the latest

I do plan on it but I want to know people will read them. I plan and having a tutorials in HTML5 , JS , CSS etc.
(Feb 1, 2014 12:12 AM)Numinous Wrote:  It would be better if you post tutorials related to HTML5 which is the latest

You can't dive into the new HTML5 tags without covering the basics. c:

OP, you should always have <!DOCTYPE html> at the top of your HTML document, in addition to <html>.
(Feb 1, 2014 12:45 AM)xhflhkeuhwguu34 Wrote:  You can't dive into the new HTML5 tags without covering the basics. c:

OP, you should always have <!DOCTYPE html> at the top of your HTML document, in addition to <html>.

Can't belive I missed that thanks for pointing that out.
(Feb 1, 2014 12:45 AM)xhflhkeuhwguu34 Wrote:  You can't dive into the new HTML5 tags without covering the basics. c:

OP, you should always have <!DOCTYPE html> at the top of your HTML document, in addition to <html>.

You kind of contradicted yourself here man, that is the specific doctype for HTML 5 lol... 🤣

I think the more appropriate thing to say is "You need to specify a doctype"...

Good catch though Xen0n.

If you do not specify a doctype, you could encounter some really weird errors in some browsers and your code could potentially not validate...

M3nace: In addition to the doctype issue, you have a few other issues...the title tag must appear in a <head> tag, not alone, and it is best practice to supply a character set and language for your respective document, oh, and if we are talking semantics, you shouldn't have text without a tag of sorts around it, be it span, p, blockquote etc...Your code should technically look more like this (assuming doctype=html5):

Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello HF</title>
</head>
<body>
<p>Hello everyone this is .... and this is me learning HTML on hackforums :)</p>
</body>
</html>
Even though it would still work with your code, it's proper practice to have a tag for your content in the body, perhaps <p>. Also, <head> before <title> would also be necessary.
uhh look nice :P
- but what about <br> xD?
(Feb 3, 2014 01:56 AM)ailicis Wrote:  uhh look nice :P
- but what about <br> xD?

I know I am just testing to see if I should right up a full tut.
You missed the most vital part of HTML. the opening must start with "<!DOCTYPE html>"

If your going to make a tutorial so simple please make sure you get everything spot on.

EDIT: you also forgot the <p></p> perimeters. Please go and learn yourself before teaching :)
You should format your code a bit better so theres indents and such. Nice little guide though.
It seems to me like you posted this without knowing how to write in HTML yourself; not only is this not HTML5, but it doesn't even cover the basics very well.
[Image: nhCBmdu.png]
I do plan on it but I want to know people will read them. I plan and having a tutorials in HTML5 , JS , CSS etc.


Possibly Related Threads...
Thread / Author Replies Views Last Post
by priluxDec 10, 2016 11:18 AM 1 238 Dec 10, 2016 11:18 AM
Last Post: VirtualFrost
by gabrielchihongleeJan 19, 2016 03:00 AM 7 497 Jan 19, 2016 03:00 AM
Last Post: gabrielchihonglee
by CodeBinaryJan 3, 2015 10:52 AM 7 224 Jan 3, 2015 10:52 AM
Last Post: NoScript