İnternet programciliĞi · temel html etİketlerİ 1.1. html etiketi html etiketi,...

Vize Hazırlık

İNTERNET PROGRAMCILIĞI Konular

1 İnternet Programcılığı

1. TEMEL HTML ETİKETLERİ

1.1. HTML etiketi

HTML etiketi, tarayıcınıza, dosyanın HTML kodu ile yüklenmiş bilgi içerdiğini

bildirir. Dosya adındaki .html uzantısı ise bu dosyanın bir HTML belgesi olduğunu belirtir.

1.2. HEAD etiketi

Bir HTML belgesinin ilk kısmını belirler. İçinde TITLE elemanının bulunması

zorunludur. Belgenin başlığını TITLE elemanı belirler.

Aşağıdaki örnekteki HTML kodunun HEAD kısmına bakalım:

<html> <head> <title>BASİT BİR HTML METNİ</title> </head> </html>

Buradaki <TITLE> ve </TITLE> ifadeleri arasındaki BASİT BİR HTML METNİ

ifadesi aşağıda gördüğünüz gibi sayfanın başlığı olarak görüntülenmektedir:

1.3. TITLE etiketi

TITLE etiketi yardımıyla oluşturduğunuz web sayfasının başlığını belirleyebilirsiniz.

Bu başlık, yukarıda görüldüğü gibi, başlık çubuğu üzerinde görüntülenecektir.

Başlık içeriği, sayfanın içeriği ve işlevi ile uyumlu olmalıdır. Sayfayı tanımlayıcı

nitelikte ve kısa olmalıdır.

1.4. META etiketi

Meta etiketiyle sayfanızın bir tanımını yapabilir ve sayfa içeriğini uygun anahtar

sözcüklerle tanımlayabilirsiniz.

Örnek bir Meta etiketi aşağıdaki gibidir:

<html> <head> <title>BİLGİSAYAR DİLLERİ</title> <meta name="keywords" CONTENT="bilgisayar dilleri, programlama

dilleri, yazılım"> </head> </html>

META deyimi yardımıyla sayfanın karakter kümesini de tanımlayabilirsiniz.

<html> <head> <title>BİLGİSAYAR DİLLERİ</title> <meta http-equiv="Content-type"

Content="Text/html";charset="UTF8">


</head> </html>

1.5. BODY etiketi

HTML belgenizin ikinci ve en uzun parçası BODY kısmıdır. Belgenizin tüm içeriği

burada yer alacaktır. Bir sonraki belgede açıklanan etiketlerin tümü BODY içinde yer

alacaktır.

Body İçerisinde Yer Alan Temel HTML Etiketleri

1.5.1. Başlıklar (Headings)

HTML metni içinde H1 ile H6 aralığında ölçeklendirilmiş 6 farklı düzeyde başlık

kullanılabilir. Burada H1 en büyük başlığı, H6 ise en küçük başlığı simgelemektedir.

Bir başlık elemanının genel yazılış biçimi,

<Hx>Başlık Metni</Hx>

şeklindedir. Burada x, 1 ile 6 arasında bir tamsayıdır ve başlığın düzeyini

belirlemektedir.

HTML kodunuz içinde başlık düzeylerini atlatmamaya dikkat ediniz. Örneğin H1

ile başlayıp daha sonra H4'ü kullanmayın. Düzeyler birbirini sırasıyla izlemesi, arama

motorları tarafından daha iyi bir konumda endekslenmeniz için de önemlidir.

1.5.2. Paragraflar (Paragraphs)

Oluşturacağınız Web sayfası üzerine yerleştireceğiniz metni ayrı paragraflar

şeklinde ifade etmek için <p> ve </p> etiketlerini kullanmalısınız.

1.5.3. Listeler (Lists)

HTML, çeşitli türlerde listelerin oluşturulabilmesine olanak sağlar. Bu liste türleri,

Numaralanmamış liste

Numaralanmış liste

Tanım listesi

şeklindedir.

1.5.3.1. Numaralanmamış liste

Numaralanmamış listeyi oluşturmak için <ul> ve </ul> etiketleri kullanılır. Bu

etiketler arasına liste elemanlarını yerleştirmek için <li> etiketi kullanılır. Bu etiketi

izleyen yere liste elemanı yerleştirilmelidir. <li> etiketinin </li> etiketiyle kapatılması

zorunlu değildir.

Örneğin, aşağıdaki HTML kodunu birlikte oluşturalım:

<html> <head> <title>BASİT BİR HTML METNİ</title> </head>


<body> <h3>Programlama Dilleri</h3> <ul> <li>Fortran</li> <li>Cobol</li> <li>Basic</li> <li>Pascal</li> <li>C/C++</li> </ul> </body> </html>

1.5.3.2. Numaralanmış Listeler

Numaralanmış liste (numbered list ya da diğer adı ile ordered list (sıralanmış liste))

gerçekte numaralanmamış liste ile benzer yapıdadır. Tek fark, bu tip bir listede <ol> etiket

'ının kullanılmasıdır. Diğer bir fark ise çıktıda görülür. Liste elemanlarına otomatik olarak bir

numara verilmektedir.

Aşağıdaki HTML kodunu oluşturunuz:

<html> <head> <title>BASİT BİR HTML METNİ</title> </head> <body> <h3>Programlama Dilleri</h3> <ol> <li>Fortran</li> <li>Cobol</li> <li>Basic</li> <li>Pascal</li> <li>C/C++</li> </ol> </body> </html>


1.5.3.3. İç İçe Listeler

Listeleri iç içe de kullanabilirsiniz. Hatta tek bir liste kalemi içinde iç içe listeler içeren

paragraflar da düzenleyebilirsiniz.

Örneğin, aşağıdaki HTML kodunda dıştaki liste elemanları şehirlerdir. Her şehre ait

ilçeler ise liste elemanı içinde yeni bir liste düzenlenerek belirtilmiştir.

<html> <head> <title>TÜRKİYE'DE BÜYÜK ŞEHİRLER VE İLÇELER</title> </head> <body> <h3>TÜRKİYE-ŞEHİRLER</h3> <ul> <li>ISTANBUL'UN ÖNEMLİ İLÇELERİ</li> <ul> <li>Fatih</li> <li>Bakırköy</li> <li>Kadıköy</li> </ul> <li>ANKARA'NIN ÖNEMLİ İLÇELERİ</li> <ul> <li>Çankaya</li> <li>Yenimahalle</li> </ul> </ul> </body> </html>


1.5.4. <b> etiketi

<b> ve </b> etiketleri arasına alınan metin, koyu (bold) hale getirilir.

1.5.5. <i> etiketi

<i> ve </i> etiketleri arasına alınan metin, italik (eğik yazı biçimi) hale getirilir.

1.5.6. <u> etiketi

İşaretlediği metnin altına alt çizgi çekilmesini sağlar.

1.6. Link Oluşturmak

HTML'in önemli özelliklerinden biri, bir metin parçası ya da bir resim üzerinden başka

bir belgeye bağlantı kurabilmesidir. Bu bağlantı, link adı verilen yapılar sayesinde

gerçekleştirilmektedir. Bir resim ya da metnin rengi değiştirilerek ya da metin alt çizgili hale

getirilerek bu resim ya da metnin bir hipermetin linki (hypertext link) ya da sadece link

olduğu belirtilir.

Bir link oluşturmak için aşağıdaki adımlar izlenmelidir:

<a sembolü ile başlanır.

href="DosyaAdı" ifadesi yerleştirilir. Burada DosyaAdı parametresi, oluşturulan link

yardımıyla çağrılacak olan dosyanın adıdır.

> sembolünü yerleştiriniz.

Linki oluşturacak metni giriniz.

</A> etiketiyle ifadeyi tamamlayınız.

<a href="http://www.karabuk.edu.tr">Karabük Üniversitesi</a>

1.6.1. Target özelliği

Target özelliği sayesinde, bağlanan web sitesinin nerede açılacağını belirleyebilirsiniz.

Örneğin adresin yeni bir sayfada açılmasını sağlamak için aşağıdaki HTML kodunu girmek

gerekir.

<a href="http://www.karabuk.edu.tr" target="_blank">Karabük Üniversitesi</a>

Aşağıdaki tabloda, target özelliği ile kullanabileceğiniz parametrelerin listesi yer

almaktadır:

Özellik Tanım _blank sayfayı yeni bir pencere ya da sekmede açar. _self sayfayı aynı çerçevede açar. (öntanımlı olan özelliktir) _parent sayfayı bir üst çerçevede açar. _top sayfayı en üst çerçevede açar.


1.7. HTML'de Görseller

Tarayıcılar resim ve görüntü dosyalarını gösterebilir. İnternet'te yaygın olarak

kullanılan dosya tipleri bitmap (.bmp), GIF, JPEG ve PNG şeklinde sıralanabilir. Bu eğitim

içeriğinde web sayfanıza bir görseli nasıl ekleyeceğinizi göreceksiniz.

Sitemizin sunucusunda bulunan bir resim için kod şu şekilde yazılır:

<img src="img/değerlendirme.jpg">

Src parametresi, yüklenecek görselin URL bilgisini de içerebilir. Örneğin;

<img src="https://www.mustafaaksin.com/degerlendirme.jpg" />

1.7.1. Görsellerin boyutunu ayarlamak

Görüntülenecek olan görselin boyutları HTML kodu içinde belirtilebilir. height

parametresiyle görselin piksel cinsinden yüksekliğini ve width parametresiyle de piksel

cinsinden genişliğini belirtebilirsiniz.

Örneğin;

<img src="https://www.mustafaaksin.com/degerlendirme.jpg" width="50" height="50" />

1.7.2. Görselin sayfa üzerindeki konumunun belirlenmesi

Görselin sayfa üzerindeki konumunun belirlenmesi için align parametresini

kullanabilirsiniz. Sola yaslamak için left, sağa yaslamak için right, ortalamak için center, üst

için top, alt için ise bottom şeklinde konum tanımlanız yeterli olacaktır.

<img src="https://www.mustafaaksin.com/degerlendirme.jpg" align="center" />

1.8. HTML Stilleri

Her HTML etiketi önceden tanımlanmış stil renklerini barındırır. Bu yazılar için siyah,

arka plan için beyaz şeklindedir. Style özelliğini kullanarak dilediğiniz gibi renklendirme

yapabilirsiniz.

1.8.1. Arka plan renginin değiştirilmesi

Arka plan rengini değiştirmek için bgcolor özelliğini kullanmalısınız.

<body bgcolor="red" >

1.8.2. Kullanılan metin renklerinin değiştirilmesi

Kullanılan metin renklerinin değiştirilmesi için text sıfatını kullanmanız yeterlidir.

Aşağıdaki örnekte kullanımını ayrıntılı şekilde görebilirsiniz:

<body text="red">

http://tr.wikipedia.org/wiki/JPEG

http://tr.wikipedia.org/wiki/Portable_Network_Graphics


1.9. HTML Tablolar

Web sayfaları içinde tablolara sıkça ihtiyaç duyarız. Bu eğitim belgesinde temel

tablo etiketlerini ve kullanımlarını öğreneceğiz.

Düzgün tanımlanmış tablolar birçok farklı etiketi içerdiği için öncelikle etiketlerin

anlamlarını öğrenecek, sonrasında çeşitli parametreleri kullanarak nasıl daha düzenli

hale getirebileceğinizi göreceksiniz.

1.9.1. Tablo etiketleri

1.9.1.1. table etiketi:

<table> </table>

HTML kodu içinde bir tablo tanımlar. Şayet border parametresi tanımlanmışsa

tarayıcı tabloyu çevre sınırları ile görüntüler.

1.9.1.2. caption etiketi:

<caption> </caption> Tablonun başlığı için bir ifade tanımlar. Tablo başlığının öntanımlı konumu,

tablonun üstünde ve ortalanmış durumdadır.

1.9.1.3. tr etiketi:

<tr> </tr>

Tablo içinde bir tablo satırını tanımlar.

1.9.1.4. th etiketi:

<th> </th>

bir tablo başlık hücresi tanımlar. Öntanımlı olarak bu hücredeki metin ortalanmış

ve koyu (bold) renklidir.

1.9.1.5. td etiketi:

<td></td>

Bir tablo hücresi tanımlar. Ön tanımlı olarak bu hücre içindeki metin sola yanaşık

ve düşeyde ortalanmış vaziyettedir.

1.9.2. Tablo özellikleri

1.9.2.1. Align parametresi: Bir hücre verisinin yatay hizalamasını belirler. Left,

Right, Center parametrelerini kullanarak belirtirsiniz.

1.9.2.2. Valign parametresi: Bir hücre verisinin düşey hizalamasını belirler. Top,

Middle, Bottom parametrelerini kullanarak belirtirsiniz.

1.9.2.3. Colspan parametresi: Bir hücrenin kapsadığı sütun sayısıdır. Belirttiğiniz

kadar sütun birleştirmeyi sağlar.

1.9.2.4. Rowspan parametresi: Hücrenin kapsadığı satır sayısıdır. Belirttiğiniz

kadar satır birleştirmeyi sağlar.


2. TEMEL CSS KODLARI

Bu kısımda html ile birlikte kullanılabilecek temel css kodlarını açıklamaları ile

birlikte yer almaktadır. Bu kodlar, bir web sitesinin yapılışında kullanılabilecek temel css

kodlarıdır.

2.1. FONT ÖZELLİKLERİ

font-family: Yazı türünü belirler.(Arial , Verdana gibi.)

font-style: Yazının normal veya sağa eğik olmasını sağlar.

font-variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.

font-weight: Yazının kalınlık-inceliğini belirler.

font-size: Yazının büyüklüğünü belirler.

2.2. LİNK ÖZELLİKLERİ

a: Linkin, sayfa açıldığında tıklanmadan veya imleç üzerine getirilmeden önceki

durumudur.

a: hover: Linkin imleç üzerine getirildiğindeki durumudur.

a: active: Linkin tıklandığı andaki durumudur.

a: visited: Linkin tıklandıktan sonraki durumudur.

2.3. BİÇİMLENDİRME

color: Linkin rengini belirler.

background-color: Linkin zemin rengini belirler.

background-image: Linkin zeminine resim ekler(Bu animated-gif de olabilir.)

text-decoration: Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.

font-weight: Yazının kalınlık veya inceliğini belirler.

border: Kenarlık ekler.

display: Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

2.4. KATMAN <div> ÖZELLİKLERİ

top: Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.

left: Katmanın soldan ne kadar içeride olması gerektiğini belirler.

width: Katmanın genişliğinin ne kadar olacağını belirler.

height: Katmanın yüksekliğinin ne kadar olacağını belirler.

hidden: Sığmayan yerleri gizler.


visibility: Katmanın görünebilirlik ayarını yapar.

visible: Katmanın görünür olmasını sağlar.

z-index: Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri

katmanın en altta olacağını belirtir.

overflow: için değerler;

auto: Otomatik olarak belirlenir.

scroll: Kaydırma çubuğu ekleyerek görünmesini sağlar.

visible: Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini

sağlar.

Position

absolute: Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.

relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.

static: Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.

2.5. TABLO ÖZELLİKLERİ

margin-top: Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.

margin-right: Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.

margin-bottom: Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.

margin-left: Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

padding-top: Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

padding-right: Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

padding-bottom: Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu

belirler.

padding-left: Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

border-top-width: Tablonun üst kenarının kalınlığını belirler.

border-right-width: Tablonun sağ kenarının kalınlığını belirler.

border-bottom-width: Tablonun alt kenarının kalınlığını belirler.

border-left-width: Tablonun sol kenarının kalınlığını belirler.

border-top-style: Tablonun üst kenarlık türünü belirler.

border-right-style: Tablonun sağ kenarlık türünü belirler.

border-bottom-style: Tablonun alt kenarlık türünü belirler.

border-left-style: Tablonun sol kenarlık türünü belirler.

border-top-color: Tablonun üst kenarının rengini belirler.

border-right-color: Tablonun sağ kenarının rengini belirler.


border-bottom-color: Tablonun alt kenarının rengini belirler.

border-left-color: Tablonun sol kenarının rengini belirler.

İnternet programciliĞi · temel html etİketlerİ 1.1. html etiketi html etiketi,...

Documents