Blog'dan Yazılar

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

YAPAY ZEKANIN GELİŞİM SÜRECİ
YAPAY ZEKANIN GELİŞİM SÜRECİ
Yapay zeka olarak tabir ettiğimiz kavramın üzerine gerçekleştirilen ilk araştırmalar ve yapay sinir ağları gelişim süreci hakkında konuşurken bilinmesi gereken önemli detaylar arasında kendisini mutlaka ama mutlaka göstermekte olan konular arasındadır. Ayrıca daha sonraki zamanlarda yeni yaklaşımlar ortaya çıkacak ve ortaya çıkan bu yeni yaklaşımlarla birlikte de aynı zamanda eleştiriler de ortaya atılacaktı. Yapay Zeka Kavramına Dair İlk Araştırmalar ve Yapay Sinir Ağları İdealize edilmiş olan tanımı ile birlikte yapay zeka olarak adlandırdığımız konu üzerinde ilk çalışan kişilerden birisi McCulloch ve Pitts isimli iki kişidir. Bu araştırmacı kişilerin önermekte olduğu durum yapay sinir hücrelerini birebir olarak kullanmakta olan bir hesaplama modelidir. Söz konusu olan bu hesaplama modelinin içerisinde yer almakta olan önermeler mantığı ise fizyoloji ile birlikte Turing’in hesaplama kavramına da dayanmaktaydı. Nerede olduğu fark etmeksizin herhangi bir şekilde hesaplanabilir olan bir fonksiyonun sinir hücrelerinin meydana getirmiş olduğu mantıksal işlemlerin ya da işlemcilerin bunu gerçekleştirme imkanı olduklarını göstermişlerdir. Bununla birlikte bu ağ yapısı olarak adlandırdığımız kavramların doğru bir noktada tanımlanabilmesi halinde ise öğrenme becerisinin kazanılabileceği konusunu da ileri sürerek bu konu hakkında büyük bir adım daha atmışlardır. Günümüz dünyasının en büyük yardımcılarından birisi olan yapay zeka konusu hakkında 1950’li senelerde Shannon ve Turing bilgisayar yapıları için satranç programları yazmak ile kendilerini görevlendirmişlerdi. SNARC ise ilk olarak yapay bir sinir ağı ile donatılmış bir bilgisayar olarak bu dönemde tanınmış ve tanıtılmış oldu. Yapay Zeka Konusunda Yeni Yaklaşımlar Tüm bu gelişmelerin ardından gelen daha sonraki zamanlarda Newell ve Simon, mantık kuramcısı olarak bilinirler, insan tarzında düşünebilme fikrine odaklı olarak üretilmiş olan ilk programı yani Genel Sorun Çözücü’yü üretmeyi başarmışlardır. Simon ise daha sonraki zamanlarda fiziksel bir simge düşüncesini beyan etmiş ve ardından bu düşünce insandan bağımsız olarak zeki sistemler geliştirme ve üretme çalışmaları ile uğraşarak insanlığa büyük hizmetler sunma fikrine kapılanlar için büyük bir anahtar rolü üstlenmeyi başaracaktır.
YAPAY ZEKA ÇAĞINDA DİJİTALLEŞMENİN ETKİSİ NELERDİR?
YAPAY ZEKA ÇAĞINDA DİJİTALLEŞMENİN ETKİSİ NELERDİR?
Günümüz dünyasında teknoloji her geçen gün ilerlemekte ve ilerleyen teknoloji her geçen gün insanların hayatına çok büyük etkiler ve katkılar sağlamaktadır. Artık öyle bir dönemdeyiz ki, insanlar her geçen gün teknolojinin biraz daha ilerlemesini bekliyor ve bir ilerleme kaydedilmediği zamanlarda gerçekten endişelenmektedir. Ama bu durumdan korkulmasına hiç gerek yok, nedeni ise dünyanın dönmesi ile teknolojinin biraz daha gelişecek olmasıdır. Yazımızın devamında yapay zeka çağı içerisinde dijitalleşmenin etkisinin neler olduğuna değineceğiz. Keyifli okumalar! Yapay Zeka ve Dijitalleşme Dijitalleşme sözcüğünün tanımını aslında çok kısa bir şekilde kaynak olarak adlandırdığımız verilerin bilgisayar ortamlarına aktarılmasına ve bu ortamlarda bilgisayarlar yardımı ile okunabilecek hale gelmesi olarak adlandırmamız ve böylece tanımlamamız mümkün olan bir durumdur. doksanlı yılların sonuna doğru masalarımızın üzerinde yer almakta olan takvimler, not defterleri, gazeteler, ansiklopediler bulunurken ve hayatımızın zorlaşmasına neden olurken şu an bu saydıklarımın tamamı dijital bir hale gelmiş durumdadır. Günümüz dünyasında artık üretilmiş olan hemen hemen tüm kaynakları dijital bir şekilde üretmeyiz ve aynı zamanda dijital bir şekilde gerçekleştirilen üretimleri kayıt altında tutmaktayız. Dijitalleşme gelişmelerinin artması ile alakalı olarak hayatımızın bir hayli kolaylaştığını ve aradığımız herhangi bir kaynağın çok daha kısa süreler içerisinde bulunduğunu da söylememiz mümkündür. Yapay Zeka Çağı ve Dijitalleşme Dijitalleşme konusu anlamlandırılabilen verilerin artması yönündeki gelişmeleri de pek çok farklı şekilde hızlandırmıştır. En fazla ivmelenme görmekte olduğumuz alanlardan birisi de yapay zeka alanı olarak karşımıza çıkmaktadır. Aslen yapay zekanın geçmişi çok eskiye dayanmakta olsa da yetersiz olan işlem gücü ve yetersiz bulunan veriler dijitalleşme ve yapay zeka arasında engel oluyordu. Sonrasında bu sorunların ortadan kalkması ile birlikte çok daha büyük verileri hayatımıza katma fırsatına eriştik. Bu fırsatın da temel mimarı aslen kesinlikle yapay zeka teknolojilerinin hayatımıza girmiş oluşudur. Teknolojinin bu denli gelişmesi sayesinde sadece masamızın üstünde yer alan nesneler üzerinden örnek vermiş olsak da hayatımızın bir bütün olarak dijitalleşmesine katkı sağlamıştır.
HTML'de id ve class Nitelikleri
HTML'de id ve class Nitelikleri
Normal şartlarda her nitelik için özellikle böyle anlatım yapmayacağım ancak bu iki nitelik, front-end kodlama yaparken en sık kullanacağımız nitelikler olduğu için bunlardan bahsetmek istiyorum. id Niteliği Öncelikle direkt kullanımına bir bakalım, sonra durumu açıklarım. <div id="container"> .. </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. (bunu şu an anlamlı bulmanız önemli değil, önemsemeyin yani!) div { background-color: yellow; color: red; } CSS Bu kodda tüm <div> etiketlerini seçtik ve arka plan rengini sarı, yazı rengini de kırmızı yaptık. Fakat front-end kodlamada çoğu zaman her divi değilde spesifik olarak belirleyeceğimiz divleri seçip stil uygulamak gerekiyor. İşte bu durumda biz id ve class niteliğini kullanıyoruz. Yukarıdaki HTML örneğimizde <div> etiketine id="container" şeklinde nitelik ekledik. Eğer id olarak tanımlanmışsa bazı kurallar çerçevesinde tanımlanıyor. Ona hemen şöyle bir bakalım; ID'ler sayfa boyunca bir kez tanımlanır. Yani bir etikete verdiğiniz id="test" niteliği yani test değerini başka bir etikete daha veremezsiniz. Bu yüzden genelde kapsayıcı etiket olanlara ya da sayfa boyunca sadece tek bir görevi olan etiketlere id niteliği verilir. ID ile işaretlenen etiket, CSS tarafında kullanılırken #container şeklinde kullanılır. Burada container değer yukarıdaki HTML'deki örneğimizdir. Yani o zaman CSS'de id değeri container olan divleri seçip işlem yapmak istersem şöyle yazacaktım; #container { background: yellow; color: red; } CSS Bu şekilde daha sağlıklı oldu, <div> etiketi yerine id'si container olan bütün etiketleri seçtik. Sadece id'si container olan div etiketlerini seçmek isteseydik de o zaman şöyle değiştirecektik; div#container { background: yellow; color: red; } CSS Bu örnekte de önce spesifik olarak seçilecek etiketin adı yani buradaki örnekte div daha sonra eğer id ile tanımlanmış ise başına # işareti koyup değerini yazarak seçme işlemi yapıyoruz. class Niteliği id niteliğini o kadar anlattık, class niteliği de aynı işlev için kullanılıyor. Yani spesifik olarak bir etiketi işaretleyip daha sonra CSS'de bunu düzenleyebilmek için. Fakat id niteliğinden farkı, class nitelikleri birden fazla aynı isimle kullanılabiliyor. Buda çok kullanışlı bir şey çünkü aynı stile sahip ancak birbirinden ufak farkları olan etiketlerde aynı class ismini yazıp tek CSS kodu ile işi çözüyoruz. Şimdi önce bir örnek verelim; <a href="#" class="button">Normal Buton</a> <a href="#" class="button button-red">Kırmızı Buton</a> <a href="#" class="button button-green">Yeşil Buton</a> <a href="#" class="button button-blue">Mavi Buton</a>   Şimdi yukarıdaki kodlarda <a> etiketini buton yapmak için kullandık, buton ne derseniz de? Basılan düğme işte :) Tıklayınca bir şeyler yapıyor, bu örnekte bir adrese gidiyor. Şimdi yukarıdaki kodları editörde baktığınızda yine görsel olarak hiçbir şey gözükmeyecek çünkü bunu birazdan CSS ile vereceğiz ancak öncesinde kullanılan niteliği bir inceleyelim. Şimdi her birisinde button adında class ekledik ancak her birisine de 2. bir class adı belirttik. Buda şundan dolayı, bu 3 butonda benim düşünceme göre aynı şekillerde görünecek sadece arka plan renkleri farklı olacak. Bu yüzden her birisini ayrı ayrı seçip ayrı ayrı CSS yazmak yerine 3'üne de aynı class ismini verdim CSS ile tek seferde hepsini aynı görünüme getireceğim. Ek olarak da 2. class isimlerine CSS'de arka plan rengini değiştirecek kodu yazacağım. Yani kısaca CSS'den anlamıyor olsanız da CSS kodlarımız şöyle gözükecek; a.button { background-color: #333; color: #fff; display: inline-block; line-height: 50px; padding: 0 15px; border-radius: 3px; text-decoration: none; } a.button.button-red { background-color: red; } a.button.button-blue { background-color: blue; } a.button.button-green { background-color: green; } CSS Kodun uzun olması gözünüzü korkutmasın. Aslında şu an HTML öğreniyoruz ancak CSS ve JavaScript, HTML ile doğrudan bağlı olduğu için araya böyle bilgilerde ekleyeceğim. Zaten ilerleyen süreçlerde CSS ve JavaScript sayfalarından tüm detayları öğreneceksiniz. Şimdi kodları sırasıyla bir inceleyelim, n'aptık.. background-color: #333; - Burada arka plan rengini varsayılan olarak siyah tonunda belirledik. color: #fff; - Burada varsayılan yazı rengini beyaz belirledik. display: inline-block; - Burada görüntüleme değerini inline-block olarak belirledik, bu görüntüleme değerlerini önceki derslerde görmüştük. Normalde <a> etiketi inline yani satır içi seviyeli bir etiketti, fakat biz CSS ile bunu hem inline hem block olacak şekilde belirledik. Bu da şu demek, inline olacak yani satır içi olacak ancak vereceğim diğer CSS özelliklerini de gösterebilmek için aynı zamanda blok seviyesinde olacak. line-height: 50px; - Burada satır yüksekliğini 50px olarak belirledik buda otomatik olarak yukarıdan ve aşağıdan ortaladı 50px içerisinde yazıyı. padding: 0 15px; - Burada ise sağ ve sol içten 15px'lik boşluk verdik. Böylece daha düzgün görünecek yazılar sağa ya da sola yapışmayacak. border-radius: 5px; - Burada ise butonun dört kenarını da 3px yumuşattık. text-decoration: none; - Burada ise <a> etiketlerinde varsayılan olarak altı çizili gelir, bu çizgiyi kaldırdık. a.button.button-red - Burada aslında açıklaması şu, <a> etiketleri içerisinde class değeri button olup aynı zamanda button-red de olan etiketi ya da etiketleri seç. Ve rengini kırmızı yaptık. a.button.button-blue - class değeri button-blue olanın arkaplan rengini mavi yaptık. a.button.button-green - class değeri button-green olanın arkaplan rengini yeşil yaptık. Evet böyle uzun uzun açıklayınca, gördüğünüz gibi çokta karmaşık değilmiş diyor insan :) Şimdi bu iki kodu yani HTML ve CSS kodlarını birleştirip nasıl bir sonuç çıkacağına editörden bakalım :) <a href="#" class="button">Normal Buton</a> <a href="#" class="button button-red">Kırmızı Buton</a> <a href="#" class="button button-green">Yeşil Buton</a> <a href="#" class="button button-blue">Mavi Buton</a> <style> a.button { background-color: #333; color: #fff; display: inline-block; line-height: 50px; padding: 0 15px; border-radius: 3px; text-decoration: none; } a.button.button-red { background-color: red; } a.button.button-blue { background-color: blue; } a.button.button-green { background-color: green; } </style>   Çıktısı ise şöyle gözükecektir;   HTML'de class ve style Niteliği Örneği   Burada bilmediğimiz tek bir etiket var şu an oda <style> etiketi, anlatmadım çünkü CSS derslerinde bahsedeceğim. Ama ufaktan bir söylemek gerekirse, CSS kodları normalde 3 farklı şekilde sayfada yazılabiliyor. Birisi uzantısı .css olan bir dosyayı <link> etiketi ile sayfaya dahil ederek, 2.si sayfa içerisindeki etiketlerde style="" niteliğini kullanarak, 3.süde direk <style> etiketleri içerisine CSS kodu yazarak. Bu örnekte tam olarak bunu yaptık :) CSS eğlenceli değil mi? Merak etme, CSS derslerinde seninle daha çok eğleneceğiz :) Şimdilik HTML sıkıcı da olsa iyi anlamaya çalış yoksa bu yazdıklarımı iki kez okuduğunda çokta anlamlı gelmemeye başlar :D Bu nitelikleri neden kullanmamız gerektiğini sanıyorum net bir şekilde anladık. Yani tamamen CSS ile ilgili bir nitelik bu, dolayısı ile CSS derslerinde bolca bunları örneklendireceğiz. UNUTMADAN Bir etiket aynı anda hem id hemde class niteliği alabilir.
HTML'de Görüntüleme Değerleri
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 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, oda ilerleyen derslerde :) Ş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. Basit bir örnek verelim; <div> Merhaba Dünya </div> Test Ediyoruz.   Tabi <div> etiketi normalde belli başlı niteliklerle kullanılır. Bu nitelikleri bu etiketin kendi sayfasında detaylı olarak bulabilirsiniz. Yukarıdaki örneği çalıştırdığınızda hiçbir görünüm değişikliği olmadığını fark edeceksiniz, ancak 2. yazılan içeriğin alttan başladığını göreceksiniz, buda blok seviyeli etiketi anlamakta faydalı olmuştur diye umuyorum. Önceki derslerde sıkça kullandığımız <p> etiketide yine görüntüleme seviyesi olarak blok seviyeli bir etiketti ve yeni satırdan başlıyordu.   HTML'de <div> Etiketi Örneği   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> UNUTMAYIN <div> etiketi stilsiz bir HTML etiketidir. Genellikle diğer HTML etiketlerinin kapsayıcısı olarak kullanılır zira CSS öğrenmeye başladığımızda bunun nedenini daha iyi anlayacaksınız, şimdilik kafanıza takmayın ve sadece etiketin ne olduğunu bilin yeter. Satır içi Seviyeli Etiketler 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. Bir örnek verecek olursak; Normal bir yazı sırasında <span>span içerisinde yazılan bu alan</span> diğerlerinden hiçte farklı görünmeyecek.   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> UNUTMAYIN Bir etiketin görüntü seviyesinin ne olduğu aslında çok önemli değildir zira bu görüntü seviyeleri CSS yardımıyla değiştirilebilir. Yani <div> normalde blok seviyeli bir etikettir ancak bunu CSS yardımı ile satır içi seviyeli bir etiket haline getirebilirim.
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.