HTML Nedir?
HTML'in açılımı Hyper Text Markup Language.
HTML dosyası bir text dosyası olmakla işaretlenme etiketleri vardır. (programlama dili değildir).
HTML dosyasının uzantısı .html ve ya .htm olmalıdır.
HTML dandik bir not defteri ile yazılabilir ama yazarken kolaylık olsun ve zaman kaybetmemek için editörler programlar kullanılabilir. visual studio, notepad++, sublimetext...
HTML İskeleti ve Görevleri
<html>
<head>
<title>Başlık yazılacak yer</title>
</head>
<body>
web sitemizin yayınlanacak kısmı
</body>
</html>
Türkçe karakter sıkınsıtı olabilir onun için <**** charset="utf-8" />
<head> içine yapıştırabilirsiniz. Türkçe karakterleri ? işareti yapıyor ne kadar işinize yarar bilmem ama **** kullanmadığınız zaman türkçe karakterlerde değişik harfler oluyor onun için kullanabilirsiniz.
<html> HTML dökümanını belirtir.
<head> Web sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır
<title> Sayfamızın başlığını bu kısma yazıyoruz.
<body> Sayfamızın yayınlanacağı kısım burası.
HTML Temel Etiketler
<h1>...</h1> 24 px yazar.
<h2>...</h2> 22 px yazar.
<h3>...</h3> 18 px yazar.
<h4>...</h4> 16 px yazar.
<h5>...</h5> 12 px yazar.
<h6>...</h6> 10 px yazar.
(başlık etiketi diye geçer)
Yorum Satırı Oluşturma
<!--Kodu etkilemeyecek-->
metni paragraf yazmak için <p>...</p> kullanabilirsiniz.
satır atlamak için <br> etiketi kullanabilirsiniz. (<br> etiketi kullanırken etiketi kapatmayın hata oluşabilir yani </br> olmayıcak)
yazıyı kalınlaştırmak için <b>..</b> ve ya <strong>..</strong> etiketi kullanabilirsiniz.
altı çizili metinler için <ins>...</ins> etiketini kullanabilirsiniz.
üstü çizili metinler için <del>...</del> etiketi kullanabilirsiniz
programlama dili metini için <code>...<code> etiketi kullanabilirsiniz.
klavye metini için <kbd> etiketi kullanabilirsiniz.
örnek bilgisayar kodu metni için <samp> etiketini kullanabilirsiniz.
teletip metini için <tt> etiketini kullanabilirsiniz.
biçimlendirilmemiş metin için <pre> etiketi kullanabilirsiniz.
yazının altını çizmek için <u>...</u> etiketi kullanabilirsiniz.
yazıyı italik hale getirmek için <i>...</i> kullababilirsiniz
yazıyı üst simge yapmak için <sup>...</sup> kullanabilirsiniz.
uzun alıntılar için <blockquote> kullanabilirsiniz.
yazıyı alt simge yapmak için <sub>...<sub> kullanabilirsiniz.
Sayfaya yatay bir çizgi çekmek için <hr> etiketi kullanabilirsiniz.
<font> Kullanıldığı yerdeki metinlerin renk, boyut, yazı tipi gibi özelliklerini değiştirmek için kullanılır. Size, color ve face parametreleri ile kullanılabilir. Bu parametrelerin üçünüde aynı anda kullanmak zorunda değiliz.
<font faze="comic sans ms">Yazının stili değiştirilmiş</font>
<font size="7px">Yazının büyüklüğü değiştirilmiş</font>
<font color="red">Yazının rengi değiştirilmiş</font> ve ya <font color="#0G54IY">Yazının rengi değiştirilmiş</font>
Metnin yerini vermek için <left>, <center>, <right> etiketini kullanabilirsiniz
Listeleme Etiketleri
<ol> Sıralı liste oluşturmak için kullanılır. Sıralı listelerden kastımız kelime ya da cümlelerinizi ya da herhangi bir şeyi numaralı, alfabetik, roma rakamlı olarak sıralı göstermektir.
<ul> Listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar, kareler yerleştirmek için kullanıyoruz.
<li> Yukarıda anlatmış olduğumuz <ol> ve <ul> etiketleri tek başına kullanılmaz sırayı belirtmek için de <li> imi ile birlikte kullanılır. Yani sıralanacak olan ifadenin başına <li> getirmeliyiz.
Bağlantı vermek, çapa atmak, bağlantılı sayfayı açılış şeklini belirmeleme
Mesela bir sayfaya bağlantı verdiniz a sitesinden b sitesine gitmek istiyorsunuz onun için <a href="www.habbocuyum.xyz>tıklanılacak metin</a> kullanabilirsiniz.
Mesela aynı sayfada aşağı ya da yukarı gitmesini istiyorsunuz asansör sistemi gibi düşünün bir tuşa bastığınızda hangi kata gideceğinizi belirler bunun için ise <a href="#iletisim">İletişim</a> tıklayacağımız yeri ayarladık <a name="iletisim"></a> gideceğimiz yeri ayarladık
Bağladığımız siteyi ayrı sayfada ya da aynı sayfada açılması için <target> etiketini kullanıyoruz (bu sadece ayrı siteye gidecekler için iyi olur)
target="_blank" Bağlantı yeni bir pencerede açılır.
target="_self" Bağlantı aynı pencere içerisinde açılır.
target="_top" Bağlantı aynı pencere içerisinde en üstten itibaren açılır.
target="_parent" Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
target="çerçeve adı" Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar.
Tablo Etiketleri
Tablo oluşturmak için bu etiket açılmak zorundadır. Tablonun düzenli gözükmesi için kullanılan parametreler vardır.(<table></table> etiketi)
<tr> Tabloda satır oluşturmayı sağlar.
<td> Tabloda sütun oluşturmayı sağlar.
border Hücrelerin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.
<thead> Tablo başlığı
<tbody> Tablo gövdesi
caption Tablonun alt veya üst kısımlarında açıklamalar yapmak için kullanılır.
<th> Tablo içindeki sütun başlıkları için kullanılır.
width Tablonun pixel cinsinden genişliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul genişliği tablonuza otomatik olarak atayacaktır.
height Tablonun pixel cinsinden yüksekliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul yüksekliği tablonuza otomatik olarak atayacaktır.
colspan Aynı satırdaki hücreleri birleştirmek için kullanılır.
rowspan Aynı sütundaki hücreleri birleştirmek için kullanılır.
cellspacing Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını, pixel cinsinden ayarlar.
cellpadding Cellpadding değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi ayarlar.
Form Etiketleri
<form> Bir form oluşturmak için <form>…</form> etiketleri arasına istenilen kontroller input etiketi sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği form etiketinin içinde gösterilir.
<input> Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlar.
<checkbox> Formumuza onay kutuları eklemek için kullanılır.
<radio> Kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine olanak tanır.
<text> Kullanıcıdan tek satırlık veri alınmasına olanak tanır. Size ve maxlength takıları, bu kontrolle birlikte kullanılabilir.
<image> Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar.
<password> Formumuza parola yazılabilecek alan eklemek için kullanılır.
<textarea> Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek alan eklemek için kullanılır.
<reset> Tıklandığında form içeriğini temizler. Kullanıcının formu tekrar doldurmasını sağlar.
<submit> Form içeriğini sunucuya yollar.
Çerçeve Etiketleri
<frameset> Çerçeve oluşturmada kullandığımız etikettir.
<frame> <frameset> ile çerçeveleri böldükten sonra içlerine konulacak sayfaları tanımlama işi <frame> elemanı ile yapılır. Bu etiket ile kullanılan parametreler aşağıdaki tabloda verilmiştir.
resim eklemek için <img src=""> kullanabilirsiniz.
arka plana renk vermek için <body bgcolor="red"> veya <body bgcolor="#0846645"> kullanabilirsiniz.
arka plana resim eklemek için <body background=""> kullanabilirsiniz.
stil şablonları var yani css. Css dosyaları 3'e ayrılıyor; Yerel şablon, Genel şablon ve Harici şablon. Yerel stil şablonu <body> etiketinin içine yazılır. Genel stil şablonu <head> etiketinin içine ********* yazılır. Harici stil şablonu ise <head> etiketinin içine <link> etiketinini kullanırız
Css konusuna sonra gelicem eğer eksiğim, beğenmediğiniz yer merak ettiğiniz kısım olursa bana bildirirseniz sevinirim.
İyi Çalışmalar!
resim eklemek için <img src=""> kullanabilirsiniz.
arka plana renk vermek için <body bgcolor="red"> veya <body bgcolor="#0846645"> kullanabilirsiniz.
arka plana resim eklemek için <body bacground=""> kullanabilirsiniz.