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">
2 İnternet Programcılığı
</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>
3 İnternet Programcılığı
<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>
4 İnternet Programcılığı
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>
5 İnternet Programcılığı
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.
6 İnternet Programcılığı
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">
7 İnternet Programcılığı
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.
8 İnternet Programcılığı
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.
9 İnternet Programcılığı
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.
10 İnternet Programcılığı
border-bottom-color: Tablonun alt kenarının rengini belirler.
border-left-color: Tablonun sol kenarının rengini belirler.