Share
Go down
Admin
Posts : 13
Join date : 2017-10-16
View user profilehttp://jaylenebarias.forumotion.asia

HTML Layout

on 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.
newbie
newbie
Posts : 1
Join date : 2017-10-16
View user profile

Re: Your first subject

on Mon Oct 16, 2017 9:25 pm
What do you think the most used multicolumn layout?
Member
Member
Posts : 4
Join date : 2017-10-16
View user profile

Re: Your first subject

on Mon Oct 16, 2017 10:03 pm
Can you show us some codes regarding the multicolumn layout? Just to figure it out.
newbie
newbie
Posts : 2
Join date : 2017-10-16
View user profile

Re: Your first subject

on Mon Oct 16, 2017 10:05 pm
What is the used of tables?
master
master
Posts : 7
Join date : 2017-10-16
View user profile

Re: Your first subject

on 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?
Admin
Posts : 13
Join date : 2017-10-16
View user profilehttp://jaylenebarias.forumotion.asia

Re: Your first subject

on 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
master
master
Posts : 7
Join date : 2017-10-16
View user profile

Re: Your first subject

on 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
Admin
Posts : 13
Join date : 2017-10-16
View user profilehttp://jaylenebarias.forumotion.asia

Re: Your first subject

on 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>
Admin
Posts : 13
Join date : 2017-10-16
View user profilehttp://jaylenebarias.forumotion.asia

Re: Your first subject

on 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 −

Admin
Posts : 13
Join date : 2017-10-16
View user profilehttp://jaylenebarias.forumotion.asia

Re: Your first subject

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

Sponsored content

Re: Your first subject

Back to top
Permissions in this forum:
You cannot reply to topics in this forum