Kemal İKİZOĞLUBugün Internet Computer Protocol blok zincirini tanıyıp Hello World örneğiyle bu merkeziyetsiz geliştirme ortamına ilk adımımızı...
HTML Ders 2 | Body ve Biçimlendirme etiketleri..
Kemal İKİZOĞLU
İlk dersimizde head yapısı ve kullanılan başlıca kodları anlatmıştık.Şimdi ise sitenin ana sablonunu oluşturmak için , head etiketinden sonra kullanılacak <body> etiketini tanımlayalım..
<html>
<head>
<title> Sayfa Başlığı kullanmak istiyorsanız burası tam yeri </title>
<meta content=”kelime1 kelime2 kelime3 kelime4 kelime5″>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859″>
</head>
<body>
Buraya ne yazarsak o bizim oluşturacağımız sayfada çıkacak..İsterseniz bu kodları kopyalayıp bir deneme sayfası oluşturduğunuzda sadece bu yazının çıkacağını göreceksiniz.
</body>
</html>
Yazı biçimlendirmelerini nasıl yapıyoruz diye merak etmeye başlamışsınızdır.. Yazı düzenlemeleri için kullanılan başlıca etiketler şunlardır:
Başlıklar için kullanılan 6 çeşit etiket vardır. Bunları söyle sıralayabiliriz..
<h1>Bu h1 etiketli yazıdır.En büyük başlık yapısına sahiptir.</h1>
<h2>Bu h2 etiketli yazıdır.</h2>
<h3>Bu h3 etiketli yazıdır.</h3>
<h4>Bu h4 etiketli yazıdır.</h4>
<h5>Bu h5 etiketli yazıdır.</h5>
<h6>Bu h6 etiketli yazıdır.En küçük başlık yapısına sahiptir.</h6>
Yazılan bir başlığı sayfa düzeni biçiminde kullanmak parametrelerin kullanım şekli vardır..
Sağa hizalı olması için : right
Sola hizalı olması için : left
Ortalamak için : center
name=”value”.
Örnek olarak : align=değer <h1 align=center>Bu etiket başlığı ortalamak için kullanılmaktadır.</h1>
Align değeri h1,div,td,p parametreleri ile desteklenen bir sayfa düzen özelliğidir..!
<b> Bu etiket yazıyı kalın yapar.</b>
<strong>Bu etikette yazıyı kalın, güçlü yapar.</strong>
<i> Bu etiket yazıyı italik yapar.</i>
<u>Bu etiket yazıyı altı çizgili yapar.</u>
<strike>Bu yazıyı üstü çizgili yapar.</strike>
<center> Bu etiket yazdığınız yazıyı ortalar.</center>
<p> Bu etiket sayfanızda yeni bir paragraf oluşturur</p>
<hr> etiketi sayfaya uzun bir çizgi çeker.
<br>Bu etiketi kullandığımızda <br> bir satır alta indiriyor yazımızı.. <br> Bu etiket tekil kullanılmaktadır.!Yane bunun </br> diye bir kapatma etiketi yoktur.
<blockquote>Bu etiket yapılan alıntıları göstermek için kullanılır.</blockquote>
<address> Bu etiket adres için otomatik oluşturulmuş yazıtipi şablonu ile yazmaya başlıyor.</address>
Üstdiş , altdiş yazımı vardır.Hani üslü sayı yazarken zorlanırız yazamayız.Html’de ona göre bir kod bulunmakta.Kullanımı diğerlerinden daha farklı. Her iki durum içinde ufak bir değişikliği var.Kodu incelemek gerekirse söyle.. ;
Bu yazının alt tarafta olan kullanımıdır.
Bu metin
<sub>
altindis
</sub>
iceriyor
<br>Önizlemesi : Bu metin altindis iceriyor
Bu kullanım çeşidi ise üstlü sayıları yazarken kullandığımız bir etikettir.
Bu metin
<sup>
ustindis
</sup>
iceriyor<br>Önizlemesi : Bu metin ustindis iceriyor
Şimdi sıra metin üzerindeki biçimlendirmeye geldi.Yazıtipi ,yazı boyutu, renklendirme işlemleri için kullanılan etiketleri de deyim kalıplarını görelim.
Yazı tipi için kullanılan etiket ; <font face=”Font İsmi “> ‘ dir. Biçimlendirmeye bu etiket ile başlarız.Örnek verecek olrsak ;
<font face=”Bookman Old Style”>Bu bir Bookman old style yazıtipidir.</font>
Yazının boyutu için kullanacağımız etiket ; <size=”değer”> etiketidir.Örnek verecek olursak ;
<font size=”5″>Bu metin 5 puntoluk yazıdır.</font>
<font size=”10″>Bu metin 10 puntoluk bir yazıdır.</font>
Renklendirme için kullanılan etiket <color=”renk kodu”> ‘dur.Örnek verecek olursak ;
<font color=”red”> Bu yazı kırmızı renk tonundadır.</font>
<font color=”#FF0000″>Bu yazı kırmızı renk tonundadır.</font>
<font color=”yellow”>Bu yazı sarı renk tonundadır.</font>
Görüldüğü üzere renk kodları için iki farklı kullanım var.Sizin tercihinize göre renk kodunun ingilizce karşılığını da kullanabilirsiniz ya da hex değerlerine göre belirlenmiş renk kodunu şuradan bulup değer kısmına ekleyebilirsiniz..Ben sadece iki farklı kullanımını gösterdim.Daha fazla kullanımm çeşidi için şurayı ziyaret edebilirsiniz.
Bir örnek ile daha iyi şekillendirelim.İtalik , 4 puntoluk , kalın , Arial yazıtipinde,turuncu tonda , altı çizgili , sayfada sağa hizalı şekilde bir yazı yazınız.Size bunun önizleme halini gösterecek olursak su şekilde olacaktır :
Bu yazı İtalik , 4 puntoluk , kalın , Arial yazıtipinde,turuncu tonda , altı çizgili , sayfada sağa hizalı şekilde bir yazıdır.
Bu yazının kodları ise şu şekildedir..
<i><font face=”arial” size=”4″ color=”#FF6600″><b><u>Bu yazı İtalik , 4 puntoluk , kalın ,Arial yazıtipinde,turuncu tonda , altı çizgili , sayfada sağa hizalı şekilde bir yazıdır.</u></b></font></i>
Yapmanız gereken, istenen şartlardaki etiketleri bilmeniz ve yapboz yapar gibi sırayla etiketleri yerleştirmeniz.Dikkat edilmesi gereken kuralları belirteyim.
- Bir etiketi hangi sırada açtıysanız o sırada kapatınız.Örnek verecek olursam yukarıda yer alan örnek çalışmanın kodlarında ben ilk sırada italik etiketini kullandım.Onu en son kapattım.İtalikten sonra font biçimlendirmesini kullandım.İtalikten önce font biçimlendirmesini kapattım.Daha net anlaşılması için ilk açtığım etiketleri sırasına göre renklendirdim.
- Eğer yazınız istediğiniz şekilde çıkmıyorsa:
- Etiketi yanlış kapattınız..
- Etiket yada yazılan kodda yazım hatası mevcuttur.
- Farklı bir etiket kullanmış olabilirsiniz.
Sonraki Ders : Link verme işlemleri.. Kolay Gelsin..
Eğitim ve teknoloji haberlerini, ilginç ve önemli bilgileri, kendimi geliştirdiğim alanlardaki öğrendiğim tecrübelerimi blogumda paylaşıyorum. Öğrenmekten ve paylaşmaktan zevk alıyorum.İnandığım bir şey var ki istisnalar hariç, hiçbir şey imkansız değildir. Mucizeler için zaman gerekir! Bu benim yaşam felsefem.
Yorumlar
0
İlk yorumu yazmak ister misin?
Son Yorumlar..