Σχεδιασμός Σχεδιασμός HTML

Οι ιστοσελίδες συχνά εμφανίζουν περιεχόμενο σε πολλές στήλες (όπως περιοδικά και εφημερίδες).

Χρήση στοιχείων <div> για διάταξη HTML

Σημείωση:Το στοιχείο <div> χρησιμοποιείται συχνά ως εργαλείο διάταξης, επειδή μπορεί να τοποθετηθεί εύκολα μέσω του CSS.

Αυτό το παράδειγμα χρησιμοποιεί τέσσερα <div> στοιχεία για να δημιουργήσει πολλαπλή στήλη διάταξη:

Παράδειγμα

<body>
<div id="header">
<h1>Γκαλερί Πόλης</h1>
</div>
<div id="nav">
Λονδίνο<br>
Παρίσι<br>
Τόκιο<br>
</div>
<div id="section">
<h1>Λονδίνο</h1>
<p>
Η Λονδίνο είναι η πρωτεύουσα της Αγγλίας. Είναι η πιο πληθυσμιακή πόλη του Ηνωμένου Βασιλείου,
με μια αστική περιοχή με πάνω από 13 εκατομμύρια κατοίκους.
</p>
<p>
Στην όχθη του ποταμού Thames, η Λονδίνο έχει είναι μια σημαντική εγκατάσταση για δύο χιλιετίες,
η ιστορία του επέτειος από την ίδρυσή του από τους Ρωμαίους, οι οποίοι το ονόμασαν Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

Δοκιμάστε το προσωπικά

CSS:

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

Χρήση ιστοσελίδας σχεδιασμού με HTML5

Τα νέα σημασιολογικά στοιχεία του HTML5 ορίζουν τα διαφορετικά μέρη της ιστοσελίδας:

Σημασιολογικά στοιχεία HTML5

header Ορισμός κεφαλίδας του κειμένου ή της ενότητας
nav Ορισμός κουτίου περιεχομένου για σύνδεσμους πλοήγησης
section Ορισμός ενότητας του κειμένου
article Ορισμός ανεξάρτητου αυτοσufficient στοιχείου άρθρου
aside Ορισμός περιεχομένου εκτός του κειμένου (π.χ. πλευρικές στήλες)
footer Ορισμός πινακίδας ποδηγματισμού του κειμένου ή της ενότητας
details Ορισμός πρόσθετων λεπτομερειών
summary Ορισμός τίτλου του στοιχείου details

Αυτό το παράδειγμα χρησιμοποιεί <header>, <nav>, <section>, και <footer> για να δημιουργήσει πολλαπλή στήλη διάταξη:

Παράδειγμα

<body>
<header>
<h1>Γκαλερί Πόλης</h1>
</header>
<nav>
Λονδίνο<br>
Παρίσι<br>
Τόκιο<br>
</nav>
<section>
<h1>Λονδίνο</h1>
<p>
Η Λονδίνο είναι η πρωτεύουσα της Αγγλίας. Είναι η πιο πληθυσμιακή πόλη του Ηνωμένου Βασιλείου,
με μια αστική περιοχή με πάνω από 13 εκατομμύρια κατοίκους.
</p>
<p>
Στην όχθη του ποταμού Thames, η Λονδίνο έχει είναι μια σημαντική εγκατάσταση για δύο χιλιετίες,
η ιστορία του επέτειος από την ίδρυσή του από τους Ρωμαίους, οι οποίοι το ονόμασαν Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

Δοκιμάστε το προσωπικά

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

Διάταξη HTML με Τάβλες

Σημείωση:Το στοιχείο <table> δεν σχεδιάστηκε να είναι εργαλείο διάταξης.

Το στοιχείο <table> χρησιμοποιείται για την προβολή δεδομένων σε μορφή πίνακα.

Η χρήση του στοιχείου <table> μπορεί να επιτύχει αποτελέσματα διάταξης, επειδή μπορεί να ρυθμίσετε τη διαμόρφωση του στοιχείου της τάβλας μέσω του CSS:

Παράδειγμα

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Σημείωση" style="height:32px;width:32px">
  </th>
  <td>
    Το στοιχείο της τάβλας δεν σχεδιάστηκε να είναι εργαλείο διάταξης.
  </td>
</tr>
</table>
</body>

Δοκιμάστε το προσωπικά

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>