Layouts and html codes

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.

Источник

HTML Layout Design: What Techniques, Elements, and Codes To Use

The knowledge of HTML layout designing is not sufficient to create crisp and responsive websites, blogs, and landing pages. As a programmer, you also need intuition and perspective.

This article aims to enlighten both absolute beginners and those who wish to hone their skills. In this article, you’ll find out more about the techniques, elements, and code examples of the cornerstone technologies of HTML and CSS.

• Main Objectives
• HTML Page Layout: The Basic Principles
  • – Notes on The Basic Principles
  • – CSS Framework
  • – CSS Flexbox
  • – CSS Float Property
  • – CSS Grid
  • – Fixed (px)
  • – Fluid
  • – Elastic (em)
  • – Hybrid

  Main Objectives

  • Understanding the different HTML layout design techniques
  • CSS layout types and applications
  • Application of HTML and CSS for Progressive Enhancement
  • Templates customization techniques

  HTML Page Layout: The Basic Principles

  Hypertext Markup Language (HTML) defines the document structure. Cascading Style Sheet (CSS) is needed to define the visual and auditory elements like color, font, placement of grids, etc. The combined application is the way to create an overall presentation.

  So beginning with the basic HTML layout examples, below is the conventional choice for a standard Home Page and Inner Pages for a simplistic website:

  The presentation of the different sections of the website is defined by the semantic elements. The most significant ones are:

  – Notes on The Basic Principles

  Note that is a non-semantic tag and primarily adds to an id or class to define the purpose of action. This tag supports the need for more enriched, progressive visual layout designs by employing a class or id attribute to define a purpose. For instance, adding instead of using just .

  The layout design works as a blueprint that allows end-users to easily navigate through web pages. You can carry out innovative design dynamics throughout your web pages by customizing your header, main content, nav, aside, and article elements. For most of its part, your greatest power is the generic block-level elements < div >that help you to group dispersed HTML elements. And with the help of simple HTML5 tags, you can create crisp and seamless web pages.

  It doesn’t always need strenuous coding to deliver excellent results.

  HTML Coding Layouts: Techniques and Application

  There are altogether four distinct techniques to create multicolumn layouts for modern web pages. It amasses on CSS. Below is a brief about them:

  – CSS Framework

  These are ready-to-use style sheets contributed by Samaritan UI developers. You may pick free templates or purchase more unique ones. It is a standard practice for CSS Frameworks to execute more quick and efficient web page designing. So developers don’t have to reinvent the wheel and start with a black document every time they need to create a web page. By leveraging existing frameworks, fresh interfaces can be created in half the time. Foundation and Bootstrap are among the most trusted frameworks.

  – CSS Flexbox

  Using rows and columns, Flexbox makes it simple to align items horizontally and vertically. To fill the space, items will “flex” to different sizes. It simplifies responsive design. Flexbox is a web layout model in CSS 3. It enables responsive elements within a container to be arranged automatically based on screen size.

  – CSS Float Property

  CSS floats have more capabilities than supporting two-dimensional layouts. The property allows elements to be positioned on either side of the container. As a result, the page text and inline elements can neatly place around it. In contrast to absolute positioning, the element is removed from the normal flow of the page while remaining a part of it. That is how you get images floating left to the text inside a container.

  – CSS Grid

  The grid-based is the next best thing in the HTML website layout design principle. The neat, organized visual journey keeps a designated space for everything. The concept is based on a two-dimensional grid system that is used to work on the layout of UI elements and webpage segments. The Grid, like a table, is made up of horizontal and vertical lines that form rows and columns. It allows for the creation of web pages without the use of floats and positioning.

  Types of CSS Layouts

  Now that you have a roundabout of HTML/CSS coding techniques, let us move on to the next phase to understand the different CSS Layouts featured in your HTML web page. There are three types of them – fixed, fluid, and elastic, and now a fourth one has joined the trio – hybrid. Below is a detailed classification.

  – Fixed (px)

  These are static layouts that remain fixed as per the dimensions specified by the web designers and do not respond to the changing of screen sizes. Fixed-width layouts feature a one-dimensional visual representation that may not be responsive but allows ample control to the web designers. It is the easiest and cheapest option.

  – Fluid

  In liquid or fluid layouts, multiple columns in a webpage can automatically resize and reflow with text to match the display and size of the screen and browser window. Its distinct feature is that while the layout parameters vary, it doesn’t impact the cohesion of reading order or the arrangement of elements. This technique aims to feature content more seamlessly, without having scroll bars that adjust to the free horizontal space.

  – Elastic (em)

  This is a scalable layout option that significantly overcomes the shortcomings of both Fixed and Fluid layouts, most notably the lack of adaptability of fonts and other media. So this is a combination of both principles, which causes font sizes to change with the element widths as expressed in “em”. As a result, the layout does not change when the Window size changes but instead adapts the font sizes to the diameter of the browser viewport.

  – Hybrid

  This is more of a custom solution to include all the size values of fixed, fluid, or elastic layouts and allows the designers to set the best dimension for separate situations, window widths, and device screen sizes.

  The Concept of Progressive Enhancement

  In a nutshell, progressive enhancement is a web design principle that allows for a broad scope of browsing access – from multiple devices to cross-platform accessibility.

  The principle is inextricably linked to your layout concept. Web pages are enhanced with segregated components to match the capability of browsers and screen sizes.

  The concept leverages HTML layout elements for imparting more flexibility, scalability, and cohesion all at the same time. Styling essentials go for progressively enhancing the overall user experience of the design. So one user sends the link of an HTML page showing the 360degree vistas from the top of the Eiffel Tower – the experience is enjoyed the same, no matter which device, browser, or size window the end-user has. So this one goes out for seamless browser support – for all browsers. Finally, it uses an enriched browsing experience and more interactive features to join forces with JavaScript and accommodate finite user behavior.

  HTML Layout Template Customisation Options

  You can get free HTML templates in Bootstrap. However, for the best customization ease, use the Google Chrome browser because you may get some in-built template customization features.

  Instead of old-school notepad coding, use a code editor tool. It is sufficient to edit the HTML code, but it is preferable to use a special code editor to edit the template. Code editors highlight the code with different colors, making customization simple and painless. There are several text editors available, including Atomic and VS code.

  So here is a roundabout of the core concepts behind the design principles and their techniques. Don’t take this as a tutorial.

  Remember, Simplicity is the Best

  A lot of things have changed with HTML5 and tables are not the only option to create awe-inspiring web layouts – you can literally create magic with it now!

  Minimalist and clean layouts have created a stir lately. The more clean and crisp your web layout the better.

  Final Thoughts

  That said, in this article, we have discussed the following important points:

  • The basic principles of page layout are carried out with semantic elements
  • The purpose and application of different HTML/CSS codes
  • The variations of CSS layouts
  • The different techniques of CSS Coding for Website Layout design
  • Understanding the importance and subjects of Progressive Enhancement
  • And finally, customizing HTML templates.

  

  Whether you’re looking to break into the exciting industry of web development, or you’re a novice looking to advance your career, learning HTML can open up an ocean of opportunities for you: you can design not only websites but online games, virtual tours, and simulations, web applications, and unique experiences. So go discover the magical world of HTML possibilities.

  Источник