web programlama kursu - middle east technical universityerman/web/26mayis2012/... · 2012. 1....
TRANSCRIPT
-
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
Web Programlama Kursu
-
E-ticaret siteleri CD-DVD Satış ve Paylaşım Sitesi
Grafik ve Web Tasarım Çalışmaları Satış Sistemi
Eğitim içerikli siteler Öğrenci Bilgi Sistemi
KPDS Sınav ve Çalışma Sistemi
Turizm içerikli siteler Turist Rehber
Portallar Araba Portalı
Kitap Portalı
Örnek Projeler
-
CD-DVD Satış ve Paylaşım Sitesi
-
Grafik ve Web Tasarım Çalışmaları Satış
Sistemi
-
Öğrenci Bilgi Sistemi
-
TURİZM REHBERİ
-
Emlak Portalı
-
Montaj & Servis Takip Sistemi
-
Web Teknolojileri
Bölüm I:
HTML, DHTML, JavaScript, CSS
Bölüm II:
PHP ve MySql
-
Editörler
iki temel editör kullanılması planmakta:
Notepad++
http://notepad-plus-plus.org/
Adobe Dreamweaver CS4 veya CS5
http://www.adobe.com/products/dreamweaver.html
-
Editörler Notepad++
Notepad++, notepad yazılımına alternatif olan, çok gelişmiş bir metin editörüdür. Onlarca programlama dilini tanır ve renklendirme desteği verir. Özellikler:
Dil tanıma ve renklendirme
WYSIWYG editörü
Kullanıcı tanımlamalı dil renklendirme
Otomatik tag tamamlama
Çoklu döküman açma ve görüntüleme
Arama&Değiştirme desteği
Sürükle&Bırak desteği
Desteklediği Diller:C, C++, Java, C#, XML, HTML, PHP, CSS, makefile, ASCII art (.nfo), doxygen, ini file, batch file, Javascript, ASP, VB/VBS, SQL, Objective-C, RC resource file, Pascal, Perl, Python, Lua, TeX, TCL, Assembler
Türkçe
3.18 MB
Freeware/Ücretsiz
-
Notepad++
-
Editörler Adobe Dreamweaver CS4-5
Adobe® Dreamweaver® CS4-5 yazılımı, tasarımcı ve geliştiricilere standartları temel alan web sitelerini güvenle oluşturma gücü verir.
Özellikler: Sitenizi görsel olarak tasarlayın- Programlama tabanlı sayfalar
Tarayıcılar arasında uyumluluğu sağlayın
FLV video entegre edin
ADOBE http://www.adobe.com/products/dreamweaver/
İngilizce (dil desteği)
Shareware/Deneme
-
Editörler Adobe Dreamweaver CS4
-
Kurs ne zaman olacak?
Salı 18.15-21.15
Perşembe 18.15-21.15
-
Web Sayfalarını Yayınlamak?
Sadece kendi bilgisayarımızda kalabilir yada,
Web sayfanızı yayınlamak için sayfanızı bir web sunucuya kopyalamalısınız.
Alan adı almak (Domain name) Örnek: www.namecheap.com
Hosting alınan DNS’e ayarları yaparak yönlendirmek yeterli
Alan kiralamak (Hosting) Web Hosting (Ücretli)
500 MB Web Alanı
5 GB Trafik
1 Alan Adı Barındırma
15 E-Posta
http://www.turkiyewebalani.com
http://www.turkwebhosting.com
http://www.sadecehosting.com
• FTP Adresi
• Kullanıcı Adı
• Paralo
http://www.namecheap.com/http://www.turkiyewebalani.com/
-
HTML
HTML'in açılımı Hyper Text Markup Language
Bir HTML dosyasının uzantısı htm veya html olmak zorundadır.
Bir HTML kodu tag(işaretlenmiş etiketler)’lardan oluşmaktadır
HTML dosyalarınızı kolay bir şekilde FrontPage veya Dreamweaver ile de hazırlayabilirsiniz.
HTML çalışmak istiyorsanız not defteri (notepad) başlamayı tavsiye ediyorum
İlk örnek
-
HTML
ilk örnek
Sayfa Başlığı
Bu benim ilk sayfam
Bu metin koyu
• HTML programlama dili değil, işaretleme dilidir
• HTML etiketleri 2 karakter ile sınırlanır. < ve >
• HTML etiketleri çift olarak kullanılır.
Örn: Bu metin koyu fonttadır.
• HTML etiketleri büyük/küçük harfe duyarlı değildir
-
HTML
ilk örnek
• Başlıklar ve dahil olmak üzere aradaki tüm
rakamlar kullanılarak tanımlanabilir
• Örnek: Bu bir başlık
• Paragraflar
etiketi ile belirtilir.
• Örnek:
Bu bir paragraf
• Satır atlamak için
etiketi kullanılır.• HTML içinde açıklama (yorum) satırları yaratmak
• Örnek:
-
HTML
ilk örnek - Parametreler
• Parametreler, HTML öğelerine, ek özellikler eklenmesini
sağlar.
• Parametreler daima başlangıç etiketi içerisinde belirtilir.
• Örnek 1: metinin ortalanacağını da belirtir.• Örnek 2: arkaplan renginin sarı olacağını
belirtir.
-
HTML
ilk örnek – özel karakterler
• HTML içinde bazı karakterler ("
-
HTML
ilk örnek – link ve çerçeve
• Link vermek
• Örnek 1:
-
HTML
ilk örnek – tablo
• Tablo oluşturmak
• Örnek 1:
Başlık
Başka Başlık
Satır 1, Hücre 1
Satır 1, Hücre 2
Satır 2, Hücre 1
Satır 2, Hücre 2
-
HTML
ilk örnek – liste
• Liste oluşturmak
• Örnek 1- Sırasız:
Hakkımda
Spor
• Örnek 2- Sırasız:
Hakkımda
Spor
• Arka Plan
-
HTML
ilk örnek – Form
• Örnek -1
Adınız:
Soyadınız:
• Örnek-2
Erkek
Kadın
• Örnek-3
-
HTML
ilk örnek – Başlık
- Head öğesi genel bilgiler ve ayrıca meta-bilgilerini içerir.
- HTML standartlarına göre sadece bir kaç etiket head etiketi içerisinde
kullanılabilir, Bunlar: , , , , ve .
• Örnek -1 Başlık
Sayfa başlığı
Temel URL hedef çerçevelerini belirlemek için kullanılır.
Kaynak dosyası belirtilir
META bilgileri girilir.
-
HTML
ilk örnek – Meta
- Meta öğesi daha çok arama motorlarının site içerisinde neler bulunduğuna
dair bilgi edinmesi için koyulur. Arama motorlarının sitenizi ziyaret ettiğinde
Meta keywords içine bakar ve ona göre sitenizi kendi veritabanında
indeksler.
• Örnek