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
- Ayrıca bir online HTML editörü kullanabilirsiniz. Uzmanlar için olan HTML düzenleme programları, yeni başlayanlar için tavsiye edilmez.
- Bu üç seçenek arasında hiçbir fark yoktur, dilediğinizi seçebilirsiniz.,
- 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.
- 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.
- <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.
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]
- <Açıklama Metni>
- <html>
- <head>
- </ head>
- <body>
- </ body>
- </ html>
Biçiminde etiketleri not defterine ekleyin.
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
<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>
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]
<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>
<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]
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]