Layout and Lifestyle of HTML

Layout of HTML

Introduction to HTML Layout

While designing a web pages its important that we are arrange the web pages element in an elegant ways. They should be easy to navigates for the users and simples. Its provides a way to arrange these element in a well-structured manners. Its give a very good look to the web pages and provide an easy way to design as wells. Its a simple way by which we can design web element using simple standard HTML tag. HTML offers various layout element by using which we can designs various parts of the web pages.

HTML Layout Elements

In this articles, we will be see differents layout element along with their example. We will designs a simple structure similar to the newspaper by using these element.

1.<header>

These elements are used to define the header of the web pages. Its contain the title of the pages or some logo or maybe an introductory contents.

Code:

      <!DOCTYPE html>

      <html>

      <head>

      <title> EduCba </title>

      </head>

      <body>

      <header style = “height: 100px; width: 100%;

       background-color: #607D8B;” >

      <h1 style=” color: #fff; text-align: center;

       padding-top: 25px; font-size: 30px;” > Header

      Section</h1>

      </header>

      </html>

      </body>

Output: 

2.<nav>

This elements will be contains link to the menu lists. This elements are likes a container to different navigations link. The link will be on a different pages or the same pages.

Code:

Lets us add a navigation elements just below the header from our last example. Add style tag parts into the head tag elements and nav parts just below the header sections.

      <head>

      <style>

      li{

      display: inline-flex;

      padding: 25px

      }

      ul{

      text-align: center;

      }

      </style>

      </head>

      <body>

      <nav style = “background-color: #607d8b70;” >

      <ul>

      <li> <a href = “#”> Navigation Link1 </a> </li>

      <li> <a href = “#”> Navigation Link2 </a> </li>

      <li> <a href = “#”> Navigation Link3 </a> </li>

      </ul>

      </nav>

      </body>

Output: 

3.<section>

These element are like the main sections of the web pages. Its can contain any kinds of information. It can be contain texts, image, etc.

4.<article>

As the name suggest, this elements will contains content like a paragraphs, any detailed descriptions of something or any kind of informations. Generally, these will be the main parts containing information on a web pages.

5.<aside>

These elements will define the contents which will at the sides of the main contents like sections or articles. This information elements optional and will generally hold additional informations or advertisement contents.

Code:

Let add all these three element together below the navigation bars.

    <style>

    li { display: inline-flex;

    padding: 25px

    }

    section{

    background-color: #607D8B;

    width: 79%;

    position: absolute;

    height: 150px;

    }

    article{

    width: 79%;

    background-color: #607d8b70;

    position: absolute;

    top: 368px;

    height: 150px;

    }

    aside{

    background-color: #607d8b99;

    width: 20%;

    position: absolute;

    left: 80%;

    height: 300px;

    }

    h2 , p {

    text-align: center;

    color: #9c27b0;

    }

    ul{

    text-align: center;

    }

    </style>

    <body>

    <div class = “main” >

    <section>

    <h2> Section Part </h2>

    <p> Some Text </p>

    </section>

    <article>

    <h2> Article Part </h2>

    <p> Some Detailed Text </p>

    </article>

    <aside>

    <h2> Sidebar Part </h2>

    <p> This will contain static part or

     anything like advertisement etc. </p>

    </aside>

    </div>

    </body>

Output: 

List Style of HTML

Introduction to HTML List Styles

  • List is the common requirement to place the data in a formatted manners, like if you have made a webpages where you needs to display the contents of the pizza menu of a hotels, then likely it would be an HTML list styles, that shall appear in a clears and discrete manners.
  • Other cases can be where you are having a sets of rank of student who is appeared among top performer of the classes, in this contexts the requirements will be to places the rank 1 students at top and other below its in an increasing order of ranking, for that we needs to formats this into a sorted lists.
  • Another types can be custom list which you can make using the javascripts and html’s together, where the dynamic in the object can be sets up too and the list can take some customized outlooks.

Different List Styles in HTML:

Below is the various html lists style as follow –

1)Unordered Lists –

Here the orders of display of the contents are not something that we needs to care about, just we needs to place the thing well, such that the HTML pages make them placed up in front of the users in a well-formatted and clear ways.

There is two tag in HTML languages that handle these list and likely you can make navigation bars and vertical sidebar also, using these tag only.

  1. ul : this represent the unordered lists, whenever we need not rank anythings or look to places its in random orders, this tags are incorporated.
  2. li : these are represent the list item, the sets of item to be placed in the unordered lists i.e. under the ul tags appear insides the li tags. The item marked with these markup will be automatically carrying some bullet or circle in their beginnings, these is the basic HTML feature.

Now let see a pieces of code for ul and litag based unordered list and how the HTML pages will looks, once you executes that files, note that you can write in editor likes notepad and save files with “.html” extensions, hence its can be opened with any of the browser.

Example Snippet –

<html>

      <head> HTML Lists </head>

      <body>

      <h2> list of pizzas <h2>

      <ul>

      <li style=”color:red”> farmhouse </li>

      <li style=”color:green”> peppy paneer </li>

      <li style=”color:blue”> onion pizza </li>

      </ul>

      </body>

      </html>


Output – 

2)Ordered Lists –

Now will see a cases where we are looking to places the student in an ordered manners based on their rank in classes and these will appears in a sorted manner by using ol tags of html and its will be containing multiple li tag, those will have the lists item in its.

ol: this tags are used to sets up an ordered lists and all element is placed inside its, within li tag. li tags has been explained aboves.

Let see an Examples now for this cases too and you needs to save this just likes done above.


Example code –

      <html>

      <head> HTML Lists </head>

      <body>

      <h2> list of students <h2>

      <ol>

      <li style=”color:red”> John </li>

      <li style=”color:green”> Harris </li>

      <li style=”color:blue”> Plunket </li>

      </ol>

      </body>

      </html>


Output/ HTML page

Now let see some variant of these where we can be customize or well formats these list only by adding some CSS property into the HTML pages, which will makes the appearance of the pages looks better.

  1. In the unordered list, we have to following properties that we can be given –
  2. List-style-types – can be disc, circles, squares or none. So the circle you saw in unordered lists item will not appears if we choose none here, let do its.

Example –

      <html>

      <head> HTML Lists </head>

      <body>

      <h2> list of students <h2>

      <ul style=”list-style-type:none”>

      <li style=”color:red”> John </li>

      <li style=”color:green”> Harris </li>

      <li style=”color:blue”> Plunket </li>

      </ul>

      </body>

      </html>


Output/ HTML page –

So, the circles bullet no longer exists, you can customize its with the above-provided option.

Similarly, in the order list, there are a provisions to choose whether the order lists value will appears with numeral or Roman or alphabet.

You can to set the property type in ol tags for the same, and type can take following value

Type:“1”,” A”,” a”,” I”,” i”

Let us see Example Code for the same –

Example-

      <html>

      <head> HTML Lists </head>

      <body>

      <h2> list of students <h2>

      <ol type = “i”>

      <li style=”color:red”> John </li>

      <li style=”color:green”> Harris </li>

      <li style=”color:blue”> Plunket </li>

      </ol>

      </body>

      </html>


Output/ HTML page –

Similarly, we also have description list where we can defines the items against which we needs to place descriptions, let say you are making a pages where you needs to place some definition agonists some keyword, then you can choose the description list.

Leave a Reply

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