HTML Introduction

 

HTML EXAMPLES

HTML is the standard markup language for creating Web pages.

What is HTML?
HTML stands for Hypertext Markup Language
HTML – code describes the structure of web pages using markup
HTML – elements are the building blocks of HTML pages
HTML – elements represent tags
HTML tags contain, “Heading”, “Paragraph”, “Tables”, etc.
Browsers do not display HTML tags, they use them to display page content
HTML Simple Document
Example
<! DOCTYPE html>
<html>
<head>
<title> HTML example </title>
</head>
<body>

<h1> My first heading </h1>
<p> My first paragraph. </p>

</body>
</html>

Explanation of the example

<! DOCTYPE html> – declaration, defines an HTML5 document
<html> – element, is the root element of the HTML page
<head> – element that contains meta information about the document
<title> – element that specifies the title of the document
<body> – element that contains the visible content of the page
<h1> – element, defines a large heading
<p> – element that 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 is 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>
Start tag Element content End tag
<h1> My first heading </h1>
<p> My first paragraph. </p>
<br> no no
Note: Some HTML elements have no content (for example, the <br> element). These items are called empty items. Empty elements have no end tag!

The purpose of web browsers (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.

The browser does not display HTML tags, it uses them to determine how to display the document:

Browser View

HTML Page structure
Below is a visualization of the structure of an HTML page:

<html>
<head>
<title> Page Title </title>
</head>
<body>
<h1> This is the heading </h1>
<p> This is a paragraph. </p>
<p> This is another paragraph. </p>
</body>
</html>
Note: Content inside the <body> (in the white section above) will be displayed in the browser.

HTML history
Since the early days of the World Wide Web, there have been many versions of HTML:

Year Version
1989 Tim Berners-Lee invents the www
1991 Tim Berners-Lee invents HTML
1993 Dave Raggett compiled in HTML + format
1995 HTML Working Group defines HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 first public draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Recommendation Candidate: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
This tutorial follows the latest HTML 5 standard.

Learn HTML with Notepad or TextEdit

Web pages can be created and modified using professional HTML editors. However, for learning HTML, we recommend a simple text editor such as Notepad ++ (PC) or TextEdit (Mac). We believe that using a simple text editor is a very good way to learn HTML. Follow the steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad ++
Windows 8 or older:

Open the start screen (symbol in the window at the bottom left of the screen). Notepad ++ type.

Windows 7 or newer:

Open Start> All Programs> Accessories> Notepad ++

Step 1: Open TextEdit (Mac)
Open Start> Applications> TextEdit

Also change some parameters to get the application to save the files correctly. In Preferences> Format> select “Plain Text”

Then, under “Open and Save”, check the box that says “Ignore rich command text in HTML files.”

Then open a new document to place the code.

Step 2: Write HTML
Write or copy HTML in notepad.

<! DOCTYPE html>
<html>
<body>

<h1> My first heading </h1>

<p> My first paragraph. </p>

</body>
</html>