Ana Sayfa » Tasarım » HTML’de İlk Sayfa Yapımı

HTML’de İlk Sayfa Yapımı

Elifcan Avşar

Elifcan Avşar toplam 5 yazısı bulunmakta.

Düzce Üniversitesi-Yönetim Bilişim Sistemleri (MIS) / Kadın Bilişimci Düzce il Temsilcisi

Genel hatlarıyla HTML ve özelliklerinden bahsetmiştik. Bu yazımda sizlere basit bir HTML sayfası oluşturup, onu nasıl kaydedeceğimize ve serverda nasıl görüntüleyeceğimize dair bilgiler vereceğim.

html

Öncelikle HTML belgelerinin genel kod yapısını hatırlayıp bir göz atalım.

Sol tarafta da gördüğünüz üzere ana taslağımız her zaman bu etiketlerden oluşuyordu. Sayfanızın yapısına göre Türkçe karakterlere yer verecek olursanız ”<head>” etiketinin içine Meta etiketini tanımlamamız gerekecek.“ < meta http-equiv=”content-type” content=”text/html; charset=windows-1254″/> ,

< meta http-equiv=”content-type” content=”text/html; charset=iso-8859-9″ /> “ kodlarını ekleyerek Türkçe karakter desteğini de yapmış olacaksınız. Bu meta etiketleri  HTML4’te ve HTML5’te sürekli güncellenmiştir. Tüm karakterleri destekleyen kod HTML5 için “< meta charset=“UTF-8″  >” kodudur.

Gelelim şimdi ilk sayfamızı oluşturmaya:

Şu an en basitinden internet tarayıcımıza “Merhaba Dünya!” yazmayı deneyelim. Üstteki şablonun aynısını alıp bilgisayarınızdaki “Not defteri” programına yazmaya başlayın.En başta ne demiştik, tarayıcımız bizim yazdığımız onca kodun içinden sadece “<body>” etiketi içinde yazılanları sayfada gösterecektir. Bu yüzden “Merhaba Dünya!” yazısını “< body>”  etiketi içine yazmamız gerekecektir.

Dediklerimi yaptığınızda;

html4

Kodlarını elde etmiş olacaksınız. Sıradaki işimiz yazdığımız bu kodları kaydetmek. Bildiğiniz üzere Not Defteri’ne kaydettiğimiz tüm metin dosyaları .txt uzantısıyla kaydolur. Biz burada HTML sayfaları elde etmek istediğimiz için dosyamızı farklı kaydet butonuna tıklayarak uzantısını “.htm” veya “.html” diye değiştiriyoruz ve kaydediyoruz.

html2

 

Ben “taslak.htm” adıyla kaydettim. Kaydettiğiniz bu sayfa var olan tarayıcınız hangisiyse onun simgesini alacaktır. Kaydettiğiniz bu sayfayı açtığınızda karşınıza gelecek ekran:

html3

olacaktır.Gördüğünüz gibi sol üst kısımdaki araç çubuğumuzda “<title>” etiketine yazdıklarımız, ana alanda ise “<body>” etiketine yazdıklarımız yer aldı.

Böylelikle ilk HTML sayfanızı oluşturmuş oldunuz. Gördüğünüz gibi çok basit ve kullanışlı bir algoritması var. HTML gözünüzde büyütmeniz gereken bir dil değil. Kendinizi verecek olursanız hemen kavrayacağınız bir dil. Biz bu yazıda HTML sayfamızın ana yapısını, ilk sayfamızı oluşturmayı gördük. Bir sonraki yazıda, ana ekranın renklendirilmesi, yazılarımızın renklendirilmesi ve  biçimlendirmelerinden bahsedeceğim :)

 


, , ,

4 thoughts on “HTML’de İlk Sayfa Yapımı

  1. Serhat Yücel diyor ki:

    yerine şeklinde kullanılırsa Html 5 için çok daha dost canlısı olur. :) Makale için teşekkür ederiz, ellerinize sağlık.

    1. Serhat Yücel diyor ki:

      İnat ettim o yorumu yapacağım. :) Panelde kirlilik oluyor biliyorum şimdiden kusura bakmayın.
      http://i.hizliresim.com/QlBDkj.jpg

      1. Elifcan Avşar diyor ki:

        Panelimiz,wordpress tabanlı olduğu için ve tagleri tanıyıp algıladığı için bu sorunla sürekli karşılaşıyorum ben de. :) ve evet HTML 5’in sağladığı yeni tagleri de yazacağım daha sonra, başlangıç aşamasında akıl karıştırmak istemediğimden dolayı html etiketiyle başladım, tavsiyeniz için teşekkürler. :)

  2. Ahmet Hakan diyor ki:

    Yeni başlayanlar için güzel bir yazı olmuş. Teşekkürler..

Bir Cevap Yazın

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


üç × 7 =

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>