XHTML Introduction -Giriş seviyesinde xhtml ile ilgili bilgiler

Bir web sayfası temel anlamda 2 bloktan oluşmaktadır. Bu bloklara “Head” ve “Body” bloğu adi verilir. “Head” bloğu sayfanızın beyin kısmıdır. Bu blok içerisinde meta (temel) bilgilerinizi, sitenizin başlığını, sitenizde kullanacağınız stil bilgilerini ve JavaScript kodlarını kullanabilirsiniz.

“Body” bloğu ise, gövde bloğu olarak adlandırdığımız bolumdur. Bu bolum içerisinde yazmış olduğumuz her bir tasarımsal element tarayıcı tarafından okunur, yorumlanır ve iletilir.

Yukarıdaki meta bilgileri tamamı ile arama motorlarına yardımcı olmak için kullandığımız bilgilerdir. Bu bilgiler sayesinde anahtar kelimelerimizi, site yazarlarını kullanılan programlama dilini, vs… tüm meta (temel) bilgileri sitenizin “Head” bloğu içerisinde kullanabilirsiniz…

<p> p elementi, paragraf elementidir. p elementi içerisine yazmış olduğunuz her bir yazı, bir metinin paragrafı olarak kabul edilir.

<br /> br elementi bir alt satıra geçmek için kullanılır.

<hr /> hr elementi sayfaya soldan sağa doğru tahmini kaplayacak şekilde – eğer stil vermediyseniz – çizgi çekmeye yarar.

<b>Burası kalın harflerle yazılmıştır.</b> (Bold)

<u>Altı çizili olarak yazılmıştır</u> (Underline)

<i>Burası da yana yatık italik harflerle yazılmıştır.</i> (İtalic)

<center>Ortalamak için kullanılır.</center>

<strong>Yazı içerisinde bir kelimeyi bold yapmak için kullanılır.</strong>

<span>HTML icerisinde basi bos metin bırakmamak için kullanılır. </span>

<sup>Yazı içerisinde bir veya birden fazla karakteri yazının bir tık üstüne almak için kullanılır. Örnek olarak üslü sayılar gösterilebilir.</sup>

<sub>Yazı içerisinde bir veya birden fazla karakteri yazının bir tık altına almak için kullanılır. Örnek olarak Kimya elementleri.</sub>

<h1>VolkanYzc</h1> <h2>VolkanYzc</h2> <h3>VolkanYzc</h3>   <h4>VolkanYzc</h4> <h5>VolkanYzc</h5> <h6>VolkanYzc</h6>

<h > Yazının font büyüklüğünü ayarlar ve 1’den 6’ya doğru küçülmeye başlar.

<small>Yazı fontunu küçüktür.</small>

<big> Yazı fontunu büyütür. </big>

<cite>Alıntı için kullanılır(İtalik ile benzer) </cite>

<blockquote> Paragraf alıntısı olarak nitelendirebilir. Normal paragrafınıza göre daha içeride gözükür.</blockquote>

<pre>İçerisine yazıdğınız girdi çıktıları kullandığınız gibi gösterir.(Tab, space, enter)</pre>

&lt; Küçüktür işareti.(<)      &gt; Büyüktür işareti.(>)

<abbr title=”Bu Bir Açıklamadır.”>Yazının üzerinde gelince gösterilmesini istediğiniz açıklamayı title bölümüne yazarak gösterebilirsiniz.</abbr>

<q>İçerisine aldığınız yazı tırnak içerisinde gösterilir.</q>

HTML’de bir sayfadan başka bir sayfaya link verebilmek için kullandığımız temel <a> etiketidir.

Bu etiketin kendine ait temel iki özelliği bulunmaktadır:

href => İlgili linkin hangi sayfaya yönlendirme yapacağını bildirdiğimiz özniteliktir

target => İlgili linkin içinde bulunduğumuz pencere/sekme içinde mi yoksa yeni bir pencere/sekme içinde mi açılacağını bildirdiğimiz özniteliktir.

Örnek;

Dilerseniz kendi projenizdeki bir html sayfasınıda aynı şekilde gösterebilirsiniz.

Örnek;

Sayfa üzerinde bir resim göstermek için <img/> elementini kullanıyoruz.

Bu element temelde 3 ana özelliğiyle kullanılmaktadır.

src => Source kelimesini kısaltmasıdır. Bu görselin kaynağını belirttiğimiz özniteliktir.

alt => Alternative Text’in kısaltmasıdır. Eğer fotograf tarayıcı üzerinde gözükmez ise onun yerine ne yazsın sorusuna verilen cevaptır.

title => Fotograf başlığı olarak kullanılan özniteliktir. Mouse ile fotografınızın üstüne geldiğiniz zaman tooltip yardımıyla o fotograf ile ilgili açıklamaları içerir.Ancak bir çok tarayıcı artik, alt attribute’unu tıpkı bir title’mış gibi de kullanmaktadır.

Örnek;

Resminizin boyut değişikliği için örnek;

Resminiz üzerinde belirli noktalara geldiğinde bağlantı açmak için <map> </map> taglerini kullanarak haritamızı belirleyerek içerisinde <area> taglerini kullanarak nokta atışı yapabiliyoruz.

Örnek;

Yukarıda ‘Head’ bölümünden bahsetmiştik şimdi biraz daha derinlemesine bakalım. Head bölümü içerisinde kullandığımız elementler <title> <meta /> <link /> <script> <base />’dir

Bu elementlerden kısaca bahsedelim.

<title>Belgenin başlığını tanımlar</title>

<meta Burada yazar içerik ile ilgili sitemiz hakkında bilgilendirme yapılabilir./>

<link Burada bir belge ya da harici kaynağı referans verebilirsiniz/>

<script>İstemci tarafından komut dosyalarınız tanımlanır. JavaScript tarafından görüntü işleme, form doğrulama ve içeriğin dinamikleştirilmesinde kullanılan değişiklikler. </script>

<base Farklı bir internet sitesinden çektiğimiz resim için kullanılır. Örnek olarak bir resmin url’sini base ile belittikten sonra. İmg olarak sitemiz içerisinde gösterebiliriz. Bir head içerisinde sadece bir tane <base > kullanabilirsiniz. />

Sitemize stil kazandırmak için CSS kullanıyoruz. 3 Çeşit CSS bulunmakta bunlar;

Inline – Html içerisinde kullandığınız CSS

External – Head bloklarının içerisine yazdığınız dışarıdan referans alınan CSS

HTML sayfalarımızda tablolama işlemleri sık kullanılır. Sayfa üzerinde bir takim verilerin tablo formatında gösterilmesi için kullanılan element <table> elementidir.

Genellikle bir tablo yapısı tıpkı bir HTML sayfa gibi 3 bloktan oluşur. Bu bloklar <thead> (tablonun header bilgisi), <tbody> (tablonun gövde bilgisi – kayıtların listelendiği alan) ve <tfoot> dan (sayfanın footer alanı) oluşur.

Bu 3 elementinde bir alt (child) elementi <tr> dir (table row) elementidir. Tablo satırı olarak kullanılmaktadır. <tr> elementinin alt elementi olan <td> (table data”) elementi içerisinde ise veriler

listelenir. Satirin hücresi olarak düşünebilirsiniz.

<th> elementi ise kullanım bakımından <td> nin aynisidir ancak thead içerisinde kullanıldığında varsayılan olarak içerisindeki değerleri ortalar ve kalın harflerle yazar…

<caption>Buraya tablomuzun ismini yazıyoruz.</caption>

<colgroup>Bu elementin içerisinde <col/> elementlerini kullanarak tablo satırlarımıza ‘sütun içeriği hizalama, dikey olarak sutun içeriği hizalama ve genişlik özelliklerini verebiliriz. Özellik  vermeyi soldan sağa doğru yapmaktadır.</colgroup>

Örnek;

HTML ortamında listeleme yapabilmek için size iki tip liste seçeneği sunulmaktadır. Bunlardan bir tanesi <ul> (unordered list) bir tanesi ise <ol> (ordered list) ‘dir. <ul> olarak ifade ettiğimiz listeler sayı bazlı değil işaret imi bazlı çalışır. <ol> listeleri ise sayısal listelerdir… <ol> ya da <ul> farketmeksizin her liste tipinin içerisinde <li> (list item) adli elementler bulunur

Örnek;

Buraya kadar bütün block (ör;<h1>, <p>, <ul>, <table>) ve inline (ör;<b>, <td>, <a>, <img>) elementlerini gördünüz. Bu elementlere stil vermek için <div> ve <span> elemenlerini kullanmamız gerekmektedir.

<span> elementi sizin bir yazı içerisinde değişiklik yapmanızı sağlar.

Örnek;

</div> elementi ise sizin bir bölümünüzü tanımlayarak stil verir.

Örnek;

HTML ile input elementlerimizi form elementi içinde kullanmamız gerekmektedir. Başlıca input elementleri; text, checkbox, password, radio, button,file, multiple… Eğer birden fazla Checkbox kullanacaksak ve bunlardan sadece birinin işaretlenmesi öngörülüyorsa ikisinin de name bilgisinin aynı olması gerekmektedir.

Örnek(“text”);

Örnek(“checkbox”);

Örnek(“password”);

Örnek(“radio”);

Örnek

Örnek(“file”);

Örnek(multiple);

Html’de iframe ile bir siteyi ya da bir sitenin bir kısmını gösterebilirsiniz. Örnek olarak google maps verilebilir. Frame’inizin içerisinde görünen biçiminin yükseklik, genişliğini,  çerçevesini ayarlayabilir ve bağlantı linkini verebilirsiniz.

Örnek;

2 Yorum

  1. Hüseyin Tekin - 29 Kasım 2013, 23:33 Cevap yaz

    Ellerine sağlık diyorum başka birşey demiyorum, harika bir anlatım olmuş çok teşekkürler.

  2. Onur - 3 Aralık 2013, 00:56 Cevap yaz

    Gerçekten çok açıklayıcı anlatmışsınız.

Bir Cevap Bırakın

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*