Wednesday, 31 August 2016

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 5 Logo


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 5 Logo


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