web tasariminin temellerİ
DESCRIPTION
WEB TASARIMININ TEMELLERİ. HTML. DIV. etiketi, isteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir bölüm (division) oluşturulmasını sağlar. DIV etiketi bir blok oluşturduğu için bir metnin içinde kullanılması durumunda ilgili metni kesecektir. Örnek: - PowerPoint PPT PresentationTRANSCRIPT
WEB TASARIMININ TEMELLERİ
HTML
DIV
<DIV> etiketi, isteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir bölüm (division) oluşturulmasını sağlar. DIV etiketi bir blok oluşturduğu için bir metnin içinde kullanılması durumunda ilgili metni kesecektir.
Örnek: <div align=“center”> Metin Ortada </div> <div align=“right”> Metin Sağda </div>
BASEFONT VE FONT SEÇİMİ
BİR WEB SAYFASINDA BİR YAZININ FONTU BELİRTİLMEMİŞSE ÖNCEDEN TANIMLI OLAN BİR FONT KULLANILIR. EĞER BİZ YAZILARIMIZDA FONT TİPİNİ BELİRTMEZSEK ÖNCEDEN TANIMLANMIŞ FONT KULLANILIR. BASEFONT DEYİMİ İLE BİZ BU FONTU
DEĞİŞTİREBİLİRİZ. KULLANIMI = “<BASEFONT FACE=“Arial”>
<BIG> VE <SMALL> TAGLARI
YAZILARIMIZDAKİ BAZI BÖLÜMLERİ DAHA BÜYÜK YAPMAK İSTİYORSAK “<BIG> DEYİMİNİ; DAHA KÜÇÜK YAPMAK İSTİYOR İSEK “<SMALL>” DAYİMİNİN KULLANIRIZ. <BIG> YAZIMIZ ARTK DAHA BÜYÜK</BIG> <SMALL> YAZIMIZ ŞİMDİ KÜÇÜLDÜ </SMALL>
ÖRNEK 22 (BIG SMALL)
<HTML>
<HEAD><title>DESEM Bilgisayar Kursları...</title></HEAD>
<body>
<p>EĞER EKRANIMIZDA BAZI YAZILARIN <big> DAHA BÜYÜK OLMASINI İSTİYORSAK BİG DEYİMİNİ
KULLANIRIM</big> BÖYLECE YAZILAR DAHA BÜYÜK OLUR. </p>
<p>AYNI ŞEKİLDE <small> BAZI YAZILARIMIZDA <SMALL>DAHA DA KÜÇÜK</SMALL> YAPABİLİRİZ.</small> BUNUDA SMALL DEYİMİ İLE HALLEDİYORUZ </p>
</BODY>
</HTML>
TT DEYİMİ
YAZILARIMIZ KULLANDIĞIMIZ YAZI FONTUNA GÖRE KARAKTER ARASI BOŞLUKLAR AYARLANIR. FAKAT “I” İLE “T” AYNI MİKTARDA BOŞLUĞA SAHİP DEĞİLLERDİR. BÜTÜN KARAKTERLER ARASI BOŞLUĞU EŞİT YAPMAK İÇİN “<TT>” TAGI KULLANILIR.
STRIKE DEYİMİ
EĞER YAZILARIMIN ORTASINA BİR ÇİZGİ ÇEKMEK İSTERSEM BUNUN İÇİN STRIKE DEYİMİNİ KULLANIRIM <STRIKE> YAZI </STRIKE>
STRIKE DEYİMİNİN YERİNE “<S>” DEYİMİNİ DE KULLANABİLİRİM.
PRE DEYİMİ
EĞER NOT DEFTERİNDE YAZILDIĞI GİBİ YAZILARIMIZIN GÖRÜNMESİNİ İSTERSEK “<PRE>” DEYİMİNİ KULLANABİLİRİZ. BUNUN İÇİN YAZIMIZI “<PRE>” TAGI ARASINDA YAZMAMIZ GEREKİR
ÖRNEK 23 (PRE DEYİMİ)
<HTML>
<HEAD><title>DESEM Bilgisayar Kursları...</title></HEAD>
<body>
<PRE>
ADI SOYADI ADRESİ TELEFON
-----------------------------------------------------------------------------
SEZAİ KARATOZ BORNOVA 4640917
ŞENOL GÜNGÖRDÜ BAYRAKLI 4586254
</PRE>
</BODY>
</HTML>
<SUB>...</SUB>
METİNLERİ “ALT METİN” YAPMAYA YARAR. <P> PARAGRAF BAŞLADI. <SUB>BU KISIM
ALT TARAFTA. </SUB> PARAGRAF NORMAL DEVAM EDİYOR. </P
SAYFA BAŞLIĞI
SAYFA İLE İLGİLİ BİR TAKIM BİLGİLER VERMEK İÇİN HTML SAYFALARINDA “HEAD” (SAYFA BAŞLIĞI) ŞEKLİNDE ADLANDIRILAN BİR BÖLÜM VARDIR.
BU BÖLÜMDEKİ BİLGİLER TARAYICIDAN GÖSTERİLMEZ.
BU BÖLÜMDE SADECE AŞAĞIDAKİ TAG’LAR KULLANILABİLİR: <BASE>, <LINK>, <META>, <TITLE>, <STYLE> VE
<SCRIPT>
ÖZEL HTML KARAKTERLERİ
<,>,&, “, ‘ GİBİ KARAKTERLER HTML KOMUTLARI İÇİNDE KULLANILAN ÖZEL KARAKTERLERDİR.
BU KARAKTERLER BROWSER’DAN GÖSTERİLMEZLER.
EĞER BU TÜR KARAKTERLERİ METİN İÇİNDE KULLANMAK VE BROWSER’DAN GÖSTERMEK İSTİYORSANIZ, BUNLARA VERİLEN ÖZEL KODLARI YAZMALISINIZ.
ÖZEL HTML KARAKTERLERİ
< İÇİN < > İÇİN > & İÇİN & “ İÇİN " X İÇİN × Boşluk İçin
HTML LİNKLERİ
HTML SAYFALARINDAKİ BİR SAYFADAN BAŞKA BİR SAYFAYA GİTMEK İÇİN “HYPERLINK”LERİ KULLANMALISINIZ.
BUNUN İÇİN <A> TAGI KULLANILIR.
<A>...</A> (ANCHOR)
KULLANIMI AŞAĞIDAKİ GİBİDİR. <A HREF=“URL”> GÖRÜNTÜLENECEK METİN </A>
<A HREF=“www.bilkur.net”> tıklayınız...</A>
HEMEN HEMEN TÜM NESNELERİ KULLANARAK LİNKLER OLUŞTURABİLİRSİNİZ.
RESİMLER, SES DOSYALARI, GÖRÜNTÜ DOSYALARI, METİNLER V.B.
Örnek 24 <a>
<HTML><HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title></head> <body> Dokuz eylul Üniversitesi web sayfası için <A HREF="htpp://www.deu.edu.tr">tıklayın</A> <br> <A HREF="index.htm">Benim Sayfam</A></body></html>
Örnek 25 <name>
<HTML><HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title></head> <body><p>Dokuz eylul Üniversitesi web sayfası için <A
HREF="http://www.deu.edu.tr">tıklayın</A> <br> <A HREF="index.htm">Benim Sayfam</A> <br> <a href="#son">Sona Git</a><br> <a name="son"></a></p></body></html>
Örnek 26 <img>
<HTML><HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title></head> <body><p>SD Üniversitesi web sayfası için <A
HREF="http://www.sdu.edu.tr">tıklayın</A> <br> <A HREF="index.htm">Benim Sayfam</A> <br> <a href="http://www.deu.edu.tr"><img src=“image.gif"></a> <a href="#son">Sona Git</a><br> <a name="son"></a></p></body></html>
Örnek 27 <mailto><HTML><HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title></head> <body><p>Dokuz eylul Üniversitesi web sayfası için <A
HREF="htpp://www.deu.edu.tr">tıklayın</A> <br> <A HREF="index.htm">Benim Sayfam</A> <br> <a href="http://www.deu.edu.tr"><img src=“image.gif"></a> <a href="mailto:[email protected]">mail yolla</a> <a href="#son">Sona Git</a><br> <a name="son"></a></p></body></html>
HTML LİSTELERİ
WEB SAYFALARINDA NESNELERİNİZİ LİSTELER HALİNDE SIRALAYARAK DAHA DÜZENLİ GÖRÜNMELERİNİ SAĞLAYABİLİRSİNİZ.
HTML LİSTELERİ SIRALI, SIRASIZ VEYA TANIMLI OLABİLİR.
SIRASIZ LİSTELER (UNORDERED LIST)
SIRASIZ LİSTELERDE NESNELER MADDE İMLERİ İLE LİSTELENİR. <UL type=“square”>
<LI>KAHVE</LI><LI>ÇAY</LI><LI>ŞEKER</LI>
</UL> SONUÇ:
ÇAY KAHVE ŞEKER
SIRALI LİSTELER (ORDERED LIST)
ELEMANLAR NUMARALANDIRILARAK LİSTELENİR.
<OL type=“1”>
<LI>ÇAY</LI> <LI>KAHVE</LI> <LI>ŞEKER</LI>
</OL> SONUÇ
1. ÇAY2. KAHVE3. ŞEKER
TANIM LİSTELERİ
NESNELERİ LİSTELEMEK İÇİN DEĞİL DE, BAŞLIK/ALT BAŞLIK ŞEKLİNDE SIRALAMAK İÇİN KULLANILIRLAR. <DL>
<DT>KAHVE</DT> <DD>SİYAH VE SICAK İÇECEK</DD> <DT>SÜT</DT> <DD>BEYAZ VE SOĞUK İÇECEK</DD>
</DL>
TANIM LİSTELERİ
SONUÇ:KAHVE
SİYAH VE SICAK İÇECEK
SÜTBEYAZ VE SOĞUK İÇECEK
Örnek 28<HTML><HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title></head> <body>
<UL type=“”>
<LI>KAHVE</LI><LI>ÇAY</LI><LI>ŞEKER</LI>
</UL><OL type=“i”>
<LI>ÇAY</LI><LI>KAHVE</LI><LI>ŞEKER</LI>
</OL><DL>
<DT>KAHVE</DT><DD>SİYAH VE SICAK İÇECEK</DD><DT>SÜT</DT><DD>BEYAZ VE SOĞUK İÇECEK</DD>
</DL></body></html>
HTML TABLOLARI
HTML DİLİNDE TABLO OLUŞTURMAK İÇİN <TABLE> TAGI KULLANILIR.
İYİ BİLİNMESİ GEREKEN KONULARDAN BİRİDİR ÇÜNKÜ SAYFA İÇİNDEKİ NESNELER TABLOLARLA DÜZENLENİR VE HİZALANIR.
<TABLE>
TABLOLAR <TR> TAGIYLA SATIRLARA VE HER SATIR DA <TD> TAGIYLA SÜTUNLARA BÖLÜNÜR.
BU İŞLEM SONUNDA OLUŞTURULAN HÜCRELERDE METİNLER, LİSTELER, RESİMLER, PARAGRAFLAR, FORMLAR VE BAŞKA DİĞER NESNELER DE OLABİLİR.
<TABLE>...</TABLE><HTML><HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title></head><body><table border="1"> <tr> <td>Hücre 1</td> </tr> </table></body></html>
BORDER ÖZELLİĞİ
<TABLE BORDER=“1”> ŞEKLİNE TABLONUN SINIRLARININ
KALINLIĞI BELİRTİLİR.
TABLODA BAŞLIKLAR
<table border="1">
<tr>
<th>İSİM</th>
</tr>
<tr>
<td>Dokuz Eylül</td>
</tr>
</table>
BOŞ HÜCRELİ TABLOLAR
BOŞ HÜCRELER ÇOĞU BROWSER'DA KÖTÜ BİR ŞEKİLDE KENARLARI OLMADAN GÖRÜNÜRLER.
<TABLE BORDER="1" > <TR> <TD>HÜCRE 1</TD> <TD>HÜCRE 2</TD> </TR> <TR> <TD>HÜCRE 3</TD> <TD></TD> </TR></TABLE>
BOŞ HÜCRELİ TABLOLAR
BU SORUNDAN KURTULMAK İÇİN BOŞ HÜCRELERE (&NBSP;) KOYULUR VE BU ŞEKİLDE HÜCRE KENARLIKLARININ GÖRÜNMESİ SAĞLANIR.
<TABLE BORDER="1" > <TR> <TD>HÜCRE 1</TD> <TD>HÜCRE 2</TD> </TR> <TR> <TD>HÜCRE 3</TD> <TD>&NBSP;</TD> </TR></TABLE>
ÖRNEK 29<HTML><HEAD> <title>DESEM DEU Sürekli Eğitim Merkezi....</title></head> <body><TABLE BORDER="1" > <TR ALİGN="CENTER" VALİGN="TOP"> <TD WİDTH="94"><STRONG>ÜLKE ADI</STRONG></TD> <TD WİDTH="72"><STRONG>NÜFUSU</STRONG></TD> <TD WİDTH="153"><STRONG>BULUNDUĞU KITA</STRONG></TD> </TR> <TR> <TD>AVUSTURYA</TD> <TD>8,000,000</TD> <TD>AVRUPA</TD> </TR>
ÖRNEK 29 (devam) <TR>
<TD>ALMANYA</TD>
<TD>80,000,000</TD>
<TD>AVRUPA</TD>
</TR>
<TR>
<TD>TÜRKİYE</TD>
<TD>70,000,000</TD>
<TD>AVRUPA</TD>
</TR>
</TABLE></body></html>