Sitenize Çalışan balon oyun kodu


Div içindeki left yani sol dan ne kadar uzaklaşacağı ve top  yani yukarı dan ne kadar aşağı ineceği  (left:35px; top:36px;) ölçülerini sitenizde yerleştireceğiniz yere göre değiştireceksiniz.  

<div id="html1" style="position:absolute; overflow:hidden; left:35px; top:36px; width:800px; height:650px; z-index:7">

<iframe id="test" height="650" width="800" src="http://cdn.shooter-bubble.com/games/bubble-shooter/?lang=en" frameborder="0" scrolling="no"></iframe></div>

div siz kullanmak isterseniz sadece iframe kısmını alıp ekleyeceksiniz
<iframe id="test" height="650" width="800" src="http://cdn.shooter-bubble.com/games/bubble-shooter/?lang=en" frameborder="0" scrolling="no"></iframe>

Merhaba arkadaşlar, Gülşah Alptekin arkadaşımız bir sayfaya nasıl 2 Nivo slider ekleyebiliriz ile ilgili bir soru sordu… Bende tek sayfada hiç 2 slider kullanmadığım için, sayfada denemelere başladım. 🙂 Çok kaliteli bir soru olduğundan da bu konuyu sayfama taşıdım.  Şimdi size sonucu burada açıklayacağım. İnşallah bu konuyla da hem Gülşah arkadaşımıza hemde bu soruya cevap arayan diğer arkadaşlara da yardımcı olacağım.

Şimdi en basitinden hazır olan nivo slider’ı sitesinden indiriyoruz. Sizlere linki vererekten sizde bu işleme hemen başlayabilirsiniz.  Link :  http://dev7studios.com/plugins/nivo-slider/ . Linte yer alan sayfaya girdikten sonra sayfanın sağ tarafındaki Download jquery plugin yazısına tıklayarak hazır nivo slider’ı bilgisayarımıza indiriyoruz. Sonrasında rarlı dosyadan çıkartarak klasör içerisinde yer alan Demo klasörünün içine giriyoruz ve demo.html  dosyasını web editör programı yardımıyla açıyoruz.

html sayfanın içerisinden aşağıdaki satırı buluyoruz.

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/up.jpg" 
alt="" title="This is an example of a caption" /></a>
<img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with 
<a href="#">a link</a>.
</div>
</div>

bu satırdaki kodlar 2. slider içinde geçerli olduğundan bu kodların hemen altına yine bu satırın kodlarını kopyalayarak yapıştırıyoruz. Ben alt alta yaptığım için altına yapıştırdım. Siz  istediğiniz div’in içine yapıştırabilirsiniz. Kısacası yukarıdaki kodların tamamını kopyalayarak yine altına yapıştırıyorum.

 Böylece 2. slider kodlarını 1. slider kodunun altına yerleştirmiş oldum. Sonrasında yukarıdaki kırmızı yazılmış kodlara dikkat etmişsinizdir. Kopyaladığımız 2. slider’ın kodlarına gelip yukarı kırmızı yazılı kodlarda ki  <div id=”slider2″ class=”nivoSlider”> slider olan yazıyı slider2 olarak değiştiriyoruz.  Son olarakta slider2 ‘yi eklediğimiz için en altta yer alan ;

$(window).load(function() {
$('#slider').nivoSlider();
});

 Satırını aşağıdaki gibi değiştiriyoruz.

$(window).load(function() { $('#slider').nivoSlider(); $('#slider2').nivoSlider(); });

Değiştirmemizin nedeni ise 2 slider eklediğimiz içindir. Bu şekilde sayfanıza istediğiniz kadar slider ekleyebilirsiniz. Yapmanız gerekenlerin tümü bundan ibaret. İnşallah yardımcı olabilmişimdir. Yapamayan arkadaşlar olursa bu başlık altından kaynak dosyalarını isteyebilirler.

Anlatım : Ömer BOZALAN

Kolay gelsin.

HTML Editörleri

HTML Editörü ne zaman kullanmalısınız?

1. Geliştiriciler, kodları üzerinde tam kontrole sahip olmak ve web sitelerini kolayca oluşturmak istediklerinde HTML editörlerini kullanmayı tercih ederler.

2. HTML editörleri, HTML hakkında çok fazla bilgisi olmayan ve ayrıca kaynak kodlarını hızlı bir şekilde oluşturması gereken kullanıcılar için büyük önem taşımaktadır.

3. HTML editörleri, geliştiricilerin yaptığı küçük hataları sözdizimi düzeltme, otomatik tamamlama, basit düzenleme vb. ile başarılı bir şekilde gizleyip düzelttikleri için kolaylık açısından oldukça faydalıdır.

HTML Editörlerini kullanmanın avantajları

1. Kullanıcıların sözdizimlerini kolayca kontrol edebilmelerine, sık kullanılan HTML etiketlerini ve yapılarını eklemelerine ve otomatik tamamlama sağlamalarına olanak sağladığı için büyük fayda sağlarlar.

2. HTML editörü aracılığıyla üretilen kod XML, JavaScript, vb. gibi diğer dillere çevrilebilir. Örneğin-NVU editörü bu çeviri işlevini sağlar.

3. Web sitesi geliştirme çok yorucu ve zahmetli olabilir. Çevrimiçi HTML düzenleyicilerin yardımıyla web sitelerini kolayca ve daha hızlı bir şekilde oluşturmak mümkündür.

4. HTML editörleri geliştiriciye tam kontrol sağlar, dolayısıyla kaynak koduna daha derinlemesine inmesine ve gizli ayrıntıları bulmasına yardımcı olur.

5. HTML editörleri kullanıcı dostu ve estetik bir tasarım deneyimi sağlar.

6. HTML editörleri, kodlama sürecini kolaylaştırmak için sözdizimi vurgulama, kod katlama ve hatta verimliliği büyük ölçüde artıran bir hata denetleyicisi gibi bir dizi özellik içerir.

7. Genellikle sürüm kontrolünü geliştirmek için Git ve geliştiriciler tarafından kod tabanında yapılan değişiklikleri izlemenin diğer yolları da dahil olmak üzere diğer sistemlerle birlikte çalışırlar.

HTML Editörlerinin Türleri

Genel olarak iki tür HTML Editörü vardır:

HTML Editörlerinin Türleri

1. Metinsel HTML Editörü

Bunlar geliştiricilerin kodlarını yazıp derleyebildiği metin tabanlı editörlerdir. Kod bizim yazdığımız şekilde görünür, bu nedenle temel HTML bilgisi gerektirir. Bu editörlerden bazıları ayrıca bir proje oluşturma, web ile ilgili tüm dosyaları yönetme vb. özellikler de sağlar. HTML Metin editörlerine örnek olarak Notepad++, VSCode, Sublime Text verilebilir.

2. WYSIWYG HTML Editörü

'Ne görüyorsanız onu alırsınız' tam biçimidir. WYSIWYG, kaynak kodunun çıktısının önizlemesini yani bir tarayıcıda nasıl görüneceğini sağlayan düzenleyicilerdir. Çoğunda kullanımı kolaylaştıran bir sürükle ve bırak özelliği mevcuttur. HTML hakkında herhangi bir hardcore bilgi gerektirmez, böylece teknik olmayanların web sitelerini kolayca geliştirmesini sağlar. Örnekler arasında Adobe Dreamweaver, Amaya, BlueGriffon vb. bulunur.

HTML, Notepad veya TextEdit gibi basit metin editörlerinde yazılabilir, ancak yaygın olarak kullanılan diğer editörler şunlardır:

1. Atom

Atom açık kaynaklı ve ücretsiz bir kod düzenleyicisidir. 2014 yılında GitHub tarafından yayınlanmıştır.

Atom'un Temel Özellikleri

81 adet hazır paketin yanı sıra 8.700 adet kurulabilen ek paket bulunuyor.

Açık kaynaklı bir metin editörü olduğundan kodları GitHub'da mevcut ve geliştiriciler tarafından kaynak kodunu genişletmek ve düzenlemek için kullanılabiliyor.

Atom, tek bir arayüz içerisinde birden fazla bölümü destekleyerek geliştiricilerin yan yana kod yazmasına yardımcı olur.

Ayrıca, platformlar arası düzenlemenin yanı sıra esnek otomatik tamamlama ve sözdizimi düzeltme özelliği de sağlar.

Geliştiricilere Sağlanan Avantajlar

Atom'un teletip özelliği, geliştiricilerin takım arkadaşlarıyla etkileşime girmesine ve kodlarını gerçek zamanlı olarak paylaşmasına olanak tanır.

Çapraz platform düzenleme özelliği geliştiricilerin farklı İşletim Sistemlerinde çalışabilmelerine olanak tanır.

Geliştiriciler yeni paketler kurabilir ve kendi paketlerini oluşturabilirler.

Akıllı otomatik tamamlama, daha hızlı ve daha akıcı kodlamayı kolaylaştırır.

Birden fazla bölme, farklı dosyalardaki kodları düzenlemenize ve karşılaştırmanıza yardımcı olur.

Geliştirme Ortamı – Atom, kodun sonuçlarını önizleme seçeneğiyle estetik, kullanıcı dostu bir ortam sağlar. atom'u indirmek kolaydır .

2. Not Defteri++

Notepad++, başlangıçta Windows tabanlı bilgisayarlar için geliştirilen ücretsiz, açık kaynaklı, çok dilli bir kod düzenleyicisidir. Düzenleme bileşeni olarak 'Scintilla'yı kullanır ve C++ ile yazılmıştır.

Notepad++'ın Temel Özellikleri

Hafif bir yazılımdır yani daha küçük program boyutu. Mobil cihazlarda uygulama olarak da mevcuttur ve kaynak kodu GitHub'da mevcuttur.

Açık kaynaklı bir kod editörü olduğu için genişletilebilir ve kullanıcılar ihtiyaçlarına göre işlevler ekleyebilir veya farklı topluluklardan eklentiler ekleyebilirler.

Özelleştirilebilir olması kullanıcıların tercihlerine göre özellikleri kişiselleştirmelerine olanak tanır.

Geliştiricilere Sağlanan Avantajlar

Renk kodlamalı süper hafif bir editördür.

Geliştiriciler arayüzünü kendi tercihlerine göre özelleştirebiliyorlar.

Genişletilebilir olması sayesinde geliştiriciler eklentiler ekleyebilir ve kendi eklentilerini oluşturabilirler.

Geliştirme Ortamı – Notepad++, çoğu Windows yazılımı gibi tanıdık bir ortama sahiptir ve minimalist bir arayüze sahiptir. Temaları ve renk kodlamasını değiştirmeyi destekler. Notepad++'ı kolayca indirebilir ve kullanabiliriz.

3. Textual HTML Editor

Python API'li çapraz platformlu bir editördür. Son sürümü 29 Ocak 2013'te yayınlanmıştır.

Temel Özellikler

Eş zamanlı düzenleme imkânı vardır, yani belirli bir zamanda birden fazla alanda değişiklik yapmak mümkündür.

Komut paleti, dosya değiştirme, sembollere gitme, çoklu düzenleme, hizalama, parantez vurgulama vb. gibi birçok eylem sağlar.

Sublime, freemium yazılım kategorisine giriyor, yani tüm özelliklerinden yararlanmak için ek ücret ödememiz gerekiyor.

Sublime'ın bazı paketleri açık kaynaklıdır ve git'te mevcuttur.

Geliştiricilere Sağlanan Avantajlar

'Her Şeye Git' özelliği, geliştiricilerin sadece birkaç tuş vuruşuyla dosyaları açmasını ve anında kelimelere, satırlara veya sembollere gitmesini sağlıyor.

Çoklu seçim özelliği geliştiricilere aynı anda birçok değişiklik yapma, örneğin aynı anda birçok satırı düzenleme olanağı sağlıyor.

Bölünmüş Düzenleme, dosyaların yan yana düzenlenmesine izin vererek geliştirme hızını artırır.

Basit JSON dosyalarını kullanarak Sublime'da Kolay Özelleştirme.

Geliştirme Ortamı – Sublime Text, geliştiriciler tarafından özelleştirilebilen, sofistike ve estetik bir geliştirme ortamı sağlar.

Sublime Text 3'ün kurulumunu daha sonraki HTML Eğitimimizde ele alacağız.

4. Adobe Dreamweaver CC

Adobe Dreamweaver CC, Adobe Inc. tarafından geliştirilmiştir. Ancak kapalı kaynaklı bir yazılımdır ve yalnızca Adobe ekosistemi içerisinde iyi çalışır.

Temel Özellikler

Adobe'nin estetik bulut kütüphanelerini kullanarak renk, grafik, katman vb. özelliklerin tanıtımıyla web tasarımı alanında önemli bir araç olduğu kanıtlanmıştır.

Hem metin editörü olarak hem de WYSIWYG (ne görüyorsan onu alırsın) editörü olarak kullanılabilir, yani kod görsel rehberle veya rehbersiz düzenlenebilir.

Bu, geliştiricilere kodun nihai sonuçlarını önizleme gibi ek özellikler sağlar.

Full-stack geliştirme için faydalıdır.

Geliştiricilere Sağlanan Avantajlar

Adobe Dreamweaver dinamik bir görüntüleme sağlar ve her ekrana sığabilen web sayfaları oluşturur.

Önizleme özelliği geliştiricilerin web sayfalarının yayınlamadan önce tam olarak nasıl görüneceğini bilmelerini sağlar.

Çalışma alanı özelleştirilebilir olduğundan, geliştiriciler yalnızca kodlama yapmak için ihtiyaç duydukları araçları görebilirler.

Windows için çoklu monitör desteği özelliği web sayfalarını birden fazla monitörde görüntülemenize yardımcı olur.

Geliştirme Ortamı – Adobe tarafından oluşturulan Dreamweaver cc, çalışma alanı için muhteşem bir tasarım ve düzen sağlar. Herkes Dreamweaver CC'yi kolayca indirebilir ve kullanabilir.

5. Visual Studio Kodu

Visual Studio Code, Microsoft tarafından çok platformlu ve çok dilli bir yazılım olarak geliştirilmiştir.

Temel Özellikler

Dahili Git komutları, doğrudan editörden kod hata ayıklama, sunucudan web'in canlı önizlemesi, IntelliSense kullanarak akıllı kod tamamlama ve daha birçok özelliğe sahiptir.

Geliştiricilerin en popüler araçlarından biri olan ücretsiz ve açık kaynaklı bir yazılımdır.

Visual Studio Code'un en belirgin özelliği konsolda hata ayıklama komutlarının yürütülmesini sağlayan etkileşimli hata ayıklayıcısıdır.

VS Code'un IntelliSense'inin kod anlaşılması, kodda gezinme ve yeniden düzenleme açısından son derece yararlı olduğu kanıtlanmıştır.

Geliştiricilere Sağlanan Avantajlar

VS Code çekici bir kullanıcı deneyimine ve özelleştirilebilir bir çalışma alanına sahiptir.

IntelliSense, değişkenlere, fonksiyonlara ve içe aktarılan kütüphanelere dayalı akıllı tamamlamalar sağlar.

VS Code ile kodu editörden, hiçbir zorluk çekmeden hata ayıklamak mümkündür.

Git commit'leri doğrudan editörden yapılabilir.

Yeni diller, hata ayıklayıcılar veya diğer ek hizmetler eklemek için uzantılar mevcuttur. Ayrı işlemler olarak çalışırlar, bu nedenle düzenleyicinin hızından ödün verilmez.

Geliştirme Ortamı – VS Code, geliştiricilerin tema, düzen, renkler vb.'ni kolayca ayarlayabileceği özelleştirilebilir bir kullanıcı ortamı sağlar. Sanal stüdyo kodunu indirmek çok kolay ve hızlı bir işlemdir.

 Sublime Text 3 Windows için

Sublime Text 3, sublime text'in güncel sürümüdür. 

Not: HTML kodlarını içeren dosya .html uzantısıyla kaydedilmelidir.

Öncelikle Sublime Text'i indirmeniz gerekiyor .

Kaynak kodu yazma: Sublime Text en yaygın olarak sıfırdan Python kodu yazmak için kullanılır . Ancak, C++ programları yazmak için de kullanılabilir. Bazı kişiler bunu Java kodu yazmak için kullanabilirken, bu önerilmez. Neyse ki, TIOBE Endeksine göre Python en popüler programlama dilidir .  

Kaynak kodunu düzenleme: Sublime Text'in kod yazmak için yaygın kullanımının ötesinde, halihazırda var olan bir programın kaynak kodunu düzenlemek için de kullanılabilir. Ancak, daha karmaşık bir araç olduğu için geleneksel kelime işlemcilerle karıştırılmamalıdır. 

Birden fazla dosyayı düzenleme: Sublime Text'in en iyi özelliklerinden biri, aynı anda birden fazla metin dosyasını ve kod satırını düzenlemek için kullanabilmenizdir. Daha sonra proje dosyalarını platformda bulunan farklı düzenlerle karşılaştırabilirsiniz. Her metin kaynak kodu düzenleyicisinde bu özellik yoktur. 

Kod ölçümlerini analiz etme: Komut paletinden kod ölçümlerini analiz etmek için Sublime kod düzenleyicinizi kullanabilirsiniz. Bu ölçümler, yazdığınız koda dair içgörülerdir. Sublime Text bunları analiz etmenize yardımcı olur ve ayrıntılı ancak anlaşılması kolay bir rapor sunar. 

GitHub'dan kod paylaşın: Sublime Text'te yazılan veya düzenlenen kod, yazılım Git yetenekleriyle birlikte geldiği için komut paletinden doğrudan GitHub'a paylaşılabilir. GitHub'ı Git deposu olarak kullanan diğer üyeler , yükledikten sonra kod veya paket denetimini görüntüleyebilir ve önerilerde bulunabilir.

Özet

HTML editörleri kullanıcılara büyük bir kolaylık ve ek işlevler sunarak web geliştirmeyi rahatça sürdürmelerini sağlar.HTML editörlerinin amacı yalnızca HTML geliştiricileri değildir. XML, JavaScript, PhP, CSS vb. gibi diğer teknolojileri kodlamak ve dahil etmek için faydalıdırlar.

HTML, “HyperText Markup Language” kelimelerinin kısaltmasıdır. Web sayfalarının temelini oluşturan bir işaretleme dilidir. HTML kodları, metin, resim, video gibi öğelerin bize web tarayıcılarında nasıl görüntüleneceğini tanımlar.

HTML ne demek derseniz, bir programlama dili değildir, yani belgeleri biçimlendirme ve organize etme yeteneği sunan bir işaretleme dilidir. Microsoft Word gibi düşünebilirsiniz, çünkü HTML, içeriği düzenlemenizi ve web sayfalarını şekillendirmenizi sağlar.

HTML kullanarak, basit kod yapıları olan etiketler ve nitelikler aracılığıyla kolaylıkla web sayfalarınızı oluşturabilirsiniz. Örneğin, aşağıda ki gibi <p> etiketleri arasına metin ekleyerek paragraf oluşturabilirsiniz:

<p>HTML'de paragraf bu şekilde eklenir..</p>

<p>Birden fazla paragraf ekleyebilirsiniz!</p>

Kısaca HTML, web sitesi oluşturmayı hemen hemen her seviyedeki kullanıcı için kolaylaştıran bir dil olarak bilinir.

HTML’nin Temel Yapısı: Etiketler ve Öznitelikleri

HTML, metnin nasıl biçimlendirileceğini ve sayfadaki öğelerin nasıl yerleştirileceğini belirleyen etiketlerden oluşur. Her etiket, açılış ve kapanış olmak üzere iki parçadan oluşur. Örnek verecek olursak, bir başlık oluşturmak için <h1> ve </h1> etiketleri kullanılır.

Etiketler, öznitelik adı verilen ek bilgiler içerebilir. Örneğin, bir resmin boyutunu belirlemek için width ve height öznitelikleri kullanılır.

Aşağıdaki kod, basit bir web sayfası oluşturmak için HTML’nin nasıl kullanıldığını gösterir:

<!DOCTYPE html>

<html lang="tr">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Merhaba Dünya!</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <h1>Merhaba Dünya!</h1>

  <p>Bu bir paragraf.</p>

  <ul>

    <li>Liste öğesi 1</li>

    <li>Liste öğesi 2</li>

    <li>Liste öğesi 3</li>

  </ul>

  <a href="https://www.google.com">Google'a Git</a>

  <img src="resim.jpg" alt="Resim">

</body>

</html>

Farklı Tarayıcılarda Görüntüleme: Uyumluluk ve Hata Ayıklama

HTML kodları, farklı tarayıcılarda biraz farklı şekilde görüntülenebilir. Bu nedenle, kodlarınızı farklı tarayıcılarda test etmeniz ve uyumluluk sorunlarını gidermeniz önemlidir.

HTML kodlarında hata yapılması yaygındır. Hata ayıklama, hataları bulmanıza ve düzeltmenize yardımcı olacak araçlar ve teknikler sunar.

En Çok Kullanılan HTML Etiketleri

Html etiketleri 2 ayrı şekilde ele alınmaktadır. Block-level ve inline tags.

Block-level etiketlere en iyi örnek başlıklar, paragraflar ve listeleme gösterilebilir. Bir döküman içerisinde tüm alanı kullanır ve her zaman yeni satırlar başlatır.

Inline tags etiketleri için ise linkler, spanlar örnek gösterilebilir. Block-level aksine ihtiyacı kadar alan kullanır ve yeni bir satır başlatmazlar. Genellikle biçimlendirmeden sorumludurlar.

Block-Level Etiketler

<html>

  <head>

    <!-- Meta Bilgileri -->  

  </head>

  <body>

    <!-- Sayfa İçeriği -->

  </body>

</html>

Html dosyası için gerekli 3 önemli blok etiketi vardır.

<html> </html> etiketleri her bir html sayfasın başlatan ve bitiren etiketlerdir.

<head> </head> etiketleri ise o sayfanın bilgisini sunan etiketlerdir. Sayfa başlığı, açıklamalar ve karakter kodlama örnek gösterilebilir.

Son olarak <body> </body> etiketleri ise sayfada görünen içerikleri eklemek için kullanılır.

Diğer etiketler:

Başlıklar için kullanılan title etiketleri ve açıklama için paragraf örnek gösterilebilir. paragraflar <p>örnek açıklama</p> şeklinde kullanılır. Başlıklar ise; ihtiyaca göre h1, h2,h3,h4,h5,h6 şeklinde maksimum altı farklı şekilde kullanılır. Önem derecesine göre en önemli h1’den başlayıp h6’ya kadar kullanılmaktadır. bir sayfada h1 etiketi sayfa başlığı olarak bir adet kullanılır. 2. seviye önemli başlıklar h2 kullanılır. Örnek <h1>sayfa başlığı</h1> <h2>alt başlık</h2> şeklindedir.

Sıralı Listelemeler için <ul> içerisinde <li> şeklinde kullanılır. Örneğin: <ul> <li>Madde 1</li> <li>Madde 2</li> </ul> şeklindedir.

Son olarak divison etiketler HTML içinde, bir belgenin belirli bir bölümünü veya gruplarını tanımlamak için kullanılan bir blok seviye etikettir. Bu etiket, içerisinde farklı türde içeriklerin (metin, resim, diğer HTML etiketleri vb.) bir arada bulunabileceği bir konteyner oluşturur.

 <div class="container">

        <h2>başlık</h2>

        <p>açıklama</p>

    </div>

Inline Etiketler

Bu etiketler genellikle metin özelleştirme için kullanılır. Bir yazıda kalın yapma, link verme, resim ekleme ve italik yapma gibi durumlarda kullanılır.

Link vermek için:

<a href="barisdayak.com">Daha fazla bilgi</a>

Resim eklemek için:

<img src="/resimler/ornekresim.png" alt="Ornek resim">

Metin özelleştirme için:

<p>Bu bir <strong>örnek</strong> yazıdır.</p> veya <p>Bu bir <em>örnek</em> yazıdır.</p>

HTML’in Geçmişi ve Geleceği

HTML’in Devrimi: Web’in Doğuşu ve Gelişimi

1980’lerin sonlarında, İsviçre’de CERN araştırma enstitüsünde Tim Berners-Lee tarafından geliştirilen HTML, internetin temelini oluşturarak web’in doğmasına ve gelişmesine öncülük etti.

İlk web sayfaları oldukça basit metin tabanlı sayfalar olsa da, HTML zamanla gelişerek görseller, videolar, sesler ve interaktif öğeler gibi daha karmaşık içerikleri de desteklemeye başladı. Bu sayede web, bilgi paylaşımı ve iletişim için güçlü bir araç haline geldi.

HTML5’in Yenilikleri: Semantik Anlam ve Gelişmiş Özellikleri

2008 yılında yayınlanan HTML5, HTML’ye birçok yeni özellik kazandırdı. Bu yenilikler arasında:

Semantik anlamların eklenmesi: HTML5, web sayfalarının içeriğini daha iyi tanımlamak için semantik etiketler ve öznitelikler sunar. Bu sayede arama motorları ve tarayıcılar web sayfalarını daha iyi anlayabilir ve kullanıcılara daha iyi bir deneyim sunabilir.

Gelişmiş özellikler: HTML5, medya oynatma, canvas gibi gelişmiş özellikler ve mobil uyumluluk sunar. Bu sayede web sayfaları daha zengin ve etkileşimli hale geldi.

Mobil uyumluluk: HTML5, web sayfalarının mobil cihazlarda da düzgün bir şekilde görüntülenebilmesi için özellikler sunar. Bu sayede web, mobil cihazlar için de önemli bir platform haline geldi.

HTML’in Geleceği: Yeni Teknolojiler ve Uyum

HTML, web’in temelini oluşturmaya devam edecek ve yeni teknolojilerle uyumlu hale gelecektir. WebAssembly gibi yeni araçlar, HTML’nin daha güçlü ve performant hale gelmesini sağlayacaktır. Ayrıca, yapay zeka ve sesli komut gibi yeni teknolojilerin HTML ile entegre olması da web’in geleceği için önemli bir gelişmedir.

HTML Öğrenmek

HTML Öğrenmenin Faydaları: Web Geliştirmenin Başlangıcı

HTML öğrenmek, web geliştirmeye başlamak için ideal bir yoldur. HTML, web sayfalarının temelini oluşturur ve diğer web programlama dilleri ile birlikte kullanılabilir. HTML öğrenerek:

Web sayfaları oluşturabilirsiniz.

Web siteleri tasarlayabilirsiniz.

Web uygulamaları geliştirebilirsiniz.

HTML Öğrenme Kaynakları: Online Kurslar, Eğitimler ve Kitaplar

HTML öğrenmek için birçok ücretsiz ve ücretli kaynak mevcuttur. Online kurslar, eğitimler ve kitaplar, HTML’yi öğrenmenin en popüler yollarından biridir.

Pratik Yaparak Gelişme: Örnek Kodlar ve Kendi Projelerinizi Oluşturma

HTML öğrenmenin en iyi yolu pratik yapmaktır. Örnek kodları inceleyerek ve kendi projelerinizi oluşturarak HTML’yi daha iyi öğrenebilirsiniz.

HTML’in Dezavantajları ve Dikkat Edilmesi Gerekenler

HTML’in Sınırlamaları: Dinamik İşlevler ve Görsel Tasarım

HTML, statik web sayfaları oluşturmak için ideal bir dildir. Ancak, dinamik içerikler oluşturmak veya karmaşık görsel tasarımlar yapmak için yeterli değildir. Bu gibi durumlarda JavaScript ve CSS gibi diğer web programlama dillerini de kullanmak gerekir. Ayrıca Ajax hakkında bilgi edinmek isteyenler için Ajax nedir ? konusuna göz atabilirsiniz.

Hata Ayıklama ve Sorun Giderme: Yaygın Hatalar ve Çözümleri

HTML kodlama yaparken hata yapmak oldukça yaygındır. Hata ayıklama, hataları bulmanıza ve düzeltmenize yardımcı olacak araçlar ve teknikler sunar. Yaygın HTML hataları şunlardır:

Eksik veya yanlış etiket kullanımı

Yanlış yazılmış öznitelikler

Yazım hataları

Mantıksal hatalar

Bu hataları çözmek için aşağıdaki adımları izleyebilirsiniz:

Kodunuzu dikkatlice gözden geçirin.

Tarayıcınızın hata konsolunu kontrol edin.

Online hata ayıklama araçlarını kullanın.

HTML ile ilgili forumlarda veya yardım gruplarında yardım isteyin.

Popüler HTML Editörleri

Notepad++

Notepad++, Windows için ücretsiz ve açık kaynak kodlu bir metin editörüdür. HTML kodlama için ideal bir araçtır ve aşağıdaki gibi birçok özelliğe sahiptir:

Sözdizimi vurgulama

Otomatik tamamlama

Kod katlama

Eklenti desteği

Sublime Text

Sublime Text, Windows, Mac ve Linux için ücretli bir metin editörüdür. HTML kodlama için güçlü bir araçtır ve aşağıdaki gibi birçok özelliğe sahiptir:

Çoklu seçim

Çoklu satır düzenleme

Proje yönetimi

Eklenti desteği

Adobe Dreamweaver CC

Adobe Dreamweaver CC, Windows ve Mac için ücretli bir görsel web geliştirme ortamıdır. HTML kodlama için kapsamlı bir araçtır ve aşağıdaki gibi birçok özelliğe sahiptir:

Görsel düzenleme

Kod yardımı

Hata ayıklama araçları

Site yönetimi

Editör Seçim Yaparken Dikkat Edilmesi Gerekenler:

Bir HTML editörü seçerken aşağıdaki faktörleri göz önünde bulundurabilirsiniz:

Kullanım kolaylığı: Editörün kullanımı kolay ve öğrenmesi basit olmalıdır.

Özellikler: Editör, HTML kodlama için gerekli olan tüm özelliklere sahip olmalıdır.

Fiyat: Editör ücretsiz veya uygun fiyatlı olmalıdır.

Platform: Editör, kullandığınız işletim sistemiyle uyumlu olmalıdır.

Sıkça Sorulan Sorular

HTML Nedir?

HTML, “HyperText Markup Language” kelimelerinin kısaltmasıdır. Web sayfalarının temelini oluşturan bir işaretleme dilidir. HTML kodları, metin, resim, video gibi öğelerin web tarayıcılarında nasıl görüntüleneceğini tanımlar.

HTML Ne İşe Yarar?

HTML, web sayfalarının temelini oluşturarak web’in işleyişini sağlar. HTML kodları ile:

* Web sayfalarının yapısını ve içeriğini oluşturabilirsiniz.

* Metnin biçimlendirilmesini sağlayabilirsiniz.

* Resim, video, ses gibi multimedya içerikleri ekleyebilirsiniz.

* Bağlantılar oluşturabilirsiniz.

* Formlar oluşturabilirsiniz.

HTML Nasıl Öğrenilir?

HTML öğrenmek için birçok ücretsiz ve ücretli kaynak mevcuttur.

HTML öğrenmenin en iyi yolu pratik yapmaktır. Örnek kodları inceleyerek ve kendi projelerinizi oluşturarak HTML’yi daha iyi öğrenebilirsiniz.

Html Öğrenmek Kolay mı ?

Evet, tabii ki!

HTML öğrenmek, bir programlama dili öğrenmekten çok daha kolaydır çünkü HTML bir işaretleme dili olarak kabul edilir. İşaretleme dilleri, belirli bir yapı içinde veri veya içerik tanımlamak için kullanılır. HTML, web sayfalarını biçimlendirmek ve yapılandırmak için kullanılan temel bir işaretleme dilidir.

Basit sözdizimi, kolay anlaşılabilirlik, zengin kaynak, kolay pratik yapabilme ve yaygın kullanımından dolayı öğrenmede büyük avantajları vardır.

Ücretli – Ücretsiz Html Eğitim Kaynakları

W3Schools

Mozilla Developer Network

Udemy

Kimler HTML Öğrenmeli?

HTML, web ile ilgilenen herkes için faydalı bir dildir. Özellikle:

* Web geliştiriciler: Web sitesi ve web uygulamaları geliştirmek için HTML’ye ihtiyaç duyarlar.

* Web tasarımcılar: Web sayfalarının görsel tasarımını yapmak için HTML’yi temel alırlar.

* Pazarlamacılar: Dijital pazarlama ve SEO çalışmaları için HTML’nin temellerini bilmeleri faydalıdır.

* Öğrenciler: Bilgisayar bilimi veya web tasarımı gibi alanlarda eğitim gören öğrenciler için HTML öğrenmek önemlidir.

Sadece HTML ile Web Sitesi Yapılabilir mi?

Evet, sadece HTML ile basit web siteleri yapmak mümkündür. Ancak, daha karmaşık ve görsel açıdan zengin web siteleri için CSS ve JavaScript gibi diğer web programlama dillerini de kullanmak gerekir.

En Çok Kullanılan HTML Kod Örnekleri Nelerdir?

* Başlıklar: <h1>, <h2>, …, <h6>

* Paragraflar: <p>

* Listeler: <ul>, <ol>, <li>

* Bağlantılar: <a href=”link”>

* Resimler: <img src=”ornek-resim.jpg” alt=”Resim”>

index.html Nedir?

index.html, bir web sunucusunda ana sayfa olarak kullanılan HTML dosyasıdır. Bir web sitesini ziyaret ettiğinizde, tarayıcınız öncelikle bu dosyayı arar ve görüntüler.

* Genellikle web sitesinin ana içeriğini ve navigasyon menüsünü içerir.

* Web sitesinin diğer sayfalarına bağlantılar içerir.

* Web sitesinin başlığını ve meta verilerini içerir.

* Web sitenizin ilk izlenimidir.

* Kullanıcıların web sitenizin içeriğini ve navigasyonunu keşfetmesine yardımcı olur.

* Arama motorlarının web sitenizi dizine eklemesine yardımcı olur.

HTML ile CSS ve JS Arasındaki Bağlantı Nedir?

HTML, CSS ve JavaScript, web sayfaları oluşturmak için kullanılan üç temel web programlama dilidir.

HTML: Web sayfalarının temelini oluşturur ve metin, resim, video gibi içeriklerin nasıl görüntüleneceğini tanımlar.

CSS: Web sayfalarının görsel tasarımını kontrol eder ve renk, yazı tipi, boyut gibi öğeleri düzenler.

JavaScript: Web sayfalarına interaktiflik katar ve animasyonlar, oyunlar, formlar gibi dinamik öğeler oluşturmaya yardımcı olur.

Bu üç dil birlikte çalışarak:

* Zengin ve etkileşimli web sayfaları oluşturmayı sağlar.

* Kullanıcı deneyimini iyileştirir.

* Web sitelerini daha işlevsel hale getirir.

HTML ile CSS ve JS arasındaki bağlantı:

* HTML, CSS ve JavaScript kodları aynı HTML dosyasında kullanılabilir.

* HTML kodları, CSS ve JavaScript kodlarına referanslar içerebilir.

* CSS ve JavaScript kodları, HTML elementlerini seçmek ve manipüle etmek için kullanılabilir.

Kaynak: https://barisdayak.com/html-dunyasina-giris-html-nedir/