1 / 34

WEB TASARIMININ TEMELLERİ

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:

zahi
Download Presentation

WEB TASARIMININ TEMELLERİ

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEB TASARIMININ TEMELLERİ HTML

  2. 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>

  3. 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”>

  4. <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>

  5. Ö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>

  6. 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.

  7. 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.

  8. 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

  9. Ö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>

  10. <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

  11. 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>

  12. Ö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.

  13. ÖZEL HTML KARAKTERLERİ • < İÇİN &LT; • > İÇİN &GT; • & İÇİN &AMP; • “ İÇİN &quot; • X İÇİN &times; • Boşluk İçin &nbsp;

  14. HTML LİNKLERİ • HTML SAYFALARINDAKİ BİR SAYFADAN BAŞKA BİR SAYFAYA GİTMEK İÇİN “HYPERLINK”LERİ KULLANMALISINIZ. • BUNUN İÇİN <A> TAGI KULLANILIR.

  15. <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.

  16. Ö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>

  17. Ö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>

  18. Ö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>

  19. Ö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:skaratoz@mail.com">mail yolla</a> <a href="#son">Sona Git</a><br> <a name="son"></a></p> </body> </html>

  20. 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.

  21. 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

  22. SIRALI LİSTELER (ORDERED LIST) • ELEMANLAR NUMARALANDIRILARAK LİSTELENİR. • <OL type=“1”> • <LI>ÇAY</LI> • <LI>KAHVE</LI> • <LI>ŞEKER</LI> • </OL> • SONUÇ • ÇAY • KAHVE • ŞEKER

  23. 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>

  24. TANIM LİSTELERİ • SONUÇ: KAHVE SİYAH VE SICAK İÇECEK SÜT BEYAZ VE SOĞUK İÇECEK

  25. Ö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>

  26. 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.

  27. <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.

  28. <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>

  29. BORDER ÖZELLİĞİ • <TABLE BORDER=“1”> • ŞEKLİNE TABLONUN SINIRLARININ KALINLIĞI BELİRTİLİR.

  30. TABLODA BAŞLIKLAR <table border="1"> <tr> <th>İSİM</th> </tr> <tr> <td>Dokuz Eylül</td> </tr> </table>

  31. 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>

  32. 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>

  33. Ö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>

  34. Ö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>

More Related