HTTP & HTML Seval ÖZBALCI Bilgisayar Programcılığı Bölümü Ders 3 HTTP ve HTML Kullanarak İlk Web Sayfasının Oluşturulması BİRİNCİ BÖLÜM HTTP Nedir? HTML Nedir? Temel Unsurlar Editör Türleri İlk Sayfanın Oluşturulması Etiketler Metin Biçimlendirme, Fontlar seval.ozbalci@bayar.edu.tr HTTP Nedir? HTTP İngilizce HyperText Transport Protocol kelimelerinin ilk harflerinden oluşan bir kısaltma olup günümüzde "Internet" dediğimiz ortam üzerinde web sayfalarının çeşitli istemcilere iletimi sırasında bir bütünlük sağlanması açısından oluşturulmuş bir standartlar dizisidir. Günümüzde en yaygın olarak bilinen ve kullanılan protokoldür. HTTP protokolü ilk çıktığı zamanlar sadece statik HTML dosyalarıyla çalışıyordu, günümüzde artık vazgeçilmez olunan Internet üzerinden kullanıcıyla etkileşim işlevine sahip değildi. HTTP Safhaları Nelerdir? Bir Web dokümanına ulaştığımızda 4 ana safhada çağırılan sayfa görüntülenir: 1. Bağlantı 2. Ne istediğimizin web servisine iletilmesi 3. Cevap 4. İlgili sayfaya yapılan bağlantının kesilmesi. Bu safhalar, web üzerinde iletişimin kurallarını tanımlayan bir protokol ile oluştururlar. Bu protokole, Hyper Text Transfer Protocol denir. Bağlantı safhasında, web erişiminde kullanılan bir web listeleyici (browser, web client), ilgili bilginin olduğu web servisine bağlanır. HTTP Servisleri Protokol ve Eklentiler Bu safhalara HTTP servisleri de denir. Bağlantı sağlandıktan sonra web istemci programımız http servisine "ne istediğini" bildirir. Bu "istek ileride görüleceği gibi "http", "ftp", smtp" gibi bazı protokol kurallarını içerir ve bu işlemlere genel olarak "navigate" denir. Bu isteği alan http servisi de, istediğimiz işlemi yapar ve cevabı bize gönderir. Biz de gelen cevabı web istemci programımızda görürüz. Eğer istek gerçekleştirilemiyorsa bir hata mesajı ile karşılaşırız. Son safhada, http servisine yaptığımız bağlantı kesilir. Ancak teknolojik gelişmelerin ışığında HTTP protokolü de geliştirilmiş ve ayrıca HTTP protokolüne eklentiler gelmiştir: VBScript, JavaScript, Server-side includes, Perl ve CGI programları ActiveX Applet ler 1
HTML Nedir? HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili) basitçe, gözatıcı (browser) adı verilen Internet sayfası görüntüleme programlarıyla görebileceğimiz, web dokümanları oluşturmaya yarayan bir çeşit dildir. HTML ile oluşturduğunuz belgeleri sabit diskinize kaydedebilir ve Internet bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz. HTML Bir Dil midir? HTML, yazılım dilleri (pascal, basic,..) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. Bu nedenle HTML için bir dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisidir diyebiliriz. Temel Unsurlar HTML kolay bir dildir. Her şey metin tabanlıdır. Bir HTML dokümanı oluşturmak için ihtiyacınız olan tek şey bir editördür. Herhangi bir HTML editörü ile ya da hiçbiri yoksa Windows'un Notepad'i ile HTML kodları yazılabilir. Editör Türleri Metin tabanlı, kod yazmayı gerektiren fakat bunun yanısıra rutin bazı işlemleri kolaylaştıran editörler: HotDog, HomeSite.. Ne görürsen onu alırsın (WYSIWYG : What You See Is What You Get /) tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler: FrontPage, Dreamweaver vb. İlk Sayfanın Oluşturulması Örnek Sayfa Öncelikle çalışmaları saklamak için kullanılacak boş bir klasör oluşturup uygun bir ad verilir. Örnek klasörün adı <html_ders> olsun (kolaylık olması için siz de yeni klasöre bu adı verebilirsiniz). Şimdi de bu klasörü açıp yeni bir metin belgesi oluşturun (sağ fare > Yeni Metin Belgesi). Yeni metin belgesi açılarak şunlar yazılır: <title>ilk Sayfam</title> Sayfama Hoşgeldiniz 2
Örnek Sayfa Etiketler Dosya kaydedilir: (Dosya/Farklı Kaydet Dosya adı: <sayfa1.htm> ) Notepad kapatılır. Metin dosyası silinir. Oluşan yeni dosya (sayfa1.htm) açılır. Dosya varsayılan göz atıcı (Internet Explorer, Netscape Navigator gibi) tarafından açılacaktır. Yukarıdaki örnekteki gibi bir görüntü elde edilecektir. Oluşturulan belgede bir takım ifadeler var ve bu kelimeleri küçük <" ve büyük > sembolleri arasına yazdık. Bu ifadelere tag (etiket) denir. Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor. Önce etiket yazılıyor, sonra metin yazılıyor ve daha sonra aynı etiket önüne bir bölü / işaretiyle yazılarak sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içinde sonlanır. Etiketlerin Anlamı Metin Biçimleri Örnekte kullanılan etiketler ve anlamları şöyledir:... Tarayıcıya HTML dosyasının başladığını ve bittiğini belirtiyor. Diğer tüm kodlar bu iki etiket arasına yazılır.... ve... Bir HTML belgesi iki bölüme ayrılıyor: head(baş):... etiketleri arasına sayfa hakkında bilgiler yazıyoruz. meta ve title gibi etiketler burada yer alıyor. body(gövde):... arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar bu tagler arasında yeralıyor. <title>...</title>: Title sayfanın başlığını belirtir ve burada yazılanlar gözatıcı penceresinin başlığında program adıyla beraber gösterilir. Örnek sayfada sadece temel etiketler kullanıldığından... arasına yazdığımız Sayfama Hoşgeldiniz yazısı kullanılan browserın varsayılan metin ayarlarıyla gösterilmektedir. Temel olarak metin biçimlendirmede kullanılan etiketler: Başlık etiketleri: <h1>...<h6> Paragraf etiketi: <p>...</p> Ortalama: <center>...</center> Diğer etiketler: <b>...</b>,<i>...</i>,<u>...</u> Metin Biçimi Tanımlama Satır içi (in-line) biçimlendirme: Düzenlemek istenilen metnin hemen önündeki bir etiketle biçimleme stilinin verilmesidir. Gömülü (Embedded) biçimlendirme: Sayfanın baş (head) kısmına koyulan stillere gövde (body) bölümden atıf yapılarak metnin biçimlenmesidir. CSS (Cascading Style Sheets): HTML dosyasının dışında başka bir stil dosyasının oluşturularak stil için bu dosyanın kullanılmasıdır. Bu teknik yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar vermektedir. Dikkat! Birinci metotta her metin için ayrı ayrı stil belirtilirken ikinci ve üçüncü metotlarda stil bir defa belirlenir ve bu stiller istenilen metne uygulanabilir. Bu nedenle ilk metodu tüm göz atıcılar sorunsuz yorumlayabilir. Fakat 2. ve 3. metotları sadece Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber) desteklemektedir. 3
Başlık Etiketleri Notepad açılarak şu kodlar yazılır: <title>başlık Etiketleri</title> <h1>başlık 1</h1> <h2>başlık 2</h2> <h3>başlık 3</h3> <h4>başlık 4</h4> <h5>başlık 5</h5> <h6>başlık 6</h6> Diğer Metin Etiketleri <title>başlık Etiketleri- 2</title> <h1><center>sayfama Hoşgeldiniz</center></h1> <p>html etiketleri ile, </p> Yazıları <b>koyu </b> <i>italik </i> ve <u>altı çizili </u> olarak yazabiliyorum. Biçimlendirmek istediğimiz metnin başına ilgili etiketi yazıyoruz ve metnin sonunda da ilgili etiketi sonlandırıyoruz. Etiketi biz sonlandırmadığımız müddetçe etkisini göstermeye devam edecektir. Fontlar Font etiketinin kullanımı; <font face="..." size="..." color="..."> </font> Font etiketinin parametreleri; face= yazı tipinin adı (arial, tahoma, verdana,...) size= yazının büyüklüğü (1-7 arası) color= yazının rengi (red, green gibi renklerin İngilizce karşılığı yada RGB renk değeri) <br> ve <nobr> Etiketleri <br> etiketi bir bakıma enter tuşunun görevini görmektedir. HTML'de metinleri yazarken bölmek, yani ikinci satıra atmak için <br> etiketi kullanılır. <br> etiketi sonlandırılmayan bir etikettir. <nobr> br nin tersine satır bölünmesini önler. Ancak bu etiketin sonlandırılması gerekir </nobr>. Renkler <title>br etiketi</title> pazartesi salı çarşamba<br>ocak<br> şubat<br> mart<br> nisan Renk kodlarını kullanarak bir örnek hazırlayalım. (Renk kodları yerine rengin İngilizce adı da yazılabilir: color="red" gibi) Örnek: Kırmızı-red Mavi-blue Siyah-black Sarı-yellow Lacivert-navy Yeşil-green 4
Uygulama-1 <title>renkler ve Mevsimler</title> <font face="tahoma" size="5" color="#008000">ilkbahar</font> <br><font face="verdana" size="5" color="#ff0000">yaz</font> <br><font face="arial" size="5" color="#ffff00">sonbahar</font> <br><font face="comic sans ms" size="5" color="#0000ff">kış</font><br> Ülkemizdeki ve dünyadaki ücretsiz web servislerden birinden (geocities.com) kullanıcı hesabı açarak web adresinizi alınız. Bu derste öğrendiğimiz HTML komutları ve Frontpage ile hazırlayacağınız basit bir web sayfasını kullanıcı hesabınıza yükleyiniz. Bu sayfada kısaca ve özgün bir şekilde hazırlanmış kişisel bilgileriniz ve en az bir fotoğrafınız olmalıdır. Web adresinizi seval.ozbalci@bayar.edu.tr adresine gönderiniz. 5