HTML
HTML bir web tasarım dilidir. Tamamen kodlardan oluşur. HTML dili ile tasarım yapmak için tek gereken şey Windows not defteri veya buna benzer bir yazı editörüdür. HTML bir çok programdan bağımsız çalıştığı için bilgisayarımızda ihtiyaç duyduğu pek bir yazılım yoktur. Yazdığımız kodları yorumlayacak bir browser (İnternet Explorer) yeterlidir. HTML dili taglar, parametreler ve değerlerden oluşur. Tag dediğimiz olay HTML dilinin ana komutlarıdır. Parametreler ise taglara özellik kazandıran yardımcı komutlardır. Değerler ise Parametrelerin aldıkları değerlerdir. Tagları genel anlamda iki kısımda inceleyebiliriz. 1.si olmazsa olmaz taglar, 2.si taglar. Olmazsa olmaz tagları kısaca şöyle tanımlayabiliriz;
<html>
<head>
………
</head>
<body>
………
</body>
</html>
Buradaki taglar olmazsa olmaz taglardır. Boş bir web sitesinin komutları bunlardır. Burada <html> ana tag olup yazacağımız kodların html dili ile yazıldığını gösterir. Doğal olarak ta browserimiz de kendini buna göre ayarlar. Diğer iki tagda çok önemlidir. Bir web sitesini İnsan olarak düşünürsek <head> tagı insanın kafası, <body> tagı vücudu’dur. Web sitesinin başlığı, bilgileri vb.. işler <head> … </head> tagları arasında tanımlanır. Burada yazacağımız hiçbir komut sayfamızda görüntülenmez. Dediğim gibi daha çok ayarlamalar burada yapılır. <body> … </body> tagları arasında yapılan her şey sayfada görüntülenir. Yani html ile hazırlayacağımız web sayfasında tasarım işimizi bu bölümde yapacağız.
Bunun dışında yukarıdaki örnekten de anlaşıldığı gibi taglar “<> işaretleri arasına yazılır. Bir tagla çalışacaksak örneğin body tagı ile, çalışmaya başlayacağımız yere <body> komutunu yazarız. Daha sonra body tagı ile işimiz bittiğinde artık bu tagla çalışmayacağımız zamanda </body> komutunu yazarak browsere artık bu tagla işimiz bitti mesajını veririz. HTML dili nin ana mantığı budur. Şimdi sırası ile tüm tagları ve parametreleri inceleyerek işe başlayalım.
HTML
HTML ana tagdır. Hiçbir parametresi yada değeri yoktur. Bir sayfa <html> ile başlar </html> ile sona bulur.
HEAD
Head de bir ana tagdır. Sayfanın bazı özellikleri bu bölümde tanımlanır. Parametresi yada değeri yoktur.
META
Meta tagı web sayfasının kafa kısmında kullanılan bir tagdır. Ve bu tagla sayfanın bir çok özelliğini browsere tanıtmış oluruz. Şimdi bu tagı ve kullanım alanını inceleyelim.
<meta http-equiv=”Content-Type” Content=”Text/Html”; char set=Windows-1254”>
Burada kullandığımız satır standart olup Windows-1254 değeri ile sayfanın Türkçe
Karakterleri desteklemesi gerektiğini belirttik.
<meta name=”Keywords” Content=”Web Tasarımı, Bilgisayar, İnternet”>
Burada kullandığımız satır standart olup Sayfanın arama motorları için gereken anahtar
kelimelerini tanımladık. Bu kelimeler en fazla 20 farklı kelimeden oluşabilir. Her kelime
arasında virgül işareti olmak zorundadır.
<meta name=”Author” Content=”KapTan and UfakLIk”>
Burada kullandığımız satır standart olup sayfanın tasarımcısını tanımladık.
<meta http-equiv=”Refresh” Content=11; url=”http://www.sstrg.com>
Burada kullandığımız satır normal web standardı değildir. Sadece ihtiyacımız olduğu anlarda
kullanacağız. Oysa üst kısımdaki 3 satır her web tasarımda kullanılır. Buradaki komutlar
sayfa yönlendirmesini sağlar. 11 değerimiz aktif sayfanın kaç saniye sonra
yönlendirileceğini, url kısmındaki web adresi ise bu süre bittiğinde hangi adrese gidilmesi
gerektiğini tanımlar.
TITLE
Bu tag da meta tagı gibi <head> </head> tagları arasında kullanılır. Görevi sayfa başlığını belirlemektir.
<title> COPY & PASTE SSTRG team </title>
BODY
Bu tag sayfanın tasarım kısmı olup bundan sonra yazacağımız tüm taglar,parametreler ve değerler sayfanın <body> </body> arasına yazılacaktır. Body tagı kendi içinde bazı parametreler ve değerler alabilir. Bu değerler sayfanın stilini belirler. Şimdi bunları inceleyelelim.
• Bgcolor : sayfanın arkaplan rengini belirler.
<body bgcolor=”red”>
• Background : Sayfanın arkaplan resmini belirler.
<body background=”c:\resimler\artalan.jpg”>
• Text : Sayfanın yazı rengini belirler.
• Link : Sayfanın link rengini belirler.
• Alink : Sayfanın aktif link rengini belirler.
• Vlink : Sayfanın Ziyaret edilmiş linklerinin rengini belirler.
• Leftmargin : Sayfanın sol’dan ve sağdan bırakılacak boşluk miktarını tanımlar.
• Topmargin : Sayfanın üst’ten ve alt’tan bırakılacak boşluk miktarını tanımlar.
<body bgcolor=”yellow” text=”black” link=”red” alink=”darkred” vlink=”darkred
leftmargin=25 topmargin=10>
</body>
BR
Web sayfasında bir satır boşluğa ihtiyaç duyduğumuz zamanlarda kullanılır. Kapatılması gerek olmayan sayılı taglardandır. Her br bir satır boşluk anlamına gelir. 3 satır boşluk için;
<br><br><br>
B
Yazdığımız yazının sayfada koyu görülmesini sağlar.
<b> Bu bir koyu yazı </b>
I
Yazdığımız yazının italik (eğik) görüntülenmesini sağlar.
<i> Bu bir eğik yazıdık </i>
U
Yazdığımız yazının altı çizgili görüntülenmesini sağlar.
<u> Bu yazının altı çizgilidir </u>
STRIKE
Yazdığımız yazının ortası çizgili görüntülenmesini sağlar.
<strike> Bu yazının ortasında çizgi vardır </strike>
S
Yazdığımız yazının üst kısmında çizgi görüntülenmesini sağlar.
<s> Bu yazının üst kısmında çizgi vardır </s>
SMALL
Yazdığımız yazıyı bir derece küçük göstermeye yarar.
<small> Bu yazı normalden küçük görünecektir </small>
BIG
Yazdığımız yazıyı bir derece büyük göstermeye yarar.
<big> Bu yazı normalden büyük görünecektir </big>
H
Yazdığımız yazıya belirli punto değerleri (büyüklük) vermemize yarar. Kullanımı 6 çeşittir. H1,H2,H3,H4,H5,H6 şeklinde değerler alır. Burada H1 en büyük yazı olup sayı değeri büyüdükçe yazı küçülmektedir.
<h1> Bu en büyük yazıdır </h1>
<br>
<h6> Buda en küçük </h6>
BDO
Yazdığımız yazının sayfada tersden görüntülenmesini sağlar. Kullanımı basittir. <bdo> </bdo> tagları arasına yazılan tüm yazı otomatik ters’ten görüntülenir.
<bdo> Bu yazıda ters’ten görüntülenir </bdo>
TT
Yazdığımız yazının normal Windows karakterleri ile değilde daktilo stili karakterlerle görüntülenmesini sağlar.
<tt> Bu yazı normal yazılarımızdan farklı bir stilde görüntülenecektir </tt>
NOBR
Sabit uzunlukta yazı istediğimizde bu tagı kullanırız.
<nobr>
Yani yazdığımız yazının uzunluğu ne olursa olsun her şart altında buraya yazdığımız yazı
bölünme olmadan tek satırdamı görüntülenecek?
</nobr>
SUB
Yazımıza alt simge eklememize yarar.
H <sub>2</sub>O
SUP
Yazımıza üst simge eklememize yarar.
2<sup>2</sup>=4
HR
Sayfamıza yatay çizgi eklemeye yarar. Kapatılması gerekmeyen sayılı taglardandır.
• Align : Çizginin konumunu belirler. Alacağı değerler center,right ve left’tir.
• Size : Çizginin dikeyde kaplayacağı alanı belirler yani kalınlığını.
• Width : Çizginin yatayda kaplayacağı alanı belirler yani genişliğini.
<hr align=”center” size=5 width=100>
P
Sayfamızda paragraf oluşturmaya yarar.
• Align : Paragrafın sayfa içerisindeki konumunu belirler. Alacağı değerler center, right ve
Left ‘tir.
<p align=”right> Bu yazı sayfanın sağ kısmına dayalı yazıdır </p>
BLOCKQUOTE
Yazılan yazıyı 1 derece içeriye girintili olarak görüntüler.
<blockquote> Bu yazı bir derece içeriye girintili olarak yazılmıştır. </blockquote>
ACRONYM
Herhangi bir nesnenin Mouse ile üzerine gelindiği zaman ek bir açıklama şeklinde yazı çıkmasını sağlar.
• Title : Title ile nesnenin üzerine gelindiğinde çıkan yazı ayarlanır.
<acronym title="Seni Seviyorum T.R.G.mm">UfakLIk</acronym>
FONT
Yazılan yazıla stil vermekte kullanılır.
• Face : Yazının karakterini belirler.
• Color : Yazının rengini belirler.
• Size : Yazının büyüklüğünü belirler.
<font face=verdana color=red size=5> Seni Seviyorum T.R.G.mm </font>
IMG
Sayfamızda istediğimiz bir bölüme resim eklemeye yarar.
• Src : kullanacağımız resmin yerini belirlememize yarar.
• Alt : Kullandığımız resmin üzerine gelindiğinde açıklama yazmaya yarar.
• Width : Resmin yatayda kaplayacağı büyüklüğü belirler.
• Height : Resmin dikeyde kaplayacağı büyüklüğü belirler.
• Align : Resmin sayfadaki konumunu belirler. Center, right ve left değerleri alır.
• Border : Resmin çerçeve kalınlığını belirler.
<img src=artalan.jpg alt=”SSTRG” width=200 height=200 align=”center” border=10>
• Hspace : Resmin sayfadaki yatay konumunu ayarlar.
• Vspace : Resmin sayfadaki dikey konumunu ayarlar.
<img src=artalan.jpg hspace=100 vspace=300> </img>
A
Herhangi bir nesneye istediğimiz bir link vermeye yarar.
• Href : Bu parametre ile link vereceğimiz sayfanın adresini tanımlarız.
<a href=”http://www.sstrg.com> SSTRG.COM a gitmek için tıklayınız </a>
• Mailto : Bu parametre ile istediğimiz bir nesneyi kullanarak mail adresine link verebiliriz.
<a href=”mailto:kaptan@sstrg.com”> KapTan’a mail atmak için tıklayınız </a>
• Name : Sayfa içerisinde link vermeye yarar.
<a name="bastaraf"> bastaraf </a>
<br><br><br><br><br>
<a href="#bastaraf"> Git </a>
Daha önceden öğrendiğimiz img tagı ile birlikte a tagını kullanırsak resimler üzerine linkler verebiliriz;
<a href=http://www.sstrg.com> <img src=artalan.jpg> </a>
AREA
Area tagı ile birlikte bir resmin sadece istediğimiz kısmına link verebiliriz.
• Map name : Resmimize bir isim vermeye yarar.
• Href : Link vereceğimiz adresi belirlememize yarar.
• Shape : Resmin belirli bir kısmına link vereceğimizi tanımlar. Alacağı tek değer rect ‘tir.
• Coords : Resim üzerinde link vereceğimiz alanı yani kordinatları belirlememizi sağlar. Dört adet kordinat girmemiz gerekir. Ve kordinatları virgülle ayırmamız gerekir. İlk kordinat linkin yatayda nereden başlayacağını, ikinci kordinat dikeyde nereden başlayacağını belirler. Üçüncü kordinat yatayda başlangıçtan ne kadar ilerleyeceğini dördüncü kordinat ise dikeyde başlangıçtan ne kadar aşağı ineceğini belirler.
<map name="sstrg">
<area href="http://www.sstrg.com" shape="rect" coords="50, 50, 200, 200"></map>
<img border="0" src="artalan.jpg" usemap="#sstrg">
EMBED
Sayfamızda video oynatmamızı yada ses dosyası çalmamızı sağlar.
• Src : Ses yada film dosyamızın adresini belirlememize yarar.
<img src=”artalan.mp3”> </img>
• Hidden : Ekranda çıkan media playeri gizlemeye yarar. True değeri vererek parametreyi onaylarız.
<img src=”artalan.mp3” hidden=true> </img>
• Autostart : Sayfamız yüklendikten sonra ses dosyasının yada video dosyasının otomatik başlaması yerine play düğmesine basıldığında başlamasını sağlar. False değeri vererek parametreyi onaylarız.
<img src=”artalan.mp3” autostart=false> </img>
MENU
Sırasız Listeler oluşturmaya yarar. Kullanacağımız her <menu> tagı listeyi bir satır içeriye iter.
• Type : Listelerin stilini belirlememize yarar. Type ile birlikte kullanacağımız square sembolün kare, circle sembolun daire olmasını belirler.
<OL TYPE=square>
<LI> ANA BAŞLIK 1 <OL>
<LI> ALT BAŞLIK 1
<LI> ALT BAŞLIK 2 </OL>
<LI> ANA BAŞLIK 2 <OL>
<LI> ALT BAŞLIK 1
<LI> ALT BAŞLIK 2 </OL>
</OL>
OL
Sıralı listeler oluşturmaya yarar. Kullanacağımız her <ol> tagı listeyi bir satır içeriye iter.
• Type : Listelerin stilini belirlemeye yarar. Type ile birlikte kullanacağımız bazı değerler listelerin sıralanma sitilini belirler. Kullanabileceğimiz değerler ; A, a, I, i ve 1 ‘dir.
<OL TYPE=1>
<LI> ANA BAŞLIK 1 <OL>
<LI> ALT BAŞLIK 1
<LI> ALT BAŞLIK 2 </OL>
<LI> ANA BAŞLIK 2 <OL>
<LI> ALT BAŞLIK 1
<LI> ALT BAŞLIK 2 </OL>
</OL>
MARQUEE
Kayan yazılar oluşturmamıza yarar.
• Direction: Kayma işleminin hangi yöne soğru yapılacağını belirler. Alacağı değerler left ve right’dir.
<marquee direction=right> Bu yazı soldan başlayıp sağa doğru kayar </marquee>
• Behavior : Kayma işleminin tek yönde değil iki yönde olması gerektiğini belirtmemize yarar. Alacağı alternate değeri komutun çalışmasını sağlar. Alternate yerine slide değeri vererekte kayma işleminin bir tur atmasından sonra bitmesini ve yazının bittiği yerde kalmasını sağlarız.
<marquee behavior=alternate> Seni Seviyorum T.R.G.mm </marquee>
<marquee behavior=slide> Seni Seviyorum T.R.G.mm </marquee>
• Loop : Kayma işleminin kaç kez olması gerektiğini belirler.
<marquee loop=2> 2 kez kaydıktan sonra kayma işlemi biter </marquee>
• Width : Kayma işleminin olacağı genişliği yatayda belirler.
• Height : kayma işleminin olacağı genişliği dikeyde belirler.
<marquee width=400 height=100> SSTRG.COM </marquee>
TABLE
Sayfamızda tablolar oluşturmaya yarar.
• Tr : tablo içerisinde satır oluşturmaya yarar.
• Td: tablo içerisinde sütun oluşturmaya yarar.
• Border : tablonun dış çerçevesinin kalınlığını belirler.
• Bordercolor: tablonun dış çerçeve rengini belirler.
<table border=5 bordercolor=red>
<tr>
<td> 1. satır 1. sütun </td>
<td> 1. satır 2. sütun </td>
<td> 1. satır 3. sütun </td>
</tr>
<tr>
<td> 2. satır 1. sütun </td>
<td> 2. satır 2. sütun </td>
<td> 2. satır 3. sütun </td>
</tr>
<tr>
<td> 3. satır 1. sütun </td>
<td> 3. satır 2. sütun </td>
<td> 3. satır 3. sütun </td>
</tr>
</table>
• Bgcolor : tablonun tamamına yada istediğimiz her hangi bir satır, sütun’a zemin rengi eklemeye yarar.
• Background : tablonun tamamına yada istediğimiz her hangi bir satır, sütun’a zemin resmi eklemeye yarar.
<table border=5 bordercolor=black>
<tr>
<td bgcolor=red> 1. satır 1. sütun </td>
<td bgcolor=yellow> 1. satır 2. sütun </td>
<td bgcolor=blue> 1. satır 3. sütun </td>
</tr>
<tr bgcolor=white>
<td> 2. satır 1. sütun </td>
<td> 2. satır 2. sütun </td>
<td> 2. satır 3. sütun </td>
</tr>
</table>
• Widht : Tablonun genişliğini belirler. Değer olarak bir sayı girilir.
• Height : Tablonun yüksekliğini belirler. Değer olarak bir sayı girilir.
<table border=5 width=800 height=100>
<tr>
<td> 1. satır yazımız </td>
</tr>
<tr>
<td> 2. satır yazımız </td>
</tr>
</table>
• Rowspan : Sütunları birleştirmeye yarar. Kullanımı çok basittir.
<table border=5 bordercolor=red>
<tr>
<td rowspan=3> 1. satır 1. sütun </td>
<td> 1. satır 2. sütun </td>
<td> 1. satır 3. sütun </td>
<td> 1. satır 4. sütun </td>
</tr>
<tr>
<td> 1. satır 2. sütun </td>
<td rowspan=2> 1. satır 3. sütun </td>
<td> 1. satır 4. sütun </td>
</tr>
<tr>
<td> 1. satır 2. sütun </td>
<td> 1. satır 4. sütun </td>
</tr>
</table>
Rowspan daha öncedende dediğim gibi sütunları birleştirir. Buradaki örnekte rowspan’ın yanında kullanacağımız sayı kaç sütunun birleşeceğini belirtir. Burada ilk birleştirme işleminde 3 değeri vererek 3 satırında birinci stunlarının birleşmesi gerektiğini belirttik. Doğal olarakta her satırdaki ilk sutun komutlarını sildik. Olay bukadar basit.
• Colspan : Satırları birleştirmeye yarar. Kullanımı çok basittir.
<table border=5 bordercolor=red>
<tr>
<td colspan=3> 1. satır 1. sütun </td>
<td> 1. satır 4. sütun </td>
</tr>
<tr>
<td> 1. satır 1. sütun </td>
<td colspan=2> 1. satır 2. sütun </td>
<td> 1. satır 4. sütun </td>
</tr>
<tr>
<td colspan=4> 1. satır 1. sütun </td>
</tr>
</table>
Colspan daha öncedende dediğim gibi satırları birleştirir. Buradaki örnekte colspan’in yanında kullanacağımız sayı kaç satırın birleşeceğini belirtir. Buradaki birleştirme işlemindeki değer ne olursa o kadar satırın komutu iptal edilmelidir. Olay bukadar basit.
HTML bir web tasarım dilidir. Tamamen kodlardan oluşur. HTML dili ile tasarım yapmak için tek gereken şey Windows not defteri veya buna benzer bir yazı editörüdür. HTML bir çok programdan bağımsız çalıştığı için bilgisayarımızda ihtiyaç duyduğu pek bir yazılım yoktur. Yazdığımız kodları yorumlayacak bir browser (İnternet Explorer) yeterlidir. HTML dili taglar, parametreler ve değerlerden oluşur. Tag dediğimiz olay HTML dilinin ana komutlarıdır. Parametreler ise taglara özellik kazandıran yardımcı komutlardır. Değerler ise Parametrelerin aldıkları değerlerdir. Tagları genel anlamda iki kısımda inceleyebiliriz. 1.si olmazsa olmaz taglar, 2.si taglar. Olmazsa olmaz tagları kısaca şöyle tanımlayabiliriz;
<html>
<head>
………
</head>
<body>
………
</body>
</html>
Buradaki taglar olmazsa olmaz taglardır. Boş bir web sitesinin komutları bunlardır. Burada <html> ana tag olup yazacağımız kodların html dili ile yazıldığını gösterir. Doğal olarak ta browserimiz de kendini buna göre ayarlar. Diğer iki tagda çok önemlidir. Bir web sitesini İnsan olarak düşünürsek <head> tagı insanın kafası, <body> tagı vücudu’dur. Web sitesinin başlığı, bilgileri vb.. işler <head> … </head> tagları arasında tanımlanır. Burada yazacağımız hiçbir komut sayfamızda görüntülenmez. Dediğim gibi daha çok ayarlamalar burada yapılır. <body> … </body> tagları arasında yapılan her şey sayfada görüntülenir. Yani html ile hazırlayacağımız web sayfasında tasarım işimizi bu bölümde yapacağız.
Bunun dışında yukarıdaki örnekten de anlaşıldığı gibi taglar “<> işaretleri arasına yazılır. Bir tagla çalışacaksak örneğin body tagı ile, çalışmaya başlayacağımız yere <body> komutunu yazarız. Daha sonra body tagı ile işimiz bittiğinde artık bu tagla çalışmayacağımız zamanda </body> komutunu yazarak browsere artık bu tagla işimiz bitti mesajını veririz. HTML dili nin ana mantığı budur. Şimdi sırası ile tüm tagları ve parametreleri inceleyerek işe başlayalım.
HTML
HTML ana tagdır. Hiçbir parametresi yada değeri yoktur. Bir sayfa <html> ile başlar </html> ile sona bulur.
HEAD
Head de bir ana tagdır. Sayfanın bazı özellikleri bu bölümde tanımlanır. Parametresi yada değeri yoktur.
META
Meta tagı web sayfasının kafa kısmında kullanılan bir tagdır. Ve bu tagla sayfanın bir çok özelliğini browsere tanıtmış oluruz. Şimdi bu tagı ve kullanım alanını inceleyelim.
<meta http-equiv=”Content-Type” Content=”Text/Html”; char set=Windows-1254”>
Burada kullandığımız satır standart olup Windows-1254 değeri ile sayfanın Türkçe
Karakterleri desteklemesi gerektiğini belirttik.
<meta name=”Keywords” Content=”Web Tasarımı, Bilgisayar, İnternet”>
Burada kullandığımız satır standart olup Sayfanın arama motorları için gereken anahtar
kelimelerini tanımladık. Bu kelimeler en fazla 20 farklı kelimeden oluşabilir. Her kelime
arasında virgül işareti olmak zorundadır.
<meta name=”Author” Content=”KapTan and UfakLIk”>
Burada kullandığımız satır standart olup sayfanın tasarımcısını tanımladık.
<meta http-equiv=”Refresh” Content=11; url=”http://www.sstrg.com>
Burada kullandığımız satır normal web standardı değildir. Sadece ihtiyacımız olduğu anlarda
kullanacağız. Oysa üst kısımdaki 3 satır her web tasarımda kullanılır. Buradaki komutlar
sayfa yönlendirmesini sağlar. 11 değerimiz aktif sayfanın kaç saniye sonra
yönlendirileceğini, url kısmındaki web adresi ise bu süre bittiğinde hangi adrese gidilmesi
gerektiğini tanımlar.
TITLE
Bu tag da meta tagı gibi <head> </head> tagları arasında kullanılır. Görevi sayfa başlığını belirlemektir.
<title> COPY & PASTE SSTRG team </title>
BODY
Bu tag sayfanın tasarım kısmı olup bundan sonra yazacağımız tüm taglar,parametreler ve değerler sayfanın <body> </body> arasına yazılacaktır. Body tagı kendi içinde bazı parametreler ve değerler alabilir. Bu değerler sayfanın stilini belirler. Şimdi bunları inceleyelelim.
• Bgcolor : sayfanın arkaplan rengini belirler.
<body bgcolor=”red”>
• Background : Sayfanın arkaplan resmini belirler.
<body background=”c:\resimler\artalan.jpg”>
• Text : Sayfanın yazı rengini belirler.
• Link : Sayfanın link rengini belirler.
• Alink : Sayfanın aktif link rengini belirler.
• Vlink : Sayfanın Ziyaret edilmiş linklerinin rengini belirler.
• Leftmargin : Sayfanın sol’dan ve sağdan bırakılacak boşluk miktarını tanımlar.
• Topmargin : Sayfanın üst’ten ve alt’tan bırakılacak boşluk miktarını tanımlar.
<body bgcolor=”yellow” text=”black” link=”red” alink=”darkred” vlink=”darkred
leftmargin=25 topmargin=10>
</body>
BR
Web sayfasında bir satır boşluğa ihtiyaç duyduğumuz zamanlarda kullanılır. Kapatılması gerek olmayan sayılı taglardandır. Her br bir satır boşluk anlamına gelir. 3 satır boşluk için;
<br><br><br>
B
Yazdığımız yazının sayfada koyu görülmesini sağlar.
<b> Bu bir koyu yazı </b>
I
Yazdığımız yazının italik (eğik) görüntülenmesini sağlar.
<i> Bu bir eğik yazıdık </i>
U
Yazdığımız yazının altı çizgili görüntülenmesini sağlar.
<u> Bu yazının altı çizgilidir </u>
STRIKE
Yazdığımız yazının ortası çizgili görüntülenmesini sağlar.
<strike> Bu yazının ortasında çizgi vardır </strike>
S
Yazdığımız yazının üst kısmında çizgi görüntülenmesini sağlar.
<s> Bu yazının üst kısmında çizgi vardır </s>
SMALL
Yazdığımız yazıyı bir derece küçük göstermeye yarar.
<small> Bu yazı normalden küçük görünecektir </small>
BIG
Yazdığımız yazıyı bir derece büyük göstermeye yarar.
<big> Bu yazı normalden büyük görünecektir </big>
H
Yazdığımız yazıya belirli punto değerleri (büyüklük) vermemize yarar. Kullanımı 6 çeşittir. H1,H2,H3,H4,H5,H6 şeklinde değerler alır. Burada H1 en büyük yazı olup sayı değeri büyüdükçe yazı küçülmektedir.
<h1> Bu en büyük yazıdır </h1>
<br>
<h6> Buda en küçük </h6>
BDO
Yazdığımız yazının sayfada tersden görüntülenmesini sağlar. Kullanımı basittir. <bdo> </bdo> tagları arasına yazılan tüm yazı otomatik ters’ten görüntülenir.
<bdo> Bu yazıda ters’ten görüntülenir </bdo>
TT
Yazdığımız yazının normal Windows karakterleri ile değilde daktilo stili karakterlerle görüntülenmesini sağlar.
<tt> Bu yazı normal yazılarımızdan farklı bir stilde görüntülenecektir </tt>
NOBR
Sabit uzunlukta yazı istediğimizde bu tagı kullanırız.
<nobr>
Yani yazdığımız yazının uzunluğu ne olursa olsun her şart altında buraya yazdığımız yazı
bölünme olmadan tek satırdamı görüntülenecek?
</nobr>
SUB
Yazımıza alt simge eklememize yarar.
H <sub>2</sub>O
SUP
Yazımıza üst simge eklememize yarar.
2<sup>2</sup>=4
HR
Sayfamıza yatay çizgi eklemeye yarar. Kapatılması gerekmeyen sayılı taglardandır.
• Align : Çizginin konumunu belirler. Alacağı değerler center,right ve left’tir.
• Size : Çizginin dikeyde kaplayacağı alanı belirler yani kalınlığını.
• Width : Çizginin yatayda kaplayacağı alanı belirler yani genişliğini.
<hr align=”center” size=5 width=100>
P
Sayfamızda paragraf oluşturmaya yarar.
• Align : Paragrafın sayfa içerisindeki konumunu belirler. Alacağı değerler center, right ve
Left ‘tir.
<p align=”right> Bu yazı sayfanın sağ kısmına dayalı yazıdır </p>
BLOCKQUOTE
Yazılan yazıyı 1 derece içeriye girintili olarak görüntüler.
<blockquote> Bu yazı bir derece içeriye girintili olarak yazılmıştır. </blockquote>
ACRONYM
Herhangi bir nesnenin Mouse ile üzerine gelindiği zaman ek bir açıklama şeklinde yazı çıkmasını sağlar.
• Title : Title ile nesnenin üzerine gelindiğinde çıkan yazı ayarlanır.
<acronym title="Seni Seviyorum T.R.G.mm">UfakLIk</acronym>
FONT
Yazılan yazıla stil vermekte kullanılır.
• Face : Yazının karakterini belirler.
• Color : Yazının rengini belirler.
• Size : Yazının büyüklüğünü belirler.
<font face=verdana color=red size=5> Seni Seviyorum T.R.G.mm </font>
IMG
Sayfamızda istediğimiz bir bölüme resim eklemeye yarar.
• Src : kullanacağımız resmin yerini belirlememize yarar.
• Alt : Kullandığımız resmin üzerine gelindiğinde açıklama yazmaya yarar.
• Width : Resmin yatayda kaplayacağı büyüklüğü belirler.
• Height : Resmin dikeyde kaplayacağı büyüklüğü belirler.
• Align : Resmin sayfadaki konumunu belirler. Center, right ve left değerleri alır.
• Border : Resmin çerçeve kalınlığını belirler.
<img src=artalan.jpg alt=”SSTRG” width=200 height=200 align=”center” border=10>
• Hspace : Resmin sayfadaki yatay konumunu ayarlar.
• Vspace : Resmin sayfadaki dikey konumunu ayarlar.
<img src=artalan.jpg hspace=100 vspace=300> </img>
A
Herhangi bir nesneye istediğimiz bir link vermeye yarar.
• Href : Bu parametre ile link vereceğimiz sayfanın adresini tanımlarız.
<a href=”http://www.sstrg.com> SSTRG.COM a gitmek için tıklayınız </a>
• Mailto : Bu parametre ile istediğimiz bir nesneyi kullanarak mail adresine link verebiliriz.
<a href=”mailto:kaptan@sstrg.com”> KapTan’a mail atmak için tıklayınız </a>
• Name : Sayfa içerisinde link vermeye yarar.
<a name="bastaraf"> bastaraf </a>
<br><br><br><br><br>
<a href="#bastaraf"> Git </a>
Daha önceden öğrendiğimiz img tagı ile birlikte a tagını kullanırsak resimler üzerine linkler verebiliriz;
<a href=http://www.sstrg.com> <img src=artalan.jpg> </a>
AREA
Area tagı ile birlikte bir resmin sadece istediğimiz kısmına link verebiliriz.
• Map name : Resmimize bir isim vermeye yarar.
• Href : Link vereceğimiz adresi belirlememize yarar.
• Shape : Resmin belirli bir kısmına link vereceğimizi tanımlar. Alacağı tek değer rect ‘tir.
• Coords : Resim üzerinde link vereceğimiz alanı yani kordinatları belirlememizi sağlar. Dört adet kordinat girmemiz gerekir. Ve kordinatları virgülle ayırmamız gerekir. İlk kordinat linkin yatayda nereden başlayacağını, ikinci kordinat dikeyde nereden başlayacağını belirler. Üçüncü kordinat yatayda başlangıçtan ne kadar ilerleyeceğini dördüncü kordinat ise dikeyde başlangıçtan ne kadar aşağı ineceğini belirler.
<map name="sstrg">
<area href="http://www.sstrg.com" shape="rect" coords="50, 50, 200, 200"></map>
<img border="0" src="artalan.jpg" usemap="#sstrg">
EMBED
Sayfamızda video oynatmamızı yada ses dosyası çalmamızı sağlar.
• Src : Ses yada film dosyamızın adresini belirlememize yarar.
<img src=”artalan.mp3”> </img>
• Hidden : Ekranda çıkan media playeri gizlemeye yarar. True değeri vererek parametreyi onaylarız.
<img src=”artalan.mp3” hidden=true> </img>
• Autostart : Sayfamız yüklendikten sonra ses dosyasının yada video dosyasının otomatik başlaması yerine play düğmesine basıldığında başlamasını sağlar. False değeri vererek parametreyi onaylarız.
<img src=”artalan.mp3” autostart=false> </img>
MENU
Sırasız Listeler oluşturmaya yarar. Kullanacağımız her <menu> tagı listeyi bir satır içeriye iter.
• Type : Listelerin stilini belirlememize yarar. Type ile birlikte kullanacağımız square sembolün kare, circle sembolun daire olmasını belirler.
<OL TYPE=square>
<LI> ANA BAŞLIK 1 <OL>
<LI> ALT BAŞLIK 1
<LI> ALT BAŞLIK 2 </OL>
<LI> ANA BAŞLIK 2 <OL>
<LI> ALT BAŞLIK 1
<LI> ALT BAŞLIK 2 </OL>
</OL>
OL
Sıralı listeler oluşturmaya yarar. Kullanacağımız her <ol> tagı listeyi bir satır içeriye iter.
• Type : Listelerin stilini belirlemeye yarar. Type ile birlikte kullanacağımız bazı değerler listelerin sıralanma sitilini belirler. Kullanabileceğimiz değerler ; A, a, I, i ve 1 ‘dir.
<OL TYPE=1>
<LI> ANA BAŞLIK 1 <OL>
<LI> ALT BAŞLIK 1
<LI> ALT BAŞLIK 2 </OL>
<LI> ANA BAŞLIK 2 <OL>
<LI> ALT BAŞLIK 1
<LI> ALT BAŞLIK 2 </OL>
</OL>
MARQUEE
Kayan yazılar oluşturmamıza yarar.
• Direction: Kayma işleminin hangi yöne soğru yapılacağını belirler. Alacağı değerler left ve right’dir.
<marquee direction=right> Bu yazı soldan başlayıp sağa doğru kayar </marquee>
• Behavior : Kayma işleminin tek yönde değil iki yönde olması gerektiğini belirtmemize yarar. Alacağı alternate değeri komutun çalışmasını sağlar. Alternate yerine slide değeri vererekte kayma işleminin bir tur atmasından sonra bitmesini ve yazının bittiği yerde kalmasını sağlarız.
<marquee behavior=alternate> Seni Seviyorum T.R.G.mm </marquee>
<marquee behavior=slide> Seni Seviyorum T.R.G.mm </marquee>
• Loop : Kayma işleminin kaç kez olması gerektiğini belirler.
<marquee loop=2> 2 kez kaydıktan sonra kayma işlemi biter </marquee>
• Width : Kayma işleminin olacağı genişliği yatayda belirler.
• Height : kayma işleminin olacağı genişliği dikeyde belirler.
<marquee width=400 height=100> SSTRG.COM </marquee>
TABLE
Sayfamızda tablolar oluşturmaya yarar.
• Tr : tablo içerisinde satır oluşturmaya yarar.
• Td: tablo içerisinde sütun oluşturmaya yarar.
• Border : tablonun dış çerçevesinin kalınlığını belirler.
• Bordercolor: tablonun dış çerçeve rengini belirler.
<table border=5 bordercolor=red>
<tr>
<td> 1. satır 1. sütun </td>
<td> 1. satır 2. sütun </td>
<td> 1. satır 3. sütun </td>
</tr>
<tr>
<td> 2. satır 1. sütun </td>
<td> 2. satır 2. sütun </td>
<td> 2. satır 3. sütun </td>
</tr>
<tr>
<td> 3. satır 1. sütun </td>
<td> 3. satır 2. sütun </td>
<td> 3. satır 3. sütun </td>
</tr>
</table>
• Bgcolor : tablonun tamamına yada istediğimiz her hangi bir satır, sütun’a zemin rengi eklemeye yarar.
• Background : tablonun tamamına yada istediğimiz her hangi bir satır, sütun’a zemin resmi eklemeye yarar.
<table border=5 bordercolor=black>
<tr>
<td bgcolor=red> 1. satır 1. sütun </td>
<td bgcolor=yellow> 1. satır 2. sütun </td>
<td bgcolor=blue> 1. satır 3. sütun </td>
</tr>
<tr bgcolor=white>
<td> 2. satır 1. sütun </td>
<td> 2. satır 2. sütun </td>
<td> 2. satır 3. sütun </td>
</tr>
</table>
• Widht : Tablonun genişliğini belirler. Değer olarak bir sayı girilir.
• Height : Tablonun yüksekliğini belirler. Değer olarak bir sayı girilir.
<table border=5 width=800 height=100>
<tr>
<td> 1. satır yazımız </td>
</tr>
<tr>
<td> 2. satır yazımız </td>
</tr>
</table>
• Rowspan : Sütunları birleştirmeye yarar. Kullanımı çok basittir.
<table border=5 bordercolor=red>
<tr>
<td rowspan=3> 1. satır 1. sütun </td>
<td> 1. satır 2. sütun </td>
<td> 1. satır 3. sütun </td>
<td> 1. satır 4. sütun </td>
</tr>
<tr>
<td> 1. satır 2. sütun </td>
<td rowspan=2> 1. satır 3. sütun </td>
<td> 1. satır 4. sütun </td>
</tr>
<tr>
<td> 1. satır 2. sütun </td>
<td> 1. satır 4. sütun </td>
</tr>
</table>
Rowspan daha öncedende dediğim gibi sütunları birleştirir. Buradaki örnekte rowspan’ın yanında kullanacağımız sayı kaç sütunun birleşeceğini belirtir. Burada ilk birleştirme işleminde 3 değeri vererek 3 satırında birinci stunlarının birleşmesi gerektiğini belirttik. Doğal olarakta her satırdaki ilk sutun komutlarını sildik. Olay bukadar basit.
• Colspan : Satırları birleştirmeye yarar. Kullanımı çok basittir.
<table border=5 bordercolor=red>
<tr>
<td colspan=3> 1. satır 1. sütun </td>
<td> 1. satır 4. sütun </td>
</tr>
<tr>
<td> 1. satır 1. sütun </td>
<td colspan=2> 1. satır 2. sütun </td>
<td> 1. satır 4. sütun </td>
</tr>
<tr>
<td colspan=4> 1. satır 1. sütun </td>
</tr>
</table>
Colspan daha öncedende dediğim gibi satırları birleştirir. Buradaki örnekte colspan’in yanında kullanacağımız sayı kaç satırın birleşeceğini belirtir. Buradaki birleştirme işlemindeki değer ne olursa o kadar satırın komutu iptal edilmelidir. Olay bukadar basit.
©
Sanal İnternet
