Blog'dan Yazılar

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

GELECEKTE EHLİYETSİZ ARAÇ KULLANMA ŞANSINA SAHİP OLACAĞIZ
GELECEKTE EHLİYETSİZ ARAÇ KULLANMA ŞANSINA SAHİP OLACAĞIZ
Geleceğin dünyasında bineklerimize artık otomobil yerine mobilite adını vereceğiz. Tekerleğin icat oluşunun ardından geldiğimiz bu güne kadar medeniyetimiz adına otomobil kelimesi ve kendisi büyük öneme sahip hale geldi. Aynı zamanda teknolojinin gelişmesi otomobil piyasalarına da yansıdı. Bu yansımanın yankılarını ve ihtimalleri daha iyi anlayabilmek adına yazımızı okumaya devam edebilirsiniz. Keyifli okumalar! Elektrikli Araçlar Gelecek zamanların otomobilleri ya da diğer bir söylem ile mobilite unsurları kesinlikle elektrikli bir şekilde çalışacak. 2030 senesine kadar Avrupa piyasası içerisinde otomobil satışlarının yaklaşık olarak yüzde elli beş kadarının elektrikli araçlardan oluşması beklenmektedir. Otomotiv üreticilerinin kökten değişimi esnasında gençler ve teknolojik gelişmelere hızlı bir biçimde ayak uydurmayı başarabilecek olan yeni kuşaklar kesinlikle çok büyük öneme sahip olan bir rol oynayacaktır. Gelecek zamanların mobilitesi çok daha esnek, çok daha kişisel ve çok daha kolay bir şekilde gerçekleşecek. Geleceğin otomobilleri sadece talep halinde kullanılabilecek ve paylaşılabilecek. Aynı zamanda bu otomobillerin şarj edilebilmesi ve kullanılabilmesi adına gerekli olan elektrik yenilenebilir özellik taşıyan kaynaklardan elde edilecek. Bir diğer söylemle eviniz üzerinde yer alan şarj ünitesinin kendi güneş enerjisini üretmeyi başarabildiği panelleri de olacak. Ehliyet Sahibi Olmaya Gerek Kalmayacak Gelecek zamanların otomobil teknolojisinde otomobil kullanmak için bir ehliyet sahibi olmanız gerekmeyecek. Bu durumu toplu taşıma sektörünün kişisel taşıma işlemlerine dönüşmesi hakkında bir devrim olarak da görmeniz mümkündür. Otomobiller artık daha kolay sahip olabildiğiniz bir hizmet haline gelecek. Bu durumun nedeni de aslında şimdi olduğu tarzda fiyatların tek seferde ödenmesi sureti ile satın alınması değil de bir televizyon aboneliği tarzında küçük maliyetler ile istediğiniz üsrece bir otomobile sahip olabileceksiniz. Böylece maliyet avantajı kazanırken aynı zamanda bir araba satın alabilmek için uçuk rakamlar ödemenize de gerek kalmayacak. Abonelik mantığı sayesinde aylık periyotlar dahilinde ödeme işlemlerinizi yapacaksınız. Ödeme işlemlerinizi gerçekleştirmediğiniz zamanlarda ise bir araç kullanma şansınız olmayacak. Bu nedenden ötürü de para ödediğiniz takdirde ulaşım aracı kullanabileceksiniz.
YAPAY ZEKA NEDİR?
YAPAY ZEKA NEDİR?
Yapay zeka olarak adlandırdığımız şey aslında bir bilgisayarın ya da bir insanın kontrolünde olan bir robotun çeşitli faaliyetlerini zeki canlılara oranla yerine getirme kabiliyetinin başarı oranına verilen isimdir. Yapay zeka çalışmaları olarak tanımlamakta olduğumuz çalışmalar aslında genel olarak bir insanın düşünme yönteminin analiz edilmesi ile bunun benzeri olarak yönerge geliştirme çabalarının meydana getirilmesi için yürütülen çalışmalardır. Başka bir bakış açısının bize anlatmakta olduğuna göre programlanmış olan bir düşünme girişimi olduğu yönünde görünse de bu faaliyet ve tanımlar günümüz dünyasında büyük bir hız ile gelişmekte ve aynı zamanda öğrenimi mümkün olan zeka anlayışına ve ezbercilikten bağımsız noktalara erişebilecek olan yeni yönelimler oluşturabilmektedir. Yapay Zeka Tanımı İdealize edilmiş olan bir yaklaşıma ve bakış açısının bize anlattıklarına göre insanın zekasına özgü olarak bilinmekte olan algılama durumu, öğrenme durumu, fikir yürütme durumu, düşünme durumu, karar verme durumu ve de çıkarımsama yapma durumu tarzında yüksek derecede bilişsel fonksiyonlar ya da otonom davranışların sergilenilmesi beklenen ve istenen bir yapay işletim sistemidir. Söz konusu olan bu sistem aynı zamanda düşünce üzerinden tepkiler üretebilmekte ve üretmiş olduğu bu tepkileri fiziksel bir açıdan dışa yansıtabilmektedir. Yapay Zeka Tarihçesi Söz konusu olan bu kavramın yani yapay zeka kavramının geçmişine bakıldığında aslında bu geçmişin bilgisayar bilimi kadar eski zamanlara dayanabilmekte olduğunu görmemiz kesinlikle güç olan bir durum değildir ve açık seçik ortadadır. Alan Mathison Turing, bu işin fikir babasıdır ve makinelerin düşünebilme potansiyelini araştırması açısından çok önemli ve büyük hizmetlere de babalık yapmıştır. İkinci Dünya Savaşı’nın bütün harareti ile devam etmekte olduğu zamanlarda kripto yani şifreleme analizlerinin çok büyük bir ihtiyaç haline gelmesi nedeniyle üretilmiş olan elektromanyetik cihazlar sayesinde bilgisayar biliminin ve yapay zeka kavramlarının ortaya çıktığını yani bir nevi doğduğunu görüyoruz. Bununla birlikte söz konusu fikir insanı Turing, NAZİ kuvvetlerinin kullanmakta olduğu Enigma isimli makinen şifrelerinin algoritmasını çözmeye çalışan dünya üzerindeki en büyük ve en iyi matematikçiler arasındadır.
YAPAY ZEKA TÜRLERİ VE SİSTEMLERİ
YAPAY ZEKA TÜRLERİ VE SİSTEMLERİ
Sembolik Yapay Zeka Nedir? Yapay zeka fikrine en çok katkı veren isimlerden birisi olan Simon’ın semboliklik yaklaşımının ardından daha sonraki seneler içerisinde mantık temel alınan çalışmalar bu konu üzerinde gerçekleştirilen çalışma ve araştırmalara temel olan bir duruma gelmiştir. Aynı zamanda programların düzgün bir şekilde çalıştığını kanıtlamak ve başarımlarını meraklılarına gösterebilmek adına birtakım düzenler oluşturulmuş ve bu düzenlerin içerisine bir takım sorunlar ve dünyalar eklenmiştir. Daha sonraki zamanlarda ise bu sorunlar gerçek hayatı hiçbir şekilde temsil etmeyi başaramayan oyuncak ve tamamen kurgu dünyalar olmak ile suçlanmış ve yapay zekanın yalnızca bu alanlarda başarılı olabileceği konusu dilden dile konuşulmaya başlanmıştır. Sibernetik Yapay Zeka Nedir? Yapay sinir ağları olarak tanımlanmakta olan çalışmaların da dahil edildiği sibernetik cephe için de durum ile alakalı farklı bir görüş belirtmek yanlış olacak bir durum olarak karşımıza çıkmaktadır. Zeka davranışlarının benzeştirilebilmesi yolunda ilerlerken sorunların gerçekten ortaya çıkartılıp çözülebileceğinin anlaşılabilmesi adına, program dahilindeki yetersizlikleri de bu açıdan anlayabilmek için pek çok araştırmacı ilk planda araştırmalarına ara vermiş ve durdurmuşlardır. Bu duruma verebilecek olduğumuz en keskin örnek ise yapay sinir ağları konusundaki çalışmaların geliştiricileri tarafından bazı basit problemleri çözemeyeceğinin söylenmesi olmuştur. Sibernetik akım olarak tabir ettiğimiz akımın uğramış olduğu bu mağlubiyetin temel nedeni olarak ise benzer bir şekilde yapay sinir ağının tek katlı bir görevi başarabilmesi ancak bu tek katlı görev ile ilgili olarak vargıların ya da elde edilen sonuçların bir yargıya dönüşmesi sonucunda diğer kavramlar ile ilişkinin kesilmesi durumundan kaynaklanmaktadır. Yapay Zeka Konusundaki Uzman Sistemler Sözünü etmiş olduğumuz her iki akımın da uğramış oldukları başarısızlıklar ve mağlubiyetler bütün sorunları çözebilecek olan genel olarak amaca hizmet adına tasarlanmış olan hizmet sistemlerinin yerine spesifik bir uzmanlık alanı içerisindeki bilgi ile bezenmiş olan programların kullanılabilmesi fikrinin gelişmesine de sebep olmuştur. Bu durum yapay zeka konusunda yeni bir canlanmaya yol açarken kısa süre içerisinde uzman sistemler olarak adlandırılan bir metodoloji geliştirilmiştir.
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