Home
Latest images
Search
Register
Log in
AdminAdmin- Posts : 13
Join date : 2017-10-16 
HTML Layout
Mon Oct 16, 2017 8:36 pm
HTML Layout Elements
Websites often display content in multiple columns (like a magazine or newspaper).
HTML5 offers new semantic elements that define the different parts of a web page:
<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details> element
HTML Layout Techniques
There are four different ways to create multicolumn layouts. Each way has its pros and cons:
HTML tables
CSS float property
CSS framework
CSS flexbox
Which One to Choose?
HTML Tables
The <table> element was not designed to be a layout tool! The purpose of the <table> element is to display tabular data. So, do not use tables for your page layout! They will bring a mess into your code. And imagine how hard it will be to redesign your site after a couple of months.
Tip: Do NOT use tables for your page layout!
CSS Frameworks
If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.
CSS Floats
It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.
CSS Flexbox
Flexbox is a new layout mode in CSS3.
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier.
Websites often display content in multiple columns (like a magazine or newspaper).
HTML5 offers new semantic elements that define the different parts of a web page:
<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details
<summary> - Defines a heading for the <details> element
HTML Layout Techniques
There are four different ways to create multicolumn layouts. Each way has its pros and cons:
HTML tables
CSS float property
CSS framework
CSS flexbox
Which One to Choose?
HTML Tables
The <table> element was not designed to be a layout tool! The purpose of the <table> element is to display tabular data. So, do not use tables for your page layout! They will bring a mess into your code. And imagine how hard it will be to redesign your site after a couple of months.
Tip: Do NOT use tables for your page layout!
CSS Frameworks
If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.
CSS Floats
It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.
CSS Flexbox
Flexbox is a new layout mode in CSS3.
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier.
- Nadine Lustnewbie
- Posts : 1
Join date : 2017-10-16
Re: Your first subject
Mon Oct 16, 2017 9:25 pm
What do you think the most used multicolumn layout?
- Angelsky214Member
- Posts : 4
Join date : 2017-10-16
Re: Your first subject
Mon Oct 16, 2017 10:03 pm
Can you show us some codes regarding the multicolumn layout? Just to figure it out.
- emehwaynewbie
- Posts : 2
Join date : 2017-10-16
Re: Your first subject
Mon Oct 16, 2017 10:05 pm
What is the used of tables?
- Lizamaster
- Posts : 7
Join date : 2017-10-16
Re: Your first subject
Mon Oct 16, 2017 11:06 pm
Ma'am can you share to us a sample code in program showing the use of CSS Floats?
- AdminAdmin
- Posts : 13
Join date : 2017-10-16
Re: Your first subject
Mon Oct 16, 2017 11:07 pm
Hi miss nadine lust the most used multicolumn layout is the header, because we use header in every website we created
- Lizamaster
- Posts : 7
Join date : 2017-10-16
Re: Your first subject
Mon Oct 16, 2017 11:10 pm
Nadine Lust wrote:What do you think the most used multicolumn layout?
I think Nadine Lust the most used multicolumn layout is the CSS Framework. am I right Ma'am ? hihihi just sharing my thoughts ma'am
- AdminAdmin
- Posts : 13
Join date : 2017-10-16
Re: Your first subject
Wed Oct 18, 2017 2:29 pm
hi miss angel this is a example code in multicolumn
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
</article>
<footer> </footer>
</div>
</body>
</html>
- AdminAdmin
- Posts : 13
Join date : 2017-10-16
Re: Your first subject
Wed Oct 18, 2017 2:35 pm
hi miss emehway..
HTML Layout - Using Tables
The simplest and most popular way of creating layouts is 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.
Example
For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright
2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>
This will produce the following result −
HTML Layout - Using Tables
The simplest and most popular way of creating layouts is 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.
Example
For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright
2007 Tutorialspoint.com</center>
</td>
</tr>
</table>
</body>
</html>
This will produce the following result −
- AdminAdmin
- Posts : 13
Join date : 2017-10-16
Re: Your first subject
Wed Oct 18, 2017 2:37 pm
hi miss liza..
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
margin: 0 0 10px 10px;
}
</style>
</head>
<body>
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" width="170" height="170">
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
margin: 0 0 10px 10px;
}
</style>
</head>
<body>
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" width="170" height="170">
</p>
</body>
</html>
Permissions in this forum:
You cannot reply to topics in this forum