HTML

www.engineernotes.com

Introduction :-

  • It is basically used for creating Web pages
  • HTML stands for Hyper Text Markup Language
  • It describe the structure of Web pages using markup
  • Elements are represented by tags

HTML Versions :-

  • HTML                                      ->    1991
  • HTML 2.0                                ->    1995
  • HTML 3.2                                ->    1997
  • HTML 4.01                              ->    1999
  • XHTML                                    ->    2000
  • HTML5                                    ->    2014

A Simple Example :-

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

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Tags Explaination :-

  • <!DOCTYPE html> defines this document to be HTML5
  • <html> is the root element of an HTML page
  • <head> contains meta information about the document
  • <title> specifies a title for the document
  • <body> contains the visible page content
  • <h1> defines a large heading
  • <p> defines a paragraph

Write HTML on Notepad :-

For learning stage HTML then we recommend a simple text editor like Notepad or Notepad++ (PC) or TextEdit (MAC), Since the Web Pages can be created and modified by using professional HTML Editors.

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

Step 1:  Open Notepad

Windows 7 or earlier :
Open Start > Programs > Accessories > Notepad

Windows 8 or Later :
Open the Start Screen (windows symbol at the bottom left on your screen).Type Notepad

Step 2: Write Some HTML Code

<!DOCTYPE html>
<html>
<body>

<h1> My First Heading </h1>
<p> My First Paragraph </p>

</body>
</html>

Step 3: Save the HTML Page

Save the file on your PC. Select a File>Save as in the Notepad
Name the file as your choice “web.html”

Step 4: View your HTML Page in Browser

Open your saved HTML file in browser (Right click and then Open with OR double click on the file)

HTML Headings :-

HTML headings are defined with <h1> to <h6> tags.
<h1> define the most important heading.
<h6> define the least important heading.

Example ->
<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 <p> tag
Example ->
<p> This is first paragraph </p>
<p> This is second paragraph </p>

HTML Links :-

HTML link are defined with the <a> tag
Example ->
<a href =”https://www.engineernotes.com”> This is a link </a>

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

HTML Images :-

HTML images are defined with the <img> tag.
Source file (src),alternative text (alt),width and height are provided as attributes.

Example ->
<img src=”www.engineernotes.jpg” alt=”www.engineernotes.com” width=”100″ height=”123″>

HTML Buttons :-

HTML buttons are defined with the <button> tag
Example ->
<button> Click Me! </button>

HTML Lists :-

HTML lists are defined with the <ol> (ordered/numbered list)tag OR <ul> (unordered/bullet lists), followed by <li> tags (list items).

Example ->
<ul>
<li> Mango </li>
<li> Apple </li>
<li> Orange </li>
</ul>

Empty HTML Elements :-

HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag.
The <br> tag defines a line break.

Example ->
<p> This is a <br> sentence with a line break. </p>

 

HTML Styles:-

<html>
<body>
<p> I am Normal </p>
<p style=”color:red;”> I am red </p>
<p style=”color:blue;”> I am blue </p>
<p style=”font-size:50px;”> I am big </p>
</body>
</html>

Output:-

I am Normal

I am Red

I am Blue

I am Big

 

HTML Background:-

<body style=”Background-color: powderblue;”>
</body>

 

HTML Text color:-

<h1 style=”color:blue;” >This is a heading. </h1>
<p style=”color:red;”> This is a paragraph. </p>

HTML Fonts:-

<h1 style=”font-family:verdana;”>This is a heading. </h1>
<p style=”font-family:courier;”> This is a paragraph. </p>

HTML Text Size:-

<h1 style=”font-size:300%;”>This is a heading </h1>
<p style=”font-size:160%;”> This is a paragraph </p>

HTML Text Alignment:-

<h1 style=”text-align:center;”>Centered Heading</h1>
<p style=”text-align:center;”> Centered paragraph </p>

HTML Formatting Elements:-

  • <b> -Bold text
  • <i> -Italic Text
  • <strong> -Important Text
  • <em> -Emphasized Text
  • <small> -Small Text
  • <sub> -Subscript Text
  • <sup> -Superscript Text
  • <del> -Deleted Text
  • <ins> -Inserted Text
  • <mark> -Marked Text

Use of HTML Formatting Elements:-

  • <b>  This Text is bold </b>
  • <i>  This Text is Italic </i>
  • <strong> This Text is Strong </strong>
  • <em> This Text is emphasized </em>
  • <small> This Text is small </small>
  • <p> This is <sub> subscripted </sub> text. </p>
  • <p> This is <sup> superscripted </sup> text. </p>
  • <p> My favourite color is <del> red </del> </p>
  • <p> My favourite color is <ins> color </ins> is red. </p>
  • <h1> HTML <mark> Marked </mark> Formatting </h1>

HTML for Short Quotations:-

<!DOCTYPE html>
<html>
<body>
<p> EPF’s have to : <q> Save the Trees and Save the Nature </q> </p>
</body>
</html>

<abbr> for Abbreviations:-

<!DOCTYPE html>
<html>
<body>
<p> <abbr title =”World health Organization”>WHO </abbr> was founded in 1948.</p>
</body>
</html>

<Address> for Contact Information:-

<address>
Written by John <br>
Visit us at :<br>
www.engineernotes.com <br>
INDIA
</address>

Comment Tags:-

<!…Write your comment here ….>

Leave a Reply

Your email address will not be published. Required fields are marked *