HTML
Layout

Webpage layout is the part of designing that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.

Now-a-days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but it can be created using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.

Layout Example

Most modern websites and blogs consist of a header, footer, navbar, perhaps another sidebar, and the main content area. Something like this:

Above layout can be marked up as follows:



<header>Header</header>

<aside>Sidebar</aside>

<div>Content</div>

<footer>Footer</footer>

Example with Code


<!doctype html>  
<html>

    <head>
        <style>
            body{
                font-family: Segoe UI;
            }

            section {
                width: 80%;
                margin: auto;
            }

            header {
                background-color:black;
                color:white;
                text-align:center;
                padding:5px;   
            }
            aside {
                line-height:30px;
                background-color:#eeeeee;
                height:300px;
                width:173px;
                float:left;
                padding:5px;        
            }

            li{
                list-style: none;
            }
            .content {
                width:350px;
                float:left;
                padding: 0 0 0 30px;     
            }
            footer {
                background-color:black;
                color:white;
                clear:both;
                text-align:center;
                padding:5px;     
            }
        </style>
    </head>

    <body>
        <section>
                
            <header>
                <h1>Header</h1>
            </header>

            <aside>
                <ul>
                    <li>Menu Item 1</li>
                    <li>Menu Item 2</li>
                    <li>Menu Item 2</li>
                </ul>
            </aside>

            <div class="content">
                <h1>PHPDocs</h1>
                <p>PHPDocs is an online learning platform. Learn the programming skills you need for the job you want.</p>
            </div>

            <footer>
                Copyright @phpdocs.com
            </footer>

        </section>
    </body>

</html>

HTML
Input Types

Different input types for the <input> element are:

Text Field

Text fields are used to get input from the user in the form of letters, numbers etc.

Example


<!doctype html>  
<html>
    <head> 
      	<title>Input Text Field</title> 
    </head>
	
    <body> 
    		<form>
    		 	  Name:<br>
      			<input type="text" name="username">
    		</form>
	   </body>
</html>

Password Field

Password fields are used to input passwords in the form. Each character inserted in this field appears as *.

Example


<!doctype html>  
<html>
    <head> 
      	<title>Input Password Field</title> 
    </head>
	
    <body> 
    		<form>
     			  Type Your Password:<br>
    		    <input type="password" name="password">
    		</form>
  	</body>
</html>

Submit Button

Submit field is used to create a button for submitting form data to a form-handler.


<!doctype html>  
<html>
  	<head> 
        <title> Submit Button</title> 
    </head>
	
    <body> 
		    <form>
 			      <h3>This is submit button</h3>
            <input type="submit" value="Submit">
		    </form>
    </body>
</html>

Reset Button

Reset button is used to clear all data entered by the user in different form elements.


<!doctype html>  
<html>
  	<head> 
      	<title>Reset Button</title> 
    </head>
	
    <body> 
		    <form>
 			      <h3>This is reset button</h3>
			       <input type="reset">
		    </form>
    </body>
</html>

Radio Button

Radio buttons are used when the user has to choose one option from multiple choices.


<!doctype html>  
<html>
	<head> 
    	 <title>Radio Button</title> 
    </head>
	
    <body> 
    		<form>
       			<input type="radio" name="gender" value="male" checked> Male<br>
      			<input type="radio" name="gender" value="female"> Female<br>
        		<input type="radio" name="gender" value="other"> Other 
    		</form>
    </body>
</html>

Checkbox

Checkboxes are used to provide many options to the user. The user can choose one or multiple options from available choice.


<!doctype html>  
<html>
    <head> 
       	<title>Checkbox</title> 
   	</head>
	
   	<body> 
    		<form>
      			<input type="checkbox" name="language1" value="java"> I like Java<br>
      			<input type="checkbox" name="language2" value="php"> I like PHP 
    		</form>
  	</body>
</html>

Button

Button is used to process the form data.


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

File Upload Field

File upload field is used to get files from the user in a form. The visitors can select a file from the disk using this field.


<!doctype html>  
<html>
   	<head> 
    	 <title>File Upload Field</title> 
   	</head>
	
  	<body> 
    		<form>
      			<input type="file">
    		</form>
  	</body>
</html>

HTML
Images

The <img> tag is used to insert a picture into a document. This element should not contain any content, and does not require a closing tag.

Working

It is essential to comprehend that images are not technically “part” of the website page file, they are isolated files which are embedded into the page when it is seen by a browser.

So, a basic web page with one image is actually two records or files – the HTML file and the image file.

Image Breakdown

Here is the breakdown of HTML Image

Image Example

Below example will demonstrate the basic architecure of HTML Image


<!doctype html>  
<html>
    <head>
        <title>HTML Image</title> 
    </head>
  
    <body>
        <img src="img/logo.png" alt="HTML 5 Logo">
    </body>
</html>

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.


<!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.


<!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.


<!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.


<!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

Go to the Google Cloud Platform Console.
From the Project drop-down menu, select or create the project for which you want to add an API key.
From the Navigation menu, select APIs & Services > Credentials.
On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key.
On the dialog, click Restrict Key.
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


<!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:


<!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:


<!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:


<!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:


<!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:


<!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:


<!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