Dersin Ayrıntıları
YarıyılKoduAdıT+U+LKrediAKTSSon Güncelleme Tarihi
1BIL107Web Tasarımı Temelleri1+2+02329.07.2026
Dersin Detayları
Dersin Dili Türkçe
Dersin Düzeyi Ön Lisans
Bölümü / Programı Bilişim Güvenliği Teknolojisi
Öğrenim Türü Örgün Öğretim
Dersin Türü Zorunlu
Dersin Öğretim Şekli Yüz Yüze
Dersin Amacı Bu dersin amacı, öğrencilerin web teknolojilerinin temel prensiplerini öğrenmelerini, HTML5 ve CSS3 kullanarak standartlara uygun, kullanıcı dostu ve duyarlı (responsive) web sayfaları geliştirebilmelerini sağlamaktır. Ders kapsamında öğrencilerin temel web tasarım becerileri kazanmaları ve bir web sitesi projesi geliştirebilecek düzeye ulaşmaları hedeflenmektedir.
Dersin İçeriği Web teknolojilerine giriş, Visual Studio Code kurulumu ve kullanımı, HTML5 belge yapısı, metin biçimlendirme etiketleri, listeler, bağlantılar, görseller, tablolar, çoklu ortam etiketleri, HTML formları, semantik HTML5 etiketleri, CSS'e giriş, seçiciler, kutu modeli, konumlandırma (position), display, overflow, z-index, yazı tipleri, ikonlar, gölgelendirme, geçiş efektleri, yatay ve dikey menü tasarımı, Flexbox, CSS Grid, responsive web tasarımı, medya sorguları ve genel web sitesi geliştirme projesi.
Dersin Yöntem ve Teknikleri Anlatım, gösterip yaptırma, uygulamalı laboratuvar çalışmaları, problem çözme, proje tabanlı öğrenme ve sunum.
Ön Koşulları Yok
Dersin Koordinatörü Yok
Dersi Verenler Öğr.Gör. Afife ÇİFTCİ OLGUN afife.ciftci@ankarabilim.edu.tr
Öğr.Gör. Süleyman ÖZLÜK süleyman.özlük@ankarabilim.edu.tr
Dersin Yardımcıları Yok
Dersin Staj Durumu Yok

Ders Kaynakları
Kaynaklar Erdinç, F. Yeni Başlayanlar İçin HTML5, CSS3 ve JavaScript. DR Yayınları. https://www.dr.com.tr/Kitap/Yeni-Baslayanlar-icin-HTML5-CSS3-Javascript/Fahrettin-Erdinc/Egitim-ve-Sinav-Kitaplari/Bilgisayar-Kitaplari/Programlama/urunno=0001859709001
W3Schools. HTML ve CSS Eğitim Kaynakları. https://www.w3schools.com/
Duckett, J. HTML ve CSS: Web Siteleri Tasarlamak ve Oluşturmak.
MDN Web Docs. HTML, CSS ve Web Geliştirme Dokümantasyonu. https://developer.mozilla.org/
Ders Notları Erdinç, F. Yeni Başlayanlar İçin HTML5, CSS3 ve                      JavaScript                     . W3Schools. https://www.w3schools.com/
Dökümanlar https://www.w3schools.com/ https://developer.mozilla.org/ https://code.visualstudio.com/docs
Ödevler 2 Ödev 1 Proje
Sınavlar 1 Ara Sınav 1 Final Sınavı

Ders Yapısı
Mühendislik Bilimleri %10
Alan Bilgisi %90

Planlanan Öğrenme Aktiviteleri ve Metodları
Etkinlikler ayrıntılı olarak "Değerlendirme" ve "İş Yükü Hesaplaması" bölümlerinde verilmiştir.

Değerlendirme Ölçütleri
Yarıyıl Çalışmaları Sayısı Katkı
Ara Sınav 1 % 30
Ödev 2 % 10
Proje 1 % 20
Yarıyıl Sonu Sınavı 1 % 40
Toplam :
5
% 100

 
AKTS Hesaplama İçeriği
İş Yükü Sayısı Süre Toplam İş Yükü (Saat)
Ders Süresi 14 1 14
Sınıf Dışı Ç. Süresi 14 1 14
Ödevler 2 5 10
Ara Sınavlar 1 7 7
Uygulama 14 2 28
Proje 1 10 10
Yarıyıl Sonu Sınavı 1 7 7
Toplam İş Yükü   AKTS Kredisi : 3 90

 
Dersin Öğrenme Çıktıları: Bu dersin başarılı bir şekilde tamamlanmasıyla öğrenciler şunları yapabileceklerdir:
Sıra NoAçıklama
2 HTML5 etiketlerini kullanarak yapısal web sayfaları oluşturur.
Bilgi 
1 İnternet, web ve HTML ile ilgili temel kavramları açıklar.
Beceri 
3 CSS kurallarını kullanarak web sayfalarının görsel biçimlendirmesini gerçekleştirir.
4 Form, tablo, menü, görsel ve çoklu ortam bileşenlerini web sayfalarında kullanır.
Yetkinlik 
5 Responsive tasarım ilkelerine uygun temel düzeyde web sitesi geliştirir.

 
Ders Konuları
HaftaKonuÖn HazırlıkDökümanlar
1 Web teknolojilerine giriş, temel HTML belge yapısı Web teknolojileri ve HTML hakkında temel kavramların incelenmesi, VS Code programının bilgisayara kurulması Ders notları, VS Code kurulum dokümanı, HTML5 giriş uygulamaları
2 Metin biçimlendirme etiketleri, listeler, bağlantılar ve görseller Temel HTML belge yapısının tekrar edilmesi ve metin etiketlerinin incelenmesi Ders notları, HTML metin biçimlendirme örnekleri, liste ve bağlantı uygulamaları
3 Tablolar ve çoklu ortam etiketleri HTML tablo etiketlerinin ve temel çoklu ortam kavramlarının incelenmesi Ders notları, tablo uygulamaları, ses ve video etiketi örnekleri
4 HTML formları ve form kontrol elemanları Form kavramının, veri giriş alanlarının ve form etiketlerinin incelenmesi Ders notları, HTML form örnekleri ve form kontrol elemanları uygulamaları
5 Semantik HTML5 etiketleri ve sayfa yapısı HTML5 semantik etiketlerinin ve web sayfası bölümlerinin incelenmesi Ders notları, semantik sayfa yapısı örnekleri ve HTML5 uygulamaları
6 CSS’e giriş, CSS ekleme yöntemleri ve temel seçiciler CSS’in kullanım amacı, ekleme yöntemleri ve temel seçicilerin incelenmesi Ders notları, CSS giriş örnekleri ve seçici uygulamaları
7 Kutu modeli, genişlik, yükseklik, kenarlık, boşluk ve arka plan özellikleri CSS kutu modeli, margin, padding ve border özelliklerinin incelenmesi Ders notları, kutu modeli uygulamaları ve CSS özellik örnekleri
8 Ara Sınav İlk yedi haftanın konularının tekrar edilmesi ve örnek uygulamaların incelenmesi Ders notları, uygulama örnekleri ve sınav çalışma dokümanları
9 Display, position, z-index ve overflow özellikleri CSS yerleşim özellikleri ve temel konumlandırma yöntemlerinin incelenmesi Ders notları, konumlandırma örnekleri ve CSS yerleşim uygulamaları
10 Yazı tipleri, ikon kullanımı, gölgelendirme ve geçiş efektleri CSS yazı tipi özellikleri, ikon kütüphaneleri ve geçiş efektlerinin incelenmesi Ders notları, yazı tipi ve ikon uygulamaları, gölge ve geçiş örnekleri
11 Yatay ve dikey menü tasarımı HTML liste yapılarının ve CSS menü biçimlendirme özelliklerinin tekrar edilmesi Ders notları, yatay ve dikey menü uygulamaları
12 Flexbox ve CSS Grid kullanarak sayfa yerleşimi Flexbox ve CSS Grid temel kavramlarının ve özelliklerinin incelenmesi Ders notları, Flexbox ve CSS Grid uygulama örnekleri
13 Responsive web tasarımı ve medya sorguları Responsive tasarım kavramının, ekran boyutlarının ve medya sorgularının incelenmesi Ders notları, responsive tasarım ve medya sorgusu örnekleri
14 Genel web sitesi uygulaması ve proje çalışması Proje konusu ve sayfa yapısının belirlenmesi, gerekli içerik ve görsellerin hazırlanması Proje yönergesi, örnek web sitesi dosyaları ve ders notları
15 Genel web sitesi uygulaması ve proje çalışması Projenin eksik bölümlerinin tamamlanması, tasarım ve kod kontrollerinin yapılması Proje kontrol listesi, örnek kodlar ve ders notları
16 Final Sınavı Dönem boyunca işlenen konuların tekrar edilmesi ve uygulamaların gözden geçirilmesi Ders notları, uygulama örnekleri ve sınav çalışma dokümanları
17 Final Sınavı Dönem konularının genel tekrarının yapılması Ders notları ve sınav dokümanları

 
Dersin Program Çıktılarına Katkısı
P1 P2 P3 P4 P5 P6 P7 P8 P9 P10 P11 P12 P13 P14 P15 P16
Ö2 4 5 2
Bi1 5 2 2
Be3 4 5 3
Be4 4 5 3
Ye5 5 5 4

  Katkı Düzeyi: 1: Çok Düşük 2: Düşük 3: Orta 4: Yüksek 5: Çok Yüksek