HTML ile Web Programlamaya Giriş - Turkish #1

36fV...ohbo

14 Jan 2024

139

Günümüzde, web programlamaya adım atmak isteyen birçok kişi için HTML temel bir başlangıç noktası olarak kabul edilir. Ben size bu makalede, temel bir web sayfası oluşturmanın giriş adımlarını ele alacak ve web projelerinin temel standardı olan HTML'in adım adım zeminini oluşturmak amacıyla bu konuya giriş yapacağım.

HTML Nedir ve Neden Kullanıyoruz?

Hypertext Markup Language, web sayfalarını oluşturmak ve yapılandırmak için kullanılan bir işaretleme dilidir. Temel olarak, metinler, resimler, bağlantılar ve diğer medya öğelerini içeren içeriği düzenlemek ve biçimlendirmek için tasarlanmıştır. HTML ile kullanıcıların web tarayıcıları aracılığıyla bu içerikleri görselleştirmelerine ve görüntülemesine olanak tanır.

HTML'in tanımı, belirli etiketlerin kullanılmasıyla sayfanın nasıl organize edileceğini belirtir. Örneğin, başlık etiketi <h1> ile başlar ve metin içeriğini büyük bir başlık olarak biçimlendirir. Bu, web sayfasındaki hiyerarşiyi ve düzeni oluşturur. Tıpkı yukarıda kullandığım "HTML Nedir ve Neden Kullanıyoruz?" kelimeleri gibi.

Neden HTML kullanmalıyız?

Çünkü HTML, internet üzerindeki bilgi alışverişini standartlaştırır ve kullanıcılara tutarlı ve anlaşılır bir deneyim sunar. Web sayfalarının temel yapı taşı olan HTML, içeriğin düzenli ve erişilebilir olmasını sağlar, böylece bilgi daha etkili ve anlaşılır bir şekilde kullanıcılara iletilir.

HTML Temel Yapısı nedir?

Temel HTML yapısı, bir web sayfasının temel iskeletini oluşturan önemli bileşenleri içerir. <!DOCTYPE html> etiketi, tarayıcıya hangi HTML sürümünün kullanılacağını bildirir ve sayfanın başında yer alır. <html> etiketi, HTML belgesini başlatır ve içeriği kapsayan ana konteyneri oluşturur. Bu etiket içinde head ve body olmak üzere iki ana bölüm bulunur.
<head> bölümü, web sayfasının başlık, stil ve diğer meta bilgilerini içerir. Başlık, tarayıcı sekmesinde görünen metni temsil eder. Örneğin:

<head>
  <title>HTML ile Web Programlamaya Giriş</title>
  <link rel="stylesheet" href="styles.css"> 
</head>

yazarsak çıktısı aşağıdaki gibi olur ve tarayıcı sekmesini başlıklandırmış oluruz. Böylece bir çok sekme olduğu durumlarda seçmek istediğiniz sekmeyi kolaylıkla bulursunuz.

Temel meta etiketleri de <head> bölümünde yer alır. <meta charset="UTF-8"> etiketi, sayfanın karakter setini belirtir ve genellikle UTF-8 olarak ayarlanır. Bu, sayfanın çeşitli dil ve karakterlerle uyumlu olmasını sağlar.
Bu temel yapı, web sayfalarının oluşturulmasında başlangıç noktasıdır. HTML belgesini açıklayan bu ana bileşenler, sayfaların doğru şekilde yüklenmesini ve tarayıcılar tarafından doğru şekilde yorumlanmasını sağlar.

<body> bölümü ise, sayfanın ana içeriğini içerir. Metin, resimler, bağlantılar ve diğer öğeler burada yer alır. Örneğin:

<body>
  <h1>Merhaba, Dünya!</h1>
  <p>HTML öğrenmek çok eğlenceli!</p>
  <img src="resim.jpg"> 
</body>

yazdığınızda sayfanızın çıktısı aşağıdaki gibi olur.

Test etmek için yapmanız gereken basit bir text editörü açmaktır;
daha sonra yukarıdaki kodları kopyalayıp bu text dosyasının içine kopyalayın;
şimdi bunu kayıt edip, dosyanın uzantısını ".html" olarak değiştirin;
işte bu kadar. Şimdi çift tıklayarak text dosyanızı açın ve ilk web sayfanızı görüntüleyin :)

Yazdığımız HTML başlık etiketleri, web sayfalarını düzenlemenin ve içeriği hiyerarşik olarak organize etmenin temel bir yolunu sunar. Farklı düzeylerdeki başlık etiketleri, sayfa yapısını anlamlı bir şekilde oluşturarak hem kullanıcılar için hem de arama motorları için bilgi sağlar. Böylece arama motorları web sayfamızı neden göstermesi gerektiğine karar verir. Kaynak istiyorsanız w3schools 'dan faydalanabilirsiniz. Ayrıca bu öğretici video da size katkı sağlayacaktır.
İyi seyirler şimdiden!