HTML Statiktir!
İlerleyen yazılarda bahsedeceğimiz üzere, internet sayfaları statik ve dinamik olmak üzere ikiye ayrılmaktadır. HTML statik yani stabil ya da durağan olarak adlandırılırken; ASP veya PHP gibi sayfalar dinamiktir. ASP ya da PHP sayfalar içerisinde sadece HTML kodları kullanılabilir ve bu durum bu sayfaları aslnda dinamik yapmaz. Sadece teorikte dinamik olarak görünseler de aslında kesinlikle statik sayfalardır.
HTML İle Neler Yapılır?
HTML, bir internet sitesinin en temel oluşumudur. Bu kodlama dili sayesinde sitenizde resim ve videolar yayınlayabilir, yazılar yazabilir, arama motorlarına siteniz hakkında bilgiler verebilirsiniz. Ancak, veritabanı kullanarak üyelik gibi nispeten daha karmaşık işlemler yapamazsınız. Sadece bir internet sitesinin temel unsurlarını yerine getirebilirsiniz. Bu nedenle de günümüzde statik siteler çok ama çok nadir kullanılmaktadır. Bunun sebebi ise, artık firmalar kendileri hakkında çok daha kapsamlı bilgileri internet sitelerinde sergilemek isterler. Örneğin, ürünlerini ya da hizmetlerini listelemek isterler. Bunlar statik ya da saf HTML sayfalar eşliğinde olabilir ancak dinamik sitelerin çok önemli bir avantajı vardır. Dinamik sitelerde bilgiler veritabanlarına işlenir ve siz bir yönetim paneli sayesinde bu bilgileri istediğiniz zaman kolayca değiştirebilirsiniz. Fakat, HTML sayfalarda yani statik sayfalarda tek tek kodları değiştirmeniz gerekecektir ki bu da günümüzde çok gereksiz ve zahmetli olacaktır.
HTML Sayfa Nasıl Oluşturulur?
HTML sayfalar oluşturmak istiyorsanız en basit yöntem klasik notepad programı olacaktır. Bunun için -eğer ki Windows işletim sistemi kullanıyorsanız- başlata tıkladıktan sonra notepad yazarak arama yapabilir ve notepad programını bulabilirsiniz. Ya da sağ tıklayarak yeni ve sonra metin belgesi seçeneğini seçebilirsiniz. Karşınıza Yeni Metin Belgesi.txt ismi gelecektir. Merak etmeyin bu normaldir. Önce o dosyayı çift tıklayarak açabilir istediğiniz kodları yazabilirsiniz. Sonrasında da dosyanın .txt olan uzantısını .html olarak değiştirirseniz artık bir HTML sayfaya sahip olmuş olursunuz. Sonrasında kodlarınızı değiştirmek isterseniz de sağ tıklayıp Birlikte Aç > Notepad seçeneği ile kodlarınıza ulaşabilirsiniz.
HTML Kod Örnekleri
<html>
<head>
<title>HTML Nedir – CREAMIVE Web Tasarım Ajansı</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”description” content=”CREAMIVE Web Tasarım, Türkiye’nin en kreatif kurumsal web tasarım ajansıdır.” />
</head>
<body>
<p>HTML hakkında bir sayfa oluşturuyorum.</p>
</body>
</html>
Haydi gelin birlikte yeni bir HTML dosyası oluşturalım ve yukarıdaki kodu deneyelim. Nasıl HTML sayfa oluşturulur konusunu hatırlıyorsunuz değil mi? Hemen bir üst kısımda anlatmıştık. Şimdi bunu pratiğe dökme zamanı!
HTML Kodları ve HTML Etiketleri (HTML Tagleri)
Yukarıda HTML kodlarının en temel olanlarını gördünüz. Şimdi bu HTML kodları nedir ve ne işe yarar konusuna girebiliriz.
Genel olarak internette bu konu hakkında arama yaptığınızda benzer kodlara ulaşabilirsiniz. Ama tek farkla! Charset kodunu içeren satırı eğer yazmazsanız sayfanızda Türkçe karakterler sorunlu görünecektir. Tabii ki dosyanızı da UTF-8 olarak kaydetmeniz gerekiyor. Genellikle de zaten varsayılan olarak dosyaları bilgisayarınız UTF-8 formatında kaydediyordur. Eğer ki Windows-1254 ya da ANSII olarak kaydediyorsa, işte biraz sıkıntılı bir dönem sizi bekliyor diyebilirim. Ama bunun için daha erken, o yüzden de sonraki günlerde anlatmak daha iyi olacaktır.
Bu arada, HTML’de bir etiket açılıyorsa kesinlikle kapatılmalıdır. Kafanızın karışmasını istemediğim için çok fazla detayına girmeyeceğim ama aklınızın bir köşesine bunu kazımalısınız.
Tekrar konuya dönüyoruz ve yukarıdaki HTML kodlarını açıklamaya başlıyoruz.
<html>: Sayfanızın HTML içerdiğini anlatır. Sayfanın en başında bu etiket açılmalı sayfanın da en sonunda kapatılmalıdır.
HTML sayfalar <head> yani baş ve <body> yani gövde şeklinde ikiye ayrılır.
<head> Etiketi
<head>: <html> etiketinden sonra gelir ve sayfada görünmeyecek bilgi notlarını eklememize yarar. Burada Javascript ya da Css dosyalarını HTML sayfamıza ekleyebiliriz. Hatta aklınıza gelebilecek birçok kod kısmı burada yer bulmaktadır. Bizim örneğimizde ise dosyamızın UTF-8 karakter setine sahip olduğu ve sayfamızın başlığının da HTML Nedir – CREAMIVE WEb Tasarım Ajansı olduğu bilgisi <head> tagleri arasında yer almaktadır. Ayrıca, <head> tagı <body> tagı başlamadan önce kapatılmak zorundadır.
Ayrıca, <head> tagını kullanmak zorunlu değildir. Ancak, kullanmazsanız çok garip bir sayfaya sahip olursunuz. Öyle ki günümüzde böyle sayfalar neredeyse yok denilebilir.
<title> Etiketi
<head> etiketleri arasında yer alan <title> etiketi, sayfanızın başlığını eklediğiniz yerdir. Arama motorlarında çıkan başlıklar da buradaki bilgilerden temin edilerek gösterilir. O nedenle de başta Google olmak üzere tüm arama motorları için çok önemli bir etikettir.
<description> Etiketi
<description> Etiketi sayfada görünmez ancak arama motorlarında sitenizi ya da sayfanızı tanıtan uzun cümle olarak görünmektedir. Bu da Google ve arama motorları için çok önemli bir bilgi olmaktadır. Bu nedenle de eksik bırakılması kesinlikle tavsiye edilmez. Description etiketine web sayfanızı tanıtan güzel bir tanıtıcı cümle girmenizi tavsiye ederiz. Anlamsız olarak gireceğiniz tüm tanımlar size zarar olarak geri dönecektir. Bunu da unutmamalısınız!
<body> Tagı
Body etiketi sayfanızın içerik alanıdır. Burada yazacağınız kodların neredeyse tamamı kullanıcılar tarafından görünecektir. </head> kapanış etiketinden sonra gelir ve </html> (sayfanın en altındaki) kapanış etiketinden önce de </body> şeklinde kapatılır.
<p> Tagı
En çok kullanılan etiketler arasında yer almaktadır. Aslında paragraph yani paragrafın kısaltmasıdır. <p> ve </p> arasında yazacağınız her yazı paragraf olarak görünür ve başında ve sonrasında da birer satırlık bir boşluk oluşur.
HTML’yi Öğreniyoruz!
Evet, tebrikler! Şu anda ilk HTML sayfanızı oluşturdunuz ve öğrenmeye başladınız! Bundan sonra daha fazla bilgileri sizlere aktaracağız ve birlikte birçok HTML kodunu öğreneceğiz.
Önümüzdeki süreç içerisinde ve olanaklar da el verdikçe, haftada birkaç ders ile bu konu üzerinde ilerleyeceğiz. Sonrasında da ASP, PHP gibi dinamik kod yazım örneklerine geçeceğiz ve gerçek bir internet sitesi nasıl yapılır konusuna gireceğiz. Web tasarım nasıl yapılır konusu ise bunların arasında olacak çünkü web tasarım yapabilmek için kod yazmak da bazen yeterli oluyor. Tıp ki çoğu zaman benim görüntü programları yerine kod yazarak tasarım yaptığım gibi :) Şimdiden küçük bir ipucu: CSS yani Cascading Style Sheets!
Merak ettiğiniz ya da aklınıza takılan kısımlar olursa lütfen yorum kısmından iletmekten çekinmeyiniz.
