ile

Sayfamıza içeriklerimizi eklemeye başlayalım

Öncelikle elimizde logo.jpg adında bir logomuz var. Logomuzu nasıl ekleyeceğiz? Sayfalarda resimleri eklemek için kullandığımız etiket <img> etiketi. Burada da <img src=”logo.jpg” alt=”Logo”> olarak kullanacağız. Bu etikette genişlik ve yüksekliğini de ayarlayabiliriz ama şimdilik gerek yok. Peki alt özelliği nedir? Alt yani alternatif, eğer resim yüklenmezse yerinde görünmesini istediğimiz yazıdır, önlem olarak bunu hep kullanmamız gerekiyor.

Sitemizin başlığını seçelim. Başlıklarda h1 kullanıyorduk hatırlarsanız.

Devam edelim. Bölümlerimiz arasında gezinmemiz için bağlantı listesine ihtiyacımız var demiştik. Linklerimiz burada olacak. Peki HTML Sayfasında bağlantılar nasıl tutuluyor? Nasıl bir link yaratıyoruz? Bunun için de kullandığımız etiket <a> örneğin sayfamızdan link vermek istediğimizi düşünelim. Şöyle yapacağız:

<a href=”http://www.meraklibilsimci.com”>Meraklı Bilişimci</a>

Şimdi de bölümlerimize geri dönelim ve liste hazırlamaya başlayalım:


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

İpucu: Burada ul, unordered yani numarasız liste anlamına geliyor. Numaralı olmasını isteseydik ol etiketini kullanmamız gerekiyordu.

Linklerimiz de hazır. Başka neye ihtiyacımız vardı? İletişim bilgilerimizin her yerden ulaşılır olmasını istiyorduk. Bunu da şu şekilde yapalım:

<div name="iletişim">
    <div name="telefon">
        Tel: +90 212 444 19 17
        Fax: +90 212 444 19 05
    </div>
</div>

İletişim bilgilerimiz de hazır.

Ana sayfada 3 tane bölümümüz olsun. Sayfamızı yaparken ziyaretçimizin gözüyle bakmamız gerekiyor. Ben genellikle misyon, vizyon gibi küçük şirketler için anlamsız kurumsal bıdı bıdılara karşıyım. Sonuçta baskı yaptırmak istiyorum, bunu hızlı ve uygun bir fiyata yaptırmak istiyorum ve kaliteli bir sonuç istiyorum. İlk 10 saniyede bunlara ulaşamazsam giderim. İşte böyle acımasız internet kullanıcısı, her şey hızlı ve sizin o şirin intro videonuzu izlemeye vakti yok.

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

İçeriklerimizi ve kısa bilgilerimizi de hallettik.

Geldik alt bilgiye. Alt bilgide de navigasyona ve birkaç kısa bilgiye ihtiyacımız var. Örneğin gizlilik bildirimi, copyright, sıkça sorulan sorular, bu sayfayı kim yaptı veya başka göz önünde olmasını o kadar çok istemediğimiz bilgiler burada olmalı. Şimdilik gizlilik bildirimine ihtiyacımız yok ama bunun yerine adres bilgilerimizi ve bağlantı listemizden bir kısmını buraya ekleyebiliriz.

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

Ana sayfamızdaki tüm bilgileri halettik.

Bir sonraki yazıda da bunları birleştireceğiz.

Dayanışmayla!
Meraklı Bilişimci

Yorumla

Yorum