Welcome to the HTML tutorial. Our first goal is to create a simple web page. That way you can reuse the basic template we create to create new pages. Before we get started, there's a few basic rules we should go over.
When learning html, the first thing you're going to need to know is what a tag is.
The most commonly used symbols in HTML are the angle brackets < > . These are used to mark the text they enclose as key words (unsurprisingly called keywords). This means that the word is a language specific word which the browser will identify, using a specific format (such as within a tag), when interpreting the code.
In HTML, the closing and opening angle brackets are used along with HTML specific keywords to form tags. There's typically an opening tag < > (or starting tag) and a closing tag </ > (or ending tag).
When an Internet page is displayed, the browser loads the information from the files into memory and displays the results. When a browser loads an HTML file into memory, the letters and symbols must be in the correct format in order to display properly. The opening and closing tags are used to apply a functional condition to the text between the tags, based on the type of tags used.
This code:
This text will not be bold. <b>This text will be bold</b>
Will end up looking like this on the page:
This text will not be bold. This text will be bold
In some cases, only one tag is necessary, such as the <!DOCTYPE> tag.
When reading HTML, the browser doesn't pay attention to how many lines are in between tags:
<html>
</html>
The above example will be interpreted the same as the example below:
<html> </html>
The browser condenses all spaces between non-space text to one space. So, even thousands of space characters would end up as one space.
<html> </html>
The above will functionally be the same as:
<html> </html>
Tags can be placed inside of each other, but it's improper if they overlap. The code below is an example of incorrect placement of tags.
<html>
</body>
<b>
This text will be bold
</html> <!-- incorrect, out of order -->
</body> <!-- incorrect, out of order -->
</b> <!-- incorrect, out of order -->
The example below is good practice. It's easy to tell what parts of the code the tags are referencing:
<html>
<body>
<b>
This text will be bold
</b>
</body>
</html>
Indents, by use of tabs or spaces, are used while writing the code to clearly indicate tags inside of other tags when looking at the source file, but have no affect on how the browser reads the information. The above code will be interepreted by the browser the exact same way as the code below. However, it's much easier to read source code when using the style above.
<html> <body> <b> This text will be bold </b> </body> </html>
Now that we've been over that, we can start working on creating our first web page. In order to create one we need to create an HTML file.
Here's what we will be creating:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title Goes Here</title>
</head>
<body>
<h1>Main Heading</h1>
</body>
</html>
The color of text used to write an HTML file is not important. It will function the same no matter what color the text is. Certain aspects of a programming language or markup language are often automatically colored by a text editor desgined for writing code to highlight different parts of the code. The example text here is colored to resemble the appearance of a text editor.
Click the next button to continue.