101: HTML Başlangıç seviyesi derslerde Web programlamanın temeli olan HTML'i öğreniyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

HTML'e Giriş

HTML, Hyper Text Markup Language ifadesinden oluşturulmuş bir İngilizce kısaltmadır ve Türkçe'ye "Hiper Metin İşaretleme Dili" şeklinde çevrilebilir. Bir işaretleme dilinin temel işlevi, bir belge içindeki metnin (text) yapısını, biçimini ve genel görünümünü tanımlayacak kuralları içermesi ve bunun uygulanmasına olanak vermesidir.

Bir HTML Belgesinin Yapısı

Bir HTML belgesi etiket dediğimiz bileşenlerden oluşur. HTML yapısındaki temel bileşen bir elemandır. Elemanları anlatmak için her gün gördüğünüz başlıklar, paragraflar, listeler birer elemandır. Etiketler kullanılarak bu elemanlar birbirinden ayrılarak mantıklı hale gelirler. HTML etiketleri yapısı ise çok basittir. < (küçüktür işareti) etiket ve > (büyüktür işareti) işaretiyle belirtilir. Örneğin, paragraf belirtmek için <p> etiketini kullanırız. Paragraf etiketini kapatmak istediğimizdeyse < işareti sonrasında / işareti koymak yeterlidir.

En Temel HTML Etiket ve Anlamları

HTML etiketi

HTML etiketi, tarayıcınıza, dosyanın HTML kodu ile yüklenmiş bilgi içerdiğini bildirir. Dosya adındaki .html uzantısı ise bu dosyanın bir HTML belgesi olduğunu belirtir.

 

HEAD etiketi

Bir HTML belgesinin ilk kısmını belirler. İçinde TITLE elemanının bulunması zorunludur. Belgenin başlığını TITLE elemanı belirler.

Aşağıdaki örnekteki HTML kodunun HEAD kısmına bakalım:

Çeşitli Yazı Biçimlendirmeleri

<b> etiketi

<b> ve </b> etiketleri arasına alınan metin, koyu (bold) hale getirilir.

<b> etiketinin nasıl kullanılacağını aşağıdaki örnekten görebilirsiniz.

Link Oluşturmak

HTML'in önemli özelliklerinden biri, bir metin parçası ya da bir resim üzerinden başka bir belgeye bağlantı kurabilmesidir. Bu bağlantı, link adı verilen yapılar sayesinde gerçekleştirilmektedir. Bir resim ya da metnin rengi değiştirilerek ya da metin alt çizgili hale getirilerek bu resim ya da metnin bir hipermetin linki (hypertext link) ya da sadece link olduğu belirtilir.

Bir link oluşturmak için aşağıdaki adımlar izlenmelidir:

HTML'de Görseller

Tarayıcılar resim ve görüntü dosyalarını gösterebilir. İnternet'te yaygın olarak kullanılan dosya tipleri bitmap (.bmp), GIF, JPEG ve PNG şeklinde sıralanabilir. Bu eğitim içeriğinde web sayfanıza bir görseli nasıl ekleyeceğinizi göreceksiniz.

Kod şablonumuz şu şekilde olacak:

HTML Stilleri

Her HTML etiketi önceden tanımlanmış stil renklerini barındırır. Bu yazılar için siyah, arka plan için beyaz şeklindedir. Style özelliğini kullanarak dilediğiniz gibi renklendirme yapabilirsiniz.

 

Arka plan renginin değiştirilmesi

Arka plan rengini değiştirmek için bgcolor özelliğini kullanmalısınız. Aşağıdaki örnekte ayrıntılı şekilde görebilirsiniz:

HTML Tablolar

Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel tablo etiketlerini ve kullanımlarını öğreneceğiz.

Düzgün tanımlanmış tablolar birçok farklı etiketi içerdiği için öncelikle etiketlerin anlamlarını öğrenecek, sonrasında çeşitli parametleri kullanarak nasıl daha düzenli hale getirebileceğinizi göreceksiniz.

 

HTML Formlar

HTML formları kullanıcıdan veri almak için kullanılır. 

<form> etiketi bir form tanımlar ve burada kullanılacak diğer etiketlerle birlikte kullanıcıdan veri alınmasına yardımcı olur. Bu eğitimde bu elemanların bazılarını nasıl kullanacağınızı öğreneceğiz. İlerleyen 201 HTML5 & CSS derslerinde ise HTML5 ile gelen yeni form elemanlarını göreceğiz.

En basit haliyle bir form oluşturalım:

<form>
<!-- Form elemanları -->
</form>

 

Web Programlama 101 Sınavı

Web Programlama 101