İNTERNET PROGRAMCILIĞI

Transkript

1 İNTERNET PROGRAMCILIĞI Konular Vize Hazırlık

2 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 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: <title>basit BİR HTML METNİ</title> 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 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: <title>bilgisayar DİLLERİ</title> <meta name="keywords" CONTENT="bilgisayar dilleri, programlama dilleri, yazılım"> META deyimi yardımıyla sayfanın karakter kümesini de tanımlayabilirsiniz. <title>bilgisayar DİLLERİ</title> <meta http-equiv="content-type" Content="Text/html";charset="UTF8">

3 2 İnternet Programcılığı 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 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 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 Listeler (Lists) HTML, çeşitli türlerde listelerin oluşturulabilmesine olanak sağlar. Bu liste türleri, şeklindedir. Numaralanmamış liste Numaralanmış liste Tanım listesi 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: <title>basit BİR HTML METNİ</title>

4 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> 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: <title>basit BİR HTML METNİ</title> <body> <h3>programlama Dilleri</h3> <ol> <li>fortran</li> <li>cobol</li> <li>basic</li> <li>pascal</li> <li>c/c++</li> </ol> </body>

5 4 İnternet Programcılığı İç İç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. <title>türkiye'de BÜYÜK ŞEHİRLER VE İLÇELER</title> <body> <h3>türkiye-şehirler</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>

6 5 İnternet Programcılığı <b> etiketi <b> ve </b> etiketleri arasına alınan metin, koyu (bold) hale getirilir <i> etiketi <i> ve </i> etiketleri arasına alınan metin, italik (eğik yazı biçimi) hale getirilir <u> etiketi İşaretlediği metnin altına alt çizgi çekilmesini sağlar 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=" Üniversitesi</a> 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=" target="_blank">karabük Üniversitesi</a> Aşağıdaki tabloda, target özelliği ile kullanabileceğiniz parametrelerin listesi yer almaktadır: Özellik _blank _self _parent _top Tanım sayfayı yeni bir pencere ya da sekmede açar. sayfayı aynı çerçevede açar. (öntanımlı olan özelliktir) sayfayı bir üst çerçevede açar. sayfayı en üst çerçevede açar.

7 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=" /> 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=" width="50" height="50" /> 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=" 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 Arka plan renginin değiştirilmesi Arka plan rengini değiştirmek için bgcolor özelliğini kullanmalısınız. <body bgcolor="red" > 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">

8 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 Tablo etiketleri 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 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 tr etiketi: <tr> </tr> Tablo içinde bir tablo satırını tanımlar 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 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 Tablo özellikleri Align parametresi: Bir hücre verisinin yatay hizalamasını belirler. Left, Right, Center parametrelerini kullanarak belirtirsiniz Valign parametresi: Bir hücre verisinin düşey hizalamasını belirler. Top, Middle, Bottom parametrelerini kullanarak belirtirsiniz Colspan parametresi: Bir hücrenin kapsadığı sütun sayısıdır. Belirttiğiniz kadar sütun birleştirmeyi sağlar Rowspan parametresi: Hücrenin kapsadığı satır sayısıdır. Belirttiğiniz kadar satır birleştirmeyi sağlar.

9 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 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 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 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 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.

10 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 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.

11 10 İnternet Programcılığı border-bottom-color: Tablonun alt kenarının rengini belirler. border-left-color: Tablonun sol kenarının rengini belirler.