Html page templates layout

HTML Layout Elements and Techniques

Websites often display content in multiple columns (like a magazine or a newspaper).

Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

— Defines a header for a document or a section
— Defines a set of navigation links
— Defines a section in a document
— Defines an independent, self-contained content
— Defines content aside from the content (like a sidebar)
— Defines a footer for a document or a section
— Defines additional details that the user can open and close on demand
— Defines a heading for the element

• — Defines a header for a document or a section
• — Defines a set of navigation links
• — Defines a section in a document
• — Defines an independent, self-contained content
• — Defines content aside from the content (like a sidebar)
• — Defines a footer for a document or a section
• — Defines additional details that the user can open and close on demand
• — Defines a heading for the element

You can read more about semantic elements in our HTML Semantics chapter.

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

CSS Frameworks

If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

CSS Float Layout

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.

Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Learn more about flexbox in our CSS Flexbox chapter.

Example

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Learn more about CSS grids in our CSS Grid Intro chapter.

Источник

Layout Templates

The following templates provide a basic CSS website layout that enables you to get started with your website. Add content, images, and other media, and your website is complete.

Note that the templates on this page contain embedded style sheets. It is best to transfer these styles to an external style sheet if you plan to use the same styles across multiple pages (for example, a whole website).

3 Column Layout

3 Column Layout, 2 Right Menus

2 Column, Left Menu

2 Column, Right Menu

2 Column, Left Menu, Header & Footer

2 Column, Right Menu, Header & Footer

Customize Your Template

Here are a few ways you can modify your HTML template.

• Add some free graphics to your template.
• Modify your template or simply add content with these HTML codes. Simply copy/paste them into your template.
• Check out these HTML examples for more ideas. You can copy and paste these too.
• Browse this list of JavaScript examples to add interactivity to your website. Again, you can copy and paste the code.
• Learn HTML with this HTML tutorial.
• Learn how to modify your template styles with this CSS tutorial.
• Learn how to add interactivity to your template with this JavaScript tutorial.
• Check out our other tutorials by visiting our homepage.

Источник

HTML Layouts

Advanced website layouts can be achieved using a combination of HTML and CSS. Here’s an overview.

Most modern websites and blogs consist of a header, footer, navbar, perhaps another sidebar, and let’s not forget, the main content area. Something like this:

HTML has a number of elements that can be used to define each of these areas. These include the main , header , footer , nav , aside and article elements. Also, the div element is a generic block level element that can be used for grouping HTML elements.

So the above layout could be marked up as follows:

But those elements merely provide the document’s structure. They don’t deal with presentation. So we’ll end up with this:

As mentioned earlier in this tutorial, CSS is what we need for defining the presentation of our HTML documents.

CSS Grid Layout

CSS grid layout was purpose built for website layouts. It works on a two-dimensional grid system, where you specify which elements go to which parts of the grid.

So we could take the above HTML code, then use CSS grid to position each element:

If your browser supports grid layout, that example should look like the example at the top of this page. Here it is again:

In this example, we use the grid-template-areas property with a kind of «ASCII art» syntax to specify where each element goes. That’s the bit that looks like this:

Then we tie each element to each of those grid areas using the grid-area property.

The rest of the code deals with sizing, gutters, general aesthetics, etc.

In this case we did actually change the markup slightly by adding IDs to the elements. We didn’t need to do this, but it’s good practice. By doing this, we ensure that the grid areas will be occupied only by the elements with the correct ID. If we didn’t do this, we could run into major problems if we ever add another element of the same name (for example, another header element) to the page.

Responsive Layouts

Responsive layouts adjust according to the screen size being used to view the website. This means that your website will probably look different on a mobile phone vs a tablet vs a desktop computer. The website adjusts itself to provide the best layout for the screen size.

We can modify the above example so that it uses a different layout on small devices such as mobile phones.

To do this, we add a media query to test for the size of the screen. If it’s smaller than a certain width, we show them the new layout.

The above example will have all the elements stacked upon each other (unless you’re viewing this example on a very wide screen). Stacking the elements like this is ideal for small devices such as mobile phones. Click the Preview button to view it in a new window (which should display the original layout — unless you’re already viewing this on a small device).

Here’s the media query we used for that example:

We simply change the ASCII art to reflect our new layout, which in this case, is simply stacking each element on top of each other (but in the order we specify). We also change the values of the rows and columns as required.

Check out the grid tutorial if you’re interested in learning more about working with the grid.

Non-Grid Browsers

Grid layout is still very new, and as such, browser support is limited. The good news is that most major browsers started supporting grid from March 2017, so the wheels are definitely in motion. But there are still a lot of web users using non-grid browsers.

So until grid has widespread browser support, in order to support non-grid browsers, you will need to use other methods for your website layouts, such as CSS floats (with the float property) and/or flexbox (with flex and related properties).

If this feels a bit overwhelming, don’t despair! You can download any of these HTML templates for your own use. You can open up the files and see how each one is built. And you can modify them as you wish.

The Evolution of Website Layouts

Web technologies have changed since the early days of the web. HTML tables were once the only way to create advanced two or three column layouts, where the whole website was nested inside a big table. But tables weren’t designed for layout purposes — they were designed to hold tabular data. And HTML wasn’t designed for presentation — it was designed for mark up the document’s structure.

CSS was designed for presentation. So once browsers finally had (reasonably) consistent support for CSS, CSS floats became the norm, where the CSS float property would be applied to block elements that needed to sit next to each other. This enabled developers to continue with their three-column layouts while keeping the presentation separate to the content.

But floats weren’t really designed for two-dimensional layouts, and it was often challenging to get all page elements to line up properly, with everything at the correct height, and nothing being inadvertently pushed down to the next line, etc.

The introduction of flexbox eased a lot of pain, as it provided a better way to line up elements side by side, without many of the problems inherent in floats. However, flexbox is a one-dimensional system. It’s perfect for lining up elements beside each other, or piled up on top of each other, but not both.

This is where CSS grid layout comes in. Grid layout was designed specifically for creating two-dimensional layouts. Using grid, the website’s entire layout is build using a two-dimensional grid system. Every element can be precisely positioned, and it can shrink or stretch as required. And best of all, grid is extremely easy to use.

Источник