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