Çarşamba , 17 Nisan 2024

Web Tasarım Ders Notları


Web Tasarımı ve Programlama Dersi için Megep modüllerinin sadeleştirilmiş ve hafta hafta paylaşılan web tasarım ders notlarını yazımızın devamında bulabilirsiniz. 1. nolu ders notumuzun altında, indirilebilir durumda pdf formatında ders notları yer almaktadır.

İnternet

İnternet, dünya üzerindeki birçok bilgisayar sistemini TCP/IP (Transmission Control Protocol/Internet Protocol) protokolü ile birbirine bağlayan ve her geçen gün daha fazla büyüyen bir iletişim ağıdır.

IP (Internet Protocol) Numarası

IP (Internet Protocol), bilgisayarların birbirleri ile iletişim kurmalarını sağlayan standart bir protokoldür. İnternet Protokol adresi, TCP/IP standartını kullanan bir ağda bulunan cihazların birbirleriyle iletişim kurmak ve veri alışverişinde bulunmak için kullandıkları benzeri olmayan bir numaradır.
IP numaraları A.B.C.D şeklinde bir yapıdır. Buradaki A,B,C,D ye karşılık 0-255 arası bir sayı gelmektedir. Örneğin 212.200.83.75 bir IP numarasıdır.

Alan Adı (Domain)

Domainler; IP adresi diye tabir edilen, bilgisayarların birbirini görmesini sağlayan nümerik sisteminin daha kolaylaştırılmış ve rahatça girilebilmesi için kelimelerle ifade edilen halidir.
Internet adreslerinde 4 temel bölüm yer almaktadır.
www.alanismi.alanturu.ulkekodu
Örneğin;
www.meb.gov.tr internet adresinde “gov” web sitesinin bir hükümet kurumuna ait olduğunu tr ise alanın Türkiye’ye ait olduğunu belirtmektedir.
İnternet adreslerinde kullanılan alan türlerine ait bazı kısaltmalar aşağıdaki gibidir:
gov: Hükümet kurumları (government)
edu: Eğitim kurumları (education)
org: Ticari olmayan kuruluşlar (organization)
com: Ticari kuruluşlar (company)
mil: Askeri kurumlar (military)
net: Servis sunucular (network)
ac: Akademik kuruluşlar (academic)
int: Uluslararası kuruluşlar (international)
Bunun yanında kullanılan ülke kısaltmaları da vardır. Bunlardan bazıları; tr: Türkiye, br: Brezilya, uk: İngiltere, fi: Finlandiya, ru: Rusya gibi

Hosting (Barundırma)

Hosting’in kelime anlamı “Ev sahipliği yapmak , barındırmak” tır. Hosting, hazırlanan web sitelerinin belirlenen alan isimlerine göre internet ortamında yayımlanmasını sağlayan hizmet türüdür. Bu hizmet, hosting firmaları tarafından belirli süreliğine sağlanır. Server (sunucu) bilgisayarlar, hosting amacıyla kullanılan gelişmiş donanımsal özelliklere sahip olan ve birçok kullanıcıya aynı anda hizmet veren bilgisayarlardır.
Sayfa Hazırlarken Dikkat Edilecek Noktalar
Herhangi bir Web sayfası hazırlanırken, sitenin hitap edeceği kitle, içeriği ve amacı gibi konulara dikkat edilmesi gerekmektedir.
Dikkat edilmesi gereken bir diğer husus da Web sayfalarının hızlı yükleniyor olması gerektiğidir.
Bazı durumlarda hazırlanan Web sayfası farklı kullanıcı ekranlarında farklı görünebilmektedir. Bu durum, tarayıcı yazılımından (sürüm vb.) veya kullanıcı tercihlerinden (yazı boyutu, ekran çözünürlüğü vb.) kaynaklanıyor olabilir. Tarayıcı penceresi, kullanılan ekran boyutu ile sınırlı olmak üzere istenilen boyuta değiştirebilir. Tasarımcının, hangi ekran çözünürlüğüne göre tasarım yapılacağına karar verilmesi gerekir.
Bir web sayfası hazırlarken, sayfa adı, sayfada yer alacak resim, müzik, animasyon gibi herhangi bir dosyanın ismi kaydedilirken Türkçe ve özel karakterler(ç,ş,ı,ö,ü,ğ,?,/,vs.) içermemelidir.

HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ

Html komutları etiketlerden (tag) oluşur. Html komutları yazılırken aşağıdaki kurallara dikkat edilmesi gerekir; Html komutları “<” ve “>” işaretleri arasına yazılır. Burada yer alan“< >” etiketleme yapmak için kullanılan işarettir. <etiketadi>……</etiketadi>, <tag>…..</tag> Html etiketleri yazılırken Türkçe karakterler kullanılmamalıdır.(ş, ç, ö, ü, ı, ğ) Html komutları büyük küçük harf duyarlı değildir. Başka bir deyişle tümü büyük harflerle açılmış olan bir etiket tümü küçük harflerle yazılan aynı etiket ile kapatılabilir.<body>….</BODY> veya <Html>….</html> Açılan bir etiket kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında “/” işareti unutulmamalıdır.
Örnek :
HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır.
Kaydetme işlemi sırasında Dosya-Kaydet seçeneğine tıklanır.

<HTML>
<html> etiketi, html kodlarının yazımına başladığımızı gösteren etikettir. Tüm html kodları <html>…</html> arasında yer alır. </html> ile html kodlarının yazımının bittiği anlaşılır. Bu etiketin hiçbir parametresi yoktur.

<HEAD>
Hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta etiketleri bölümdür.
<meta name=”author” content=”özgü”> <meta name=”description” content=”sayfanın tanımını yazınız”> <meta name =”description” content =”Bu sayfa web tasarımı dersi modülleri için hazırlanmıştır. “> <meta name=”keywords” content=”siteniz arama motorlarında hangi anahtar kelimelerle tanımlansın istiyorsanız buraya yazınız.”>
Şekillerinde yazılır. <meta http-equiv=Content-Type content=”text/htm; charset=utf-8″>
Bu etiketler Türkçe karakter sorununu ortadan kaldırmak ve Türkçe karakter desteği sağlamak için kullanılır.

<BODY>
Html belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir. Body etiketi ile birlikte kullanılabilecek parametreler ve görevleri aşağıda gösterilmiştir.
Bgcolor: Hazırlamış olduğunuz web sayfasının arka plân rengini belirlemek için kullanılır.
Kullanımı;
<body bgcolor=”blue”>…</body>
Background: Hazırlamış olduğunuz web sayfasının zemininin bir resimden oluşmasını isteyebilirsiniz. Bu parametre arka plânda kullanılmak istenilen resmi belirlemek için kullanılır.
Kullanımı;
<body background=”resim.jpg”>….</body>

<TITLE>
Sayfanın tarayıcıdaki başlığının ne olacağını belirlemek için kullanılır. Title etiketleri <Head>….</Head> etiketleri arasında yer alır.
Kullanımı;
<title> görüntülenmesini istediğiniz başlık</title>

DERS NOTLARI DOWNLOAD LİNKLERİ

Web Tasarım -1 Hafta Ders Notları

Web Tasarım -2 Hafta Ders Notları

Web Tasarım -3 Hafta Ders Notları

Web Tasarım -4 Hafta Ders Notları

Web Tasarım -5 Hafta Ders Notları

Web Tasarım -6 Hafta Ders Notları

Bu Konuda İlginizi Çekebilir

Tablo Site Ödevi (Akhisar Bilgisayar)

Akhisar Bilgisayar başlıklı, tablolar ile hazırlayacağımız sitenin ekran görüntüsüne ve sitede kullanılacak bilgilere yazının devamından …