Web Tasarımı Kodlamak (Front-End)

Tasarım tamamlandıktan sonraki aşama onu kullanıma sunmaktır. Front-end web yazılım için bilmeniz gereken minimum bilgi HTML ve CSS dosyalarının yazılması ve kullanılmasıdır. Ek olarak JavaScript ile daha aktif ve işlevsel sayfalar yazabilirsiniz. Bu yazımda sadece HTML ve CSS konularına detaylı olarak değinerek sıfırdan web yazılım öğrenmek isteyenlerin kavramları anlamalarına yardımcı olmaya çalışacağım.

HTML ve CSS Nedir?


HTML ve CSS dosyaları web sayfalarını oluşturan bileşenlerdir. Bir web sayfasına baktığınızda (örneğin şu an okuduğunuz sayfa) kullanıcın gördükleri web tarayıcısının (örneğin Google Chrome, Firefox) HTML kodlarını işlemesi ve yorumlaması sonucunda elde ettiği görüntüdür. CSS ise sayfanın görünümü ile ilgili kısımdır; boyut, renk, boşluklar, kenarlıklar, yazı tipi, yazı boyutları ve aklınıza gelebilecek gözünüzle gördüğünüz veya göremediğiniz sayfada bulunan her elemana biçim verir.

Dosya Uzantısı Nedir?


Dosya uzantısı kavramına aşina değilseniz öncelikle dosya uzantılarının ne anlama geldiğine bir bakalım. Elektronik ortamda saklanan dosyanın biçimini belirtmek için dosyanın sonuna nokta ve hangi formatta olduğunu belirtecek benzersiz bir kaç harf veya rakam eklenir. Örneğin Word (.doc, .docx), Excell (.xls, .xlsx), Power Point (.ppt, .pptx), Resimler (.jpg, .gif, .png. .jpeg), Müzik veya Ses Dosyaları (.mp3, .mp4, .waw, .amr), Video Dosyaları (.mp4, .avi) kendilerine ait hangi formatta olduklarını belirten dosya uzantılarına sahiptirler.

Bilgisayarınızdan "Fotoğraf 2016-03-12.jpg" adında bir dosyayı açmaya çalıştığınızda, sistem bu dosyanın bir resim dosyası olduğunu anlar ve varsayılan resim görüntüleyici uygulaması ile açar. "Diyarbakır Etrafında Bağlar Var.mp3" şeklinde bir dosyayı açmaya çalıştığınızda yine sonu .mp3 ile bittiği için sistem bunun bir ses dosyası olduğunu anlar ve varsayılan medya oynatıcı uygulaması ile açar.

HTML ve CSS Dosya Uzantıları


HTML dosyalarının dosya uzantıları .html veya .htm dir. CSS dosyaları HTML dosyasının içine direkt olarak yazılabilir. Fakat birden fazla sayfada aynı css sınıfları ortak kullanılacaksa .css uzantılı bir dosya şeklinde html sayfasından bağımsız olarak kaydedilebilir.

Bu dosyaları oluşturmak için herhangi bir metin editörünü (Windows'ta Not Defteri, Linux'ta Gedit gibi) kullanabilirsiniz. Dreamweaver gibi web yazılım için özel olarak tasarlanmış bir uygulamayı veya Notepad++ uygulamasını kullanmanızı tavsiye ederim. Not Defteri ile kaydederken dosya türü seçeneğini "Metin Belgeleri (*.txt)" yerine "Tüm Dosyalar (*.*)" olarak seçip dosya_adi.html biçiminde kaydetmelisiniz.

Metin Belgelerinde Kodlama ve UTF-8


Dosyanın içeriğini yazmadan önce dikkat etmeniz gereken kısım dosyanın kodlama biçimidir. Not Defteri ile bir metin belgesi oluşturduğunuzda veya bir klasöre sağ tıklayıp yeni metin belgesi oluşturduğunuzda varsayılan olarak kodlama ANSI biçimindedir. Bu seçenek Türkçe karakterlerin (ö, ç, ü, ğ) gösterilmesinde sorun çıkaracaktır. Bu nedenle kaydederken kodlama olarak UTF-8 biçimini seçmelisiniz. Dreamweaver varsayılan olarak UTF-8 biçiminde kaydeder.

Notepad++ uygulamasını kullanırken kodlamayı UTF-8 BOM'suz veya UTF-8 biçiminde seçebilirsiniz. UTF-8 BOM'suz biçimini seçmenizi öneririm. BOM (Byte Order Mask) dosyanın ilk baytlarında sayfa kodlamasını belirtir. HTML sayfasında kodlama tekrar belirtileceği için BOM a gerek yoktur. Muhtemelen gerek duymazsınız fakat salt metin dosyalarını (.txt) yüklerken Türkçe karakter problemlerini önlemek için UTF-8 kodlama seçmeniz gerekir.

İlk HTML Sayfanız


HTML sayfaları XML formatındadır. XML formatını bilmemeniz HTML öğrenmenize engel değil. Öncelikle HTML dosyaları etiket (TAG) adı verilen yapılardan oluşur. Her eleman bir etiket ile belirtilir. Örneğin linkler <a> etkiketi ile, resimler <img> etiketi ile belirtilirler.

Etiketler duruma göre kapalı veya açık olabilirler. Açık etiketlerin <etiket> şeklinde yazıldıktan sonra </etiket> yazılarak kapatılmaları gerekir. Kapalı etiketler <etiket /> şeklinde yazılırlar ve kapatılmazlar (zaten kapalıdırlar).


DOCTYPE (Dokümanın Türü)


Bir html belgesi (dosyası) şu satırla başlar:
<!DOCTYPE html>

Bu standart bir etiket değildir. Normalde etiket isimleri harflerden oluşur ve !, # gibi simgeler veya rakamlarla başlamazlar. Bu dosyamızın HTML formatında (document type) olduğunu belirtir.

En basit HTML belgesi şu şekilde yazılabilir:

<!DOCTYPE html>
<html>
<head>
  <title>Sayfanın başlığı</title>
</head>
<body>Sayfa içeriği</body>
</html>

Bunlar her HTML belgesinde olması gereken temel elemanlardır. <html> etiketi <head> ve <body> etiketlerini kapsayacak şekilde en üste yazılır ve belgenin sonunda </html> şeklinde kapatılır.

<head> etiketinin ile </head> kapanış etiketi ile arasına <title> etiketi içinde sayfa başlığı yazılır. Bu kısım tarayıcı ekranında en üstte gösterilen kısımdır (örneğin Ana Sayfa, Hakkımda, İletişim gibi).

<body> etiketi ile </body> kapanış etiketi arasına sayfada gösterilecek her şey yazılır. Örneğin linkler (bağlantılar), resimler, yazılar, menüler, listeler vb.

Bu etiketlerin alt satıra geçilmeden yan yana yazılmasında <html><head> ... gibi, veya aralarında fazladan boşluk, sekme karakteri (TAB) bırakılmasında bir mahzur yoktur. Sayfa görünümünü etkilemeyecektir.

Genelde açılış ve kapanış etiketleri arasına yazılan her etiket bir TAB karakteri kadar girintili olarak yazılırlar. Bu kodu daha sonra okumayı kolaylaştırır ve hangi etiketlerin hangisinin içinde olduğu daha rahat anlaşılır.

Örneğin:

<div class="menu">
  <a href="index.html">Ana Sayfa</a>
  <a href="yazilarim.html">Yazılarım</a>
  <a href="resimlerim.html">Resimlerim</a>
</div>

Bu kod bloğuna baktığımızda bir <div> etiketinin içine yazılmış 3 adet <a> etiketi görüyoruz. Burada <a> etiketlerinin <div> etiketinin içinde olduğu anlaşılsın diye girintili olarak yazılmışlar (TAB tuşuna basılarak). Genelde Notepad++ gibi editörler alt satıra geçtiğinizde (enter tuşu ile) girintileri otomatik olarak ekler.

Özellikler (Attributes)


Üstteki kodda <div> etiketinin içinde class="menu" ve <a> etiketlerinin içinde href="index.html" şeklinde bölümler var. HTML ve XML yapısında bu şekilde yazılan bilgilere özellik / nitelik (attribute) denir ve etiket ile ilgili özellikleri barındırırlar.

Bağlantılar


<a> etiketi bağlantı oluşturmak için kullanılır. <a> etiketinin href özelliği bağlantı adresini belirtir. Yani bu bağlantıya tıklayınca tarayıcıda o adres / dosya açılacaktır. <a> etiketi ile </a> kapanış etiketleri arasına yazılan yazı / eklenen resim vs. ekranda görünür ve üzerine tıklayınca bağlantı açılır. Bağlantıların üzerine fare ile geldiğinizde farenin şekli değişir. Normalde ok işareti şeklinde olan fare imleci, pointer (işaret eden el) işaretine dönüşür.


Bağlantı kodu:

<a href="http://myunusakdag.blogspot.com.tr">buraya tıklayınca ana sayfaya gidersiniz</a>

Daha önce belirttiğim gibi bu kodu satırlar şeklinde yazıp arada boşluklar bırakmanız görünümde hiç bir değişiklik oluşturmayacaktır.

Örneğin:

<a
   href="http://myunusakdag.blogspot.com.tr">
buraya
tıklayınca       ana      sayfaya
gidersiniz
</a>

Boşluklar


Üstteki kodu bu şekilde yazmanız görünümde hiç bir şeyi değiştirmeyecektir. Yazı içindeki boşluklar bile tek bir boşluk olarak görünecektir. Eğer fazladan boşluk bırakmak istiyorsanız her boşluk için:

&nbsp;

yazmanız gerekir. Örneğin üç karakter boşuk bırakmak için şunu yazmalısınız:

Ana&nbsp;&nbsp;&nbsp;Sayfa

Bu kodda da araya boşluk bırakıp bırakmamanız bir şeyi değiştirmez. Şöyle de olabilir:

Ana &nbsp; &nbsp; &nbsp; Sayfa

Her iki durumda da "Ana" ve "Sayfa" arasında 3 karakter fazladan boşluk olacaktır.

NBSP harfleri "Non Breaking Space" kelimelerinden alınmıştır.

Resimler


Sayfaya bir resim eklemek isterseniz bunu <img /> etiketi ile yapabilirsiniz. Fakat <img /> etiketi kapalı bir etikettir ve daha sonra </img> şeklinde kapatılmaz!

<img src="images/resim.jpg" />

Bu kodu <body> etiketi içinde bir yere yazdığınızda, ilgili kısma html dosyası ile aynı dizinde bulunan images klasörünün içindeki resim.jpg dosyası eklenir. 

Resmi farklı bir kaynaktan (farklı bir web sitesinden) eklemek isterseniz:

<img src="http://www.resim-sitesi.org/resimler/resim.jpg" />

şeklinde de ekleyebilirsiniz.

Resmin genişlik ve yükseklik değerleri pixel (px) olarak width (genişlik) ve height (yükseklik) özellikleri olarak belirtilebilir.

<img src="resim.png" width="400" height="300" />

Bu şekilde eklediğiniz resim.png dosyası sayfada 400 x 300 px boyutunda görünecektir.

Resmin üzerine fare ile gelince bir yazı göstermek için title (başlık) özelliğini, resim yüklenemezse yerine açıklama olarak gösterilecek resmi tanımlayan bir yazı eklemek isterseniz alt özelliğini kullanabilirsiniz.

<img src="fotograf.jpg" width="640" height="480" title="Alp Dağları" alt="Manzara fotoğrafı" />

Burada alt kısmına yazdığınız yazı yalnızca resim yüklenemezse görünür. Title ise fare ile resmin üzerine gelince küçük bir kutucuk içinde gösterilir ve fare uzaklaşınca ekrandan kaybolur.

DIV Etiketi ve CSS İle Biçimlendirme

<div> etiketi </div> şeklinde kapatılması gereken bir etikettir. Sayfada arkaplan veya kenarlık rengi belirtilmemişse gözle görülmez. Fakat resimler, yazılar, paragraflar, bağlantılar ve diğer tüm içerikler bu etiketlerin arasına yazılır. Bu etiket sayesinde web sayfasının düzeni oluşturulur.

Standart bir web sayfası genellikle üst kısımda logo ve slogan içeren bir boşluk (header), hemen altında bir kaç temel bağlantı içeren bir menü, onun da altında sayfa içeriği ve en altta isteğe bağlı bilgiler ve telif hakkı yazısı bulunur.

Üst Kısım (Site Adı, Slogan)
Menü (Ana Sayfa, Hakkımızda, Portfolyo)
Sayfa İçeriği (Yazılar, resimler, videolar vb.)
Alt Kısım (Copyright (c) 2017 - Falanca Kişiler Tarafından Geliştirildi)

Bu kısımları şu şekilde kodlayabiliriz:

<!DOCTYPE html>
<html>

<head>
<title>Ana Sayfa</title>
<meta charset="utf-8" />
<style type="text/css">

/* CSS KODLARI BURAYA YAZILACAK */

</style>
</head>

<body>
<div class="sayfa">
  <div class="ust-kisim"></div>
  <div class="menu"></div>
  <div class="icerik"></div>
  <div class="alt-kisim"></div>
</div>
</body>

</html>

Bu kodlar sayfa yapısını oluşturur fakat ekranda hiç bir şey göstermez. Çünkü css ile boyutlar, genişlikler vs. ayarlanmalı ve kısımlara içerik eklenmeli. Şimdi sayfa katmanından başlayarak hem css kodlarına hem sayfa içeriklerinin nasıl olabileceğine bakalım.


HTML

<div class="sayfa"> ... </div>

CSS

.sayfa {
    width: 900px;
    margin: 0 auto;
}

Bu kısımda sayfayı toplayan katmanın 900 px genişliğinde ve ekranında ortalanmış şekilde duracağını belirtiyoruz.

HTML

<div class="ust-kisim"></div>

CSS

.ust-kisim {
    height: 150px;
    border-bottom: solid 1px #eee;
}

Bu kısımda üst kısmın 150 px yüksekliğinde olacağını ve alt kenarında 1px kalınlığında düz ve gri renkte bir kenarlık olacağını belirtiyoruz.

HTML

<div class="menu"></div>

CSS

.menu {
    height: 80px;
    line-height: 80px;
    text-align: center;
}

.menu a {
    color: #12A;
    text-decoration: none;
    margin: 0 20px;
}

Bu kısımda menü katmanının 80 px yüksekliğinde olduğunu belirtiyoruz. Daha sonra yazıların dikey olarak ortalanması için line-height (satır yüksekliği) değerini de yükseklik ile aynı (80px) yapıyoruz. Son olarak yazıları yatay olarak ta ortalıyoruz.

Bir allta belirttiğimiz ".menu a" ifadesi menü sınıfından bir elemanın içinde bulunan tüm <a> etiketlerinin renginin mavimsi (#12A), altı çizili olmadan gösterilmesini istiyoruz. Sondaki margin (boşluk) ise bağlantıların arasında yatay olarak boşluk bırakmak için.

HTML

<div class="icerik"></div>

CSS

.icerik {
    text-align: justify;
}

Bu kısımda içerik kısmına yazılan yazıların iki yana yaslı (justify) olarak görünmesini belirtiyoruz.

HTML

<div class="alt-kisim"></div>

CSS

.alt-kisim {
    height: 30px;
    line-height: 30px;
    text-align: center;
}

Bu kısımda en alttaki kısmın 30 px yüksekliğinde yatay ve dikey olarak hizalanmasını belirtiyoruz.

Şimdi yazdılarımızı tek bir örnek üzerinde toplayalım.

<!DOCTYPE html>
<html>

<head>
<title>Ana Sayfa</title>
<meta charset="utf-8/>
<style type="text/css">


.sayfa {
    width: 900px;
    margin: 0 auto;
}

.ust-kisim {
    height: 150px;
    border-bottom: solid 1px #eee;
}

.menu {
    height: 80px;
    line-height: 80px;
    text-align: center;
}

.menu a {
    color: #12A;
    text-decoration: none;
    margin: 0 20px;
}

.icerik {
    text-align: justify;
}


.alt-kisim {
    height: 30px;
    line-height: 30px;
    text-align: center;

}

</style>
</head>

<body>
<div class="sayfa">
  <div class="ust-kisim">
    <h1>Sitenin Adı</h1>
    <p>Sitenin sloganı.</p>
  </div>
  <div class="menu">
    <a href="index.html">Ana Sayfa</a>
    <a href="hakkimizda.html">Hakkımızda</a>
    <a href="iletisim.html">İletişim</a>
  </div>
  <div class="icerik">
    <h2>Hoş geldiniz</h2>
    <p>Web sitemize hoş geldiniz. 1980 yılındandır filanca sektörde şu alanda hizmet vermekteyiz. Bizi tercih ettiğiniz için teşekkür ederiz. İletişim sayfamızdan bize ulaşabilirsiniz.</p>
  </div>
  <div class="alt-kisim">
    Telif Hakkı &copy; 2017
  </div>
</div>
</body>

</html>

Üstteki belgeyi olduğu gibi html uzantılı bir belge olarak kaydederseniz (örneğin index.html) açtığınızda şu şekilde görünecektir:



Daha sonraki yazılarımda kullanabileceğiniz CSS özellikleri (örneğin color, background-image, font-family gibi) ile detaylı bir şeyler yazacağım.

Bu blogdaki popüler yayınlar

Almanca - Nomen-Verb-Verbindungen

C ile Dosya Şifreleyici Yapımı