İkinci dersime hoş geldiniz. Bugün html ile ilk kodumuzu yazacağımız için basit terimleri anlatarak başlamak istiyorum. Yap...

Html-Css Öğreniyoruz (DERS 2) >> İlk Sayfamızı Yapıyoruz

20:49:00 Mustafa TÜRKÖZ 4 Yorum

Html/Css DERS 2
   İkinci dersime hoş geldiniz. Bugün html ile ilk kodumuzu yazacağımız için basit terimleri anlatarak başlamak istiyorum. Yapacağımız web sayfasına iki tane alıntı söz koyacağız. Bu arada, eğer sayfada sadece html kodları kullanıyorsak muhteşem bir görsellik beklemeyin :) Html dili ekranda gördüklerinizin konumlarını düzenlememize yarıyor diyebiliriz. Fakat ben görsel açıdan daha güzel stiller yapmak istiyorum derseniz, burda size CSS yardımcı oluyor. Bunun dışında başka dillerde vardır. Mesela Javascript dili ile hareketli, dönen-kaçan, tuhaf tuhaf görsel efektler yapılabilir. Son olarak bir de Boostrap vardır. Boostrap ile de daha iyi tasarımlar yapabiliriz. Örneğin, html ile oluşturabildiğimiz tek tip buton var ve görüntüsü bana çok gıcık geliyor. Ama boostrap ile renkli renkli, çeşit çeşit butonlara sahip olabiliyoruz.

   Velhasıl asıl konumuza gelelim. Site tasarlarken en dışta <html> etiketlerimiz illaki olmak zorunda. Bunların içine birde <head> ve <body> gibi etiketleri de koymamız gerekiyor. İlk derste site iskeletimiz diye belirttiğim bir foto vardı, bakabilirsiniz. Head etiketinin içine yazdıklarımız sitemizle ilgili yazılar olacak(Site başlığı, site açıklaması gibi). Fakat <head> etiketi içerisinde yazdıklarımız ekranda gözükmemektedir. Bunları <meta> etiketleriyle yaparız. Meta etiketleri Google gibi arama motorlarının sitenizi daha düzenli arayabilmesi ve sitenizin ön sıralara çıkması için önemlidir.

   Diğer etiketimiz <body> etiketidir. Site ekranında gördüğümüz her şeyin kodları bu etiketlerin arasına yazılır. Örneğin; menü, sayfa ve formların kodları <body> etiketlerinin arasındadır.

   İlk önce <title> etiketiyle site başlığımızı yazalım. Daha sonra <p> etiketinin içerisine alıntımızı yazacağız. Alıntımızın başlığını da <h> etiketleri ile düzenliyoruz. 6 tane <h> etiketi vardır. Bunlar, <h1>, <h2>, <h3>, <h4>, <h5>, <h6> şeklindedir. <h1> 'den <h6> 'ya doğru başlık boyutu küçülür.

   <title> etiketi tarayıcı penceresinde site adının gözükmesini sağlar.
   <p> etiketi paragrafın p'sinden gelmektedir ve bu etiket içerisine yazdığımız yazıları koyarız.
   <h1> etiketi yazılarımızın başlıklarını belirtmek için kullanılır.

ÖNEMLİ!
Açtığımız her etiketi kapatmamız gerekir. Etiketi kapatmak için "/" işareti kullanılır. Örneğin, <html> ve </html> de görüldüğü gibi.

   Aklıma gelmişken şunu da yazıyım. Meta etiketiyle description yani sitemizin açıklamasını belirttiğimiz de ve sitemizi google'da arattığımız da açıklamamız bu şekilde görünecektir.
muCosmo google arama
   Sayfalarda yazacağımız Türkçe karakterler de şimdilik gözükmeyecek ve ben Türkçe karakter kullanmayacağım bu derste. Bu sorunun nasıl düzeltileceğini sonraki derslerde yazacağım.

ŞUNU DENEYELİM!
   Herhangi bir siteye girelim. Alış veriş, kitap herhangi bir site işte. Girdiğimiz bu sitenin üzerinde sağ kliğe tıklayalım ve sayfa kaynağını görüntüle diyelim. Burda karşımıza gelecek kodlar sitenin kullandığı  html ve diğer dillerin görebileceğimiz kısımlarıdır. Mesela, aşağıda kendi bloğumdan kaynak kodlarına bakınız.
mucosmo site kaynak kodları

   Ve bir örnek yaparak yazıyı bitireceğim. İlk kodlama için bu kadar anlatım yeterli sanırım. Kodumuzu ayağınız alışsın diye not defterinde yazalım bu kez. Çünkü işin içine programlar girerse hemen kaçacağınız malum. O programlarda da bir zorluk yok ama neyse :)

   İlk HTML kodlarımız buyrunuz:
ilk kodumuz


   Ekranda yazılı olan kodları metin dosyamıza yazalım ve farklı kaydet diyelim. Dosya adına herhangi bir şey yazıp sonuna da ".html" yazalım. Bunu yazmamız gerek, yazmaz isek zaten bu bir metin dosyasıydı ve metin dosyası olarak kalır. Yani web sayfa uzantımız ".html" olacağı için bu şekilde kaydetmemiz lazım. Yeni dosyamız artık tarayıcı simgesiyle gözükecek ve ona tıklayıp sayfamızı görüntüleyebiliriz.
html sayfa kaydetme

   En son yazdığımız kodların görüntüsü aşağıdaki gibi olacaktır. İyi kötü bir web sayfası yaptık, geçmiş olsun. Daha sonra tekrar görüşmek dileğiyle.
Kodumuzun görüntüsü
Ek Bilgi:
"<br/>" etiketi bir satır aşağı inmeyi sağlar.
"&nbsp;" işareti boşluk bırakmayı sağlar.

4 yorum:

  1. Normalde videoyla bile kimse bu kadar düzgün anlatamaz bu tür konuları. Ama siz belli ki yazılarınıza çok emek veren bir kişisiniz, bu yüzden de yazdıklarınızın hepsi anlaşılıyor.

    Belki html/css bilmeyen kişilerin kafasında sorular kalabilir ama onlarda artık yorum kutusunu kullansınlar.

    YanıtlaSil
    Yanıtlar
    1. Elimden geldiğince yardımcı olmaya çalışacağım. Birilerine yararım olursa ne mutlu bana. Soruları olanlara da yorum bölümünden yardımcı olmaya çalışırım tabi. Bu arada kusura bakmayın bugün nete giremediğim için yorumunuzu geç yayınladım.

      Sil

UYUYAN BİR ADAMA SADECE RÜYALAR GELİR..