Chatbox
Basic Guide to Understanding a HTML page HS3ti32

You are not connected. Please login or register

 » FMService Coding » Tutorials » HTML » Basic Guide to Understanding a HTML page

Basic Guide to Understanding a HTML page

Go down  Message [Page 1 of 1]

1Basic Guide to Understanding a HTML page Empty Basic Guide to Understanding a HTML page Mon Sep 09, 2013 6:59 pm

MythicalDreams

MythicalDreams
Support Team Leader

What is HTML?

   HTML stands for Hyper Text Mark-up Langugage, it is the main building block of every web page.
   HTML tells your browser how to structure the website you wish to view, without HTML things would get a little messy.

   The structure of a basic HTML page would be:
   
Code:

    <!DOCTYPE html>
    <html>
    <head>
    <title>PAGE TITLE</title>
    </head>
    <body>
    <p>Hello World</p>
    </body>
    </html>
    
   This would show a page stating Hello World with a title of PAGE TITLE. I will know go through some of the tags used and some of the more common tags used in a webpage.

   
Code:

    <!DOCTYPE html>
    
This tells the browser what to expect, this particular doctype was only recently added and allows the use of advanced features in HTML5. There are other DOCTYPEs in use for HTML, however, this is the best one to use.

   
Code:

    <html> </html>
    
All HTML tags need to be inside the tags, this tag tells the browser where the HTML starts and finishes in a web page.

   
Code:

    <head> </head>
    
The head tags are extremely important to a website, in this section you set up your page but don't display anything to the page. You include your title tags, meta tags (Keywords etc), CSS includes, JavaScript among others.

   
Code:

    <body> </body>
    
The body tag tells the browser that everything contained within needs to be displayed on the page, so all the text, images, video etc would be contained within.

   Most Common Tags
   
Code:
<p> </p>
The p tag, this is a paragraph tag and is used to display blocks of text as a paragraph, most text is wrapped in

tags.
   

Code:
<div> </div>
This is a "placeholder" tag, without additional styling from CSS this tag does not output to the screen. Commonly used for identifying different sections in a web layout
   
Code:
<span> </span>
Mainly used to style certain bits of text, again this is a placeholder tag with no actual effect until used in conjunction with CSS
   
Code:
<img src='some-image.png' />
The img tag, this is used to display images on a web page, one of a few tags in HTML that does not have a closing tag.
   
Code:
<br />
New line, this adds a line between two sections.
   
Code:
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>
The h1 tag (or one of the others), is used to display headers, commonly used for a page title and then section titles in decreasing numbers, 1 is the biggest/most important and 6 is the least.
   
Code:
<strong> </strong>
Makes text bold

   Do's and Don't's with HTML
   Do use lowercase text when using tags, so < strong> not < STRONG>, uppercase tags are no longer standards compliant and could cause unexpected results

   Do not incorrectly nest HTML tags (Example: < div>< strong>TEXT< /div>< /strong>) this is incorrect and could cause unexpected results.
   Do not place text outside of a tag, with text it is advisable to always use the < p> < /p> tags.
   Do not forget to close a tag, so if you open a < div> tag then close the < /div> tag, if you do not then you could end up with unexpected results.

   Thank you for reading and I hope this helps someone to learn to start using HTML.

Guest

avatar
Guest

Thank you for sharing this valuable tutorial with us!

Back to top  Message [Page 1 of 1]

 » FMService Coding » Tutorials » HTML » Basic Guide to Understanding a HTML page

Permissions in this forum:
You cannot reply to topics in this forum