Websitem Kodlaşıyor
Html & CSS Eğitimi
Merhaba Arkadaşlar,
Sizlerle beraber daha önceden edinmiş olduğum bilgileri artık paylaşmak ve yazılı ve video (video sunum eklenecektir.) anlatım halinde sunma gereği hissetim.
Bu konuda daha çok 'HTML ve CSS' üzerinde yoğunlaşacağım. Konunun sonunda gerekli işlemleri yaparsanız ve birkaç konuya dikkat ederseniz, konu hakkında önemli ölçüde bilgi sahibi olacağınıza
eminim. Birkaç Ana ve alt başlık üzerinde konuyu anlatmaya başlayacağım fakat derinlere indikçe aklıma gelen şeyleri de eklemeye gayret edeceğim. Genel Olarak anlatımım da işin hikaye kısmından çok
özüne inmeye çalışacağım. Bundan ötürü bazı kısımları atlayacağım.
Bu kadar açıklamanın şu anlık yeterli olduğunu düşünüyorum. Artık konuya giriş yapabiliriz.
HTML'e GİRİŞ
ÖN Hazırlıklar
Öncelikle birkaç şeyi bilmemiz gerekiyor. Kodlarınızı Not Defteri gibi basit bir editörle bile yazabilir ve düzenleyebilirsiniz. Ancak biz daha anlaşılır olması için ve hatalarımızı daha rahat görmemiz adına 'Notepad++' adlı yazılımı kullanacağız.
Şu anda güncel olarak 5.8.8 sürümüne (4.8 MB) sahip ve Türkçe dil desteği sunuyor. http://notepad-plus-plus.org/ adresinden indirebilirsiniz.
Notepad benim için yeterli diyorsanız, sorun yok
Bu arada dosyalarımızı kaydederken .txt yerine .html uzantısı ile kaydetmemiz gerekiyor.Ve tabiki dosya adlarında türkçe karakter kullanmayacağız. Ancak bunlar yeterli değil sadece anlık geliştirmeler yapmak kodu yazıp anlık olarak test etmek istiyorum diyorsanız.
W3 Schools sitesinde yer alan Tryit editörüde kullanabilirsiniz. http://www.w3schools.com/html/tryit....=tryhtml_basic adresinde yer alan uygulama oldukça hoş, Dreamweaver'de kullanabileceğiniz yazılımlar arasında yer alıyor.
HTML YAZIM STANDARTI
Html dosyaları standart olarak baş ve gövde olmak üzere iki ayrı kısımdan meydana gelir.
Yani örnek bir dosyanın kaynak kodları aşağıdaki gibi olacaktır.
HTML-Kodu:
<html> <head> <title>HTML DERSLERİ</title> </head> <body> websitem-kodlasiyor... </body> </html>
Ancak biz henüz ilk adımda iken güncel yazım şeklini kullanmaya ve bazı standartlara uygun yazmaya dikkat edeceğiz. Buna göre bizim kullanacağımız yazım şekli aşağıdadır.
HTML-Kodu:
<!DOCTYPE html> <html> <head> <title>HTML DERSLERİ</title> </head> <body> websitem-kodlasiyor... </body> </html>
göstermektedir. Yazacağımız kodlarda W3C standartlarına uyum göstermemiz hem temiz kodlama yapmamızı, hemde birden fazla internet tarayıcısında sorunsuz çalışan siteler hazırlamamızı sağlamaktadır. Ayrıca bu standartlara uygun yapılan sayfa tasarımlarının diğer tasarımlara oranla daha fazla ilgi çektiğini, daha doğrusu diğerlerinden ön planda olmanızı sağladığını söylemeliyim.
<head> Etiketi
Sayfaya ait temel özellikler; sayfa başlığı, stil dosyası adresi, anahtar kelimeler gibi bilgiler bu etiketler arasında yer alır. Bu kısımda yer alan etiketleri ayrıca belirteceğim. Etiketlerin çoğunuğu <body>'de yer aldığı için sadece
<head>'de belirtmenin yeterli olduğunu düşünüyorum.
<body> Etiketi
İşimizin başladığı kısma ait etikettir. Kodların çoğunluğu bu kısımda yer alır. body ile arkaplana resim atamak ve renk değiştirmek işlemlerini yapacağız.
Bundan ötürü; arkaplana resim eklemek için background="" parametresini ve arkaplan rengi belirlemek için bgcolor="" parametresini kullanacağız.
<body background="resim.jpg"> , <body bgcolor="red"> şeklinde kullanımlar yeterli olacaktır. Bunların yerine CSS ile stil belirlemek daha mantıklı olacaktır.
Bundan ötürü sadece öğrenmeniz açısından bu konuya değiniyorum.
Kodlarımızı yazarken dikkat etmemiz gereken bir diğer konu ise etiketlerin iç içe kapatılmasıdır. Yani ilk açtığımız etike en son kapatılmalıdır. Ben bu olayı matruşkalara benzetiyorum. Hani şu açtıkça küçülen ve farklı bir bebek çıkan rus bebekleri, oldukça hoş değil mi.
Anladığınızın farkındayım ama yinede örnek vermek istiyorum.
HTML-Kodu:
<center> <b> Matruşkalar Güzeldir. </b> </center>
Bu arada verdiğim kodların <body>....</body> etiketleri arasında yer alması gerekiyor.
Açılan etiketlerin kapatılması bazı istisnalar dışında kapatılması gerekir. Kapatmayı unuttuğumu yada kapatma gereksinimi duymadığımız etiketler ilerde başımıza dert olabiliyor.
HTML-Kodu:
.. <body> <b> Başlık <br> Konumuz gayet açık ve net, onun için anlatmaya gerek yok. </body>..
Konu ile beraber değinmek istediğim son nokta ise sizinde farkettiğiniz üzere alt satıra geçişleri - <br /> kullanılmadan- tarayıcının algılamadığı ve
yan yana yazdığıdır. Yani bırakacağımız boşluklar pek anlam ifade etmiyor. Bunun için alt satıra geçişleri gerekli yerlerde unutmamamız gerekiyor.
HTML-Kodu:
.. <body> <b> Başlık </b> <br /> Konumuz gayet açık ve net, onun <br /> için anlatmaya gerek yok. </body>..
Yazıları özel biçimli hale getiren etiketlerdir. Yani yazımızın koyu, italik, altı çizili, üstü çizili gibi bir çok şekilde yazılması adına bize kolaylık sağlayan bu kadar, işimize bir çok yerde yarayacak.
<Hx> etiketi başlıklar için kullandığımız etiketdir. X kısmına 1 ile 6 arasında yer alan bir sayı getirilmesi gerekiyor. 1 en büyük başlık olarak yer alır
ve sayılar küçüldükçe yazı boyutları da küçülür.
HTML-Kodu:
.. <body> <h1> Başlık </h1> <br /> <h4> Alt Başlık </h4> <br /> <b> Koyu Yazı </b> <br /> <u> AltıÇizili Yazı </u> <br /> <s> Üstü Çizili Yazı </s> <br /> <i> İtalik Yazı </i> <br /> <b> <i> <u> 3'ü Bir Arada :-) </u> </i> </b> <br /> <tt> Daktilo Yazı </tt> <br /> </body>..
Fakat ingilizcesini zihninize kodlarsanız daha rahat olacağını düşünüyor. Bold, Underline gibi...
HTML-Kodu:
.. <body> E= M.C <sup>2</sup> <br /> log<sub>7</sub> <br /> </body>..
Standart olarak metinler sola dayalı olarak yazdırılır. Ortalama yapmak için <center>... </center> kodunu kullanırız. Diğer hizalamalar için etiketlere align parametresini girmemiz gerekir.
HTML-Kodu:
... <body> <h3 align="left"> Sola Hizalı Başlık </h3> <br /> <h3 align="center"> Ortalanmış Başlık </h3> <br /> <h3 align="right"> Sağa Hizalı Başlık </h3> <br /> </body>..
konusunda değineceğim.
<Font> ve <P> etiketi
Font etiketi yazılan yazılara stil vermek için kullanılan etikettir ve kapatılması gerekir. Genelde tek başına kullanılmaz, parametreleriyle beraber kullanılır.
<font> ile yazı rengi (color=""), büyüklüğü(size=""), yazı tipi(face="") seçimi gibi birçok işlemi yapabiliriz. <P> etiketiyle ise bunlara ek olarak hizalama yapabiliriz.
<br> ile alt satıra geçtiğimizden farklı olarak <p> tagında üstteki satır ile boşluk oranı daha fazladır. <p> etiketi için align="" parametresi kullanacağız.
<p> ile CSS'e geçtiğimizde kullanacağımız id ve class parametlerini de kullanabiliriz. Şu an sadece hizalamaya değineceğim.
HTML-Kodu:
... <body> <p align="center"> <font color="gray" size="5pt" face="Verdana"> 5 punto ve Gri, Verdana yazı... </font> </p> </body>..
Resim eklemek için kullandığımız etikettir. src="" parametresi ile resim adresini belirtiriz.
Resme width ile genişlik ve height ile ise yükseklik değeri atayabiliriz. alt parametresi ile ise resmin üzerine gelince baloncuk şeklinde çıkacak
olan kutuda yer almasını istediğimiz metini ekleyebiliriz. align parametresi resimden hemen sonra yer alan yazının hizalanması ile ilgilidir. Eğer değer atanmazsa hemen yanına yazar. Yani default değeri 'bottom'dur. Center,Top gibi değerlerle
resimden sonra ortalanmış veya tepede yer alan yazılar yazabiliriz. Border ile kenarlık ekleyebiliriz.
NOT: Çalışmalarınızda kullanacağınız resimleri resimler adında dosyamızı kaydettiğimiz dizine atarsak, yani bir yerde toplamış olursak; daha sonradan dosyaları sunucuya
gönderdiğimizde sorun yaşamamış oluruz.
Örnek Kullanımımız;
HTML-Kodu:
... <img src="resimler/resim.jpg" width="100px" height="100px" align="center" alt="Resimler" /> Yazılar ...
Başka bir adrese geçiş -link- vermek için kullanılır. Target parametresi ile köprünün nasıl açılacağını belirleriz. Yeni sayfada(_blank), aynı sayfada(self) açmak gibi değerler kullanabiliriz.
href ile gidilecek adres belirtilir.
NOT:
<a ..> XX </a> XX kısmı boş bırakılırsa kodlama doğru olsa dahil ekrana bir şey yazdırılmadığı için linkimiz görünmez. Dikkat etmemiz gerekir.
HTML-Kodu:
... <a href="http://websitem-kodlasiyor.tr.gg/" target="_blank">websitem-kodlasiyor </a> ...
olağan bir durum rel="" parametresinin "nofollow" işlevini kullanabiliriz. Bu sayede verdiğimiz linkler Google tarafından dikkate alınmayacaktır.HTML-Kodu:
... <a rel="nofollow" href="http://websitem-kodlasiyor.tr.gg/" target="_blank">websitem-kodlasiyor. </a> ...
Site adresi yazdığımızda http:// yada ilgili protokolü eklemeye dikkat etmemiz gerekiyor. Yoksa iyinet.com şeklinde vereceğimiz link dosya dizinimizdeki bir adres gibi kabul edilecek ve link hatalı çalışacaktır.
1. Bölüm Sonu
Bu bölümde ilk etapta aklıma gelen etiketleri ve nasıl kullanabileceğimizi anlatmaya çalıştım. Aslına bakarsanız, kodların yanına ekran çıktısını resim olarak eklemeyi düşünüyordum fakat deneyerek farkları kendinizin görmenizi istedim ve resim ekleseydim hazırlayacağım video ders pek işe yaramaz hal alacaktı. Hatalı veya eksik gördüğünüz kodları belirtirseniz düzeltme ve ekleme yapma fırsatı bulabilirim.
'Şöyle olsa daha güzel olur...' veya 'Ben şu şekilde kullanıyorum...' şeklinde ki yorumlarınızı esirgemezseniz sevinirim.
