HTML Sayfası Nasıl Yazılır?

HTML (HyperText Markup Language) web sayfaları geliştirmek için temel bir dildir. Bu kodlama dili kolay ve esnek bir dil amacıyla oluşturulmuştur. Hemen hemen internet üzerindeki her sayfa bu kod kullanarak geliştirilmiştir. Bu kodun bazı formları: ColdFusion, XML, XSLT’dir. HTML, öğrenmesi kolay bir dildir, ama bu dili tüm fonksiyonları ile öğrenmek istiyorsanız uzun bir süre öğrenmeye zaman harcamalısınız. Web sayfalarınıza daha fazla renk ve heyecan katmak için, basit bir HTML sayfası oluşturarak en kısa sürede CSS’nin temellerini öğrenebilirsiniz.
[the_ad id=”17227″][the_ad id=”17228″]
 

Bölüm1: Belge Kurulumu

html-sayfasi-nasil-hazirlanir-adim11 Basit bir metin editörü açın. İyi bir seçenek olan NotePad’i ücretsiz olarak internetten indirebilirsiniz . Çoğu metin düzenleme yazılımı ile HTML yazabilirsiniz, ancak otomatik biçimlendirme içeren bir metin editörü ile daha karmaşık bir yazılıma sahip HTML sayfalarını daha kolay bir şekilde düzenleyebilirsiniz.
  • Ayrıca bir online HTML editörü kullanabilirsiniz. Uzmanlar için olan HTML düzenleme programları, yeni başlayanlar için tavsiye edilmez.

 

 

html-sayfasi-nasil-hazirlanir-adim22 Web sayfası olarak bir dosyayı kaydedin. Üst menüde Dosya  →  Farklı Kaydet’i seçin. Dosya biçimi için “Web Page (Web Sitesi)”, “.html” veya “htm.” olarak değiştirin. Dosyayı Kolayca bulabileceğiniz bir yere kaydedin.
  • Bu üç seçenek arasında hiçbir fark yoktur, dilediğinizi seçebilirsiniz.,

 

 

html-sayfasi-nasil-hazirlanir-adim33 Bir web tarayıcısında dosyayı açın. Dosyaya çift tıklatın, otomatik tarayıcınızda boş bir web sayfası olarak açılmalıdır.
  • Mac için diğer bir seçenek ise, Firefox veya Internet Explorer gibi bir tarayıcı açın ve belgeyi seçin Dosya (File)  → Dosya Aç (Open File)  seçeneğini kullanın. Bu web sayfası çevrimiçi değildir ve sadece bilgisayarınızda görülebilir.
  • Diğer bilgisayarlar için ise, dosyaya sağ tıklayın. Farklı aç (Open with) seçeneğine tıkladığınızda açılan sekmeden web tarayıcılarınızdan birini seçebilirsiniz.

 

 

html-sayfasi-nasil-hazirlanir-adim44 Kaydedilen değişiklikleri görmek için web sayfasını yenileyin. Boş belgeye bunu yazın: <strong> Merhaba </ strong>. Belgeyi kaydedin. Tarayıcınızda boş olan web sayfasını yenileyin. “Merhaba” sözcüğünü kalın ve sayfanın en üstünde görmelisiniz. Her zaman, dosya içerisinde değişiklik yapıp sonrasında nasıl göründüğünü görmek istiyorsanız, yaptığınız değişiklik sonrası kaydedin ve “.html” uzantılı sayfanızı yenileyin.
  • Eğer “<strong>” ve “</ strong> ‘ kelimelerini görürseniz bir sorun var demektir. Dosyanız düzgün olarak HTML yorumlayamıyor demektir. Böyle bir durumda farklı bir metin düzenleme programı veya farklı bir tarayıcı deneyebilirsiniz.

 

 

html-sayfasi-nasil-hazirlanir-adim55 Etiketleri (tags) anlayın. HTML talimatlarını yorumlamak ve web sayfasını görüntülemek için  “etiketleri” nasıl kullanacağınızı anlayın. Onlar her zaman  “<Bu gibi>” iki işaretin arasında yazılır ve web sayfasında gösterilmez. Zaten yukarıdaki örnekte onları kullandık:
  • <strong> “etiketi başlatma” veya “açılış etiketi” dir.
    Bu etiketinden sonra yazılı bir şey (genellikle bir web sayfasında kalın gösterilen) “güçlü bir metin” olarak tanımlanacaktır.
  • </ strong> “bitiş etiketi” ya da “etiketi kapatma” dir. “/” sembolünden belirlenebilir. Güçlü metnin nerede biteceğini gösterir.  Bu etiketler (Hepsi olmasa da) çoğu işlevlerde bir bitiş etiketi ihtiyaç duyulur. Bu yüzden eklemeyi unutmayın.

 

 

html-sayfasi-nasil-hazirlanir-adim66 Belgenizi ayarlayın. HTML belgesindeki her şeyi silin. Aşağıdaki metin ile tekrar başlayın,
Tüm bu HTML kodlarını <html> ve </ html> etiketleri içinde yer verilecektir.
  • <! Açıklama Metni>
  • <html>
  • </ html>

İlk baştaki kısım görmezden gelinecek kısımdır. Dilediğiniz açıklamayı yazabilirsiniz.[adsmobil]

 

html-sayfasi-nasil-hazirlanir-adim77head” ve “body” etiketlerini ekleyin. HTML belgeleri iki bölüme ayrılır. “head” bölümünde, özel bilgiler yer alır, sayfanın başlığı gibi. “body” bölümünde ise sayfanın ana içerikleri yer almaktadır. HTML belgenize başlama ve bitiş etiketleri dahil edeceğinizi hatırlatarak head ve body etiketlerine bakılacak olursa
  • <Açıklama Metni>
  • <html>
  • <head>
  • </ head>
  • <body>
  • </ body>
  • </ html>

Biçiminde etiketleri not defterine ekleyin.

 

html-sayfasi-nasil-hazirlanir-adim88 “title” (Başlık) sayfanız. “title” etiketi kullanımı kolay ve tarayıcı pencerenizin adını belirlemek için kullanılan bir etikettir. “head”etiketleri içine “title başlangıç” ve “title bitiş” etiketleri koyun,
ve bu iki etiket arasına bir title belirleyin.
  • <! Açıklama Kısmı>
  • <html>
  • <head>
  • <title> Sosyallob HTML sayfam </ title>
  • </ head>
  • <body>
  • </ body>
  • </ html>

etiketlerini not defterine yazın ve kaydedin. Sonrasında web sayfasını yenileyin. Tarayıcınızın title kısmında “Sosyallob HTML sayfam” yazısını göreceksiniz.[adsyatay]

 

 

Bölüm2: Metin Biçimlendirme

html-sayfasi-nasil-hazirlanir-adim91 “body” bölümüne bazı metinleri ekleyin. Bu bölüm içindekiler, sadece body etiketleri içinde çalışıyor olacak. Diğer metinler bir önceki adımda belirtilen şekliyle kalacak, ama biz bu kılavuzda bunu her zaman tekrarlamamıza gerek kalmadan bazı kısımlardan tasarruf ederek kullanacağız.
<body> ve </ body> etiketleri arasına bir şey yazın. Bu yazdığınız metin web sayfasında ilk içerik olarak görünecektir.
Örneğin:
  • <body>
  • Ben bir HTML sayfası yazmak için Sosyallob’u takip ediyorum.
  • </body>

 

 

html-sayfasi-nasil-hazirlanir-adim102 Metin başlıklarını ekleyin. Başlık etiketleri ile sayfanızı düzenleyin,
hangi etiketin daha büyük boyutta olduğunu görüntülemek için metni etiket arasına koyup tarayıcıda görüntüleyin. Bunlar aynı zamanda sayfa ile ilgili arama motoru botları ve diğer araçlar tarafından önem verilerek kullanılmaktadır. <h1> </ h1> en büyük başlık olduğunu ve <h6> </ h6> en küçük başlık olduğunu öğrenmenizde yarar var.Sayfanızda etiketleri deneyin:

<body>
<h1> Benim Web Sayfama Hoş Geldiniz. </ h1>
Ben bir HTML sayfası yazmak için Sosyallob’u takip ediyorum.
<h3> Benim bugün ki hedefim: </ h3>
<h5> Tamamlanan hedefler: </ h5>
Başlıklarını nasıl kullanacağınızı öğrendim.
<h5> Tamamlanmayan hedefler: </ h5>
Daha fazla metin biçimlendirme etiketlerini öğrenmek.
</ body>

[adsmobil]

 

html-sayfasi-nasil-hazirlanir-adim113 Daha fazla metin biçimlendirme etiketlerini öğrenin. Metin biçimlendirmek için yukarıda anlatılanlar haricinde çok daha fazla etiket çeşidi vardır. Bu etiketleri kullanarak denemeler yapın. Her zaman sona bitiş etiketi eklemeyi unutmayın!

<strong> Önemli metin. Tarayıcılarda kalın bir biçimde görüntülenir. </ strong>
<em> Eğik yazı. Tarayıcılarda italik olarak görüntülenir </ em>
<small> Normalden biraz daha küçük metin.  Bir başlık kullanıldığında, bu otomatik olarak ölçeklenir. </Small>
<del>İlgili kısımdaki silinmiş etiketi tanımlar, üstü çizilmiş şekilde bir görünüm sağlamaktadır.</ del>
<ins> Eklenmiş olan metni göstermek için kullanılan bir etikettir, altı çizili şekilde gösterilmektedir. </ ins>

 

 

html-sayfasi-nasil-hazirlanir-adim124 Sayfadaki metinleri düzenleyin. Bu etiketlerle, paragraflar ve satır sonları oluşturulabilir. Ya da başka yollarla metin düzenlemeye bakılacak olursa:

<p> Kısa “paragraf” için kullanılan etikettir. Bu etiketle kullanılan metinler paragraf oluşturarak tüm metinlerden üstün tutulmuş,üstündeki ve altındaki metinlerden ayrılmış olur. </ p>
<br> Bu satır sonu yaratacaktır. Bu etiket boş bir etikettir, bitiş bir etiketi kullanılmamaktadır. Paragrafları ayırmak için değil, şiir veya adres gibi çok satır gerektiren durumlarda kullanın.
<pre>Bu içerik ve satır sonları aynı şekilde görüntülenir. Bu etiket içindeki metin sabit genişliğe sahip yazı tipleri ile görüntülenir. Önceden biçimlendirilmiş metinleri tanımlamaktadır. </ pre>
<blockquote> Bu bir kaynaktan alıntı olan metni tanımlar.Tarayıcılar genelde bu kısmı girintili olarak gösterir.</ blockquote>
<cite> Bu etiket bir çalışmanın başlığını tanımlar. </ cite>

[adsmobil]

 

html-sayfasi-nasil-hazirlanir-adim135 Görünmez açıklama metni ekleyin. Yorum etiketleri web sayfasında görünmez.
Onlar içeriğine müdahale etmeden, HTML belgesinde kendinize notlar yazmanız için sizi izin verir.
<! — Etiketinin içinde Yorumunuzu yazın. —> 
  • Kendileri tarafından sonlanan ve bitiş etiketleri kullanmayan etiketlere “boş etiketler” denir.

[adsyatay]

Article Tags:
Article Categories:
Teknoloji

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir