baslik by Okur Yazar Ailesi

Cennet Kültür ve Sanat Merkezi Web Tasarımcısı Kursu

( HTML , XHTML , CSS )

2009 Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

►Web Teknolojilerinde Kullanılan Diller ve Programlar Diller: - Web sayfalarının temel dili HTML'dir. - Web dilleri ikiye ayrılır: a) İstemci Taraflı b) Sunucu Taraflı A) İstemci tarafında çalışan diller: HTML , JavaScript , CSS B) Sunucu taraflı diller ve teknolojiler: CGI/Perl , ASP.NET , PHP , JSP , CouldFusion Editörler: - Frontpage , Dreamweaver , GoLive , HomeSite ve daha bir çok editör Grafik Programları: - Photoshop , Fireworks , Paintshop Pro , Flash Web Tarayıcılar (Browser): - İnternet Explorer, Netscape Navigator , Mozilla Firefox, Opera, Safari, Google Chrome

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

HTML (Hyper Text Transfer Protocol) HTML Nedir? HTML Web sayfalarının kullandığı dildir. HTML bir programlama dili değildir. HTML bir işaretleme dilidir. Web ortamında içeriğin nasıl biçimleneceğini tanımlayan bir görsel düzenleme dilidir. HTML – Hyper Text Markup Language Markup Language – İşaretleme (Betik) dili. Web tasarımın yapı taşı HTML'dir. İnternet üzerinde bulunan tüm sayfaların kaynakları HTML'dir. Yazım kuralları • Komutlar büyük ya da küçük harfle yazılabilir. • Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez. • Komutlar “<” ve “>” işaretleri arasında yazılır ve “etiket (tag)” adını alır. Kullanım biçimi: < etiket adi > Ör) <html> , <body> , <title>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

• Bir etiket <etiket adi> şeklinde başlar ve bazı etiketler dışında </etiket adi> şeklinde biter. • Etiketler iç içe yer alır ve en içteki etiketten başlatılarak kapatılır. Kodların okunabilirliğini artırmak için bir etiket bitmeden tekrar etiket açılırsa içeride açılan etiket biraz daha içeriden yazılmalıdır. Kullanım biçimi: <tag1> <tag2> ...... </tag2> </tag1> Örnek: <HTML> <BODY> ...... <FORM> ...... </FORM> </BODY> </HTML>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

• Bir etiket, parametreler kullanarak biçimlendirilir ve bu parametrelere tırnak (" ") işaretleri arasında değer atanır. Değerle parametre adı arasında eşittir (=) işareti kullanılır. Kullanım biçimi: <etiket_adi parametre_adi ="deger"> Örnek: <body bgcolor="blue"> WEB sayfasında standart olarak bulunması gere ken kodlar şunlardır.Bunlar sayfada mutlaka vardır. Bu kodlarla tarayıcı bunun bir WEB sayfası olduğunu anlar ve ona göre görüntüler. <html> <head> <title> Sayfanın Başlığı </title> </head> <body> .......................... Sayfanızın tüm içeriği: resim, yazı, video, vb. ..................... </body> </html>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

HTML Sayfasının Bölümleri <HTML> Bir WEB sayfasında bulunan ilk etikettir. Bu etiket tarayıcıya HTML belgesinin başladığı ve bittiği yeri bildirir. Bütün HTML kodları bu etiketin içinde yer almalıdır. Bu etiketin hiçbir parametresi yoktur. <html> .............. .............. .............. </html> <HEAD> HTML belgesinin ilk bölümüdür. WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır. Sayfa çalıştığında Web Tarayıcının başlık çubuğunda görülecek yazı burada : <title> ..... </title> etiketleri arasında belirtilir. Güzel ve başarılı bir sayfa oluşturmak istiyorsak <head> içerisinde META etiketlerini kullanarak bir takım tanımlamalar yapmalıyız. META etiketleri Tarayıcıda içerik olarak gözükmez, sadece sayfa hakkında tanımlayıcı bilgiler içerir. META etiketinde kullanılan parametreler şunlardır: Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

NAME: Author, description veya keywords gibi anahtar değerler alır ve sayfa hakkında tanımlayıcı bilgiler içerir. HTTP-EQUIV: Refresh, expires, content , content-style-type gibi sayfanın ilk yüklenmesi sırasında yapılacak bir takım ayarları içerir. Bazı META etiketleri ve kullanımları: <META NAME="author" CONTENT="EMEL KAÇAR">

Sayfanın tasarımcı kimliğini gösterir. <META NAME="Description" CONTENT="Sayfanızın kısa tanıtımını buraya yapın."> <META NAME="siteinfo" CONTENT="Site Hakkında Bilgi">

Arama motorlarında çıkacak olan açıklama satırı. <META NAME="keywords" CONTENT="Sitenizi arama motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın.">

Arama motorları tarafından hangi anahtar kelimelerle sayfanın aranacağını belirtir. <META http-equiv="refresh" CONTENT="5; URL=http://www.megep.meg.gov.tr">

Belirli bir saniye sonra sayfa istenilen adrese Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

otomatik yönlendirilir. Yukarıdaki örnekte 5 saniye. <meta http-equiv="refresh" content="60"> Belli aralıklarla sayfanın yenilenmesini sağlayan etiket. Örnekteki 60, sayfanın 60 saniyede bir yenileneceğini belirtir. <META http-equiv="expires" CONTENT="Wed, 25 Feb 2007 12:00:00 GMT">

Sayfanın geçerli olduğu zamanı belirler. Eğer sayfanız belli bir zaman içinde görüntülenecek bir sayfa ise bu tagı kullanmanız gerekir. Expires GMT saat sistemine göre belirtilen saat ve tarihten sonra sayfa arama motorlarından ve browser'ların geçici belleklerinden silinecektir. <META http-equiv="Content-Type" CONTENT="text/html; charset=windows-1254"> <META http-equiv="Content-Type" CONTENT="text/html; charset=ISO-8859-9">

Kodu sayfanızda ne tür bir metnin olduğunu (text/html yazmakla metnin düz yazı ve html belgesi olduğunu) ve karakterlerinin hangi kodlama ile yapıldığını gösterir. (windows-1254 ve ISO-8859-9 Türkçe karakter kodlamasını belirtir) <META http-equiv="Content-Language" CONTENT="tr">

Kodu sayfanızın dilinin Türkçe (istenirse değiştirileCennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

bilir.) olduğunu gösterir. <META http-equiv=”content-style-type” CONTENT=”text/ css”>

Content-style-type belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir. <META NAME="copyright" CONTENT="&copy; 2006 EMEL KAÇAR">

Kodu sayfanın telif hakkının kime ait olduğunu gösterir. <META NAME="GENERATOR" CONTENT="Microsoft FrontPage">

Kodu sayfanın hangi editörle yapıldığını gösterir. <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">

Kodu sayfanızı arama motorlarının veritabanına kaydolabilme hakkının verilmiş olduğunu gösterir. Virgülün solundaki ifade sayfanın indekslenip indekslenmeyeceğine karar verilmesini sağlarken, sağındaki ifade sayfadaki linklerin takip edilip edilmeyeceğini belirtiyor. index (indeksle) ve noindex (indeksleme) follow (takip et), nofollow (takip etme) <meta name="robots" content="none"> <meta name="robots" content="index,follow"> <meta name="robots" content="noindex,follow"> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Arama motorlarına sayfayı arşivlememe direktifi verilir. <META NAME="revisit-after" CONTENT="1">

Sayfanın arama motorları tarafından kaç günde bir ziyaret edilmesi gerektiği belirtilmiş olur. <meta name="revised" content="MaxiASP, 2/9/01"> Sitenizin son yenilenme tarihini de <META> etiketi ile belirtebilirsiniz. Bu arama motorlarında işe yarayacak bir özelliktir. Ayrıca site değerlendirme araçları da bu gibi kodlara önem verir. <META NAME="RATING" CONTENT="GENERAL">

Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla bütün katagoride olduğu belirtilmiş olur. Örnek) Şimdi bu tagları örnek bir sayfada görelim. Sayfa hakkında : Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

• Ormanlar hakkında bilgi veren bir sayfa, • Hazırlayan Erol Cebeci, • Girişte yeşil bir dünya sloganı olan bir sayfa, • Son gösterileceği tarihin 31 Ocak 2008 gece yarısı, Bilgilerinin elimizde olduğunu varsayalım. Buna göre sayfamızın meta taglarını hazırlayalım. <html> <head> <title> Ormanlar ile yeşil bir dünya </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"> <meta name="description" content="Oksijen kaynağımız ormanları koruyalım ve tanıyalım."> <meta name="keywords" content="orman, ağaç, yeşil bir dünya, doğa, hayat, gelecek, oksijen, sağlık, çam, koru"> <meta name="author" content="Erol Cebeci"> <meta http-equiv="expires" content="wed,31 January 2008 23:59:59 gmt"> <meta http-equiv="refresh" content="10, url=http://deneme.com"> </head> <body bgcolor="green"> ........................................................... ........................................................... sayfayı tanımlama kodları .......................................................... ........................................................... </body> </html>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

► Robot.txt Dosyası Bu dosya web sayfasının kök dizininde bulunur. Arama motorlarının indeksleme robotları bir web sitesine ulaştıklarında ilk olarak kök dizinde bulunan robots.txt dosyasını ararlar. Bu dosya robotlara hangi sayfaların indekslenip hangilerinin indekslenmeyeceğini anlatmak için yerleştirilir. Robotlar sadece kök dizindeki robots.txt dosyasına bakacakları için alt dizinlere bu dosyayı yerleştir mek anlamsızdır. Eğer alt dizinlerden birisine ait url (veya url’lerin) indekslenmesini istemiyorsanız bunlar da kök dizindeki robots.txt dosyasında bildirmeniz gerekiyor. Ya da alternatif olarak indekslenmesini istemediğiniz sayfalarda meta tag kullanabilirsiniz. Örnek bir robots.txt dosyasının içeriği: User-Agent: * Disallow: /wp/wp-content/ Sitemap: http://www.acemiblogcu.com/sitemap.xml

robots.txt dosyası sadece belirli bir şekilde düzenlenmiş metin içeriğine sahip olmalıdır ve asla HTML kodları içermemelidir. Hatalı robots.txt dosyaları , robotlar tarafından dikkate alınmayacaklardır. Bu konuyla ilgili kaynak: http://www.robotstxt.org/ Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Tüm robotların blog’unuzun tamamını indekslemesini engellemek için; User-agent: * Disallow: / Blog’unuzun tamamının robotların birisi tarafından indekslenmesini engellemek için; User-agent: Googlebot Disallow: / User-agent: * Disallow: Tüm robotların blog’unuzun tamamını indekslemesi için; User-agent: * Disallow: Not: Boş bir robots.txt dosyası da aynı mesajı verecektir. Bir dizinin tüm robotlar tarafından indekslenmesini engellemek için; User-agent: * Disallow: /dizin-adi/ Bir sayfanın tüm robotlar tarafından indekslenmesini engellemek için; User-agent: * Disallow: /dizin-adi/ozel-sayfa.html Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Robots.txt dosyasında: “/dizin-adi/*” veya “/dizin-adi/*.html” gibi ifadeler kullanamazsınız. Hariç tutulmasını istediğiniz sayfaları ve dizinleri teker teker belirtmek zorundasınız. Tabii ki hariç tuttuğunuz bir dizinin içindeki dosyaları ayrıca belirtmenize gerek yok. Örnek bir kod aşağıdaki şekilde olabilir; # www.ornek.com için robots.txt dosyası User-agent: * Disallow: /cgi-bin/ Disallow: /images/private/ Disallow: /private.html <BODY> HTML belgesinin gövde kısmıdır. Bütün içerik burada yer alır. Buraya metinler, resimler, listeler vb. her türlü HTML nesnesi yerleştirilebilir. Kullanılacak parametreler: Bgcolor: Arka plan rengini belirler. Background: Arka planda kullanılmak istenen resmi belirler. Link: Sayfadaki linklerin rengini belirler. Alink: Linke tıklandığındaki rengi belirler. Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Vlink: Daha önce ziyaret edilmiş linklerin rengini belirler. Ör) <HTML> <HEAD> <TITLE> Bu benim ilk sayfam </TITLE> </HEAD> <BODY> Merhaba Dünya! </BODY> </HTML> METİNLER VE BİÇİMLENDİRME Başlıklar: (hx) Bu etiket sayfa içerisinde kullanılacak metinlerin boyutlarını belirtmek için kullanılır. X değeri 1'den 6'ya kadar altı farklı değer alır. X değeri büyüdükçe metin boyutu küçülür. Ör) <html> <head> <title> Başlık Etiketinin Kullanımı </title> </head> <body> <h1> Bu yazı h1 ile yazılmıştır </h1> <h2> Bu yazı h1 ile yazılmıştır </h2> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

<h3> Bu yazı h1 ile yazılmıştır </h3> <h4> Bu yazı h1 ile yazılmıştır </h4> <h5> Bu yazı h1 ile yazılmıştır </h5> <h6> Bu yazı h1 ile yazılmıştır </h6> </body> </html> Yazıyı düzenleme etiketleri: <b> Bu yazı kalın yazılır </b> <strong> Bu yazı da kalın yazılır </strong> <u> Bu yazı altı çizgili yazılır </u> <i> Bu yazı eğik yazılır </i> <em> Bu yazı da eğik yazılır </em> <s> Bu yazının üzeri çizili olur </s> <p> Bu yazı bir paragraftır </p> <p align=”left”> Bu paragraf sola hizalı olur</p> <p align=”right”> Bu paragraf sağa hizalı olur</p> <p align=”center”> Bu paragraf ortada olur</p>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Çizgi Etiketi: (hr) Bu etiket kullanıldığı yerde yatay çizgi çizilmesini sağlar. Kullanılabilecek parametreler şunlardır: Width: Çizginin yataydaki genişliğini belirler. <hr width=”200”> ya da <hr width=”50%”> Size: Çizginin dikeyde kalınlığını belirler. <hr size=”3”> Color: Çizginin rengini belirler <hr color=”red”> ya da <hr color=”#FF0000”> Align: Çizginin hizalanmasını sağlar. < hr align=”left”> Ör) <html> <head> <title> Çizgi ve Başlık Etiketinin Kullanımı </title> </head> <body> <h2> Bilgisayar Çevre Birimleri </h2> <i> Harici Donanım Birimleri </i> <hr size=”5” align=”left” color=”red”> Klavye <br/> Mouse <br/> Monitör <br/> <p align=”right”> <i> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Dahili Donamım Birimleri </i> </p> <hr width=”175” size=”5” align=”right” color=”green”> <p align=”right”> İşlemci <br/> Ram <br/> Harddisk <br/> Anakart <br/> Ekran kartı <br/> </p> <p align=”center”> <i> Dahili ve Harici Donamım Birimleri </i> <hr width=”50%” size=”5” align=”center” color=”blue”> <p align=”center”> Modem <br/> Harddisk <br/> </p> </body> </html>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

<PRE> Etiketi: Bu etiket arasına yazılan metinler olduğu gibi tarayıcıda görülür. Ör) <html> <head> <title> Pre Etiketinin Kullanımı </title> </head> <body> <pre> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Bu pre etiketinin uygulamasıdır </pre> </body> </html> <FONT> Etiketi: Font etiketi sahip olduğu parametreler sayesinde metinlerin renk, yazı tipi, boyut gibi özelliklerini değiştirmenize olanak sağlar. Parametreleri ile beraber kullanım şekli aşağıdaki gibidir. <FONT SIZE="X" FACE="isim” COLOR="#XXXXXX">

Parametreler: Face : Yazı tipi (arial, tahoma, verdana, ...) Size : Yazının büyüklüğü (1-7 arası) . Bu değişkene -1, +2 gibi değerler verilerek metnin büyüklüğünün bir eksiltilmesini veya iki artırılmasını sağlanabilir Color : Yazının rengi belirler. Red, green gibi renklerin İngilizce karşılığı yazılır ya da RGB renk değeri belirtilir. RGB'de renkler hexdecimal sayı sisteminde ifade edilir. Bir renk 16'lık sayı düzeninde 6 rakamdan oluşur. Bu düzende 9'dan Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

sonraki sayıları göstermek için A’dan F’ye kadar olan harfler kullanılır. #000000 #0000FF #FF0000 #FFFF00 #008000 #C0C0C0 #FFFFFF

Siyah Mavi Kırmızı Sarı Yeşil Gri Beyaz

Ör) <html> <head> <title> Font Etiketinin Kullanımı </title> </head> <body> <font size=”6” face=”monotype corsiva” Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

color=”red”> Font etiketini kullanıyorum <br/> </font> Bu yazı varsayılan yazı tipinde görüntülenir <br/> Çünkü font etiketleri arasında değildir <br/> <font size=”5” face=”arial” color=”#008000”> Font etiketini kullanıyorum </font> </body> </html>

BG COLOR Parametresi: Sayfanın arka plan rengini belirler. <body> etiketinde kullanıldığında sayfa arka plan rengini; tabloda <td> etiketi ile kullanıldığında hücre rengini değiştirir. Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Ör) <html> <head> <title> BG Color Etiketinin Kullanımı </title> </head> <body bgcolor=”green”> <font size=”5” color=”yellow”> Bu yazı sarı, arka plan rengi ise yeşildir. </font> </body> </html> <blockquote> .... </blockquote> Etiketi: Bu etiket arasına yazılan metinler biraz daha içeriden başlatılır. Şekil itibarıyla paragrafa benzemektedir. &nbsp (Boşluk karakteri) Bir karakter boşluk bırakmak için kullanılır. Birden fazla boşluk bırakılmak isteniliyorsa aralarına ; konulmalıdır. &nbsp;&nbsp;&nbsp; gibi... topmargin , leftmargin parametreleri Topmargin üsten, leftmargin ise soldan bırakılacak boşluğu piksel cinsinden belirler. Bu parametreler BODY etiketi ile birlikte kullanılır. Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

BAĞLANTILAR (Linkler): Web sitelerinde , sayfalar arası geçişler linkler vasıtasıyla yapılmaktadır. Linkler farklı sayfaların birbirine bağlanmasını sağlar. Metinlere ve resimlere link özelliği verilebilir. Link vermek için <a> etiketi kullanılır. Sayfa dışı bağlantı oluşturma: <a href=”...” target=”...”> Yazı </a> href parametresine hedef sayfa yazılır. target parametresi bağlantının açılacağı yeri gösterir target="_blank": Bağlantı yeni bir pencerede açılır. target="_self": Bağlantı aynı pencere içerisinde açılır. target="_top" :Bağlantı aynı pencere içerisinde en üstten itibaren açılır. target="_parent" : Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur. target="çerçeve adı": Frame komutu ile çerçeve oluşturulmuşsa bağlantının açılacağı çerçeveyi belirtir.

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

<a href="http://www.yahoo.com"> Yahoo </a> <a href="http://www.yahoo.com" target=”_blank”> Yahoo </a> Sayfa içi bağlantı oluşturma: İstenilirse bir sayfa içerisinde yer alan uzun bir metnin değişik bölgelerine bağlantılar oluşturula – bilir. <a href="#...">...</a> , <a name="....">...</a> komutlarını kullanarak sayfa içi (dahili) bağlantıları hazırlayabiliriz. Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir menü olsun. Kullanıcı bu menüde istediği başlığa tıkladığında ilgili konuya gitsin. Ör) <HTML> <HEAD> <TITLE> Bağlantı ayarları </TITLE> </HEAD> <BODY> <a href=#1>ASP nedir?</a><br/> <a href=#2>ASP nasıl çalışır?</a><br/> <a href=#3>ASP ile bileşen kullanma</a><br/> <P><A NAME="1"></A><FONT SIZE=+1 COLOR="red"> 1.ASP nedir? </FONT> Sunucu taraflı bir teknoloji olan ASP, (Active Server Pages/ Aktif Sunucu Sayfaları) kullanıcı tarafına etkileşimli, dinamik Web sayfaları göndermek için Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

kullanılır. ASP, WEB programcılarına HTML, scripting ve kullanıcıdan bağımsız veritabanı uygulamalarını özgürce kullanma fırsatı verir. <P><A NAME="2"></A><FONT SIZE=+1 COLOR="red"> 2.ASP nasıl çalışır?</FONT> ASP arabiriminin işleyişi oldukça basit, sisteminize ASP eklentisini yüklediğinizde Internet Information Server'ınızın zaten sahip olduğu scripting özellikleri işlemeye başlıyor. İstemci tarafı sunucudan normal bir HTML sayfasını istediğinde, IIS bu dosyayı sabit diskten çağırarak istemci tarafındaki WEB tarayıcıya yollar. İstemci tarafından yapılan istek bir ASP sayfasıysa IIS bunu sayfanın uzantısından anlayarak ASP eklentisini devreye sokar. ASP eklentisi sayfa içindeki scriptleri yine IIS'a çalıştırdıktan sonra oluşan HTML sayfasını istemci tarafındaki WEB tarayıcısına yollar. <P><A NAME="3"></A><FONT SIZE=+1 COLOR="red"> 3.ASP ile bileşen kullanma </FONT> Microsoft'un sunucu teknolojisi ASP için birçok ikinci parti bileşen bulunuyor. ASP sayfaları ile uyum içerisinde çalışarak sonuç sayfalarının oluşturulması, WEB sayfası sahiplerine işlenmiş bilgi aktarılması gibi işlere yarayan bileşenlerden en popüler olanları ASPMail ve RoboHTTP. Server Objects firmasının bu iki ürünü, sayfadaki formların içeriğinin kullanıcıya e-mail olarak kullanılması, misafir defteri oluşturulması ve birçok değişik bilginin bir sayfada toplanması gibi işlemleri kolayca hallediyor. </BODY> </HTML>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

E-Posta Adresine Bağlantı Oluşturma: Hazırlamış olduğunuz WEB sayfasında insan ların istediğiniz bir mail adresine kolay bir şekilde ulaşabilmesini sağlayabilirsiniz. Bunun için: <a href=”mailto…….”> …. </a> ifadesi kullanılır. Ör) <A HREF="mailto:erhan@gmail.com"> E-Posta </A>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Bir dosyaya link verme: Kullanıcıların indirmesini istediğimiz bir dosyaya link verebiliriz. Ör) <a href=”dosya.doc”> Buraya tıkla </a> <a href=”dosya.zip”> Buraya tıkla </a> <a href=”dosya.pdf”> Buraya tıkla </a> Linkler Altındaki Çizgiyi Kaldırmak: Eğer herhangi bir düzenleme yapılmaz ise linkler altı çizgili bir şekilde gözükür. İstersek bunu kaldırabiliriz. Ör) <a href=”dosya.txt” style=”text-decoration:none”> .................... </a>

LİSTELER: Listeler üçe ayrılır: a) Sıralı Listeler (Ordered List) b) Sırasız Listeler (Unordered List) c) Tanımlama Listeleri (Definition List) Sıralı Listeler: <OL> .....</OL> Sıralı liste oluşturmak için <ol> etiketi kullanılır. Listeye elemanlar <li> etiketi ile ilave edilir. <ol> etiketi içerisinde type parametresi ile listenin Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

numaralandırma şekli belirlenir. Start parametresi ile liste istenilen sıradan başlatılabilir. Ör) <html> <head> <title> Sıralı Liste Örneği </title> </head> <body> <ol type=”1”> <li> Bilgisayar <ol type=”a”> <li> Donanım <ol type=”i”> <li> Dahili Donanım <li> Harici Donanım </ol> <li> Yazılım <ol type=”i”> <li> İşletim Sistemler <ul type=”disc”> <li> Windows <li> Linux <li> Mac Os </ul> <li> Uygulama Yazılımları </ol> </ol> <li> Elektronik Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</ol> </body> </html>

Sırasız Listeler: <UL> .....</UL> Kullanım açısından sıralı listelere benzer fakat rakam ya da harf yerine madde imleri kullanılır. Sırasız listelerde start parametresi yoktur. Type parametresi ise şu değerleri alabilir. <ul type=”disc” = içi dolu daire (●) <ul type=”circle” = içi boş daire (○) <ul type=”square” = içi dolu kare (□)

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Tanımlama Listeleri: Bu tür listelerde numaralandırma ya da madde imleri kullanılmaz. Bir başlık ve bu başlığın altında ona ait yazı ekrana gelir. Ör) <html> <head> <title> Sıralı Liste Örneği </title> </head> <body> <dl> <dt> <font size="5" color="red"> Size </font> <dd> Metnin büyüklüğünü ayarlar, bu değişke ne -1, +2 gibi değerler verilerek metnin büyüklüğü nün bir eksiltilmesini veya iki artırılmasını sağlaya bilir, direkt olarak bir rakam vererek de bunu yapa bilirsiniz. Yazı tipi çok büyük olmamalıdır, büyük yazı tipleri hem kullanıcıların sayfayı okumasını zorlaştırır, hem de sayfanın güzelliğini bozar. <dt> <font size="5" color="red"> Color </font> <dd> Yazının rengini (red, green gibi renklerin ingilizce karşılığı ya da RGB renk değeri) belirler. HTML'de renkler hexdecimal sayı sisteminde ifade edilir. Bir renk 16'lık sayı düzeninde 6 rakamdan oluşur. Bu düzende 9'dan sonraki sayı1arı göster mek için A'dan F'ye kadar olan harfler kullanılır. Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</dl> </body> </html>

RESİM EKLEME Internet üzerinde en çok kullanılan resim dosyası biçemleri GIF, JPG ve PNG’dir. Resimler <img> etiketi aracılığıyla kullanılır. Parametreler: src: Resmin bulunduğu dizini bu parametre ile bildiririz. <img src="resim.gif"> width: Resmin genişliğini piksel cinsinden bildirir. <img src="resim.gif" width="100"> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

height: Aynı şekilde resmin yüksekliğini bildirir. <img src="resim.gif" height="100"> border: Resmin etrafındaki çizginin kalınlığını belirtir. <img src="resim.gif" border="6"> align: Yatay konum belirler; left, right, center değerlerini alır. <img src="resim.gif" align="left"> alt: Mouse resmin üzerindeyken görüntülenecek metin bu parametreye yazılır. <img src="resim.gif alt="Bu bir resimdir."> Ör) <img src=”resimler\gül.jpg”> <img src=”..\gül.jpg”> <img src=”..\resimler\gül.jpg”> <img src=”..\..\gül.jpg”> Not: ..\ işareti bir üst dizine çıkmak için kullanılır. Ör) <html> <head> <title>Resim Ekleme</title> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</head> <body> <img src="../resim.jpg" width="250" height="185" border="4" alt="Gezgin"> </body> </html> Resme Link Vermek: <a h ref= " h tt p:// w w w. gidilece k ad res " ta r get= " ….. "><i m g s rc= " resi m.gif " ></a>

Resimlerde MAP Kullanımı: Map'ler bir resmin değişik yerlerine tıklandığında değişik bağlantıların açılmasını sağlarlar. Burada kullanılan resmin GIF biçiminde olması gerekmektedir. Kullanımı şu şekildedir: <img src="resim.gif" ISMAP usemap="#harita" width=160 height=100> ISMAP resmin bir harita olduğunu, usemap="..." hangi harita tanımını kullanması gerektiğini gösterir.

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Haritanın tanımı: <map name="harita"> <area shape="rect" coords"1,1,159,50" href="dikdortgen.html"> <area shape="circle" coords="80,100,40" href="daire.html"> <area shape="polyg" coords="10, 110, 150, 110, 80, 190, 9, 110" href="ucgen.html"> <area shape="default" nohref> </map>

Tablolar: Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceği miz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece istediğiniz düzenlemeyi yapabilirsiniz. <TABLE> Tablolar <table> etiketi ile başlar. <table> …… </table> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

<table border=”x” parametresi: Border parametresi hücrelerin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. border=0 çerçevenin görünmemesini sağlar.

<TR> Tabloda satır oluşturmayı sağlar. <TD> Tabloda sütun oluşturmayı sağlar. Ör) Tek hücreli tablo <table border=”1”> <tr> <td> Bilgisayar </td> </tr> </table>

Bilgisayar

Ör)

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Ör) <table border=”1”> <tr> <td> 1.Satır-1.Sütun </td> <td> 1.Satır-2.Sütun </td> <td> 1.Satır-3.Sütun </td> </tr> <tr> <td> 2.Satır-1.Sütun </td> <td> 2.Satır-2.Sütun </td> <td> 2.Satır-3.Sütun </td> </tr> <tr> <td> 3.Satır-1.Sütun </td> <td> 3.Satır-2.Sütun </td> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

<td> 3.Satır-3.Sütun </td> </tr> </table> Çerçeve Biçimini Değiştirmek: <table border="1" style="border-collapse: collapse">

BGCOLOR: Bu parametre <table> etiketi ile kullanılırsa, tablonun arka plan rengini değiştirir. Eğer <tr> etiketi ile kullanılırsa tüm satırın arka plan rengini, eğer <td> etiketi ile kullanılırsa yalnızca o hücrenin arka plan rengini değiştirir. Ör) <table border=”2”> <tr bgcolor=”red”> <td> Bu 1.satır-1.hücre </td> <td> Bu 1.satır-2.hücre </td> </tr> <tr> <td> Bu 2.satır-1.hücre </td> <td bgcolor=”green”> Bu 2.satır-2.hücre</td> </tr> </table>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

BACKGROUND: <table> etiketi ile birlikte kullanılırsa tablonun arkaplanına resim ekler. Sadece bir hücrenin arkaplanına resim eklemek istenilirse <td> etiketi ile kullanılır. Tüm bir satırın arkaplanına resim eklenmek istenilirse <tr> etiketi ile birlikte kullanılır. Ör)

5x30 “baslik_fon2.jpg” arka fon resmi Ör) <table border=”1” style="border-collapse: collapse"> <tr> <td background=“baslik_fon2.jpg”> ::: HABERLER ::: </td> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

<td>&nbsp;&nbsp;&nbsp </td> <td background=“baslik_fon2.jpg”> ::: ÖNEMLİ - DUYURULAR ::: </td> </tr> </table>

WIDTH VE HEIGHT: Witdth parametresi tablo yada hücrelerin piksel veya yüzde cinsinden genişliğini; Height parametresi tablo yada hücrelerin piksel veya yüzde cinsinden yüksekliğini belirler; Bu parametreler hiç kullanılmazsa, Web tarayıcısı hücre içeriklerini görüntüleyebileceği en makul genişliği tabloya otomatik olarak atayacaktır. Ör) <table border="1"> <tr> <td width=100 >Bilgisayar</td> </tr> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

<tr> <td width=100 height=50>Elektrik</td> </tr> <tr> <td height=40>Elektronik</td> </tr> <tr> <td height=80>Makine</td> </tr> </table> Not: Tabloya yükseklik ve genişlik değerleri verilirken aynı satırdaki hücrelerin yüksekliklerinin eşit olacağı ; aynı sütundaki hücrelerin eşit genişlikte olacağı unutulmamalıdır. Aynı satırda faklı yüksekliğe ya da aynı sütunda farklı genişliğe sahip bir hücre isteniliyorsa bu ancak birden fazla hücrenin birleştirilmesi ile mümkün olabilir.

ALIGN ve VALIGN: Align parametresi tablo etiketi ile birlikte kullanıldığında tabloyu yatayda hizalamak için; <td> etiketi ile kullanıldığında hücre içerisindeki nesneyi hizalamak için kullanılır. Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Valign hücre içerisindeki nesneyi düşey olarak hizalamak için kullanılır. Üç değer alabilir ve bunlar <tr> ve <td> etiketleri ile birlikte kullanılır. valign=”top” : Hücre içerisinde üst kısma hizalar valign=”middle” : Hücre içerisinde ortalar valign=”bottom” : Hücre içerisinde alt kısma hizalar Ör) <table border=”1” align=”center”> <tr> <td height=”50” width=”150” align=”left”> 1.HÜCRE </td> </tr> <tr> <td height=”50” width=”150” align=”center”> 2.HÜCRE </td> </tr> <tr> <td height=”50” width=”150” align=”right”> 3.HÜCRE </td> </tr> Ör) Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

<table border="1" width="150"heigth="300" align="center"> <tr height="100"> <td valign="top">ÜST</td> </tr> <tr height="100"> <td valign="middle">ORTA</td> </tr> <tr height="100"> <td valign="bottom">ALT</td> </tr> </table> BAŞLIK ETİKETLERİ: Tablo bağlığı <thead> etiketleri arasına yazılır. Tablonun bilgi içeren gövde kısmı <tbody> etiketleri içerisine yazılır. Tabloya ikinci bir altbaşlık eklemek için <caption> etiketi kullanılır. Gövde içerisinde yazılmak istenen başlıklar <th> etiketleri arasına yazılır. <th> etiketi <td> ile eşdeğerdir. Yalnız içerisindeki yazı başlık şeklinde biraz kalın yazılır. <th> etiketi , <tr> içerisinde kullanılır. Ör) <table border=”1”> <thead> Matematik Dersi Sınav Sonuç Tablosu </thead> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

<caption align="bottom"> Not ortalaması 50'nin altında olanlar bütünleme sınavına girmek zorundadırlar </caption> <tbody> <tr> <th width=”200”> Öğrenci Adı </th> <th width=”100”> 1.Sınav </th> <th width=”100”> 2.Sınav </th> <th width=”100”> Not Ortalaması </th> </tr> <tr align=”center”> <th> Mustafa AKTÜRK</th> <td> 50 </td> <td> 70 </td> <td> 90 </td> </tr> <tr align=”center”> <th> Serhat KILIÇ </th> <td> 75 </td> <td> 40 </td> <td> 58 </td> </tr> <tr align=”center”> <th> Serkan YAVUZ </th> <td> 35 </td> <td> 25 </td> <td> 30 </td> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</tr> </tbody> </table>

CELLPADING ve CELLSPACING: Cellpading parametresi hücre içerisindeki nesnenin hücre kenarları ile olan uzaklığını ayarlar. Cellspacing parametresi hücreler arasındaki mesafeyi belirler. --------------------------------------------------------------------

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

--------------------------------------------------------------------

-------------------------------------------------------------------COLSPAN ve ROWSPAN : Aynı satırdaki hücreleri birleştirmek için colspan parametresi kullanılır. Aynı sütundaki hücreleri birleştirmek için de rowspan parametresi kullanılır. <td colspan=”3” .......... <td rowspan=”2” ..........

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Ör) <table border=”1”> <tr> <td colspan=”3” width=”100” height=”25”> 1 </td> <td rowspan=”4” width=”25” height=”100”> 1 </td> </tr> <tr> <td colspan=”2” width=”75” height=”25”> 3 </td> <td rowspan=”3” width=”25” height=”75”> 4 </td> </tr> <tr> <td colspan=”1” width=”50” height=”25”> 5 </td> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Ör) <table border=”1”>  <tr align=”center”> <td rowspan=”2” width=”75” height=”50”> 1 </td> <td width=”75” height=”25”> 2 </td> <td rowspan=”2” width=”75” height=”50”> 3 </td> <td rowspan=”4” width=”75” height=”100”> 4 </td> </tr> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

<tr align=”center”> <td width=”75” height=”25”> 5 </td> </tr>  <tr align=”center”> <td colspan=”3” width=”225” height=”25”> 6 </td> </tr>  <tr align=”center”> <td colspan=”3” width=”225” height=”25”> 7 </td> </tr> </table>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Uygulama) Aşağıdaki tabloyu HTML kodları ile yapınız (Tablo 800 x 600 olsun)

ÇERÇEVELER (FRAME): Çerçeveler birden fazla HTML sayfasını tek bir sayfada birleştirerek gösterilmesini sağlarlar. Çerçevelerin özellikleri; * Her çerçeve kendi URL’sine sahiptir. * Her çerçeveye ad verilebilir. * Her çerçeve kullanıcı tarafından boyutlandırılabileceği gibi, eğer istenilirse sabitlenebilir.

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Çerçeveli sayfalar <frameset> .. </frameset> etiketleri ile oluşturulur. <HTML> <HEAD> …. </HEAD> <FRAMESET> ….. </FRAMESET> </HTML> COLS: Sayfayı dikey olarak bölmeye yarar. Virgülle ayrılmış değerler girilerek oluşturulacak çerçevelerin yan yana sütunlar şeklinde olmasını sağlar. Bu değerler pixel olarak verilebileceği gibi, 1 ile 100 arasındaki bir yüzde ile ya da göreceli boyutlar olarak tanımlanabilir. “*” ile göreceli değer verilirken, sütunun geriye kalan bütün alanı kapsaması için kullanılır. Ör) <frameset cols=”20% , 50% , 30%“> <frameset cols=”100 , 200 , 500” > <frameset cols=”20% , 200 , * “ >

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

ROWS: Sayfayı yatay olarak bölmeye yarar. Çerçevelerin alt alta satırlar görünümünde açılmasını sağlar. Cols için geçerli olan kurallar burada da geçerlidir. FRAME: Hangi çerçevede hangi sayfanın gösterileceği bu etiket ile belirlenir. <frame> etiketinin parametreleri şunlardır.

Ör) Çerçeveleri kullanarak bir uygulama gerçekleştirelim. İlk önce normal iki tane sayfa yapıyoruz. Daha sonra bunları çerçeveli bir sayfa içerisine yerleştiriyoruz. Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

sayfa1.html <html> <head> <title> Bu birinci sayfadır </title> </head> <body bgcolor=”yellow”> <h1> 1.Sayfa </h1> </body> </html> sayfa2.html <html> <head> <title> Bu ikinci sayfadır </title> </head> <body bgcolor=”blue”> <h1> 2.Sayfa </h1> </body> </html> cerceve1.html <html> <head> <title> Alt-alta çerçeve </title> </head> <frameset rows=”30%,70%”> <frame name=”ust” src=”sayfa1.html”> <frame name=”alt” src=”sayfa2.html”> </frameset> </html> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Not: oluşturulan çerçeveli sayfada çerçevelerin büyüklüğü kullanıcılar tarafından değiştirilmesi istenilmiyorsa frame etiketi kapatılmadan noresize parametresi kullanılır. <frame name=”ust” src=”sayfa1.html” noresize> <frame name=”alt” src=”sayfa2.html” noresize> cerceve2.html <html> <head> <title> Yan-yana çerçeve </title> </head> <frameset cols=”20%,80%”> <frame name=”sol” src=”sayfa1.html” marginheight=”50” marginwidth=”20” scrolling=”no”> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</frameset> </html>

Not: Çerçeveleri ayıran çizgi eğer istenilirse kaldırılabilir. Bunun için frameborder parametresi kullanılır. <frameset cols="20%,80%" frameborder="no"> NOFRAMES: <noframes> etiketi, eğer tarayıcının çerçeve desteği yoksa ziyaretçiye görüntülenecek sayfayı belirlemede kullanılır. Daha çok eski ve Linux altında kullanılan metin tabanlı istemcilerde çerçeve desteği yoktur. Günümüzde kullanılan güncel tarayıcılarda çerçeve desteği vardır. Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Uygulama) index.html <html> <head> <title> ::: Çerçeveli Sayfa ::: </title> </head> <frameset rows="15%,75%,10%"> <frame name="ust" src="ustsayfa.html"> <frameset cols="15%,*,15%"> <frame name="sol" src="solsayfa.html"> <frame name="orta" src="ortasayfa.html"> <frame name="sag" src="sagsayfa.html"> </frameset> <frame name="alt" src="altsayfa.html"> </frameset> </html> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

ustsayfa.html <html> <head> <title> Bu ust sayfadır </title> </head> <body bgcolor="blue"> <center> <h1> Burada BANNER olsun </h1> </center> </body> </html> solsayfa.html <html> <head> <title> Bu sol sayfadır </title> </head> <body bgcolor="green"> <h3> Burada </h3> <h3> Menüler</h3> <h3> Olsun </h3> </body> </html> ortasayfa.html <html> <head> <title> Bu orta sayfadır </title> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</head> <body bgcolor="magenda"> <center> <font size="7"> Burada içerik olsun </font> </center> </body> </html> sagsayfa.html <html> <head> <title> Bu sağ sayfadır </title> </head> <body bgcolor="cyan"> <h3> Burada Reklamlar</h3> <h3> Olsun </h3> </body> </html> altsayfa.html <html> <head> <title> Bu alt sayfadır </title> </head> <body bgcolor="blue"> <center> <font size="6"> Burada Site tasarımı ile ilgili bilgiler olsun </font> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</center> </body> </html>

Yukarıdaki örnekte solsayfa.html dosyasını aşağıdaki gibi değiştirelim. <html> <head> <title> Bu sol sayfadır </title> </head> <body bgcolor="green"> <a href=”anasayfa.html” target=”orta” style=”text-decoration:none”> ANASAYFA </a> <a href=”urunler.html” target=”orta” style=”text-decoration:none”> ÜRÜNLER </a> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

<a href=”iletisim.html” target=”orta” style=”text-decoration:none”> İLETİŞİM </a> </body> </html>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

KAYAN NESNELER: Kayan nesne eklemek için <marquee> etiketi kullanılır. Bu etiket arasına eklenen yazı ve resimler ekranda hareket etmektedirler. Gerekli yerlerde ( örneğin “Duyurular” olabilir) kayan yazı eklemek sayfamızı daha güzel ve kullanışlı yapar. Fakat çok fazla kayan nesne eklenmemelidir. Kullanılan parametreler şunlardır: Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Direction

Hareket yönü belirlenir: Right , Left , Up , Down

Bgcolor Width ve Height Loop

Kayan nesnenin arka plan rengi ayarlanır.

Scrolldelay

Nesnenin hareket hızını belirler. Değer olarak sayı girilir. (Ölçü=milisaniye)

Kayan nesne alanının yatay ve dikey uzunluğunu belirler. Nenenin kaç kez hareketi tekrarlayacağını belirler. Değer olarak sayı girilir.

Scrollamount Her bir harekette nesnenin kaç piksel kayacağını belirler. Sayı değeri girilir.

Behavior

Nesnenin hareket türünü belirler. Alternate: Nesne her iki yöne doğru gidip gelir. Slide: Nesne her iki yönde bir kez kayar ve ortada kalır. Scroll: Nesne sürekli bir yönde hareket eder.

Ör) <html> <head> <title> Kayan yazı örneği </title> </head> <body> <marquee> Web Sitesine Hoşgeldiniz..</marque> </body> </html> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Ör) <html> <head> <title> Kayan yazı örneği </title> </head> <body> <marquee> <img src=”cicek.jpg> </marque> </body> </html> Ör) <html> <head> <title> Kayan yazı örneği </title> </head> <body> <marquee bgcolor=”green” width”500” height=”50”>

<font color=”yellow”> WEB TASARIMI </font> </marque> </body> </html> Uygulama) duyuru.html Ör) <html> <head> <title> Kayan yazı örneği </title> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</head> <body> <marquee direction=”up” scrolldelay=”300" bgcolor="silver"> <u> <font color=”red”> ::: DUYURULAR ::: </font><br> </u> <a href=”#”>Web Tasarım Kursu Açılmıştır</a><br><br> <a href=”#”>Hafta Sonu Tiyatroda Ne Var</a> <br><br> <a href=”#”>Çoçuklar İçin Resim Kursu</a> <br><br>

</marque> </body> </html> index.html <html> <head> <title> Kayan yazı örneği </title> </head> <body> <table border=”0” width=”200” height=”200” align=”right”> <tr> <td> <iframe name=”duyuru” scrolling=”no” marginwidth="0" marginright="0" src=”duyuru.html”> </iframe>

</body> </html> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

ÇOKLU ORTAM ARAÇLARI: • Web Sayfasına Ses Eklemek: Web üzerinde ses dosyaları iki şekildedir. - Durağan Sesler: Dinlemeye başlamadan önce tamamı karşıdan yüklenmek zorunda olan seslerdir. Kısa ses klipleri depolamak için iyidir. - Akan Sesler: Karşıdan yüklenirken çalınabilirler. Temel yararları; uzun olabilmeleri ve sesin tamamının karşıdan yüklenmeden çalınabilmesidir. Internet ortamında arşivlenmiş olarak bir sürü ses dosyası bulunabilir. Ses dosyası uzantıları wav, wma, au, mp3, mpg, mpeg, mid, avi olabilir. Ses kullanmanın, tarayıcının bir Web sayfasında karşılaştığında bir sesi nasıl çalacağı ile ilgili olarak farklı olan üç yaklaşım vardır. - Sese bağlanmak ; bu durumda ses bir dış yardımcı uygulamada çalınır. - Sesi gömmek ; bu durumda ses tarayıcı Ya da bir eklenti tarafından çalınır. - Sesi arka plan sesi olarak ayarlamak; bu durumda ses, tarayıcı Ya da bir eklenti tarafından sayfa açılır açılmaz çalınır.

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

- Seslere Bağlanmak: Ör) <p> <a href=''sesdosyasi.wav''> Ses için tıkla </a> </p> - Sesleri Gömmek: Sesleri html kodları arasında gömmek için embed etiketi kullanılır. Embed ile gömülen sesler tarayıcı ekranında beliren bir çoklu ortam konsolunda çalınır. Diğer yandan tarayıcılar gömülü ses olarak çalınabilecek ses dosyaları türlerinde sınırlıdırlar. WAV biçimini kullanmanız büyük bir olasılıkla yeterli olacaktır. Embed etiketinin parametreleri: Src : Ses dosyasının yolu ve adı Width : konsolun genişliği (pixel) Height : konsolun yüksekliği (pixel) Autostart : Otomatik çalma (True , False) Loop : Sesin kaç kez yenileneceğini belirler. Ör) (1,2,3....ya da True) <html> <head> <title>Gömülü ses örneği</title> </head> <body> <embed src="Beethoven.wma" width="200" height="50" autostart="false"> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</body> </html>

- Arka Plan Sesleri Kullanmak: Bir web sayfasına arka planda ses eklemek için <BGSOUND> etiketi kullanılır. Bu ses kullanıcılar tarafından kontrol edilemez. Loop parametresi sesin tekrarlanma sayısını belirler. -1 ya da infinite değerini aldığında ses sürekli çalar. Ör) <html> <head> <title> Ses örneği </title> </head> <body> <bgsound src=''sesdosyası.wma'' loop=''-1''> </body> </html>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

• Web Sayfasına Video Eklemek: Web üzerinde sesler gibi videolar da durağan ya da akan olabilir. Çoğunluğu akan şekildedir, çünkü video dosyaları ses dosyalarından daha büyüktür. Durağan video dosyaları için bilinen biçimler: MPEG , AVI ve QuickTime'dır. MPEG videoları ; bir .mpe , .mpg ya da .mpeg dosya uzantısına sahiptir. AVI videoları .avi kullanır ve QuickTime videoları ise .mov ya da .qt dosya uzantısı kullanır. AVI videoları .avi uzantısı kullanır. Durağan videolar özel programlarla akan videolara dönüştürülebilir. Sayfalarımıza video ekleme yolları: - Videolara bağlanmak: Ses dosyalarında olduğu gibi <a> etiketi kullanılır. Ör) <p> <a href=''videodosyasi.avi''> Video için tıkla </a> </p> - Videoları gömmek: Kullanıcı kontrollü video eklemek için <embed> etiketi kullanılır. Bu etiket ile eklenen videoyu oynatacak programda otomatik açılmaktadır. Kullanılacak parametreler şunlardır: Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Width ve Height: Oynatıcının boyutlarını piksel cinsinden ayarlar. Loop: Videonun kaç kez oynatılacağını belirler. 0 - Video bir kez oynar 1 - Video sürekli oynar Autostart: Videonun nasıl başlayacağını belirler. ''true'': Video otomatik başlar. ''false'': Video play tuşuna basıldığında başlar. Ör) <html> <head> <title> Video örneği </title> </head> <body> <embed src=”video.mpeg” width=”200” height=”200” autostart=”false”> </body> </html> - Akan Videoları Oluşturmak ve Kullanmak: Çoğu video bir durağan dosya olarak ortaya çıktığından, bunları akan çoklu ortam dosyasına çevirmek gerekir. Bunun için Windows Media Format ya da Real Media gibi akan bir biçim kullanılabilir. Bu dönüşümleri yapmak için Windows Media Encoder ve RealProducer programları kullanılabilir. Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Akan çoklu ortam dosyalarına bağlanmak: Bir akan dosya ve bir durağan dosyaya bağlan ma arasındaki tek fark, akan dosyaların ek bir yar dımcı dosya gerektirmesidir. Bu dosyaya meta dosya denir. <asx version=''3.0''> <entry> <ref href=''uydu.wmv''> </entry> </asx> Windows Media dosyaları, özel bir XML biçiminde depolanırlar ve bir .asx dosya uzantısına sahiptir – ler.Yukarıdaki dosya .asx uzantısıyla kaydedilir. Ör1) <html> <head> <title>Akan Video Örneği - 1</title> </head> <body> <a href="uydu.asx">Video için tıklayınız...</a> </body> </html> Ör2) <html> <head> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

<title> Akan Video Örneği - 2 </title> </head> <body> <embed src="uydu.asx" width="400"height="400" autostart="false"> </body> </html> HTML FORMLARI: Formlar, internet kullanıcıları arasında veri alışverişi sağlamak için kullanılan ideal bir araçtır. Kullanıcılardan alınan bilgiler, bilgilerin değerlendireleceği bir programa aktarılır. Genelde bu bilgiler bir veritabanına aktarılır ve orada tutulur. İstenilirse bu bilgiler e-mail adreslerine de yönlendirilebilir. Form alan oluşturmak için: <form> ..... </form> etiketleri kullanılır. <FORM ACTION=”...” METHOD=”...” TARGET=”...”> </FORM>

Action : Formdan girilecek bilgilerin değerlendirileceği dosyanın URL yolunu gösterir. Method : Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemini belirtir. GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini gizli olarak değerlendiriciCennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

ye yönlendirir. Target: Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir. Pencere isimleri : “_blank” , “ _top” gibi değerlerden biri olabilir. <input> Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlar. Genel kullanımı: <INPUT ALIGN=”tip” [CHECKED] MAXLENGTH=”uzunluk” NAME=”isim” SIZE=”boyut“ SRC=”adres” TYPE=”tip” VALUE=”değer”>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Varsayılan olarak görüntülenmesini istediğimiz elaman value parametresine yazılır. Form Elemanları: Text (Metin Kutusu): Kullanıcıdan tek satırlık veri alınmasına olanak tanır. Size ve maxlength parametreleri, bu kontrolle birlikte kullanılabilir. Ör) <html > <head> <title>Metin Kutusu</title> <meta http-equiv="content-type" content="text/html; charset=windows-1254" > Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</head> <body> <form name="form1" method="post" action=""> <pre>TC Kimlik No : <input type="text" name="tckimlik" value="TC Kimlik No" size="20" maxlength=”11”/> </pre> <pre>Adınız : <input type="text" name="ad" value="adınız" size="20"/> </pre> <pre>Soyadınız : <input type="text" name="soyad" value="soyadınız" size="20"/></pre> </form> </body> </html>

Password(Şifre Alanı): Formumuza parola yazılabilecek alan eklemek için kullanılır. Kullanımı metin kutusu ile aynıdır. Yalnızca type değerine password yazılır. <pre>Kullanıcı : <input type="text" name="kullanici" size="20" > </pre> <pre>Sifre : <input type="password" name="sifre" size="20" maxlength=”8”> </pre>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

CheckBox(Onay

Kutusu): Onay kutusu eklemek için kullanılır. Checked parametresi “on” yapılırsa varsayılan olarak onay kutusu işaretlenmiş olur.

<html> <body > <form name="form1" method="post" action=" "> <input type="checkbox" name="kutu1" checked="on"> İlköğretim<br> <input type="checkbox" name="kutu2"> Lise <br> <input type="checkbox" name="kutu3"> Üniversite Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</form> </body> </html> Radio (Yuvarlak İşaret Düğmesi): Normalde onay kutusuna benzer. Name kısmına aynı isimler verilirse kullanıcıların birçok seçe nek içerisinden sadece bir tanesini seçmelerine izin verir. Bu durumda value parametresine farklı değerler verilmelidir.

<html> <body > <form name="form1" method="post" action=""> <p><u><h2>Yaş Aralığı</h2></u></p> <input type="radio" name="yas" value="a"> 0-18 <br> <input type="radio" name="yas" value="b"> 19-24<br> <input type="radio" name="yas" value="c"> 25-34<br> <input type="radio" name="yas" value="d"> 35 ve Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

yukarısı<br>

</form> </body> </html> Textarea (Metin Alanı): Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek alan eklemek için kullanılır. rows ve cols parametreleri ile alanın ekranda kaplayacağı büyüklük belirlenir.

<html> <body > <form name="form1" method="post" action=""> <p><u><h2>İstek ve Şikayetleriniz </h2></u></p> <textarea name="alan" cols="50" rows="10"> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</textarea> </form> </body> </html> Combo Box (Açılan Kutu):

<html> <head> <title>Açılan Kutu Örneği</title> </head> <body> <form name="form1" method="" action=""> <select name="sehir"> <option>Ankara </option> <option>İstanbul </option> <option>İzmir </option> <option>Erzincan </option> </select> </label> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</form> </body> </html> Label (Etiket):

<html> <head> <title>Etiket Örneği</title> </head> <body> <form name="form1" method="" action=""> <label>Adınızı Giriniz: <input type="text" name="ad"> </label> </form> </body> </html>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Gizli Alan (Hidden Field): Gizli alanlar tarayıcıda kullanıcıya görünmez. Bu alanlarda kullanıcıya görünmesini istemediğimiz verileri tutabiliriz. <form name="form1" method="get" action=""> <label>Adınızı Giriniz <input type="text" name="textfield" /> </label> <input type="hidden" name="hiddenField" /> </form> Button (Buton): Normalde bir buton oluşturmak için aşağıdaki kod kullanılır. <input type="button" name="hesap" value="Buraya Tıkla">

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Submit (Gönder) ve Reset (Sil) Butonları:

Submit butonu Form içeriğini sunucuya yollar. Value değeri kullanılarak üzerindeki yazı değiştirilebilir. Submit butonu tıklandığında form içeriğini temizler. Kullanıcının formu tekrar doldurmasını sağlar. <form name="form1" method="" action=""> ................. ................. <input type="submit" value="GÖNDER"> <input type="reset" value="SİL"> </form>

Uygulama) <html> <head> <title>Örnek</title> <meta http-equiv="content-type" content="text/html; charset=windows-1254" > Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

</head> <body> <hr> <form name="form1" method="post" action="...."> <pre> E-mail adresiniz :<input name="email" size=30> </pre> <pre> İsminiz :<input name="name" size=30> </pre> <u>Katılmak istediğiniz kursu yazınız: </u><br> <input name="ders" type="checkbox" value="grafik" checked="on"> Grafik-Tasarım <input name="ders" type="checkbox" value="web" > Web-Tasarım <input name="ders" type="checkbox" value="programlama">Visual Studio.NET <input name="ders" type="checkbox" value="isletimsis">Windows 2003 Server<br> <p> Görüşlerinizi yazabilirsiniz: <p> <textarea name="body" rows=10 cols=50>Buraya birşeyler yazabilirsiniz. </textarea> <br> <input type="submit" value="Gönder" name="submit"> <input type="reset" value="Temizle" name="reset"> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Formun action parametresine ne yazılabilir: a) <form action="mailto:abc@hotmail.com" method=”post”> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

b) <form action="http://www.itu.edu/cgi-bin/madlib.pl" method=”post” >

c) <form action="http://www.itu.edu/veri.aspx" method=”post” >

d) <form action="http://www.itu.edu/veri.php" method=”post” >

e) <form action="http://www.itu.edu/veri.jsp" method=”post” >

Web Standartları: Webin temel işaretleme dili olan HTML ve web'te kullanlan CSS gibi diğer teknolojilerin belirli kuralları vardır. Bu kurallara web standartları denir. Web standartları sayesinde , değişik web cihazlarının, web içinde sunulan bilgileri aynı şekilde kullanıcıya göstermesi mümkün olmaktadır. Web standartları sayesinde, sunulan bilgi, herkes tarafından erişebilir hale geliyor. Önemli olan kullanıcının İnternet nasıl, ne ile bağlandığı değil; neye, hangi bilgiye ulaşmak istediğidir. Bir dili konuşurken, bir takım dil bilgisi kurallarına uymak zorundayız. Web ülkesinde konuşulan Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

ana diller (X)HTML (Hypertext Markup Language) ve CSS (Cascading StyleSheets). İmla kılavuzu ise web standartlarıdır. Bu standartlar web tasarımcılarına bir sayfanın nasıl kodlanması gerektiğini göstermenin yanı sıra İnternet tarayıcılarına bir sayfanın kullanıcıya nasıl görünmesi gerektiğini söyleyen bir takım kuralları içinde barındırıyor. Bu standartlar sayesinde; web tasarımcılar, her türlu İnternet tarayıcıları, İnternet kullanıcıları, web tasarım şirketleri, web sitesi isteyen müşteriler aynı dili konuşup birbirini anlayabiliyor. Web standartları: World Wide Web Consortium (W3C) tarafından belirlenir. http://www.w3.org/ W3C'in , web sayfalarının belirlenen standartlara uyup uymadığını denetleyen bir servisi vardır. http://validator.w3.org/ http://jigsaw.w3.org/css-validator/

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Sitemize ekleyebileceğimiz hazır validator kodu: XHTML Validator: <p> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> </p>

Yukarıdaki referer yerine web sitesinin adresi yazılır. XHTML Nedir?: (EXtensible HyperText Markup Language) Xhtml, günümüzde W3C tarafından standart kabul edilen ve tavsiye edilen web biçimleme dilidir. Kısa özetlenirse: Açılımı EXtensible HyperText Markup Language (Genişleyebilir Hiper Metin Anlamlandırma Dili) olan web biçimleme dilidir. XHTML, HTML dili üzerine kurulmuştur ve onun yerini almaktadır. HTML 4.01′i ve bünyesindeki etiket ve parametreleri kendine referans alır. Temiz ve düzenli HTML yazımını sağlar. XTML, W3C standardı ve tavsiyesidir.

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Xhtml ile oluşturulan sayfalar webi destekleyen tüm cihazlarda ve modern tarayıcılarda (IE, FF, Safari, Opera) “Tam ve standartlara uygun” kod yazımı ile web sayfanızın tüm dünya üzerinde doğru olarak görüntülenebilmesini sağlamaktadır. XHTML ile HTML arasındaki farklar : Xhtml dili, Html’den çokta farklı değildir. Xhtml'in geçerli parametre ve etiketleri Html 4.01 üzerinden alınmış ve dile entegre edilmiştir. Bununla birlikte, şimdiden HTML kodlarınızı küçük harflerle yazmaya başlayın. Zira Xhtml yazım biçemi, bunun dışında olan (HTML’nin kabul ettiği ancak Xhtml’nin kabul etmediği) yazım biçimlerini ve etiket sonlandırılmalarını standartlara uygun bulmamaktadır. İki Dil Arasındaki Bazı Önemli Farklar: Maddeler halinde sıralayacak olursak iki dil arasında temel olarak şu farklar vardır: Xhtml etiketleri gereği gibi dizilmelidir. Xhtml dokümanları “tam ve uygun kod” yazımı ile yazılmalıdır. Etiket ve parametre isimleri “küçük harflerle” yazılmalıdır. Tüm Xhtml etiketleri mutlaka “kapatılmalıdır” Xhtml Etiketleri Gereği Gibi Dizilmelidir! Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Html'de aşağıdaki örnekte olduğu gibi etiketler sırasız olarak kapatılabilir. Fakat Xhtml'de bu tarz kod uygun değildir. HTML Format: <i><b>Bu yazı kalın ve italik olarak yazılmıştır</i></b> XHTML Format: <i><b>Bu yazı kalın ve italik olarak yazılmıştır></b></i>

Xhtml dokümanları “tam ve uygun kod” yazımı ile yazılmalıdır! Xhtml üzerinde kodlar, özellikle html, body, head gibileri çift olmalı yani açılan komutlar icra edildikten sonra bitirilmeli bu etiket içine standarda uygun olmayan başka eklenti veya kod yazılmamalıdır. Aşağıdaki örnek Xhtml yazımına uygun bir Html kkodunu bizlere veriyor. <html> <head> … </head> <body> sayfamızda yer alan görsel öğelerin tümü </body> </html> Etiket ve parametre isimleri “küçük harflerle” yazılmalıdır! Xhtml yazımı kesinlikle etiket ve parametrelerin büyük harfle yazımını kabul etmez. Yazılan etiketler Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

mutlaka küçük harflerle yazılmalıdır. HTML Format: <BODY><FONT color=”red”>bu yazı kırmızı</FONT></body>

XHTML Format: <body><font color=”red”>bu yazı kırmızı </font></body>

Tüm Xhtml etiketleri mutlaka “kapatılmalıdır”! Xhtml dilinde kodlama yaparken kesinlikte tüm açılan etiketler kapatılmalıdır. Açılan etiketlerin sırayla kapatılması Xhtml için doğru bir yazımdır. HTML Format: <p>bu bir paragraf… XHTML Format: <p>bu bir paragraf </p> Boş etiketler kesinlikle kapatılmalıdır! Html üzerinde bazı etiketlerin kapatılmasına ihtiyaç duyulmaz. Örneğin <br>, <img>, <hr> gibi. Xhtml dilinde bu etiketlerinde bir kapatılma biçimleri vardır. Etiketler sonuna /> işareti atılarak bu etiketler kapatılmalıdır. Lütfen aşağıdaki örnekleri dikkatlice inceleyiniz. HTML Format: Satır atlayalım : <br> Sayfamıza yatay çizgi atalım : <hr> Sayfamıza bir resim yerleştirelim : <img xsrc=”xhtml.gif” alt=”xhtml dersleri”> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Xhtml Format: Satır atlayalım: <br /> Sayfamıza yatay çizgi atalım: <hr /> Sayfamıza bir resim yerleştirelim: <img xsrc=”xhtml.gif” alt=”xhtml dersleri” /> gördüğünüz gibi Html üzerinde kapatmaya ihtiyaç olmayan bu etiketler Xhtml dilinde etiket sonuna /> atılarak kapatılıyor. XHTML ve Syntax (Sözdizimi) Kuralları: Etiket ve parametreler küçük harfle yazılmalı HTML Format: <table WIDTH=”100%”> XHTML Format: <table width=”100%”> Parametre değerleri kesinlikle alıntılanmalı yani tırnak işareti içinde yazılmalı HTML Format: <table width=100%> XHTML Format: <table width=”100%”> Parametre değerlerinde kısaltılma yapılmamalı Html dokümanlar üzerinde bazı zamanlar (örneğin formlar) üzerinde tanımlanan bazı seçili değerler vardır. input etiketinde checkbox değeri kullanırken seçili öğeyi “checked” yazarak seçeriz. Xhtml de bu tarz bir yazım veya kısaltma yapılamaz. Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Bununla birlikte değerler tam ve doğru bir şekilde yazılıp tanımlanmalıdır. HTML Format: <frame noresize> , <input checked> XHTML Format: <frame noresize=”noresize” /> , <input checked=”checked” /> Aşağıdaki tabloda Html üzerinde tanımlanmayan ve kısa parametre değeri olarak yazılan bazı değerlerin Xhtml’deki yazım biçimini göreceksiniz. Lütfen tabloyu inceleyin. HTML XHTML compact

compact=”compact”

checked

checked=”checked”

declare

declare=”declare”

readonly

readonly=”readonly”

disabled

disabled=”disabled”

selected

selected=”selected”

defer

defer=”defer”

ismap

ismap=”ismap” Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

nohref

nohref=”nohref”

noshade

noshade=”noshade”

nowrap

nowrap=”nowrap”

multiple

multiple=”multiple”

noresize

noresize=”noresize”

Name parametresi yerine “id” parametresi kullanılmalı Html üzerinde a, applet, frame, iframe, img, map gibi etiketlerin tanımı olarak kullanılan “name” parametresi Xhtml üzerinde geçerliliğini yitirmiştir. “name” yerine “id” parametresi kullanılmalıdır. HTML Format: <map name=”map1” /> XHTML Format: <map id=”map1” /> (Not: bazı eski browserlar üzerinde id parametresi çalışmayabilir, bu gibi durumlarda hem name hem de id parametresini aynı etiket üzerinde tanımlayabilirsiniz. ) Xhtml dokümanlarda zorunlu olarak DTD (Doküman Tipi) tanımlanmalı , Etiket ve Parametreler küçük harfle yazılmalıdır! Xhtml dili ile kodlanan sayfalarda mutlaka DTD yani Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Doküman tipi tanımlanmalıdır. Doküman tipi tanımlama kodu kodlama itibariyle sayfanın en üstüne yapılır. Bu satırda yer alan doküman tipi tanımı ile sayfanın geri kalan kodları o tipe göre icra edilir. Bununla birlikte bir Xhtml dokümanı 3 öğeden oluşmaktadır. DOCTYPE , Body ve Head. Yaptığımız bu açıklamaya göre bir basit Xhtml kabuğu sunalım. <!DOCTYPE …> <html> <head> <title>… </title> </head> <body> … </body> </html> DTD (Doctype Definition): Doküman Tipi Tanımı 3 ana türden oluşur: Bunlar STRICT, TRANSITIONAL ve FRAMESET olarak adlandırılmaktadır. Strict, doküman tipi Türkçe’ye “Tam” manasında çevrilebilir. Bu doküman tipinin tanımlandığı dosyalarda hem Xhtml hem de Css bileşenleri rahatlıkla kullanılabilir. Transitional, doküman tipi ise “Geçişli” olarak dilimize çevrilebilir. Bu tip dokümanlar Html Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

etiketlerini tam kullanabilmek için tanımlanabilirler, modern tarayıcılar bu tarz doküman tipi tanımlanmış olan sayfalarda Css eklentilerini ve kodlarını icra etmezler. Adından da anlaşılacağı gibi bu tip geçiş tipidir. Frameset, tip ise sayfalarında “Çerçeve” kullanan tasarımcılar için oluşturulmuştur. Bu doküman tipi iki yada daha fazla frame yani çerçeveye sahip sayfalar için kullanılabilir. Örnekler: STRICT <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd”> TRANSITIONAL <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd”> FRAMESET <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/ DTD/xhtml1-frameset.dtd”>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

UYGULAMA:

ew e

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

CSS (Cascading Style Sheet) Basamaklı Stil Sayfaları veya Stil Şablonları Stil Şablonları web sayfalarındaki nesnelere ait görüntü ve konum özelliklerini tanımlayan komutlardır. Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz. Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz. CSS kodları HTML kodlarının içine yazılır. Türüne göre body veya head bölümlerinde yer alabilir. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağrılabilir.

Stil Şablonlarının Çeşitleri: Stil şablonları üç çeşittir. Bunlar: – - Yerel CSS - Genel CSS - Harici CSS Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

–

Yerel stil şablonu: Yerel stil şablonları HTML belgesinin body bölümündeki html etiketlerinde yazılır. Sadece bir kereliğine, yazıldıkları yerde etkili olur. Ör) <html> <head> <title>Css</title> </head> <body> <h2>CSS Kullanımı</h2><br> <h2 style=”font-size:20pt; color:blue”> CSS Kullanımı </h2> </body> </html>

Ör) <table width="200" border="1" style="border-collapse:collapse"> Genel stil şablonları: HTML belgesinin head bölümüne yazılır ve belgenin tümünü etkiler. Bir stil dokümanı: <style type="text/css">…..</style> ifadeleri arasına yazılır. Stil kısmı HTML dokü manının <head>…</head> aralığında tanımlanır. Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

Stil tanımlaya başlarken istenirse “” işaretleri kullanılır. Bu işaretler, CSS tanımayan tarayıcılarların bu kısmı geçmesini sağlar. <html><head> <style type=”text/css”> <!-………. --> </style> </head> Bir style sheet ifadesi, selektör ve bildirim olmak üzere 2 ana kısımdan oluşur. Selektör (selector) bir style sheet bildiriminin ilk öğesine verilen isimdir. Selektör CSS’lerde hangi etiket ile ilgili işlem yapacağımızı seçmeye yarar. H1 {color:green} Selektör (Selector)

Bildirim (Declaration)

Bildirim (decleration) kısmı da kendi içinde özellik ve değer olarak 2 temel bileşene ayrılmaktadır. H1 {color : green} Özellik (Property)

Değer (Value)

Değerler yazılırken tek ( ' ) veya çift ( “ ) tırnak Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

kullanılmaz. Ör) <html> <head> <title>Css</title> <style type="text/css"> <!-h2 { font-size:20pt; color:blue } --> </style> </head> <body> <h2>Web Tasarımı </h2> </body> </html>

Harici stil şablonları: Bu stil şablonları farklı bir sayfada yazılır ve .css uzantısı ile kaydedilir. Ardından da html dosyamızın içerisine yine <head> … </head> etiketleri arasına <link rel="stylesheet" type="text/css" href="dosya_ismi.css"> şeklinde bu dosya eklenir. Ör) Aşağıdaki kodlar not defterine yazıp stil.css olarak kaydedilir. h1 {font-size:13pt; color:green} Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

100

h2 {font-size:20pt; color:blue} h3 {font-size:15pt; color:red}

Daha sonra HTML dosyası hazırlanır. <html> <head> <title>CSS</title> <link rel="stylesheet" type="text/css" href="stil.css"> </head> </head> <body> <h1>Bu yazı Stil Şablonları ile yazıldı</h1> <h2>Bu yazı Stil Şablonları ile yazıldı</h2> <h3>Bu yazı Stil Şablonları ile yazıldı</h3> </body> </html> Stil Şablonlarında kullanılan bazı parametreler ve özellikleri aşağıda verilmiştir. font-fa mil y : Font tipini belirler. (Arial, Courier, Verdana…) font-w ei g h t : Fontun kalınlık incelik durumunu belirler. bold: Fontu kalın yapar. normal: Fontun normal halde olmasını sağlar. Bu özellik yazılmadığında normal özellik alınır. font-style: Fontun stilini belirler. italic: Yazının sağa doğru yatık olmasını Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

101

sağlar. color: Fontun rengini belirler. text-t ra nsfo r m : lowercase: Yazının tümünü küçük harf yapar. uppercase: Yazının tümünü büyük harf yapar. capitalize: Yazıyı istenilen şekilde bırakır. text-deco ration : underline: Yazının altının çizili olmasını sağlar. overline: Yazının üstünün çizili olmasını sağlar. line-through: Yazının üzerinin çizili olmasını sağlar. none: Yazının herhangi bir yerine çizgi çekilmemesini sağlar. text-alig n: left: Yazının sola bitişik olmasını sağlar. center: Yazının ortada olmasının sağlar. right: Yazının sağa bitişik olmasını sağlar. line-height: Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px gibi değerler alır. text-ident: Yazının soldan ne kadar boşlukla içeriden başlayacağını belirler. 5px, 10px gibi değerler alır.

Seçiciler (Selectors): İki çeşit seçici vardır. Bunlar: - Id seçicisi ve - Sınıf seçicisi. Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

102

Id Selectors(Id Seçicileri) : Id seçicilerini tanımlayıcı adlarının önündeki “#“ işaretinden tanırız. HTML belgesinde kendi tanımlayıcı adlarına gönderme yaparak herhangi bir HTML etiketine stil vermekte kullanılır. Ör) <html> <head> <title>Id seçicileri</title> <METAcontent=text/html;CHARSET=iso-8859-9 httpequiv=Content-Type> <style type="text/css"> <!-#bicim1 { background:teal; color:white; font-weight:bold; font-family:arial; } --> </style> </head> <body> <p id=”bicim1”>ID Seçiciler</p> </body> </html> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

103

Class Selectors (Sınıf Seçicileri): Sınıf seçicisinin iki türü vardır. Birinci türde sınıf seçicisi sadece belirli etiketler için tanımlanır ve bu etiketlerde geçerli olur. Ör) <html> <head> <title>Css</title> <style type="text/css"> <!-h2.yesil {color:green} h2.gri {color:gray} --> </style> </head> <body> <h2 class=”yesil”>YEŞİL sınıf seçicisi ile </h2> <br> <h2 class=”gri”>GRİ sınıf seçicisi ile </h2> </body> </html> İkinci türde ise hiçbir etiket ismi bildirilmeden istenilen herhangi bir isimle stiller tanımlanır. Daha sonra istenilen etiket ile birlikte kullanılabilir. <html> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

104

<head> <title>Css</title> <style type="text/css"> <!-.yesil {color:green} .gri {color:gray} --> </style> </head> <body> <h3 class=”yesil”>YEŞİL sınıf seçicisi ile </h1> <br> <h4 class=”gri”>GRİ sınıf seçicisi ile </h1> </body> </html> A Etiketinin CSS ile Kullanımı: CSS yardımıyla a etiketinin aldığı posizyonlara istediğimiz biçimi verebiliriz. Şimdi a etiketinin aldığı pozisyonları görelim: - Normal : İlk pozisyon linke herhangi bir tıklama olma - dığındadır. Bu değer linkin sayfada görülecek ilk halidir. - Visited : Link tıklandıktan sonra etiketin aldığı değerdir. - Active : Linkin aktif olduğu durumdur. Yani imleç linkin tıklandığı andaki durumdur. – Hover : Linkin üzerine gelindiğinde nasıl bir Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

105

biçimde olması isteniyorsa stil o şekilde verilir. – Ör) <html> <head> <title>Css</title> <style type="text/css"> <!.menu { background-color:white; color:blue; } .menu:visited { background-color:white; color:maroon; font-weight:normal; } .menu:active { background-color:white; color:red; font-weight:normal; } .menu:hover { background-color:blue; color:white; font-weight:bold; } --> </style> </head> Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

106

<body> <a href="#" class="menu">Ana Sayfa </a> </body> </html>

Cennet Kültür ve Sanat Merkezi - Durhan GABRALI – 2009

107