• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

HTML Basic Structure Tutorial

Dixter

Amateur Web Developer
Joined
Mar 31, 2009
Messages
660
Reaction score
11
Hey there. This stuff is half for me and half for you. You see I'm learning web development and computer programming, and so I want to test my knowledge and see how well I can write a tutorial on something basic which I already know, so here it goes:

Now first you must understand what HTML actually is. HTML stands for Hyper Text Markup Language. HTML only displays the content of a webpage. Formatting and styling should be stored in a separate sheet usually styled in CSS and Javascript.

HTML contains tags, what are tags you might ask? Tags are simply words in <these things>. For example <html> is a tag, and it is how you start every document.

Every document should have a basic structure like this:

HTML:
<html> /*Defines that this is where the html document begins.*/
<head> /*This is where internal style sheets and different functions are stored if they aren't in an external style sheet.  Don't worry about this for now.*/
<title> /*Defines what the title will say, you know the little bar at the top of your browser which says "Otland" when you access this site.*/
</title> /*Defines the end of the title*/
</head> /*Defines the end of the styling information.*/
<body> /* Pretty self explanatory, defines the [B]body[B] of a web page, this is the part that will actually be displayed when someone accesses your webpage.*/
</body> /* Defines the end of the body content of your webpage.*/
</html> /* Defines the end of your HTML document.*/

HTML Elements
You will notice that there are two of each "tags". Ex:<html> and </html> These are called elements.
The tag without the "/" after the "<" in "<html>", means this is where the content of the tag begins. The "/" after the "<" in "</html>", means that this is where the content of the tag ends.

Headings and Paragraphs
Headings and Paragraphs are placed in the body section of the document: <body></body>
"Headings" are just exactly that, HEADINGS. For example the "Headings and Paragraphs" I put before this paragraph is a heading. Except when you make headings you use the elements<h1>Heading</h1> through <h6>Heading</h6>. Font size and thickness(boldness) of your heading text depends whether you use h1, h2, h3, h4, h5, or h6. <h1> is the largest heading while <h6> is the smallest.

Example of Heading:
HTML:
<html>
<body>

<h1>This is the biggest heading</h1>
<h2>This is the second biggest heading</h2>
<h3>This is the third biggest heading</h3>
<h4>This is the fourth biggest heading</h4>
<h5>This is the fifth biggest heading</h5>
<h6>This is the smallest heading</h6>

</body>
</html>

Now lets move on to "paragraphs". What are paragraphs in an html document? They don't have to be real paragraphs, they will just be displayed as simple text. Paragraphs are displayed using the <p> elements.
Example:
HTML:
<html>
<body>
<p>This is a paragraph</p>
</body>
</html>

Adding LINKS
Adding a link is fairly easy. To add a link you use the <a> elements.
This is how you would make a link:
HTML:
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

The "href" in the start tag is the actual LINK you will be taken to. The "target" simply describes how the link will open. In this case "_blank", means it will open in a new tab. If you want it to open in the same tab simply don't add "target". The "Visit W3Schools!" is how the link will actually read. It will read "Visit W3Schools!", and when you click on that text it will take you to "http://www.w3schools.com/". And of course you need the end tag: </a>

Adding Hyperlinks
What is a hyper link? A hyper link is one or a few more words in a certain part of text in the html page which you can click on and it will take you to a specific link. Adding hyperlinks is very easy. You simply add them in a paragraph like this:

HTML:
<html>
<body>

<p>Here is how you make a <a href="http://otland.net/forum.php">HYPERLINK</a></p>

</body>
</html

The text will read like this: "Here is how you make a HYPERLINK". When you click on "HYPERLINK" you will be taken to Otland's main page.

Remember this is an extremely BASIC tutorial, so please don't post bad comments.
 
Last edited:
Please write self ending tags with < /> format. Etc <img src="url" />
 
Guys, this was an extremely basic tutorial. It was just designed to show the structure of HTML. I will make more advanced tutorials once I'm sure I've mastered my material. Self-ending tags are easy, but I didn't have time to add them. If i added them it would really confuse the people reading this.
 
That will add a link to the top. You can also "to go ids". Etc:

HTML:
<div id="important">....very important...</div>

<a href="#important">To go important message</a>

Also, why are you writing the comments using /**/, HTML uses <!-- comment here -->.
 
That will add a link to the top. You can also "to go ids". Etc:

HTML:
<div id="important">....very important...</div>

<a href="#important">To go important message</a>

Also, why are you writing the comments using /**/, HTML uses <!-- comment here -->.

Haha I was doing a lot of work with CSS so I got used to /**/, I guess I was a bit careless with the comments :)
 
Back
Top