HTML5 ve CSS3 Görüntülü Eğitim Seti

HTML5 ve CSS3 Görüntülü Eğitim Seti (22 Saat Özel Anlatım)

 

Yaklaşık olarak 1000 Sayfalık eğitime denk gelmektedir.

Dinamik web sitesi hazırlamak için ihtiyacınız olan iki program

Web programlamaya başlamak istiyorsanız veya web programlanızı geliştirmek istiyorsanız bu ayrılmaz ikiliyi öğrenmek zorundasınız.

 

HTML5, web sayfalarını tanımlayan kod olan Hypertext Markup Language'in en son sürümüdür.HTML5, tarayıcı eklentileri gibi ek yazılımlar gerektirmeden çevrimiçi yapmak istediğiniz hemen hemen her şeyi sunmak için tasarlanmıştır.

 

HTML, web sitesi oluşturmak için kullanılır. Ancak tam olarak yanıt veren bileşenlere gelince, sınırlamalar yaşar. Bu nedenle, HTML yalnızca metin öğeleri eklemek ve bunları bir sayfa içinde yapılandırmak için kullanılmalıdır. Daha karmaşık özellikler için HTML, basamaklı stil sayfaları (CSS) kullanılır. CSS adeta HTML’nin tamamlayacısıdır.

 

CSS3, CSS'in daha önceki sürümleri üzerine geliştirilmiş üçüncü sürümüdür. CSS (Cascading Style Sheets) ise, web sitelerimize görsel güzellik katmamızı sağlayan, HTML'e ek olarak metin ve format biçimlendirmemize olanak sağlayan bir web teknolojisidir.

 

 

HTML5 ve CSS3 Görüntülü Eğitim Seti (22 Saat Özel Anlatım) İçeriği

 

HTML5 Görüntülü Eğitim İçeriği:

 

1) HTML Giriş

a) HTML Genel Bakış

b) Programın Tasarlanması

c) Arayüz Tasarımında Dikkat Edilmesi Gereken Noktalar

d) Tarayıcı Uyumu

e) HTML5 ve SEO (Arama Motoru Optimizasyonu)

f) Web Projesi Geliştirme Süreçleri

g) Editör ve Araçlar

 

2) HTML5 Yenilikleri

a) Yeni Etiketler

b) Yeni Element Nitelikleri

c) Tam CSS3 Desteği

d) Video ve Ses Desteği

e) 2 ve 3 Boyutlu Resim Desteği

f) Yerel Saklama (Local Storage) Özelliği

g) Web Uygulamaları Desteği

 

3) Kutu ve Satır Seviyesi Elementler (HTML Elementlerinin Varsayılandaki Karakteristik Özellikleri)

a) Block-Level (Kutu Seviyesi Elementler)

b) Inline-Level (Satır Seviyesi Elementler)

 

4) Genel Element Nitelikleri (Global Attributes)

a) title

b) style

c) id

d) class

5) Temel Döküman Yapısı Elementleri

 

 

CSS3 Görüntülü Eğitim İçeriği:

 

1) Başlarken<--?XML:NAMESPACE PREFIX = O /-->

a) Görünüm ve Performans Avantajı

b) Tasarım Kolaylığı

c) Kolay Güncellenebilir

d) Tarayıcı Uyumu Dezavantajı

 

2) CSS Ana Yapısı

a) Seçiciler ve Bildirim Bloku

 

3) Genel CSS Seçicileri

a) Genel Seçici

b) Element Seçici

c) ID Seçicisi

d) Class Seçicisi

e) Torun Seçicisi

f) Çocuk Seçicisi

g) Bitişik Kardeş Seçicisi

h) Genel Kardeş Seçicisi

 

4) Nitelik Seçicileri (Attributes Selectors)

a) Basit Nitelik Seçicisi

b) Nitelik Değeri Seçicisi

c) Kısmî Nitelik Değeri Seçicisi

d) Dikkatedeğer Nitelik Değeri Seçicisi

e) Belirlenen Söz Dizimi ile Başlayan Nitelik Değeri Seçicisi

f) Belirlenen Söz Dizimi ile Biten Nitelik Değeri Seçicisi

g) İçinde Belirlenen Söz Dizimi Geçen Nitelik Değeri Seçicisi

 

5) Yapısal Sözde Sınıf Seçicileri

a) İlk Çocuk Element Seçicisi

b) Son Çocuk Element Seçicisi

c) İndeksi Baştan Başlayan Çocuk Elementi Seçmek

d) İndeksi Sondan Başlayan Çocuk Elementi Seçmek

e) İndeksi Baştan Başlayan Aynı Türdeki Elementi Seçmek

f) İndeksi Sondan Başlayan Aynı Türdeki Elementi Seçmek

g) Aynı Türdeki İlk Elementi Seçmek

h) Aynı Türdeki Son Elementi Seçmek

i) Tek Çocuk olan Aynı Tür Elementi Seçmek

j) Tek Çocuk olan Elementi Seçmek

k) İçi boş olan Elementleri Seçmek (:empty)

l) target Sözde Sınıf Seçicisi

m) not Sözde Sınıf Seçicisi

n) enabled Sözde Sınıf Seçicisi

o) disabled Sözde Sınıf Seçicisi

p) checked Sözde Sınıf Seçicisi

q) selection (Seçili Metin) Sözde Sınıf Seçicisi

 

6) Sözde Sınıflar (Pseudo Classes) ve Sözde Elementler (Pseudo Elements)

a) active Sözde Sınıfı

b) hover Sözde Sınıfı

c) first-letter Sözde Elementi

d) first-line Sözde Elementi

 

7) CSS ile Konumlandırma (Positioning)

a) Float

b) Clear

c) Position

d) Z Ekseninde Konumlandırma

 

8) CSS Kutu Modeli (Box Model)

a) Block-Level ve Inline-Level Geçişi

b) Genişlik ve Yükseklik Değerleri

c) Elementin Diğer Elementlere olan Uzaklığı (margin)

d) Çerçeve Özellikleri (border)

e) İçeriğin Kenarlara olan Uzaklığı (padding)

f) Box-Sizing (Kutu Boyutu Hesaplama Özelliklerinin Değiştirilmesi)

g) Kutu Boyutu Hesaplama

 

9) Arkaplan Özellikleri (Background)

a) Arkaplan Rengi Tanımlama

b) Arkaplan Resmi Tanımlama

c) Arkaplanın Tekrarlama Ayarı

d) Arkaplan Konumunu Belirleme

e) Arkaplan Resmini Sabitleme

 

10) Font (Yazıtipi) Özellikleri

a) Yazıtipi Rengini Belirleme

b) Yazıtipi Ailesini (font-family) Belirleme

c) Yazıtipi Büyüklüğünü Belirleme

d) Yazıtipi Kalınlığını Belirleme

e) Yazıtipi Stilini Belirleme

f) Yazının Küçük-Büyük Harf ayarları

 

11) Metin (Text) Özellikleri

a) Metnin sola olan uzaklığını ayarlamak

b) Metni Hizalamak

c) Dikeyde Hizalama

d) Satır Yüksekliğini ayarlamak

e) Kelimeler arası boşluk değerini ayarlama

f) Harfler arası boşluk değerini ayarlama

g) Metin Dönüşümü (text-transform)

h) Metin Stilleri

i) Metinlere Gölge vermek (text-shadow)

 

12) @font-face kullanımı

13) Kutulara Gölge Vermek (box-shadow)

a) box-shadow ile kutuların dışına gölge vermek

b) box-shadow ile kutuların içine gölge vermek

c) box-shadow tarayıcı uyumu

 

14) Transform (Dönüştürme) İşlemleri

a) Tarayıcı Uyumu

b) Elementleri bir noktadan başka bir noktaya taşıma

c) Elementleri yeniden ölçeklendirme

d) Elementleri döndürme

e) Elementleri Eğip-Bükme

f) Transform işleminin Merkez Noktasını belirleme

 

15) Transition (Geçiş) İşlemleri

a) Elementlere Geçiş Efekti vermek

b) Geçiş Efektlerinin ne kadar süreceğini belirlemek

c) Geçiş Efektinin sayfa yüklendikten ne kadar sonra başlayacağını belirlemek

d) Kişisel Geçiş Efektleri

 

16) Animasyon Yapımı

a) Giriş

b) Tarayıcı Uyumu Konusu

c) CSS3ün Animasyonlarda Flashın yerini alması

d) Animasyon Tanımlama (@keyframes)

e) Elementlerde animasyon kullanma (animation)

f) Animasyon adını belirleme

g) Animasyonun ne kadar süreceğinin belirlenmesi

h) Animasyonlara Geçiş Efekti vermek

i) Animasyonların sayfa yüklendikten ne kadar sonra başlayacağının belirlenmesi

j) Animasyonun tekrar sayısının belirlenmesi

k) Animasyonun yönünü belirlemek

l) Animasyonun başlangıçtaki oynatma ayarlarını yapmak

 

17) Adım Adım Statik Web Sitesi Yapımı