İkinci derse hoş geldiniz.  Bu yazıda "Html" ile ilk kodumuzu yazacağımız için basit terimleri anlatarak başlamak i...

Html'de Sayfa Oluşturma #2

Eylül 12, 2015 Mustafa TÜRKÖZ 4 Yorum

Html

İkinci derse hoş geldiniz. Bu yazıda "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 oluşturmak istiyorum derseniz, burda size CSS yardımcı olacaktır.

Bunların 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ü size çok gıcık geliyor. Boostrap ile renkli renkli, çeşit çeşit butonlara sahip olabilirsiniz.

Asıl konumuza gelecek olursak. 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.

 Dikkat! 
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, Meta etiketi ile description'ı, yani sitemizin açıklamasını belirterek google'da arattığımız da, site açıklamamız aşağıdaki gibi 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.

 Örnek 
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

 
Önerilen video: Tıkla!
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.


Yayın Tarihi: 12.09.2015  
MUSTAFA TÜRKÖZ

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 bir adama sadece rüyalar gelir.