HTML
Elements

An HTML element is an individual component of an HTML document or web page. Tags of Hypertext Markup Language tell the browser which elements to present and how to present them on screen.

Basic Elements

The basic elements of an HTML code are:

Heading: denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.

Paragraph: denoted using the <p> tag.

Horizontal ruler: denoted using the <hr> tag.

Link: denoted using the <a> (anchor) tag.

List: denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.

Image: denoted using the <img> tag

Divider: denoted using the <div> tag

Span: denoted using the <span> tag

Elements Example

Below example will demonstrate the basic architecture of HTML Comments.

Copy Code


<!doctype html>  
<html>
    
    <head>
        <title>HTML Elements Example</title>
    </head>
    
    <body>
        <h1>Introducing HTML Elements</h1>
        <p>Learn HTML Elements with PHPDocs</p>
    </body>
</html>

HTML
Drag & Drop

Drag and Drop (DnD) is powerful User Interface concept which allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

It is very useful to copy, reorder and deletion of items with the help of mouse clicks.

Drag & Drop Events

Event	Description
dragstart	It fires when the user starts dragging of the object.
dragenter	It fired when the mouse is first moved over the target element while a drag is occurring. A listener for this event should indicate whether a drop is allowed over this location.
dragover	This event is fired as the mouse is moved over an element when a drag is occurring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event.
dragleave	This event is fired when the mouse leaves an element while a drag is occurring. Listeners should remove any highlighting or insertion markers used for drop feedback.
drag	It fires every time the mouse is moved while the object is being dragged.
drop	The drop event is fired on the element where the drop was occurred at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location.
dragend	It fires when the user releases the mouse button while dragging an object.

Drag & Drop Example

Below example will demonstrate the basic architecture of HTML Headings.

Copy Code


<!DOCTYPE HTML>
<html>
    <head>
        <style>
            #div1 {
              width: 350px;
              height: 70px;
              padding: 10px;
              border: 1px solid #aaaaaa;
            }
        </style>

        <script>
            function allowDrop(ev) {
              ev.preventDefault();
            }

            function drag(ev) {
              ev.dataTransfer.setData("text", ev.target.id);
            }

            function drop(ev) {
              ev.preventDefault();
              var data = ev.dataTransfer.getData("text");
              ev.target.appendChild(document.getElementById(data));
            }
        </script>
    </head>
    
    <body>

        <p>Drag the W3Schools image into the rectangle:</p>

        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br>
        <img id="drag1" src="../images/html/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

    </body>
    </html>

HTML
Divs

<div> tag is used to define a section in an HTML document. It can be used to group large section of HTML elements together and format them with cascading style sheet.

The closing tag </div> is used to indicate the end of section.

Div Breakdown

Here is the breakdown of HTML Div

Div Example

Below example will demonstrate the basic architecture of HTML Div.

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>Div Example</title> 
    </head>
  
    <body> 
        <div id="testing">
            <h3>PHPDocs</h3>
        </div>  
    </body>
</html>

HTML
CSS

CSS (Cascading Style Sheet) is used to describe how HTML elements are to be displayed on screen, paper, or in other media.

CSS minimizes time and work as it can control the layout of multiple web pages all at once.

Inline CSS

Inline style is applied to an individual tag. It modifies the attributes of a tag in the current occurrence of that tag.

Example

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>Inline CSS</title> 
    </head>
  
    <body> 
        <h2 style="color: red;">PHPDocs</h2>
    </body>
</html>

Internal CSS

An internal style sheet is inserted in the head section of a web page. It only affects the web page in which it is inserted.

Example

Copy Code


<html>
 
    <head> 
        <title>Inline CSS</title> 
        <style type="text/css">
            h2 {color: red;}
        </style>
    </head>
  
    <body> 
        <h2>PHPDocs</h2>
    </body>
</html>

External CSS

An external style sheet is defined in a separate file stored with .css extension. It is very useful when the style is applied too many pages.

To use an external style sheet, add a link to it in the section of the HTML page.

Example

Copy Code


<!doctype html>  
<html> 
   <head> 
      <title>Inline CSS</title> 
      <link rel="stylesheet" href="styles.css">
   </head>
  
   <body> 
      <h2>PHPDocs</h2>
  </body>
</html>

HTML
Comments

Comments are primarily used to explain code or add notes in HTML document which will not display while rendering by the browser. They can be inserted in any section of an HTML document.

Comments Example

Below example will demonstrate the basic architecture of HTML Comments.

Copy Code


<!doctype html>  
<html>
    <head>
        <title>HTML Comment Example</title>
    </head>

    <body>
        <p>Following are comments</p>
        <!--Comment Line-->
    </body>
</html>

HTML
Class

The HTML class is an attribute which is used to specify equal styles for all the elements with the same class name. An ‘class’ selector is a name preceded by a full stop (“.”).

Class Breakdown

Here is the breakdown of HTML Class

Class Example

Below example will demonstrate the basic architecture of HTML Class.

Copy Code


<!doctype html>  
<html>

    <head>
        <title>Class Example</title>
        <style>
            .top {
                background-color: #ccc;
                padding: 20px
            }
        </style>
    </head>

    <body>
        <div class="top">
            <h1>PHPDocs</h1>
        </div>
    </body>
</html>

HTML
Audio

The HTML <audio > tag is used to is used to embed sound files into a web page. It plays by native support for audio playback built into the browser rather than a browser plugin.

Audio Breakdown

Here is the breakdown of HTML Audio.

Audio Attributes

Attribute	Description
src	It specifies the URL
autoplay	It specifies that the audio will play automatically
controls	It specifies that the audio controls get displayed
loop	It specifies that the audio will start again every time after finish
muted	It specifies that the audio should be muted
preload	It specifies how and when the audio file should load

Audio Example

Below example will demonstrate the basic architecture of HTML Audio.

Copy Code


<!doctype html>  
<html>
    <head>
        <title>HTML Comment Example</title>
    </head>
  
    <body>
        <audio controls>
            <source src="myAudio.mp3" type="audio/mp3">
        </audio>
    </body>
</html>

HTML
Attributes

Attributes are additional values that adjust their behavior of elements in various ways to meet the criteria the users require.

Some elements do not require attributes like heading tags <h1>, paragraph rag <p> and some others. But most of the HTML tags may have attributes as their characteristics.

Attribute Breakdown

An attribute is combination of two things:

Name: Name is the property you want to set. For example, the image <img> element carries an attribute whose name is src and alt.
Value: The value is an what you want the value of the property to be set. It always put within quotations.

Attribute names and attribute values are case-insensitive and should be in lowercase.

Basic Attributes

The basic elements of an HTML code are:

Heading: denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.

Paragraph: denoted using the <p> tag.

Horizontal ruler: denoted using the <hr> tag.

Link: denoted using the <a> (anchor) tag.

List: denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.

Image: denoted using the <img> tag

Divider: denoted using the <div> tag

Span: denoted using the <span> tag

Attribute Example

Below example will demonstrate the basic architecture of HTML Attributes

Copy Code


<!doctype html>  
<html>
 
   <head> 
      <title>HTML Attribute Example</title> 
   </head>
  
   <body> 
      <h3 align = "left">This is left aligned</p> 
      <h4 align = "center">This is center aligned</p> 
      <h5 align = "right">This is right aligned</p> 
   </body>
   
</html>

Introduction to HTML

HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language.

HTML is the combination of Hypertext and Markup language.

Hypertext defines the link between the web pages.
Markup language is used to define the text document within tag which defines the structure of web pages.

It is noteworthy that HTML is not a programming language, but rather a markup language. Let us find a dividing line between these types of language:

A markup language is used to control the presentation of data, like “represent these user names as a bullet list or as a table”.
A programming language is used to transform data. It does so by creating CPU instructions that rewrite the input data into the output; hopefully, the desired output.

Most of markup languages are human readable. Language uses tags to define what manipulation has to be done on the text. HTML is a markup language which is used by the browser to manipulate text, images and other content to display it in required format.

Short History

HTML was created by Tim Berners-Lee in 1991. The first ever version of HTML was HTML 1.0 but the first standard version was HTML 2.0 which was published in 1999.

HTML Version	Year
HTML 1.0	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

HTML Breakdown

The HTML document can be divided into two sections:

Head Section: The <head> element is a container for all the head elements. <title> (this element is required in an HTML document), <style>, <base>, <link>, <meta>, <script> and <noscript> tag can go inside the <head>

Body Section: The body of HTML document contains the text that is displayed on a web page. The body section is enclosed within <body> tag. It gives a description of the document layout and structure.

HTML Example

below example will demonstrate the basic architecture of HTML Document

Copy Code


<!doctype html>
<html>
            <head> 
                        <title>My First HTML Page</title> 
             </head>
             <body> 
                         <p>HTML stands for Hypertext Markup Language</p>
             </body>
</html>

HTML Elements

Basic Elements

Elements Example

HTML Drag & Drop

Drag & Drop Events

Drag & Drop Example

HTML Divs

Div Breakdown

Div Example

HTML CSS

Inline CSS

Internal CSS

External CSS

HTML Comments

Comments Example

HTML Class

Class Breakdown

Class Example

HTML Audio

Audio Breakdown

Audio Attributes

Audio Example

HTML Attributes

Attribute Breakdown

Basic Attributes

Attribute Example

Introduction to HTML

Short History

HTML Breakdown

HTML Example

HTML
Elements

HTML
Drag & Drop

HTML
Divs

HTML
CSS

HTML
Comments

HTML
Class

HTML
Audio

HTML
Attributes