Scribd
Upload
6 views

HTML Layout Tech

The document outlines various semantic HTML elements that structure a web page, such as <header>, <nav>, <section>, and <footer>. It also discusses different techniques for creating multicolumn layouts using CSS, including frameworks, float properties, flexbox, and grid layout. Additionally, it provides examples of HTML code demonstrating these layout techniques and the use of HTML symbol entities.

Uploaded by

suryakarthik890890890
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

HTML Layout Tech

The document outlines various semantic HTML elements that structure a web page, such as <header>, <nav>, <section>, and <footer>. It also discusses different techniques for creating multicolumn layouts using CSS, including frameworks, float properties, flexbox, and grid layout. Additionally, it provides examples of HTML code demonstrating these layout techniques and the use of HTML symbol entities.

Uploaded by

suryakarthik890890890
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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

• <header> - Defines a header for a document or a


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

HTML Layout Techniques

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

• CSS framework
• CSS float property
• CSS flexbox
• CSS grid

CSS Frameworks

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

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.
CSS Flexbox Layout

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

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.

<!DOCTYPE html>

<html lang="en">
31
<head>

<title>CSS Template</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

*{

box-sizing: border-box;

body {

font-family: Arial, Helvetica, sans-serif;

/* Style the header */

header {

background-color: #666;

padding: 30px;

text-align: center;

font-size: 35px;

color: white;

/* Create two columns/boxes that floats next to each other */

nav {

float: left;

width: 30%;

height: 300px; /* only for demonstration, should be removed */

background: #ccc;

padding: 20px;

/* Style the list inside the menu */

32
nav ul {

list-style-type: none;

padding: 0;

article {

float: left;

padding: 20px;

width: 70%;

background-color: #f1f1f1;

height: 300px; /* only for demonstration, should be removed */

/* Clear floats after the columns */

section::after {

content: "";

display: table;

clear: both;

/* Style the footer */

footer {

background-color: #777;

padding: 10px;

text-align: center;

color: white;

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of
next to each other, on small screens */

@media (max-width: 600px) {

nav, article {

width: 100%;

33
height: auto;

</style>

</head>

<body>

<h2>CSS Layout Float</h2>

<p>In this example, we have created a header, two columns/boxes and a footer. On smaller
screens, the columns will stack on top of each other.</p>

<p>Resize the browser window to see the responsive effect (you will learn more about this
in our next chapter - HTML Responsive.)</p>

<header>

<h2>Cities</h2>

</header>

<section>

<nav>

<ul>

<li><a href="#">London</a></li>

<li><a href="#">Paris</a></li>

<li><a href="#">Tokyo</a></li>

</ul>

</nav>

<article>

<h1>London</h1>

<p>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.</p>

<p>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.</p>

</article>

</section>
34
<footer>

<p>Footer</p>

</footer>

</body>

</html>

19) HTML Symbols


Symbols that are not present on your keyboard can also be added by using entities.
HTML Symbol Entities
Many mathematical, technical, and currency symbols, are not present on a normal keyboard.
To add such symbols to an HTML page, you can use the entity name or the entity number (a
decimal or a hexadecimal reference) for the symbol.
<html>
<body>

<h1>Greek Letter Example</h1>

<h2>The capital gamma letter: &Gamma;</h2>

</body>
</html>

20) HTML Responsive

35
HTML LAYOUT (By using grid):-
<html>
<head>
<style>

.container{
margin:10px;
display:grid;
width:100%;
height:100%;
grid-template-columns:25% 50% 25% ;
grid-template-rows:15% 70% 15%;
grid-gap:4px;

}
.container div{
background-color: blue;
color:white;
font-size:30px;
display:flex;
justify-content: center;
align-items: center;
border:2px solid cyan;
}
.last,.item1{
grid-column:1/4;
}

</style>
</head>
<body>
<div class="container">
<div class="item1">
HEADER
</div>
<div>NAVBAR</div>
<div>CONTENT</div>
<div>ASIDE</div>
<div class="last">FOOTER</div>

</div>
</body>
</html>
LAYOUT USING FLEX:-
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}

.flex-container > div {


background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Items</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<p>All direct children of a flexible container becomes flexible items.</p>
</body>
</html>

You might also like