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.

... konulu sunumlar: "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."— Sunum transkripti:

1 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

2 Web Teknolojileri ve Programla Bölüm I: HTML, XML, JavaScript, CSS,... Bölüm II: PHP ve MySql Bölüm III: ASP.Net ve/veya C#

3 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

4 Web Teknolojileri ve Programla Kursun web sayfası www.ceng.metu.edu.tr/~erman/ Kursun e-mail grubu odtusemwebprogramlama@googlegroups.com

5 Örnek

6 Çok kullanılan HTML etiketleri- META Meta öğesi etiketleri arasında yer alır. Arama motorlarının site içerisinde neler bulunduğuna dair bilgi edinmesi için koyulur. Örnek: Türkçe karakter sorununuda yine meta öğesi ile çözülür Örnek: Sayfa yönlendirme, meta öğesi ile yapılabilir. Örnek:

7 Çok kullanılan HTML etiketleri- Marquee Kayan yazı Örnek: ODTU- SEM ODTU

8 Çok kullanılan HTML etiketleri- Ses Ses eklemek

9 Ç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. 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

10 Form-Devam : 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 : Forma yazı yazılabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır Örnek:

11 Form-Devam : Seçim listesi oluşturmakta kullanılır. etiketi ile liste öğeleri belirtilir. Windows 9x Windows NT Linux UNIX MacOS

12 Örnek İş İlanları

13

14

15 CSS- Niçin? Daha çok yetenek: HTML etiketlerini istediğimiz gibi değiştirebilme özelliği Daha az emek ve zaman: CSS 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

16 CSS CSS- 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ı

17 CSS Satır İçi Stiller Tek bir etikete uygulanacağı zaman kullanılır. Örnek : Bu CSS ile değişmiş bir paragraf.

18 CSS Dahili Stiller Sadece bir HTML dökümanı içerisinde stil uygulanacaksa bu yöntem kullanılabilir. Örnek : body {background-color: yellow} p {margin-left: 40px}

19 CSS 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 etiketi ile bağlanmalıdır. etiketi.. içerisinde tanımlanmalıdır.. Örnek :

20 CSS- Örnekler Link List Katman Font Metin İmleç Background Tablo Scroll bar