WEB TASARIMIN TEMELLERİ ~ Sunu 2 ~ Öğr. Gör. Mehmet Fatih TAN http://blog.kmu.edu.tr/mftan mftan@kmu.edu.tr Bilgi paylaşıldıkça kıymetlenir.. Kaynak göstermek şartıyla sunu içeriğini çalışmalarınızda kullanabilirsiniz.
DERSİN İÇERİĞİ Web Tasarımına Giriş Temel HTML Yapısı Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 2
HTML (Hyper Text Markup Language) İnternet sayfalarını oluşturmak için kullanılan dildir. HTML dili ile internet sayfalarına resim, yazı, tablo, animasyon, vb. nesneler eklenerek sayfalar oluşturulur. Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 3
Bir internet sayfasının temelini HTML dili oluşturmaktadır. Sayfa üzerinde ne görünürse görünsün, sayfanın içeriği HTML kodlarından oluşmaktadır. Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 4
HTML dili ile internet sayfası oluşturabilmek için herhangi bir metin düzenleyici program yeterlidir. HTML dili ile yazılmış bir internet sayfasının dosya uzantısı.htm veya.html olabilir. Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 5
İnternet sayfası oluşturmak için kullanılan birçok program olmasına rağmen, kod yapısının öğrenilmesi için başlangıçta not defteri benzeri bir program kullanılmasını öneririm. Açık kaynak kodlu ve ücretsiz bir metin düzenleme programı olan Notepad++ programını öneririm. https://notepad-plus-plus.org Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 6
Temel HTML Yapısı İnternet sayfalarının en temel yapısı HTML kodları ile oluşturulmaktadır. HTML kodlarına etiket (tag) denir. Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 7
İnternet tarayıcı programlar html etiketlerini yorumlayarak ekrana çıktı verirler. Sayfa içeriği ile etiketler < > işaretleri ile birbirinden ayrılırlar. Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 8
Temel HTML Yapısı <html> <head>... </head> <body>... </body> </html> Genelde görüntülenmeyen bilgi ve farklı işlevlere sahip kodlar bu alana yazılır. Sitede görüntülenen ve internet sitesinin içeriğini oluşturan kodlar bu alana yazılır. Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 9
Etiket Çeşitleri: 1. Sonlandırmalı Etiketler 2. Sonlandırmasız Etiketler Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 10
Sonlandırmalı Etiketler Etiketin başlangıç ve bitiş bölümleri vardır. <html>... </html> Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 11
Etiketin Özellikleri: <font face= Verdana color= red >Merhaba</font> Etiket : font Özellik : face (yazı tipi) Özellik : color (yazı rengi) Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 12
Özel Karakterler HTML kullanılan bazı özel karakterler vardır. &alt; > & " boşluk karakteri karakteri < karakteri > karakteri & karakteri " karakteri Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 13
HTML etiketleri arasına yazılan boşluk karakterinden sadece 1 tanesi yorumlanır. Arka arkaya boşluk bırakmak için kodu kullanılmalıdır. Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 14
HTML etiketleri arasında ENTER tuşu ile yapılan paragraflar yorumlanmaz. Alt satıra geçmek için <br> etiketi kullanılmalıdır. Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 15
Açıklama Satırları İnternet sayfası içerisine açıklama satırları eklemek için kullanılan koddur. <!-- ile --> işaretleri arasında kalan ifadeler açıklama satırıdır. <!-- Tarayıcıda yorumlanmaz. --> Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 16
Nesnelerin Rengini Belirlemek İnternet sayfalarında metin, kenarlık, arkaplan, vb. nesnelerin rengini belirlemek için 2 farklı yöntem vardır. Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 17
1. Rengin İngilizce Karşılığını Yazmak <font color= red >Ermenek MYO</font> Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 18
2. Rengin 16lık Sayı Sistemindeki Karşılığını Yazmak XX XX XX R G B (Bu sistemdeki en büyük değer FF, en küçük değer ise 00'dır.) <font color= #FF0000 >Merhaba</font> Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 19
İlk HTML Sayfamız Notepad++ programını açarak, temel html kodlarını yazalım ve dosyayı ilksayfa.html olarak ile kaydedelim. Öğr. Gör. Mehmet Fatih TAN Web Tasarımın Temelleri 20