Web Teknolojileri ve Programla

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "Web Teknolojileri ve Programla"

Gül Soner Bilgin
5 yıl önce
İzleme sayısı:

1 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 ( ) Microsoft Visual C# Express Edition Microsoft Visual Web Developer Express Web Teknolojileri ve Programla Kursun web sayfası Kursun grubu 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.

2 Ö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 > <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= > Ç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.

3 Ç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

sitedeki etiketler tek bir komut kullanılarak biçilendirilebilir Daha az boyut: Etiketleri her defasında ayrı ayrı şekillendirmekten bizi

4 - 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

5 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

Benzer belgeler

Web Programlama Kursu

Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz? Örnek siteler Örnek Projeler