42740-Web Tasarımının Temelleri-5

METİN VE GÖRÜNÜM
ETİKETLERİ
İÇİNDEKİLER
• Metin Düzenleme Etiketleri

• Metin İle İlgili Bazı Etiketler
• Görünüm Düzenleme Etiketleri WEB TASARIMIN
TEMELLERİ
Prof. Dr. Muhammet

Dursun KAYA
• Bu üniteyi çalıştıktan sonra;
HEDEFLER
•Metin biçimlendirme etiketlerini

kullanılabilecek,
•Bazı metin düzenleme ile ilgili
etiketler hakkında bilgi sahibi
olabilecek,
•web sayfalarında görünüm
düzenleyebilecek etiketler
hakkında bilgi sahibi
olunabilinecektir.
ÜNİTE
1
ÜNİTE
© Bu ünitenin tüm yayın hakları Atatürk Üniversitesi Açıköğretim Fakültesi’ne aittir. Yazılı izin alınmadan
5
ünitenin tümünün veya bir kısmının elektronik, mekanik ya da fotokopi yoluyla basımı, yayımı, çoğaltımı ve
dağıtımı yapılamaz.
Metin ve Görünüm Etiketleri
font
METİN DÜZENLEME ETİKETLERİ HR
Özel Karakter
Eklemek
mark
METİN ve GÖRÜNÜM
ETİKETLERİ abbr
METİN İLE İLGİLİ BAZI
ETİKETLER
meter
progress
bgcolor
GÖRÜNÜM DÜZENLEME
ETİKETLERİ
background
Atatürk Üniversitesi Açıköğretim Fakültesi 2

GİRİŞ
Yazı tipi boyutu ve rengini belirlemek için <font> etiketi kullanılır. Font
etiketi ile metin renklendirilebilir, yazı tipi ve boyutu değiştirilebilir. Metinlerin
yazıtipini, boyutunu ve rengini belirlemek için stil sayfaları da kullanılır. Sayfadaki
tüm metnin yazı tip, boyutu ve rengini belirlemek için veya birkaç özelliğini
belirlemek için <body> etiketinin içine <font> etiketi yerleştirilir. Web sayfasındaki
bölümleri ayırmak için <hr> yatay çizgi etiketinden yararlanılır. Klavyedeki bazı
karakterleri özel karakter olarak kullanmak gerekebilir, bu durumda & işareti ile
birlikte nesne numarasından yararlanmak gerekir. Bazen metinleri dikkat çekmek
için <mark> etiketinden yararlanırız. Ulusal ve uluslararası TRT, TSE ve UNESCO
gibi bazı kısaltmalar için <abbr> etiketinden yararlanılır. Maç, sınav ya da süreli her
hangi bir olayın ilerleme ya da yüzdelik durumunu izlemek için <meter> ve
<progress> etiketleri kullanılır. Sayfanın arkasında yer alan renge arka plan rengi
denir ve body etiketi parametresinde kullanılır. Renk formatı kodu RRGGBB'dir.
Her biri üç ana renkten oluşmaktadır Kırmızı, Yeşil ve Mavi (R=red, G=green,
B=blue). Renk biçiminde RR kırmızı, GG yeşil ve BB ise mavi rengini temsil eden
hexadecimal (onaltılık sayı sistemi) değerleridir. Bazen arka plan rengi gibi web
sayfaları için arka plan resmi de kullanılabilir. Metin renklerine ön plan rengi denir.
Arka plana renk verirken açık renkler tercih edilmelidir. Koyu renkler metinlerin
okunmasını zorlaştırmaktadır.
METİN DÜZENLEME ETİKETLERİ

<font> Etiketi
Font etiketi sahip olduğu parametreler sayesinde metinlerin renk, yazı tipi,
boyut gibi özelliklerini değiştirmede kullanılır. Font etiketinin parametreleri ve
<font> etiketi HTML5 kullanım şekli aşağıda görüldüğü gibidir [1, 2, 4, 5, 8, 10].
tarafından <font face="isim" size="n" color="#XXXXXX">…</font>
desteklenmez.
Dolayısıyla CSS Tablo 5.1. <font> etiketinde kullanılabilecek parametreler aşağıdaki tabloda
kullanılarak font’tan görülmektedir.
yararlanılır. Kullanılacak parametreler Görevi
Face Yazı tipi (arial, tahoma, verdana, ...)
Size Yazının büyüklüğü (1-7 arası)
Color Yazının rengi

Color: (red, green ve blue) gibi renklerin İngilizce karşılıkları olan kelimelerin
ilk harflerinin bir araya getirilmesi ile RGB elde edilmiştir. RGB bir renk değeridir.
Bir etiketin herhangi bir parametresine atanan değer, o etiketin oluşturduğu
alan içerisinde geçerlidir. Örneğin, <font color="blue"> ...</font> ifadesi, sadece
“...” ile gösterilen alan içerisine yazılanları mavi yapar.

Face
Face parametresi bazı WEB tarayıcıları tarafından desteklememektedir.
Face parametresi ile sayfada resim kullanmadan oldukça güzel görüntüler elde
edilebilir. Örneğin Face="Arial Tur" parametresi kullanıldığında yazı tipi Türkçe
Arial olacaktır. Face değerine Türkçe desteği olmayan yazı tipleri verilmemelidir,
verilirse bazı Türkçe karakterler bozuk olarak görülecektir [1, 2, 4, 5, 8, 10].
Size
Metnin büyüklüğünü ayarlar, bu değişkene -1, +2 gibi değerler verilerek
metnin büyüklüğünün bir eksiltilmesini veya iki artırılması sağlanabilir. Direkt
olarak bir rakam vererek de kullanılabilir. WEB sayfası tasarımlarında yazı tipi çok
büyük olmamalıdır, büyük yazı tipleri hem kullanıcıların sayfayı okumasını
zorlaştırır, hem de sayfanın güzelliğini bozar [1, 2, 4, 5, 8,10].
Color
Color parametresi ile yazının rengi (red, green gibi renklerin İngilizce karşılığı
ya da RGB renk değeri) belirlenir. HTML'de renkler hexadecimal (onaltılık) sayı
<font> etiketinin sistemi ile ifade edilir. Bir renk 16'lık sayı düzeninde 6 rakamdan oluşur. Bu
parametreleri olan düzende 9'dan sonraki sayıları göstermek için A’dan F’ye kadar olan harfler
color, face ve size
kullanılır. Bununla birlikte HTML bazı renklerin İngilizce isimlerini de anlar,
HTML5 tarafından
desteklenmez. aşağıdaki örnekte bu renkleri ve İngilizce karşılıklarını görmektesiniz [1, 2, 4, 5,
8,10].
Tablo 5.2. Renkler ve onaltılık sayı kod karşılıkları
Renk adı Renk Renk kodu

Siyah #000000
Mavi #0000ff
Yeşil #008000
Kırmızı #ff0000
Beyaz #ffffff
Sarı #ffff00
Gri #808080
Kahve #964B00
Cyan #00ffff
<font> etiketi parametreleri ile birlikte kullanıldığı örnek aşağıda yer

almaktadır.

Şekil 5.1. font etiketi ve parametrelerinin tarayıcı ekran çıktısı
Yukarıda tarayıcı ekran çıktısı yer alan örneğin kaynak kodları aşağıda
görüldüğü gibidir.
Uygulama:
<html>
<head>
<title>font komutu</title>
</head>
<body>
<font face="comic sans ms" size="7" color="green">ATA-AÖF</font><br>
<font color="#ff0000">Bilgisayar</font><br>
<font face="monotype corsiva">Programcılığı</font><br>
<font size="5">Önlisans Programı</font><br>
</body>
</html>
<hr> Yatay Çizgi Etiketi

Tarayıcı penceresinde yatay çizgi oluşturur. Çizginin uzunluğu kod içinde
belirtilebilir [2, 4, 5, 6, 8].
HTML’de kullanılan Uygulama:
(<hr />) etiketinde yer <html>
alan kapanıştaki boşluk
<head>
ve eğik çizgi zorunlu
değildir ama XHTML’de <title>Yatay Çizgi</title>
zorunludur. </head>
<body>
<h3>Bilgisayar Programcılığı Önlisans Programı</h3>
<hr>
Bilgisayar Programcılığı Programı, bilişim teknolojilerini kullanabilecek
teknik bilgi ve beceriye sahip, gelişen teknolojiye kolayca uyum
sağlayabilen
programcılar yetiştirmeyi amaçlayan, eğitim süresi 2 yıl olan bir önlisans
programıdır.
<br>

</body>
</html>
Yukarıda kaynak kodu görülen örneğin tarayıcı çıktısı aşağıda görüldüğü
gibidir.
Şekil 5.2. <hr> etiketi örneği

Tablo 5.3. <HR> etiketinde kullanılabilecek parametreler
Kullanılacak parametreler Görevi
Yatay çizgisinin başlangıcını belirler (left: sola dayalı,
align
center: ortalı, right: sağa dayalı olmasını sağlar)
Size Yatay çizgisi kalınlığını belirler
Width Yatay çizgisi uzunluğunu belirlenir
Şekil 5.5. <hr> etiketinin parametrelerinin kullanıldığı örnek

Bireysel Etkinlik
• Yukarıda <hr> etiketinin parametreleri ile birlikte kullanıldığı

örneğe ait tarayıcı çıktısını elde edebileceğiniz kaynak kodu
yataycizgi2.html isimli dosya şeklinde oluşturarak aynı görüntüyü
elde etmeye çalışınız.

Özel Karakterler Eklemek

Ancak bazı karakterler klavyede olmasına rağmen html için özel anlam
içerdikleri için özel karakter olarak tanımlanmaları gerekir. Örneğin < karakterini
klavyeden yazarsanız bu etiket olarak algılanır. Ancak bunu özel karakter olarak
Klavyede olmayan
karakterlere özel eklerseniz küçüktür karakteri olarak algılanır.
karakterler denir. Özel karakterler & işareti ile başlar ve özel karakter adı veya nesne numarası
yazılıp noktalı virgül ile bitirilir [2, 4, 5, 8].
En sık kullanılan özel karakterler aşağıdaki listede yer almaktadır.
Tablo 5.4. Özel karakterler
Simge Karakter Adı Karakter Numarası
(ve) & & &
(küçüktür) < < <
(büyüktür) > > >
(boşluk) &# 160;
(telif hakkı) © © ©
(tescilli marka) ® ® ®
(derece) 0 ° °
(artı veya eksi) ± ± ±
(ticari marka) ™ ™ ™
Türk lirasının UTF-8 para birimi sembolünü elde eden html’deki özel
karakter kodu ve tarayıcı ekran çıktısı sırasıyla aşağıda şekil 5.6 ve şekil 5.7 de yer
almaktadır.
<html>
<body>
<p>e-postada kullandığımız at işaretinin sembolü @ dir</p>
<p>e-postada kullandığımız at işaretinin sembolü @ dir</p>
</body>
</html>
Yukarıdaki uygulamada 4. Satırdaki @ işareti onluk sayı sistemi (decimal) ile
elde ediliyorken, 5. Satırdaki @ işareti onaltılık sayı sistemi (hexadecimal) ile elde
edilmiştir.
Özel karakter elde
ederken onaltılık sayı
sistemi tercih
edildiğinde &
işaretinden sonra #
sembolü kullanılmalıdır.
Şekil 5.3. Özel karakter kod kullanımı ile @ işaretinin elde edilişi

METİN İLE İLGİLİ BAZI ETİKETLER

<mark> Metinlerin Vurgulanması
Önemli metinler bazen daha dikkat çekici hale getirmek için üstünü sanki
fosforlu kalemle çizmiş gibi yapılabilir. Bu işlemi <mark> etiketi ile yapmak
mümkündür. Örneğin bir öğrenci sınavlara çalışırken kitap ya da defterdeki önemli
bilgilerin üstünü fosforlu kalemle çizmesi gibi bir görüntü oluşturulabilir.
Aşağıdaki örnekte mark etiketi kullanılarak bazı metinlerin vurgulu hali
görülebilmektedir [2, 4, 5, 8].
<html>
<head>
<meta charset="utf-8">
<title>Metinlerin vurgulanması</title>
</head>
<body>
<h3>Bilgisayar Programcılığı Önlisans Programı</h3>
<hr>
HR etiketi tarayıcı penceresinde yatay çizgi oluşturur.
<mark> Çizginin uzunluğu </mark>
kodu içinde belirtilebilir.
<br>
</body>
</html>
Yukarıdaki kodların tarayıcı ekran çıktısı şekil 5.4.’te görülebilmektedir.
Şekil 5.4. <mark> etiketi örneğinin tarayıcı ekran görüntüsü
<abbr> Kısaltma ve Terimlerin Belirtilmesi

Ziyaret ettiğimiz birçok web sayfalarında bazı kullanıcılar tarafından bilinen
ÖSYM, YÖK, MEB ve ATA-AÖF gibi kısaltma kullanıldığını fark etmişizdir. Bu
kısaltmaların anlamlarını açıklamak için <abbr> etiketi kullanılmaktadır. Aşağıdaki
<abbr> etiketi örneğinin kodunun ekran çıktısını şekil 5.5 de görebilirsiniz [2, 4, 5,
8].
<html>
<head>
<title>Metinlerin vurgulanması</title>
</head>

<body>
<p><abbr title="Atatürk Üniversitesi, Açık Öğretim Fakültesi">ATA-
AÖF</abbr>
02.06.2010 tarih ve 27599 sayılı Resmi Gazete'de yayımlanarak yürürlüğe
giren 14.04.2010 tarih ve 342 sayılı Bakanlar Kurulu Kararı ile kurulmuştur.
Kuruluşu ile birlikte idari, akademik ve fiziki teşkilatlanma çalışmalarını
tamamlayan Fakülte 2011 - 2012 eğitim - öğretim yılında 3 Lisans, 2
Önlisans ve 1 Lisans Tamamlama programı olmak üzere toplam 6
programla faaliyetlerine başlayan Fakülte bünyesinde bugün 4 Lisans, 24
Önlisans ve 3 Lisans Tamamlama programı olmak üzere toplam 31
program yürütülmektedir. ATA-AÖF İlk mezunlarını
2012-2013 eğitim - öğretim yılında vermiştir.
</body>
</html>
<abbr> etiketini yukarda yer alan kodunun tarayıcı ektran çıktısı aşağıda yer
aldığı gibidir.
Şekil 5.5. <abbr> etiketi örneğinin tarayıcı ekran görüntüsü
Meter ve Progress Etiketleri

Belli bir olayın ilerleme durumunu ya da yüzdesini izlemek için HTML5 ile
birlikte gelen <meter> ve <progress> etiketleri kullanılabilir. Örneğin siz ya da bir
yakınınız 180 dakikalık ÖSYM sınavına girmiş ve bu sirenin 135 dakikasını geride
bırakmış iseniz mevcut durumu aşağıdaki şekil 5.12’de meter etiketi kodunu ve
şekil 5.13’de ise meter etiketinin tarayıcı ekran çıktısını izleyerek anlayabilirsiniz
[2, 4, 5, 8].
<html>
<head>
<title>meter</title>
</head>
<body>
<p>Sevgili öğrenciler, bildiğiniz gibi sınav süreniz 180 dakikadır. Sınav
sürenizin 135 dakikası bitmiş ve geriye sadece 45 dakikanız kalmıştır.
Kalan süreyi ona göre kullanınız.
<meter min="0" max="180" value="135">135</meter>
</body>
</html>

Yukarıda <meter> etiketi örneğinin kullanımı yer almaktadır ve tarayıcı

ekran çıktısı şekil 5.6.’da görülmektedir.
Şekil 5.6. <meter> etiketi örneğinin tarayıcı ekran görüntüsü
Yukarıdaki örnek incelendiğinde, <meter> etiketi ile ÖSYM sınavının toplam

süresinin 0-180 dakika arası değerleri gösteren bir çubuk görülebilmektedir. Geçen
sürenin bizim tarafımızdan verilen değerinin ise (value) 135 dakika olması ise
çubuğun dolu kısmını göstermektedir. Eğer değer 180 olsaydı çubuğun tamamı
dolu (yeşil) görünecekti. Görüldüğü gibi, <meter> etiketinin min özelliği minimum
değeri, max özelliği maksimum değeri ve value özelliği ise anlık değerini
göstermektedir.
Eğer tarayıcınız <meter> etiketini desteklemiyorsa çubuk yerine <meter>
etiketi içine koyulan metni, yani 135 değeri görülür (bk. şekil 5.7.).
Şekil 5.7. <meter> etiketinin desteklenmediği tarayıcı ekran görüntüsü
<meter> etiketinin bir benzeri ise <progress> etiketidir. Bu etiket bize bir
işlemin % kaç oranında bittiğini gösterir. Örneğin, bir dosyayı kopyaladığınızı ve
dosyanın %75’lik kısmı kopyalandığını gösteren aşağıdaki şekil 5.15 ve şekil 5.16
kod ve ekran çıktılarını inceleyebilirsiniz.
<<html>
<head>
<title></title>
</head>
<body>
<P>
Yüklemeye çalışılan dosyanın
<progress min="0" max="100" value="75">%75</progress> kopyalanan
durumu.
</p>
</body>
</html>
Yukarıda <progress> etiketi örneği yer almakta olup tarayıcı ekran çıktısı
aşağıda şekil 5.8.’de görülebilmektedir.
Şekil 5.8. <progress > etiketi örneğinin tarayıcı ekran görüntüsü

<progress> etiketi <meter> etiketinden ekran görüntüsü olarak biraz

farklıdır. Eğer tarayıcı <progress> etiketini desteklemezse çubuk yerine <progress>
etiket içindeki metin görüntülenir.
GÖRÜNÜM DÜZENLEME ETİKETLERİ

Bgcolor – Arka plan Rengi Düzenleme Etiketi
Aşağıdaki body etiketi parametresinde kullanılan arka plan rengi yeşil
olacaktır. Renk formatı kodu RR GG BB'dir. Her biri üç ana renkten oluşmaktadır
Kırmızı, Yeşil ve Mavi (R=red, G=green, B=blue). Renk biçiminde RR kırmızı, GG
yeşil ve BB ise mavi rengini temsil eden hexadecimal (onaltılık sayı sistemi)
değerleridir. İki basamaklı onaltılık sayı 00 ile FF arasında, yani ondalık olarak 0 ila
255 arasında herhangi bir değer olabilir. Yani 00FF00 yazarsak sonuç saf yeşil
renkte olacaktır. Bu şekilde 16 milyon renk üretilebilir [2, 3, 4, 5, 7, 8, 10].
Kullanım biçimi:
<etiket_adi parametre_adi ="deger">
<HTML>
<HEAD>
<TITLE>Arka plan renk örneği</TITLE>
</HEAD>
<BODY bgcolor="#00FF00">
Sayfanızın tüm içeriği: resim, yazı, grafik, animasyon vb.
her şey buraya yerleştirilir.
</BODY>
</HTML>
Örnek:
<body bgcolor="#00FF00">
Etiketinin örnek kodları yukarıda yer almakta olup şekil 5.9.’da tarayıcı
ekran çıktısı elde edilebilir.
Şekil 5.9. <body> etiketinin bgcolor parametresinin ekran çıktısı
<bgcolor> etiketinin <table> ile birlikte kullanıldığı bir başka örnek aşağıda
yer almaktadır.
Aşağıda yer alan arka plan rengi (bgcolor) etiketinin <table> etiketi ile
birlikte kullanılışını görmektesiniz.

Uygulama:
<HTML>
<HEAD>
<TITLE>Hücre Rengi</TITLE>
</HEAD>
Yandaki örnek, 7. <BODY>
ünitede <table> <TABLE border="1" cellpadding="7">
etiketinden <tr>
yararlanılarak
<td bgcolor="#ffaa11">TURUNCU</td>
gerçekleştirilmiştir.
</tr>
<tr>
<td bgcolor="#1dede1">TURKUAZ</td>
</tr>
</TABLE>
</BODY>
</HTML>
Tablo hücre içinin rengini belirleyen yukarıdaki kaynak kodlardan elde
edilen tarayıcı ekran çıktısı sonucu aşağıda yer almaktadır.
Resim dosyası, html

dosyasıyla aynı klasörde
olmalıdır.
Şekil 5.10. bgcolor etiketinin <table> ile birlikte kullanıldığı örneğin ekran çıktısı
Background – Arka plan Resmi

Arka plan rengi gibi web sayfaları için arka plan resmi de kullanılabilir. HTML
kodunda <body> etiketi sayfanın arka planı olarak bir resim dosyası adı içerecek
şekilde genişletilebilir. Varsayalım ki bir "ataaof.gif" resmini arka plan olarak
kullanmak istiyoruz. Resim dosyası, html dosyasıyla aynı klasörde olmasına özen
gösterilmelidir, aksi takdirde tarayıcı resmi bulamayabilir. Veya dosya yolunu
resim dosyası adına ekleyerek çıkabilecek problem çözülebilir [2, 3, 4, 5, 7, 8, 10].
<html>
<head>
<title>Arkaplan resim örneği</title>
Resim dosyası adının
URL’den sonra parantez </head>
içinde yazıldığından <body background="ataaof.gif">
emin olun.
Açık Öğretim Fakültesine hoşgeldiniz...

</body>
</html>
<body> etiketinin background parametresi ile birlikte kullanılmasının
uygulaması yukarıda yer almaktadır. Bu uygulamanın tarayıcı ekran çıktısı ise şekil
5.11.’den izlenebilir.
Şekil 5.11. <body> etiketinin background parametresinin ekran çıktısı
Arka plana eklediğiniz resim doküman boyutundan küçükse, resim yatayda

ve dikeyde tekrarlanır. Sadece yatayda, tekrarlanmasını istiyorsanız repeat-x,
sadece dikeyde tekrarlanmasını istiyorsanız repeat-y, tekrarlama olmaması için
no-repeat seçeneğini kullanabilirsiniz. Aşağıda tekrarlanma istenmeyen kod için
örnek yer almaktadır.
<html>
<head>
<title></title>
<style>
body
{
background-image:url('ata-aof.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>
Arka plan resminde tekrarlamanın olmaması durumu ile ilgili kod yukarıda
yer almaktadır.

Arka plana resim eklerken resmin tekrarlanmasının istenmediği durumunun

ekran çıktısı ise aşağıda yer almaktadır.
Şekil 5.12. Arka plan resminin tekrarlanmaması istenilen örneğin ekran çıktısı
Arka plan rengini belirlerken aynı zamanda ön plan ve arka plan renklerini
de belirleyebilirsiniz.
<html>
<head>
<title>Arkaplan resmi eklemek</title>
<style>
Resim dosyasının body
adresini yazmak {
zorunda kalmamak için background-image:url('paper1.jpg');
HTML dosyası ile aynı background-repeat:repeat-y;
klasörde olmasına özen }
gösterin. </style>
</head>
<body>
<p>ATA-AÖF'ye hoşgeldiniz.</p>
</body>
</html>
Şekil 5.13. Arka plan rengini belirleyen örneğin ekran çıktısı
Arka plana renk eklemeye yönelik yukarıda yer alan kodun tarayıcı ekran
çıktısını aşağıdan izleyebilirsiniz.

•Font etiketi sahip olduğu parametreler sayesinde metinlerin renk,

yazı tipi, boyut gibi özelliklerini değiştirmenize olanak sağlar.
Özet Parametreleri ise: face, size ve color'dur.
•<hr> yatay çizgi etiketi, tarayıcı penceresinde yatay çizgi
oluşturmaya yarar. Çizginin uzunluğu, konumu ve kalınlığı, sırasıyla;
width, align ve size parametreleri ile belirlenir.
•Klavyede olmayan bazı özel karakterleri tanımlamak mümkündür.
Özel karakterler & işareti ile başlar ve özel karakter adı veya nesne
numarası yazılıp noktalı virgül ile bitirilir.
•<mark> etiketi ile önemli metinler daha dikkat çekici hale
getirilebilir.
•<abbr> etiketi birçok Web sayfalarında bazı kullanıcılar tarafından
bilinen kısaltmaların anlamlarını açıklamak için kullanılmaktadır.
•<meter> ve <progress> etiketleri belli bir olayın ilerleme durumunu
ya da yüzdesini izlemek için kullanılır. Bu işlemler HTML5 ile birlikte
gelen özelliklerdir. Bazı tarayıcılar <meter> etiketini
desteklemeyebilir. Bu durumda çubuk yerine <meter> etiketi içine
yazılan rakam görülür. <progress> etiketi <meter> etiketinin bir
benzeridir. Bu etiket bir işlemin % kaç oranında bittiğini gösterir.
<progress> etiketi <meter> etiketinden ekran görüntüsü olarak
biraz farklıdır. Eğer tarayıcı <progress> etiketini desteklemezse
çubuk yerine <progress> etiketi içindeki metin görüntülenir.
•<bgcolor>, sayfa arka plan rengini belirlemede kullanılır. Bu etiket;
<body> ve <td> ile kullanıldığında sayfa arka plan rengi ve hücre
rengini belirlenir. Arka plana resim eklerken body etiketi ile birlikte
style değişkeninden yararlanılır. Arka plan renk format kodu olarak
RRGGBB kullanılır. Bunların her biri üç ana renkten oluşur Kırmızı,
Yeşil ve Mavi (R=red, G=green, B=blue). RR kırmızı, GG yeşil ve BB
ise mavi rengini temsil eden hexadecimal (onaltılık sayı sistemi)
değerleridir. Arkaplana renk verilebilirken web sayfalarına arkaplan
resmi de kullanılabilir. Resim dosyası, html dosyasıyla aynı klasörde
olmalıdır, olmadığı takdirde tarayıcı resmi bulamaz ve resim
görüntülenmez. Bunun dışında dosya yolunu resim dosyası adına
ekleyerek çıkabilecek sorunlar ortadan kaldırılabilir. Arka plana
eklenen resim, doküman boyutundan küçükse, resim yatayda ve
dikeyde tekrarlatılmalıdır. Yatayda tekrarlanması isteniyorsa
repeat-x ile, dikeyde tekrarlanması istenğinde ise repeat-y
kullanılmalıdır. Tekrarlama istenmiyorsa no-repeat seçeneği
kullanılır.

DEĞERLENDİRME SORULARI
1. Aşağıdakilerden hangisi HTML’de yazı tipi boyutunu ve rengini düzenleyen
etikettir?
a) <end>
b) <begin>
c) <title>
d) <font>
e) <head>
2. Aşağıdaki hangi font etiketi parametreleri ile yazı tipi belirlenir?

a) face
b) ground
c) right
d) size
e) color
3. Yazı büyüklüğünü 7 yapmak için aşağıdaki font etiketlerinden hangisi

kullanılır?
a) <font name size=”7”>
b) <font weight=”7”>
c) <font size=”7”>
d) <font height=”7”>
e) <font name weight=”7”>
4. HTML sayfasının arka zeminini sarı (yellow) yapmak için aşağıdaki hangi
body parametresi kullanılır?
a) <body color=”yellow”>
b) <body color name=”yellow”>
c) <body set=”yellow”>
d) <body background=”yellow”>
e) <body bgcolor=”yellow”>
5. Aşağıdaki etiketlerden hangisi tarayıcı penceresinde yatay çizgi oluşturur?

a) <font>
b) <hr>
c) <body>
d) <br>
e) <style>

6. Meter ve progress etiketi tarayıcı tarafından desteklenmediği durumda

aşağıdakilerden hangisi olur?
a) Ekranda görünen çubuğun tamamı yeşil renk olarak görünür.
b) Ekranda hiçbir bilgi yer almaz.
c) Ekranda görünen çubuğun tamamı mavi renk olarak görünür.
d) Ekrana hata mesajı gelir.
e) Etiket içindeki metin değeri görüntülenir.
7. Belli bir olayın yüzdesini ya da ilerleme durumunu izlemek için

aşağıdakilerden hangi etiketi kullanılır?
a) mark
b) abbr
c) meter
d) font
e) hr
8. Arka plana resim eklerken resmin yatayda tekrarlanmasını isteniyorsa

aşağıdaki hangi seçenek kullanılır?
a) repeat-x
b) no-repeat
c) repeat-y
d) repeat-yatay
e) repeat-dikey
9. EURO (€) para biriminin &8364 kodu ile elde ettiğiniz özel karakterini
aşağıdaki hangi sayı sistemi ile elde etmiş olunur?
a) İkili (binary) sayı sistemi
b) Onaltılık (hexadecimal) sayı sistemi
c) Sekizli (octal) sayı sistemi
d) Onlu (decimal) sayı sistemi
e) Romen sayı sistemi
10. Günlük hayatımızda karşılaştığımız ulusal (TOKİ, MEB, TUİK) ya da

uluslararası (UNICEF, NATO, IMF) kullanılan bazı kısaltmaları aşağıdaki
hangi etiket kullanılarak anlamları açıklanır?
a) mark
b) abbr
c) meter
d) progress
e) hr
Cevap Anahtarı
1.d, 2.a, 3.c, 4.e, 5.b, 6.e, 7.c, 8.a, 9.d, 10.b

YARARLANILAN KAYNAKLAR
[ 1 ] Castro, E. (2006). HTML, XHTML, and CSS, Sixth Edition, Berkeley, CA:
Peachpit Press.
[ 2 ] Çelikbilek, İ. (2013). HTML5 Geleceğin WEB Standartları, İstanbul: KODLAB
Yayın Dağıtım Yazılım ve Eğitim Hizmetleri San. ve Tic. Ltd. Şti.
[ 3 ] Duckett, J. (2011). HTML and CSS: Design and Build Websites, Canada: John
Wiley and Sons Inc.
[ 4 ] Erdinç, F. (2018). Yeni Başlayanlar için HTML5 & CSS3, İstanbul: Pusula
Yayıncılık.
[ 5 ] Gürkan, O. (2009). HTML ve XHTML, Ankara: Nirvana Sinemis Yayın Grup.
[ 6 ] Huddleston, R. (2008). HTML, XHTML, and CSS: Your visual blueprint for
designing effective Web pages, Indianapolis, IN: Wiley Publishing, Inc.
[ 7 ] Sarmady, S. (2015). HTML Web Design in 7 days!,
(https://www.researchgate.net/
publication/265262543_HTML_Web_Design_in_7_days).
[ 8 ] Uysal, M. (2001). WEB Teknolojileri, İstanbul: Beta Basım Yayım Dağıtım A.Ş.
[ 9 ] Wempen, F. (2008).(Çeviren: Dalcı, M.), Adım Adım HTML ve XHTML, Ankara:
Arkadaş Yayınevi.
[ 10 ] Whitehead, P. ve Russell, J.H. (2005). HTML: Your Visual blueprinttm for
designing Web pages with HTML, CSS and XHTML, Indiana: Wiley
Publishing, Inc.

42740-Web Tasarımının Temelleri-5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

42740-Web Tasarımının Temelleri-5

Uploaded by

Copyright:

Available Formats

METİN VE GÖRÜNÜM

• Metin Düzenleme Etiketleri

Prof. Dr. Muhammet

•Metin biçimlendirme etiketlerini

METİN DÜZENLEME ETİKETLERİ HR

Atatürk Üniversitesi Açıköğretim Fakültesi 2

METİN DÜZENLEME ETİKETLERİ

Color Yazının rengi

Atatürk Üniversitesi Açıköğretim Fakültesi 3

Renk adı Renk Renk kodu

<font> etiketi parametreleri ile birlikte kullanıldığı örnek aşağıda yer

Atatürk Üniversitesi Açıköğretim Fakültesi 4

Şekil 5.1. font etiketi ve parametrelerinin tarayıcı ekran çıktısı

<hr> Yatay Çizgi Etiketi

Atatürk Üniversitesi Açıköğretim Fakültesi 5

Şekil 5.2. <hr> etiketi örneği

Şekil 5.5. <hr> etiketinin parametrelerinin kullanıldığı örnek

• Yukarıda <hr> etiketinin parametreleri ile birlikte kullanıldığı

Atatürk Üniversitesi Açıköğretim Fakültesi 6

Özel Karakterler Eklemek

Atatürk Üniversitesi Açıköğretim Fakültesi 7

METİN İLE İLGİLİ BAZI ETİKETLER

Şekil 5.4. <mark> etiketi örneğinin tarayıcı ekran görüntüsü

<abbr> Kısaltma ve Terimlerin Belirtilmesi

Atatürk Üniversitesi Açıköğretim Fakültesi 8

Şekil 5.5. <abbr> etiketi örneğinin tarayıcı ekran görüntüsü

Meter ve Progress Etiketleri

Atatürk Üniversitesi Açıköğretim Fakültesi 9

Yukarıda <meter> etiketi örneğinin kullanımı yer almaktadır ve tarayıcı

Şekil 5.6. <meter> etiketi örneğinin tarayıcı ekran görüntüsü

Yukarıdaki örnek incelendiğinde, <meter> etiketi ile ÖSYM sınavının toplam

Şekil 5.7. <meter> etiketinin desteklenmediği tarayıcı ekran görüntüsü

Şekil 5.8. <progress > etiketi örneğinin tarayıcı ekran görüntüsü

Atatürk Üniversitesi Açıköğretim Fakültesi 10

<progress> etiketi <meter> etiketinden ekran görüntüsü olarak biraz

GÖRÜNÜM DÜZENLEME ETİKETLERİ

Şekil 5.9. <body> etiketinin bgcolor parametresinin ekran çıktısı

Atatürk Üniversitesi Açıköğretim Fakültesi 11

Resim dosyası, html

Background – Arka plan Resmi

Atatürk Üniversitesi Açıköğretim Fakültesi 12

Şekil 5.11. <body> etiketinin background parametresinin ekran çıktısı

Arka plana eklediğiniz resim doküman boyutundan küçükse, resim yatayda

Atatürk Üniversitesi Açıköğretim Fakültesi 13

Arka plana resim eklerken resmin tekrarlanmasının istenmediği durumunun

Şekil 5.13. Arka plan rengini belirleyen örneğin ekran çıktısı

Atatürk Üniversitesi Açıköğretim Fakültesi 14

•Font etiketi sahip olduğu parametreler sayesinde metinlerin renk,

Atatürk Üniversitesi Açıköğretim Fakültesi 15

2. Aşağıdaki hangi font etiketi parametreleri ile yazı tipi belirlenir?

3. Yazı büyüklüğünü 7 yapmak için aşağıdaki font etiketlerinden hangisi

5. Aşağıdaki etiketlerden hangisi tarayıcı penceresinde yatay çizgi oluşturur?

Atatürk Üniversitesi Açıköğretim Fakültesi 16

6. Meter ve progress etiketi tarayıcı tarafından desteklenmediği durumda

7. Belli bir olayın yüzdesini ya da ilerleme durumunu izlemek için

8. Arka plana resim eklerken resmin yatayda tekrarlanmasını isteniyorsa

10. Günlük hayatımızda karşılaştığımız ulusal (TOKİ, MEB, TUİK) ya da

Atatürk Üniversitesi Açıköğretim Fakültesi 17

Atatürk Üniversitesi Açıköğretim Fakültesi 18

You might also like