HTML Basic Examples

HTML Basic Examples

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

<!DOCTYPE html>
<html>
<body>

<h1>Heading</h1>
<p>paragraph.</p>

</body>
</html>

---

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

---

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

---

HTML Links

HTML links are defined with the <a> tag:

<a href="https://tutorialservers.blogspot.com/">This is a link</a>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

---

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

<img src="image.jpg" alt="alt text" width="100"height="100">

Code Editor of HTML

HTML Editors

Write HTML Using Notepad or any Text Editor

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC).

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

Simple text editor help us for good practice in HTML.

Follow the four steps below to create your first web page with Notepad.


Step 1: Open Notepad 

Open Notepad in Windows 8 or later:

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

Open Notepad in Windows 7 or earlier:

Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad.

Step 2: Write Some HTML

Write or copy some HTML into Notepad.

<!DOCTYPE html>
<html>
<body>
<h1>Heading</h1>
</body>
</html>





Step 3: Save the 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 (which is the preferred encoding for HTML files).





Step 4: View the HTML Page in Your Browser

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

The result will look much like this:

Hyper Text Markup Language (HTML) Introduction

HTML Introduction:

What is HTML?

HTML is a markup language for describing web documents (web pages).

• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content

Simple Example

<!DOCTYPE html>
<html>
<head>
<title>Title of Page</title>
</head>
<body>

<h1>Heading</h1>
<p>paragraph.</p>

</body>
</html>

Example Explained

The <!DOCTYPE html> declaration defines this document to be HTML5
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph


Using this description, a web browser will display a document with a heading and a paragraph.

Common <!DOCTYPE> Declarations

HTML 5:

<!DOCTYPE html>

HTML 4.0.1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


HTML Versions:

Since the early days of the web, there have been many versions of HTML:

HTML           ----------------------------------      1991
HTML 2.0     ----------------------------------      1995
HTML 3.2     ----------------------------------      1997
HTML 4.0.1  ----------------------------------      1999
XHTML        ----------------------------------      2000
HTML 5        ----------------------------------      2014