HTML Tutorial #1 - Overview of HTML

 Hello all,

Welcome to Tech to Know. In this tutorial, we are going see the HTML.

Overview of HTML:

• HTML is the standard markup language for Web pages.
• HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages

HTML is easy to learn - You will enjoy it!

What is HTML?

• Unlike a scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content.
• The ability to code using HTML is essential for any web professional. 
• Acquiring this skill should be the starting point for anyone who is learning how to create content for the web.
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
• The basic HTML code is like below:

    <!DOCTYPE html>

    <html>

        <head>

            <title>Page Title</title>

        </head>

        <body>

            <h1>My First Heading</h1>

            <p>My first paragraph.</p>

        </body>

    </html>

Code Explanation:

<!DOCTYPE html> - Declaration defines that this document is an HTML5 document.

<html>         - Root element of an HTML page.

<head>         - Contains meta information about the HTML page.

<title>        - Specifies a title for the HTML page (which is shown in the browser's                             title bar or in the page's tab).

<body>         - Defines the document's body, and is a container for all the visible                                contents, such as headings, paragraphs, images, hyperlinks, tables,                             lists, etc.

<h1>           - Defines a large heading.

<p>            - Defines a paragraph.

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph</p>

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

 

HTML Page Structure

Below is a visualization of an HTML page structure:

Note: The content inside the <body> section (the white area above) will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

Learn HTML Using Notepad or TextEdit:

For learning HTML, we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

We believe in that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or TextEdit:

Step 1: Open Notepad (PC)

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Step 3: Save as HTML Page:

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.html" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

Tip: You can use either .htm or .html as file extension. There is no difference, it is up to you.

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favourite browser (double click on the file, or right-click - and choose "Open with").

The result will look much like this:

Open We can see HTML Basic elements with examples in our next tutorial.

To start the next tutorial: HTML Tutorial #2 - HTML Basic with Examples