İsmet Aktar And. Tek. Lisesi Bilişim Teknolojileri Alanı Web Programcılığı Dalı HTML, XHTML, CSS 2011 1
HTML 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. Web sayfalarının temeli HTML dosyalarıdır. ( HTML Documents = Web Pages ) 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. HTML Online Kaynaklar: http://www.w3.org http://www.w3schools.com 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 tag (etiket) adını alır. 2
...Kullanım biçimi: < etiket adı > Ör) <html>, <body>, <title> Bir etiket <etiket adı> şeklinde başlar ve bazı etiketler dışında </etiket adı> ş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>... 3
</FORM> </BODY> </HTML> 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_adı parametre_adı ="değer"> Örnek: <body bgcolor="blue"> WEB sayfasında standart olarak bulunması gere ken kodlar şunlardır. Bunlar sayfada mutlaka vardır. Bu kodlarla; tarayıcı ilgili dosyanın 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> 4
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: 5
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 6
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ştirile 7
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=" 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"> 8
<meta name="robots" content="index,nofollow"> <meta name="robots" content="noindex,nofollow"> gibi kullanımları mevcuttur. <META http-equiv="pragma" content="no-cache"> <META HTTP-EQUIV="cache-control" CONTENT="nocache"> 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 : 9
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> 10
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/ 11
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 12
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. 13
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ık Tag'leri (Headers): (<hx>... </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> 14
<h2> Bu yazı h2 ile yazılmıştır </h2> <h3> Bu yazı h3 ile yazılmıştır </h3> <h4> Bu yazı h4 ile yazılmıştır </h4> <h5> Bu yazı h5 ile yazılmıştır </h5> <h6> Bu yazı h6 ile yazılmıştır </h6> </body> </html> Paragraf Tag'i: (<p>... </p>) Arasındaki yazıyı ekranda bir paragraf gibi gösterir. Üstünde ve altında birer satır boşluk oluşur. <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> Not:Satır atlamak için ayrıca tekil <br> etiketi kullanılabilir. 15
Yazıyı düzenleme etiketleri: HTML iki ayrı biçimlendirme etiketi türü sağlar. İçerik tabanlı ve fiziksel etiketler. İçerik tabanlı biçimlendirme etiketleri; bir metin parçasına, zamanı geldiğinde metnin görüntülenme şeklini de etkileyecek biçimde anlam ya da bağlam eklemek için kullanılır. Diğer yandan fiziksel metin düzenleme etiketleri metin üzerinde bir anlam sağlamazlar ve doğrudan metnin görünümü ile ilgilenirler. => Fiziksel Metin Biçimlendirme Tag'leri: <b> Bu yazı kalın yazılır </b> <u> Bu yazı altı çizgili yazılır </u> <i> Bu yazı eğik yazılır </i> <s> Bu yazının üzeri çizili olur </s> -------------------------------------------------------------<big> Normalinden daha büyük yazı </big> <small> Normalinden daha küçük yazı </small> <blink> Yanıp sönen yazı </blink> <sub> Alt simge metni </sub> <sup> Üst simge metni </sup> <tt> Metin için tek boşluklu (tüm karakterler aynı genişlikte) yazı-tipini uygular </tt> 16
Not: <Small> ve <Big> etiketlerinin üst-üste kullanılması yaptıkları etkiyi artırır. <blink> etiketi tüm tarayıcılar tarafından desteklenmez. => İçerik Tabanlı Metin Biçimlendirme Tag'leri: <em> Metne vurgu ekler </em> Bu yazı eğik yazılır <strong> Metne güçlü vurgu ekler </strong> Bu yazı kalın yazılır <cite> Kaynak alıntı tanımlamak için kullanılır </cite> Bu yazı eğik yazılır 17
<code> Tek boşluklu yazı tipi tanımlar </code> Bu yazı tek-boşluklu yazı tipi ile yazılır 18
Ç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 > 19
<i> 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> 20
<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> 21
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 22
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 23
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. 24
Ö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.   (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. 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. 25
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. 26
<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 27
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> 28
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> 29
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 30
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 31
</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 ( ) 32
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. 33
</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"> 34
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> 35
</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. 36
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> 37
<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) 38
Ö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> 39
<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> 40
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> 41
<td>   </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> 42
<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. 43
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) 44
<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> 45
<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> 46
</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. -------------------------------------------------------------------- 47
-------------------------------------------------------------------- -------------------------------------------------------------------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... 48
Ö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> 49
<td rowspan= 2 width= 25 height= 50 > 6 </td> </tr> <tr> <td width= 25 height= 25 > 7 </td> </tr> </table> Ör) <table border= 1 > <!-- Burası birinci satır --> <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> 50
<!-- Burası ikinci satır --> <tr align= center > <td width= 75 height= 25 > 5 </td> </tr> <!-- Burası üçüncü satır --> <tr align= center > <td colspan= 3 width= 225 height= 25 > 6 </td> </tr> <!-- Burası dördüncü satır --> <tr align= center > <td colspan= 3 width= 225 height= 25 > 7 </td> </tr> </table> 51
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. 52
Ç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, * > 53
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. 54
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> 55
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 > 56
<frame name= sag src= sayfa2.html marginheight= 50 marginwidth= 20 scrolling= no > </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. 57
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> 58
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> 59
</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> 60
</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> 61
<a href= iletisim.html target= orta style= text-decoration:none > İLETİŞİM </a> </body> </html> <iframe>... </iframe>: Normal bir sayfa içerisine çerçeve eklemek için kullanılır. Çerçevenin büyüklüğünü belirlemek için width ve height parametreleri kullanılır. Ör) <html> <head> <title> İçerisinde çerçeve olan sayfa </title> </head> <body bgcolor= fedcba > Bu sayfaya bir Frame eklenmiştir... <br><br> <iframe name= cerceve src= havadurumu.html width= 400 height= 400 scrolling= no > </iframe> </body> </html> 62
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: 63
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> 64
Ö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> 65
</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> 66
Ç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. 67
- 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"> 68
</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> 69
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: 70
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. 71
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> 72
<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ğerlendirici 73
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 > 74
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" > 75
</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> 76
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 77
</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 78
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>istek ve Şikayetleriniz </h2></u></p> <textarea name="alan" cols="50" rows="10"> 79
</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>istanbul </option> <option>izmir </option> <option>erzincan </option> </select> </label> 80
</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> 81
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"> 82
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="sil"> </form> Uygulama) <html> <head> <title>örnek</title> <meta http-equiv="content-type" content="text/html; charset=windows-1254" > 83
</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"> 84
<br> </form> <hr> </body> </html> Formun action parametresine ne yazılabilir: a) <form action="mailto:abc@hotmail.com" method= post > 85