HTML Nedir? HTML Kodları Nasıl Yazılır?

İnternet ile haşır neşir olan birçok kişi HTML’ yi duymuş veya görmüştür. Peki HTML nedir? Gelir birlikte inceleyelim.

HTML’ in açılımı, HyperText Markup Language. HTML nedir sorusuna cevap verecek olursak, evrensel olarak desteklenen etiketlere sarılmış unsurları kullanarak web sayfanızdaki içeriğin yapısını tanımlamanıza izin veren bir sistemdir. Yani, şık ve iyi işleyen web siteleri oluşturmak için CSS ve JavaScript’ e ihtiyacınız vardır. Ancak, bunların amaçlandığı gibi çalışmasını sağlamak için önce HTML’nin ne olduğunu anlamanız gerekir. Tıpkı bir evin bir temeli olduğu gibi, bir web sayfasının da tabanı HTML’ dir.

HTML’ nin Gelişimi

HTML ilk ortaya çıktığı günden bugüne kadar birçok gelişme gösterdi. HTML 1, bir CERN bilim adamı Tim Berners-Lee tarafından oluşturuldu. İlk hedefi, belgeleri farklı bilgisayarlarda paylaşmaya ve kullanmaya izin veren İnternet tabanlı bir hiper metin sistemiydi. 1991’de tanıtılan HTML 1’in yalnızca 18 etiketi vardı ve bunların çoğu Standart Genelleştirilmiş Biçimlendirme Diline (SGBD) dayanıyordu.

HTML 2, 1995’te sunuldu ve birkaç özelliği daha vardı. Yeni oluşturulan etiketlerin yavaş uygulanması nedeniyle HTML 3 taslağı terk edildi. Bu nedenle, World Wide Web Konsorsiyumu HTML’ yi standartlaştırmak için yola çıktı. 1997 yılında, o zamanlar bir standart haline gelen HTML 3.2 yayınlandı.

HTML 4, stili kodlamadan ayırıp eskisini CSS’ ye bıraktığı için büyük bir adımdı. HTML 4.01 adında gözden geçirilmiş bir sürüm, HTML 4.0’da bulunan küçük hataları düzelterek ve birkaç kullanışlı özellik ekleyerek 1999’da çıktı.

HTML 5, bugün bildiğimiz HTML’ dir.

HTML5 Nedir?

HTML5 ilk olarak 2008’de yayınlandı, ancak belirtim süreci 2014’e kadar tamamlanmadı. Şu an itibariyle bu biçimlendirme dili her yeni web sitesinin temelini oluşturuyor. HTML ile HTML5’i karşılaştırırken, ilk büyük fark, destek düzeyidir. HTML5 ile oluşturulan web siteleri, tüm büyük tarayıcılarda ve farklı platformlarda da kullanılabilir. Bu, kullanıcıların çoğunun mobil cihazlar aracılığıyla Web’e eriştiği 21. yüzyılda hayati önem taşımaktadır.

HTML Ne İşe Yarar?

HTML (HyperText Markup Language), internetin temelini oluşturan ve web sayfalarının yapısını belirleyen bir işaretleme dilidir. HTML, web sayfalarının içeriğini ve yapısını tanımlamak için kullanılır. İşte HTML’in başlıca işlevleri:

1. Web Sayfası Yapısını Oluşturma: HTML, bir web sayfasındaki başlıklar, paragraflar, listeler ve tablolar gibi temel yapısal elementleri tanımlamak için kullanılır. Bu elementler sayesinde, içerik düzenli ve okunabilir bir format alır.
2. Bağlantılar Oluşturma: HTML, web sayfaları arasında bağlantılar oluşturarak internetin temel özelliği olan “hipermetin” yapısını sağlar. <a> etiketi ile oluşturulan bu bağlantılar, kullanıcıların farklı sayfalara geçiş yapmasını sağlar.
3. Görsel ve Multimedya Ögeler Ekleme: HTML, görsel ve multimedya ögeleri (resimler, videolar, ses dosyaları) eklemek için kullanılır. Bu, web sayfalarının daha etkileşimli ve görsel açıdan zengin olmasını sağlar.
4. Formlar Aracılığıyla Kullanıcı Girdisi Alma: HTML formları, kullanıcılardan bilgi almak ve bu bilgileri sunucuya göndermek için kullanılır. Bu özellik, çevrimiçi formlar, arama kutuları ve kullanıcı giriş alanları oluşturmakta önemlidir.
5. Sayfa Düzeni ve Tasarımı: HTML, web sayfasının temel düzenini ve tasarımını belirler. Ancak, görsel stil ve düzen için genellikle CSS (Cascading Style Sheets) ile birlikte kullanılır.
6. Arama Motoru Optimizasyonu (SEO): HTML, web sayfalarının arama motorları tarafından doğru bir şekilde indekslenmesi ve sıralanması için önemlidir. Başlık, meta etiketleri ve semantik işaretleme, sayfanın SEO’sunu iyileştirmede kritik rol oynar.

Kısacası, HTML, web sayfalarının temelini oluşturur ve internetin yapı taşlarından biridir. İçeriğin düzenlenmesi, hipermetin bağlantıları, multimedya entegrasyonu ve kullanıcı etkileşimi için temel bir araç olarak işlev görür.

HTML Nasıl Öğrenilir?

HTML öğrenmek, web geliştirmenin temellerini kavramak için önemli bir adımdır ve birçok kaynak ve yöntemle kolayca başlanabilir. İşte HTML öğrenmek için izlenebilecek adımlar ve kaynaklar:

1. Online Eğitim Platformları: Udemy, Coursera, Khan Academy ve Codecademy gibi platformlar, HTML öğrenmek için başlangıç seviyesinden ileri seviyeye kadar çeşitli kurslar sunar. Bu kurslar, genellikle interaktif öğrenme deneyimleri ve uygulamalı örnekler içerir.
2. Resmi Dokümantasyon ve Kılavuzlar: W3Schools, MDN Web Docs (Mozilla Developer Network) gibi siteler, HTML ile ilgili temel bilgileri, örnekleri ve en iyi uygulamaları sağlar. Bu siteler, HTML etiketleri ve kullanım şekilleri hakkında detaylı bilgiler sunar.
3. Kitaplar ve Eğitim Materyalleri: HTML öğrenmek için yazılı kaynaklar ve kitaplar da oldukça yararlıdır. “HTML & CSS: Design and Build Websites” gibi başlangıç seviyesinden ileri seviyeye kadar farklı düzeylerde kitaplar bulunmaktadır.
4. Pratik Yapmak: HTML öğrenmenin en etkili yollarından biri, kendi projeleriniz üzerinde çalışmaktır. Basit bir web sayfası oluşturarak başlayabilir ve zamanla daha karmaşık yapılar deneyebilirsiniz.
5. YouTube Dersleri ve Videoları: YouTube, HTML öğrenmek için ücretsiz bir kaynaktır. Burada, adım adım takip edilebilecek video dersler ve uygulamalı örnekler bulabilirsiniz.
6. Bloglar ve Makaleler: Web geliştirme ile ilgili bloglar ve makaleler, HTML konusunda ipuçları ve güncel bilgiler sunar. Bu kaynaklar, HTML öğrenirken karşılaşılabilecek sorunlara çözümler ve ileri seviye konular hakkında bilgi verebilir.
7. Uygulamalı Online Araçlar: CodePen ve JSFiddle gibi online kod editörleri, HTML kodlarınızı gerçek zamanlı olarak yazıp test etmenize olanak tanır. Bu araçlar, özellikle HTML ile birlikte CSS ve JavaScript denemeleri yaparken faydalıdır.
8. Topluluk ve Forumlar: Stack Overflow, Reddit’in web geliştirme toplulukları gibi forumlar, sorularınızı sormak ve diğer geliştiricilerle bilgi alışverişinde bulunmak için harika yerlerdir.

HTML öğrenmek, genellikle basit ve eğlenceli bir süreçtir. Temel HTML bilgisine sahip olduktan sonra, CSS ve JavaScript gibi diğer web teknolojilerine geçiş yaparak becerilerinizi genişletebilirsiniz.

Temel Bir HTML Belgesi Nasıl Oluşur?

Yeni başlayanlar şunu düşünebilir: HTML bir programlama dili mi? Aslında değil unutmayın, HTML hiper metin biçimlendirme dilini temsil eder. Bu nedenle HTML ile çalışmak programlama değil kodlamadır. En basit HTML belgesi birkaç kod satırından oluşur.

HTML Kodları Nasıl Yazılır?

Aşağıda, her bölümün ve işlevinin açıklamasıyla birlikte HTML ile yazılmış temel bir web sayfası örneği bulunmaktadır.

<! DOCTYPE HTML PUBLIC “- // W3C // DTD HTML 4.01 Transitional // EN” “https://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<title> Örnek sayfa </title>

<meta http-equiv = “İçerik Türü” content = “text / html; charset = windows-1252”>

</head>

<body>

<h1> BAŞLIK </h1>

<p> Bu, temel bir HTML sayfasının <b> örneğidir </b>. </p>

</body>

</html>

Yukarıdaki kodlama, temel bir web sayfasının temel bileşenlerini içerir. Hatların her biri aşağıda daha ayrıntılı olarak açıklanmıştır. DOCTYPE hattı HTML versiyonu sayfa bir Internet tarayıcısı aşağıdaki metni yorumlamak böylece yazılmış açıklar. <Html> açılış etiketi HTML kodunu okuyor bu tarayıcı bildirir. <Head> bölümünde böyle onun kadar sayfayla ilgili bilgileri içeren başlık , meta etiketleri ve nerede bulmak için CSS dosyası. <Body> bölümünde tarayıcısında görüntülenebilir olduğu her şeyi içerir. Örneğin, burada görülen tüm metinler gövde etiketlerinde bulunur.

<H1> etiketi sayfanın görünür başlığıdır. <P> etiketi metnin bir paragraf olduğunu gösterir. Çoğu web sayfasında (bunun gibi) birkaç paragraf etiketi vardır. Paragrafta bulunan, paragraftaki örnek kelimesini kalınlaştıran <b> etiketidir. Son olarak, kapanış etiketleri yukarıdaki etiketlerin her birini sarar. Böylelikle web tabanlı html siteniz hazırlanmış olur.

HTML Yazarken Nelere Dikkat Edilmelidir?

HTML yazarken dikkat edilmesi gereken bazı önemli noktalar şunlardır:

1. Doğru Etiket Kullanımı: HTML etiketlerinin doğru ve anlamlı bir şekilde kullanılması önemlidir. Örneğin, paragraflar için <p>, başlıklar için <h1>, <h2> gibi etiketler kullanılmalıdır.
2. Etiketleri Kapatmak: Açılan her HTML etiketi mutlaka kapatılmalıdır. Örneğin, <p> etiketi <p> ile başlar ve </p> ile kapanır.
3. Semantik Yapı: HTML5 ile gelen semantik etiketler (örneğin, <header>, <footer>, <article>) web sayfasının anlamını ve yapısını daha iyi tanımlar. Bu etiketleri kullanmak, hem arama motorlarının hem de tarayıcıların içeriği daha iyi anlamasına yardımcı olur.
4. Görsel ve Multimedya Ögeleri için Alt Metinler: Resimler gibi görsel ögeler kullanırken alt (alternatif) metinler eklemek, görme engelli kullanıcılar ve arama motorları için içeriğin anlaşılabilirliğini artırır.
5. Linklerde Açıklayıcı Metinler Kullanmak: Bağlantılar oluştururken, kullanıcıların nereye yönlendirileceğini açıkça belirten metinler kullanmak önemlidir.
6. Doğru Döküman Yapısı: Bir HTML dökümanının temel yapısını (<!DOCTYPE html>, <html>, <head>, <body> gibi) doğru şekilde kurmak gerekir.
7. CSS ve JavaScript’i Ayrı Dosyalarda Tutmak: Tasarım (CSS) ve davranış (JavaScript) kodlarını HTML’den ayrı tutmak, kodların daha düzenli ve yönetilebilir olmasını sağlar.
8. Tutarlı İsimlendirme ve Düzen: Class ve id isimlendirmelerini tutarlı ve açıklayıcı yapmak, kodun okunabilirliğini ve bakımını kolaylaştırır.
9. Yorum Satırları Kullanmak: Kodunuzda yorum satırları kullanmak, diğer geliştiricilerin veya gelecekteki sizin kodu daha kolay anlamanıza yardımcı olur.
10. Responsive Tasarımı Göz Önünde Bulundurmak: Günümüzde web sayfalarının mobil cihazlar ve farklı ekran boyutlarına uyumlu olması gerektiği için, responsive tasarım tekniklerini uygulamak önemlidir.

HTML yazarken bu kurallara dikkat etmek, hem kullanıcı dostu hem de teknik açıdan sağlam web sayfaları oluşturmanıza yardımcı olur.

HTML Kodlama Nereden Yapılır?

HTML kodlama, temelde herhangi bir metin editörü kullanılarak yapılabilir. Ancak, daha verimli ve kolay bir HTML kodlama deneyimi için çeşitli araçlar tercih edilebilir. İşte HTML kodlaması için kullanılabilecek bazı araçlar ve ortamlar:

1. Basit Metin Editörleri: Windows’ta Notepad, macOS’ta TextEdit gibi basit metin editörleri, HTML kodlaması için kullanılabilir. Bu editörler temeldir ve kodlama için özel araçlar sunmazlar.
2. Gelişmiş Metin Editörleri: Sublime Text, Atom, Notepad++ gibi gelişmiş metin editörleri, HTML kodlaması yapmak için daha fazla özellik sunar. Bunlar, kod renklendirme, kod katlama ve otomatik tamamlama gibi özelliklere sahiptir.
3. Entegre Geliştirme Ortamları (IDE): Visual Studio Code, WebStorm gibi IDE’ler, HTML kodlaması için gelişmiş araçlar ve eklentiler sağlar. Bu ortamlar, genellikle daha büyük projeler ve profesyonel geliştirme için tercih edilir.
4. Online Editörler ve IDE’ler: CodePen, JSFiddle, Repl.it gibi online platformlar, tarayıcı üzerinden HTML kodlaması yapmanıza olanak tanır. Bu siteler, kodu yazarken anında önizleme yapmanıza ve projelerinizi kolayca paylaşmanıza imkan verir.
5. WYSIWYG (What You See Is What You Get) Editörler: Dreamweaver gibi WYSIWYG editörler, HTML kodlamasını grafiksel bir arayüz üzerinden yapmanıza olanak tanır. Bu tür araçlar, kodlama bilgisi olmayan kullanıcılar için kullanışlı olabilir.

HTML kodlaması yaparken, tercih ettiğiniz aracın ihtiyaçlarınıza uygun olması önemlidir. Basit bir web sayfası oluşturmak için basit bir metin editörü yeterli olabilirken, daha karmaşık projeler için gelişmiş özelliklere sahip bir IDE kullanmak daha verimli olacaktır.

HTML Kodları Nasıl Çalıştırılır?

HTML (HyperText Markup Language), web sayfalarını oluşturmak için kullanılan bir işaretleme dilidir ve “çalıştırılması” diğer programlama dillerinde olduğu gibi bir işlem gerektirmez. HTML, web tarayıcıları tarafından doğrudan yorumlanır ve kullanıcıya görsel bir web sayfası olarak sunulur. HTML kodlarını çalıştırmak için aşağıdaki adımları takip edebilirsiniz:

1. HTML Dosyası Oluşturmak: Bir metin editörü (Notepad, Sublime Text, VS Code gibi) kullanarak yeni bir dosya oluşturun ve HTML kodlarınızı bu dosyaya yazın. Dosyanızı .html uzantısı ile kaydedin, örneğin ornek.html.
2. HTML Kodlarını Yazmak: HTML dosyanıza, HTML elementlerini içeren kodlar ekleyin. Bu kodlar, web sayfanızın yapısını ve içeriğini belirler. Örneğin, başlık için <h1>Merhaba Dünya</h1> gibi etiketler kullanabilirsiniz.
3. Dosyayı Web Tarayıcısında Açmak: Oluşturduğunuz HTML dosyasını bir web tarayıcısı (Google Chrome, Mozilla Firefox, Safari vb.) ile açın. Dosyayı doğrudan tarayıcıya sürükleyebilir veya tarayıcının dosya açma seçeneklerini kullanarak açabilirsiniz.
4. Sonucu Görüntülemek: HTML dosyasını tarayıcıda açtığınızda, tarayıcı HTML kodlarını okur ve kodlara göre bir web sayfası görüntüsü oluşturur. Bu, HTML’in “çalıştırılması” olarak kabul edilir.
5. Değişiklik Yapmak ve Yenilemek: HTML dosyanızda herhangi bir değişiklik yaptıktan sonra, dosyayı kaydedin ve tarayıcıda sayfayı yenileyin. Bu sayede yapılan değişiklikleri gözlemleyebilirsiniz.

HTML, statik bir işaretleme dilidir ve kendi başına programlama dili gibi çalışmaz. Dinamik özellikler veya interaktif ögeler eklemek için genellikle JavaScript gibi programlama dilleri ile birlikte kullanılır. HTML, web sayfalarının yapısını ve içeriğini tanımlamak için temel bir yapı taşı görevi görür.

İlginizi çekebilir ;

Javascript nedir ?