Blog'dan Yazılar

Sizler için profesyonel yazarlarımız ile hazırladığımız makalelerimizi okuyun ve kendinizi geliştirin.

HTML'de Listeler
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. Şimdi sırasıyla bu liste örneklerini inceleyelim. Sırasız Liste <ul> Sırasız liste oluşturmak için <ul> etiketini kullanacağız. Hemen örneklendirelim; <ul> <li>Çay</li> <li>Şeker</li> <li>Kaşık</li> </ul>   Bu örneğin çıktısı şöyle olacaktır;   HTML'de <ul> Etiketi Örneği   Her liste elemanının başında içi dolu yuvarlak daire var, bunları isterseniz type niteliği vererek değiştirebilirsiniz. Değer olarak şunları verebilirsiniz; circle - içi boş daire disc - içi dolu daire square - içi dolu kare Örnek vermek gerekirse; <ul type="square"> <li>Çay</li> <li>Şeker</li> <li>Kaşık</li> </ul>   Çıktısı şöyle olacaktır;   HTML'de <ul> Etiketi type Niteliği Örneği   Sıralı Liste <ol> Sıralı liste oluşturmak içinde <ol> etiketi kullanılır. Hemen bir örnek verelim; <ol> <li>HTML Nedir?</li> <li>HTML'e Başlangıç</li> <li>HTML'de Etiketler</li> </ol>   Çıktısı ise şöyle olacaktır;   HTML'de <ol> Etiketi Örneği   Şimdi farkını daha iyi anladık sanırım. Bunda sayılı bir liste oluşturuyoruz yani sıralı bir liste. Tabi bunun içinde type niteliği belirleyebiliriz. Bu niteliğin alabileceği değerler ise; 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ı Örneklerini görmek isterseniz ise;   HTML'de <ol> Etiketi type Niteliği Örneği   Ayrıca sayımın nereden başlayacağını belirlemek için start niteliğini kullanabilirsiniz. Örneğin; <ol start="3"> <li>HTML Nedir?</li> <li>HTML'e Başlangıç</li> <li>HTML'de Etiketler</li> </ol>   Bu şekilde 3.den başladığını görebilirsiniz. İç İç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 verelim; <ul> <li>HTML</li> <li> CSS <ul> <li>SASS</li> <li>LESS</li> </ul> </li> <li> JavaScript <ul> <li> Client-side <ul> <li>jQuery</li> <li>React</li> </ul> </li> <li> Server-side <ul> <li>Nodejs</li> </ul> </li> </ul> </li> <li> PHP <ul> <li>Laravel</li> <li>Symfony</li> </ul> </li> </ul>   Bu örneğin çıktısı şöyle olacaktır;   HTML'de İç İçe Liste Örneği   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 verelim; <dl> <dt>Mustafa Kemal Atatürk</dt> <dd>Türkiye Cumhuriyeti'nin kurucusu.</dd> <dt>Einstein</dt> <dd>Nobel Fizik Ödüllü Yahudi asıllı Alman teorik fizikçi</dd> </dl>   Bu örnek tarayıcıda şöyle gözükecektir;   HTML'de Açıklama Listesi Örneği   DİKKAT Liste etiketleri web tasarım yaparken menüleri oluşturmakta kullandığımız etiketlerdir. Şu an bir anlam ifade etmesede CSS derslerinde bunlar anlam ifade etmeye başlayacak, bilginiz olsun ve iyi öğrenin :)
HTML'de Tablolar
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. Şimdi hızlıca bir örnek inceleyelim; <table border="1" width="100%"> <tbody> <tr> <td>Tayfun Erbilen</td> <td>26/td> </tr> <tr> <td>Ahmet Aslan</td> <td>22</td> </tr> </tbody> </table>   Şimdi tahmin edebileceğiniz üzere <table> etiketi burada tabloyu temsil ediyor bu arada border="1" tablonun çizgilerini belirlemek için kullanılıyor. Bunu daha sonra CSS'le yapacağız ancak şimdilik örnekleri görebilmek adına çerçeveyi 1 yaparak görebiliriz. Ve fark ettiğiniz üzere diğer tablo etiketleri bu etiketin içerisine yazılıyor. Ayrıca width="100%" ile tablonun genişliğini 100% olarak belirlemek için kullandık. <tbody> ise, tablonun içeriğinin yer aldığı etikettir. İçerisinde ise satırlar için <tr> sütunlar için <td> etiketleri vardır. Birden fazla satırlı tablo için birden fazla <tr> eklenmektedir. Yukarıdaki kodların çıktısı şöyle gözükecektir;   HTML'de Tablo Örneği   Tablo Header (Başlık) Tablonun başlık kısmını belirlemek için <thead> etiket kullanılıyor. İçerisinde satırlar için yine <tr> etiketi ancak sütunları için bu sefer <th> etiketi geliyor. Hemen bir örnek verelim; <table border="1" width="100%"> <thead> <tr> <th>Ay</th> <th>Kazanç</th> </tr> </thead> <tbody> <tr> <td>Ocak</td> <td>100₺</td> </tr> <tr> <td>Şubat</td> <td>200₺</td> </tr> </tbody> </table>   Tarayıcıda çıktısı ise şöyle olacaktır;   HTML'de Tablo (thead) Örneği   Tablo Footer (Alt Bilgi) Aynı zamanda tablonun alt bilgisini belirlemek için <tfoot> etiketi kullanılıyor. Bu bağlamda aslında <table> etiketi 3 etiketten ibaret, başlık için <thead> tablo içeriği için <tbody> ve alt bilgi içinde <tfoot> etiketi. Bir örnekle anlamlı kılalım. <table border="1" width="100%"> <thead> <tr> <th>Ad-soyad</th> <th>Yaş</th> </tr> </thead> <tbody> <tr> <td>Ocak</td> <td>100₺</td> </tr> <tr> <td>Şubat</td> <td>200₺</td> </tr> </tbody> <tfoot> <tr> <td>Toplam</td> <td>300₺</td> </tr> </tfoot> </table>   Bu kodların çıktısı ise şöyle olacaktır;   HTML'de Tablo (tfoot) Örneği   Tabloda colspan ve rowspan Nitelikleri Tabloda 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">2019</td> <td>Tayfun Erbilen</td> <td>Web Developer</td> </tr> <tr> <td colspan="2">Mehmet Seven - 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ştirdim. 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. Bu kodların sonucu ise şöyle olacaktır;   HTML'de Tablo (colspan, rowspan) Örneği   Şimdilik tablo ile ilgili söyleyeceklerim bu kadar, HTML Etiket Listesi sayfasından zaten tüm etiketleri tek tek inceleyebilirsiniz, oradan bu etiketlerin tamamının daha ayrıntılı bir listesine ulaşabilirsiniz.
HTML'de Görüntüler (Resimler)
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">   Burada URL kısmına resmin adresi gelecek. Şimdi gerçek çalışan bir örnek yapalım. <img src="https://prototurk.com/upload/img/ataturk.jpg">   Bu örnekte src niteliğine bir görüntünün yani resmin linki verildi. Burada isterseniz site adresini kaldırıpta resim linki verebilirsiniz, yani yukarıdaki örnek bu site içerisinde görüntülenecekse /upload/img/ataturk.jpg şeklinde de tanımlanabilirdi. Şimdi yukarıdaki örneğin çıktısına bir bakalım;   HTML Görüntü (Resim) Etiketi Örneği   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. Örneğin; <img src="upload/cicek.png" alt="Kırmızı Gül Çiçeği">   Burada eğer cicek.png dosyası okunamazsa Kırmızı Gül Çiçeği şeklinde gözükecektir. width ve height Nitelikleri Resmin genişliğini ve yüksekliğini belirlemek için width ve height nitelikleri kullanılır. Hemen bir örnek verelim; <img src="https://prototurk.com/upload/img/ataturk.jpg" alt="Mustafa Kemal Atatürk" width="200" height="100">   Burada genişliği 200px yüksekliği 100px olarak görüntüyü ayarladık. width ve height değerlerine girilen değer sayı olmalı ve her zaman px cinsinden yorumlanmaktadır. Başka Bir Dosyadaki Görüntüyü Göstermek Çalıştığınız dizinin bir üst dizininde başka bir resmi göstermek istiyorsunuz diyelim. O zaman bir önceki dizine gidip görüntüyü seçmek için ../ kullanıyoruz. Örnek vermek gerekirse; <img src="../img/test.png" alt="Test">   Bu kodu çalıştırdığınız dizinde değilde bir üst dizine çıkıp img klasörü altında test.png arayacaktır. 2 üst klasöre çıkmak isteseydik o zamanda ../../ şeklinde kullanacaktık. Bağlantı İçinde Görüntü Göstermek Önceki derste bağlantı etiketini öğrenmiştik. Şimdi iki etiketin bir arada kullanımın görelim. <a href="https://prototurk.com"> <img src="img/logo.png" alt="Prototürk"> </a>   HTML <map> Etiketi <map> etiketi ile resim üzerinde belli noktaları işaretleyerek bağlantı verebiliyoruz. Hemen bir örneğine bakalım; <img src="https://prototurk.com/upload/img/cihaz.jpg" alt="Cihazlar" usemap="#ptmap"> <map name="ptmap"> <area shape="rect" coords="105,249,161,366" href="mobil.html" alt="Telefon"> <area shape="rect" coords="238,172,386,366" href="tablet.html" alt="Tablet"> <area shape="rect" coords="444,95,834,408" href="bilgisayar.html" alt="Bilgisayar"> </map>   Burada dikkat edilmesi gereken nokta, <img> etiketinde usemap="#ptmap" kullandık. ptmap 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. Koordinatları şu şekilde belirliyoruz. İlk değer (105) - Soldan mesafesi İkinci değer (249) - Yukarıdan mesafesi Üçüncü değer (161) - Soldan mesafesi + genişliği Dördüncü değer (366) - Yukarıdan mesafesi + yüksekliği Görselle daha iyi anlaşılacağını umuyorum. Bir bakalım; Şimdi hep birlikte bunun tarayıcıda nasıl gözüktüğüne bir bakalım.   HTML <map> Etiketi Örneği  
HTML'de Bağlantılar (Linkler)
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. Hemen bir örnek verelim; <a href="https://google.com/tr">Google'a git</a>   Burada Google'a git yazısına tıklandığında google.com.tr'ye gidecektir. Bu şekilde bir sayfadan başka bir sayfaya bağlantı gerçekleştirilmektedir. Örnektede görüldüğü üzere href niteliği, tıklandığında gidecek adresi belirlemek için kullanılır. <a> etiketinde sadece href niteliği bulunmaz, daha bir çok nitelikle birlikte kullanılabilir. 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. iframeAdı - bağlantıyı belirlenen iframe çerçevesi içerisinde açar. Örneğin yeni sayfada açılacak bir bağlantı oluşturalım. <a href="https://prototurk.com" target="_blank">Prototürk</a>   Tıklandığında Prototürk'ü yeni sekmede açacaktır. Birde iframe çerçevesi içerisinde açtırmak var. Onuda şöyle bir örnekle görelim; <p> Prototürk'ü açmak için <a href="https://prototurk.com" target="browser">tıklayın!</a> </p> <iframe name="browser" width="600" height="300"></iframe>   Henüz iframe etiketini öğrenmedik ancak öğrendikten sonra gelip bunun örneğine tekrar bakıp daha iyi kavrayabilirsiniz. Kısaca şuan yaptığı bağlantıya tıkladığımda ilgili adresi benim belirlediğim bir frame yani çerçeve içerisinde açması.   HTML Bağlantıyı Iframe İçerisinde Açtırma   Resimlere Bağlantı Vermek Henüz resim etiketini öğrenmemiş olsakta bu seferlik es geçip örneği inceleyelim. <a href="https://prototurk.com"> <img src="resim.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 :) Bir örneklendirelim; <p> <a href="#bolum1">1. Bölüme Git</a> <br> <a href="#bolum2">2. Bölüme Git</a> </p> <div id="bolum1"> <p> <strong>1. Bölüm</strong> </p> <p> 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. </p> <p> 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. </p> <p> 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. </p> </div> <div id="bolum2"> <p> <strong>2. Bölüm</strong> </p> <p> 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. </p> <p> 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. </p> <p> 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. </p> </div>   Tarayıcıda ise şöyle gözükecektir.   HTML Bağlantıyı Iframe İçerisinde Açtırma  
HTML'de Alıntı Etiketleri
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 <q> Etiketi Bu etiket genelde kısa alıntıları 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 <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>   Bu örnekte gördüğünüz gibi bir başka siteden alıntı yaptım ve cite niteliği ile hangi siteden alıntı aldığımı söyledim. Tabi Türkiye şartlarında Wikipedia kapalı olduğu için bir anlamı yok ama neyse. HTML <abbr> Etiketi Bu etiket ile kısaltmaları işaretleyip uzun isimlerini belirtiyoruz. Böylece arama motorları sitemize girdiklerinde daha çok bilgi vermiş oluyoruz. Örneğin; <p> <abbr title="Hyper Text Markup Language">HTML</abbr> bir işaretleme dilidir. </p>   Görüldüğü üzere, title niteliği ile birlikte kullanılır ve title içerisine kısaltmanın uzun hali yazılır. HTML <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 <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. Hemen örneklendirelim; prototurk.com <cite>Tayfun Erbilen</cite> tarafından 07 mayıs 2019'da yeniden kuruldu.   HTML <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>   Burada dir niteliğinde rtl belirleyerek tam tersi yazdırma işlemi yaptık. Normal yazılarda ise ltr yazarak test edebilirsiniz.
HTML'de Metin Biçimlendirme Etiketleri
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ı <sub> - Alt simge yazı <sup> - Üst simge yazı Gelin tüm bu etiketleri tek bir sayfada tanımlayıp kullanalım ve nasıl gözüktüklerine bir bakalım. <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 Metin Biçimlendirme Etiketleri Örneği   HTML <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. Şimdi her ikisinede birer örnek verecek olursak; <b>Merhaba Dünya</b> <strong>Ne mutlu Türk'üm diyene!</strong>   HTML <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. Şimdi her ikisinede birer örnek verceek olursak; <i>Eğik Yazı</i> <em>Türk, Öğün, Çalış, Güven</em>   HTML <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. Böyle bir şeyi kim neden ister bilinmez ama bunu yapan etiket var yani bilginiz olsun :) Bu yazılar normalken <small>bu yazı daha küçük</small> gözüküyor olabilir mi?   HTML <mark> Etiketi Bir şeyleri okurken üstünü sarı kalemle çizerdik ya, işte bunu HTML'de <mark> etiketi ile yapıyoruz. Örnek vermek gerekirse; yazının bu kısmı <mark>farklı şekilde</mark> gözüksün.   HTML <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. Boyum şuan <del>180cm</del> 195cm   HTML <ins> Etiketi <del> ile silinen yazıların yenisini eklerken <ins> etiketi kullanılır. Yukarıdaki örnek, bu etiketle birlikte şöyle daha anlamlı olacaktır; Boyum şuan <del>180cm</del> <ins>195cm</ins>   HTML <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. Hemen deneyelim; H<sub>2</sub>O   HTML <sup> Etiketi Yazıyı üst simge olarak belirlemek için bu etiket kullanılır. Örneğin m2 derken 2 değerini üst simge olarak belirlersek doğru bir kullanım olur. Hemen deneyelim; m<sup>2</sup>
HTML'de Paragraf Etiketleri
HTML'de Paragraf Etiketleri
HTML'de paragraflar <p> etiketi ile işaretlenir. Örnek vermek gerekirse; <p>Bu bir paragraftır.</p> HTML UNUTMADAN Web tarayıcıları <p> etiketini yorumlarken bazı CSS özellikleri ekleyecekler. Paragrafın öncesine ve sonrasına boşluk gelecektir. CSS'in ne olduğunu bilmiyorsanız buna daha sonra geleceğiz. Paragraf etiketi içerisindeki metinlerin yazdığınız gibi birebir aynı görünmeme durumları olabilir. Örnek vermek gerekirse; <p>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.</p> HTML Tabi biz yukarıdaki örneği biraz abarttık ancak bu şekilde alt satıra inmeler, boşluklar vs. tarayıcılar yorumlarken bunların tamamını kaldırıyorlar. Yani yukarıdaki çıktığının görüntüsü şöyle gözüküyor olacak;   HTML Paragraf Etiketi   Bu şekilde gözükmesini istediğimiz durumlarda başka bir alternatif etiketi tercih edebiliriz. Mesela hangisi olabilir? Onu makalenin sonunda göreceğiz :) HTML <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 kullanacaksınız. Bir örnekle daha iyi anlayacak olursak; <p> Prototurk.com <br> Online Web Eğitimleri </p> HTML Bu örneği tarayıcıda çalıştırdığınızda şöyle bir çıktı alacaksınız.   HTML <br> Etiketi Örneği   Birden fazla <br> etiketi kullanarak birden fazla satır aşağıya inebilirsiniz. HTML <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> HTML Sonuç aşağıdaki gibi olacaktır;   HTML <pre> Etiketi Örneği   Hatta sizin bu sayfada bile kod örneklerini gördüğünüz kısımlar <pre> etiketi olarak tanımlanmıştır. Yani aynı zamanda bu şekilde kodları vs. işaretlerkende önceden formatlı olduğu için bu etiketi kullanabilirsiniz.
HTML'de Etiketler
HTML'de Etiketler
HTML'in temellerini etiketler oluşturur. Etiketler, metinleri işaretlerken kullandığımız, önceden tanımlı parçalardır. Yani siz kendiniz bir etiket tanımlayamazsınız, en azından html tarafında :) Bu konuya daha sonra geliriz. Etiketlerin yapısı şu şekildedir; <etiket> .. </etiket> HTML Gördüğünüz gibi <> arasına etiket ismi yazılır. 2 kısımdan oluşan bu kod parçasında, ilk parça etiketin açılışını, ikinci parça etiketin kapanışını belirtir. Etiket kapatılırken aynı etiketin tanımlandığı şekilde yazılır sadece etiket adının başına slash (/) işareti gelir. Bazı etiketlerde ise etiketleri kapatmak zorunda değiliz çünkü onlar kendiliğinden kapanan etiketler. Bu etiketlerin yapısı ise şöyledir; <etiket> HTML Ya da.. <etiket /> HTML Hangi etiketlerin kapatılması gerektiği, hangilerinin kendinden kapalı olduğu konusuna takılmayın, ilerleyen derslerde zaten bunların hepsi kafanıza oturacaktır. Çünkü sayılı HTML etiketi var, yani çok fazla bir bilgi yığını oluşmayacak bu tarafta size. Şimdi gerçek bir etiket tanımlayarak kullanımını görelim. <p> Bu bir paragraf etiketidir. </p> HTML <p> etiket, paragrafları işaretlemek için kullanılan etikettir. Uzun ve kısa metinleri, <p> etiketi içerisine alabilirsiniz. HTML'de birkaç etiket dışında etiketler niteliksiz bir işe yaramazlar. Yani mutlaka nitelikli olarak kullanılmaları gerekir. Nitelik nedir, bu konuya bir sonraki derste geleceğiz. Ancak ufak bir örnek vermek gerekirse; <a href="https://prototurk.com">prototürk</a> HTML Burada bağlantı verme etiketini kullandık. Yani prototürk yazısına tıklandığında prototurk.com'a gidecek bir link oluşturduk. Ve burada <a> etiketini niteliksiz kullanmak, hiçbir sonuç vermeyecektir. Yani belli direktifleri yaptırabilmek için bu örnektede olduğu gibi nitelikleri kullanıyoruz. Burada href bu etiketin niteliğidir ve değer olarak gidilecek bağlantının adresini alır.
HTML'de Temeller
HTML'de Temeller
Eğer aşağıdaki etiketlerin kullanım anlarını anlamıyorsanız sorun etmeyin, zaman içerisinde kafanızda yer edinmeye başlayacaktır. HTML'in Temel Etiketleri Tüm HTML sayfaları <!DOCTYPE> tanımı ile başlarlar. Bu tanım sayfanın HTML sürümünü temsil eder. Ve diğer tüm html etiketleri <html> etiketi içerisinde yazılmalıdır. Son kullanıcının göreceği her şey <body> etiketi içerisinde yazılır. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> içerik.. </body> </html> HTML Editörde Görüntüle 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. <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> HTML Editörde Görüntüle HTML'de Paragraf Paragraflar için <p> etiketi kullanılır. <p>Bu bir paragraf örneğidir.</p> HTML Editörde Görüntüle 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. <a href="https://prototurk.com">Prototürk'ü ziyaret et</a> HTML Editörde Görüntüle HTML'de Resim 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 Editörde Görüntüle HTML'de Listeler HTML'de listeler <ul> ve <ol> etiketleri arasında <li> içerisinde tanımlanır. Örnek vermek gerekirse; <ul> <li>Elma</li> <li>Armut</li> <li>Erik</li> </ul> HTML Editörde Görüntüle Daha fazla örneğe ilerleyen bölümlerde birlikte göz atacağız.