Webmaster doğulmaz, webmaster olunur.(7. DERS 8.DERS)

Webmaster doğulmaz, webmaster olunur.(7. DERS 8.DERS)

---------------------------------

web tasarımı (7. ders)

Daha önceki derslerimizde çalışmaya başladığımız gazetelere linklerin olduğu websitesinin (http://www.websiteleri.gen.tr/web-tasarimi-7-1.htm) yapımına devam edelim.

http://www.websiteleri.gen.tr/renk-alma-islemi.jpg

yukarıdaki görüntüyü veren html kodları aşağıdaki gibidir:

<html>
<head>
<title>Türkçe gazeteler, yerel ve ulusal gazeteler</title>
</head>
<body>

<img src="gazetelere-link-logo.jpg" border=0>

<u> <h4> Ulusal Gazeteler : </h4> </u>

Akşam | Bugün | Cumhuriyet | Dünya | Evet | Evrensel | Fanatik | Fotomaç | Güneş | Tercüman | Hürriyet | Kurultay | Milli Gazete | Milliyet | Ortadoğu | Radikal | Sabah | Star | Takvim | Türkiye | Vakit | Vatan | Yeni Asya | Yeniçağ | Yeni mesaj | Yeni Şafak | Zaman

<h4> <u> Yerel Gazeteler : </u> </h4>

</body>
</head>

Html kodlarına dikkat ettiyseniz birinde u etiketi h4 etiketinden önce açılıp kapatılmış diğerinde ise tersi sözkonusu.
İki şekilde doğru kodlamadır. Önce açılan etiket kapatılmadan sonraki açılan etiket kapatılsaydı YANLIŞ OLURDU.
Örenğin şu şekilde olsaydı yanlış olurdu:
<u> <h4> Ulusal Gazeteler </u> </h4> Burada iki etiket birbirini kestiği için hatalı bir html sözkonusudur.

Yukarıdaki görüntüyü oluşturabilmeniz için html dosyanızla aynı yere logoyu kaydetmeniz gerekiyor.
Kaydetmek için http://www.websiteleri.gen.tr/web-tasarimi-7-1.htmyi açtığınızda logonun üzerine sağ tıklayın ve gelen menüden resmi farklı kaydeti seçin.
Kaydedilecek yeri seçin ve dosyanın adını belirtip kaydetme işlemini tamamlayın.
Unutmayın çalışma yaptığınız dosya ile aynı yerde olmassa şu şekilde bir görüntünüz olur:

http://www.websiteleri.gen.tr/resim-...ulenemiyor.jpg

sarı rengin kodunu (F7F79D) body tagının bgcolor özelliğinde kullanacağız.
<body bgcolor="#F7F79D">
Şimdi a etiketine geçip sitedeki gazetelere link vereceğiz.

Anchor = Gemilerin demirlemek için attıkları çapa anlamına geliyor. Yani bağlantı sağlamak.
href : A html etiketinin href özelliği bağlantı sağlanacak URL 'in (adres) yada bağlantı sağlanacak noktanın belirtilmesi içindir.
Bağlantı verilecek web sayfası kendi sitemiz dışında ise http://www.siteninadi.com/ ile başlamalıdır. daha sonra da sayfa adı olmalı.
kendi web sitemizdeki bir sayfaya link vermek için <a href="sayfaninadi.html"> 2. HTML Dersi </a> şeklinde kullanmalıyız.

Bir başka siteye link verirken bir web sayfasının adı belirtilmemişse o sitenin anasayfasına bağlantı (link) verilmiş olur.
örneğin href="http://www.elektrikcim.net"
eğer http://www.elektrikcim.net daki bir sayfaya link vereceksek o durumda da
href="http://www.elektrikcim.net/egitim/teknik/default.asp" şeklinde verebiliriz.
Burada /egitim/teknik/default.asp dosyası bir klasörün içinde (bilgisayar klasörünün içinde)
eğer bilgisayar klasörünün içinde olmasaydı ....com/egitim/teknik/default.aspolacaktı.

Özet olarak şunları söyleme çalıştım:
href 'in alabileceği değer bir dosya adı olabilir (ikinciders.html)
href 'in alabileceği değer bir sitenin adresi olabilir (http://www.elektrikcim.net)
href 'in alabileceiği değer bir sitedeki herhangi bir dosya olabilir (http://www.elektrikcim.net/egitim/teknik/default.asp)
href 'in alabileceği bir diğer değeri sonraki dersimize bırakıyorum.

Şu anda www.gazeteler-e.gen.tr deki gazete isimlerine linkler (bağlantılar) verilmiş şekilde

-------------------------------------------------

web tasarımı (8. ders)

Bu dersimizde öğreneceğimiz bilgiler:

html kodlarının arasına açıklama satırları yazmak ()
Tıklandığında yeni bir sayfada açılıp açılmayacağının belirtilmesi ( <a target="_blank" ...)
Tıklanacak kelimenin (link verilmiş kelimenin) üzerine gelindiğinde sarı renkli açıklamanın gösterilmesi (title="...")

Tekrar edeceğimiz bilgiler

<b> ve <u> etiketlerini tekrar hatırlayacağız.
<a href=""> </a> link verme işlemi
  Birden çok boşluğa ihtiyacımız varsa bu html etiketini kullanıyoruz.
<br> kendinden sonraki şeyleri alt satıra atar (yeni satır)

Önceki dersimizde Ulusal gazetelere linkler vermiştik.
Yerel gazetelere link vermek için yerel gazeteler şeklindeki başlığımız hazırdı.

Şimdi illeri o başlığın altına sıralayalım.
Her bir il koyu yazılsın diye <b> ADANA : </b> şeklinde illeri yazıyoruz.
Her bir satıra bir il gelmesi için ilden sonra <br> tagını kullanacağız.

Html çalışmasının internet tarayıcısında görüntüsü aşağıdaki gibidir. Görüntünün tamamı için buraya tıklayınız

http://www.websiteleri.gen.tr/web-tasarimi-8-2.jpg

Yukarıdaki görüntüye ait HTML kondunun bir parçası aşağıdaki gibidir.
Burada dikkatinizi çektiğim şey birden fazla boşluk ihmal edilip tek boşluk olarak gösteriliyor.
İnternet tarayıcısının bu davranışından dolayı birden fazla boşluk vermek istediğimizde   yi kullanacağız.
HTML kodundaki kırmızı çizgileri, ADANA ve ADIYAMAN dan sonraki boşlukların fazlalığını göstermek için çizdim.

http://www.websiteleri.gen.tr/web-tasarimi-8-1.jpg

Yukarıda bir parçasını gördüğünüz kodun tamamını görmek için:
a) Önce sayfayı burayatıklayarak açın
b) Daha sonra açılan sayfada boş bir yere sağ tıklayıp menünün gelmesini sağlayın.
c) acılan menüden Kaynağı Görüntüle yi seçin

şu anda kodun tamamını görüyor olmalısınız.

Şimdi illeri sağ kenardan biraz içeri doğru çekmek istiyorum. Bunu boşluk vererek yapamacağımızı söylemiştim.
  kullanarak yapacağız.
        şeklinde bütün illerin başına ekleyip kenardan 4 boşluk kadar illeri uzaklaştırdım.
Dosyanın şu anki hali içinburayatıklayınız

Kodu görmek için açılan web sayfasında boş bir yere sağ tıklayıp açılan menüden kaynağı görüntüle yi seçebilirsiniz.

HTML sayfalarında  Bu iki işaret arasına açıklama yazabiliriz.
Bu açıklamayı internet tarayıcısı göstermez.
Açıklama satırlarını görmek için; kaynağı görüntüle yapabiliriz.
Bu şekilde bütün HTML kodlarıyla birlikte açıklamaları da görebiliriz.

<a href="http://www.yenisafak.com.tr/"> Yeni Şafak </a> |
<a href="http://www.zaman.com.tr/"> Zaman </a>

<h4> <u> Yerel Gazeteler : </u> </h4>



        <b>ADANA :</b><br>
        <b>ADIYAMAN :</b><br>
        <b>AĞRI:</b><br>

Yukarıdaki html kodu internet tarayıcısında gördüğümüzde. Yerel Gazeteler: yazısından sonra ADANA: yazısını görürüz.

HTML kodunda gördüğünüz 4 satırlık açıklama yazısı gözükmez:

Yukarıdaki HTML kodunun internet tarayıcısında oluşturduğu görüntü aşağıdaki gibidir.

http://www.websiteleri.gen.tr/web-tasarimi-8-3.jpg

<A> HTML etiketinin href ten başka target ve title özellikleri vardır:

1) href = ile tıklanıldığında gidilecek sitenin adresi belirtilir. (Adres ingilizce olarak URL dir.)
2) target = ile tıklanıldığında ayrı bir sayfa da açılıp açılmayacağını belirtiriz.
target="_blank" değerini verirsek tıklanıldığında link ayrı bir pencere de açılır.
3) title = özelliğiyle linkin üzerine (maouse) ile gelindiğinde çıkacak açıklayıcı yazıyı belirleriz.

Title özelliği <a> etiketi gibi birçok htm etiketinde vardır:
<a> etiketi gibi <img> etiketi de title özelliğine sahiptir.
title ile Resmin üzerine gelindiğinde açıklayıcı bir yazı çıkması sağlanır.

Gazeteler-e linkler çalışmasında yerel gazetelere linkler verelim:
www.adanagazete.com un başına http:// eklememiz gerekiyor.
<a href="Buraya link verilecek web sitesinin adresi yazılır"> link verilecek yazı buraya yazılır. </a>

        <b>ADANA :</b>
<a href="http://www.adanagazete.com/" target="_blank" title="Adana Gazete">Adana Gazete</a> |
<br>
<b>ADIYAMAN :</b>
<a href="http://www.adiyamanhaber.com/" target="_blank" title="Adıyaman Haber - Adıyaman">Adıyaman Haber</a> |
<a href="http://www.cagdasgolbasi.org/" target="_blank" title="Çağdaş Gölbaşı - Adıyaman">Çağdaş Gölbaşı</a> |

Yukarıdaki HTML kodunda şuna dikkat edin ADANA: dan sonra kodlamaya yeni bir satırdan devam etsek bile verdiğimiz link hemen ADANA: dan sonra gösterilir. HTML görüntülenirken tıpkı boşlukların ihmal edildiği gibi alt satıra yazmamız da ihmal edilir. <br> etiketini kullansaydık ADANA: dan sonraki link aşağı satırda görünecekti.

linke tıklandığında açılacak pencerenin yeni bir pencerede açılması için yapılması gerekeni unutmayın:
<a target="_blank" şeklinde olması gerekir. href özelliği target tan önce de yazılabilir sonra da.