Post on 04-Feb-2021
Web Tasarımının Temelleri
Öğr. Gör. Murat YAZICIwww.muratyazici.com
1. Hafta
Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokuluwww.artvin.edu.tr
http://www.muratyazici.com/http://www.artvin.edu.tr/
Listeleme Etiketleri
Sıralı liste oluşturmak için kullanılır.
Kelime işlemci programındaki numaralandırma işlemi ile aynıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir.
etiketi ile birlikte kullanılır.
Artvin MYO, Bilgisayar Teknolojileri 2
Listeleme Etiketleri
type parametresi kullanarak listenin rakamla mı harfle mi başlayacağını belirleyebiliriz.
"A" harfi yerine "a" harfi yazılırsa sıralama a, b, c şeklinde küçük harflerle olacaktır.
"I" harfi yerine küçük "i" harfi yazılırsa sıralama i, ii, iii şeklinde küçük roma rakamları ile olacaktır.
Artvin MYO, Bilgisayar Teknolojileri 3
Listeleme Etiketleri
Madde işaretleri şeklinde listeleme yapmak için kullanılır.
type parametresi ile kullanacağınız madde işaretinin şeklini belirleyebilirsiniz.
Kullanılabilecek parametreler: disc, circle, square
Artvin MYO, Bilgisayar Teknolojileri 4
Listeleme Etiketleri
Liste oluşturmak için liste elemanlarını belirtmede kullanılan etikettir.
Sıralamanın hangi şekilde olacağını ise ve etiketleri belirler.
Artvin MYO, Bilgisayar Teknolojileri 5
Tablolar
Tablo eklemek için kullanılan etikettir.
etiketi ile başlayıp etiketi ile biter.
Tablolar satır ve sütunlardan oluşur.
Tabloda satır oluşturmak için kullanılan etikettir.
Tabloda sütun oluşturmak için kullanılan etikettir.
Artvin MYO, Bilgisayar Teknolojileri 6
Tablolar
Artvin MYO, Bilgisayar Teknolojileri 7
Tablolar (width ve height)
Tablonun veya hücrenin genişliğini belirlemek için kullanılır.
(Tablo genişliği için)
(Hücre genişliği için)
Tablonun veya hücrenin yüksekliğini belirlemek için kullanılır.
(Tablo yüksekliği için)
(Hücre yüksekliği için)
Artvin MYO, Bilgisayar Teknolojileri 8
Tablolar (width ve height)
Artvin MYO, Bilgisayar Teknolojileri 9
width (Genişlik)height (Yükseklik)
align, valign parametreleri…
Artvin MYO, Bilgisayar Teknolojileri 10
left, right, center
align, valign parametreleri…
Artvin MYO, Bilgisayar Teknolojileri 11
top, middle, bottom
Tablolar (Diğer parametreler)
Cellspacing
Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır.
Cellpadding
Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını belirlemek için kullanılır.
Colspan
Aynı satırdaki hücreleri birleştirmek için kullanılır.
Rowspan
Aynı sütundaki hücreleri birleştirmek için kullanılır.
Artvin MYO, Bilgisayar Teknolojileri 12
Tablolar (Diğer parametreler)
Artvin MYO, Bilgisayar Teknolojileri 13
Tablolar (Diğer parametreler)
Artvin MYO, Bilgisayar Teknolojileri 14
Tablolar (Diğer parametreler)
Artvin MYO, Bilgisayar Teknolojileri 15
Özel Karakterler
Bazı karakterler HTML dilinde çeşitli anlamlara gelebilmektedir.
Artvin MYO, Bilgisayar Teknolojileri 16
Hedef Tanım Kullanım
Boşluk Boşluk koymaya yarar.
< Küçüktür işareti <
> Büyüktür işareti >
& Ve işareti &
" Çift Tırnak "
© Copyright karakteri ©
… etiketleri
… Etiketleri arasında yazılan tüm yazılar yazıldığı gibi görünür.
Ayrıca satır başı, boşluk gibi etiketleri kullanmaya gerek yoktur.
Artvin MYO, Bilgisayar Teknolojileri 17
Örnek Uygulama…
Yandaki web sayfasını oluşturacak HTML kodunu listeleme etiketlerini kullanarak oluşturunuz.
Artvin MYO, Bilgisayar Teknolojileri 18
etiketi
Sayfaya resim eklemek için kullanılan HTML etiketi.
src = Ekleyeceğimiz resmin adresi.
alt = Fare ile resmin üzerine gelindiğinde yazmasını istediğiniz metin.
width = Eklenilecek olan resmin pixel cinsinden genişliği.
height = Eklenilecek olan resmin pixel cinsinden yüksekliği.
Artvin MYO, Bilgisayar Teknolojileri 19
etiketi
Özellikler
Artvin MYO, Bilgisayar Teknolojileri 20
etiketi
Görüntü üzerinden başka bir belgeye bağlantı vermek için etiketini etiketi içerisinde kullanın!
acu.jpg resmine tıkladığımız zaman Artvin Çoruh Üniversitesinin web sayfasına yönlendirilecek.
acu.jpg resmi ile kodu yazdığımız html sayfanın aynı dizinde olduğuna dikkat!
Artvin MYO, Bilgisayar Teknolojileri 21
Örnek Uygulama…
Yandaki web sayfasını oluşturacak HTML kodunu yazınız.
Artvin MYO, Bilgisayar Teknolojileri 22