HTML ve CSS nedir?
HTML (HyperText Markup Language), bir web sayfasının içeriğini ve yapısını tarif eden bir işaretleme dilidir. "Bu bir başlık", "bu bir paragraf", "bu bir bağlantı" gibi bilgileri tarayıcıya söyler. Bir programlama dili değildir; hesap yapmaz, karar vermez, sadece içeriği etiketler. Bu yüzden öğrenmesi oldukça kolaydır.
CSS (Cascading Style Sheets) ise o içeriğin nasıl görüneceğini belirler. Renkler, yazı tipleri, boşluklar, sayfanın telefonda ve bilgisayarda nasıl dizileceği CSS ile ayarlanır. Bir benzetmeyle söylersek HTML bir evin duvarları ve odalarıysa, CSS onun boyası ve dekorasyonudur. Tarayıcının bu dosyaları nasıl aldığını merak ediyorsanız web nasıl çalışır rehberine göz atabilirsiniz.
Başlamak için ihtiyacınız olanlar
HTML ve CSS öğrenmek için hosting, alan adı veya ücretli bir program gerekmez. Bilgisayarınızda şunlar yeterli:
- Bir metin editörü: Kod yazmak için tasarlanmış ücretsiz editörler, kodu renklendirerek okumayı kolaylaştırır ve hataları fark etmenize yardım eder. Hangi tür editörlerin bulunduğunu ücretsiz webmaster araçları rehberinde anlattık. Başlangıçta işletim sisteminizdeki basit not defteri bile iş görür.
- Bir tarayıcı: Zaten kullandığınız tarayıcı yeterli. Yazdığınız dosyayı tarayıcıda açarak sonucu hemen görürsünüz.
- Bir klasör: Masaüstünde "ilk-sitem" gibi bir klasör açın; bütün dosyalarınız burada duracak.
Kelime işlemci programları (yazıları biçimlendirdiğiniz ofis programları) kod yazmak için uygun değildir, çünkü dosyaya görünmeyen biçim bilgileri ekler. Mutlaka düz metin kaydeden bir editör kullanın.
İlk HTML dosyanızı yazmak
Editörünüzde yeni bir dosya açın ve onu klasörünüze index.html adıyla kaydedin. "index" adı, birçok sunucunun bir klasörü açtığında ilk aradığı dosya adıdır. Şimdi dosyaya bir HTML sayfasının temel iskeletini yazacağız. Bu iskelet sırasıyla şu parçalardan oluşur:
- <!DOCTYPE html> satırı: Tarayıcıya bunun modern bir HTML belgesi olduğunu söyler.
- <html lang="tr"> etiketi: Bütün sayfayı sarar ve sayfanın dilinin Türkçe olduğunu belirtir.
- <head> bölümü: Ziyaretçinin doğrudan görmediği bilgileri içerir. Buraya Türkçe karakterlerin düzgün görünmesi için <meta charset="UTF-8">, telefonda doğru ölçeklenmesi için viewport ayarı ve sekmede görünecek başlık için <title> etiketi yazılır.
- <body> bölümü: Sayfada görünen her şey buraya yazılır.
Body içine önce bir ana başlık ekleyin: <h1>Merhaba, ben Deniz</h1>. Altına bir paragraf yazın: <p>Bu benim ilk web sayfam.</p>. Dosyayı kaydedin ve klasörde dosyaya çift tıklayarak tarayıcıda açın. Ekranda başlığınızı ve paragrafınızı görüyorsanız, tebrikler, ilk web sayfanızı yazdınız!
En sık kullanacağınız HTML etiketleri
HTML'de etiketler genellikle bir açılış ve bir kapanıştan oluşur. Açılış etiketi <p> gibi, kapanış etiketi ise başına eğik çizgi alarak </p> gibi yazılır. Aradaki içerik o etiketin anlamını taşır. Başlangıçta şu etiketler işinizin büyük kısmını görür:
| Etiket | Ne işe yarar? |
|---|---|
| <h1> ... <h6> | Başlıklar. h1 sayfanın ana başlığıdır; h2 ve h3 ara başlıklar için kullanılır. |
| <p> | Paragraf. |
| <a href="..."> | Bağlantı. href içine gidilecek adres yazılır. |
| <img src="..." alt="..."> | Resim. src resmin dosya yolu, alt ise resmin kısa açıklamasıdır. |
| <ul>, <ol>, <li> | Madde işaretli ve numaralı listeler ile liste öğeleri. |
| <strong>, <em> | Önemli vurgu (genellikle kalın) ve hafif vurgu (genellikle eğik). |
Başlıkları görünümleri için değil, anlamları için kullanın. Bir yazıyı büyük göstermek istiyorsanız h1 kullanmak yerine CSS ile boyutunu ayarlayın. Doğru başlık sırası, hem ekran okuyucu kullanan ziyaretçilerin hem de arama motorlarının sayfanızı anlamasına yardım eder.
CSS ile sayfanıza stil vermek
Şimdi sayfanızı biraz güzelleştirelim. Aynı klasörde stil.css adında yeni bir dosya oluşturun. Ardından HTML dosyanızın head bölümüne bu dosyayı bağlayan satırı ekleyin: <link rel="stylesheet" href="stil.css">. Artık CSS dosyasına yazdığınız her kural sayfanıza uygulanacak.
CSS kuralları üç parçadan oluşur: hangi öğeye uygulanacağını söyleyen seçici, neyin değişeceğini söyleyen özellik ve yeni değer. Örneğin body { font-family: sans-serif; line-height: 1.6; } kuralı, bütün sayfanın yazı tipini sade bir yazı tipiyle değiştirir ve satır aralığını açar. h1 { color: #047857; } kuralı ise ana başlığı yeşile boyar. Birkaç kural ekleyin, dosyayı kaydedin ve tarayıcıyı yenileyin.
Başlangıçta deneyebileceğiniz bazı özellikler şunlardır:
- color ve background-color: yazı ve arka plan rengi.
- font-size ve font-family: yazı boyutu ve yazı tipi.
- margin ve padding: öğenin dışındaki ve içindeki boşluk.
- max-width: içeriğin geniş ekranlarda çok yayılmasını engelleyen en fazla genişlik.
Telefonda düzgün görünüm için içeriği max-width ile sınırlamak ve sabit piksel genişlikler yerine esnek ölçüler kullanmak iyi bir başlangıçtır. Farklı ekran boyutlarına göre ayrı kurallar yazmanızı sağlayan yöntemleri ilerleyen aşamada öğrenebilirsiniz.
Tarayıcının geliştirici araçlarını kullanmak
Tarayıcınızda F12 tuşuna basarak veya sayfada sağ tıklayıp "İncele" seçeneğini seçerek geliştirici araçlarını açabilirsiniz. Burada sayfadaki herhangi bir öğeye tıklayıp hangi HTML etiketi olduğunu ve hangi CSS kurallarının uygulandığını görebilirsiniz. Daha da iyisi, CSS değerlerini burada geçici olarak değiştirip sonucu anında izleyebilirsiniz. Değişiklikler sayfayı yenileyince kaybolur, yani hiçbir şeyi bozma riskiniz yoktur. Beğendiğiniz bir sitenin nasıl tasarlandığını incelemek için de harika bir yoldur.
Yeni başlayanların sık yaptığı hatalar
- Etiketi kapatmayı unutmak: Kapatılmayan bir etiket, sonrasındaki bütün içeriği etkileyebilir. Bir etiketi açtığınız anda kapanışını da yazma alışkanlığı edinin.
- Dosya yolunu yanlış yazmak: CSS veya resim görünmüyorsa genellikle sorun dosya adındadır. Büyük-küçük harf, Türkçe karakter ve boşluk içeren dosya adları sorun çıkarabilir; dosya adlarını küçük harf ve tireyle yazın.
- Kaydetmeden yenilemek: Değişikliğinizin görünmemesinin en yaygın nedeni dosyayı kaydetmeyi unutmaktır.
- Türkçe karakter sorunu: Harfler bozuk görünüyorsa head içinde charset ayarının olduğundan ve dosyanın UTF-8 olarak kaydedildiğinden emin olun.
- Resimlere alt metin eklememek: Alt metin, resmi göremeyen kullanıcılar ve resim yüklenmediğinde gösterilen açıklamadır. Her anlamlı resme kısa bir açıklama yazın.
Küçük bir alıştırma: dijital kartvizit
Öğrendiklerinizi pekiştirmek için tek sayfalık bir dijital kartvizit hazırlayın. Sayfada adınızı ana başlık olarak, kendinizi anlatan iki cümlelik bir paragrafı, ilgi alanlarınızı madde işaretli bir liste olarak ve bir profil fotoğrafını (alt metniyle birlikte) kullanın. Ardından CSS ile şunları yapmayı deneyin:
- Sayfanın içeriğini ortalayın ve en fazla genişliğini sınırlayın.
- Arka plan için açık bir renk, başlık için ona uyan koyu bir renk seçin.
- Fotoğrafı yuvarlak köşeli yapın ve altına biraz boşluk bırakın.
- Liste öğelerinin arasındaki boşluğu artırın.
Bu alıştırma, bu rehberdeki etiketlerin ve kuralların neredeyse hepsini bir kez kullanmanızı sağlar. Bitirdiğinizde sayfayı telefonunuzda da açın ve taşan bir şey olup olmadığına bakın.
Sırada ne var?
Tek bir sayfa yazdıktan sonra ikinci bir sayfa (örneğin hakkinda.html) oluşturup iki sayfayı bağlantılarla birbirine bağlamayı deneyin. Ardından bu küçük siteyi telefonunuzda düzgün görünecek şekilde düzenleyin. Bu iki alıştırma, HTML ve CSS'in temel mantığını oturtmak için yeterlidir. Hazırladığınız sayfaları internete açmak istediğinizde ücretsiz statik site barındırma hizmetlerini veya bir hosting paketini kullanabilirsiniz.
Bir sonraki adımda JavaScript ile sayfaya etkileşim eklemeyi veya bir CMS temasında küçük değişiklikler yapmayı öğrenebilirsiniz. Öğrenme sırasını webmaster yol haritası rehberinde ayrıntılı verdik. Kodunuzda takıldığınız bir yer olursa Webmaster Forum'daki HTML - CSS - XML bölümünde kodunuzu paylaşıp yardım isteyebilirsiniz. Diğer beceriler için webmaster becerileri sayfasına dönebilirsiniz.
Forumdaki ilgili bölümler
- HTML - CSS - XMLKodunuzu paylaşın, yardım alın.
- Hazır Kod Bankasıİnceleyip öğrenebileceğiniz kod örnekleri.
- Yeni BaşlayanlarKodlamaya yeni başlayanlar için sorular.
Sık sorulan sorular
HTML öğrenmek ne kadar sürer?
Temel etiketleri öğrenip basit bir sayfa yazmak birkaç gün sürebilir. Rahatça sayfa düzenleyebilecek seviyeye gelmek ise düzenli pratikle birkaç hafta içinde mümkündür.
HTML bir programlama dili mi?
Hayır, HTML bir işaretleme dilidir. İçeriği etiketleyerek yapısını tarif eder ama hesap yapmaz veya karar vermez. Bu işler için JavaScript veya PHP gibi programlama dilleri kullanılır.
WordPress kullanacaksam HTML öğrenmeme gerek var mı?
Zorunlu değil, ama çok faydalıdır. Temel HTML ve CSS bilgisi, yazılarınızın görünümünü düzeltmenize, temada küçük değişiklikler yapmanıza ve sorunları anlamanıza yardımcı olur.
Yazdığım sayfayı nasıl internete açarım?
Dosyalarınızı bir hosting hesabına yükleyebilir veya statik sayfalar için ücretsiz barındırma sunan hizmetleri kullanabilirsiniz. Bu durumda dosyalarınız bir adres üzerinden herkese açık hale gelir.
Kod yazmak için hangi editörü kullanmalıyım?
Kodu renklendiren ve hataları gösteren ücretsiz bir kod editörü yeni başlayanlar için idealdir. Hangisini seçtiğinizden çok, onu düzenli kullanıp kısayollarını öğrenmeniz önemlidir.