HTML Layouts

Eine Webseite Layout ist sehr wichtig, um besser sehen zu Ihrer Website geben. Es dauert geraume Zeit, um das Layout einer Website mit tollen Look und das Gefühl zu entwickeln.

Nun wird ein Tag, werden alle modernen Webseiten sind Unter Verwendung CSS und Javascript basiertes Framework, um mit reaktionsschnelle und dynamische Websites, aber Sie können ein schaffen Layout mit einfachen HTML-Tabellen oder Division-Tags in Kombination mit anderen Formatierungs-Tags erstellen. Dieses Kapitel gibt Ihnen einige Beispiele auf, wie man eine einfache, aber Arbeits Layout für Ihre Webseite mit reinem HTML und seine Attribute zu erstellen.

HTML Layout - Verwenden von Tabellen

Die einfachste und beliebteste Art der Erstellung von Layouts wird unter Verwendung HTML <Tabelle> tag. Diese Tabellen sind in Spalten und Zeilen angeordnet sind, so dass Sie können nutzen diese Zeilen und Spalten in welcher Weise auch immer Sie wie.

Biespiel

Zum Beispiel die folgenden HTML-Layout Beispiel ist erreicht wird mit Hilfe einer Tabelle mit 3 Zeilen und 2 Spalten, aber der Kopf-und Fußzeile Spalten Spannweite beide Spalten mit dem colspan Attribut : 

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

Dies wird folgendes Ergebnis produzieren:

This is Web Page Main title
Main Menu
HTML
PHP
PERL... 		Technical and Managerial Tutorials
Copyright © 2007 Tutorialspoint.com

Multiuple Spalten Layout - Verwenden von Tabellen

Sie können entwerfen Ihre Website, um Ihre Web-Inhalte in mehreren Seiten legte. Sie können halten Ihre Inhalte in mittleren Spalte, Menü in der linken Spalte und Werbung in der rechten Spalte . Dieses Layout wird sehr ähnlich zu dem was wir bei unserer Website haben tutorialspoint.com .

Beispiel

Hier ist ein Beispiel, um drei Spalten-Layout zu erstellen:

<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width="100%" border="0">
  <tr valign="top">
    <td bgcolor="#aaa" width="20%">
      <b>Main Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
    <td bgcolor="#b5dcb3" height="200" width="60%">
        Technical and Managerial Tutorials
    </td>
    <td bgcolor="#aaa" width="20%">
      <b>Right Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
   </tr>
<table>
</body>
</html>

Dies wird folgendes Ergebnis produzieren

Main Menu
HTML
PHP
PERL... 		Technical and Managerial Tutorials Right Menu
HTML
PHP
PERL...

HTML-Layouts - Mit DIV, SPAN

Die <div> Element ist ein Block-Level-Element zum Gruppieren von HTML-Elementen verwendet. Während die <div> Tag ist ein Block-Level-Element, das HTML<Spannweite > Element ist verwendet für Gruppierung der Elemente bei ein inline ebene.

Obwohl wir ziemlich nett Layouts mit HTML-Tabellen zu erzielen, aber Tische waren nicht wirklich als Layout-Tool entwickelt. Tabellen sind besser geeignet, um tabellarische Daten präsentiert.

Hinweis: Dieses Beispiel macht Gebrauch von Cascading Style Sheet (CSS), so, bevor das Verständnis dieses Beispiel müssen Sie ein besseres Verständnis darüber haben, wie CSS-Werke.

Beispiel

Hier werden wir versuchen, mit demselben Ergebnis zu erzielen unter Verwendung <div> Tag entlang mit CSS, was immer Sie erreicht haben unter Verwendung< Tabelle> -Tag in vorherigen Beispiel.

<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style="width:100%">
  <div style="background-color:#b5dcb3; width:100%">
      <h1>This is Web Page Main title</h1>
  </div>
  <div style="background-color:#aaa; height:200px;width:100px;float:left;">
      <div><b>Main Menu</b></div>
      HTML<br />
      PHP<br />
      PERL...
  </div>
  <div style="background-color:#eee; height:200px;width:350px;float:left;">
    <p>Technical and Managerial Tutorials</p>
  </div>
  <div style="background-color:#aaa; height:200px;width:100px;float:right;">
      <div><b>Right Menu</b></div>
      HTML<br />
      PHP<br />
      PERL...
  </div>
  <div style="background-color:#b5dcb3;clear:both">
  <center>
      Copyright © 2007 Tutorialspoint.com
  </center>
  </div>
</div>
</body>
</html>

Dies wird folgendes Ergebnis produzieren:

This is Web Page Main title

Main Menu
HTML
PHP
PERL...

Technical and Managerial Tutorials

Right Menu
HTML
PHP
PERL...
Copyright © 2007 Tutorialspoint.com

Sie können erstellen besser layout unter Verwendung DIV , SPAN zusammen mit CSS. Für weitere Informationen zu CSS entnehmen Sie bitte zu CSS Tutorial.

Advertisements