Web Tasarımı Ders Notu (BK225)
Ümit ÖZYILMAZ
Giriş
Günümüzde iletişim en parlak dönemini yaşamaktadır. Bunun en başta gelen araçlarından bir tanesi medya, diğeri ise internettir. Medya kaynaklı iletişimin de alt yapısını internet oluşturduğu düşünüldüğünde İnternet olgusunun günümüz temel iletişim aracı olduğu rahatlıkla söylenebilir. Bilgisayarları birbirine bağlayan bu büyük ağ (
network) sayesinde telefon görüşmeleri, TV yayınları yapılmakta, anlık olarak haberleşebilmekte, paylaşılan haberler ile dünyada olan biten anında öğrenilebilmektedir. İnternet sayesinde dünya anlık olarak bilgiye erişme açısından küçük bir köye dönüşmüştür. Ancak internette oluşan bu bilgi bağımsız kurum ya da kuruluşlar tarafından oluşturabileceği gibi taraflı kurum kuruluş veya kişiler tarafından da oluşturulabileceğinden elde edilen bilginin doğruluğu veya gerçekliği her zaman için sorgulanması gereken bir olaydır. Bu nedenle internetten elde edilen bilgilerin güvenilir kaynaklardan elde edilmesi büyük önem taşımaktadır. Bir şekilde insanların internetten faydalanması beraberinde suçları da beraberinde getirmektedir. Neredeyse kontrolsüz bir bilgi yığını ve iletişimi olan internette dolandırıcılık olayları da çok sık görülmeye başlanmıştır. Kurumlar gerekli önlemleri almasına rağmen kullanıcılardan kaynaklanan hatalardan dolayı her gün yüzlerce kişi dolandırılmaktadır.
Bilgi alış verişi yapılan internet ağına sadece bilgisayarlar mı bağlanmaktadır? Bu sorunun cevabı kesinlikle hayırdır. Ev otomasyonları, müzik sistemleri, televizyonlar, cep telefonları, hatta artık arabalar bile internete bağlanma noktasına gelmiştir. Bilgisayarlar dâhil internete bağlanan her cihazın o cihaza özel, onu bulunduğu ağda tanımlayan ve sayılardan oluşan bir
IP (Internet Protocol) adresi vardır. IP adresinin asıl görevi iletişime geçecek olan cihazların birbirlerini milyonlarca cihaz içinde bulmasıdır. Ayrıca internet üzerinde işlenen suçlarda IP adresinden suçu işleyen cihaz dolayısı ile kişi rahatlıkla bulunabilir. İnternete bağlanan her cihazın -ki bu bir televizyon, müzik sistemi veya telefon da olabilir- zorunlu olarak bir IP adresi vardır. Bu cihazlara IP adresini bağlı oldukları bir üst ağ cihazı belirlemektedir. Örneğin evinizde kullandığınız bilgisayar ya da akıllı internet televizyonuna IP adresini internete çıkmanıza yarayan modem vermekte, modemin IP adresini ise belli bir ücret karşılığı hizmet aldığınız internet servis sağlayıcı (ISP) şirketi belirlemektedir. Bu hiyerarşik bir sıralamadır.
İnternet dünya çapında bir ağdır. Dünyanın herhangi bir yerindeki bilgisayar dünyanın başka bir ucundaki bilgisayara bağlanabilir. Ancak bazı ağlar vardır ki tüm dünyaya açık değildir. Örneğin bankaların kendi içinde kullandığı ve tüm hesap işlerinin tutulduğu bilgisayarlar tüm dünyaya açık değildir, sadece bu kurum içinde bilgisayarlar birbirine bağlıdır, yani kapalı bir ağdır. Bu bankanın kullanıcılarına sağladığı sınırlı bankacılık işlemlerinin haricinde asıl hesapların tutulduğu bilgisayarlara dışarıdaki bilgisayarların bağlantısı yoktur. Bu kapalı ağlara
intranet adı verilir. Bu ağlara örnek olarak askeri kurumların kullandığı birbirine bağlı bilgisayarlar da örnek verilebilir. Bilgisayarların bulunduğu fiziki konuma göre yan yana veya aynı binada bulunan bilgisayarlar aynı bağlantıyı paylaşıyorsa lokal ağ içindedir ve buna lokal ağlar
LAN (Local Area Network) adı verilir. Eğer bağlı olan bilgisayarlar fiziki olarak birbirlerinden uzak ise (örneğin farklı bina, mahalle, şehir veya ülke) ve birbirine bağlanması için özel cihazlar ve abonelikler gerektiriyorsa bu ağlara ise uzak ağlar
WAN (Wide Area Network) adı verilir. Daha iyi anlaşılması açısından şu örnek verilebilir. Bir internet kafede birbirine bağlı bilgisayarlarda oyun oynayan insanlar lokal ağ (LAN) içindedir. İki ayrı internet kafede birbiri ile oyun oynayan insanlar ise uzak ağ (WAN) içindedir. İki ayrı kafeyi birbirine bağlayan internettir. Eğer internet kesilirse yani WAN bağlantısı koparsa (örneğin modem bozulursa) iki ayrı kafenin bağlantısı da doğal olarak kopar ancak insanlar aynı kafe içinde dahil oldukları lokal ağda (LAN) bulunan arkadaşları ile oyun oynamaya devam edebilirler.
İnternette yapılan farklı işler için farklı iletişim protokolleri vardır. Milyonlarca cihazın bağlı olduğu internet çok büyük bir ağdır. İnternet içinde akan veri aynı yapıda değildir. Örneğin elektronik posta gönderme ve alma ayrı bir protokol kullanırken, dosya paylaşma ayrı, sesli ve videolu iletişim ayrı, web sayfalarına göz atma ayrı bir protokol gerektirmektedir. Bu protokoller bağlanan iki bilgisayar arasında nasıl bir haberleşme olacağının kurallarını içerir ve çok karmaşık bir yapıdadır. Ancak kullanıcıların kullandıkları bilgisayar programları bu protokol bağlantılarını otomatik yapmakta ve kullanıcıya hiç bir zaman bu zorluk yansıtılmamaktadır. Örneğin bir mail programı kullanılarak e-posta gönderilirken SMTP (Simple Mail Transfer Protocol), alınırken ise POP (Post Office Protocol) protokolleri otomatik olarak devreye sokulmakta ve haberleşme sağlanmaktadır. Kullanıcı bu karmaşık haberleşmenin ürünü olan sadece gelen maili görmektedir. Kullanıcı uzaktaki bir bilgisayara dosya göndermek istediğinde ise FTP (File Transfer Protocol) protokolü ile bağlantı kurmakta ve dosya göndermektedir. Web sayfalarına göz atmak için kullanılan Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari gibi
internet tarayıcısı programları (Internet Browser) ise
HTTP (Hyper Text Transfer Protocol) protokolünü kullanırlar. Bu yüzden web sayfaları
http:// ile başlamaktadır. Kullanıcılar iletişimde kullanılan karmaşık protokol komutlarını hiçbir zaman görmezler, onların gördüğü sadece görselliği yüksek, faydalı bilgiler içeren web sayfalarıdır. Ancak bu ders kapsamında tasarımcı olarak biz web sayfası yaparken
HTML (Hyper Text Markup Language) komutlarını kullanacağız. HTML kodları HTTP protokolünün ana haberleşme dilidir ve web sayfalarının oluşturulmasında kullanılır.
İnternette bilgi hiç bir zaman kablolar üzerinde kalmaz muhakkak bir bilgisayar üzerinde barındırılmaktadır. Örneğin arkadaşınıza bir e-posta attınız, o anda arkadaşınızın bilgisayarı kapalı olabilir, arkadaşınıza e-posta ulaşmadan siz de bilgisayarınızı kapattınız, şu anda her iki bilgisayarda kapalı olduğunu düşünelim. Bir süre sonra arkadaşınız bilgisayarını açtı ve e-posta ona ulaştı. Peki, bu nasıl olmaktadır? Arkadaşınızın e-posta adresi
[email protected] olsun, aslında siz e-postayı hotmail şirketindeki bilgisayara atmaktasınız, postanız bu şirketteki bilgisayarda durmakta, arkadaşınız ne zaman kendi bilgisayarını açarsa ona buradan ulaştırılmaktadır. Bu size hizmet eden bilgisayarların genel olarak sunucu (server) adı verilmektedir. Sunucular hizmet verebilmeleri için 24 saat açık tutulurlar ve hiç bir şekilde kapatılmazlar, elektrik kesintilerine karşı korunurlar. Başka bir örnek daha verelim; üniversitemizin web sayfa adresi
http://www.adu.edu.tr dir. Bu adresi internet tarayıcınıza yazdığınızda üniversitemize ait bilgilerin yer aldığı web sayfası bilgisayarınızda görüntülenir. Ekrana gelen bilgilerin kaynağı üniversitedeki 24 saat açık bulunan sunucudur. Eğer bu sunucu kapatılır yada bir şekilde kendi kapanırsa web sayfasına girmek istediğinizde sunucu hatası ile karşılaşır ve sayfayı görüntüleyemezsiniz. Sunuculara bilgi almak için bağlanan bilgisayarların genel ismine ise
istemci (client) adı verilmektedir. Yukarıdaki örnekte üniversitedeki 24 saat açık olan bilgisayar sunucu, sunucuya bağlanıp oradaki web sayfasını görüntüleyen sizin bilgisayar ise istemci rollerindedir. Günlük yaşamda kullandığımız ve internete bağlanan bilgisayarlar, cep telefonları gibi aygıtların hepsi istemcidir ve 24 saat açık olan sunuculardan bilgi almak için kullanılmaktadır. Web sayfalarını içinde tutarak bu sayfanın bilgilerini barındıran sunucuların ismine
host adı verilir. Hazırlanan web sayfaları devamlı ulaşılabilir olması için hiç kapatılmayan host sunuculara yüklenmek zorundadır. Dosyaların host sunucuya yüklenmesi FTP protokolü ile gerçekleştirilmektedir. Bunun için bir FTP programına ve host şirketi tarafından size verilen kullanıcı ismi ve şifreye gereksinim vardır (Bu konuda host şirketinden yardım alabilirsiniz). Bu host sunucular ticaridir, web sayfanızı belli bir süre yayınlamak için sizden ücret talep ederler ve sözleşmenizin belirli sürelerde yenilenmesi gerekmektedir. Aksi halde dosyalarınız host tan silinmekte ve siteniz artık ulaşılamaz hale gelmektedir (bazı sunucular reklam karşılığı ücretsiz hizmet verebilmektedir). Her web sayfasının ona ulaşılabilmemizi sağlayan
URL adında bir bağlantı adresi vardır. Üniversitemiz web sayfası URL si
http://www.adu.edu.tr dir. Nasıl web sayfalarının barındırılması için host sunucusu şirketine bir ücret ödenmekteyse, aynı şekilde URL isminin tescillenmesi ve alınması içinde belli bir ücret ödenmektedir. Alınan bu URL size özeldir, bir kopyası daha yoktur ve belli periyotlarda sözleşmenin yenilenmesi gerekmektedir. Sözleşme yenilenmezse URL hizmet aldığınız şirket tarafından kapatılmakta ve talep olursa isim bir başkasına satılabilmektedir. Dikkat edilecek olursa URL belli kısımlardan oluşmaktadır. Baş kısımdaki
http:// bu URL nin bir web sayfası protokolü olduğunu göstermektedir. Daha sonra gelen
www alt alan adı (subdomain) dır. Alt alan adı istenirse kullanılmayabilmekte, kullanıldığı durumda web sayfası sunucu yöneticisi tarafından istenildiği gibi isimlendirilmektedir. Örneğin bir şirketin farklı departmanları için
http://www.sirketim.com http://satis.sirketim.com http://yonetim.sirketim.com alt alan isimleri kullanılabilmektedir. Verilen bu örnekte asıl alan adı (domain) sirketim dir (isim alınırken verilmesi zorunludur). Bu kısım web sayfası sahibini tanımlayan asıl kısımdır. Bunu takiben ticari kuruluş ise
com, eğitim kurumu ise
edu, hükümet kuruluşu ise
gov, dernek organizasyon ise
org, askeri kuruluş ise
mil eki gelmektedir (bu kısım da isim tescillenirken verilmek zorunludur). En son ek ise ülke kodudur, kullanılma zorunluluğu yoktur. Örnek olarak Türkiye için
tr, İtalya için
it, Fransa için
fr ve benzeri şekilde çoğaltılabilir. URL tescil edilirken sadece bir kısmı değil bir bütün olarak tescillenmektedir.
http://webtasarim.com http://webtasarim.com.tr http://webtasarim.org isimleri ayrı ayrı tescil edilmek zorundadır.
Bazı web sayfalarının http:// yerine https:// ile başladığını dikkat etmiş olabilirsiniz. Genelde banka, sosyal medya, özel haberleşme siteleri https:// protokolünü kullanmaktadırlar. Bu protokolde web sayfasına yazılan kredi kartı numaraları, yazışmalar, metinler ve sayfa içeriklerinin tamamı kullanıcı ve web sayfası sunucusu arasında gizli tutulmakta ve şifrelenmektedir. Hiçbir şekilde üçüncü şahıslar tarafından görüntülenememektedir. Çok kuvvetli olan şifreleme tekniği sayesinde çözülmesi neredeyse imkânsızdır. Bu ne anlama gelmektedir? Bir bankanın web sitesi üzerinden bankacılık işlemi yapmak istiyorsunuz ve adresin https:// ile başlamadığını gördünüz. Bu durumda bankanın web sitesine ulaşana kadar aktarıldığınız tüm ara bilgisayarlar ve sunucularda (en basit bağlantılarda bile en az 3-4 adettir) ya da araya giren kötü niyetli bilgisayarlarda istenildiği taktirde yaptığınız tüm işlemler görülebilmekte, şifreler okunabilmekte, kredi kartı numaraları alınabilmektedir. Eğer gizlilik sizin için önemli ise protokolün https:// olmasına dikkat etmeniz gerekmektedir.
Bir web sayfasının URL adresinin internet tarayıcısına girilmesi ile nasıl oluyor da ilgili host sunucusuna bağlanılmaktadır. Her bilgisayarın bir IP adresi olduğundan daha önce bahsedilmişti. URL tescil edilirken web sunucusunun IP adresi ile URL adı eşleştirilmekte ve
DNS (Domain Name Server) adı verilen büyük sunuculara bu bilgi kayıt edilmektedir. İnternet tarayıcısına URL yazıldığı zaman DNS sunucusundan URL'nin IP adresi bulunmakta ve bu IP adresine ait bilgisayara otomatik olarak yönlendirme yapılmaktadır. Böylece bir web sitesine gitmek için IP adresinin ezberlenmesine gerek kalmamakta sadece internet tarayıcısına URL girilmesi yetmektedir. Örneğin
http://www.adu.edu.tr web sayfası sunucusunun IP adresi
194.27.38.14 tür. İnternet tarayıcısına URL yazılıp entere basıldığında otomatikman DNS sunucusundan bu IP adresi hemen bulunur ve bilgisayara erişilir. Adres kısmına IP adresini yazarak da yine aynı sayfaya erişilebilmektedir.
HTML Dili
HTML dili ile yazılmış bir web sayfası
<html> ile başlar ve
</html> ile biter, ve başlıca
<head> ve
<body> olmak üzere iki kısımdan oluşur.
<head> kısmı sayfanın geneli ile ilgili bilgileri barındırırken, asıl WEB sayfası metni
<body> kısmı içindedir. HTML dilinde komutlar “<…>” işareti içerinde kullanılır ve komutun bitimi ise “</…>” şeklindedir. Çoğunlukla her başlama komutunun bir bitiş komutu vardır (istisna olarak sadece <…> şeklinde bitişi olmayan komutlar da mevcuttur). Sayfa içindeki her komutun başlangıcı ve bitişi bir kalemle birleştirildiği varsayılırsa hiçbir çizginin kesişmemesi gerekir. Eğer kesişiyorsa WEB sayfasında hata oluşur ve büyük bir çoğunlukla sayfa hata vermeksizin yanlış görselde gösterilir.
<html>
| <head>
| | <title>
| | | Deneme
| | </title>
| </head>
|
| <body>
| | İlk Web sayfamız
| </body>
</html>
Yukarıdaki örnekte
<title> komutu WEB sayfasının ismini tayin etmemize yarar ve dikkat edildiği üzere
<head> bölümü içerisinde yer alır. Sayfanın asıl metin kısmı ise
<body> bölümünde yer alır.
<body> bölümü komutların büyük çoğunluğunun kullanıldığı ana bir bölümdür. Eğer sayfanın arka alanında bir renk olması isteniyorsa komut
<body bgcolor=”renkkodu”>…</body> şeklinde kullanılır. Renk kodları için Ek1 deki “Color parametresi” başlığına bakınız. Ayrıca Web sayfası arka alanına bir resim de yerleştirilebilir. Bunun için body komutu
<body background="resim.jpg">…</body> şeklinde kullanılır.
HTML dilinin yazıldığı ve sayfa dizaynlarının yapıldığı çok gelişmiş programların olmasına karşın basit bir metin editörü bu dilin yazılması için yeterlidir. Örneğin Windows işletim sisteminin içinde bulunan “Not Defteri” programı bu çalışmalar için rahatlıkla kullanılabilir. Bu program Windows’un “Başlat menüsü” altındaki “Tüm Programlar>Donatılar” altında yer alır. “Not Defteri” ile yazılan komut dizisi kaydedilirken dikkat edilmesi gereken bir-iki nokta vardır. Kaydedilirken “Kayıt türü”’nden “Tüm Dosyalar (*.*)” seçilmeli ve dosya ismi verilirken uzantı olarak “.html” eklenmelidir (sayfam.html örnek olarak verilebilir). Dosya isimlerinde Türkçe karakter (Çç,Ğğ,İı,Öö,Üü) kullanılmaması gerekmektedir. Kaydedilen dosya üzerine çift tıklandığı zaman otomatik olarak varsayılan web tarayıcı tarafından gösterilir. Eğer dosya üzerinde bir değişiklik yapılmak isteniyorsa dosya üzerinde farenin sağ tuşuna basılır ve “Birlikte Aç…” menüsünden “Not Defteri” seçilir ya da doğrudan “Not Defteri” programı içinden de bu dosya açılabilir (Dosya türü “Tüm Dosyalar (*.*)” seçilmelidir aksi halde dosya görünmez). Host sunuculara web sayfasının görüntülenmesi için bağlanıldığında otomatik olarak gösterilen ilk ana sayfa index.html index.htm yada default.html dosyalarından biridir. Bu nedenle ana sayfanızın ismi bu dosya isimlerinden biri olmak zorundadır.
Basit HTML komutları
<font> yazı karakteri ayarlama komutu
Bu komut yardımıyla sayfanın herhangi bir alanına yazılan yazıya boyut, yazı stili ve renk verilebilir. Yazı boyutunu size, sitilini face, rengini ise color parametreleri ayarlar. Bu parametler aynı anda kullanılabileceği gibi sadece biri veya ikise de kullanılabilir.
<html>
<body>
<font size=12 face=”Verdane” color=”Red”>deneme1</font>
<font size=8 face=”Courier” color=”Blue”>deneme2</font>
<font size=14 face=”Times New Roman” color=”Yellow”>deneme3</font>
</body>
</html>
Mevcut yazı tipleri ve renkler için ek1’e bakınız.
<p> paragraf komutu
<body> bölümü içinde her paragraf bu komut ile belirtilir. Eğer bu komut verilmeden metin editör içinde paragraf verilerek yazılsa dahi tarayıcıda tek bir paragrafta görülür. Paragraflar
<p>…</p> arasında verilerek belirtilir.
<p> sadece yalın halde kullanılabileceği gibi paragrafın sola (left), sağa (right), her iki yana yaslı (justify) veya ortalı (center) yazılmasına yarayan align parametresi ile de kullanılabilir. Örneği ortalı bi paragraf için
<p align=center>…</p> kullanılmalıdır. Eğer align parametresi kullanılmazsa varsayılan olarak sola yaslı kabul edilir.
<html>
<body>
<p>ilk paragraf</p>
<p>ikinci paragraf</p>
</body>
</html>
<br> satır başı komutu
Bir paragrafta bir alt satıra inilmek için kullanılır ve sadece <br> şeklinde kullanılır. </br> gibi komutu sonlandıran bir kullanımı yoktur.
<html>
<body>
<p>bu birinci satır<br>bu ikinci satır</p>
</body>
</html>
<h1> başlık atma komutu
Bu komut metin karakterlerinden büyük ve kalın bir başlık atılması gerektiğinde kullanılır.
<h1><h2><h3><h4><h5><h6> olmak üzere 6 adet başlık büyüklüğü vardır (En büyük başlık
<h1> dir ve büyüklüğü
<h6> doğru azalır).
<html>
<body>
<h1>bu bir başlık satırıdır</h1>
<p>bu da normal bir metindir</p>
<h2>bu ilk başlığa göre daha küçük bie başlıktır</h2>
<p>bu da ikinci başlığın altında yazan bir metindir</p>
</body>
</html>
<b> kalın karakterde yazma
Bu komut ile normal metinden daha kalın yazılması sağlanır ve
</b> komutu ile sonlandırılır.
metin içerisinde
<b> bu yazılan </b> diğerlerinden daha kalındır
<i> yatık karakterde yazma
Bu komut ile yatık yazıların yazılması sağlanır ve
</i> komutu ile sonlandırılır.
metin içerisinde
<i>bu yazılan</i> yatık karakterdedir
<u> altıçizili karakterde yazma
Bu komut ile altı çizili yazıların yazılması sağlanır ve
</u> komutu ile sonlandırılır.
metin içerisinde
<u>bu yazılanın</u> altı çizilidir
<sup> üst karakterde yazma
Bu komut ile 2x10
6 gibi üst karakterli metinlerin yazılması sağlanır ve
</sup> komutu ile sonlandırılır.
2x10<sup>6</sup>
<sub> alt karakterde yazma
Bu komut ile H
2SO
4 gibi alt karakterli metinlerin yazılması sağlanır ve
</sub> komutu ile sonlandırılır.
H<sub>2</sub>SO<sub>4</sub>
<hr> sayfa boyunca yatay bir çizgi çekmek
Sayfaya yatay olarak bir çizgi çekmek için kullanılır. Aynı
<br> komutunda olduğu gibi sonlandırıcı bir komutu yoktur.
<html>
<body>
<p>bu paragraf ile</p>
<hr>
<p>bu paragraf arasında bir çizgi var</p>
</body>
</html>
<img> resim ekleme komutu
Web sayfası içine sunucuda bulunan bir resmi yada farklı bir internet adresindeki resmi eklemek için kullanılır. Bu resim dosyası veya adresi src parametresi ile verilir.
<img src=”resim.jpg”> şeklinde yazılır.
</img> gibi kapatıcı komut kullanımı olmayan bir komuttur. Eğer resim daha ufak bir boyda gösterilmek istenirse height (yükseklik) ve width (genişlik) değerleri ile piksel cinsinden verilebilir. O zaman komut şu şekilde yazılmalıdır
<img src=”resim.jpg” height=200 width=240> Ayrıca resim sola (left), sağa (right), yukarıda (top), aşağıda (bottom) yada ortada (middle) olacak şekilde yazının içine yerleştirilebilir. Bu durum align parametresine verilir
<img src=”resim.jpg” align=”left”>
<table> tablo oluşturma
Metin içerisinde tablolar oluşturmak için kullanılır. Kullanımı diğer komutlar gibidir, ancak uygulamada biraz dikkat etmek gerekir. Çünkü tabloda yer alacak satır ve sütün sayılarının verildiği alt komutları vardır. Her tablo
<table> ile başlar ve
</table> ile biter. Eğer tabloya çerçeve eklenmek istenirse
<table border=1>…</table> şeklinde border parametresi kullanılır. border’in yanına verilen değer çerçevenin kalınlığını tayin eder. Eğer border değeri verilmezse
<table>…</table> şeklinde kullanılırsa çerçeve gösterilmez. Tablonun her satırını ve sütununu bir komut belirler. Tablodaki her satır
<tr> ile başlar ve
</tr> ile biter. Her satır içinde sütunlar
<td>…</td> ile belirtilir. Aşağıdaki örneği inceleyerek nasıl kullanıldığını daha net görebilirsiniz. Bu örnekte 3 satırdan ve 2 sütundan oluşan bir tablo yapılmaktadır. Eğer hücreler sıkışık görülüyor ise hücreler arasına boşluk verilebilir, bu durumda tablodaki hücreler arasına cellspacing parametresine verilen değer kadar piksel cinsinden boşluk verilir. Kullanımı ise
<table cellspacing=10>…</table> şeklindedir.
<html>
<body>
<table border=1> tablo başı
<tr> ilk satır başı
<td>birinci satırın birinci sütunu</td> ilk sütun
<td>birinci satırın ikinci sütunu</td> ikinci sütun
</tr> ilk satır sonu
<tr> ikinci satır başı
<td>ikinci satırın birinci sütunu</td> ilk sütun
<td>ikinci satırın ikinci sütunu</td> ikinci sütun
</tr> ikinci satır sonu
<tr> üçüncü satır başı
<td>üçüncü satırın birinci sütunu</td> ilk sütun
<td>üçüncü satırın ikinci sütunu</td> ikinci sütun
</tr> üçüncü satır sonu
</table> tablo sonu
</body>
</html>
Bu tablonun çıktısı şu şekilde olacaktır;
| birinci satırın birinci sütunu |
birinci satırın ikinci sütunu |
| ikinci satırın birinci sütunu |
ikinci satırın ikinci sütunu |
| üçüncü satırın birinci sütunu |
üçüncü satırın ikinci sütunu |
<ul ve ol> Listeleme
Bazı durumlarda hazırlanan web sayfaları içinde listelere ihtiyaç duyulmaktadır.
<ul> komutu listelenecek olan maddelerin başına bir liste işareti ekleyerek bunların düzgün bir sıra içinde sıralanmasını sağlamaktadır. Listede yer alacak her madde
<li>...</li> içine alınmalıdır. Listeleme işlemi bittiğinde
</ul> ile listeleme komutu kapatılmalıdır. Eğer listeleme işlemi liste işareti yerine sıra numarası ile yapılacaksa
<ul> komutu yerine <ol> komutu kullanılmalı ve yine komut dizisi
</ol> ile kapatılmalıdır. Numaralı listelerde komut yazarken numara verilmez, çıktı kendiliğinden numaralandırılır. Örneğin sıra numarası elle girilerek verilen 100 kişilik bir isim listesinde aradan bir kişi çıkarıldığında tüm sıra numaralarının elle tek tek değiştirilmesi gerekir. Ancak bu listeleme
<ol> komutu kullanılarak yapılırsa numaralandırma otomatik olacağından aradan kaç isim çıkarılırsa çıkarılsın sıra numaraları hep kendiliğinden güncellenecektir.
<ul>
<li>Ali</li>
<li>Ahmet</li>
<li>Veli</li>
</ul>
<ol>
<li>Elma</li>
<li>Armut</li>
<li>Muz</li>
</ol>
Bu örneğin çıktısı şöyle olacaktır;
• Ali
• Ahmet
• Veli
1. Elma
2. Armut
3. Muz
<a> bağlantı verme
Bu komut sayfa içinden başka bir internet sayfasına bağlantı vermek için kullanılır. Bağlantı verilen sayfa bizim yazdığımız bir sayfa olabileceği gibi internette bulunan herhangi bir WEB sayfası da olabilir. Yazılan bu komut ile fare ile tıklandığında otomatik olarak verilen sayfanın yüklenmesi sağlanır. Genellikle sayfa içindeki linkler mavi ve altı çizgili olarak kullanıcıya gösterilir ve diğer metinden ayrılır. Gidilecek olan sayfa href değişkenine verilir ve
</a> ile komut kapatılır. Aşağıdaki örneği inceleyiniz. Bağlantı aynı pencereye yüklenir, eğer bağlantının yeni bir pencerede açılması isteniyorsa komut
<a href="deneme.html" target="_blank">…</a> şeklinde kullanılır. Bağlantı verme komutu ile halen yüklü olan aynı safya içinde farklı bir noktaya gitmek de mümkündür. Bu özellik uzun sayfalar içinde istenilen yere gitmeye yaramaktadır. href değişkenine gidilecek yer #deneme şeklinde verilir. Örnek
<a href="#git1"> sayfa içinde başlığa gitmek için tıklayınız</a>. Örnekte bağlantının #git1 kısmına gitmesi isteniyor, ancak gitmesi gerektiği noktayı da işaretlememiz gerekmektedir. Bu da
<a id="#git1">…</a> şeklinde verilir. Böylece tıklandığında sayfa içinde nereye gideceği belirlenmiş olur.
<html>
<body>
Adnan Menderes Üniversitesinin WEB sayfasına gitmek için
<a href=”http://www.adu.edu.tr”>bunu tıkla</a>
</body>
</html>
Adnan Menderes Üniversitesinin WEB sayfasına gitmek için
bunu tıkla
Bazı Örnekler
<html>
<body>
<h1 id="ust">Üst sayfa</h1>
Buraya uzun bir yazı koymanız gerekiyor ki sayfa içinde nasıl hareket ediyor görülebilsin.
<a href="#ust">Ust sayfa başlığına git</a>
</body>
</html>
Link verme çok sık olarak kullanılan bir web sayfasına gönderme yapabileceği gibi
Mail göndermek
<a href="mailto:[email protected]">Mail göndermek için tıklayınız</a>
Veya ekrana mesaj çıkarmak için de kullanılabilir.
<a href="javascript:alert('Buraya mesajınızı yazınız');">Mesaj için tıklayınız</a>
Web sayfasının tümünün arkasına bir renk konulmak isteniyorsa aşağıdaki kodu deneyiniz.
<html>
<body style="background-color:pink;">
Burada bildiğiniz üzere sayfa içeriği var
</body>
</html>
Sadece bir paragrafa renk vermek için
<html>
<body>
<p style="background-color:yellow;">Sadece bu paragrafın arkası renkli</p>
</body>
</html>
Ek1
Color parametresi
color parametresi için ön tanımlı renkler. Örnek: color=”Blue”
AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, Darkorange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey, DodgerBlue, FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, GoldenRod, Gray, Green, GreenYellow, HoneyDew, HotPink, IndianRed , Indigo , Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenRodYellow, LightGray, LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSteelBlue, LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, Purple, Red, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, YellowGreen
color parametresine renk karışımı da verilerbilir. Örnek: color=rgb(x,y,z)
x=0-255 arası kırmızı oranı
y=0-255 arası yeşil oranı
z=0-255 arası mavi oranı
color parametresine HEX kodu da verilebilir. Örnek: color=#FF0000 Bu kullanım aynı rgb(x,y,z) kullanımı gibidir ancak verilen değer hexedesimaldir. Profesyonel kullanım için uygundur. Bu ders notu hexedesimal konusunu içermemektedir.
TÜRKÇE KAYNAKLAR
http://www.ulakbim.gov.tr/dokumanlar/kurslar/html/index.uhtml
http://www.htmldersleri.org/index.php
İNGİLİZCE KAYNAKLAR
http://www.w3schools.com/html/default.asp
http://www.alternetwebdesign.com/htmltutorial/index.htm