Buradasınız

HTML Etiketleri 1

HTML Komut Yapısı

HTML diğer programlama dillerinden farklı olarak sadece görsel düzenleme için kullanılmaktadır. HTML herhangi bir text editörle (Notepad, Word,Notped++...) hazırlanabilir. Bizler notped++ üzerinde kodlama yapacağız.

Yazım kuralları

  • Komutlar büyük ya da küçük harfle yazılabilir.
  • Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez.
  • Komutlar < ve > işaretleri arasında yazılır ve “etiket (tag)” adını alır.

 

Kullanım biçimi:

 <etiket (tag)_adi>

 Örnek :

<HTML>,<BODY>,<TITLE>
  •  Bir etiket <etiket_adi>  şeklinde başlar ve bazı etiketler dışında </etiket_adi> şeklinde biter.
  •  Etiketler iç içe yer alır ve en içteki etiketten başlatılarak kapatılır. Kodların okunabilirliğini artırmak için bir etiket bitmeden tekrar etiket açılırsa içeride açılan etiket biraz daha içeriden yazılmalıdır.

  • Bir etiket parametreler kullanarak biçimlendirilir ve bu parametrelere tırnak ("") işaretleri arasında değer atanır. Değerle parametre adı arasında eşittir (=) işareti kullanılır.

Kullanım biçimi:

<tag_adi parametre_adi ="deger">

Örnek:          

<body bgcolor="blue"> 
<body bgcolor=”blue” vlink=”red”>

 

WEB sayfasında standart olarak bulunması gereken kodlar  şunlardır. Bunlar sayfada mutlaka vardır. Bu kodlarla tarayıcı bunun bir WEB sayfası olduğunu anlar ve ona göre görüntüler. 

 

Örnek

<html> 
<head>     
<title>         Bilisimokulu.net Ders Notları     </title> 
</head> 
<body>     
<h3>         Bu sitede bilişim teknolojileri         ile ilgili dersler bulabilirsiniz.     
</h3> 
</body> 
</html>

 

 

<HTML>   : Bir WEB sayfasında bulunan ilk etikettir. Bu etiket tarayıcıya HTML belgesinin başladığı ve bittiği yeri bildirir. Bütün HTML kodları bu etiketin içinde yer almalıdır. Bu etiketin hiçbir parametresi yoktur.

<HEAD>  : HTML belgesinin ilk bölümüdür. WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır. Head etiketinin yorum aralığında <meta> etiketi yer alır. Bu etiket siteyi tarayıcıya ve arama motorlarına tanıtır. Meta etiketinde kullanılan parametreler aşağıdaki tabloda verilmiştir.

 

Meta Tagları

Meta tagları(etiketleri), web sayfalarının bilgi etiketleridir. HEAD etiketleri arasında yer alırlar. Kullanıcılara ve arama motorlarına içerik ve sayfa yapısı hakkında önbilgi sunmak için kullanılırlar.

 

  • content-type: Bu etiket, sayfanın karakter kodlamasını gösterir. Yazılmadığı takdirde sayfa ISO-8859-1 karakter kodlaması olarak değerlendirilir. HEAD etiketi içerisinde en üste yazılmalıdır.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  • abstract: Tüm site hakkında bilgi veren cümledir.

<meta name="abstract" content="Site özeti">

  • author: Site yapımcısının adı, iletişim bilgilerinin bulunduğu etikettir.

<metaname="author" content="Adınız, E-Posta Adresiniz">

  • copyright: Sitenin telif hakları konusunda bilgi veren etikettir.

<meta name="copyright" content="telif hakkı cümlesi">

  • description: Bazı arama motorlarının temel aldığı, site hakkında bilgi veren temel etiketlerden biridir.

<meta name="description" content="Sitenizin içeriği hakkında geniş bilgi">

  • expires: Sitenin içeriğinin hangi tarihte zaman aşımına uğradğını arama motorlarına ileten etiket.

<meta name="Expires" content="Mon, 12 Jan 2015 17:45:05 GMT">

  • keywords: Yine arama motorlarının temel aldığı, sitenizin içeriğini oluşturan kelimelerin bulunduğu etiket.

<meta name="keywords" content="kelime1, kelime2, kelime3, kelime4, kelime5">

  • language: Sitenizin varsayılan dilini belirten etiket.

<meta http-equiv="content-language" content="tr">

  • Revisit-After Tag: Arama motorlarına, sitenin içeriğinin kaç günde bir güncellendiğini ileten etiket.

<meta name="revisit-after" content="7 days">

  • refresh: Belli aralıklarla sayfanın yeilenmesini yada farklı sayfaya yönlendirme sağlayan etiket. Örnekteki 60, sayfanın 60 saniyede bir yenileneceğini belirtir.

<meta http-equiv="refresh" content="60">
<meta http-equiv="refresh" content="60;http://www.bilisimokulu.net">

  • robots: Arama motoru robotlarının,  site içerisindeki linkleri takip edip etmeyeceklerini gösteren etikettir.

Sayfanın indexlenmesini istiyorsak; index,follow
Sayfanın indexlenmesini istemiyorsak; noindex,nofollow

<meta name="robots" content="none">
<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,follow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,nofollow">


gibi kullanımları mevcuttur.

 

Örnek;

<html>
             <head>
                         <title> Çalışmalar</title>
                         <meta name="keywords" content="bilişim,bilgisayar,teknoloji,yenilik">
                         <meta http-equiv="refresh" content="10;Url=http://www.bilisimokulu.net">
             </head> 
<body>
 Yönlendirme yapılıyor
</body> 
</html>

 

 <BODY>  : HTML belgesinin bütün içeriği burada yer alır. Buraya metinler, resimler, listeler vb. her türlü HTML nesnesi yerleştirilebilir.

 

Kullanılacak parametreler              Görevi

Bgcolor                                              Arka plan rengini belirler. 

Background                                        Arka planda kullnılmak istenen resmi belirler.

Linkler bölümünde anlatılacak.

Link                                                   Sayfadaki linklerin rengini belirler.

Alink                                                  Linke tıklandığındaki rengi belirler.

Vlink                                                  Daha önce ziyaret edilmiş linklerin rengini belirler.

 

Örnek; 

<html>
<head>
      <title>
                  Bilimokulu.net Ders Notları
      </title>
</head>

<body bgcolor="#66ffff" background="arkaplan.jpg">
      <h3>
                  Bu sitede bilişim teknolojileri
                  ile ilgili dersler bulabilirsiniz.
      </h3>
</body>
</html>

 

  • Yukarıdaki örnekte arkaplan.jpg bulunmadığı için renk değeri işlem gördü.

 

<html> 
<head>       
     <title>
                   Bilimokulu.net Ders Notları       
     </title> 
</head> 

<body bgcolor="#66ffff" background="resimler/arkaplan.jpg">       
    <h3>      Bu sitede bilişim teknolojileri ile ilgili dersler bulabilirsiniz.    </h3> 
</body>
</html>

 

 

 

<TITLE>:  Head bölümü içine yazılan title bölümüne sayfanın başlığı yazılır, tarayıcının sol üst bölümünde bulunan başlık çubuğunda görüntülenir.

<html>
<head>
      <title>
                  Bilimokulu.net Ders Notları
      </title>
</head>
<body >


</body>
</html>

 Listeleme Etiketleri

 

HTML tag'ları kullanarak sayfa içerisinde otomatik olarak numaralandırılan ve sıralandırılan listeler hazırlamak için kullanılan etiketlerdir. <ol>, <ul>, <li>

 

            <OL>   Sıralı liste oluşturmak için kullanılır. herhangi bir  şeyi numaralı, alfabetik, roma rakamlı olarak sıralı göstermektir.

            <UL>    Listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar, kareler yerleştirmek için <ul> etiketini kullanılır.

            <LI>   <li> etiketi ingilizce “liste elemanı” anlamına gelen  'list item' kelimesinin kısaltılmışıdır. Liste elemanları sırayı belirtmek için de <li> imi ile birlikte kullanılır. Yani sıralanacak olan ifadenin başına <li> getirmeliyiz.

 

Etiket

Parametreler

Açıklama

<ol>

type

Listeleme tipini belirler. type=”a”
1  :    Onluk tabanda numaralama (1,2,3,4,…)
i   :    Küçük rakamlarla romen sayıları (i,ii,iii,iv,…)
I   :    Büyük rakamlarla romen sayıları (I,II,III,IV,…)
a   :    Küçük harflerle alfabetik (a,b,c,…)
A  :   Büyük harflerle alfabetik (A,B,C,…)

start

Listenin başlangıç değerini belirtir. Her zaman sayı olmalıdır. start=”5”

<ul>

type

1. disc – İçi dolu bir daire görüntüler.
2. circle – İçi boş bir daire görüntüler.
3. square – İçi dolu kare görüntüler.

 

Aşağıdaki uygulamayı yapalım.

 

<html>
<head> 
<title>listeleme Örnekleri </title>     
</head>
<body bgcolor="yellow">
    Bilişim Sınıfları
    <ul >
        <li>10 Bilişim A  
        <li>10 Bilişim B
        <li>11 Bilişim A
        <li>11 Bilişim B
        <li>12 Bilişim A
        <li>12 Bilişim B
        <li>10 AND Bilişim
        <li>11 AND Bilişim
        <li>12 AND Bilişim
    </ul>
</body>
</html>

Aşağıdaki type parametrelerini deneyiniz.

<ol type="a">

<ol type="A">

<ol type="i">

<ol type="I">

<ol type="1">

<ol type="a" start="20"> Özellikle yapıp inceleyin.

 

Örnek; Uygulamamızda listelemeyi içi dolu daire ile yapalım.

<html>
<head> 
<title>listeleme Örnekleri </title>     
</head>
<body bgcolor="yellow">
    Bilişim Sınıfları
    <ul >
        <li>10 Bilişim A  
        <li>10 Bilişim B
        <li>11 Bilişim A
        <li>11 Bilişim B
        <li>12 Bilişim A
        <li>12 Bilişim B
        <li>10 AND Bilişim
        <li>11 AND Bilişim
        <li>12 AND Bilişim
    </ul>
</body>
</html>

Uygulamamızı <ul type="square" > parametresi şeklinde deneyeyim.

 

Lisle etiketleri iç içe kullanılabilir. İç içe kullanılırken etiketlerin kapanma sıralarına dikkat ediniz.

<html>
<head>     
    <title>listeleme Örnekleri </title>     
</head>
<body bgcolor="yellow">

Bilişim Sınıfları
    <ol type="1">
        <li> 11 Bilişim A
            <ul type="disc">
                <li>Açelya UYANIK
                <li>Gülşen GÖKÇE
                <li>Kadir AKTÜRK
            </ul>
        <li> 11 Bilişim B
            <ul type="circle">
                <li>Enes TAN
                <li>Gözde ERTEM
                <li>Demet AYDIN
            </ul>
    </ol>
</body>
</html>

 

Aşağıdaki örnekleri yapmaya çalışınız.

 

Yorum ekle

Konuyla İlgili Yazılar

HTML Etiketleri 2

Metin Ve Görünüm Düzenleme Etiketleri <HX>(<h1>..<h6>): Bu etiketler, doküman içinde kullanılabilecek başlıklardaki yazıların büyüklüklerini... devamı...

CSS Giriş

HTML Etiketleri 3

HTML Etiketleri 2

HTML Etiketleri 4