- Öğr. Gör. Ferdi DOĞAN

WEB TASARIMININ TEMELLERİ 2
ÖĞR. GÖR. FERDİ DOĞAN
BİLGİSAYAR TEKNOLOJİLERİ
Zengin Metin İşaret Dili (İngilizce Hyper Text Markup Language, ks. HTML)
günümüzde İnternet üzerinde veri paylaşımı için kullanılan en yaygın metin tabanlı dildir.
Dilin son sürümü HTML5'tir.
HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan
bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen
programlar yazılabilir. Programlama dili denilememesinin nedeni tam olarak budur. Temel
gereği yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe
bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün
olarak görüntülenmesi için gerekli kuralları belirlemektir.
HTML, W3C tarafından standartlaştırılmaktadır. Html, "etiket" ismi verilen çeşitli
başlıklardan oluşur. Aşağıdaki örnek bu etiketler kullanılarak yazılmıştır.
Web kavramı, CERN'de bir bilgisayar programcısı olan Tim Berners-Lee'nin HTML adlı
bilgisayar metin dilini bulup geliştirmesiyle başlamıştır.
1989 yılında HTML ( Hyper Text Markup Language) işaretleme dili geliştirilmiştir. Tim
Berners-Lee aynı zamanda WWW, HTTP ve URL’ yide geliştiren mucittir. Tüm keşifleri
1989-1991 yılları arasında olmuştur.
HTML internet üzerinden web sayfaları oluşturmak için kullanılan bir dildir. HTTP
protokolu ile HTML olarak hazırlanmış sayfalar çağırılır. HTML dosyaları sunucu
bilgisayar içerisinde .html yada .htm olarak tutulur.
HTML ile oluşturulmuş sayfalarda yazılan kodlar “c “ yada “pascal” gibi herhangi bir
derleyiciye gerek kalmadan direk çalıştırılır.
HTML ilk olarak 1.0 versiyonu ile
çıkmıştır. Bu süreç HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0, HTML 4.01 versiyonları
çıkmıştır. Her bir versiyon ile yeni özellikler eklenmiş ve kullanım ve uygulama alanları
gelişmiştir
HTML’nin Tanımı
HTML tarayıcı (browser) ‘lardan görülebilecek web sayfaları
düzenlemeye yarayan bir işaretleme dilidir.
• HTML : Hyper Text Markup Language †( Hareketli-Metin
İşaretleme Dili ) … HTML basitçe, browserlarla
görebileceğimiz, internet dokümanları oluşturmaya yarayan
bir çeşit dildir. …
• Dosya uzantısı .htm veya .html olmalıdır. …
• HTML, programlama dilleri (pascal, basic,..) gibi bir
programlama mantığı taşımadığından öğrenilmesi gayet
kolay bir dildir. …
• Dilden ziyade kabaca metinleri ya da verileri
biçimlendirmek, düzenlemek için kullandığımız komutlar
dizisi diyebiliriz.
• HTML’ DE her şey metin tabanlı ve bir HTML dokümanı oluşturmak için
ihtiyacınız olan şey bir editördür. Hatta sizde herhangi bir HTML editörü
bulunmuyorsa bu işi Windows'un Notepad'i ile dahi halledebilirsiniz. …
• Piyasada iki tip editör bulunuyor.
• Birisi metin tabanlı, kod yazmayı gerektiren fakat bunun yanı sıra rutin bazı
işlemleri kolaylaştıran editörler (HomeSite, HotDog ...) …Diğeri WYSIWYG
(What You See Is What You Get / Ne görürsen onu alırsın) tarzı denen
kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler.
• (FrontPage, Dreamweaver, NetObjects Fusion ...).
WEB Tasarımı
Sayfa Hazırlarken Dikkat Edilecek Noktalar
• Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar
kaydedilirken asla Türkçe ve özel karakterler (ğ,ü,ş,İ ,?,\ vs.) kullanılmaz.
• Sabit diskinizde öncelikle WEB sayfanıza ait dokümanları kaydedeceğiniz
bir dizin ve bu dizin içerisinde resimleri ya da animasyonlarınızı
kaydedeceğiniz bir alt dizin oluşturunuz. Sunucu bilgisayarına bu bilgiler
atılırken (upload) aynı dizinleri bu alanda oluşturmak gerektiği asla
unutulmamalıdır.
• WEB sitenizi yaptığınızda, mutlaka ana sayfanızı index.html veya
default.html olarak adlandırılması gerekmektedir. Birçok WEB sunucu için
varsayılan sayfa index.html'dir. Bazı sunucular da varsayılan sayfanın
default.html olarak adlandırılmasını ister.
Görsel Tasarım
•
•
Günümüzde içeriği tayin ederken sayfamızın amacı uzun uzun bilgi vermekse,
“Nasıl olsa kimse okumuyor!” diye bu bilgileri kırpmak, gerçekten o bilgiye ihtiyacı
olan kişilere haksızlık olur. Sayfamızın bir hareket noktası, bir geçiş noktası
olduğunu tahmin ediyorsak, kimseyi fazla oyalamaya, istemediklerini bildiğimiz
bilgileri zorla vermeye de hakkımız yoktur.
Yale Tıp Fakültesi’nin, ekrana bakan kişinin göz hareketlerini belirleyen cihazlarla
donattığı bilgisayarların başına oturttuğu 12 bin kişiyle yaptığı araştırma bir
bilgisayar ekranının görsel taranma çizgisinin, (1) soldan üst köşeden sağ üst
köşeye, (2) sağ üst köşeden sağ alt köşeye doğru genel tarama (3) yeniden sol
üstten itibaren okuma ve (4) üst orta noktadan aşağı doğru okumayı sürdürme
tarzında olduğunu gösteriyor. Buna göre, izleyici WEB sayfasında önce büyük şekil
kitlesini ve renkleri görmekte, ön plandaki unsurlarla arka plandaki unsurlar
arasındaki kontrastın farkına varmaktadır. İzleyici ancak daha sonra, varsa grafik
unsurların verdiği bilgiyi almakta, üçüncü olarak da okumaya başlamaktadır. Okuma
tahmin edilebileceği gibi, en büyük kitleden benzetme yoluyla başlamakta ve daha
sonra kelimelere inmektedir.
•
•
•
Bu belirleme, bize, WEB sayfasının bütünü itibariyle mükemmel bir grafik
dengesine sahip olması gerektiğini gösteriyor. Salt metinden ibaret gri bir sayfa itici
ve sıkıcı iken, büyük ve geniş grafikler, büyük ve kara lekeler halindeki harfler
özellikle içerik arayan daha rafine izleyiciye “içi boş” izlenimini verecektir. Grafik
sanatçı, bu noktada sayfanın beklenen “müşterisi”nin varsayılan ilgi odağını,
grafikle metni dengeleyerek bulmak zorundadır.
Bu dengede oran ve uygunluk, sadece sayfanın hedef kitlesi ya da başka bir deyişle
sayfanın içeriği dikkate alınarak bulunabilir.
Yazıyı soldan sağa doğru okumaya alışmış toplumlarda, görsel dikkatin ekranda da
soldan sağa doğru gitmesi doğaldır. Bu nedenle WEB sayfalarında da ekranın üst
yarısı, görsel odak noktası olmalıdır. Bu alanın mümkün olduğu kadar yumuşak,
pastel renklerle doldurulması; sert, aşırı yoğun çarpıcı renklerden kaçınılması
gerekir. Bu tür renkler ancak çok fazla dikkat çekmek istediğimiz, bir ya da iki unsur
için saklanmalıdır. Yazılar mutlaka arkalarındaki zeminle çarpıcı bir kontrast
oluşturmalıdır. Dramatik ve karmaşık grafikler, mutlaka grafik sanatçıları tarafından
yapılmalıdır.
•
•
•
Metinleri daha belirgin hale getirecek noktalar, kutular, yatay ve dikey çizgiler, çoğu
zaman görsel bütünlük sağlamak yerine sayfanın tümüne yama hissi verir.
Bütün görsel tasarımlarda olduğu gibi, WEB sayfası tasarımında da tutarlılık şarttır.
Grafik unsurlarla “stil” oluşturmaya kalkmak, grafikçilerin işidir. Bir WEB alanının
başından sonuna tutarlı bir şekilde izlenen grafik uygulama, sonunda izleyicide
WEB alanının sahibi kurum hakkında bir yorum uyandırır. Bu nedenle sırf süsleme
amacıyla, sayfaların orasına burasına çizgi ya da fotoğraf unsurları konulmamalıdır.
Özellikle çizgi grafiklerin üç boyutlu görünmesini sağlamak gerektiği inancı,
günümüzde hemen hemen bütün WEB tasarımına egemen olmuş ve hemen
hemen her grafik unsurun bir tarafına gölgeler yerleştirilmiş bulunuyor. Gölge, bir
görsel öge olarak kullanılacaksa, sayfanın tümünün bir bütün olduğu
unutulmamalıdır. Bir unsurun gölgesi sağa aşağı, diğerininki sola yukarı düşemez.
•
•
•
Ana sayfa izleyicinin bizim WEB alanımıza daldığı noktadır. Bu nedenle sayfada bir
davet unsuru olması şarttır. Bu sayfanın az ve öz unsur içermesi de giderek yaygın
bir tarz olmaya başladı.
Bir gazete veya derginin WEB alanı, yayınladığı organın kapak sayfasına
benzeyebilir. Ama bir üretim firması, ana sayfasında hiç değilse belli başlı mal
gruplarının bağlantıları olmalıdır.
Çoğu internet’e modemle bağlanan izleyiciler için, küçük grafiklerin geniş alanlar
işgal etmesini sağlayan, başlıklardan ve beyaz alanlardan yararlanan, buna karşılık
görsel etkisi son derece yüksek sayfalar yapılması mümkündür.
HTML’de Etiket (Tag) Kullanımı
TAG (Etiket) : HTML dosyalarında normal metin ile Web tarayıcısına yollanacak olan özel
komutları birbirinden ayırmak için kullanılan işaretler ve komut dizileridir. Normal
metinden bu takıları ayırmak için “büyüktür” ve “küçüktür” işaretleri kullanılır.
“<“ (küçüktür), “>”(büyüktür) şeklinde görünen komutlara etiket (tag) adı verilir. Kullanılan
çoğu etikette başlangıç ve bitiş etiketleri vardır. Örneğin bir yazıyı koyu yazmak için
kullanılan komut <b>’dir ve sonunda </b> etiketinin kullanılması gerekir.
Kullanılan çoğu etiketin kapatma etiketi bulunduğu gibi sadece başlangıç etiketi olan
kodlarda vardır. Örneğin <br> etiketinin </br> şeklinde bir sonlandırma etiketi yoktur.
HTML’nin Temel Yapısı
HTML de kullanılan etiketler belirli bir düzene göre yazılır. Her HTML dokümanı <HTML> ile
başlar ve </HTML> ile biter.
Bir HTML dokümanı iki ana kısımdan oluşmaktadır:<head> . . . </head> etiketi arasında yer
alan Başlık bölümü;
<body>. . . </body> etiketleri arasında yer alan Gövde Bölümü.
Başlık bölümü içine <title>. . . </title> etiketi konur.
Eğer hazırlanan sayfa Türkçe içerikli ise Türkçe karakterlerin (ç, ğ, ı, , ş, ö, ü) düzgün
görünmesi için Başlık kısmı içerisine aşağıdaki meta etiketi eklenir.
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9"> Title etiketi
ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde'ye geçilir.
Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız.
Masaüstünde
boş bir alanda
sağ tuşa basın
Bir not defteri
açın ve html
kodlarımızı
yazmaya
başlayalım.
• Yazdığımız kodları web dosyası olarak kaydetemek için DOSYA
menüsünden FARKLI KAYDET tıklıyoruz.
• Kayıt penceresinde dosya adını türkçe karakter kullanmadan,
boşluk kullanmadan yazıyor ve sonuna .html diye yazıp
masaüstüne kaydediyoruz.
• Örnek: deneme.html
Basit bir Web Sayfasında Hangi Etiketler
Bulunur?
Basit Bir Web sayfası:
<html>
<head>
</head>
<body>
</body>
</html>
Her web sayfası bu satırla başlar ve
</html> ile biter.
Web sayfasının başlığı,arama
motorlarında bulunması gibi
etiketlerin yazıldığı yerdir.
Web sayfasında görüntülenmesini
istediklerinizi <body> tagının içine
yazmalısınız.
Bir etiket içerisinde varsayılan olarak gelen değeri değiştirmek için bazı parametreler
kullanılır. Aşağıdaki örnekte tablo etiketinin içindeki border ifadesi parametredir ve
tabloya kenarlık verilir. Parametreler her zaman başlangıç etiketi içerisinde ve “” içerisinde
yer almaktadır.
<table border=“1"> Etiketler iç içe geçebilirler ama dikkat edilmesi gereken nokta ilk
açılan etiketin en sonda kapatılmasıdır. Aşağıda yanlış ve doğru uyguluma örneği
verilmiştir.
<b><u>Bu örnek yanlıştır </b></u>
<b><u>Bu örnek doğrudur </u></b>
Kullanım biçimi:
<tag_1> <tag_2> ...... </tag_2> </tag_1>
Title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde'ye
geçilir. Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız. Bir
etiket içerisinde varsayılan olarak gelen değeri değiştirmek için bazı parametreler kullanılır.
Aşağıdaki örnekte tablo etiketinin içindeki border ifadesi parametredir ve tabloya kenarlık
verilir. Parametreler her zaman başlangıç etiketi içerisinde ve “” içerisinde yer almaktadır.
<table border=“1">
Kullanım biçimi:
<tag_adi parametre_adi ="deger">
Örnek:
<body bgcolor="blue">
<html>
<head>
<title> Sayfanın Başlığı </title>
</head>
<body>
Sayfanızın tüm içeriği: resim, yazı, video, vb.
</body>
</html>
HTML, HEAD, TITLE Etiketi
Bu etiketler bir HTML dokümanında olmazsa olmaz diye tabir edilebilecek etiketlerdir.
HEAD etiketi içerisine yazılan diğer etiketler arasında en bilineni TITLE etiketidir. TITLE
etiketi dışında bazı etiketlerde HEAD etiketi altında kullanılmaktadır.
•
•
•
•
•
Boşluk Bırakma:
HTML tarayıcıları, HTML belgenizdeki imler arasında bulunan boşlukları yok sayar.
HTML kodunuzun daha açık seçik görünmesi için bu özelliği lehinizde kullanıp
fazladan boşluklar ve satırbaşları ekleyebilirsiniz. Belge biçimlendirirken bıraktığınız
satırbaşları ve boşlukları sayamazsınız. Satırbaşları ve paragraflar için <P> , <BR>
gibi imleri kullanmalısınız. Ancak paragraflar arasında boşluk bırakmak için birden
fazla <P> imi kullanırsanız bu fazla imler yok sayılırlar. Paragraflar arasında boşluk
bırakmak için başka yöntemler vardır.
Block Level imleri otomatik satırbaşları içerirler. Örneğin H1, BR, UL ya da TABLE
imleri kullanıldığında peşlerinden otomatik olarak birer satırbaşı gelir ve yeni bir
paragraf imi kullanmanız gerekmez.
Boşluk bırakmak için   kullanılır. Her bir   1 boşluk anlamına gelir.
        4 tane boşluk anlamına gelir.
<html>
<head>
<title> Sayfanın Başlığı </title>
</head>
<body>
ADIYAMAN ÜNİVERSİTESİ
KAHTA MESLEK YÜKSEKOKULU
</body>
</html>
<html>
<head>
<title> Sayfanın Başlığı </title>
</head>
<body>
ADIYAMAN ÜNİVERSİTESİ       
KAHTA MESLEK YÜKSEKOKULU
</body>
</html>
Burada 6 karakter boşluk bırakır.
META tagı ve Sayfayı tanımlama
•
•
<HEAD>
HTML belgesinin ilk bölümüdür. WEB sayfası ile ilgili temel özellikler, sayfa başlığı,
yazı karakterler kümesi, link özellikleri burada tanımlanır. Head etiketinin yorum
aralığında <meta> etiketi yer alır. Bu etiket siteyi tarayıcıya ve arama motorlarına
tanıtır. Meta etiketinde kullanılan HTML belgesinin ilk bölümüdür.
Kullanılacak
parametreler
name
http-equiv
Size
Görevi
Author, description ve keywords özellikleri
tanımlanır.
Refresh, expires, content ve content-style-type
özellikleri tanımlanır.
Yazının boyu belirlenir.
WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link
özellikleri burada tanımlanır. Head etiketinin yorum aralığında <meta> etiketi yer alır.
Bu etiket siteyi tarayıcıya ve arama motorlarına tanıtır. Meta etiketinde kullanılan
parametreler şöyledir
<META NAME="author" CONTENT=«FERDİ DOĞAN">
Kodu sayfanın tasarımcı kimliğini gösterir.
<META NAME="Description" CONTENT="Sayfanızın kısa tanıtımını
buraya yapın.">
Kodu sayfanın kısa tanımı yapılmak için kullanılır.
<META NAME="keywords" CONTENT="Sitenizi arama motorlarında
bulduracak siteniz ile ilgili kelimeleri buraya yazın.">
Kodu sayfanın hangi kelimeleri içerdiğini gösterir.Burası arama motorları için çok önemlidir.
<META http-equiv="refresh" CONTENT="5";
URL="http://www.adiyaman.edu.tr">
Refresh ile sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak
açacaktır.
<META http-equiv="expires" CONTENT="Wed, 25 Feb 2007
12:00:00 GMT">
Expires GMT saat sistemine göre belirtilen saat ve tarihte sayfanın dosyası silinecektir.
<html>
<head>
<META NAME="author" CONTENT=«FERDİ DOĞAN">
<META NAME="Description" CONTENT="Sayfanızın kısa tanıtımını
buraya yapın.">
<META NAME="keywords" CONTENT="Sitenizi arama motorlarında
bulduracak siteniz ile ilgili kelimeleri buraya yazın.">
</head>
<body>
ADIYAMAN ÜNİVERSİTESİ
KAHTA MESLEK YÜKSEKOKULU
</body>
</html>
<META http-equiv="Content-Type"
CONTENT="text/html" charset="windows-1254">
Kodu sayfanızda ne tür bir metnin olduğunu (text/html yazmakla metnin düz yazı ve
html belgesi olduğunu) ve karakterlerinin hangi kodlama (windows-1254 yazmakla) ile
yapıldığını gösterir.
<META http-equiv="Content-Language"
CONTENT="tr">
Kodu sayfanızın dilinin Türkçe (istenirse değiştirilebilir.) olduğunu gösterir.
<META http-equiv=”content-style-type”
CONTENT=”text/css”>
Content-typestyle belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu
belirtir.
<META NAME="copyright" CONTENT="© 2015
FERDİ DOĞAN">
Kodu sayfanın telif hakkının kime ait olduğunu gösterir.
<META NAME="GENERATOR" CONTENT=«not defteri">
Kodu sayfanın hangi editörle yapıldığını gösterir.
<META NAME="ROBOTS" CONTENT="ALL, FOLLOW,
INDEX">
Kodu sayfanızı tüm arama motorlarının veritabanına kaydolabilme hakkının
verilmiş olduğunu gösterir.
<META NAME="RATING" CONTENT="GENERAL">
Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla
bütün kategoride olduğu belirtilmiş olur.
SAYFAYA BAŞLIK EKLEME
<TITLE>
Head bölümü içine yazılan title bölümüne
sayfanın başlığı yazılır, tarayıcının sol üst
bölümünde
bulunan
başlık
çubuğunda
görüntülenir.
<HTML>
<HEAD>
<TITLE> Kahta MYO </TITLE>
</HEAD>
<BODY>
bu bizim ilk sitemiz
</BODY>
</HTML>
Not: Kahta MYO yazısını yerine farklı
şeyler yazarak yeniden deneyiniz.
METİN BİÇİMLENDİRME
Başlık imleri <h1>...<h6>
<HTML>
<HEAD>
<title>Kahta MYO Bilgisayar</title>
</head>
<body>
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>
</body>
</html>
Not: H1,h2,h3,h4,h5,h6 tagları içerisindeki yazıları
değiştirin kendi adınızı, ve arkadaşlarınızın adını yazarak
tekrar deneyin.
Body tagları arasına yazılan ve metin biçimlendirme olarak nitelendirilen
tagları gösterelim.
<center>....</center> Aradaki metinleri sayfaya göre ortalar.
<b>....</b>
Aradaki metni koyu (bold) yazar
<i>....</i>
Aradaki metni eğik (italic) yazar.
<u>....</u>
Aradaki metni altı çizili (underline) olarak yazar.
<h1>....<h6>
Başlık (heading) imi. h1 en büyük, h6 en küçük.
<p>....</p>
Aradaki metin paragraf özelliği kazanır.
Sonlandırıldığında, takip eden metin bir satır boşluk bırakılarak ve satır başına
yazılır.
<p> imi, </p> ile sonlandırılmak zorunda değildir.
Kalın, İtalik, Alt Çizgili
Yazı içerisinde belirlenmiş bir kelime yada ifadenin kalın, italik ya da alt çizgili yazılması
istendiğinde kullanılan etiketlerdir.
Kalın (Bold) yazı
<b>bold yazı yani kalın yazı olacak</b>
<em> Vurgulanmış yazı</em>
<strong> Kalın yazı</strong>
Eğik (İtalik) yazı
<i>eğik yazı olacak bu yazı</i>
Altı çizgili (underline) yazı
<u>yazının altı çizili olacak</u>
Üstü çizili
<strike>üstü cizili yazi</strike>
Kalın, italik, altı çizili, üstü çizili taglarını
kullanarak ad soyad, öğrenci no, okuduğunuz
bölüm ve sınıfınızı html sayfasında yazdıracak
tagları yazınız.
Paragraf Etiketi
Paragraf etiketi Web sayfasındaki paragrafları tanımlamak için kullanılır. HTML dili otomatik
olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar. Paragraf etiketinin
varsayılan olan metni “sola” dayalı olarak yazar. Eğer istenirse align parametre özellikleri
değiştirilerek metnin “ortalı” yada “sağa” dayalı olarak yazılabilir.
Paragraf etiketi için <p> etiketi sonlandırmalı olarak kullanılır.
Sola dayalı olması için:
<p>Yazınızı buraya yazacaksınız</p>
Ortada olması için:
<p align=center>Yazınızı buraya yazacaksınız</p>
Sağa dayalı olması için:
<p align=right>Yazınızı buraya yazacaksınız</p>
Birde <br>tagı vardır ki o da bir alt satıra inilmesini sağlar.
<br> yazılan yerde bir alt satıra geçilir
Not: Bu dersle ilgili düşüncelerinizi
farklı yazı biçimleri kullanarak
yazınız. Bazı metinleri kalın bazı
metinleri italik, bazılarını italik ve
kalın vb şekillerde yapınız.
<html>
<head>
<title>University of Adiyaman</title>
</head>
<body>
<h1><center>Sayfama Hoşgeldiniz
</center></h1>
<p>HTML imleri ile,</p> Yazıları
<b>koyu</b>
<i>italik </i> ve
<u>altı çizili</u> olarak yazabiliyorum
</body>
</html>
Not: Üniversiteniz adı, Yüksekokulunuz adı,
Bölüm adı, kendi adınız soyadınızı alt alta
gelecek şekilde yazarak bir uygulama yapınız.
<html>
<head>
<title>br tagı</title>
</head>
<body>
kadir
oğuz
Muzaffer
<br>ferdi<br> doğan<br>
bilgisayar<br>
bölümü</body>
</html>
Font Etiketi
Font etiketi ile varsayılan olarak belirlenmiş metin rengi, boyutu yada yazı tipi özelliği
değiştirilebilir. Bunun için kullanılan etiket <font>..</font> tur. Font etiketi başlangıç
seviyesinde ki kullanıcılar için kullanılırken ileri seviyelerde bu işlem stiller(CSS) ile
yapılmaktadır.
<font> ............... </font>
<font size="3" face="Arial" color="red">ADIYAMAN ÜNİVERSİTESİ</font>
Font iminin kullanımı;
<font face=.... size=.... color=....> </font>
face= yazı tipinin adı (arial, tahoma, verdana, ...)
size= yazının büyüklüğü (1-7 arası)
color= yazının rengi (red, green gibi renklerin ingilizce karşılığı ya da RGB renk değeri yani
“#121212” gibi)
Bunlara font iminin öznitelikleri deniyor.
<html>
<head>
<title>Kahta Bölümler</title>
</head>
<body>
<font face="tahoma" size="3" color="#f00000">Bilgisayar Teknolojileri</font>
<br>
<font face="verdana" size="4" color="#00ff00">Bankacılık ve Sigortacılık</font>
<br>
<font face="arial" size="5" color="#00ffff">Bitkisel Hayvansal Üretim</font>
<br>
<font face="comic sans ms" size="5" color="#ff0000">Muhasebe</font>
<br>
</body>
</html>
Not: farklı tiplerde boyutlarda ve renklerde metin
biçimlendirmesi yapılabilir. Örnek olarak farklı bir yapı
deneyin.
• Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (red-greenblue,kırmızı-yeşil-mavi) renklerinin karışım oranlarını belirtir. Bu
renklerden herbirinin alacağı değer 00 ile FF aralığında olabilir (FF
maksimum, 00 minimum karışımı verir).
•
•
•
•
•
#000000 siyah …
#FF0000 kırmızı …
#00FF00 yeşil …
#0000FF mavi …
#FFFFFF beyaz.
• Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın !
• Varsayılan yazı boyutunu seçmek
• BASEFONT imiyle gövde metninin tamamı için varsayılan boyutu
seçebilirsiniz.
• Daha sonra metnin belli kısımlarında bu boyutu değiştirmek için FONT
imini ya da BIG ve SMALL imlerini kullanabilirsiniz.
• Her HTML belgesinde bir tane BASEFONT imi kullanılır. BASEFONT imine
atanacak değerler 1-7 arasındaki değerlerdir. 3 değeri, tarayıcının
varsayılan değeridir (12 punto).
• 1 ile 7 arasındaki değerler sırasıyla 8,10,12,14,18,24,36 punto değerlerine
karşılık gelir (tabi tarayıcı normal ayarı 12 ise). Tarayıcı ayarına göre bu
büyüklük değerleri ötelenebilir. Kullanımı:
<BASEFONT SIZE=5>
• BIG ve SMALL imleri ardarda kullanıldıklarında gittikçe artan etkiye
sahiptirler:
<BIG><BIG>büyütülecek metin</BIG></BIG>
<small><small>küçültülecek metin</small></small>
• eğer <small> yada <big> tagları kapatılmazsa sonraki metinlerde aynı
büyüklükte devam eder.
Varsayılan rengi seçmek
Metin için varsayılan rengi, BODY imine TEXT özniteliğini ekleyerek
seçebilirsiniz
<BODY TEXT= “#5A83FE”>
bundan sonra metnin belli kısımlarının rengini FONT iminde COLOR
özniteliğini kullanarak değiştirebilirsiniz.
<FONT COLOR= “red”> rengi değişecek metin </FONT>
Bu renklerle yalnızca metinleri değil sayfamızın artalananını da
renklendirebiliriz.
…Bunun için <body bgcolor=#xxxxxx> etiketini kullanıyoruz. Daha doğrusu
sayfamızın gövdesini belirtmek için yazdığımız <body> etiketini,
<body bgcolor=#xxxxxx> şeklinde değiştiriyoruz.
<body bgcolor=#aaff55>
<body bgcolor=#0044cc>
<body bgcolor=#f406a2>
Renklerini deneyelim
• Üstindis oluşturmak için <SUP>,
• Altindis oluşturmak için <SUB> imleri kullanılır.
Bu imlerin kapama imleri de vardır. Tarayıcılar alt ve üstindislerin boyutlarını
otomatik olarak biraz düşürürler. Yine de siz biraz daha düşürmek isterseniz
bu imlerin içinde FONT imiyle küçültme yapabilirsiniz.
Örneğin
yazmak için:
[x<SUB>a</SUB>+Y]<SUP>m</SUP>
ya da örneğin altindis olan a’yı biraz daha küçültmek için:
[x<FONT SIZE=-1><SUB>a</SUB></FONT>+y]<SUP>m</SUP>
yazabiliriz.
Eşaralıklı yazıtipi:
Courier yazıtipindeki gibi daktilo yazısı oluşturmak için <TT>...</TT> ; veya
<CODE>...</CODE> imlerini kullanabilirsiniz.
<tt>daktilo yazısı</tt>
<code> bilgisayar kodu</code>
Yorum eklemek:
Yalnızca kodunuzda yer alacak, tarayıcıdaki görüntüye hiçbir etkisi olmayacak
yorum satırları eklemek için:
<!--yorum metni-->
şeklinde bir satır ekleyebilirsiniz. Yorum metinleri kodu inceleyenler için
kolaylık ya da hatırlatma amacı taşırlar.
RESİM İŞLEMLERİ
Sayfaya resim yerleştirmek
Resim seçiminde, seçtiğimiz resmin gif yada jpg formatında olması
zorunluluğu dışında herhangi bir kısıtlama yok. (telif hakları kanunu dışında
tabi) …Resim ekleme işi gayet kolay. Yapmamız gereken browser'a sayfaya
koyacağı resmin nerede olduğunu göstermekten ibaret.
Her ne kadar şart olmasa da resmin pixel cinsinden en ve boy uzunluğunu
belirtmeniz sizin faydanıza olacaktır. Kullanacağımız etiket şu şekilde olacak;
…<img src="resmin bulunduğu yer ve adı" width="x" height="y">
…Burada x resmin enini y ise boyunu belirtiyor. Bu bilgileri, resmi herhangi
bir grafik editörüyle açarak öğrenebilirsiniz.
<img src="resim/kedi.gif" width="65" height="91">
<IMG SRC=“resim.jpg” BORDER=n ALT=“kahta myo bir
goruntu”>
resim.jpg, resim dosyasının sunucudaki konumudur.
BORDER özniteliği kullanılmayabilir. Piksel cinsinden kenarlık değeri girmek
için kullanılır.
ALT özniteliği, fare resmin üzerine getirildiğinde ya da resim
yüklenemediğinde görüntülenecek alternatif metin girmek için kullanılır.
Resmin bulunduğu klasör belirtmek için;
Bu şekilde ardarda ../ ifadesiyle istediğimiz kadar üst dizine geçebiliriz. …
Eğer iki üste geçeceksek ../../ ifadesi işimizi görecektir.
Resim için boyut belirtmek:
Web sayfası tarayıcı tarafından yüklenirken HTML kodunda yer alan resminiz
yüklenmeden onu takip eden metin yüklenmez.
Fakat resim için boyut belirtirseniz tarayıcı resim için yer ayırıp metin
yüklemeye devam edebilir.
Böylece sayfa daha hızlı yüklenmiş olur. Boyut belirtmek için HEIGHT ve
WIDTH özniteliklerine piksel cinsinden değerler atanır:
<IMG SRC=“ornek.jpg” WIDTH=400 HEIGHT=320 ALT= “deneme
yazısı”>
<html>
<head>
<title>resimler</title>
</head>
<body>
bir resim <br>
<img src="resim.jpg" hight="150"
width="200" alt="resmin üzerine
gelince çıkan yazı">
</body>
</html>
Not: Sayfaya birkaç tane yan yana ve
alt alta resimler koyun ve her bir
resmin altına tanımlayıcı birşeyler
yazınız.
<html>
<head>
<title>resimler</title>
</head>
<body>
bir resim <br>
<img src="resim.jpg"
border="2" hight="150"
width="200" alt="resmin
üzerine gelince çıkan yazı">
</body>
</html>
Resimlerin çevresine metin yerleştirmek:
Bunun için ALIGN özniteliği kullanılır
(yalnızca left ve right değerleri ile). Left
değeri resmi sola, metni onun sağına;
Right değeri resmi sağa, metni onun
soluna yerleştirir.
<img src="resim.jpg"
hspace="50" vspace="50"
border="2" hight="150"
width="200" alt="resmin
üzerine gelince çıkan
yazı">
Not: Bir album oluşturarak albümde
yer alan resimlerin yanlarına resim
hakkında bişeyler yazın. En az 5 resim
için uygulayın
<html>
<head>
<title>resimler</title>
</head>
<body>
bir resim <br>
<img src="resim.jpg" align="left"
border="2" hight="150" width="200"
alt="resmin üzerine gelince çıkan yazı">
buraya yazmış olduğumuz metin nasıl
göründüğüne bakalım. Buna göre metnin
resmin neresinde yer alacağını
buna göre belirleyelim
</body>
</html>
Resmin çevresine boşluk eklemek:
<img src="resim.jpg" hspace="50"
vspace="50" align="left"
border="2" hight="150"
width="200" alt="resmin üzerine
gelince çıkan yazı">
Burada resmin sağına ve soluna 40’ar
piksellik HorizontalSPACE (Yatay Boşluk),
alt ve üstüne ise 10’ar piksellik
VerticalSPACE (Dikey Boşluk) eklenmiştir.
HSPACE ve VSPACE boş piksel sayısıdır.
Resimlerin Kullanımı
Hatırlatmalar:
•
•
•
•
•
Web sayfasının hızlı açılmasını sağlamak için düşük dosya boyutlu resimler
kullanılmalı. GIF ya da JPG formatındaki sıkıştırılmış resimler tercih edilmeli.
Web için yüksek çözünürlük gerekmemektedir. 72 piksel/inch değeri yeterlidir.
Photoshop’ta resim boyutlarını küçültmenin yolu: Image>Image Size ile açılan
pencerede yeni boyutlar girmek.
Tarayıcıların tanıdığı renkleri kullanmak için Color kutusunda “Only Web Colors”
seçeneği işaretlenmeli, ya da “swatches” paleti kullanılamlıdır.
Resmi sonradan tarayıcı güvenli renklere dönüştürmek için: Image>Mode>Indexed
Color komutunu vermelidir.
HR Etiketi
HR etiketi sonlandırma etiketi bulunmayan tagdır. Sonlandırma etiketi bulunmayan
taglar <hr /> şeklinde de yazılabilir.
HR Etiketi’nin Parametreleri
<hr width=100> Çizginin genişliğini ayarlamak için kullanılır.
<hr size=20> Çizginin kalınlığını ayarlamak için kullanılır.
<hr color=#ff0000> Çizginin rengini ayarlamak için kullanılır.
<hr align=right> , left, center Çizginin sayfadaki yatay konumunun sola, sağa
veya ortaya hizalanmasını sağlar.
<html>
<title> HR Etiketi </title>
<body>
<hr>
<hr color=red> ( color Renk verir)
<hr color=blue size=5> (size Kalınlık verir)
<hr color=green width=500>
</body>
</html>
Sayfadaki Öğeleri Ortalamak:
Sayfada ortalamak istediğiniz tüm öğeleri <CENTER> ve </CENTER> imlerinin arasına alarak
ortalayabilirsiniz.
<center> metni ortala</center>
<center> <img src= > </center>
<PRE>
Yazılan metni yazıldığı gibi görmek için kullanılır.
<pre>
Merhaba nasılsın
</pre>
KAYAN YAZI, KAYAN RESİM
Kayan yazı
<html>
<head>
<title>Kayan Yazı örneği </title>
</head>
<body>
<marquee>Bilgisayar Programcılığı</marquee>
</body>
</html>
YAZIYI SAĞA SOLA ÇARPTIRMAK
Ama yazımız sağdan sola doğru kayıyor. Bunu istersek sağa sola çarptırabiliriz. Bunun
için behavior=”alternate” kullanacağız. Bu kodumuz sağa sola çarptırmak için gerekli
olan koddur.
• <MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n
LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>
<html>
<head>
<titl>Kayan Yazı </title>
</head>
<body>
<marquee behavior="alternate"> Kahta MYO </marquee>
</body>
</html>
Metnin ekranda nasıl hareket edeceğini belirten bu ek SCROLL, SLIDE,
ALTERNATE değerlerinden birini alabilir. Ek kullanılmadığında SCROLL değeri varsayılan
olarak kabul edilir ve yazı, sınırın bir köşesinden belirerek diğer köşeden kayarak
kaybolur. SLIDE eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar.
Metnin iki köşe arasında gidip gelmesi ise ALTERNATE ekiyle gerçekleştirilebilir.
<marguee direction=right>,up,down : Sağdan, yukarıdan ve aşağıdan başlayarak
kayması sağlanır
<marquee behavior=alternate> : Yazılar kaydırılırken ekrandan kaybolmadan bir uçtan
diğerine gider
HSPACE=n: Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek özellikle arka
plana bir renk verildiğinde daha da belirginleşir.
<marquee bgcolor=ff00ff> : Kayan yazıların arka plan rengini belirler.
<marquee height=10 width=250> : Yazının kayacağı alanın yüksekliği ve genişliği
ayarlanabilir.
<marquee loop=3> : Yazının kaç kez kayacağı belirlenir. Daha sonra da yazı durur.
<marquee scrolldelay=1> : Kaydırma hızını ayarlar. yazının her bir hareketi arasında
kaç milisaniye bekleyeceğini belirlerN değerine ‘ -1′ veya ‘ INFINITE’ verildiğinde
hareket sınırsız olarak tekrarlanır. Tip olarak ‘ SLIDE’ kullanıldığında bu işlem tek bir kez
gerçekleşeceğinden LOOP ekini kullanmaya gerek yoktur.
BEHAVIOR=tip:
<marquee behavior="alternate" bgColor="red"> renkli bir şerit üzerinde
kayma</marquee> kayan yazının arkaplanını değiştirmiş olduk
<marquee direction="up" bgColor="red"> Adıyaman </marquee> yukarıya
doğru hareket ettirme
<marquee direction="up" bgColor="red" width="100" heigth="800">A Uni
Kahta MYO </marquee> arka plan renkli ve yukarı hareket eden yazı
<marquee width="950" height="100" bgcolor="red">
<img src="es1.jpg" width="100px" heigth="800px">
</marquee> bir resmi kaydirma
<marquee direction="up" width="800" height="400" bgcolor="red">
<img src="es1.jpg" width="100px" heigth="800px">
<img src="es2.jpg" width="100px" heigth="800px">
<img src="es3.jpg" width="100px" heigth="800px">
</marquee> çoklu resim yukarı doğru kaydırma
LİSTELER
Listeler
HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar;
1. Sıralı listeler (ordered list)
2. Sırasız listeler (unordered list)
3. Tanımlama listeleri (definition list)
Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı sağlar.
…
Sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. …
Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya
yardımcı olabilecek bir araçtır.
Sıralı listeler
• Liste içine alınacak metinler <ol>...</ol> imleri arasına alınarak yazılır.
• Bu imler listenin başladığını ve bittiğini belirtir.
• Listenin maddelerinin başına ise <li> (list item) imini getiriyoruz. Bu imte
tıpkı <br> imi gibi sonlandırılmıyor. <ol> imine parametreler
ekleyebiliyoruz.
• Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi
rakam/harfle başlayacağını (start) belirtebiliyoruz. Compact değeri ise
listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor.
• Bundan sonraki örneklerimizde sayfa kodunun yalnız body (gövde)
bölümünü yazıp diğer kısımlarının yazılmış olduğunu varsayacağız.
•
•
•
•
Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak ta mümkün. …
Dikkat edeceğimiz nokta, işe etiketi ile başlayıp liste maddelerinin her birisinin
başına etiketini getirmek ve listelemeyi bitirmek istediğimiz yerde etiketini
yazmak. …
Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra
tekrar etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz. …
Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar,harfler
(küçük/büyük) ve romen rakamları (i,ii,iii gibi)
<html>
<title> Sıralı liste </title>
<body>
<h2>Numaralandırılmış bir
liste:</h2>
<ol>
<li>Domates</li>
<li>Biber</li>
<li>Patlıcan</li>
</ol>
Not: Bu dönem aldığınız dersleri sıralı şekilde
listeleyiniz
</body>
</html>
Sırasız Listeler
•
•
•
Bu tip listede de mantık aynı. Fark, listeleme yaparken maddelerin başına harf, rakam
gibi unsurlar yerine küçük yuvarlaklar, kareler kullanabilmemiz.
<ol> imi yerine <ul> imini kullanıyoruz, maddeler için kullandığımız <li> imi burada da
geçerli.
<ol> için parametreler ise şöyle; type için disc (içi dolu daire), circle (içi boş daire),
square (içi dolu kare). Compact özniteliği sırasız listelerde de kullanılabiliyor.
<h4>Sırasız liste</h4>
<ul type=disc>
<li>Domates</li>
<li>Biber </li>
<li>Patlıcan</li>
</ul>
Tanımlama listeleri
•
•
•
•
Bu listelemede kullanılan imler şöyle; <dl>...</dl> , <dd>...</dd> , <dt>...</dt>.
Listenin maddelerini belirtmek için kullandığımız <li> iminin yerini burada <dd> ve
<dt> imleri alıyor.
Aynı şekilde <ol>...</ol> veya <ul>...</ul> imleri arasına aldığımız listeyi bu sefer
<dl>... </dl> arasına yazıyoruz.
Yine parametre olarak <dl> imi içinde compact ifadesini kullanabiliriz (zorunlu
değil).
<html>
<title> Sıralı liste </title>
<body>
<font face="verdana" size="4" color="red">Derslik
Dağılımı:
</font>
<dl compact>
<dt><font size="4" color="blue">1. Kat:</font>
<dd><font size="3" color="black">1. katta sırasıyla 101..
103 arasındaki derslikler bulunmaktadır. ve 3 adet
bilgisayar laboratuarı </font>
<dt><font size="4" color="blue">2. Kat:</font>
<dd><font size="3" color="black">2. katta ise 201-212
derslikleri yer almakta</font>
<dt><font size="4" color="blue">Zemin</font>
<dd><font size="3" color="black">Tarımsal araştırma
lab. öğrenci işleri kütüphane bulunmakta</font> </dl>
</body>
</html>
LİNK-BAĞLANTI-KÖPRÜ
OLUŞTURMA
Link-Köprü oluşturma
HTML’nin en önemli unsurlardan birisi bağlantılardır (linkler). Bağlantılar
sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili hale getirebiliriz. Bir
tıklama bizi istediğimiz yere götürecektir.
HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür. Bu yolla
ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri gibi yerlere
bağlantı yapmak mümkündür. Hatta yapacağımız bağlantı sayfa içinde, yani
dahili bir bağlantı da olabilir.
Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim:
<a href="....">...</a>
Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı
bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir
dosyaya ulaşmasını sağlayabilirsiniz. Yani bu tanıma göre bildiğimiz
bağlantıları oluşturmak mümkündür.
Şimdi aşağıdaki örnekleri birlikte inceleyelim, fakat öncelikle bir kuralı
belirtelim; <a>...</a> imi arasına yazdığımız yazılar bağlantı özelliğine sahip
olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından
altı çizili ve mavi renkli gösterilir.
<a href="meyve.gif"> buraya tıklandığında meyve resmi açılacak </a>
• Bağlantı kurulan bir resim değil bir dosya ya da bir sayfa yada bir video
şeklinde de olabilirdir. Yine benzer bir yapıyla bir word dokumanını
internet üzerinden link vererek açabiliriz.
<a href="word.docx"> Word dosyasını aç </a>
<a href="dersler.zip"> sıkıştırılmış bir dosya </a>
En çok kullanılacak olan köprü biçimi sayfalar arası gerçekleştirilen köprü şeklidir.
<a href="sayfa2.htm"> 2.sayfaya gitmek için tıklayın </a>
Burada sayfa2 adindaki html dosyası açılacaktır. Ancak sayfa2 adındaki html
dosyası ile bu kodların yazıldığı html dosyası aynı klasör içerisinde yer
almalıdır.
İnternet üzerindeki bir web adresine gitmek için ise
<a href="http://www.adiyaman.edu.tr/"> Adıyaman üniversitesi
</a>
Bu örnekte bir internet adresi verdik.
<a href="mailto: [email protected]"> mail atın
</a>
Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in
send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.
Metinlere bağlantı vermeyi öğrendik, sayfadaki resimlere link vermek için resmi
yerleştirmek için kullandığımız:
<img src="..." width="x" height="y">
imini <a href>...</a> iminin arasına alıyoruz. İşte örnek;
<a href="sayfa1.htm"><img src="resim.gif" border="0"></a>
resim.gif tıklanacak resmi, sayfa1.htm resme tıklandığında açılacak sayfayı
gösteriyor. "Border" komutu ise resimde bağlantı özelliği olduğunu belirten
çerçeveyi kontrol ediyor, 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. Bu
komutu değişik sayılarla deneyebilirsiniz.
Target özniteliği:
Son olarak bağlantının açılacağı pencereyi belirtmek için kullanılan
"target" özniteliğini öğrenelim;
Kullanımı:
<a href="..." target="..." ></a>
target="_blank":
Bağlantı yeni bir pencerede açılır.
target="_self" :
Bağlantı aynı pencere içerisinde açılır.
target="_top" :
Bağlantı aynı pencere içerisinde en üstten
itibaren açılır.
target="_parent":
Açılan bağlantı, o anda açık sayfayı oluşturmuş
bir ana sayfa varsa onun yerine konur.
target= "çerçeve adı": Frame komutu ile çerçeve oluşturulmuşsa
bağlantının adı verilen çerçevede açılmasını sağlar.
• Önümüzdeki hafta herkes kişisel bir site
hazırlayıp getirecek.
TABLOLAR
Tablolar
<table>...</table>
Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin
sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz
HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin
tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle
yapamayacağınız gerçek düzenlemeyi yapabilirsiniz.
Tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için
de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya
tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca
tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:
•
•
•
•
Tablo oluşturma <table> ile başlar </table> ile sona erer.
Tablolar içerisinde satır oluşturmak için <tr> …</tr>
Sutun oluşturmak için ise <td>…</td> kullanılır.
Border tabloda kenarlık vermek için kullanılır. Kenarlık
verilmezse tablo olup olmadığı belli olmaz
<tr>
<td> hücre <td>
<tr>
1 satır 2 hücre
2 satır her satırda 1 hücre
2 satır ve her satırda 2 hücre
• Profesyonel bir sitede tablolarda border kullanılmaz. Border=0 olarak
verilir. Ancak burada öğrenirken tabloları görebilmek için border=1
veriyoruz.
• <table bgcolor=#aacc33> şeklinde tablo için arka plan rengi verilebilir
• <td bgcolor=#ff0044> şeklinde ise sadece bir hücre içindeki arkaplan rengi
değiştirilebilir.
• <table background=resim.jpg> ile tablo için arkaplan resmi yerleştirilebilir.
• <table cellspacing=0> tablo içeriisndeki hücreler arası mesafeyi belirler
• <table cellpadding=0> hücre içerisindeki metnin hücre duvarına olan
uzaklığını belirler.
• <tablle background=”arkaplanresmi.jpg”> arkaplan resmi belirler
<table bgcolor=#aaff00 cellpadding=0 cellspacing=0 border=1>
<tr>
<td bgcolor=#ff44aa width=100 hight=50> bir hucre</td>
<td > iki hucre</td>
<td> uc hucre</td>
<td> dort hucre</td>
</tr>
</table>
Tablolarda Başlıklar
Başlıklar <th> etiketi ile belirtilir.
<table border="1">
<tr>
<th>Başlık</th>
<th>Başka Başlık</th>
</tr>
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>Satır 2, Hücre 2</td>
</tr>
</table>
Bir Tabloda Boş Hücreler
Veri içermeyen hücreler bir çok tarayıcıda
görüntülenmezler.
<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td></td>
</tr>
</table>
Boş hücre etrafındaki iç kenarlıkların
görünmediğine dikkat edin. (Mozilla Firefox
bunu görüntüler).
Bundan kurtulmak için, ( ) özel
karakterlerini boş hücre içine ekleyerek
kenarlıkların görüntülenmesini sağlayabilirsiniz.
<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td> </td>
</tr>
</table>
Tablolarda satır ve sütun birleştirme
• Colspan etiketi tablo içerisindeki aynı satırda yer alan hücreleri
birleştirmek amacıyla kullanabileceğimiz bir etikettir. 2 satır 3 sütun
(hücre) hücre içeren bir tabloda 1 satırda yer alan sütunlar (hücreleri) tek
sütun yapabiliriz.
• Birleştirilecek olan hücreler hangi satırda ise o hücrenin başlangıcında td
tagı içerisine colspan=3 yazılarak 3 hücre birleştirilmiş olur
• Rowspan etiketi ise tabloda aynı sutunda bulunan hücreleri bireştirmek
için kullanılır. İlk hangi satırda başlıyor ise o satırın td bloguna yazılır.
<html>
<head>
<title>hücre birleştirme</title>
</head>
<body>
<table border=”1″>
<tr align=”center”>
<td colspan=”3″ width=”200″>1</td>
</tr>
<tr align=”center”>
<td width=”50″>2</td>
<td width=”100″>3</td>
<td width=”50″>4</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>sutun birleştirme</title>
</head>
<body>
<table width=200 border=1>
<tr align=center>
<td rowspan=2 width=100>1</td>
<td width=80>2</td>
<td width=50>3</td>
</tr>
<tr align=center>
<td width=80>4</td>
<td width=50>5</td>
</tr>
</table>
</body>