Notes
Notes - notes.io |
HTML, web sayfaları oluştururken kullanılan bir işaretleme dilidir. İngilizce adıyla, "Hyper-text Markup Language", Türkçe adıyla "Hiper Metin İşaretleme Dili"nin kısaltmasıdır.
Bir web sayfasına girildiğinde, son kullanıcının gördüğü her zaman HTML çıktısıdır. Onun daha güzel ve düzenli görünmesini sağlayan CSS, daha dinamik bir yapıda kullanılmasını sağlayan ise JavaScripttir.
! UNUTMAYIN
Web tarayıcıları, HTML etiketlerini göstermez ancak sayfaların içeriklerini oluşturmak için bu etiketleri kullanır. Bu yüzden kurallarına uygun HTML yazmak, hem tarayıcıların kodlarınızı yorumlamasını kolaylaştırır hem de arama motoru dostu sayfalar oluşturmanızı sağlar.
Örnek vermek gerekirse;
<!DOCTYPE html>
<html>
<head>
<title>Başlık</title>
<meta charset="UTF-8">
</head>
<body>
içerik..
</body>
</html>
ÖRNEĞİN AÇIKLAMASI;
<!DOCTYPE> tanımı, HTML sayfası yorumlanırken HTML'in hangi sürümüyle yorumlanması gerektiğini belirlemek için kullanılır. Bu örnekte biz son sürüm olan HTML5'i kullandık.
<html> etiketi, HTML'in en temel etiketidir ve diğer tüm etiketleri kapsar.
<head> etiketi, sayfa hakkında üst bilgiler içerir. Yani kullanıcı bir web sayfasına girdiğinde göremeyeceği ancak arka planda yüklenip işleyişi devam ettirecek bilgileri içerir. Bunların ilk örneği olan <title> etiketini yazarak sayfanın başlığını belirledik.
<title> etiketi, sayfanın başlığını belirlemek için kullanılır ve <head> etiketi içerisinde yer alır.
<meta> etiketi, web sayfalarında üst bilgi belirtmek için kullanılır. Bu örnekte, sayfanın karakter kodlamasını belirttik.
<body> etiketi, görünecek olan tüm yazı ve etiketleri içinde barındırır. Yani bir web sayfası açıldığında, body içerisindekiler son kullanıcıya gösterilir.
Etiketin sonu </> ile kapanmayan etiketler <img> <br> <hr> <meta> vb.
ÖRNEK bir HTML etiketini inceleyelim;
<b>Kalın Yazı</b>
Bu örnekte, <b> içerisindeki ifade kalın yazılacaktır
-------------------------------------------------------------------------------------------------------------------------
#HTML'de Başlıklar
Başlıklar <h1> ile <h6> etiketleri arasında tanımlanır.
<h1> en önemli başlıklar için, <h6> daha az öneme sahip başlıklar için kullanılır.
Örnek vermek gerekirse;
<h1>Başlık Örneği</h1>
<h2>Başlık Örneği</h2>
<h3>Başlık Örneği</h3>
<h4>Başlık Örneği</h4>
<h5>Başlık Örneği</h5>
<h6>Başlık Örneği</h6>
Paragraflar için <p> etiketi kullanılır.
Örnek vermek gerekirse;
<p>Bu bir paragraf örneğidir.</p>
-------------------------------------------------------------------------------------------------------------------------
#HTML'de Bağlantılar
HTML'de bir adrese bağlantı verirken <a> etiketi kullanılır. Bu örnekte href bağlantıya tıklandığında gidilecek adresi belirlemek için kullanılır. Nitelikler, HTML etiketleri hakkında daha fazla bilgiyi belirlemek için kullanılır.
Örnek vermek gerekirse;
<a href="https://google.com">Google 'ı ziyaret et</a>
HTML'de resimleri göstermek için <img> etiket kullanılır. Hatırlarsanız, bazı etiketlerin kendi kendine kapandığından bahsetmiştik, bu etiket onlara bir örnektir. Ve nitelikler olmadan, <img> etiketi hiçbir şey göstermez.
<img> etiketinde resim yolunu belirlemek için src="", resim yoksa gözükecek alternatif yazı için alt="", genişlik ve yüksekliği ayarlamak için width="" ve height="", üzerine gelince açıklama çıkartmak için title="" niteliği kullanılır. Hepsini bir araya toplayıp test edecek olursak;
<img src="test.png" alt="Resim yoksa gözükür" title="Bu başlık üzerine gelince gözükür sadece" width="300" height="200">
-------------------------------------------------------------------------------------------------------------------------
#HTML'de Listeler
HTML'de listeler <ul> ve <ol> etiketleri arasında <li> içerisinde tanımlanır.
Örnek vermek gerekirse;
<ul>
<li>SU</li>
<li>GAZOZ</li>
<li>PORTAKAL</li>
</ul>
<ol>
<li>SU</li>
<li>GAZOZ</li>
<li>PORTAKAL</li>
</ol>
<ol> etiketi sırasız <ul> etiketi sıralı etikettir
-------------------------------------------------------------------------------------------------------------------------
#HTML'de Başlık Etiketleri
HTML'de başlık etiketlerini kullanmak çok önemlidir. Çünkü arama motorları (google, bing, yandex, yahoo vb.) web sitelerine girip tarama işlemi yaparlar ve onlarda yorumlarken bu etiketleri kullanırlar. Bu yüzden önemli başlıkların <h1> ile etiketlenmesi, daha az öneme sahip olanların ise h2,h3,h4,h5,h6 şeklinde gitmesi gerekir.
Başlık etiketleri <h1> ile <h6> arasında tanımlanırlar. <h1> çok önemli başlıklar için, <h6> ise en az öneme sahip başlıklar için kullanılır.
-------------------------------------------------------------------------------------------------------------------------
#HTML'de Paragraf Etiketleri
HTML'de paragraflar <p> etiketi ile işaretlenir.
Örnek vermek gerekirse;
<p>Bu bir paragraftır.</p>
Paragraf etiketi içerisindeki metinlerin yazdığınız gibi birebir aynı görünmeme durumları olabilir.
Örnek vermek gerekirse;
<p>Bu b ir paragraf y a z ısıdır</p>
Tarayıcıda görünümü;
Bu bir paragraf yazısıdır
-------------------------------------------------------------------------------------------------------------------------
#HTML'de <br> Etiketi
<br> etiketi kendiliğinden kapanan etiket türüne bir örnektir. Ve bu etiket satır sonunu belirtmek için kullanılır. Örneğin alt alta iki ifade yazacaksınız, bir sonrakinin alttan başlamasını belirtmek için satır sonu etiketini yani <br> yi kullanıcam.
Örnek vermek gerekirse;
<p>
Bu bir pararaf <br>
yazısıdır
</p>
Tarayıcıda görünümü;
Bu bir paragraf
yazısıdır
-------------------------------------------------------------------------------------------------------------------------
#HTML'de <pre> Etiketi
<pre> etiket, önceden formatlı olan metinleri işaretlemek için kullanılır. Yukarıda paragraf için verdiğimiz örneğin aynısın <pre> etiketi için verecek olursak;
<pre>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı
1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış,
aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.
1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda
Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık
yazılımları ile popüler olmuştur.</pre>
Tarayıcı görünümü;
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı
1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış,
aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.
1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda
Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık
yazılımları ile popüler olmuştur.
NOT:Eğer <p></p> etiketleri arasında yazılsaydı boşluklar olmazdı.
-------------------------------------------------------------------------------------------------------------------------
#HTML'de Metin Biçimlendirme Etiketleri
HTML'in ifadeleri biçimlendirmek yani onlara yeni stiller katmak için belli başlı etiketleri vardır. Bunların listesi;
<b> - Kalın yazı
<strong> - Önemli yazı
<i> - Eğik yazı
<em> - Vurgulanmış yazı
<mark> - İşaretli yazı (Kitap okurken önemli bir yerin üstünü sarı kalemle çizerdik, tam olarak bu ^^)
<small> - Küçük yazı (Büyük harfle bile yazılsa normal yazıdan daha küçük görünür)
<del> - Silinmiş yazı (Silinmiş yazının ne işi var demeyin, örneğin ürünün fiyatı değiştiğinde üstünü çizip yeni fiyatını yazarlar, buda o mantıkta)
<ins> - Eklenmiş yazı {altını çizer}
<sub> - Alt simge yazı
<sup> - Üst simge yazı
Örnek vermek gerekirse;
<p>
Bu bir <b>kalın</b> yazıdır bu ise <strong>önemli bir kalın yazıdır.</strong> <br>
Bu bir <i>eğik yazıdır</i> bu ise <em>vurgulanan bir yazıdır.</em> <br>
Bu <mark>işaretlenmiş yazı</mark>, burası <small>KÜÇÜK GÖRÜNEN</small> YAZIDIR. <br>
Bu artık <del>silinmiş</del> bu ise <ins>yeni eklenmiş</ins> yazı örneği :) <br>
Ve son olarak alt simge H<sub>2</sub>O ve m<sup>2</sup> örnekleri verilebilir.
</p>
-------------------------------------------------------------------------------------------------------------------------
#HTML'de <b> ve <strong> Etiketleri
Her iki etikette görünürde yazıyı kalınlaştırır. Birbirlerinden farkı ise, <b> etiket yazıyı sadece kalınlaştırır, <strong> etiketi yazıyı hem kalınlaştırır hemde tarayıcılar tarafından yorumlanırken o yazının önemli bir yazı olduğunu belirtir.
#HTML'de <i> ve <em> Etiketleri
Her iki etikette yazının eğik görünmesi için kullanılır. Birbirlerinden farkı ise, <i> etiketi yazıyı sadece eğik gösterir, <em> etiketi yazıyı hem eğik gösterir hemde tarayıcılar tarafından yorumlanırken o yazının vurgulandığını belirtir.
#HTML'de <small> Etiketi
<small> etiketi bir yazıyı görünenden daha küçük yazmak için kullanılır. Hatta yazı büyük harfle bile yazılmış olsa bu etiket içerisindeki yazılar diğer harflerden daha küçük görünür
#HTML'de <mark> Etiketi
Bir şeyleri okurken üstünü sarı kalemle çizerdik ya, işte bunu HTML'de <mark> etiketi ile yapıyoruz.
#HTML'de <del> Etiketi
Silinmiş yazıları <del> etiketi ile işaretliyoruz. Gerçek hayattan örnek vermek gerekirse, etiket fiyatı değişen ürünlerde fiyatın üstünü çizip yanına yeni fiyatını yazardık. Silme işlemini bu etiketle yapıyoruz.
#HTML'de <ins> Etiketi
<del> ile silinen yazıların yenisini eklerken <ins> etiketi kullanılır.
#HTML'de <sub> Etiketi
Yazıyı alt simge olarak belirlemek için bu etiket kullanılır. Örneğin H2O derken 2 değerini alt simge olarak belirlersek doğru bir kullanım olur.
#HTML'de <sup> Etiketi
Yazıyı üst simge olarak belirlemek için bu etiket kullanılır.
-------------------------------------------------------------------------------------------------------------------------
#HTML'de Alıntı Etiketleri
HTML'de yazıları alıntı olarak işaretlemek için iki farklı etiket kullanılıyor. Bunların birisi <q> bir diğeri ise <blockquote> etiketleridir. Bu etiketler yardımıyla web sayfanız içinde bulunan ancak sizin yazmadığınız bir başkasına ait yazıları alıntı olarak gösterebilirsiniz.
#HTML'de <q> Etiketi
Bu etiket genelde iki tırnak işaretlemek için kullanılır. Örnek vermek gerekirse;
<p>
Mustafa Kemal Atatürk der ki; <q>En büyük savaş cahilliğe karşı yapılan savaştır.</q>
</p>
!!!UNUTMADAN
Bu etiket kullanıldığında tarayıcılar otomatik olarak tırnak işaretlerini ekleyecektir.
#HTML'de <blockquote> Etiketi
Bu etikette yine aynı şekilde alıntı olarak işaretlemek için kullanılır. Diğerinden farkı daha uzun alıntılar için kullanılmasıdır.
Örnek vermek gerekirse;
<p>Wikipedia'ya göre HTML'in tanımı;</p>
<blockquote cite="https://tr.wikipedia.org/wiki/HTML">
Hiper Metin İşaretleme Dili web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5'tir. HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz.
</blockquote>
-------------------------------------------------------------------------------------------------------------------------
#HTML'de <abbr> Etiketi
Bu etiket ile kısaltmaları işaretleyip uzun isimlerini belirtiyoruz. Böylece arama motorları sitemize girdiklerinde daha çok bilgi vermiş oluyoruz.
Örnek vermek gerekirse;
<p>
<abbr title="Hyper Text Markup Language">HTML</abbr> bir işaretleme dilidir.
</p>
NOT;Yani abbr etiketi title yazısının içerisine yazılan yazıyı açıklar
#HTML'de <address> Etiketi
Bu etiket web sayfasında ya da makalede iletişim bilgilerini tanımlamak için kullanılır. Örneğin makalenin yazarının detayları ya da bir işletme web sayfası ise iş yerinin adresi vs. gibi bilgiler tanımlanır.
Örnek vermek gerekirse;
<address>
Tayfun Erbilen tarafından yazıldı. <br>
Bloğunu takip edin: erbilen.net <br>
Şeker mh. turanbey sk. No: 5 Eskişehir/Türkiye
</address>
HTML'de <cite> Etiketi
Bu etiket bir çalışmanın başlığını temsil eder. Örneğin kitabın yazarını, şarkıyı söyleyeni, web sitesinin sahibini gibi.
Örnek vermek gerekirse;
<p><cite>Tayfun Erbilen</cite> tarafından 07 mayıs 2019'da yeniden kuruldu.</p>
#HTML'de <bdo> Etiketi
Bu etiket yazının tam tersine görünmesini sağlar. Örnek vermek gerekirse;
<bdo dir="rtl">kecenürög netsret ızay uB</bdo>
Tarayıcıda görünümü;
Bu yazı tersten görünecek
-------------------------------------------------------------------------------------------------------------------------
#HTML'de Yorum Satırları
Yorum satırları genelde kodu yazan kişinin kendisine hatırlatma amaçlı yazdıkları bloklardır. Çünkü yorum satırları son kullanıcıya gözükmez, sadece sayfanın kaynağına bakılırsa görülebilir. Bu nedenle yazılan yorumlarında herkes tarafından okunabileceğini unutmayın.
Tanımlanırken <!-- ile başlayıp --> ile biten satırlar arasına gelen her şey yorum olarak algılanır. Örnek vermek gerekirse;
<!-- yorum buraya gelecek -->
<!--
çok satırlı
yorum örneği
hatta <b>html kod</b> örneği
-->
Yukarıdaki örnekte yorum satırı içerisinde html etiketi bile olsa gözükmeyecektir. Tarayıcıda sağ tık yapıp sayfa kaynağını göster diyerek yorum satırlarını görebilirsiniz.
-------------------------------------------------------------------------------------------------------------------------
#HTML'de Bağlantılar (Linkler)
Web sayfanızda bir yazıya tıklandığında başka bir web sitesine, başka bir sayfaya ya da başka bir dosyaya göndermek isterseniz bir bağlantı oluşturmanız gerekir. Bu bağlantıyıda html'de <a> etiketi ile oluşturuyoruz.
Örnek vermek gerekirse;
<a href="https://google.com">Google'a git</a>
#HTML'de target Niteliği
href dışında birde target niteliği var. Bu nitelik ile bağlantının nasıl açılacağını belirliyoruz. Değer olarak aşağıdakilerden birisini almak zorunda;
_self - varsayılan değer budur, mevcut sayfada açar.
_blank - bağlantıyı yeni sayfada açar.
iframe - çerçeve oluşturur.
iframe name - bağlantıyı belirlenen iframe çerçevesi içerisinde açar.
frameborder - çerçeveye sınırlar ekler
Örneğin yeni sayfada açılacak bir bağlantı oluşturalım.
<a href="https://google.com" target="_blank">Google</a>
Tıklandığında Google yeni sekmede açacaktır. Birde iframe çerçevesi içerisinde açtırmak var.
Örnek vermek gerekirse;
<p>
Google açmak için <a href="https://google.com" target="browser">tıklayın!</a>
</p>
<iframe name="browser" width="600" height="300"></iframe>
#Resimlere Bağlantı Vermek
Örnek vermek gerekirse;
<a href="https://google.com">
<img src="google.png">
</a>
---->
Aynı zamanda bu şekildede yapılabilir;
<a href="https://google.com"><img src="google.png"></a>
#Belge İçerisinde Bağlantı Vermek
Kitapların başlarında bir liste olur, neyin hangi sayfada olduğunu gösteren. Örneğin 3. bölüme geçmek için 40. sayfaya gitmek gerekir. Burada bağlantıyı 40. sayfaya göre ayarlayıp basıldığında gitmek mümkün. Gerçek hayata uyarlarsak tam olarak bunu yapıyor :)
Örnek vermek gerekirse;
<p>
<div id="anamenu"></div>
<a href="#bolum1">1.Bölüme git</a><br/>
<a href="#bolum2">2.Bölüme gir</a><br/>
</p>
<div id="bolum1">
<p>
<strong>1.Bölüm</strong>
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
</div>
<div id="bolum2">
<p>
<strong>2.Bölüm</strong>
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
<p>
text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text
</p>
</div>
<a href="#anamenu">ANA MENÜYE DÖN</a>
!!!!!!!UNUTMADAN;
Ana menü oluşturmak için a href sona yazdık yazının gözükmesi için en üstede <div id="anamenu"></div> bu şekilde yaptık ve linke tıklandığı zaman {anamenu} adındaki div etiketine yönlendirildik.
-------------------------------------------------------------------------------------------------------------------------
#HTML'de Görüntüler (Resimler)
HTML'de görüntüler <img> etiketi ile tanımlanır. <img> etiket niteliksiz bir anlam ifade etmez ve kendi kendine kapanan bir etiket türüne örnektir. Gelin bir yapısını inceleyelim.
<img src="URL ya da Görsel">
Burada URL kısmına resmin adresi gelecek.
Örnek vermek gerekirse;
<img src="https://prototurk.com/upload/img/ataturk.jpg">
#alt Niteliği
Bu nitelik, gösterilmek istenen görüntüde bir problem olduğunda ve bir şekilde görüntülenemediğinde alternatif olarak resmi tarif eden bir ifadeyi temsil etmektedir.
Örnek vermek gerekirse;
<img src="örnek.png" alt="örnek bir resim">
#width ve height Nitelikleri
Resmin genişliğini ve yüksekliğini belirlemek için width ve height nitelikleri kullanılır.
Örnek vermek gerekirse;
<img src="örnek.png" alt="örnek bir resim" width="120" height="80">
Burada genişliği 120px yüksekliği 80px olarak görüntüyü ayarladık. width ve height değerlerine girilen değer sayı olmalı ve her zaman px cinsinden yorumlanmaktadır.
!!!!! #HTML'de <map> Etiketi
<map> etiketi ile resim üzerinde belli noktaları işaretleyerek bağlantı verebiliyoruz.
Örnek vermek gerekirse;
<img src="örnek.png" alt="örnek resim" usemap="#ornek">
<map name="ornek">
<area shape="rect ya da circle" coords="0, 0, 0, 0," href="http://www.ornek.com" alt="ornek"
</map>
Burada dikkat edilmesi gereken nokta, <img> etiketinde usemap="#ornek" kullandık. ornek değeri <map> etiketinde name niteliğine eşit unutmayın. Daha sonra <map> etiketinde işaretlemeye başladık. İşaretlemek için <area> etiketini kullandık.
<area> etiketinde önce şekli belirtmek için shape="rect" dedik yani burada şekli dikdörtgen belirledik. Daha sonra coords="" diyerek koordinatlarını verdik
kordinat vermek için resmi painte atıyoruz ve eğer dikdörtgen olucak ise ilk önce sol en üst köşesi, sonrada sağ en alt köşesi kordinatları yazmak için mouse getirdikten sonra sol alt köşeye bakmak
Daire için kordinatlar,
ilk önce dairenin içten üst kısmı,ortası ve sonrada dairenin dışından en üst kısmının kordinatları AMA !!!!!! ilk aldığımız kordinat soldaki olan 2. ve 3. kordinatlar sağdaki verilen kordinatlar
-------------------------------------------------------------------------------------------------------------------------
#HTML'de Tablolar
Tablolar, satır ve sütunlardan oluşur. Ayrıca tablonun header'ı yani başlıklarının olduğu kısım, içerik kısmı ve footer dediğimiz alt kısmı bulunur. Tabi bunların HTML'de her birisinin etiket karşılığı vardır.
Örnek vermek gerekirse;
<table border="1" width="100%" height="35">
<tbody>
<tr>
<td>Ali Şahin</td>
<td>16/td>
</tr>
<tr>
<th>Mert Pişirici</td>
<th>12</td>
</tr>
</tbody>
</table>
Şimdi tahmin edebileceğiniz üzere <table> etiketi burada tabloyu temsil ediyor bu arada border="1 ya da 0" tablonun çizgilerini belirlemek için kullanılıyor.<tbody> etiketi HTML tablosunun gövde içeriğini gruplandımak için kullanılır. <tbody>(gövde) etiketi, <thead>(başlık) ve <tfoot>(altbilgi) etiketleri ile birlikte kullanılır. Ayrıca width="100%" ile tablonun genişliğini 100% olarak belirlemek için kullandık. Satırlar için <tr> sütunlar için <td> etiketleri vardır. Birden fazla satırlı tablo için birden fazla <tr> eklenmektedir. <th> etiketi de sütunlar oluşturur ama yazıyı da ortalar.
NOT:Eğer tablo çizerken yan yana duran satırların bir tanesine yükseklik verirsek yan yana olan satırlarda aynı yüksekliği alıcaktır.
#HTML'de colspan ve rowspan Nitelikleri
HTML'de sütunları birleştirmek için colspan niteliği, satırları birleştirmek için rowspan niteliği kullanılır.
Örnek vermek gerekirse;
<table border="1" width="100%">
<thead>
<tr>
<th>Yıl</th>
<th>İsim</th>
<th>Meslek</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">2020</td>
<td>Ali Şahin</td>
<td>Web Developer</td>
</tr>
<tr>
<td colspan="2">Ahmet - Web Developer</td>
</tr>
</tbody>
</table>
Bu örnekte ben ilk satırda 1. sütunu yani yıl değerini rowspan="2" diyerek 2 satırı birleştirdik. Yani 2. satırda gördüğünüz gibi bir daha yıl yazmadım çünkü üstte 2 satırı birleştirmiştim bu yüzden 2. satırda ise bu sefer 2 sütunu birleştirdim. Bunuda colspan="2" diyerek yaptım. Yani İsim ve Meslek alanlarını tek bir sütunda yazdırmış oldum.
-------------------------------------------------------------------------------------------------------------------------
#HTML'de Listeler
HTML'de listeler sıralı ve sırasız olarak ikiye ayrılıyor. Sırasız listeler <ul> etiketi içerisinde, sıralı listeler <ol> etiketi içerisinde yazılır. Ve her liste elemanı <li> etiketi içerisinde yazılmalıdır.
#Sırasız Liste <ul>
Sırasız liste oluşturmak için <ul> etiketini kullanacağız.
Örnek vermek gerekirse;
<ul>
<li>Çay</li>
<li>Cola</li>
<li>Soda</li>
</ul>
Her liste elemanına yani {ul,ol} type niteliğini verebiliriz ne işe yarar derseniz <ul> etiketinde;
circle - içi boş daire
disc - içi dolu daire
square - içi dolu kare ;
olur{bu kısım ul etiketi içindi}
Örnek vermek gerekirse;
<ul type="square">
<li>Çay</li>
<li>Cola</li>
<li>Soda</li>
</ul>
#Sıralı Liste <ol>
Sıralı liste oluşturmak içinde <ol> etiketi kullanılır.
<ol> etiketi için type'da
1 - 1'den başlayan sayılı
a - Küçük harfle a'dan başlayan sayılı
A - Büyük harfle A'dan başlayan sayılı
i - Küçük harflerle başlayan romen rakamı sayılı
I - Büyük harflerle başlayan romen rakamı sayılı
Örnek vermek gerekirse;
<h4>1'den başlayan</h4>
<ol type="1">
<li>HTML Nedir?</li>
<li>HTML'e Başlangıç</li>
<li>HTML'de Etiketler</li>
</ol>
<h4>a'dan başlayan</h4>
<ol type="a">
<li>HTML Nedir?</li>
<li>HTML'e Başlangıç</li>
<li>HTML'de Etiketler</li>
</ol>
<h4>A'dan başlayan</h4>
<ol type="A">
<li>HTML Nedir?</li>
<li>HTML'e Başlangıç</li>
<li>HTML'de Etiketler</li>
</ol>
<h4>i'den başlayan (romen)</h4>
<ol type="i">
<li>HTML Nedir?</li>
<li>HTML'e Başlangıç</li>
<li>HTML'de Etiketler</li>
</ol>
<h4>I'dan başlayan (romen)</h4>
<ol type="I">
<li>HTML Nedir?</li>
<li>HTML'e Başlangıç</li>
<li>HTML'de Etiketler</li>
</ol>
Ayrıca sayımın nereden başlayacağını belirlemek için start niteliğini kullanabilirsiniz.
Örnek vermek gerekirse;
<ol type="5">
<li>HTML Nedir?</li>
<li>HTML'e Başlangıç</li>
<li>HTML'de Etiketler</li>
</ol>
#İç İçe Liste Kullanımı
Genelde sıkça listeleri iç içe kullanmamız gerekecek. Kullanırken yeni bir liste <li> etiketi içerisinde yazılır.
Örnek vermek gerekirse;
<ul type="disc">
<li>HTML</li>
<li>CSS</li>
<ul type="circle">
<li>SASS</li>
<li>LESS</li>
</ul>
<li>JavaScript</li>
<ul>
<liClient-side></li>
<ul type="square">
<li>jQuery</li>
<li>React</li>
</ul>
<li>Server-side</li>
<ul>
<li>Nodejs</li>
</ul>
</ul>
<li>PHP</li>
<ul>
<li>Laravel</li>
<li>Symfony</li>
</ul>
</ul>
Burada yaptığımız örnek biraz karışık gibi ama değil. bir <ul> etiketi açtık ve ilk maddemizi girdik ve <ul> etiketinin içerisine bir <ul> daha açarak madde içine madde açtık ve tekrar ilk maddenin açıldığı yeri devam ettirmek içinde kapanan <ul> etiketlerin arasına <li> açtık yani nasıl derseniz;
</ul>
<li></li>
</ul>
bunun gibi açıp diğer maddeleri oluşturmaya devam ettik.
#HTML'de Açıklama Listesi
HTML'de aynı zamanda açıklama listeleri oluşturabilirsiniz. Yani bir liste oluşturup her elemanın ne işe yaradığını bu etiketleri kullanarak yapabilirsiniz. Listeyi oluşturmak için <dl> etiketini, açıklanacak terim için <dt> etiketi, açıklama için <dd> etiketi kullanılır.
Örnek vermek gerekirse;
<dl>
<dt>MUSTAFA KEMAL ATATÜRK</dt>
<dd>TÜRKİYE CUMHURİYETİNİN KURUCUSU</dd>
</dl>
TARAYICIDA GÖRÜNÜMÜ;
MUSTAFA KEMAL ATATÜRK
TÜRKİYE CUMHURİYETİNİN KURUCUSU
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
###HTML'de Görüntüleme Değerleri
Her HTML etiketi, varsayılan bir görüntüleme değerine sahiptir. Çoğu etiketin varsayılan görüntüleme değeri ise ya block yani blok seviyeli etiket ya da inline yani satır içi seviyeli etiket görünümündedir. Şimdi gelin sırasıyla bu görüntüleme değerlerini inceleyelim.
#Blok Seviyeli Etiketler <div>
Blok seviyeli etiketler, her zaman yeni bir satırdan başlar ve genişliğin tamamını alır yani 100% olarak gözükürler. Bu sayede blok seviyeli etiketleri anlamamız kolaylaşır. Blok seviyeli etiketlere verebileceğimiz en yaygın etiket <div> etiketidir. Peki nedir bu <div> etiketi?
Aslında <div> etiketi HTML sayfada bölümleri temsil eder. Yani her yeni bir div, yeni bir bölüm anlamına gelir. Bölüm bölüm ayırmak istediğimizde genelde <div> etiketini kullanırız. Ancak blok seviyeli etiket ihtiyacımızı genelde bu etiketten karşılarız, şu an pek bir anlam ifade etmeyebilir çünkü kullanıldığında çıktı olarak farklı bir görünüm vermez, amaç burada zaten bir görünüm vermesi değil bu etiketi kullanarak görünümü özelleştirmektir. Bunun içinde tabi CSS gerekiyor, Şu an sadece böyle bir etiket olduğunu ve bu etiketin blok seviyeli bir etiket olduğunu ve en çok kullanılan etiketlerden biri olduğunu bilmeniz yeterli.
Örnek vermek gerekirse;
<div>Hello World!</div>Merhaba Dünya
Tarayıcıda görünümü;
Hello World!
Merhaba Dünya
Ayrıca diğer blok seviyeli etiketlerin listesine aşağıdan ulaşabilirsiniz;
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
###Satır içi Seviyeli Etiketler ---> <span>
Bu etiket türünün en çok kullanılanı da <span> etiketidir. Adı üstünde satır içi bir etiket türüdür yani yazı içerisinde işaretleme yapıldığında bile herhangi bir bozulma, herhangi bir değişiklik olmaz tıpkı <div> etiketinde olduğu gibi, <span> etiketide ağırlıklı olarak satır içi elemanları belirleyip onlara CSS ya da JavaScript uygulamak için kullanılan stilsiz bir etikettir.
Örnek vermek gerekirse;
Hello <span>World</span> Merhaba Dünya
Tarayıcıda görünümü;
Hello World Merhaba Dünya
Ayrıca diğer satır içi seviyeli etiketlerin listesine aşağıdan ulaşabilirsiniz;
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
###HTML'de id ve class Nitelikleri <div id=""> <div class="">
Normal şartlarda her nitelik için özellikle böyle anlatım yapmayacağım ancak bu iki nitelik, kodlama yaparken en sık kullanacağımız nitelikler olucak
###id Niteliği
Öncelikle direkt kullanımına bir bakalım, sonra durumunu açıklayacağım;
<div id="test"></div>
Gördüğünüz gibi nitelik kullanımı hep aynı nitelik="değer" şeklinde. Burada önemli olan, bu id niteliğinin ne işe yaradığı? Aslında görünüm olarak hiçbir şeyi değiştirmez. Bu niteliğin kullanılma amacını anlamak için ufaktan bir CSS'i anlamak gerekir. Oda şöyle;
CSS'de her şey bir etiketi seçmek ve stiller uygulamaktan ibaret. Örneğin tüm divleri seçmek istediğimizde şöyle bir CSS kodu yazıyoruz;
div#test { CSS
background-color: yellow;
color: red;
}
NOT:Neden div# yazdığımızı anlatayım. Çünkü div id için kullandık ve <div id="artık ne yazarsak"></div>div# den sonra id nin içerisine yazdıysak onu yazıcaz.
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
