web tabanlı programlama

 WEB TABANLI PROGRAMLAMA 2. DERS / HTML’e Giriş
YARD. DOÇ. DR. MEHTAP YALÇINKAYA
HTML NEDİR?
HTML (Hyper Text Markup Language / Köprü Metni (Hareketli Metin)
İşaretleme Dili)
Web sayfası hazırlama dilidir.
HTML, metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız
komutlar dizisidir.
HTML bir programlama dili değil, bir mark-up (~işaretleme) dilidir, yani etiket
(tag) denilen özel işaretlerle bir yazının tümünü ya da sadece bir kısmının
görünümünü ve/veya işlevini değiştirmeye yarar. Örneğin herhangi bir etiket (tag)
olmadan default yazı tipinde görünen bir yazı, HTML içinde önüne ve arkasına <I>
ve </I> işaretleri gelince bu şekilde italik görülür.
Bu dilde binary veya hexadecimal kodlar yoktur. Herşey metin tabanlıdır. HTML
belgesi oluşturmak için ihtiyacınız olan şey bir editördür.
Hatta herhangi bir HTML editörü bulunmuyorsa Notepad gibi basit bir metin
editörü de işe yarayacaktır. Hatta çok iyi bir şekilde HTML öğrenmek için
başlangıçta basit bir metin editörü ile çalışılması kuvvetle önerilir.
Dosya uzantısı .html veya .htm olmalıdır.
HTML DERSLERİ – GENEL BİLGİ
HTML Sürümleri
HTML’in birkaç sürümü vardır. Günümüzde çoğu Web Tarayıcısının
desteklediği standart sürüm, 3.2 sürümüdür. En çok kullanılan HTML
sürümü ise 4.1’dir. HTML standartları World Wide Web Consortium
(W3C) tarafından kontrol edilmektedir.
HTML 1.0 : Bu sürüm, daha sonra geliştirilen sürümlerle karşılaştırılınca
çok kısıtlı yeteneklere sahiptir. Bu nedenle HTML 1.0’da yaratılan belgeler
oldukça basittir, temel özellikleri şöyle özetlenebilir;
Çok seviyeli başlıklar; Köprü metni referansları; Paragraflar; Maddelenmiş
listeler için özel formatlama
HTML 2.0 : Bu sürüm, 1994 yılından önce Web belgelerinde kullanılan
eklentiler ve özellikler temel alınarak hazırlanmıştır. Temel yenilikleri;
Satır içi görüntüler ve doldurulabilen formlardır.
HTML 3.0 : Bu sürümün sağladığı temel özellikler;
Sayfa görünümü üzerinde ileri derecede kontrol; Manşetler;
Görüntülerdeki popüler noktaların istemci tarafına işlenmesi;
Özelleştirilmiş Listeler; İstemci çekme/Sunucu itme özellikli dinamik
belgeler; Stil yaprakları; Form içi tablolar
HTML DERSLERİ – GENEL BİLGİ
HTML 4.0 : Bu sürümde iki yeni eklenti vardır. Bu eklentilerin en
önemlileri;
• Cascading Style Sheets (CSS)
• Dynamic HTML (DHTML)
Cascading Style Sheets (CSS)
CSS’in her yerde kullanılması nedeni ile W3C, CSS’in Internet Explorer
ve Netscape Navigator tarafından desteklenen standardını belirlemiştir.
CSS, Microsoft Wordün stili gibi çalışır. Stil önceden tanımlanır. Daha
sonrada sayfadaki elemanlarda stile başvuru yapılır. CSS ile madde
imleri, metin fontları, kullanılan başlık fontu vs. değiştirilebilinir.
Dynamic HTML (DHTML)
Tasarımcıya, kullanıcı fareyi herhangi bir nesne üzerine getirdiğinde
hareket etmesini ya da görünümünün değişmesini sağlayabilen Web
sayfaları yapabilme imkanı sağlayan dildir.
HTML DERSLERİ – GENEL BİLGİ
HTML 5.0 (H5) : Bu sürüm, Internet Explorer, Mozilla Firefox ve Opera
tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir.
Henüz deneme aşamasında olmasına rağmen çok iyi şekilde
çalışmaktadır.
Günümüzde çoğunlukla kullanılan 4.1 sürümü, CSS desteğiyle ne kadar
düzenli ve sağlam bir yapıda kodlanırsa kodlansın, yine de fazladan
yazılan kodların işlevselliği bozduğu bilinmektedir. Bu ihtiyaçları
karşılamak için H5 geliştirmeye başlanmıştır Video paylaşım sitesi,
Youtube, deneme aşamasında H5’i kullanıcılara sunmaktadır.
HTML DERSLERİ – GENEL BİLGİ
HTML Eklentileri (Extensions)
Son birkaç yılda bazı satıcılar web modelini dinamik ve etkileşimli
(interaktif) içerikli olarak geliştirdiler. Bunlar;
• Client-Side Extensions (İstemci Tarafı Eklentileri)
• Server-Side Extensions (Sunucu Tarafı Eklentileri)
Java Applet, ActiveX kontrolleri, İstemci Tarafı scriptleri ve dinamik HTML
İstemci Tarafına birer örnektir.
CGI (Common Gateway Interface) programları ve scriptler, Active Server
Page (ASP), Hypertext Preprocessor (PHP), Java Server Page (JSP) ve
Perl de Sunucu tarafına birer örnektir.
XML: eXtensible Markup Language (Esnetilebilir İşaretleme Dili)
XML Internet’teki en yeni dillerdendir. W3C, XML’i “Verilerde yapı
belirtmek için ortak bir yazım şekli” olarak ifade eder. Bu bağlamda XML
pek de dil sayılmaz.
HTML ve XML ortak ataya sahiptirler. Her ikisi de Standard Generalized
Markup Language (SGML)’den türer. XML’in HTML’den farkı HTML sabit
etiketlere sahiptir fakat XML, SGML gibi kendi etiketlerinizi tanımlamanıza
izin verir.
HTML DERSLERİ – GENEL BİLGİ
XHTML: eXtensible Hyper Text Markup Language
XHTML, 2000 yılında W3C tarafından kabul edilmiş tüm internet
tarayıcıları ve GSM telefonları tarafından standart olarak kabul edilmiştir.
HTML, biraz daha derlenip geliştirilmiş ve belirli bir standarta geçirilip
XHTML oluşturulmuştur. XHTML kullanmanın en temel amaçlarından biri,
farklı tarayıcılarda sorun çıkartmamasıdır. Bunun yanı sıra tarayıcılar kodu
daha çabuk algılar ve web sayfası HTML’e göre daha hızlı çalışır. Bir
diğer avantajı da başta Google olmak üzere başlıca arama motorları
XHTML standartlarına uygun yazılmış siteye tam not verir ve arama
motorlarında kötü kodlanmış rakip sitelere göre üst sıralara yükselir.
XHTML, Extensible Hyper Text Markup Language, Türkçe karşılığı
‘Esnetilebilir Köprü Metni İşaretleme Dili’ anlamındadır. Her ne kadar
esnetilebilir denilse de bu esneklik kodlayan programcılar için değil,
XHTML’i geliştiren programcılar için geçerlidir. XML’de var olan sıkı ve
uyulması gereken şartlar XHTML’de de geçerlidir.
HTML’de etiketlerin (tag) yazımında büyük ya da küçük duyarlılığı yoktur,
ancak XHTML’de etiketler (tag) küçük harflerle yazılmalıdır. Bunun
dışında da yazım kurallarında ufak farklılıklar vardır.
HTML DERSLERİ – GENEL BİLGİ
World Wide Web
World Wide Web (ya da kısaca Web) birbirleri ile iletişim kuran iki
bileşenden meydana gelir. Bunlar;
1. Web Tarayıcısı (Web Browser) (Client: İstemci)
2. Web Sunucusu (Web Server) (Server: Sunucu)
Web Nasıl Çalışır
1. İstemci makinenin kullanıcısı
Web tarayıcısında bir hyperlink ’e
tıklar.
2. Tarayıcı, DNS (Domain Name
Server)’a
bağlanıp
istemde
bulunduğu sayfanın server IP’sini
alır.
3. Ardından aldığı IP’ye bir çağrı
gönderir ve sayfayı ister.
4. Web Sunucusu da bu isteğe
cevap verir ve http üzerinden
Detaylı bilgi için EKBILGI.pdf isimli notu
okumanız önerilmektedir.
sayfayı Web tarayıcısına gönderir.
HTML DERSLERİ – GENEL BİLGİ
HTTP ve HTML
HTTP, Web sunucusu ile Web tarayıcısının birbirleri ile haberleştiği bir
protokoldür. Bilgisayarlar arasındaki ortak iletişim diline “protokol” denir.
HTML belgeleri, metin ve etiketlerden meydana gelir. HTML etiketleri açılı
parantez içerisinde yazılır. HTML etiketlerinin çoğu slash (/) karakteri ile
biten iki taraflı etiket ile kapatılarak bloklar halinde kullanılır.
Örnek:
<B>HTML</B> bir metin işaretleme dilidir.
Yukarıdaki örnekte HTML koyu olarak yazılacaktır.
Tek taraflı etiketler de vardır. Yani kapama etiketi içermezler ve bağımsız
değişken alırlar. Bağımsız değişken (argument), etiketin içindeki etiketin
nasıl davranması gerektiği hakkında bilgi içeren metine denir. Örneğin
<img> etiketi için kaynak belirtmek gereklidir, bu bağımsız değişkende
ingilizce kaynak kelimesinin kısaltması src’dir.
Örnek:
<img src = “kitap.gif”>
HTML DERSLERİ – GENEL BİLGİ
HTTP ve HTML
HTTP, Web sunucusu ile Web tarayıcısının birbirleri ile haberleştiği bir
protokoldür. Bilgisayarlar arasındaki ortak iletişim diline “protokol” denir.
HTML belgeleri, metin ve etiketlerden meydana gelir.
Örnek:
<B>HTML</B> bir metin işaretleme dilidir.
Yukarıdaki örnekte HTML koyu olarak yazılacaktır.
Tek taraflı etiketler de vardır. Yani kapama etiketi içermezler ve bağımsız
değişken alırlar. Bağımsız değişken (argument), etiketin içindeki etiketin
nasıl davranması gerektiği hakkında bilgi içeren metine denir. Örneğin
<img> etiketi için kaynak belirtmek gereklidir, bu bağımsız değişkende
ingilizce kaynak kelimesinin kısaltması src’dir.
Örnek:
<img src = “kitap.gif”>
HTML DERSLERİ – GENEL BİLGİ
Web Hazırlama Yazılımları
Web hazırlamak için birçok araca sahibiz. Bunları üç sınıfta toplayabiliriz.
• HTML editörleri
• Web Sitesi geliştirme araçları
• Web Uygulaması geliştirme araçları
HTML Editörleri
Web Sitesi Geliştirme Araçları
HTML yazmak için NotePad ‘i
kullanabileceğimiz gibi
yardımcı programlar da vardır.
Bunlardan bir kısmı;
Bu tür ürünler tek başına bir web
sayfası yapmak yerine Web Sitesi
hazırlamada kullanılır. Bu grup
programlar HTML editörü ile birlikte
linkleri kontrol edebilen araçlar ve
Web Sitesini Web Serverda
yayınlayabilecek araçlar içerir.
WYSIWYG (What You See Is What
You Get /Ne görürsen onu alırsın)
tarzı denen kısaca görsel,
kodlamayla uğraştırmayı
gerektirmeyen editörlerdir.
• Hot Dog
• HotMetal Pro
• HomeSite
• 1st Page 2000
• Basit bir metin editörü.
• Fusion
• Visual Page
• Dreamweaver
• FrontPage 2003
• FrontPage 2007
(SharePointDesigner 2007)
Web Uygulamaları Geliştirme
Araçları
Web Sitesi yapma araçları sabit
içerikli statik Web Sitesi yapmada
kullanılır.
Web
Uygulamaları
Geliştirme
Araçları bir veritabanı ile bağlantılı
içeriğe sahip web sitesi hazırlamada
kullanılır. Bu araçları kendi kendini
bir veri tabanından güncelleyen
dinamik Web Siteleri oluşturmakta
kullanırız. Bu araçlardan bazıları;
• ColdFusion
• NetDynamics
• Dreamweaver UtraDev
• Visual InterDev
HTML DERSLERİ – GENEL BİLGİ
KLASÖR VE DOSYA İSİMLERİNDE
1) Türkçe karakter kullanmamaya (ç,ğ,ö,ü,İ,ı,ş yerine
c,g,o,u,i,s kullanılacak)
2) Büyük harf kullanmamaya
3) 8 harfi geçmemesine (daha iyi olur)
4) İlk giriş sayfasının adının index.html (ya da index.htm)
olmasına
DİKKAT EDİNİZ !!!!!!!!!!
HTML DERSLERİ – GENEL BİLGİ
Sorular
1. Internet hangi protokol üzerine kurulmuştur?
2. (Doğru/Yanlış): HTML, Web sayfası hazırlamak için kullanılan bir
programlama dilidir.
3. World Wide Web’den bir Web sayfası talep gerçekleşen olaylar
nelerdir?
4. HTML ve http asındaki fark nedir?
HTML DERSLERİ – GENEL BİLGİ-OKUMA
Kavramlar - Özet
• Internet, Uluslararası arası ağ (International Network) demektir.
• Web, Internet'e bağlanan tüm bilgisayarların oluşturduğu bir ağ sistemidir.
• Internet, binlerce omurgalar arası bağ, on binlerce hizmet sağlayıcısından
oluşan bir sistemle milyonlarca kişiye hizmet sunuyor.
• İki veya daha fazla bilgisayarın kendi arasında iletişim kurabilmesi için
öncelikle bu bilgisayarları ortak bir dil konuşur hale getirmek zorundayız.
• Bilgisayarlar arasındaki ortak iletişim diline “protokol” denir.
• Internet’in ortak dili TCP/IP protokol kümesidir.
• İnternete bağlı bir bilgisayarın web sitelerinde gezinti yapabilmesi için
kullanılan programlara web browser denilir. yaygın olarak kullanılan web
browserlar: İnternet Explorer, Mozilla FireFox, Google Chrome, Opera gibi.
• Internet' de her sayfanın bir adresi vardır. Web adresleri, ulaşmak
istediğiniz bilginin hangi sunucu üzerinde bulunduğunu gösterir. Yani
sayfanın web’de tam olarak nerede depolandığını gösterir.
HTML DERSLERİ – GENEL BİLGİ-OKUMA
Kavramlar - Özet
• Web adreslerinde sitenin adı ve sitenin hangi tür kuruma ait olduğunu
gösteren kısım değişir. Bazı sitelerin sonun da ülke kısaltmaları vardır.
•
•
•
•
•
•
Com : Ticari kuruluşlar
Org : Ticari olmayan kuruluşlar
Edu : Üniversiteler
Gov : Devlete ait kurumlar
Mil : Askeri kurumlar
Net : İnternetle ilgili kurumlar
Internet üzerinde verilerin aktarılması için ortak bir protokole ihtiyaç vardır.
Bu protokol HTTP ve TCP/IP dir.
Bir web sayfasının ziyaretçinin ekranına kadar kat ettiği yolda çeşitli
protokoller (kurallar) vardır. Bunların başında bir bilgisayar ağı olan Internet’in
ulaştırma kuralları HTTP (HyperText Transfer Protocol – Hareketli Metin
Aktarma Kuralları) geliyor.
HTML DERSLERİ – GENEL BİLGİ-OKUMA
Kavramlar - Özet
• Web sayfalarını içeren bilgisayar, Web ilişkisinde Server (Sunucu) olarak
adlandırılır.
• Ziyaretçinin bilgisayarı ise Client (İstemci) olarak adlandırlır.
• Sunucu bilgisayarlarla, istemci bilgisayarlar arasındaki ilişkiyi (Server- Client
ilişkisi) düzenleyen kurallara TCP/IP (Transmission Control Protocol /
Internet Protocol – Aktarma Denetim Kuralları / Internet Kuralları) adı verilir.
• Internet kurallarının IP bölümü, iki bilgisayar arasındaki bağlantının doğru
kanallardan kurulmasını, kesildiğinde yeniden kurulmasını sağlar. TCP
bölümü ise kurulan bağlantı sayesinde gelen bilginin doğru anlaşılmasını
sağlar.
• Internet’te aranan kaynak URL (Universal Resource Locator – Evrensel
Kaynak Yolu Belirleyici) denilen adres sistemini kullanarak bulunur.
HTML’E GİRİŞ
Web Sayfasının Genel Yapısı
Etiketler
Parametreler
<HEAD> Etiketi (TITLE ve META etiketleri ile kullanımı)
HTML DERSLERİ 1
Bir Web Sayfasının Genel Yapısı
<HTML>
<HEAD>
Burada genelde döküman içeriği dışında kalan karakter set tanımlamaları,
başlık, JavaScript tanımlamaları vb elemanlar bulunur...
</HEAD>
<BODY>
Burada ise dökümanın asıl içeriği vardır, içinde metin, ses, video vb
içerebilir...
</BODY>
</HTML>
Web Sayfaları <HTML> etiketinden önce DTD (Document Type Definition) başvurusu
da içerebilir. Bu başvuru HTML nin versiyonunu bildirir. Ama çoğu Web Browser bunu
otomatik olarak sayfaya ekler. Yani yazmasak ta olur.
<! doctype html public “-//W3C//DTD HTML 4.0 Transdional//EN”“http://www.w3.org/TR/REChtml40/loose.dtd”>
Case-Insensitive: HTML büyük küçük harfe duyarsızdır. <BODY> ile <bOdy>
etiketleri arasında bir fark yoktur.
HTML DERSLERİ 1
Yapısal Etiketler (Structural Tags)
Yapısal etiketler web sayfasında farklı bölümler tanımlamak için kullanılır.
Bunlar;
1
Örnek: 001_myfirst.htm
HTML DERSLERİ – GENEL BİLGİ
HTML Etiketleri (Tag)
• HTML etiketleri, HTML öğelerini belirtmek için kullanılır.
• HTML etiketleri grup parantezleri < > (angle brackets ) içine yazılır.
• HTML etiketleri çift olarak kullanılır, çoğu slash (/) karakteri ile biten iki taraflı
etiket ile kapatılarak bloklar halinde kullanılır.
Örnek: <b> Bu metin koyu fonttadır. </b>
Bu çiftlerden birincisine başlama etiketi, ikincisine ise bitiş etiketi denir.
Başlama ve bitiş etiketleri arasında kalan herşeye ise öğe içeriği (element
contents) denir.
• HTML etiketleri büyük/küçük harfe duyarlı değildir, yani <b> ve <B> aynı görevi
görür. (Türkçe karakter olan "İ" ve "ı" harflerinin bu durumun dışında kaldığını
unutmayınız.)
!!!
HTML etiketlerinin büyük/küçük harfe duyarlı olmadığını söyledik: <B> ve <b>
aynıdır. Eğer Web'de gezintiye çıkarsanız bir çok sitenin kaynak kodunun büyük
harflerle yapılmış olduğunu göreceksiniz. Fakat editörde yazarken küçük harf
kullanırız. Neden?
Eğer Web standartlarını kontrol etmek istiyorsanız küçük harf kullanmalısınız.
World Wide Web Consortium (W3C) HTML 4 versiyonu ile beraber küçük harf
kullanımını önerir. Ayrıca XHTML (yeni nesil HTML) dili de bunu kullanmanızı
şiddetle önerir.
HTML DERSLERİ 1
1
Parametrelerin değerleri her zaman tırnak içerisinde olmalıdır. Değerin kendisinin
içinde de çift tırnak kullanılması gerektiği zamanlarda ise, değerin tamamını tek
tırnak içerisine alabilirsiniz:
name='Cem "GORA" Yilmaz'
HTML DERSLERİ 1
<h1> başlık belirtir. (Daha sonra detaylarıyla göreceğiz)
Parametre Örneği 1: <h1 align="center"> başlık belirtmesinin yanında, metinin
ortalanacağını da belirtir.
Ortaya hizalanmış metin
<html>
<body>
<h1 align="center">Bu başlık 1</h1>
1
<p>Yukarıdaki başlık ortalanmıştır.
Yukarıdaki başlık ortalanmıştır. Yukarıdaki
başlık ortalanmıştır. Yukarıdaki başlık
ortalanmıştır. Yukarıdaki başlık
ortalanmıştır. </p>
</body>
</html>
HTML DERSLERİ 1
1
HTML DERSLERİ 1
<META>
Birçok seçeneği vardır. Örneğin bir kullanımı, bu belirteç ile sayfanızın içeriğini
yansıtan bazı anahtar kelimeler ve tanımlamalar verilmesidir. Web üzerinde arama
yapan arama motorları sayfaların meta TAG’ına bakarak gruplandırma yaparlar.
Arama motorlarının bot programları sitenizi ziyaret ettiğinde Meta keywords içine
bakar ve ona göre sitenizi kendi veritabanında indeksler. Bununla ilgili aşağıdaki
örnekleri inceleyebiliriz.
<META NAME="Description" CONTENT="HTML öğrenmek için yararlı bilgiler">
<META NAME="Keywords" CONTENT="html,
htm, web sayfası">
1
<META NAME="Author" CONTENT=“Mehtap Yalçınkaya">
Başka bir kullanım, sayfadaki yazıların hangi dil ailesine ait karakterlerle yazıldığını
belirtmek içindir. Yine aşağıda bunula ilgili bir örnek verilmiştir.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-9">
(Türkçe' nin dahil olduğu dil ailesine ait standard tanımlaması iso-8859-9, Latin 5'
dir. Windows-1254’ de Türkçe dil desteği sağlamaktadır)
Bazen <meta name="security" content="low"> gibi bilinmeyen parametreler
görebilirsiniz.
HTML DERSLERİ 1
Meta Örneği 1:
Doküman keywords
<html>
<head>
<meta name="description" content="HTML examples">
<meta name="keywords"content="HTML, DHTML, CSS, XML, XHTML,
JavaScript,
VBScript">
1
<META NAME="Author" CONTENT="Mehtap Yalçınkaya">
<Meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-9">
</head>
<body>
<p>
Bu dökümanın meta özellikleri ona ait keyword'ları, açıklaması ve yazarıdır.
</p>
</body>
</html>
HTML DERSLERİ 1
Meta Örneği 2:
Doküman tanımlaması-Farklı
<html>
<head>
<meta name="Hazirlayan" content="Bill Gates">
<meta name="Duzenleme" content="Levin Mitnick,06/10/08">
<meta name="generator " content="Microsoft
FrontPage 2007">
1
<meta http-equıv="content-type" content="text/html; charset=windows-1254">
</head>
<body>
<p>
Bu dökümanın meta bilgileri, siteyi hazırlayan ve kullandığı arayüz hakkında
bilgi veriyor.
</p>
</body>
</html>
HTML DERSLERİ 1
Meta Örneği 3:
Kullanıcıyı yönlendirme
<html>
<head>
<meta http-equiv="Refresh" content="5;url=http://www.iszu.edu.tr">
</head>
<body>
<p>
1
Üzgünüz! Taşındık! Yeni adresimiz:
<a href="http://www.iszu.edu.tr">http://www.iszu.edu.tr</a> </p>
<p>
Bir kaç saniye içerisinde yeni adresimize yönlendirileceksiniz.
</p>
<p>
Eğer bu mesajı 5 saniyeden fazla görürseniz yukarıdaki link'e tıklayınız!
</p>
</body>
</html>