Author: phpdocs-admin


HTML
Iframe

<iframe> (inline frame), is an element which make it possible to embed another document within the current HTML document.

Iframe Breakdown

Here is the breakdown of HTML Iframe.

Iframe Example

Below example will demonstrate the basic architecture of HTML Iframe.

Copy Code 


<!doctype html>  
<html>
  	<head>
	 	    <title>Inline Frame</title>
    </head>

    <body>
        <iframe id="iframe Example"
            title="Inline Frame"
    	    	src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
    		</iframe>
    </body>
</html>


HTML
Id

An id is an attribute used to specify a unique id for an HTML element. An ID selector is a name preceded by a hash character (“#”).

Id Breakdown

Here is the breakdown of HTML Id

Id Example

Below example will demonstrate the basic architecture of HTML Id.

Copy Code 


<!doctype html>  
<html>
    <head>
        <title>ID Example</title>
        <style>
            #top {
                background-color: #ccc;
                padding: 20px
            }
        </style>
    </head>

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


HTML
Horizontal Line

Horizontal lines are used to separate different areas of a web page. It displays a horizontal line in the page. The tag for horizontal line is <hr>.

Horizontal Line

Below example will demonstrate the basic architecture of HTML Horizontal Line.

Copy Code 


<!doctype html>  
<html>
    <head> 
        <title>Horizontal Line</title> 
    </head>
  
    <body> 
        <h2>PHPDocs</h2>
        <p>Learn HTML from PHPDocs</p>
        <hr>
        <h2>Homepage</h2>
        <img src=”profile.jpg”>
    </body>
</html>


HTML
Headings

Heading tag is used to display different types of headings in document.

HTML defines six levels of headings. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest level and H6 the least.

A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading.

Heading Breakdown

Here is the breakdown of HTML Heading

Heading Example

Below example will demonstrate the basic architecture of HTML Headings.

Copy Code 


<!doctype html>  
<html>
 
    <head> 
        <title>Heading Example</title> 
    </head>
  
    <body> 
        <h1>This is a top level heading
        <h6>This is a last level heading
    </body>

</html>


HTML
Geolocation

Geo-location is used to identify or share the geographic location of a user through different data collection mechanisms. It is generally used for restaurants and local businesses.

Geolocation is a device-specific API which means that browsers or devices must support geolocation in order to use it through web applications.

To use the Geolocation map, user must get an API key “Google Cloud Platform Console” and add to his mobile app, website, or web server.

Getting API Key

  1. Go to the Google Cloud Platform Console.
  2. From the Project drop-down menu, select or create the project for which you want to add an API key.
  3. From the Navigation menu, select APIs & Services > Credentials.
  4. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key.
  5. On the dialog, click Restrict Key.
  6. On the API key page, under Key restrictions, set the Application restrictions.
    • Select HTTP referrers (web sites).
    • Add the referrers.
    • Click Save.

Geolocation Code

Copy the below code and enjoy features of Geolocation

Copy Code 


<!DOCTYPE html>
<html>
    <head>
        <title>Geolocation</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            /* Always set the map height explicitly to define the size of the div
             * element that contains the map. */
            #map {
              height: 100%;
            }
            /* Optional: Makes the sample page fill the window. */
            html, body {
              height: 100%;
              margin: 0;
              padding: 0;
            }
        </style>
    </head>
  
    <body>
        <div id="map"></div>
        <script>
          // Note: This example requires that you consent to location sharing when
          // prompted by your browser. If you see the error "The Geolocation service
          // failed.", it means you probably did not give permission for the browser to
          // locate you.
          var map, infoWindow;
          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: -34.397, lng: 150.644},
              zoom: 6
            });
            infoWindow = new google.maps.InfoWindow;

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                  lat: position.coords.latitude,
                  lng: position.coords.longitude
                };

                infoWindow.setPosition(pos);
                infoWindow.setContent('Location found.');
                infoWindow.open(map);
                map.setCenter(pos);
              }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
              });
            } else {
              // Browser doesn't support Geolocation
              handleLocationError(false, infoWindow, map.getCenter());
            }
          }

          function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                                  'Error: The Geolocation service failed.' :
                                  'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
          }
        </script>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
    </body>
</html>


HTML
Formatting

Different tags to format text are as follows.

Bold

<b> tag is used to display text in bold face style.

Example:

Copy Code 


<!doctype html>  
<html>
 
    <head> 
        <title>Bold Text</title> 
    </head>
  
    <body> 
        <b>Formatting makes things cool.</b>
    </body>

</html>

Italic

tag is used to display text in italic style..

Example:

Copy Code 


<!doctype html>  
<html>
 
    <head> 
        <title>Italic Text</title> 
    </head>
  
    <body> 
        <i>Italic text looks stylish.</i>
    </body>

</html>

Underline

<u> tag is used to display text as underlined.

Example:

Copy Code 


<!doctype html>  
<html>
 
    <head> 
        <title>Underlined Text</title> 
    </head>
  
    <body> 
        <u>Underlined text looks prominent.</u>
    </body>

</html>

Superscript

<sup> tag is used to display text as superscript.

Example:

Copy Code 


<!doctype html>  
<html>
 
    <head> 
        <title>Superscript Text</title> 
    </head>
  
    <body> 
        N<sup>2</sup>
    </body>

</html>

Subscript

<sub> tag is used to display text as subscript.

Example:

Copy Code 


<!doctype html>  
<html>
 
    <head> 
        <title>Subscript Text</title> 
    </head>
  
    <body> 
        N<sub>2</sub>
    </body>

</html>

Font

<font> tag is used to specify the characteristics of font. Different characteristics include the typeface, size and color.

Example:

Copy Code 


<!doctype html>  
<html>
 
    <head> 
        <title>Font Text</title> 
    </head>
  
    <body> 
        <p><font face="verdana" color="green" size="2">PHPDocs is best to learn Web Development</font></p>
    </body>

</html>


HTML
Form

Forms are used to create interactive websites. The visitors can send feedback, emails, comments and suggestions by using these forms. Form is an easy way for the user to communicate with the webmaster or the owner of website.

HTML Forms are also required, when website owner wants to collect some data from the site visitor. For instance, during user registration owner would like to collect information from user such as name, email address, etc.

A webpage may contain many forms.

Form Breakdown

Here is the breakdown of HTML Form


HTML
Form Elements

Here you will learn some important HTML form elements. These elements are also known as controls in programming language.

Input

<input> is the fundamental form element for gathering user information through forms. This control is used for items that require only one line of user input, such as name, password etc.

AttributeDescription
nameIt specifies the name of the text field
typeIt indicates the type of input control
valueIt refers to the contents of the text field
Default valueIt indicates the default value of the text field
sizeIt allows to specify the width of the text-input control in terms of characters
maxlengthIt specifies the maximum number of characters that can be entered in text field

Example

Copy Code 


<!doctype html>  
<html>
    <head> 
       <title>Input Control</title> 
    </head>
    
    <body> 
        <form>
            <input type="text" name="firstname"> 
        </form>
    </body>
</html>

Select

Select field is used to provide predefined list of items to the user. The user can choose one or multiple options from the list depending upon the type of list.

<select> tag is used to create a list and <option> tag creates an item in the list.

AttributeDescription
nameIt specifies the name of the select control
sizeThis can be used to present a scrolling list box
multipleIt specifies that multiple option can be selected at the same time by clicking CTRL key
selectedIt specifies that the current option is selected

Example

Copy Code 


<!doctype html>  
<html> 
    <head> 
        <title>Select Control</title> 
    </head>
  
    <body> 
        <form>
            <select name="languages">
                <option value="Maths" selected>Maths</option>
                <option value="Physics">Physics</option>
            </select>
        </form>
   </body>
</html>

Text Area

Text area is similar to text box but it may consist of multiple rows. It is used to get lengthy input from the user like comments and suggestions etc.

<textarea> tag is used to create text area in a form.

AttributeDescription
nameIt specifies the name of the text area
valueIt specifies the contents of the text area
default valueIt specifies the default value of the text area
rowIt specifies the number of rows in the text area
colsIt specifies the number of columns in the text area

Example

Copy Code 


<!doctype html>  
<html> 
    <head> 
        <title>Text Area</title> 
    </head>
  
    <body> 
        <form>
            <textarea name="comment" rows="10" cols="30">
                HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language.
            </textarea>
        </form>
    </body>
</html>

Button

<button> is a HTML element which represents a clickable button. It can be used anywhere in a document (so in form) where simple, standard button functionality is needed.

AttributeDescription
submitIt creates a button that automatically submits a form
resetIt automatically resets form controls to their initial values
buttonIt is used to trigger a client-side script when the user clicks that button
imageIt creates a clickable button but we can use an image as background of the button

Example

Copy Code 


<!doctype html>  
<html>
    <head> 
        <title>Button</title> 
    </head>
  
    <body> 
        <button type="button">Click Me!</button>
    </body>
</html>


HTML
Form Attributes

Here are some important attributes of <form> tag:

Form Method

Method attribute specifies how the form data is sent to the server. The possible values are:

  • Get: It sends the data as part of URL. The data included with URL can be seen by other people. GET method is default one by browser.
  • Post: It sends the data encoded in HTTP data stream. It is mostly used to send a large amount of data or in sensitive cases. Post method is more secure than GET.

Example

Copy Code 


<!doctype html>  
<html>
    <head> 
        <title>Form Method</title> 
    </head>
  
    <body> 
        <form method="get">
          <!--Form Controls-->
        </form>
    </body>
</html>

Form Action

Action attribute specifies where the form data will be submitted. It is normally sent to a script on the server or submitted as email.

Example

Copy Code 


<!doctype html>  
<html>
    <head> 
        <title>Form Action</title> 
    </head>
  
    <body> 
        <form method="get">
          <!--Form Controls-->
        </form>
    </body>
</html>

Form Example

Copy Code 


<!doctype html>  
<html>
    <head> 
        <title>Form Method</title> 
    </head>
  
    <body> 
        <form action=”form.php” method="get">
               <!--Form Control-->
        </form>
    </body>
</html>


HTML
File Path

A website consists of many files such as text content, code, media, stylesheets and so on. When you’re building a website, you need to assemble these files into a sensible structure on your local machine so you can easily upload them to a server.

A file path specifies the location of a file inside a web folder structure. It’s like an address of a file which helps the web browser to access the files.

File Path Types

File paths are of two types:

Absolute File Paths: It describes the full address (URL) to access an internet file.

Copy Code 


<!doctype html>  
<html>

    <head>
        <title>Absolute File Path</title>
    </head>

    <body>
        <a href=”https://phpdocs.com/”>
    </body>

</html>

Relative File Paths: It describes the path of the file relative to the location of the current web page file.

Copy Code 


<!doctype html>  
<html>

    <head>
        <title>Relative File Path</title>
    </head>

    <body>
        <img src=”phpdocs-logo.png”>
    </body>

</html>

File Path Accessing

PathDescription
<img src=”picture.jpg”>picture.jpg is located in the same folder as the current page
<img src=”images/picture.jpg”>picture.jpg is located in the images folder in the current folder
<img src=”/images/picture.jpg”>picture.jpg is located in the images folder at the root of the current web
<img src=”../picture.jpg”>picture.jpg is located in the folder one level up from the current folder