Web Tasarımının Temelleri

Transkript

1 1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu

2 Listeleme Etiketleri <OL> 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. <li> etiketi ile birlikte kullanılır. Artvin MYO, Bilgisayar Teknolojileri 2

3 Listeleme Etiketleri <OL> 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

4 Listeleme Etiketleri <UL> 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

5 Listeleme Etiketleri <LI> Liste oluşturmak için liste elemanlarını belirtmede kullanılan etikettir. Sıralamanın hangi şekilde olacağını ise <ol> ve <ul> etiketleri belirler. Artvin MYO, Bilgisayar Teknolojileri 5

6 Tablolar <TABLE> Tablo eklemek için kullanılan etikettir. <table> etiketi ile başlayıp </table> etiketi ile biter. Tablolar satır ve sütunlardan oluşur. <TR> Tabloda satır oluşturmak için kullanılan etikettir. <TD> Tabloda sütun oluşturmak için kullanılan etikettir. Artvin MYO, Bilgisayar Teknolojileri 6

7 Tablolar Artvin MYO, Bilgisayar Teknolojileri 7

8 Tablolar (width ve height) <width> Tablonun veya hücrenin genişliğini belirlemek için kullanılır. <table width="500"> (Tablo genişliği için) <td width="30%"> (Hücre genişliği için) <height> Tablonun veya hücrenin yüksekliğini belirlemek için kullanılır. <table height="400"> (Tablo yüksekliği için) <td height="20%"> (Hücre yüksekliği için) Artvin MYO, Bilgisayar Teknolojileri 8

9 Tablolar (width ve height) width (Genişlik) height (Yükseklik) Artvin MYO, Bilgisayar Teknolojileri 9

10 align, valign parametreleri left, right, center Artvin MYO, Bilgisayar Teknolojileri 10

11 align, valign parametreleri top, middle, bottom Artvin MYO, Bilgisayar Teknolojileri 11

12 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

13 Tablolar (Diğer parametreler) Artvin MYO, Bilgisayar Teknolojileri 13

14 Tablolar (Diğer parametreler) Artvin MYO, Bilgisayar Teknolojileri 14

15 Tablolar (Diğer parametreler) Artvin MYO, Bilgisayar Teknolojileri 15

16 Özel Karakterler Bazı karakterler HTML dilinde çeşitli anlamlara gelebilmektedir. 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 Artvin MYO, Bilgisayar Teknolojileri 16

17 <pre> </pre> etiketleri <pre> </pre> 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

18 Örnek Uygulama Yandaki web sayfasını oluşturacak HTML kodunu listeleme etiketlerini kullanarak oluşturunuz. Artvin MYO, Bilgisayar Teknolojileri 18

19 <img> etiketi Sayfaya resim eklemek için kullanılan HTML etiketi. <img src="ornek.png" alt="örnek" width="30" height="30"> 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

20 <img> etiketi Özellikler Artvin MYO, Bilgisayar Teknolojileri 20

21 <img> etiketi Görüntü üzerinden başka bir belgeye bağlantı vermek için <img> etiketini <a> etiketi içerisinde kullanın! <a href=" src="acu.jpg" alt="açü" width="100" height="50"></a> 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

22 Örnek Uygulama Yandaki web sayfasını oluşturacak HTML kodunu yazınız. Artvin MYO, Bilgisayar Teknolojileri 22