HTML5 Tutorial – Layout


HTML Layout is very important for every website which based on thematic looks. Layout gives another definition to the websites. For different type of websites there are different types of layout like newspaper, magazine, social media sites etc. For example on Social Media Sites like Facebook and Twitter you can notice that every post is displayed on middle and on left site menus and links are defined, on top of the site search and notification and on the right side chat-box and other ad links are defined. Similarly every website follows their own predefined layouts. It is very important.




Website Development Tutorials

What is CSS?

CSS is a markup language used with HTML to design the user Interface of a website. CSS stands for Cascading Style Sheet. CSS describes the style of HTML on a web page.
CSS can be used to HTML in three different methods.
Inline - In this method we use style attribute inside the HTML element. We have already learnt this method above.
Internal - In this method we use to define the CSS property: value pair inside <style> element within <head> section. We target to select the elements by its name or selector attributes like id and class. We have learnt about the selector attributes in HTML5 Tutorial - HTML Attributes chapter.
External - I this method we use external CSS file and create a hyperlink between HTML and CSS documents and target to select the elements by its name or selector attributes like id and class.
Copyright © progrramers.com



HTML Layout Element


Website often displays the content in multiple columns which separated to each other like heading in header section, menu bar in navigation section, article and main contents in article section and footer content in footer section. HTML5 offers new type of semantic elements that define the different parts of a web page like below image:

HTML Layout Elements


How to create a web page multi column Layout

  1. Create HTML Layout using HTML Tables
  2. Create HTML Layout using CSS float property
  3. Create HTML Layout using CSS frameworks
  4. Create HTML Layout using CSS flex box

HTML Layout using HTML Tables


HTML layout can be created by using HTML tables. When you start learning HTML and create web page, you will find to define HTML Layout is very easy using HTML tables. Somewhere you will able to create responsive design too with HTML table. But it is also true that HTML Table is not designed to be used as layout tool. The purpose of HTML Tables is to show the tabular data. So it not recommended creating a web page layout using HTML tables.


<table width = "100%" border = "0" style = "border:1px solid #46A274;">
         <tr>
            <td colspan = "2" bgcolor = "#46A274" style = "text-align:center;">
               <h1>Website Development Tutorials</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50" style = "text-align:center;">
               HTML<br />
               CSS<br />
        Java Script<br />
        SQL<br />
               PHP
            </td>
            <td bgcolor = "#eee" width = "100" height = "200">
               <h2>What is CSS?</h2>
  <p>CSS is a markup language used with HTML to design the user Interface of a 
                   website. CSS stands for Cascading Style Sheet.CSS describes the style of 
                   HTML on a web page.</p>
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#46A274" style = "padding:20px;">
               <center>
                  Copyright &copy; progrramers.com
               </center>
            </td>
         </tr>
</table>



Tips: Don’t ever try to do this as a professional.


Create HTML Layout using CSS float property


CSS float property is most common way to create an HTML Layout. CSS float property can be learning while learning CSS. It is very easy to learn; only we need to understand how Float and Clear properties work. Meanwhile you can see use of the float property in the below example:


<style>
.progrramers-layout {
    width: 100%;
    border: 1px solid #46A274;
 margin:0px;
 padding:0px;
}

.progrramers-layout header, footer {
    padding: 1em;
    color: white;
    background-color: #46A274;
    clear: left;
    text-align: center;
 font-family:ubuntu;
}

.progrramers-layout nav {
    float: left;
    max-width: 160px;
 min-width: 160px;
    margin: 0;
    padding: 0em;
}

.progrramers-layout nav ul {
    list-style-type: none;
    padding: 0;
}
   
.progrramers-layout nav ul a {
    text-decoration: none;
 color:green;
}

.progrramers-layout article {
    margin-left: 170px;
    border-left: 1px solid #46A274;
    padding: 1em;
    overflow: hidden;
 color:#424242;
}
</style>
</head>
<body>
<div class="progrramers-layout">
<header>
   <h1>Website Development Tutorials</h1>
</header>
<nav>
  <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Java Script</a></li>
    <li><a href="#">SQL</a></li>
    <li><a href="#">PHP</a></li>
  </ul>
</nav>
<article>
 <h2>What is CSS?</h2>
  <p>CSS is a markup language used with HTML to design the user Interface of a website. CSS stands for Cascading Style Sheet. CSS describes the style of HTML on a web page.</p>
  <p>CSS can be used to HTML in three different methods.</p> 
</article>
<footer>Copyright &copy; progrramers.com</footer>
</body>



Tips: Floating Elements depend on the flow of documents which may create trouble to the Layout flexibility.

Create HTML Layout using CSS frameworks


These days CSS became more advance. CSS and Java Script combined ready to use frameworks are getting more popular and preferred choice. Frameworks like W3.CSS and bootstrap are used to create HTML Layout. But before using frameworks progrramers tutorials recommends learning CSS and Java Script first. Use of CSS is more helpful while you are trying to customize framework as you wish.


<style>
  body{
   background: #eee;color:#424242;
  }
  .progrramer-container{
   background: #46A274;color:white;font-family:ubuntu;
  }
  </style>
</head>
<body>

<div class="jumbotron text-center progrramer-container">
  <h1>Website Development Tutorials</h1>
  <p>Learn Website Development with Lots of Examples</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>HTML</h3>
      <p>HTML stands for "Hyper Text Markup Language".</p>
      <p>HTML is a markup language use to create web pages and web application.</p>
    </div>
    <div class="col-sm-4">
      <h3>CSS</h3>
      <p>CSS stands for Cascading Style Sheet. CSS describes the style of HTML on a web page.</p>
      <p>CSS is a markup language used with HTML to design the user Interface of a website.</p>
    </div>
    <div class="col-sm-4">
      <h3>PHP</h3>        
      <p>PHP stands for Hyper Text Pre Processor.</p>
      <p>PHP is a server side scripting language and a powerful tool to navigate with server database. </p>
    </div>
  </div>
</div>

</body>



Tips: CSS frameworks are based on predefined classes. Customization can be harmful. It is good to use self-define classes to define the custom style to the HTML Elements.

Remember: HTML elements can contain the multiple classes. Read Class Attribute and Multiple Classes in HTML5 Tutorial - Attributes Id and Class.


Create HTML Layout using CSS flex box


CSS Flex box module is new entry in CSS3. We will learn CSS flex box in CSS Tutorial. Flex box layout makes easier to design flexible and responsive layout structure without using float, clear or position properties. Using flex box ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.


<style> 
.flex-progrramers {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
 border:1px solid #46A274;
}

.flex-progrramers > * {
    padding: 15px;
    -webkit-flex: 1 100%;
    flex: 1 100%;
}

.article {
    text-align: left;
 color:#424241;
}

header {background: #46A274;color:white;font-family:ubuntu;}
footer {background: #46A274;color:white;font-family:ubuntu;}
.nav {background:#eee;}

.nav ul {
    list-style-type: none;
    padding: 0;
}
.nav ul a {
    text-decoration: none;
}
a:link{
 color:#424242;
}
a:hover{
 color:#000000;
}
@media all and (min-width: 768px) {
    .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
    footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>

<div class="flex-progrramers">
<header>
  <h1>Website Development Tutorials</h1>
</header>
<nav class="nav">
<ul>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">Java Script</a></li>
  <li><a href="#">SQL</a></li>
  <li><a href="#">PHP</a></li>
</ul>
</nav>
<article class="article">
  <h1>What is CSS?</h1>
  <p>CSS is a markup language used with HTML to design the user Interface of a website. CSS stands for Cascading Style Sheet. CSS describes the style of HTML on a web page.</p>
  <p>CSS can be used to HTML in three different methods.</p> 
</article>

<footer>Copyright &copy; progrramers.com</footer>
</div>



HTML Tutorial - HTML Layout Elements
> Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

1 comments:

  1. Most reputable web designers know not to choose a web host simply because they are the most popular or because they offer the cheapest web hosting. MavericksMedia

    ReplyDelete