En son web geliştirme öğreticiler

HTML düzenleri

❮ Önceki Sonraki Bölüm ❯

Web siteleri genellikle birden çok sütun içeriği görüntülemek (like a magazine or newspaper) .

Şehir Galerisi

Londra
Paris
Tokyo

Londra

Londra İngiltere'nin başkentidir. 13 milyonun üzerinde nüfuslu bir metropol alana sahip İngiltere'deki en kalabalık kentidir.

Thames Nehri üzerinde duran, Londra tarihçesi Londinium adını verdi Romalılar tarafından kurulduğundan geri dönersek, iki bin için önemli bir yerleşim yeri olmuştur.

Telif hakkı © w3ii.com

HTML düzeni kullanarak <div> Elements

<div> kolayca CSS ile konumlandırılabilir çünkü eleman genellikle, bir düzen aracı olarak kullanılır.

Bu örnek dört kullanır <div> çoklu sütun düzeni oluşturmak için elemanlar:

Örnek

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo
</div>

<div id="section">
<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>
</div>

<div id="footer">
Copyright © w3ii.com
</div>

</body>
Kendin dene "

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>

Kullanılması Sitesi Düzeni HTML5

HTML5, web sayfasının farklı kısımlarını tanımlayan yeni semantik unsurları sunmaktadır:

HTML5 Semantik Elemanları
  • <header> - Bir belgenin veya bir bölüm için bir başlık tanımlar
  • <nav> - gezinme bağlantılarının bir kabı tanımlar
  • <section> - Bir belgedeki bir bölüm tanımlar
  • <article> - bağımsız müstakil yazı tanımlar
  • <aside> - içeriğinden kenara içerik tanımlar (like a sidebar)
  • <footer> - Bir belgenin veya bir bölümü için altbilgi tanımlar
  • <details> - ek ayrıntıları tanımlar
  • <summary> - için bir başlık tanımlar <details> elemanı

Bu örnek kullanır <header> , <nav> , <section> ve <footer> çoklu sütun düzeni oluşturmak için:

Örnek

<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo
</nav>

<section>
<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>
</section>

<footer>
Copyright © w3ii.com
</footer>

</body>
Kendin dene "

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>

Tabloları Kullanma HTML düzeni

<table> öğesi bir düzen aracı olarak tasarlanmamıştır.
Amacı <table> elemanı sekmeli veri göstermektir.

Düzen kullanılarak elde edilebilir <table> elemanı, masa elemanları CSS ile tarz olabilir, çünkü:

Örnek

<body>

<table class="lamp">
<tr>
  <th>
    <img src="../images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    The table element was not designed to be a layout tool.
  </td>
</tr>
</table>

</body>
Kendin dene "

CSS:

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

Uyarı: tablolarla düzenini oluşturma yanlış değil, ama tavsiye edilmez! düzeni oluşturmak için tabloları kaçının.


❮ Önceki Sonraki Bölüm ❯