What's new
By:
Filters

The Very Basics of HTML!

McStormify

McStormify

Expert Talker
PF Member
Messages
836
Reaction score
0
Points
602
Peak Coin
0.000000
Hi!

This tutorial is for absolute beginners. It is the easiest of HTML. To use HTML, you need either an online editor or a word editor like notepad. So here we go:

In HTML (Hyper Mark-up Text Language), everything goes inside two tags. <html></html>. It would look like this on a webpage:

Code: 
<html>
</html>

To add a heading, use another four tags. <head></head><title></title>. It would look like this on a webpage:

Code: 
<html>
<head>
<title>
TITLE GOES HERE
</head>
</title>
</html>

To get started on the actual body of the webpage, you need two more tags. <body></body>. It would look like this on a webpage.

Code: 
<html>
<head>
<title>
TITLE GOES HERE
</title>
</head>
<body>
</body>
</html>

Now you need to add headings to the body: <h1> is the biggest one, and <h6> is the smallest one.

Code: 
<html>
<head>
<title>
TITLE GOES HERE
</title>
</head>
<body>
<h1>This is the heading</h1>
CONTENT GOES HERE
</body>
</html>

And to add paragraphs, you need to know <p></p>. It would look like this:

Code: 
<html>
<head>
<title>
TITLE GOES HERE
</title>
</head>
<body>
<h1>This is the heading</h1>
CONTENT GOES HERE
<p>THIS IS A PARAGRAPH
</p>
</body>
</html>

To add a line break, use <hr>.

Code: 
<html>
<head>
<title>
TITLE GOES HERE
</title>
</head>
<body>
<h1>This is the heading</h1>
CONTENT GOES HERE
<p>THIS IS A PARAGRAPH
</p>
<hr>
MORE TEXT HERE
</body>
</html>

This is what the end result looks like. It's just plain, but the style can be changed with CSS, which I'll explain in future tutorials :)

Thanks,
McStormify
 
Adding some more info...

In my opinion, <html> and </html> are the same tags... But with the / in the tag, we close it.
Another thing you should keep in mind if you are working with many tags in a page...

Keep an eye on which tags you opened and where. The best solution is to close them from the center of the code to avoid confusion. Like:
Code: 
<font style="font-family: Arial; color: Black; text-shadow: 2px 2px 2px rgb(136, 136, 136);"><b><u>Welcome!</u></b></font>
See what I mean with "from the center", right?
When you make a more complex pages, it can get very annoying to search for the tags and closings of them. But if you follow that example, you always know where to look.

And some interesting snippets...
Ever wondered how to make a simple "space" at the start or end of the text line in html? Simple:
Code: 
&nbsp;
That strange letter mix up there equals with one "space" in html. =)

And about the <hr> tag...
Well for simple line breaks, I suggest using <br> instead... Because the <hr> tag usually defined to have a horizontal line before or after the break (usually defined in the CSS). :wink:
 
You must log in or register to reply here.
Back
Top