HOME TUTORIALS SUPPORT STUDYUNIVERSE WEB GURU

HTML FOR ABSOLUTE BEGINNERS

What is HTML?

The bedrock of programming.

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms a triad of cornerstone technologies for the World Wide Web. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.


Setting Up a HTML File

To save a file as an html file, save the page as an .html file.


Basic HTML Layout

When coding in HTML, you need to have a layout. For your computer to understand the HTML code properly, you need to use the following layout:
<!DOCTYPE html>
<html>
<head>
<title>Webpage Title</title>
</head>
<body>
</body>
</html>

The <head> tag is where you insert the details, only the <title> tag shows something to the user. Within the <body> tag is where you will include most of the stuff that the user will see, it's a "happening" place. The title will be shown in the part of your browser (the place near the favicon).


Launching A File + Paragraphs and Headings

To launch a file, right click on the file and launch with the browser of your choice. Currently, the Webpage will only have the small detail in the tab area. To actually put stuff on the webpage, we will have to put things in the body. To add text, it is best to use the <p> tag to signify text as a paragraph. To add a heading we will use the <h1> tag. Headings have levels going from h1 to h6. I recommend to try it out to see the difference between the headings. To see changes in you webpage, refresh the page in your browser.


Inserting Images

To insert images, we will use the following piece of code:
<img src = "image.jpg" />.
Anther thing to note is that you can also edit the height and or width of the image by inserting the following:
<img src = "image.jpg" width="(insert pixel value here)" height="(insert pixel value here)"/>
It is also recommended that you only add the value of one dimension, that way the image will be displayed with the original format.


Line and Thematic Breaks

To break a paragraph into lines, you will use the <br/> tag to break a paragraph up.
A Thematic Break is essentially a line you can use to divide your page into chunks. To use this tag, you will use the following:
<hr/>
Thematic Breaks are a useful tool to use when you haven't applied CSS.


This is just the beginning...

Congratulations! You have completed this set of tutorials. After This I hope you now have a basic understanding of HTML, use this set of tutorials as getting your feet wet in the world of coding. Now I want to you start exploring more, I will be making more tutorials on this, so stay tuned :)