12.05.2010 Dersi Özeti Kursun içeriğini özeti Alt başlıkları Proje Kurs esnasında kullanmayı planladığımı editörler HTMLe giriş Temel etiketler Notepad+ da örnekler Web Teknolojileri ve Programla Bölüm I: HTML, XML, JavaScript,,... Bölüm II: PHP ve MySql Bölüm III: ASP.Net ve/veya C# Editörler Üç temel editör kullanılması planmakta: Notepad++ Adobe Dreamweaver CS4 Microsoft Express Edition (2008-2010) Microsoft Visual C# Express Edition Microsoft Visual Web Developer Express Web Teknolojileri ve Programla Kursun web sayfası www.ceng.metu.edu.tr/~erman/ Kursun e-mail grubu odtusemwebprogramlama@googlegroups.com 1
Örnek Çok kullanılan HTML etiketleri-meta Meta öğesi <HEAD> </HEAD> etiketleri arasında yer alır. Arama motorlarının site içerisinde neler bulunduğuna dair bilgi edinmesi için koyulur. <meta name="keywords" content="html, ders, online, SEM"> Türkçe karakter sorununuda yine meta öğesi ile çözülür <meta http-equiv= Content-Type content=text/html;charset=iso- 8859-9> <meta http-equiv="content-type" content="text/html; charset=utf- 8" /> Sayfa yönlendirme, meta öğesi ile yapılabilir. <meta http-equiv= refresh content= 5; url=http://www.metu.edu.tr > Çok kullanılan HTML etiketleri- Marquee Kayan yazı <marquee> </marquee> <marquee direction="down" height="100px" width="100px" onmouseover="stop()" onmouseout="start()"> ODTU- SEM <br> ODTU </marquee> Çok kullanılan HTML etiketleri- Ses Ses eklemek <bgsound src="ses dosyasının yoluyla beraber adı" loop="kaç kez çalıştırılacağı"> <bgsound src="piano.mp3"> 2
Çok kullanılan HTML etiketleri- Form Kullanıcıdan veri girilmesini sağlar.. Artık formlarla birlikte dinamik web tasarımına ilk adımı atmış oluyoruz. <form> </form> <form action= "test.php " method= POST > action = "dosya ismi : Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolu. method = "yöntem : Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemi Form-Devam <input> : Genel amaçlı bir form etiketidir. Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlar. Type: text, password, checkbox, radio, button, submit, reset <textarea> </textarea>: Forma yazı yazılabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır <textarea name="mesaj" cols=50 rows=10> </textarea> Form-Devam <select> </select> : Seçim listesi oluşturmakta kullanılır. <option> etiketi ile liste öğeleri belirtilir. <select name= isletimsistemi"> <option value="win">windows 9x</option> <option value="winnt">windows NT</option> <option value="linux">linux</option> <option value="unix">unix</option> <option value="macos">macos</option> </select> 3
- Niçin? Daha çok yetenek: HTML etiketlerini istediğimiz gibi değiştirebilme özelliği Daha az emek ve zaman: ile sadece sayfa içinde değil tüm sitedeki etiketler tek bir komut kullanılarak biçilendirilebilir Daha az boyut: Etiketleri her defasında ayrı ayrı şekillendirmekten bizi kurtardığı için sayfanın boyutunun azalmasına da yardımcı olur - Cascading Style Sheets: Stil şablonları HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir Satır İçi Stiller Dahili Stil Dosyası Harici Stil Dosyası 4
Satır İçi Stiller Tek bir etikete uygulanacağı zaman kullanılır. <p style="color: red; margin-left: 40px"> Bu ile değişmiş bir paragraf. </p> Dahili Stiller Sadece bir HTML dökümanı içerisinde stil uygulanacaksa bu yöntem kullanılabilir. <head> <style type="text/css"> body {background-color: yellow} p {margin-left: 40px} </style> </head> Harici Stiller Harici bir stil dosyası.css dosyası ile içerisinde değişiklik yaparak tüm sitenin görünümünü değiştirebilirsiniz. Her sayfa stil dosyasına <link> etiketi ile bağlanmalıdır. <link> etiketi <head>..</head> içerisinde tanımlanmalıdır.. <head> <link rel="stylesheet" type="text/css href= stildosyam.css"> </head> - Örnekler Link List Katman Font Metin İmleç Background Tablo Scroll bar 5