Şunu söylediğimde siz de bana katılacaksınız:

Web yazılım öğrenmek zor ve çok karışık bir iş..

Her yerde o kadar çok bilgi var ki.. İnsan nereden başlayacağını bile bilemiyor.

Peki…

Size desem ki aslında web yazılım öğrenmek o kadar da zor değil…

Evet..

Bu yazı ile size bunu kanıtlayacağım.

Bu yazının sonuna geldiğiniz de ilk web sayfasınızı yapmış ve HTML5’in temellerini öğrenmiş olacaksınız.

İnanmıyor musunuz?

Sonuna kadar devam edin ve dikkatlice okuyun…

Bu yazının sonunda artık her şey değişmiş olacak…

Hazırsanız başlayalım…


Belki tek seferde okuyamazsanız ve sonradan devam etmek isterseniz diye, aşağıya konu başlıklarını ekledim ki, kaldığınız yere hızlıca gidebilirsiniz.

Web Yazılıma Giriş

Ben, bir şeyi anlayabilmek için o şeyin, detayına inmeyi severim.

Şimdi de web’in detaylarına ineceğiz.

Web nasıl çalışır?

Web yani internet, aslında 1969 yılında amerikalılar tarafından icat edildi.

Tabi çeşitli söylentiler olmakla birlikte, ana amacın, iki bilgisayarın bir biri ile haberleşebilmesi için icat edildiği söyleniyor.

Yani aslında internet, sadece bilgisayarların bir biri ile haberleşmesinden ibaret…

Bizim bildiğimiz internet;

Açarsın bir web tarayıcısı, yazarsın en sevdiğini websitenin adresini adres çubuğuna ve başlarsın sörf yapmaya…

Tamam da…

Biz bunları yaparken arka planda neler dönüyor?

Bu size bir senaryo ile açıklayayım…

Diyelim ki Ali, web tarayıcısını açtı…

Bu arada; web tarayacısı(browser) hepimizin kullandığı, server ile haberleşen ve ulaşmak istediğimiz sitenin kodlarını bizim için anlaşılır hale getiren bir program.

Örn: Google Chrome, Mozilla Firefox, İnternet Explorer vb.

web tarayıcılar - Google Chrome, Mozilla Firefox, İnternet Explorer

Ali, tarayıcının adres satırına www.google.com yazdı ve bastı entera…

web tarayıcı ve adres satırı

Bu anda, tarayıcı inanılmaz hızlı bir şekilde adres satırındaki, site adresini aldı ve internette aramaya başladı.

Ve… adresin ait olduğu server’ı buldu.

Hemen Ali’nin ondan istediği web sayfasının kodunun bulunduğu dosyayı istedi.

Yani serverdan istekte(HTTP Request) bulundu.

Server da aslında senin benim kullandığım bilgisayarlardan çokta farklı bir bilgisayar değil..

Onunda işlemcisi, rami, anakartı, harddiski var.

Tek farkı internet üzerinden gelen isteklere cevap verebilecek şekilde programlanmış olması (HTTP response)

Server, hemen tarayıcıya cevap olarak, istenilen dosyayı verdi.

HTTP Request HTTP Response

Server, aslında cevabı göndermeden o dosya içerisindeki kodu, kendisi çalıştırıp, gerekli değişiklikleri yaptıktan sonra tarayıcıya cevap veriyor.

Server, aslında cevabı göndermeden o dosya içerisindeki kodu, kendisi çalıştırıp, gerekli değişiklikleri yaptıktan sonra tarayıcıya cevap veriyor.

Bu değişiklikleri bizler, kodun içerisindeki ‘SERVER SIDE PROGRAMLA DİLLERİ’ denilen diller ile yaptırıyoruz.

PHP, ASP, PYTON, NODEJS gibi programlama dilleri…

Neyse bu ilerleyen yazıların konusu

Tarayıcı dosyayı aldı.

Şimdi sıra… içindeki kodu okumakta…

Bizler(yani web yazılımcılar), oluşturmak istediğimiz web sayfasının detaylarını, taracının anlayabilmesi için özel bir dil kullanarak yazıyoruz.

Veee… Bu özel dil HTML!!!

Tarayıcı, HTML ile yazmış olduğunuz yazıları, istenilen formata dönüştürerek Ali’nin önüne verdi.

Yine ilerleyen yazıların konusu olan CLIENT SIDE PROGRAMLAMA (JavaScript) dilini kullanarak, yazmış olduğunuz kod üzerinde, henüz Ali’ ye web sayfasını göstermeden, tarayıcı tarafından kod üzerinde değişiklikler yapabiliriz.

Tabi ki bütün bu yazdığım işlemler saniyeler içerisinde gerçekleşiyor ve Ali, google’ da istediği aramayı yapmaya hazır oluyor.


Bu senaryodan şuan için anlamanız gereken temel şey;

HTML’i web tarayıcılarına, bir web sayfasını nasıl oluşturması gerektiğini anlatmak için kullanılıyoruz.

Kabaca hatları ile web yani internet nasıl çalışıyor, anladıktan sonra…

Artık, biz nasıl yazacağız bu kodları bunu öğrenelim…


HTML Nedir, Ne İşe Yarar?

HTML, bir az önce bahsettiğim gibi; oluşturmak istediğimiz web sayfasının detaylarını, tarayıcının anlayabilmesi için kullanılan özel bir dil.

Sakın beni yanlış anlamayın…

HTML bir programlama dili değil… HTML, bir işaretleme dilidir.

Yani bir yazının formatını, çeşitli işaretlemeler kullanarak şekillendirdiğimiz özel bir dil…

Size bunu bir örnekle açıklamaya çalışayım.

Mesela ayılarla ilgili elimizde bir yazımız var.

Ve web safyamızda bunu, aşağıdaki gibi görüntülemek istiyoruz.

Eski çirkin sadece HTML ile yapılmış site

Yazının içinde başlıklar, paragraflar, kalın yazılmış kelimeler var.

Bunların hepsi, siz alışık olduğunuz için çok normal gelebilir.

Eeee… yani ne var bunda? diyebilirsiniz.

Ama işler sandığınız kadar basit değil…

İşte, sayfamızda yazıların nasıl gözükmesini istiyorsak, HTML’in o duruma özel işaretlemelerini kullanarak, yazımızı biçimlendiriyoruz.

Peki HTML olmasaydı; sizce, web tarayıcı yazımızı ne şekilde gösterirdi?

Eski çirkin sadece HTML ile yapılmış site

Sonuç…

Okuması ve anlaması çok zor, dümdüz bir yazı…

Bu yüzden gerekli yerleri, HTML elementlerini kullarak aşağıdaki gibi işaretlememiz gerekiyor.

Ki… Web tarayıcı bizim ne istediğimizi anlayabilsin.

kopyala

<h1>Ayı Türleri ve Özellikleri</h1>
<p>Ayı türleri denildiğinde Türkiye başta olmak üzere dünya genelinde birçok ayı türüne rastlamak oldukça mümkündür.</p>
<h2>Bozayı</h2>
<p>Türkiye’de yaşayan bu ayı türünün dişi olanının ortalama ağırlığı <strong>80-150 kg</strong> olup erkek olanında ise <strong>100-230 kg</strong> olduğu tespit edilmiştir ve boyları ise arka ayakları üzerinde durduklarında <em>2.48cm</em>dir. Boz ayıların beslenme alışkanlıkları genelde sebze ağırlıklıdır ve orman bitkileri de onlar için sebze kategorisine girmektedir ve aldıkları besinleri arasında bal da yer almaktadır.</p>

Artık vakti geldi…

İnternet, web tarayıcı nasıl çalışır? HTML Nedir? bunları öğrendik.

Şimdi sıra HTML elementlerini kullanarak nasıl o işaretlemeleri nasıl yapacağımıza geldi.

HTML Elementleri

Tarayıcının bizi anlaması için HTML elementlerini kullanacağız.

html elementleri

HTML elementleri, genel olarak yukarıdaki resimde gördüğünüz gibi, Açma/kapama etiketi ve içerikten oluşur.

Kapama etiketi ve içeriği olmayan, bazı istisna elementler de vardır. Bu elementlerden bazılarını yazının ilerleyen kısımlarında göreceksiniz.

Temel HTML Elementleri

Öncelikle size çok basit bir sayfanın, HTML kodunun nasıl göründüğünü göstermek istiyorum.

Sayfayı Görüntüle

ilk websitem

Kodu Görüntüle


kopyala

<!DOCTYPE html>
<html>
<head>
<title>Benim Sitem</title>
</head>
<body>
<h1>Bu Benim İlk Web Sayfam</h1>
<p>Merhaba, kendi ellerimle kodunu yazmış olduğum, web sayfama hoşgeldiniz...</p>
</body>
</html>

Sizin web sayfasında gördüğünüz sadece bir başlık ve paragraf ama HTML kodunda bir sürü şey var.

Korkmayın…

Bunların hepsi anlaması çok basit ve bir kez anladığınızda kolay kolay unutmayacağınız şeyler.

HTML kodunu satır satır incelersek…


<!DOCTYPE> Bildirimi

İlk satırda <!DOCTYPE html> diye bir şey var.

<!DOCTYPE> her HTML sayfasının, ilk satırında bulunması gereken ve o dosyanın hangi versiyon HTML ile yazıldığını bildirmek için kullanılan koddur.

Daha önce de dediğim gibi biz HTML in son versiyonu olan HTML5 i kullanacağımız için bizim kodumuzun ilk satırında <!DOCTYPE> bildirimini yapmamız gerekiyor.

Eğer bu bildirimi yapmaz isek;

Tarayıcı bizim son versiyon olan HTML5 i kullandığımızı varsayarak, kodu HTML5 e göre okuyacak.

Baktığınızda sanki biz bu bildirimi yapmasakta olur gibi duruyor.

Ama iyi bir yazılımcı işini hiçbir zaman şansa bırakmaz.

Bu yüzden biz her halükarda doctype bildirimini kullanacağız.

<!DOCTYPE html> kodu ile HTML5 kullanacağımızı bildiriyoruz.


<HTML> Elementi

Bir web sayfasındaki her şey <html> elementinin içerisinde olmalıdır.

Bu nedenle web sayfamızının versiyonunu bildirdikten sonra yapmamız gereken şey;

Tüm sayfanın içeriğini <html> etiketleri içerisine almak.

Bu şekilde tarayıcıya, bizim sayfamız buradan başlıyor ve burada bitecek demiş oluyoruz.


<HEAD> elementi

<head> elementi, içerisindeki hiçbir şey sayfada görüntülenmez.

Sayfa ile ilgili ziyaretçilere değil de; tarayıcıya anlatmak istediklerimizi <head> etiketleri içerisinde yazıyoruz.

Sayfanın başlığını, stil dosyalarını, karakter setini, diğer kodların linklerini <head> etiketleri arasında yazarak, bu bilgileri web tarayıcıya aktarmış oluyoruz.


<TITLE> elementi

Web sayfasının başlığını <title> etiketleri içerisinde belirtiyoruz.

<title> etiketleri içerisine yazdığınız herşey, tarayıcının sekme bölümünde gözükür.

kopyala

<title>Benim Sitem</title>

title etiketi

Ayrıca ‘google’ gibi arama motorları, web sayfanızı arama sonuçlarında gösterirken, başlık olarak <title> etiketi içirisndeki içeriği kullanır.


<BODY> elementi

<body> elementi içerisindeki her şey, sayfada kullanıcı tarafından görüntülenir.

Yani, sayfada olmasını istediğimiz her şeyi bu element içerisine yazacağız.

<head> elementinden sonra <html> elementinin, ikinci elementidir.


<H1> elementi

Başlık elementlerinden biri olan <h1> elementi, bulunduğu web sayfasında, içeriğin en önemli başlığını temsil eder.

Toplamda 6 tane başlık elementi vardır.

Bunlar;

<h1> <h2> <h3> <h4> <h5> <h6> dir.

Sayfayı Görüntüle

başlık elementleri - H1-H2-H3-H4-H5-H6

Kodu Görüntüle


kopyala

<h1>H1 Elementi ile yazılmış başlık</h1>
<h2>H2 Elementi ile yazılmış başlık</h2>
<h3>H3 Elementi ile yazılmış başlık</h3>
<h4>H4 Elementi ile yazılmış başlık</h4>
<h5>H5 Elementi ile yazılmış başlık</h5>
<h6>H6 Elementi ile yazılmış başlık</h6>

<P> elementi

<p> elementi paragraf elementidir.

Ve.. Web sayfasındaki yazıları, paragraflara bölmek için kullanılır..

Aşağıdaki örnekte gördüğünüz gibi;

Eğer <p> elementi kullanmazsak, biz kod içerisinde paragraf yapsak bile, tarayıcı tek bir paragraf gibi gösterecektir.

<p> elementi kullanılmış:

Sayfayı Görüntüle

p elementi kullanılmış

Kodu Görüntüle


kopyala

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eos numquam nesciunt temporibus natus esse neque ea fugiat autem unde ipsum nisi odio iure consectetur error distinctio, qui repellat enim!</p>

<p>Quidem rem, adipisci quo maxime maiores voluptate ratione quos perspiciatis molestiae, eius ducimus, ipsam ipsum. Eius in voluptates harum sequi nobis molestias officiis reiciendis illo deleniti voluptate voluptatum commodi sint porro dolore incidunt, nulla quos veniam quas laboriosam maiores praesentium dignissimos.</p>



<p> elementi kullanılmamış:

Sayfayı Görüntüle

p elementi kullanılmamış

Kodu Görüntüle


kopyala

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eos numquam nesciunt temporibus natus esse neque ea fugiat autem unde ipsum nisi odio iure consectetur error distinctio, qui repellat enim!
Quidem rem, adipisci quo maxime maiores voluptate ratione quos perspiciatis molestiae, eius ducimus, ipsam ipsum. Eius in voluptates harum sequi nobis molestias officiis reiciendis illo deleniti voluptate voluptatum commodi sint porro dolore incidunt, nulla quos veniam quas laboriosam maiores praesentium dignissimos.


Eveeet…

Şimdiye kadar bir çok önemli şey öğrendiniz.

Aslında yazının başında verdiğim sözü çoktan gerçekleştirdim.

Size, ilk web sayfasınızı yapacaksınız demiştim.

Ve… Bir az önce HTML ile ilk web sayfanızı yapmış olduğunuz.

Ama… Ben bunu saymıyorum ve sizinle birlikte bir web sayfası daha yapacağız

Bu sefer, daha farklı elementleri kullanacağız.

Sayfamız bittiğinde aşağıdaki gibi gözükecek.

baştan sona sadece html ile website yapımı

Evet. Biliyorum…

Sayfamız biraz çirkin gözüküyor ve Bukalemunlar hakkında.

Ama merak etmeyin, daha sonra o CSS ile web sayfamızı mükemmel hale getireceğiz.

Şimdilik sadece odağımız HTML…Bukalemun falan dikkatinizi dağıtmasın 😉

Web sayfamızın kod kısmına geçmeden, sizlere bu kodları nasıl ve nerede yazacaksınız, biraz da bundan bahsetmek istiyorum.

Kod Editörleri

Öncelikle kodları nereye yazacağımızdan başlayalım.

Aslında kodlarımızı Not Defteri gibi her bilgisayarda olan, basit programlar ile yazabiliriz.

Örnek mi?… Buyrun…

not defteri ile kod yazma

Bir az önce ki kodun aynısını not defteri ile yazıp, dosyanın adını ‘benim-sitem.html’ olarak kaydedersek…

Dosyaya çift tıkladığımızda, tarayıcıda açacak ve site karşınıza çıkacak..

Ama kod yazmak için, size not defterinden çok daha iyi ve bu iş için yapılmış bir programı önereceğim.

ATOM KOD EDITORÜ

atom kod editörü

Buradan indirebilirsiniz.


Tabi ki başka kod editorleri de var ama benim kullandığım Atom…

O yüzden ben Atomu indirip kurmanızı tavsiye ederim.

Şimdi editorümüzü indirdiğimize göre kodumuzu yazmaya başlayabiliriz.

İstediğiniz bir yerde yeni bir klasör oluşturup, yeni metin belgesi oluşturuyoruz.

Yeni metin belgesi ile kodlama

yeni metin belgesi oluşturma

Yeni metin belgesinin ismini index.html olarak değiştiriyoruz.

index.html dosyası isimlendirme

Ve.. Çıkan soruya evet diyerek, dosyanın adını değiştiriyoruz.

Şimdi bu dosyaya çift tıkladığınızda, tarayıcı açılacak…

Karşınızda içi boş bir web sayfası…

index.html in tarayıcıda görüntülenmesi

Web sayfamız hazır şimdi, index.html dosyasını Atom kod editorü ile açıcağız ve başlayacağız kodlamaya…

atom ile kodlamaya başlama

index.html atom editörü ile açma

Buradan sonraki kodları direk olarak sitede yazacağım.

Ama siz atom üzerinden devam edebilirsiniz.


Sayfayı Görüntüle

html5 ile website yapımı

Kodu Görüntüle


kopyala

<!DOCTYPE html>
<html>
<head>
<title>Bukalemun Hakkında</title>
</head>
<body>
<h1>Bukalemun</h1>
<p>Bukalemun, sürüngenler sınıfının Chamaeleonidae; familyasından belli etmek istedikleri duygulara göre renk değiştirebilen, ;omurgalı hayvanlar ortak adı. Birçok yönden kertenkelelerden farklılıkları bulunduğundan, bazı bilim insanları kertenkeleleri Rhiptoglossa alt takımına dahil ederler.</p>
</body>
</html>

Şimdiye kadar öğrendiklerimizle buraya kadar ki kodu yazabilmemiz gerekiyor.

Ama hızlıca ben tekrardan üzerinde geçmek istiyorum.

<!DOCTYPE html> ile tarayıcya HTML5 kullanarak sayfamızın kodunu bildirmiş oluyoruz.

Sonrasında yine tarayıcıya, sayfamız hakkında bilgiler verebilmek için <head> elementini kullanıyoruz.

Sonrasında, hemen <head> elementi içerisinde, <title> elementi ile sayfamızın başlığını yazıyoruz.

Gerekli bilgileri tarayıcıya verdikten sonra sayfamızın asıl görünecek bölümüne geçebiliriz.

<body> elementi ile sayfamızın görünen yüzünü oluşturmaya başlıyoruz.

Bundan sonra, sayfa üzerinde görüntülenmesi istediğimiz tüm HTML kodlarını <body> açma ve kapama etiketleri içerisine yazacağız.

<h1> elementi içerisine başlığı yazdıktan sonra paragraf için <p> elementini kullanıyoruz.

Buraya kadar her şey güzel…

Şimdi sıra yeni elementlerde


<em> ve <strong> Elementi

Paragraf içerisinde istediğiniz kelimeleri italik ya da kalın olarak yazabiliriz.

Bunun için yeni HTML elementlerimizden <em> ve <strong> elementlerini kullanacağız.

Sayfayı Görüntüle

html5 ile website yapımı - em ve strong elementleri

Kodu Görüntüle


kopyala

<!DOCTYPE html>
<html>
<head>
<title>Bukalemun Hakkında</title>
</head>
<body>
<h1>Bukalemun</h1>
<p>Bukalemun, sürüngenler sınıfının <em>Chamaeleonidae</em> familyasından belli etmek istedikleri duygulara göre renk değiştirebilen, <strong>omurgalı hayvanlar</strong> ortak adı. Birçok yönden kertenkelelerden farklılıkları bulunduğundan, bazı bilim insanları kertenkeleleri <em>Rhiptoglossa</em> alt takımına dahil ederler.</p>
</body>
</html>

Yazı formatını değiştirmek istediğimiz kelimeleri, <strong> ve <em> gibi elementlerin açma ve kapama elementleri arasında alıyoruz.

Ve… Gerisini tarayıcı hallediyor.

Bu elementleri başka yerlerde de kullanarak nasıl çalıştığını iyice anlayabilirsiniz.

Kodlama öğrenmenin en iyi yollarından biri; yeni öğrendiğiniz şey ile kendiniz farklı şeyler yapmaya çalışmaktır.


<br> Elementi

Paragraf içerisinde satır başı yapmanız gerektiğinde ise <br> elementini kullanacağız.

<br> elemetinin şimdiye kadar öğrendiniz elementlerden farkı var.

Bu elementin kapama etiketi yok ve dolayısı ile içerisine alabileceği bir içerik de yok.

Tek yaptığı şey; yazıldığı yerden paragrafı keserek, yeni satır başı yapmak.

Sayfayı Görüntüle

html5 ile website yapımı - br elementi

Kodu Görüntüle


kopyala

<!DOCTYPE html>
<html>
<head>
<title>Bukalemun Hakkında</title>
</head>
<body>
<h1>Bukalemun</h1>
<p>Bukalemun, sürüngenler sınıfının <em>Chamaeleonidae</em> familyasından belli etmek istedikleri duygulara göre renk değiştirebilen, <strong>omurgalı hayvanlar</strong> ortak adı. <br>
Birçok yönden kertenkelelerden farklılıkları bulunduğundan, bazı bilim insanları kertenkeleleri <em>Rhiptoglossa</em> alt takımına dahil ederler.</p>
</body>
</html>


Sayfamızı oluşturmaya devam edersek,

Sıradaki şey; yeni bir başlık oluşturmak ama bu sefer <h1> elementi yerine, alt başlık yazmak için <h2> elementini kullanacağız.

Sayfayı Görüntüle

html5 ile website yapımı - h2 elementi

Kodu Görüntüle


kopyala

<!DOCTYPE html>
<html>
<head>
<title>Bukalemun Hakkında</title>
</head>
<body>
<h1>Bukalemun</h1>
<p>Bukalemun, sürüngenler sınıfının <em>Chamaeleonidae</em> familyasından belli etmek istedikleri duygulara göre renk değiştirebilen, <strong>omurgalı hayvanlar</strong> ortak adı. <br>
Birçok yönden kertenkelelerden farklılıkları bulunduğundan, bazı bilim insanları kertenkeleleri <em>Rhiptoglossa</em> alt takımına dahil ederler.</p>
<h2>Bilimsel Sınıflandırma</h2>
</body>
</html>


List Elementleri

Şimdi bukalemunların bilimsel sınıflandırmalarını bir listede göstermemiz gerekiyor.

Bunun için HTML’in liste elementlerinden <ul> ve <li> elementlerini kullanacağız.

Sayfayı Görüntüle

html5 ile website yapımı - ul ve li elementi

Kodu Görüntüle


kopyala

<!DOCTYPE html>
<html>
<head>
<title>Bukalemun Hakkında</title>
</head>
<body>
<h1>Bukalemun</h1>
<p>Bukalemun, sürüngenler sınıfının <em>Chamaeleonidae</em> familyasından belli etmek istedikleri duygulara göre renk değiştirebilen, <strong>omurgalı hayvanlar</strong> ortak adı. <br>
Birçok yönden kertenkelelerden farklılıkları bulunduğundan, bazı bilim insanları kertenkeleleri <em>Rhiptoglossa</em> alt takımına dahil ederler.</p>
<h2>Bilimsel Sınıflandırma</h2>
<ul>
<li>Alem : Hayvanlar</li>
<li>Şube : Kordalılar</li>
<li>Sınıf : Sürüngenler</li>
<li>Takım : Pullular</li>
<li>Alttakım : İguanalar</li>
<li>Familya : Bukalemungiller</li>
</ul>
</body>
</html>

Listemeleme olan <ul> elementi, listenin başladığı ve bittiği yeri belirleriz.

<li> elementi ile, her bir liste maddesini oluştururuz.

<li> elementini tek başına kullanmazsınız, yani <ul> elementi içerisinde olmak zorundadır.

Diğer bir listeme elementi ise <ol> elementidir.

<ol> elementi de aynı <ul> elementi gibi içerisinde <li> elementini kullanarak listeme yapmamızı sağlar.

<ul> elementi, sırasız listemeler için,

<ol> elementi, sıralı listemeler için kullanılır.

Sayfamıza devam edelim ve hemen size göstereyim <ul> ve <ol> elementleri arasındaki farkı

<ol> elementini kullanmadan önce sayfamızdaki diğer alt başlığı ve paragrafı <h2> ve <p> elementleri kullanarak yazalım.

Sayfayı Görüntüle

html5 ile website yapımı - ol elementi

Kodu Görüntüle


kopyala

<!DOCTYPE html>
<html>
<head>
<title>Bukalemun Hakkında</title>
</head>
<body>
<h1>Bukalemun</h1>
<p>Bukalemun, sürüngenler sınıfının <em>Chamaeleonidae</em> familyasından belli etmek istedikleri duygulara göre renk değiştirebilen, <strong>omurgalı hayvanlar</strong> ortak adı. <br>
Birçok yönden kertenkelelerden farklılıkları bulunduğundan, bazı bilim insanları kertenkeleleri <em>Rhiptoglossa</em> alt takımına dahil ederler.</p>
<h2>Bilimsel Sınıflandırma</h2>
<ul>
<li>Alem : Hayvanlar</li>
<li>Şube : Kordalılar</li>
<li>Sınıf : Sürüngenler</li>
<li>Takım : Pullular</li>
<li>Alttakım : İguanalar</li>
<li>Familya : Bukalemungiller</li>
</ul>
<h2>Özellikleri</h2>
<p>Chamaeleonidae familyasını diğer kertenkelelerden ayıran en önemli özellik, ayakların, dilin ve gözlerin alışılmadık biçimleri ve renk değiştirme özelliğidir. Vücutları yanlardan basıktır. Dilleri boylarının yaklaşık 1-1,5 katı uzunluğunda, hareketli ve yapışkandır .Bir jet uçağıyla kıyaslanırsa bukalemunların dilleri jet uçağına oranla 5 kat daha hızlıdır. Gözler bağımsız hareket eder, biri yukarı bakarken diğeri aşağıya bakabilir. Göz kapakları kalındır. Kolaylıkla renk değiştirirler. Derilerini sarı, yeşil tonları, kırmızı tonları, kestane rengi ve siyaha çevirebilirler, benekler, çizgiler oluşturabilirler. Uzunlukları 8–60 cm arasında değişse de genellikle 30 cm civarındadır. Çok yavaş yürürler. Ayakları ve kuyrukları dalları kavrayabilir.</p>
<h2>Cinsleri</h2>
<ol>
<li>Brookesia</li>
<li>Furcifer</li>
<li>Chamaeleo</li>
</ol>
</body>
</html>

Gördüğünüz gibi <ol> elementi ile listeme yaptığımızda, her maddenin başına sıralı olarak rakam veriyor.

Ama <ul> elementi kullandığınızda, maddelerin başına sadece nokta koyuyor ve herhangi bir sıralama yok.


<img> Elementi

Yavaş yavaş sayfamızın sonuna gelirken,

Bu yazıda sizlere bir de sayfanıza resim eklemeyi göstermek istiyorum.

Öncelikle <h3> başlık elementi ile yine alt başlğımızı atalım.

Hemen yeni elementimiz <img> elementi ile resmimizi sayfamıza ekleyelim.

Bunun için önce bir resim bulmamız gerekiyor.

Ben google’a bukalemun yazdım ve bir tane beğendiğim resmi bilgisayarıma indirdim.

Bu resmi web sayfanızın olduğu klasöre attıktan sonra ismini bukalemun.jpg olarak değiştirin.

img elementi

Resmimizi indirip, olması gereken yere koyduktan sonra,

Kodumuzu yazmaya başlıyoruz.

Sayfayı Görüntüle

html5 ile website yapımı - img elementi

Kodu Görüntüle


kopyala

<!DOCTYPE html>
<html>
<head>
<title>Bukalemun Hakkında</title>
</head>
<body>
<h1>Bukalemun</h1>
<p>Bukalemun, sürüngenler sınıfının <em>Chamaeleonidae</em> familyasından belli etmek istedikleri duygulara göre renk değiştirebilen, <strong>omurgalı hayvanlar</strong> ortak adı. <br>
Birçok yönden kertenkelelerden farklılıkları bulunduğundan, bazı bilim insanları kertenkeleleri <em>Rhiptoglossa</em> alt takımına dahil ederler.</p>
<h2>Bilimsel Sınıflandırma</h2>
<ul>
<li>Alem : Hayvanlar</li>
<li>Şube : Kordalılar</li>
<li>Sınıf : Sürüngenler</li>
<li>Takım : Pullular</li>
<li>Alttakım : İguanalar</li>
<li>Familya : Bukalemungiller</li>
</ul>
<h2>Özellikleri</h2>
<p>Chamaeleonidae familyasını diğer kertenkelelerden ayıran en önemli özellik, ayakların, dilin ve gözlerin alışılmadık biçimleri ve renk değiştirme özelliğidir. Vücutları yanlardan basıktır. Dilleri boylarının yaklaşık 1-1,5 katı uzunluğunda, hareketli ve yapışkandır .Bir jet uçağıyla kıyaslanırsa bukalemunların dilleri jet uçağına oranla 5 kat daha hızlıdır. Gözler bağımsız hareket eder, biri yukarı bakarken diğeri aşağıya bakabilir. Göz kapakları kalındır. Kolaylıkla renk değiştirirler. Derilerini sarı, yeşil tonları, kırmızı tonları, kestane rengi ve siyaha çevirebilirler, benekler, çizgiler oluşturabilirler. Uzunlukları 8–60 cm arasında değişse de genellikle 30 cm civarındadır. Çok yavaş yürürler. Ayakları ve kuyrukları dalları kavrayabilir.</p>
<h2>Cinsleri</h2>
<ol>
<li>Brookesia</li>
<li>Furcifer</li>
<li>Chamaeleo</li>
</ol>
<h3>Bukalemun Resimleri</h3>
<img src="bukalemun.jpg" alt="Bukalemun Resmi">
</body>
</html>

<img> elementinin açma etiketi içerisinde farkettiğiniz gibi farklı bir kod var.

Bu şekilde elementlerin açma etiketleri içerisine yazılan HTML kodlarına, o elementlerin niteliği (attributes) deniyor.

Daha detaylı olarak farklı yazılarda size anlatacağım html niteliklerini(attributes)…

Kısaca…

Bu kodlar ile o HTML elementine nitelik ekliyormuşuz gibi düşünülebilir.

Şimdi <img> açma etiketi içerisindeki <img src=”bukalemun.jpg”> kod ile, bu elemente hangi resmin görüntülenmesi gerektiğini belirtmiş oluyoruz.

Bu durumda, bukalemun.jpg bizim istediğimiz resim ve <img> elementi resmi görüntülüyor.

<img alt=”Bukalemun Resmi”> niteliği ise, eğer src ‘de belirtilen resim bulunamaz ise tarayıcı burada belirttiğiniz şeyi gösterir.

Nasıl mı?

img elementi alt text

Ayrıca bu nitelik, arama motorları tarafından fazlasıyla sevilir. Çünkü resminizin ne olduğunu bu nitelik sayesinde anlarlar.


Evet…

Sayfamızı bitirdik.

Ama henüz anlatmak istediklerim bitmedi…

Yorum Elementi

HTML kodları içersinde kendimiz için ya da yazmış olduğunuz kodun kolay okunabilmesi için notlar almamız gerekebilir.

Bu notlara HTML yorumları deniyor.

Bu yorumlar, tarayıcı tarafından gösterilmiyor ama kodu gören kişiler tarafından görüntülenebilir.

Sayfayı Görüntüle

yorum elementi

Kodu Görüntüle


kopyala

<h1>Bukalemun</h1>

<!-- Aşağıdaki kısımda bukalemunlar hakkında genel bilgi veriliyor. -->

<p>Bukalemun, sürüngenler sınıfının <em>Chamaeleonidae</em> familyasından belli etmek istedikleri duygulara göre renk değiştirebilen, <strong>omurgalı hayvanlar</strong> ortak adı. <br>
Birçok yönden kertenkelelerden farklılıkları bulunduğundan, bazı bilim insanları kertenkeleleri <em>Rhiptoglossa</em> alt takımına dahil ederler.</p>


<!– ve –> etiketleri arasındaki herşey yorum olarak kabul edilir ve ziyaretçi tarafından görünmez.

Yorumları genellikle, yazılımcılar kendilerine hatırlamalar yazmak için kullanır ama dediğim gibi sınır yok, yorum etiketleri içerisine istediğinizi yazabilirsiniz.


WhiteSpace ve Indentation

Bir sonraki önemli konulardan bir tanesi White Space yani boşluklar…

Kod yazarken ve okurken kolaylık sağlaması açısından her kodu aynı satıra yazmayız.

Satırbaşı yaparız, belli boşluklar bırakırız.

HTML de bize bu anlamda kolaylık sağlamak adına white space özelliğine sahip…

Yani HTML kuralları içerisinde istediğimiz yerde boşluk bırakabilir veya satır atlayabiliriz.

Hemen bir örnekle açıklayayım.

WhiteSpace Kullanılmış:

kopyala

<h1>Bukalemun</h1>
<p>Bukalemun, sürüngenler sınıfının <em>Chamaeleonidae</em> familyasından belli etmek istedikleri duygulara göre renk değiştirebilen, <strong>omurgalı hayvanlar</strong> ortak adı. <br>
Birçok yönden kertenkelelerden farklılıkları bulunduğundan, bazı bilim insanları kertenkeleleri <em>Rhiptoglossa</em> alt takımına dahil ederler.</p>
<h2>Bilimsel Sınıflandırma</h2>
<ul>
<li>Alem : Hayvanlar</li>
<li>Şube : Kordalılar</li>
<li>Sınıf : Sürüngenler</li>
<li>Takım : Pullular</li>
<li>Alttakım : İguanalar</li>
<li>Familya : Bukalemungiller</li>
</ul>
<h2>Özellikleri</h2>
<p>Chamaeleonidae familyasını diğer kertenkelelerden ayıran en önemli özellik, ayakların, dilin ve gözlerin alışılmadık biçimleri ve renk değiştirme özelliğidir. Vücutları yanlardan basıktır. Dilleri boylarının yaklaşık 1-1,5 katı uzunluğunda, hareketli ve yapışkandır .Bir jet uçağıyla kıyaslanırsa bukalemunların dilleri jet uçağına oranla 5 kat daha hızlıdır. Gözler bağımsız hareket eder, biri yukarı bakarken diğeri aşağıya bakabilir. Göz kapakları kalındır. Kolaylıkla renk değiştirirler. Derilerini sarı, yeşil tonları, kırmızı tonları, kestane rengi ve siyaha çevirebilirler, benekler, çizgiler oluşturabilirler. Uzunlukları 8–60 cm arasında değişse de genellikle 30 cm civarındadır. Çok yavaş yürürler. Ayakları ve kuyrukları dalları kavrayabilir.</p>
<h2>Cinsleri</h2>
<ol>
<li>Brookesia</li>
<li>Furcifer</li>
<li>Chamaeleo</li>
</ol>
<h3>Bukalemun Resimleri</h3>
<img src="bukalemun.jpg" alt="Bukalemun Resmi">

WhiteSpace Kullanılmamış:

kopyala

<h1>Bukalemun</h1> <p>Bukalemun, sürüngenler sınıfının <em>Chamaeleonidae</em> familyasından belli etmek istedikleri duygulara göre renk değiştirebilen, <strong>omurgalı hayvanlar</strong> ortak adı. <br> Birçok yönden kertenkelelerden farklılıkları bulunduğundan, bazı bilim insanları kertenkeleleri <em>Rhiptoglossa</em> alt takımına dahil ederler.</p> <h2>Bilimsel Sınıflandırma</h2> <ul> <li>Alem : Hayvanlar</li> <li>Şube :Kordalılar</li> <li>Sınıf : Sürüngenler</li> <li>Takım : Pullular</li> <li>Alttakım : İguanalar</li> <li>Familya : Bukalemungiller</li> <h2>Özellikleri</h2> <p>Chamaeleonidae familyasını diğer kertenkelelerden ayıran en önemli özellik, ayakların, dilin ve gözlerin alışılmadık biçimleri ve renk değiştirme özelliğidir. Vücutları yanlardan basıktır. Dilleri boylarının yaklaşık 1-1,5 katı uzunluğunda, hareketli ve yapışkandır .Bir jet uçağıyla kıyaslanırsa bukalemunların dilleri jet uçağına oranla 5 kat daha hızlıdır. Gözler bağımsız hareket eder, biri yukarı bakarken diğeri aşağıya bakabilir. Göz kapakları kalındır. Kolaylıkla renk değiştirirler. Derilerini sarı, yeşil tonları, kırmızı tonları, kestane rengi ve siyaha çevirebilirler, benekler, çizgiler oluşturabilirler. Uzunlukları 8–60 cm arasında değişse de genellikle 30 cm civarındadır. Çok yavaş yürürler. Ayakları ve kuyrukları dalları kavrayabilir.</p> <h2>Cinsleri</h2> <ol> <li>Brookesia</li> <li>Furcifer</li> <li>Chamaeleo</li> </ol> </ul> <h3>Bukalemun Resimleri</h3> <img src="bukalemun.jpg" alt="Bukalemun Resmi">

Gördüğünüz gibi eğer whitespace’i kullanmamış olsak, kodu okumak neredeyse imkansız…

Hemen bu aşamada whitespace ile ilgili bir diğer konu indentation

Aslında bu da whitespace ile alakalı yani whitespace sayesinde mümkün hale geliyor.

Indentation’da tek amaç, kodun daha okunur hale getirilmesi denilebilir.

Yine bir örnek göstereyim size ki daha net anlayın…

Indentation Kullanılmış:

kopyala

<h1>Bukalemun</h1>
<p>Bukalemun, sürüngenler sınıfının <em>Chamaeleonidae</em> familyasından belli etmek istedikleri duygulara göre renk değiştirebilen, <strong>omurgalı hayvanlar</strong> ortak adı. <br>
Birçok yönden kertenkelelerden farklılıkları bulunduğundan, bazı bilim insanları kertenkeleleri <em>Rhiptoglossa</em> alt takımına dahil ederler.</p>
<h2>Bilimsel Sınıflandırma</h2>
<ul>
<li>Alem : Hayvanlar</li>
<li>Şube : Kordalılar</li>
<li>Sınıf : Sürüngenler</li>
<li>Takım : Pullular</li>
<li>Alttakım : İguanalar</li>
<li>Familya : Bukalemungiller</li>
</ul>
<h2>Özellikleri</h2>
<p>Chamaeleonidae familyasını diğer kertenkelelerden ayıran en önemli özellik, ayakların, dilin ve gözlerin alışılmadık biçimleri ve renk değiştirme özelliğidir. Vücutları yanlardan basıktır. Dilleri boylarının yaklaşık 1-1,5 katı uzunluğunda, hareketli ve yapışkandır .Bir jet uçağıyla kıyaslanırsa bukalemunların dilleri jet uçağına oranla 5 kat daha hızlıdır. Gözler bağımsız hareket eder, biri yukarı bakarken diğeri aşağıya bakabilir. Göz kapakları kalındır. Kolaylıkla renk değiştirirler. Derilerini sarı, yeşil tonları, kırmızı tonları, kestane rengi ve siyaha çevirebilirler, benekler, çizgiler oluşturabilirler. Uzunlukları 8–60 cm arasında değişse de genellikle 30 cm civarındadır. Çok yavaş yürürler. Ayakları ve kuyrukları dalları kavrayabilir.</p>
<h2>Cinsleri</h2>
<ol>
<li>Brookesia</li>
<li>Furcifer</li>
<li>Chamaeleo</li>
</ol>
<h3>Bukalemun Resimleri</h3>
<img src="bukalemun.jpg" alt="Bukalemun Resmi">

Indentation Kullanılmamış:

kopyala

<h1>Bukalemun</h1>
<p>Bukalemun, sürüngenler sınıfının <em>Chamaeleonidae</em> familyasından belli etmek istedikleri duygulara göre renk değiştirebilen, <strong>omurgalı hayvanlar</strong> ortak adı. <br>
Birçok yönden kertenkelelerden farklılıkları bulunduğundan, bazı bilim insanları kertenkeleleri <em>Rhiptoglossa</em> alt takımına dahil ederler.</p>
<h2>Bilimsel Sınıflandırma</h2>
<ul>
<li>Alem : Hayvanlar</li>
<li>Şube : Kordalılar</li>
<li>Sınıf : Sürüngenler</li>
<li>Takım : Pullular</li>
<li>Alttakım : İguanalar</li>
<li>Familya : Bukalemungiller</li>
</ul>
<h2>Özellikleri</h2>
<p>Chamaeleonidae familyasını diğer kertenkelelerden ayıran en önemli özellik, ayakların, dilin ve gözlerin alışılmadık biçimleri ve renk değiştirme özelliğidir. Vücutları yanlardan basıktır. Dilleri boylarının yaklaşık 1-1,5 katı uzunluğunda, hareketli ve yapışkandır .Bir jet uçağıyla kıyaslanırsa bukalemunların dilleri jet uçağına oranla 5 kat daha hızlıdır. Gözler bağımsız hareket eder, biri yukarı bakarken diğeri aşağıya bakabilir. Göz kapakları kalındır. Kolaylıkla renk değiştirirler. Derilerini sarı, yeşil tonları, kırmızı tonları, kestane rengi ve siyaha çevirebilirler, benekler, çizgiler oluşturabilirler. Uzunlukları 8–60 cm arasında değişse de genellikle 30 cm civarındadır. Çok yavaş yürürler. Ayakları ve kuyrukları dalları kavrayabilir.</p>
<h2>Cinsleri</h2>
<ol>
<li>Brookesia</li>
<li>Furcifer</li>
<li>Chamaeleo</li>
</ol>
<h3>Bukalemun Resimleri</h3>
<img src="bukalemun.jpg" alt="Bukalemun Resmi">

Hangi elementin hangi element içerisinde yazıldığını anlamayı kolaylaştırmak adına indentation önemli bir konu

Tabi ki kullanıp, kullanmamak sizin seçiminiz..

Ama kullanmanızı tavsiye ederim.


Çooook uzun bir yazının artık sonuna geldik…

Anlamadığınız, daha detaylı anlatmamı istediğiniz, aklınıza takılan her türlü soruyu, görüşü aşağıdaki yorum kısmında yazabilirsiniz.

Hepinize iyi kodlamalar…