HTML Dersleri - Web Tasarıma Giriş
Nisan 2007
Dersler
HTML denilince çoğu insanın aklına bir programlama dili gelse de, durum bundan oldukça farklıdır. HTML'in sadece web sitelerinin tarayıcıda gözüken kısmının kodlanmasında kullanılan bir dildir, ve bizlerin statik web sayfaları hazırlamamızı sağlar. Ancak, dinamik sayfaların hazırlanmasında da HTML'in payı göz ardı edilemeyecek kadar büyüktür.
HTML:
- HyperText Markup Language'in kısaltmasıdır.
- Etiket (tag) denen yapılar ve bunların içine girilen verilerden oluşur.
- Herhangi bir metin derleyicisinde kolayca kodlanabilmektedir.
Ör: Not Defteri, kate, kwrite, gedit, vi, emacs, pico, ...
- Kodlama bilmeden web sayfaları hazırlamayı sağlayan çeşitli görsel tasarım programları da mevcuttur.
Ör: Dreamweaver, Frontpage, Quanta, ...
- Genelde .htm yada .html dosya uzantılarıyla kullanılır.
HTML’de unutulmaması gereken belli başlı bir kaç özellik vardır. Bunlardan ilki HTML'nin etiketlerden oluşan bir yapıya sahip olmasıdır. Etiketler '<' karakteri ile başlayan ve '>' karakteri ile biten içerisinde değişik HTML komutları barındıran deyimlerdir. Bu deyimlerden etkilenen nesneler ise aynı türden komutları barındıran etiketlerin arasında yer alır. Eğer açmış olduğumuz bir etiketi kapatacak olursak, kapatılan etikete '<' karakterinden sonra '/' karakterini eklememiz gerekir.
HTML Dosyalarının Ana Bölümleri:
Nasıl HTML sayfası yazılır:
Burada öğrendiğiniz kodları denemek ve çeşitli HTML sayfaları hazırlamak için bir metin düzenleyici programı açın. (Not Defteri, kwrite, vi...) Gerekli kodları yazdıktan sonra dosyanızı ".html" uzantısı ile kaydedin. Oluşturduğunuz dosyaya çift tıkladığınızda hazırladığınız sayfa, İnternet tarayıcınızda (Firefox, Internet Explorer, Opera...) görünecektir. Daha sonra yaptığınız sayfayı düzenlemek için aynı dosyayı tekrar metin düzenleme programında açıp değiştirebilirsiniz. Ayrıca İnternet'te gezerken rastladığınız sayfaların HTML kodlarını görmek için sayfalara sağ tıklayıp "sayfa kaynağını göster" seçeneğini seçebilir, kodlarını inceleyebilirsiniz..
HTML de kullanılacak en önemli etiket <html> etiketidir. Bu etiketler tarayıcıya, aldığı verilerin HTML verisi olduğunu anlatır ve bittiği yere kadar olan her şeyin HTML olarak gösterileceğini ifade eder. Bu yüzdendir ki bütün HTML sayfaları <html> etiketi ile başlayıp </html> etiketi ile biter. HTML'nin diğer elemanlarına gelirsek:
- <head> etiketi sayfada bir başlık özelliği taşır. Bu etiketin içinde kalan elemanlar tarayıcıda gözükmezler ve sayfanın yapısı ile ilgili bilgiler içerirler. Örneğin, sayfanın başlığı, karakter yapısı... gibi özellikler.
- <title> etiketi <head> etiketleri arasına yazılır. İkisinin arasındaki boşluğa yazdığımız yazılar sayfanın başlığı olarak niteliklendirilirler. Tarayıcı penceresinin üst kısımında ve pencere sekmesinde görütülenirler.
- <meta> etiketi de <head> etiketleri arasına yazılır. Bu etiket sayfamız hakkındaki bilgileri içerir. Sayfanın kendisini yenileme aralığı, karakter kodlaması, sayfanın arama motorları tarafından bulunmasını kolaylaştırıcı anahtar kelimeler ya da sayfa açıklamaları bu etiket içinde bulunur. meta etiketinin bir özelliği, </meta> gibi bir kapatma etiketine sahip olmamasıdır. Çünkü gerekli bilgiler sadece tek bir etiketin içine yazılabilir. (X)HTML'de ayrıca kapatılması gerekmeyen etiketler /> şeklinde kendi kendine kapatılır.
- <link> etiketinin kullanımı da "meta" etiketinin kullanımına çok benzer. "meta" etiketinde olduğu gibi </link> şeklinde bir kullanımı yoktur. Kaynak gösterme amaçlı kullanılan bir etikettir. Sayfamız dışındaki herhangi bir dokümanı kaynak göstermek ya da kullanılan sayfayı kendisi dışındaki bir dokümana kaynak göstermek amaçlı kullanılır.
- <body> etiketi tarayıcının içinde gösterilecek olan elemanları kapsar. Bu etiketin içine yazılan hemen her şey, tarayıcı penceresinde gösterilir. Örnek bir HTML dosyasının yapısını aşağıda görebilirsiniz:
<html>
<head>
<title>Sayfa Başlığı</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="HTML dersleri" />
<link rel="stylesheet" type="text/css" href="/stildosyasi.css" />
</head>
<body>
<p>Sayfa İçeriği</p>
</body>
</html>
Biçimlendirme Etiketleri
- <h1> <h2> ... <h6> bu taglar 1 den 6 ya kadar numaralanmış olup değişik büyüklüklerde başlık yazmamıza yarar. En büyük yazılacak olan başlığımızı
<h1> En büyük başlık </h1> şeklinde yazarız. 1 den 6 ya doğru yaklaştığımızda yazdığımız başlık küçülür. 6 da ise en küçük halini alır: <h6> En küçük başlık </h6> Ayrıca bu etiketlerden sonra yazılan deyişler otomatik olarak bir satır alttan başlarlar.
- <p> etiketi yazacağımız karakterlerin bir paragraf özelliği taşımasını sağlayacaktır.
- HTML, normalde boşluk, sekme, satırbaşı gibi karakterleri görmezden gelen bir dil olduğu için, alt satıra geçmek için "enter" tuşuna basmak yeterli olmaz. Alt satıra geçmek için yeni paragraf açılabilir ya da <br /> etiketi kullanılabilir. "br" kendi kendini kapatabilen bir etikettir. Normal HTML standardında <br> yazmak yeterli olsa da onun yerini almakta olan XHTML standardında her etiketin kapanması zorunluluğu olduğu için belirttiğimiz şekilde kullanmak daha doğrudur:
Üst satır<br />Alt satır
- <img> etiketi sayfamıza resim eklememizi sağlar. <img> </img> şeklinde bir kullanımı olmasına rağmen bu tarz kullanım pek tercih edilmemektedir. Resimi ekleyeceğimiz zaman:
<img src="resmin_yeri.jpg" alt="Açıklama" />
şeklindeki bir kullanımla resim dosyamızı eklemiş oluruz. src=" " ile resim dosyamızın bulunduğu adresi belirtiriz. alt=" " kısmı da resmimiz görünmediğinde yerinde yazacak yazıyı belirtmek için kullanılır. Eğer resimimizin boyutunda değişiklik yapmak istiyorsak da width ve height özelliklerini kullanarak isteğimizi belirtebiliriz:
<img src="resimin bulunduğu adres" alt="Açıklama" width="300px" height="200px" />
- <!-- ... --> Dosyanın içine açıklama yapmak için kullanılır. Tarayıcı bu kısıma geldiği zaman içinde yazanları görüntülemez fakat sayfa kaynağını görüntülediğimiz zaman gözükebilen bir yapıdır. ... nın olduğu yere açıklama metni yazılır. Örneğin:
<!-- Açıklama yapıyorum. -->
Metin Düzenleme
<b>, <u>, <i>, <sub>, <sup> etiketleri yazılan metinin bazı görünümsel özelliklerini belirlemede kullanılırlar.
- <b> yazılanları kalın olarak yazmakta,
- <u> yazılanları altı çizili olarak yazmakta,
- <i> yazılanları italik bi şekilde yazmakta kullanılırlar.
- <sub> yazılanları alt karakter olarak,
- <sup> yazılanları üst karakter olarak biçimler.
Bağlantılar
<a> sayfadan başka yerlere bağlantı vermekte kullanılır:<a href="baglanti_verilen_sayfa.html">tıkla</a>şeklinde bir kullanımı vardır. "href" özelligi baglantı verilen yerin adresini içerir ve <a href=" "> </a> etiketleri arasında kalan kısım ise sayfada gözüken kısımdır. <a> etiketlerinin değişik şekillerde kullanımı vardır:
<a href="mailto:mailadresi@cclub.metu.edu.tr"> tıkla </a>
<a href="baglanti.html"><img src=resim.jpg /></a>
İlk olarak kullanılan mail programına bir bağlantı vermiş olduk, sonra da "resim.jpg" adlı resimi kullanarak bir bağlantı vermiş olduk.
Listeler
<li> yapısı listelenecek olan elemanları belirtmekte kullanılır. Birçok çeşit liste vardır ve listelenecek olan elemanlar bu yapıların arasında yer alır. Bunlar:
- SIRALI LİSTELER: <ol> etiketi ile belirtilir. <ol> </ol> etiketleri arasına <li> </li> etiketleri ile listelenecek olan elemanlar girilir.
- SIRALI OLMAYAN LİSTELER:<ul> etiketi ile belirtilir.<ul> </ul> Aynı şekilde bu etiketlerin arasına <li> </li> etiketleri ile listelenecek olan elemanlar girilir.
- TANIM LİSTELERİ:<dl> etiketi ile gösterilirler. Bu listeler diğer listelerden farklı olarak listelenecek olan elemanları <li> etiketi ile değil, <dt> etiketi ile alır ve <dt> etiketi ile aldığı elemanın tanımının yer aldığı kısım ise <dd> </dd> etiketleri arasına yazılır.
Yazı dizimizin bir sonraki bölümünde formlardan ve tablolardan bahsedeceğiz.
Berkan Kısaoğlu
- 8 -
| Yazarın Üslubunu Beğendiniz mi?: |
|
|
| Yazının İçeriği Yeterli mi?: |
|
|
| Konu İlginizi Çekti mi?: |
|
|
