HTML

HTML Layout

Back
Next

Layouts

Layout is basically How you arrange your HTML in web Pages,when we design HTML Document we use Layouts proper postinging on HTML Tags

Layouts can be easily achieved by using HTML Tags such as <table>,<div>,<header>,<footer>,<section>

We can Design Layouts in different ways

1. Table Based Layout
2. Div Based Layout
3. Using Structural Elements

Table Based Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body style="margin:0px;">
<table style="width:100%; font:15px Arial,sans-serif;">
<tr>
<td colspan="2" style="padding:10px 20px;">
<h1>Tutorial <h1>
<td>
<tr>
<tr>
<td style="background-color:green; vertical-align: top;">
<ul style="list-style:none; padding:0px; line-height:24px;">
<li><a href="#" style="color:#333;">Home<a><li>
<li><a href="#" style="color:#333;">About<a><li>
<ul>
<td>
<td style="background-color:red; vertical-align:top;">
<h2>Welcome to the sitelt;h2>
<td>
<tr>
<tr>
<td colspan="2" style="background-color:black; text-align:center;">
<p>This is Footer<p>
<td>
lt;tr>
lt;table>
<body>
</html>



Div Based Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="">
<div class="">
<h1>Tutorial<h1>
<div>
<div class="">
<div class="nav">
<ul>
<li><a href="#">Home<a><li>
<li><a href="#">About<a><li>
lt;ul>
lt;div>
<div class="">
<h2>Welcome to the site<h2>
<div>
<div>
<div class="">
<p>This is Footer<p>
<div>
<div>
<body>

</html>


Back
Next