İNTERNET PROGRAMCILIĞI 1 Öğr. Gör. Canan ASLANYÜREK
Sayfalara Resim Eklemek Resimlerin sayfa içerisindeki düzenlerini belirlemek için <center> ve <p> etiketleri başta olmak üzere tüm metin bloklama etiketleri kullanılabilir. <IMG> Etiketi: Sayfaya resim eklemek için kullanılır. Jgp, bmp, gif, pcx, png, tiff, wmf gibi resim formatlarını destekler.
Sayfalara Resim Eklemek Src: Resmin konumunu belirler. Alt: Resme ait açıklama metnini belirler. Fare resim üzerine geldiğinde ortaya çıkar. Height: Resmin ekrandaki yüksekliğidir. Width: Resmin ekrandaki genişliğidir. Align: Resmin yataydaki konumudur.(Left, right) Hspace: Komşu nesnelere olan yatay uzaklığını belirler. Vspace: Komşu nesnelere olan düşey uzaklığını belirler. Border: Resmin kenarlık kalınlığını belirler.
UYGULAMA Resim isimli bir klasör oluşturunuz. İçerisine görüntülemek istediğiniz resmi kopyalayınız. Resmin içinde olduğu klasöre aşağıdaki kodları kaydederek tarayıcı sayfasında görüntüleyiniz.
UYGULAMA <html> <head> </head> <body> <p align=" center"><B>Canan’s Web Page</B></p> <p align="center"> <img border="2" src="Resim/kus.png" alt="Canan Aslanyürek" width="100" height="100" ></p> </body> </html>
BAĞLANTI EKLEMEK Bağlantı eklemek için kullanılır. <a> </a> etiketleri arasına yazılan metinlerin veya resim gibi nesnelerin üzerlerin fare ile tıklandığında tarayıcı belirtilen adrese ziyaretçiyi yönlendirir. Özellikleri: Href: Bağlantı adresini belirlemek için kullanılır. Aynı dizindeki bir sayfayı belirtmek için: <a href=" index.htm"> Ana sayfa </a> Alt dizinlere alt klasörler içerisindeki bir dosyayı göstermek için. <a href=" dosyalar/CV.doc"> Özgeçmiş </a>
BAĞLANTI EKLEMEK Aynı dizinin üst dizinlerinde olan bir dosyayı göstermek. ‘../’ işaretleri kaç üst dizin varsa o kadar kullanılır. Aşağıdaki dosya iki üst dizindedir. <A HREF= " ../../doc/index.htm" > Yol belirterek </A> URL adresi göstererek. <A href=" http://www.google.com">Arama Motoru.</A>
BAĞLANTI EKLEMEK Sayfalara dowland(indirme) dosyaları yerleştirmek için <A> etiketi kullanılır. Tarayıcılar uzantısı htm, html, asp,.. Gibi görüntüleyebileceği formatların dışında dosya formatlarına rastladığında bunları bilgisayarınıza indirmeniz için gerekli prosedürleri yerine getirir. Örnek: <a href="video/bebek.mp4"> Bebek videosu</a> Bağlantılar mail adreslerine yönlendirilebilir. Bunun için mail adresine mailto: aklentisi yapılır. <a href="mailto:c.aslnyrk@gmail.com">mail</a> ""
UYGULAMA <html> <head> </head> <body> <p align="center"> <a href="C:\Users\PC\Desktop\video\bebek.mp4">Çağan</a> <a href="mailto:c.aslnyrk@gmail.com">mail</a> </p> <p align="center"> <a href="http://www.google.com.tr/">Google</a></p> <p align="center"> <a href="http://www.yahoo.com.tr/">Yahoo</a></p> </body> </html>
SAYFA İÇİ BAĞLANTILAR Genelde zengin içeriğe sahip sayfalarda istenen paragrafa gitmek için kullanılır. Eklenen bağlantı başka bir sayfayı değil aynı sayfadaki herhangi bir paragrafı göstermektedir. <a href="#Mikro"> Microcomputer(Kişisel Bilgisayar)</a><br>
EKLENTİLER Sayfalara metin ve resim dışındaki diğer formattaki içeriklere eklenti denir.(Flash, ses, müzik…) <EMBED> Etiketi: Video, ses ve flash animasyonları sayfaya eklemek için kullanılır. Height/width: Sayfada eklentiye ayrılan alanın yükseklik ve genişliği. Src: Eklentinin URL sini tanımlar. Type: Eklentinin tipini tanımlar.
EKLENTİLER <VIDEO> Etiketi: Sayfaya video eklemek için kullanılır.Mp4, ogg ve webm formatlarını destekler. <AUDIO> Etiketi: Sayfaya ses eklemek amaçlı kullanılır. Mp3, wav ve ogg formatlarını destekler. <SOURCE> Etiketi: <Video>, <audio> etiketleri için birden fazla ortam kaynağı belirlemek için kullanılır. Yani birden fazla dosya çalınması veya gösterilmesi gerektiğinde kullanılır.
LİSTELER Sırasız Listeler <UL> Etiketi: Numara veya harfler olmaksızın çeşitli şekillerle liste oluşturmak için kullanılır. Etiketin aldığı özellik aşağıda verilmiştir. Type: Madde imlerinin şeklini belirlemek için kullanılır. Circle: İçi boş daire Disc: İçi dolu daire Square: İçi dolu kare
LİSTELER <LI> Etiketi: Sıralı ve sırasız listelerde kullanılır. Listedeki her bir maddeyi belirler. <UL> ve <OL> etiketleri arasında kullanılır.
UYGULAMA <html> <head> <title>Sırasız listeler</title> </head> <body> Teknik Üniversiteler <ul type="disc"> <li><A href="http://www.metu.edu.tr">Ortadoğu Teknik</A> <li><A href="http://www.itu.edu.tr">İstanbul Teknik</A> <li><A href="http://www.ktu.edu.tr">Karadeniz Teknik</A> </ul> Gözde Meslekler <ul type="square"> <li>Mekatronik Mühendisliği <li>Kontrol Mühendisliği <li>Gen Mühendisliği </body> </html>
UYGULAMA <html> <head> <title>İç içe sırasız listeler</title> </head> <body> <ul type="circle"> <li>Fen Bilimleri <ul type="square"> <li>Biyoloji <li>Fizik <li>Kimya </ul> <li>Matematik <ul type="disc"> <li>Aritmetik <li>Geometri </body> </html>
LİSTELER Sıralı Listeler <OL> Etiketi: Harf veya sayısal tabanlı işaretlenmiş liste yapısını belirler. Madde işaretleri yerinde numara veya harflendirme kullanılır. Type: Sıralamanın tipini belirler. 1: Sayı ile normal işaretleme. A: Büyük harf ile harfli işaretleme a: Küçük harf ile harfli işaretleme i: Küçük roma rakamları ile işaretleme I: Büyük roma rakamları ile işaretleme
UYGULAMA <html> <head> <title> sıralı Listeler</title> </head> <body> <ol type="A"> <li>Et Yemekleri <li>Çorbalar <li>Salatalar <li>İçecekler </ol> </body> </html>
LİSTELER Tanımlama Listeleri <DL> Etiketi: Tanımlama listesinin baş ve sonunu belirler. İçerisinde <DT> ve <DD> etiketlerini kullanır. <DT> Etiketi: Tanımı yapılacak ifadeyi belirtmek için kullanılır. <DD> Etiketi: Alt tanımlama için kullanılır.
UYGULAMA <html> <body> <dl> <dt>Tokat Kebabı</dt> <dd> Et ve sebze yemeğidir. Alışkanlık yapar. </dd> <dt>Bat</dt> <dd>Yeşil mercimek, salça ve yeşilliklerle yapılır, soğuk yenir.</dd> <dt>Kısır</dt> <dd>İnce bulgur ve yeşilliklerle yapılır. Soğuk yenir.</dd> </dl> </body> </html>
UYGULAMA Bu sayfa görüntüsünü veren kodu yazınız. 1. Yazılı A. Dergi B. Gazete C. Kitap 2. İşitsel Görsel i. Radyo ii. Televizyon Bu sayfa görüntüsünü veren kodu yazınız.
KAYNAK Ebubekir Yaşar, Turgut Özseven, İnternet Programcılığı 1