HTML Başlangıç Seviyesi Eğitimi

Bozkurt Hacker · 5 Eyl 2016

Selamun Aleyküm iyi forumlar, Bu konumda yazılı bır şekilde HTML hakkında bilgi vereceğim. Aklıma geldikçe konuyu düzenleyeceğim baska bir konu açmayacagım.

Not: Bazıları Alıntıdır.Bazıları kendı yazımımdır.

HTML'e GİRİŞ

HTML, Hyper Text Markup Language ifadesinden oluşturulmuş bir İngilizce kısaltmadır ve Türkçe'ye "Hiper Metin İşaretleme Dili" şeklinde çevrilebilir. Bir işaretleme dilinin temel işlevi, bir belge içindeki metnin yapısını, biçimini ve genel görünümünü tanımlayacak kuralları içermesi ve bunun uygulanmasına olanak vermesidir.

İşaretleme dilinin kuralları belgeye yüklendikten sonra doğal olarak belge, bu kuralları okuyup nasıl uygulayacağını bilen bir bilgisayar programı tarafından işlenmelidir. Burada oluşturulan HTML içerikleri tarayıcılar tarafından anlamlaştırılarak, gördüğümüz web sitelerinin temelini oluştururlar.

HTML öğrenebilmeniz için herhangi bir metin editörünü kullanmanız yeterlidir. Bu noktada size Sublime Text ve Notepad++ gibi başarılı metin editörlerini önerebilirim.(Şahsen Notepad++ Kullanıyorum Size de Notepad++ Öneriyorum). Bu editörler, HTML kodlarını yazarak bir web sitesi inşa etmek için kullanılır. Bunun dışında, görsel olarak da bir web sitesi oluşturmak mümkündür. Bunun için Microsoft Expression Web ve Adobe Dreamweaver araçlar kullanılabilir.

HTML dosyalarının çalıştırılması için oluşturduğunuz dosyaların sonuna .html uzantısı eklemeniz ve bir internet tarayıcısı üzerinde açmanız yeterli olacaktır. Böylelikle yazmış olduğunuz HTML kodları ile oluşturduğunuz web sitesini görüntüleyebilirsiniz.

HTML derslerine başlamadan önce, az önce anlattığımız olayı basit bir örnekle göstereyim:

Kod:

<html>
<head>
<met a charset="utf-8"> //arkadaslar met a bosluksuz forumda sansurlenıyor.
</head>
<body>
Hello World!
</body>
</html>

Oluşturduğunuz html dosyasına çift tıklayın ve favori web tarayıcınızda çalıştırın.

Bir HTML Belgesinin Yapısı

Bir HTML belgesi etiket dediğimiz bileşenlerden oluşur. HTML yapısındaki temel bileşen bir elemandır. Elemanları anlatmak için her gün gördüğünüz başlıklar, paragraflar, listeler birer elemandır. Etiketler kullanılarak bu elemanlar birbirinden ayrılarak mantıklı hale gelirler. HTML etiketleri yapısı ise çok basittir. < (küçüktür işareti) etiket ve > (büyüktür işareti) işaretiyle belirtilir. Örneğin, paragraf belirtmek için etiketini kullanırız. Paragraf etiketini kapatmak istediğimizdeyse < işareti sonrasında / işareti koymak yeterlidir.

Örneklemek gerekirse:

Kod:

<p> Turk Hack Team 2002 yılından bu yana aktif bir hack forumudur </p>

HTML dili büyük küçük ayrımı yapan bir dil değildir. Bir etiketi girerken büyük, küçük ya da bir kısmı büyük bir kısmı küçük girebilirsiniz (XHTML için durum farklıdır. Tüm etiketlerin küçük harflerle yazılması gerekir) ve bu herhangi bir değişime sebep olmaz. Ama HTML sayfası içindeki tüm kodların küçük harfle yazılması, yazılımcılar arasında kabul görmüş bir kuraldır. Dolayısıyla etiketleri küçük harfle yazmanız tavsiye edıyorum.

Bir HTML belgesi başlıca iki kısımdan oluşur:

HEAD metni
BODY metni

Baş metni, sayfaya ait başlıkla ilişkili ifadeleri içerir.

Gövde metni ise, HTML koduna ait asıl metni içerir. Bu metin:

Paragraflar
Listeler ve
Diğer elemanlardan oluşur

Genel olarak buraya kadar anlatılanları bir çatı altında toplayacak olursak:

Tüm HTML belgeleri tip deklerasyonu ile başlamak zorundadır: <! DOCTYPE html>
HTML belgeleri, <html> etiketi ile başlar ve </html> etiketi ile biter.
HTML belgesi içindeki görüntülenen kısım ise <body> ve </body> etiketleri arasında yer alır.

Şimdi basit bir HTML dosyası örneğini verelim:

Kod:

<!DOCTYPE html>
<html>
  <head>
    <title>Türk Hack Team//BozkurtHacker</title>
    <met a charset="utf-8">
  </head>
  <body>
    <h1>TURK HACK TEAM</h1>
    <P>2002-2016</p>
    <p>THT</p>
  </body>
</html>

Şimdilik ilk olarak DOCTYPE'ın ne olduğunu inceleyelim:

<!DOCTYPE> deklerasyonu

DOCTYPE deklerasyonu, web tarayıcıların bir web sitesini doğru bir şekilde göstermesini sağlamaktadır. Web üzerinde farklı belge tipleri bulunmaktadır bunlar ;

Kod:

HTML5
<!DOCTYPE html>

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Arkadaslar sımdılık bu kadar yazıyorum dedıgım gibi yarın sabah devam edeceğim 1. Part bu kadar olsun iyi forumlar, İyi geceler

En Temel HTML Etiket ve Anlamları

1)HTML etiketi
HTML etiketi, tarayıcınıza, dosyanın HTML kodu ile yüklenmiş bilgi içerdiğini bildirir. Dosya adındaki .html uzantısı ise bu dosyanın bir HTML belgesi olduğunu belirtir.

2)HEAD etiketi

Bir HTML belgesinin ilk kısmını belirler. İçinde TITLE elemanının bulunması zorunludur. Belgenin başlığını TITLE elemanı belirler.

Aşağıdaki örnekteki HTML kodunun HEAD kısmına bakalım:

Kod:

<html>
  <head>
     <title>BozkurtHacker // TurkHackTeam</title>
  </head> 
</html>

Buradaki <tıtle> ve </tıtle> ifadeleri arasındaki "BozkurtHacker // TurkHackTeam"ifadesi sayfanın başlıgı olarak goruntulenır.

3)MET A etiketi

met a etiketiyle sayfanızın bir tanımını yapabilir ve sayfa içeriğini uygun anahtar sözcüklerle tanımlayabilirsiniz.

Bazı önemli met a etiketleri ve açıklamaları şu şekildedir:

Keywords: Sitenizin içeriğini oluşturan kelimelerin bulunduğu etikettir.

Kod:

<html>
 <head>
  <title>BİLGİSAYAR DİLLERİ</title>
  <met a name="keywords" CONTENT="bilgisayar dilleri, programlama dilleri, yazılım">
 </head>
</html>

Description: Bu etiket site hakkında bilgi veren temel etiketlerden biridir.

Kod:

<html>
 <head>
  <title>BİLGİSAYAR DİLLERİ</title>
  <met a name="description" content="Sitenin içeriği hakkında geniş bilgi">
 </head>
</html>

Author: Site yapımcısının adı, iletişim bilgilerinin bulunduğu etikettir.

Kod:

<html>
 <head>
  <title>BİLGİSAYAR DİLLERİ</title>
  <met a name="Author" content="Adınız, E-Posta Adresiniz, Telefon Numaranız vs.">
 </head>
</html>

met a deyimi yardımıyla sayfanın karakter kümesini de tanımlayabilirsiniz.

Örneğimizi birlikte inceleyelim:

Kod:

<html>
 <head>
  <title>BİLGİSAYAR DİLLERİ</title>
  <met a http-equiv="Content-type" Content="Text/html";charset="UTF8">
 </head>
</html>

Tüm met a etiketleri <head> .. </head> kodları arasına yazılır.

BODY etiketi

HTML belgenizin ikinci ve en uzun parçası BODY kısmıdır. Belgenizin tüm içeriği burada yer alacaktır. Bir sonraki belgede açıklanan etiketlerin tümü BODY içinde yer alacaktır.

Body İçerisinde Yer Alan Temel HTML Etiketleri

1)Başlıklar (Headings)

HTML metni içinde H1 ile H6 aralığında ölçeklendirilmiş 6 farklı düzeyde başlık kullanılabilir. Burada H1 en büyük başlığı, H6 ise en küçük başlığı simgelemektedir.

Bir başlık elemanının genel yazılış biçimi,

Kod:

<Hx>Başlık Metni</Hx>

şeklindedir. Burada x, 1 ile 6 arasında bir tamsayıdır ve başlığın düzeyini belirlemektedir.

HTML kodunuz içinde başlık düzeylerini atlatmamaya dikkat ediniz. Örneğin H1 ile başlayıp daha sonra H4'ü kullanmayın. Düzeyler birbirini sırasıyla izlemesi, arama motorları tarafından daha iyi bir konumda endekslenmeniz için de önemlidir.

2)Paragraflar (Paragraphs)

Oluşturacağınız Web sayfası üzerine yerleştireceğiniz metni ayrı paragraflar şeklinde ifade etmek için

Kod:

<p>  ve </p>

etiketlerini kullanmalısınız.

Listeler (Lists)

HTML, çeşitli türlerde listelerin oluşturulabilmesine olanak sağlar. Bu liste türleri,

Numaralanmamış liste
Numaralanmış liste
Tanım listesi
şeklindedir.

*Numaralanmamış liste

Numaralanmamış listeyi oluşturmak için <ul> ve </ul> etiketleri kullanılır. Bu etiketler arasına liste elemanlarını yerleştirmek için <li> etiketi kullanılır. Bu etiketi izleyen yere liste elemanı yerleştirilmelidir. <li> etiketinin </li> etiketiyle kapatılması zorunlu değildir.

Örneğin, aşağıdaki HTML kodunu ornekleyelim:

Kod:

<html>
  <head>
    <title>BozkurtHacker // TurkHackTeam</title>
  </head>
  <body>
       <h3>Programlama Dilleri</h3>
        <ul>
         <li>Fortran</li>
         <li>Cobol</li>
         <li>Basic</li>
         <li>Pascal</li>
         <li>C/C++</li>
        </ul>
    </body>
  </html>

*Numaralanmış Listeler

Numaralanmış liste (numbered list ya da diğer adı ile ordered list (sıralanmış liste)) gerçekte numaralanmamış liste ile benzer yapıdadır. Tek fark, bu tip bir listede <ol> etiket 'ının kullanılmasıdır. Diğer bir fark ise çıktıda görülür. Liste elemanlarına otomatik olarak bir numara verilmektedir.

Aşağıdaki HTML kodunu inceleyiniz:

Kod:

<html>
  <head>
    <title>BozkurtHacker // TurkHackTeam</title>
  </head>
  <body>
       <h3>Programlama Dilleri</h3>
       <ol>
        <li>Fortran</li>
        <li>Cobol</li>
        <li>Basic</li>
        <li>Pascal</li>
        <li>C/C++</li>
       </ol>
    </body>
</html>

*İç İçe Listeler

Listeleri iç içe de kullanabilirsiniz. Hatta, tek bir liste kalemi içinde iç içe listeler içeren paragraflar da düzenleyebilirsiniz.

Örneğin, aşağıdaki HTML kodunda dıştaki liste elemanları şehirlerdir. Her şehre ait ilçeler ise liste elemanı içinde yeni bir liste düzenlenerek belirtilmiştir.

Kod:

<html>
  <head>
    <title>TÜRKİYE'DE BÜYÜK ŞEHİRLER VE İLÇELER</title>
  </head>
  <body>   
      <h3>TÜRKİYE-ŞEHİRLER</h3>
       <ul>
          <li>ISTANBUL'UN ÖNEMLİ İLÇELERİ</li>
              <ul>
                 <li>Fatih</li>
                 <li>Bakırköy</li>
                 <li>Kadıköy</li>
              </ul>
          <li>ANKARA'NIN ÖNEMLİ İLÇELERİ</li>
              <ul>
                <li>Çankaya</li>
                <li>Yenimahalle</li>
        </ul>
    </ul>
  </body>
</html>

Çok Kullanılan Body Etiketleri
1-<pre> etiketi

Sabit genişlikli bir yazıtipi içinde bir metin oluşturmak istediğiniz takdirde, HTML'in <pre> </pre> etiketini kullanabilirsiniz. pre terimi, İngilizce preformatted (önceden biçimlendirilmiş) sözcüğünden alınmıştır. Bu etiket ayrıca metin içindeki boşlukları, satır başlarını ve tab'ları da anlamlı hale getirir.

<pre> etiketi, width özelliğiyle birlikte kullanılarak bir satır içinde yer alabilecek en fazla karakter sayısı da belirlenebilir. <pre> </pre> etiketleri arasında hiperlinkler (hyperlink) kullanılabilir. Bununla birlikte, <pre></pre> etiketleri arasında, diğer etiketlerin kullanılmasından kaçınmak gerekir.

Aşağıdaki örnekte ülkeler ve nüfusları önceden belirlenmiş bir biçimde web sayfası üzerine yerleştirilmek isteniyor. HTML kodunda ilerde daha ayrıntılı olarak ele alacağımız hiperlink oluşturma ve bu bağlantı tıklandığı takdirde buna bağlı dosyayı ekranda görüntülemeyle ilişkili küçük bir örnek de yer almaktadır.

Aşağıdaki HTML kodu çağrılınca ekranda alt çizgili ve mavi renkte bir "DAHA FAZLA BİLGİ İÇİN" ifadesi belirecektir. Bu bir hiperlink'tir ve tıklandığında X.htm dosyası çağrılmaktadır.

<pre> etiketinin kullanımını hiperlink ile birlikte anlatan örnek:

Kod:

<html>
  <head>
  <**** charset="UTF-8">
  <title>ÜLKELER VE NÜFUSLARI</title>
  </head>
  
<body>   
    <h3>TÜRKİYE-ŞEHİRLER</h3>
    <h3>ÜLKELER VE NÜFUSLARI</h3>
<pre>
ÜLKE ADI       NÜFUSU (MİLYON KİŞİ)
TÜRKİYE           65  
AVUSTURYA         8
ABD               230
ALMANYA           80
<a href="X.htm">DAHA FAZLA BİLGİ İÇİN</a>
</pre>
</body>
</html>

fareyle DAHA FAZLA BİLGİ İÇİN hiperlinkini tıkladığınızda, X.htm adlı HTML dosyası çağırılacaktır.

2- etiketI

 etiketi, bulunduğu konumdan itibaren bir satırı sona erdirerek yeni bir satırın başına geçilmesini sağlar.

Aşağıdaki örnek kod incelenerek etiketinin kullanımı görülebilir:

Kod:

<html>
  <head>
  <**** charset="UTF-8">
  <title>ÜLKELER VE NÜFUSLARI</title>
    </head>
  <body>   
    <h3>ÜLKELER VE NÜFUSLARI</h3>
   <p>Avusturya 8 milyon nüfuslu bir Orta Avrupa <br>ülkesidir.
   Almanca resmi dilidir. Doğası itibariyle <br>dünyanın en güzel 
ülkelerinden biridir.</p>
  <p>Macaristan bir diğer Orta Avrupa <br>ülkesidir.
  Nüfusu 10 milyondur. Komşuları genelde dağlık <br>birer ülke 
olmalarına karşın Macaristan düz ovaları ve atlarıyla ünlüdür.</p>
    </body>
</html>

3-<hr> etiketi

<hr> etiketi, tarayıcı penceresinde yatay bir çizgi üretir. Bu çizginin uzunluğu kod içinde belirtilebilir.

<hr> etiketinin nasıl kullanacağına dair örnek:

Kod:

<html>
  <head>
  <**** charset="UTF-8">
  <title>ÜLKELER VE NÜFUSLARI</title>
    </head>
  <body>   
    <h3>ÜLKELER VE NÜFUSLARI</h3>
   <p><hr>
   Avusturya 8 milyon nüfuslu bir Orta Avrupa <br>ülkesidir.
   Almanca resmi dilidir. Doğası itibariyle <br>dünyanın en güzel 
ülkelerinden biridir.</p>
  <p><hr>
  Macaristan bir diğer Orta Avrupa <br>ülkesidir.
  Nüfusu 10 milyondur. Komşuları genelde dağlık <br>birer ülke 
olmalarına karşın Macaristan düz ovaları ve atlarıyla ünlüdür.</p>
 </body>
</html>

4- etiketi

Bir metnin istenilen kısmını belirgin hale getirmek için kullanılır. ve etiketleri arasındaki kısım tipik olarak italik biçimde görüntülenir.

 etiketinin nasıl kullanıldığına dair örnek:

Kod:

<html>
  <head>
  <**** charset="UTF-8">
  <title>ALGORİTMA TANIMI</title>
    </head>
  <body>   
    <dfn>ALGORİTMA </dfn>
    <p>Algoritma bir problemi çözmek için izlenmesi gereken<em> işlem adımları kümesidir.</em></p>
    </body>
</html>

5-<s> ve <strike> etiketleri

Uygulandıkları metnin üzerine bir çizgi çizilmesini sağlarlar.

<s> ve <strike> kullanımına dair örnek:

Kod:

<html>
  <head>
  <**** charset="UTF-8">
  <title></title>
    </head>
  <body>
    <h3> TEKNOKRATLAR </h3> 
     <s>Bütün mimarlar</s> yüksek, mühendisler de <br>
     Bir sen kaldın<strike> alçak mimar</strike> ey Sinan Usta!<br>
Cemal Süreya
    </body>
  </html>

6- etiketi

İşaret edilen metni özellikle vurgulamak için kullanılır. Bu vurgulama bold (koyu) yazı karakteriyle gerçekleştirilir.

 etiketinin kullanımına dair örnek:

Kod:

<html>
  <head>
  <**** charset="UTF-8">
  <title>ÖRNEKLER</title>
    </head>
  <body>
    <h3> DİVAN EDEBİYATI </h3> 
    <dfn>FUZULİ</dfn><br><br>
    <strong>Öyle sermestemki idrak etmezem dünya nedür<br>
            Men kimem saki olan kimdür mey-i sahbah nedür</strong>
    </body>
</html>

7- etiketi

İşaretlediği metnin altına bir alt çizgi çekilmesini sağlar.

 etiketinin nasıl kullanıldığına dair örnek:

Kod:

<html>
  <head>
  <**** charset="UTF-8">
  <title>ÖRNEKLER</title>
    </head>
  <body>
    <h3> ÖNCE <u>DÜRÜST</u> OLUNUZ </h3> 
     <h3>BUNUN DIŞINDAKİ <u>HER ŞEY İKİNCİ PLANDADIR</u> </h3> 
  </body>    
  </html>

--------------------------

Buda part2 nın sonu olsun arkadaslar. Devamını gece veya yarın yazmaya calısacagım.

TRCommando · 5 Eyl 2016

html öğrendimde aklıma gelmedi span etiket ine yapıyodu karde ş?

Bozkurt Hacker · 5 Eyl 2016

TRCommando' Alıntı:
html öğrendimde aklıma gelmedi span etiket ine yapıyodu karde ş?

etiketi isteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir katman oluşturulmasını sağlayan etikettir. İyi forumlar

Bozkurt Hacker · 5 Eyl 2016

//part2 yazılmıştır

Sneijderfurki · 5 Eyl 2016

dostum eline sağlık işe yarar bir bilgi .

Bozkurt Hacker · 5 Eyl 2016

Sneijderfurki' Alıntı:
dostum eline sağlık işe yarar bir bilgi .

Teşekkürler

HTML Başlangıç Seviyesi Eğitimi

Bozkurt Hacker

Katılımcı Üye

TRCommando

Katılımcı Üye

Bozkurt Hacker

Katılımcı Üye

Bozkurt Hacker

Katılımcı Üye

Sneijderfurki

Üye

Bozkurt Hacker

Katılımcı Üye

Sosyal medya sayfalarımız