Ders 01: HTML ve CSS nedir ? HTML’ye Giriş ve Linkler

AÖF Web Tasarımı ve Kodlama CSS Eğitim & Dersler HTML Programlama

AÖF Web Tasarımı ve Kodlama bölümü grubumuzdaki öğrenci arkadaşlarımızla başlattığımız uygulamalı çalışmaların birinci bölümüdür.
Bu bölümde HTML ve CSS’ye tanışma düzeyinde değinilmiş, linkler üzerinde küçük bir çalışma yapılmıştır.

WAMP Server indirme sayfası: http://www.wampserver.com/
Visual Studio Code indirme sayfası: https://code.visualstudio.com/download


 

Arkadaşlar tekrar merhaba. Bayram öncesi verdiğim sözü tutmaya çalıştım. Demiştik ki: “Bayram sonrası WAMP Server ve Visual Studio Code programlarınızı hazır edin, uygulamalara başlayalım”…

İlk fırsatta elimden geldiğince, dilim döndüğünce bir çalışma yaptım. Bu çalışma tamamen giriş aşaması ürünüdür. Bir HTML sayfasının oluşumu, VSC ile bir web sayfasının nasıl yapılacağı, sayfalar arası bağlantıların linkler aracılığı ile ne şekilde sağlanabildiği, iç linkler ve dış linkler gibi konulardan bahsettim.

Konunun Özeti

Öncelikle WAMP Server (Windows Apache + MySQL + PHP) kurduğunuzu varsayıyorum. Bu paket programı önerme sebebim, bileşenlerin tek tek kurulmasının zaman ve detaylı bilgi gerektirmesidir.
Kodlarımızı da Visual Studio Code editörü üzerinden yazacağımız için onu da edinmiş olduğunuzdan eminim 🙂

Basit HTML yapısından, başlıca etiketlerden (tag) bahsedeceğiz. Bunlardan link etiketi olan <a> üzerinde duracağız. Harici linkler, dahili linkler, arama motoru tarafından takip edilmesini istemediğimiz linkler, yeni pencerede açılmasını istediğimiz bağlantılara değineceğiz.

WAMP Server’ı kurarken hiç değişiklik yapmadıysanız varsayılan lokal sunucu klasörünüz C:\wamp\www olacaktır. Bu yolu takip ederek www klasörü içerisine aofwtk isimli bir klasör (dizin) oluşturun.

Şimdi Visual Studio Code programını açın ve sol alanda bulunan Open Folder butonu ile WAMP ana dizinindeki ( C:\wamp\www) aofwtk dizinini seçerek Add (ekle ya da klasör seç) butonuna tıklayın. Çalışmalarımızı yürüteceğimiz klasörümüzü editöre eklemiş bulunmaktayız. Hata yapmadıysak http://localhost/aofwtk adresine gittiğimizde boş klasörü görebiliyor olmalıyız. WAMP varsayılan ayarlarına göre Forbidden uyarısı veriyor ise yine sorun yok demektir.

Şimdi yine sol sütundan (aofwtk klasörümüz açık/seçili iken) sağ tıklama -> New File seçeneği ile yeni bir dosya oluşturalım ve buna index.html adını verelim. Yeni dosya oluşturulacak ve editörün sağ kısmında boş olarak direkt açılacaktır.
VSC (editörümüz) burada bize bir kolaylık sağlamaktadır. Ünlem yazıp enter tuşuna bastığımızda bize aşağıdaki kodları otomatik olarak getirmektedir.

! -> Enter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Burada birkaç noktaya değinmekte fayda var.
Öncelikle <!DOCTYPE html> kısmı, sayfamızın HTML5 ile uyumlu olduğunu göstermektedir.
HTML ile ilgili kodlar <html>………</html> arasına yazılmaktadır. Yine bu etiketin içerisin yer alan iki konuya temas etmeliyiz.

Birincisi; <head> ……. </head> arasına yazılan kodlardır. Bu alana yazdığımız etiketler tarayıcının yorumlamasında kullanılsa da çıktı olarak ziyaretçiye bir şey sunmaz. Sadece sayfaya gerekli olan; meta etiketleri (sayfanın karakter kümesi -charset-, sayfanın anahtar kelimeleri, sayfanın mobil uyumluluğu, ihtiyaç duyulan CSS ve JS dosyaları) gibi unsurların yanı sıra doküman içi stil (style) kodları, sayfa başlığı (title) gibi bileşenleri içerir. Örneğin <title>…..</title> arasına “Çalışma sayfam” yazarsak tarayıcı başlığı olarak bu başlık görünecektir.

İkinci olarak da; <body>………</body> arasına yazılan kodlardır veya etiketlemelerdir. Web sayfasının body (gövde) kısmı en önemli kısımdır diyebiliriz. Bu alanda ziyaretçinin göreceği alanları sunuyoruz. Bu etiket içerisine yazılan her şey web sayfasının iletişim veya etkileşim öğesidir. Başka bir deyişle sunumdur. Ziyaretçi bunları görür ve gördüklerine göre de izlenim edinir ya da geri bildirim sağlar.

Şimdi <a> etiketiden bahsetmekte fayda var. <a> etiketi “anchor=çapa” etiketidir ve sayfalar arası bağlantıyı sağladığımız objedir.

Birinci sayfamızda <body>……….</body> arasında link ekleyerek komut oluştup aşağıdaki şekli aldırıyoruz:

index.html son hali:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Çalışma Sayfam</title>
</head>

<body>
    Merhaba AÖF WTK!<br>
    <a href="sayfa2.html">İkinci sayfaya git</a><br>
</body>
</html>

Şimdi nasıl index.html dosyasını oluşturmak için sağ panelde aofwtk dizini üzerinde sağ tıklayıp New File (yeni dosya) yolunu takip ettiysek yine aynısını yapalım ve sayfa2.html adında yeni bir dosya oluşturalım. Yine (index.html dosyamızda olduğu gibi) ünlem işaretini ekrana yazıp enter tuşuna bastığımızda bir html dosyası iskeleti oluşacak. <title>…….</title> etiketleri arasına “İkinci sayfamız” yazabiliriz.

sayfa2.html içeriği:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>İkinci Sayfamız</title>
</head>

<body>
    İkinci sayfa içeriği<br>
    <a href="index.html">Birinci sayfaya dön</a><br>
</body>
</html>

“Birinci sayfaya dön” bağlantısı tıklandığında index.html sayfasına bizi geri yönlendirecektir.

Bir web bağlantısını yeni sayfada açmak isteyebiliriz. Bu durumda bağlantımıza target=”_blank” eklemek gerekmektedir. Yani sayfa2.html dosyamızdaki index.html bağlantısının yeni sayfada açılmasını istersek, o bağlantıyı aşağıdaki şekilde düzenlememiz gerekir:

<a href="index.html" target="_blank">Birinci sayfaya dön</a>

Diyelim bağlantıyı site içerisindeki bir sayfaya değil de bir dış siteye vermek istiyoruz. Ve bu linkin, bizim sitemizle ilgisi olmadığını, arama motorları tarafından takip edilmesini istemediğimizi belirtmek istiyoruz.
Bu durumda işin içine rel niteliği girer.
Aşağıdaki gibi bir bağlantıda; bu linkin dış bağlantı olduğu, sitemize gelen arama motoru yazılımlarının bu bağlantıyı takip etmemesi isteği ifade edilmiştir.

<a href="https://www.google.com" rel="nofollow external">Google</a>

Bu şekilde dış linkler ile ilgili çalışmamızı da yapmış olduk. Sonraki derste görüşmek üzere.

Soru ve yorumlarınızı sayfanın alt kısmından bırakabilirsiniz.
Disqus ile yorum bırakmak için Facebook, Twitter, Google ya da Disqus hesaplarınız ile giriş yapabilirsiniz.