Design Web Page and Footer Tag in HTML

Design Web Page in HTML

An HyperText Markup Language (HTML) are one of the most populars languages to design Web Pages and its contents. HTML use differents tag, element, image and some latest component to makes Web Page more attractives and user-friendly.

Steps to Design Web Page in HTML

There is some basic step to design web pages using HTML is as follow:

  1. Designing Layouts:Before actually starting to design a web pages its necessary to prepare a rough overview for your web pages. This is helps the user to put element according to their needs. Web page should be divided into 3 part headers, body and footer parts.
  2. Do code sets up:. Simply prepares style.css files if we want to add external codes to our HTML web pages and simple index.html pages just for checking whether codes are working properly or not.
  3. Some CSS codes to your layouts:To fix element at some specific locations its necessary to sets them using some CSS codes and try to highlight your importants element.
  4. Customize your web pages: Its includes thing like adding a background images to the websites, adding some videos contents to engage the user with web page, adding link, comment, list to your web pages.

How to Design Web Pages in HTML?

  • Editors: In this scenarios, we are going to writes some HTML codes by using the editors. There is various editor available nowadays like notepad++, bracket, TextEdit, etc.
  • HTML codes:As per your web pages layout and all thing discussed into the syntax put HTML codes here in all tags and elements format.
  • Save Files: once you are done with Html codes, the nexts step are to save all HTML codes. Save this with .html extensions on the required locations.
  • Open a web pages in the browsers: In this steps, we are going to open our HTML pages in the browsers to checks the output.

Example #1

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width,
     initial-scale=1">
    <style>
    input[type=text], select, textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    margin-top: 4px;
    margin-bottom: 10px;
    }
    input[type=submit] {
    background-color:Blue;
    padding: 8px 8px;
    }
   
    </style>
    </head>
    <body>
    <h3>We welcome your suggestions</h3>
    <div class="container">
    <form>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname"
     placeholder="Enter Your name">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" 
    placeholder="Enter Your last name">
    <label for="ename">Email</label>
    <input type="text" id="ename" name="email" 
    placeholder="Enter Your Email here">
    <label for="mobno">Contact No</label>
    <input type="text" id="mobno" name="mobno" 
    placeholder="Enter Your Contact Number">
    <label for="subject">Feedback</label>
    <textarea id="subject" name="subject" 
    placeholder="Give your feedback
    "style="height:50px"></textarea>
    <input type="submit" value="Send">
    </form>
    </div>
    </body>
    </html>

Example #1

We welcome your suggestions

We welcome your suggestions

Example #2

HTML Code

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
     initial-scale=1">
    <style>
    * {
    box-sizing: border-box;
    }
    body {margin: 0;}
    .header {
    padding: 10px;
    text-align: center;
    background: orange;
    color: white;
    }
    .navbar {
    overflow: hidden;
    background-color: dimgrey;
    }
    .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 10px 10px;
    }
    .navbar a.right {
    float: right;
    }
    .navbar a:hover{
    background-color: #eee;
    color: black;
    }
    .row {
    display: flex;
    flex-wrap: wrap;
    }
    .sidebar {
    flex: 10%;
    background-color: #f1f1f1;
    padding: 20px;
    }
    .main {
    flex: 80%;
    background-color: white;
    padding: 20px;
    }
    .logoimg {
    height:10%;
    float:left;
    }
    </style>
    </head>
    <body>
    <div class="header">
 
    <h1>Welcome to Gurukul Zone</h1>
    </div>
    <div class="navbar">
    <a href="">Finance</a>
    <a href="">Data Science</a>
    <a href="">Software Development</a>
    <a href="">Excel</a>
    <a href="">Design</a>
    <a href="#" class="right">Login</a>
    </div>
    <div class="row">
    <div class="sidebar">
    <h2>Contact US</h2>
    <div><img src="images\Contact.jpg" style=
      "height:100px; width:100%;"></div>
    <h2>Reviews</h2>
    <div ><img src="images\review.jpg" style=
      "height:100px; width:100%;"></div>
    </div>
    <div class="main">
    <h2>WHO IS GURUKUL ZONE?</h2>
    <p>Choose your interest area and get certified 
    with our online Courses in Finance, Data Science,
     Software Development, Excel, Design, Project 
     Management, Personal Development, Marketing and 
    Human Resources..</p>
    <br>
    <div class="row">
    <div class="sidebar">
    <h2><u>Certification Courses</u></h2>
    <a href="">Financial Analyst Course - All in One 
    Bundle</a><br>
    <a href="">Marketing Course - All in One Bundle
    </a><br>
    <a href="">Human Resource Course - All in One Bundle
    </a><br>
    <a href="">Design Course -All in one Bundle</a> <br>
    <a href="">Excel VBA Course - All in One Bundle</a>
    </div>
    <div class="sidebar">
    <h2><u>Free Courses</u></h2>
    <a href="">Free Course on Data Science</a><br>
    <a href="">Free Course Graphic Design</a><br>
    <a href="">Free Online Excel Course</a><br>
    <a href="">Free Course Digital Marketing</a><br>
    <a href="">Free Course Programming</a>
    </div></div></div></div>
    </body>


Output:

Footer Tag in HTML

Footers are used to represents data related to authors, data which contain copyright informations or some link which is related to that data. This is author informations enclosed within address elements. This types of tags known as footer tags in HTML. Footer Tags in HTML are defined within footertags.

Syntax for footer Tag:

<body>
    <footer>
    <p>Some text</p>
    </footer>
    </body>
  • footertags can be represented within body tags enclosed with footer/footer tags having some texts within its which we are going to shows within footers sections.
  • Footers are one of the most useful element within the HTML5 webpages or for another HTML documents. Its considered as parts of individual block.

Example #1

HTML Code:

<body>
    <footer>
    <p>Some text</p>
    </footer>
    </body>


Output:

Footer Example

Published by Gurukol Zone

Footer Example

Example #2

HTML Code:

<head>
    <meta name="viewport" content="width=device-width,
     initial-scale=1">
    <style>
    * {
    box-sizing: border-box;
    }
    .header {
    background-color:aliceblue;
    padding: 10px;
    text-align: center;
    }
    .part {
    float: left;
    width: 25%;
    padding: 10px;
    }
    .footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color:darkgoldenrod;
    }
    </style>
    </head>
    <body>
    <div class="header">
    <h1>GURUKOL ZONE </h1>
    </div>
    <div class="row">
    <div class="part">
    <h2>Robotic Process Automations</h2>
    <p>Gurukol Zone is latest trending technology which 
    is automating jobs. It deals with the software to 
    automate business methodologies like 
    processingtransactions,
    replying to the emails, iterpreting with data etc.</p>
    </div>
    <div class="part">
    <h2>Machine Learing</h2>
    <p>Machine learing are the process considered as subsets 
    of Artificial Intelligence.It is based on neural 
    network,
     deep learings and natural languages processing (NLP)s
      .</p>
    </div>
    <div class="part">
    <h2>Artificial Intelligence</h2>
    <p>One of the fastest growing technologies are AI, which 
      are 
    based on system which builts  human intelligence to
     perform task. Its help to completes task more 
     perfectly 
    and in short time than human.  </p>
    </div>
    <div class="part">
    <h2>BlockChain</h2>
    <p>blockchain are trendy technology in upcoming day for
     maintaining transaction with encrypted and 
   decentralized
    natures. Here you are going to make chains of data, so
    there are no needs to trust on third party.</p>
    </div>
    </div> <br>
    <div class="footer">
    <h4>All rights reserved @gurukol zone 2019</h4>
    </div>
    </body>
Output:

Leave a Reply

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