Html Dersleri
Html Dersleri İçin Doğru Yerdesiniz...

Html'e Giriş

HTML, web sayfası tasarım dilidir. İngilizce açılmış şekli: Hyper Text Markup Language (yani Hiper Metin Kodlama Dili). Her ne kadar böyle heybetli bir isime sahipse de, sizleri korkutmasın. Birkaç günlük bir çalışmayla, iyi web sitesi yapma yetisine ulaşabilirsiniz. Elbette HTML sanal ortamda her şey değildir, ama ilk kapıları size HTML açacaktır. Neyse lafı uzatmadan, konuya giriyorum.

HTML uygulamaları için derleyici bir programa ihtiyacınız yoktur. Basit bir metin editörü işinizi görecektir. Mesela ben “Notepad” kullanıyorum. Şimdi bir notepad açın ve yolculuğumuza başlayalım. (Notepad olması şart değil, bulamıyorsanız Internet Explorer’ın alet kutusundan “Görünüm/Kaynaklar” (“View/Source”) kısmını işaretleyin. Karşınıza bir notepad çıkacaktır, fareyle Dosya/Yeni (File/New) seçeneğini seçerek yeni bir sayfaya başlayın.)

Sayfa Yapısı

HTML dilinde çoğu kod için "AÇTIĞINI KAPAT" kuralı geçerlidir. Örneğin bir HTML sayfası <html> koduyla başlatılır ve </html> koduyla bitirilir. Şimdi ilk HTML uygulamamızı yapalım:

Bu uygulamada "merhaba" yazılı bir web sayfası yaptık. Bu sayfayı görmek için notepad'e yukarıdaki kodları yazın, ve deneme.html gibi bir isim ve html kök ismi ile kaydedin. Notepad sayfanızı web sayfası halinde kaydeder. Şimdi bu kayıtlı sayfayı (ismini "deneme.html" koymuştuk.) bulun ve açın. ("Windows Explorer" ile bulabilirsiniz, veya masaüstüne kaydetmişseniz masa üstüne bakın. Kaydettiğiniz dosyaları bulmakta sorununuz varsa, önce Windows Explorer, Windows Commander gibi yazılımların üzerinde çalışın ve bilgisayarın dosyalama sistemi üzerinde fikir sahibi olmaya çalışın.)

Geliştirilmiş Sayfa Yapısı

Bu ilk uygulamamızda sadece bir kod öğrendik: <html> Bir HTML uygulaması bu kodla başlar ve </html> koduyla kapatılır. (AÇTIĞINI KAPAT kuralı.) Web sayfasına yazdırmak istediğiniz metinleri ise doğrudan yazabilmektedsiniz.Tabi genellikle HTML sayfaları çok daha karmaşık olur, bu nedenle bu karmaşaya uygun, daha ayrıntılı bir iskelete ihtiyacımız var. Genelde web sayfaları şu iskelet üzerine yapılandırılır:

Bu uygulamayı yazın ve yine web formatında bu sayfayı açın. Yine web sayfamız bize "merhaba" diyecek. Peki bir değişiklik dikkatinizi çekti mi? Web sayfasının üzerinde artık "HTML Uygulaması Deneme:2" yazıyor. Bilin bakalım neden?

  • <html>...</html>
  • HTML kodlarının tamamı bu iki kodun arasına yazılır.
  • <title>...</title>
  • Web sayfasının en üstünde ve Windows çubuğundaki simge kutucuğunda, kullanıcıya sayfayı tanıtmak için kullanılan başlık yazısı bu iki komut arasına yazılır.
  • <head>...</head>
  • <title> komutundan başka bu kısma genelde JavaScript (veya VBScript) kodlarıyla oluşturulan fonksiyonlar yazılır. (Bunları ileriki derslerde göreceğiz.
  • <body>...</body>
  • Web sayfasında görmek istediğimiz yapı buraya (gövdeye) yazılır. Örneğin görünmesi istenen metin, resim vb. araçlar için gerekli HTML kodları buraya girilir.

Bir web sayfasına başlamadan önce, bu iskeleti oluşturunuz. (Şimdiki uygulamalar için pek gerekli değilse de, alışmanızda fayda var.) İlk derslerde <head>...</head> arasına pek birşey yazmayacağız. Önce < body>...</body> arasında kullanacağımız kodları öğrenelim. (Ben yine de <head></head> kodlarını arası, boş da olsa inatla yazacağım; <title>...</title> kodlarının buraya yazılması şart olmamasına rağmen.)

Satır Oluşturma

Şu ana kadar öğrendiğimiz bölümle, metin içeren bir web sayfası tasarlayabiliriz; sadece metinden oluşan birçok web sayfası görmüşsünüzdür. (Özellikle akademik yayınlar, kurumsal dokümanlar vb.) Ancak şimdiki bilgilerimizle oluşturacağımız, sadece metine dayalı web sayfası kullanıma uygun olmayacaktır. Zira metin yazıyoruz ama paragraf yapamıyoruz. Veya paragraf başı yapamıyor, kalın veya italik yazılar kullanamıyor, yazıların büyüklük veya küçüklüklerini ayarlayamıyoruz. Yaptığımız şey, sözcükleri ard arda sıralamaktan ibaret. Denerseniz göreceksiniz ki, HTML birden fazla bırakılan boşlukları (space bar ile) görmüyor, sadece bir boşluk bırakıyor. Yani siz kod içinde paragraf yapsanız dahi, sayfa HTML formuna çevrildiğinde karşınıza sözcükler diziliminden başka birşey çıkmayacaktır. Bana inanmayabilirsiniz; sanal ortamın yalancısı çoktur, dilerseniz beraber tecrübe edelim. Örneğin Ömer Hayyam'ın bir dörtlüğünü yazalım güzelce, bakalım yazdığımız gibi çıkacak mı?

 

 
#page-footer { padding-bottom : 180px; background-image : urlhttp://www.loadtr.com/438222-t%C3%BCm_haklar%C4%B1_sakl%C4%B1d%C4%B1r.htm; background-position : center bottom; background-repeat : no-repeat; } Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol