ile

HTML sayfamızın içeriklerini birleştirmeye başlayalım

Şimdi elimizde tüm içeriklerimiz var ve artık sıra geldi bunları sayfamızda birleştirmeye. Önce elimizdeki sayfamıza bakalım ve içeriklerimizi yerleştirelim.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Kızılyıldız İstanbul, Sirkeci'de faaliyet göstermekte olan tasarıma önem veren yenilikçi matbaa şirketi. Başlıca ürünlerimiz: Davetiye, Ajanda, Poster ve El ilanı"/>
    <meta name="keywords" content="kızılyıldız, kızıl, yıldız, matbaa, baskı, ajanda, davetiye, poster, ilan, istanbul, sirkeci"/>
    <title>Kızılyıldız Matbaacılık A.Ş.</title>
</head>
<body>
    <div id="sayfa">
        <div name="ustbilgi">
            <div name="logo"></div>
            <h1>Kızılyıldız</h1>
            <h2>Matbaacılık A.Ş.</h2>
            <div name="baglantilar">
                <ul>
                    <li><a href="anaSayfa.html">Ana Sayfa</a></li>
                    <li><a href="hakkimizda.html">Hakkımızda</a></li>
                    <li><a href="urunler.html">Ürünlerimiz</a></li>
                    <li><a href="haberler.html">Duyurular</a></li>
                    <li><a href="kurumsal.html">Kurumsal</a></li>
                    <li><a href="iletisim.html">İletişim</a></li>
                </ul>
            </div>
        </div>
        <div name="iletişim">
            <div name="telefon">
                Tel: +90 212 444 19 17
                Fax: +90 212 444 19 05
            </div>
        </div>
        <div name="icerik">
            <div name="mesaj">
                <h1><strong>İstanbul'daki en hızlı, en kaliteli ve en uygun fiyatlı matbaayı mı arıyorsunuz?</strong></h1>
                <a href="urunler.html">Ürünlerimizi inceleyin</a>
            </div>
            <div name="bilgiler">
                <div name="neyapiyoruz">
                    <h3>Ne yapıyoruz?</h3>
                    <p>İstanbul'dasınız, davetiye, broşür, poster veya el ilanı'na ihtiyacınız var. Hem de 3 günde. Fiyatı da biraz uygun olsun ama sonuçlar temiz mi olsun? O zaman doğru yere geldiniz.</p>
                </div>   
                <div name="neredeyiz">
                    <h3>Neredeyiz?</h3>
                    <p>İstanbul'un tarihi merkezi Sirkeci'deyiz. Ama mesafeler sorun değil. Siz bize gelemezseniz, biz size geliriz. Siparişim ayağıma gelsin diyorsanız, o da olur. </p>
                </div>  
                <div name="farkımız">
                    <h3>Bizim farkımız</h3>
                    <p>Kesin kalite garantisine ihtiyacınız varsa, ücretsiz motorsikletli kuryeyle baskı işlerim gönderilsin diyorsanız, fiyatlar uygun olsun ama fazla da gecikmesin 3 gün içinde elimde olsun istiyorsanız, aradığınız yer burası. </p>
                </div>  
            </div>
        </div>
        <div name="altbilgi">
            <div name="altbaglantılar">
                <ul>
                    <li><a href="anaSayfa.html">Ana Sayfa</a></li>
                    <li><a href="hakkimizda.html">Hakkımızda</a></li>
                    <li><a href="kurumsal.html">Kurumsal</a></li>
                </ul>
            </div>
            <div name="iletişim">
                <div name="adres">
                    Adres:
                    Kızılyıldız Matbaacılık A.Ş.
                    Denizler Mah.
                    Eren Sok. No:68
                    Sireci, Fatih 34110
                    İstanbul TÜRKİYE
                </div>
                <div name="telefon">
                    Tel: +90 212 444 19 17
                    Fax: +90 212 444 19 05
                </div>
            </div>
            <div name="copyright">Her Hakkı Saklıdır. 2012 Kızılyıldız Matbaacılık A.Ş.</div>
        </div>
    </div>
</body>
</html>

Bitti mi? Hayır. Etiketlerimizi tamamladık ama sayfamızı HTML5‘e uygun hale getirmemiz gerekiyor. HTML5 ile gelen yeni ve çok yararlı etiketler var. Sayfamızı bu halde bıraksak belki HTML4 olarak uyumlu olur ve çalışır ama, HTML5’in getirdiği yeniliklerden yararlanmak istiyorsak, bir kaç iyileştirme yapmamız lazım. Şimdi gelelim HTML5 ile gelen yeni etiketlerin başlıcalarına:

  • Section: Sayfa içinde farklı bölümleri oluşturmamıza yarıyor. Div gibi değil. Farkı şu, örneğin bir sayfa içinde 3 ayrı konu ile ilgili bölüm hazırladınız. Yelken, Kayak ve Sörf gibi. Görüntüleme ile ilgili bölümlerde ise div kullanmak gerekiyor.
  • Article: Makale etiketi. Örneğin blog sayfanız var, yazılarınızı makale etiketi içerisine yazabilirsiniz. Ya da duyuru haberlerinizi article etiketi içinde tutmalısınız.
  • Nav: Bağlantı listelerimizi artık navbar içinde tutmamız gerekiyor ki hem tarayıcılar hem de arama motorları sayfamızı iyi anlasın ve yorumlasınlar.
  • Aside: İlk olarak sadece article içinde yan bilgi vermeye izin veren bir etiketti. Ancak daha sonra itirazlar üzerine, yanpanel olarak da kullanılmasına izin verecek şekilde değiştirildi. Sayfanızda yan bilgileri, reklamları burada tutabilirsiniz. Biz de iletişim bilgimizi burada tutacağız.
  • Header: Artık logo, navbar, başlık gibi bilgileri tuttuğumuz bir etiketimiz var. Üstbilgilerimiz de burada yer alacak.
  • Footer: Yine üst bilgi gibi, altbilgiler için de yeni bir etiketimiz mevcut.
  • Hgroup: Biraz ayrıntı gibi görünebilir ama h1 h2 gibi birlikte yeralan başlıkları da bu etiket içinde tutmamızda yarar var.

Bir diğer değişiklik ise artık div etiketlerinde name kullanamıyoruz. Bunun yerine id kullanacağız. id özelliğinde dikkat edilmesi gerekn ise bir id’de kullandığımız kelimeyi başka birinde kullanamıyoruz. Kelime eşsiz olmak zorunda.

Şimdi bu kurallara göre sayfamızı HTML5 ile uyumlu hale getirelim ve teknolojiyi yakalayalım:


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Kızılyıldız İstanbul, Sirkeci'de faaliyet göstermekte olan tasarıma önem veren yenilikçi matbaa şirketi. Başlıca ürünlerimiz: Davetiye, Ajanda, Poster ve El ilanı"/>
    <meta name="keywords" content="kızılyıldız, kızıl, yıldız, matbaa, baskı, ajanda, davetiye, poster, ilan, istanbul, sirkeci"/>
    <title>Kızılyıldız Matbaacılık A.Ş.</title>
</head>
<body>
    <div id="sayfa">
        <header>
            <div id="logo">
                <img src="logo.jpg" alt="Logo" />
            </div>
            <hgroup>
                <h1>Kızılyıldız</h1>
                <h2> Matbaacılık A.Ş.</h2>
            </hgroup>
            <nav>
                <ul>
                    <li><a href="anaSayfa.html">Ana Sayfa</a></li>
                    <li><a href="hakkimizda.html">Hakkımızda</a></li>
                    <li><a href="urunler.html">Ürünlerimiz</a></li>
                    <li><a href="haberler.html">Duyurular</a></li>
                    <li><a href="kurumsal.html">Kurumsal</a></li>
                    <li><a href="iletisim.html">İletişim</a></li>
                </ul>
            </nav>
        </header>
        <aside>
            <div id="iletisimTel">
                Tel: +90 212 444 19 17
                Fax: +90 212 444 19 05
            </div>
        </aside>
        <section id="icerik">
            <div id="mesaj">
                <h1><strong>İstanbul'daki en hızlı, en kaliteli ve en uygun fiyatlı matbaayı mı arıyorsunuz?</strong></h1>
                <a href="urunler.html">Ürünlerimizi inceleyin</a>
            </div>
            <div id="bilgiler">
                <article id="neyapiyoruz">
                    <h3>Ne yapıyoruz?</h3>
                    <p>İstanbul'dasınız, davetiye, broşür, poster veya el ilanı'na ihtiyacınız var. Hem de 3 günde. Fiyatı da biraz uygun olsun ama sonuçlar temiz mi olsun? O zaman doğru yere geldiniz.</p>
                </article>   
                <article id="neredeyiz">
                    <h3>Neredeyiz?</h3>
                    <p>İstanbul'un tarihi merkezi Sirkeci'deyiz. Ama mesafeler sorun değil. Siz bize gelemezseniz, biz size geliriz. Siparişim ayağıma gelsin diyorsanız, o da olur. </p>
                </article>  
                <article id="farkımız">
                    <h3>Bizim farkımız</h3>
                    <p>Kesin kalite garantisine ihtiyacınız varsa, ücretsiz motorsikletli kuryeyle baskı işlerim gönderilsin diyorsanız, fiyatlar uygun olsun ama fazla da gecikmesin 3 gün içinde elimde olsun istiyorsanız, aradığınız yer burası. </p>
                </article>  
            </div>
        </section>
        <footer>
            <nav>
                <ul>
                    <li><a href="anaSayfa.html">Ana Sayfa</a></li>
                    <li><a href="hakkimizda.html">Hakkımızda</a></li>
                    <li><a href="kurumsal.html">Kurumsal</a></li>
                </ul>
            </nav>
            <div id="iletişim">
                <div id="adres">
                    Adres:
                    Kızılyıldız Matbaacılık A.Ş.
                    Denizler Mah.
                    Eren Sok. No:68
                    Sireci, Fatih 34110
                    İstanbul TÜRKİYE
                </div>
                <div id="telefon">
                    Tel: +90 212 444 19 17
                    Fax: +90 212 444 19 05
                </div>
            </div>
            <div id="copyright">Her Hakkı Saklıdır. 2012 Kızılyıldız Matbaacılık A.Ş.</div>
        </footer>
    </div>
</body>
</html>

Sonucumuzu görelim. Üstkısım:

İçerik:

Alt kısım:

İşte elimizde modern, tüm bilgileri içeren ve her tarayıcıda kolayca açılabilecek bir internet sayfası var. Bir sonraki yazıda bölümlerimizi oluşturmaya başlayacağız ve ufak ufak sayfamızın tasarımını değiştirmeye başlayacağız. Bunun için kullanacağımız araç ise tabii ki HTML5 ile beraber gelen CSS3.

Dayanışmayla,
Meraklı Bilişimci

Yorumla

Yorum