1 / 37

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ. HTML. SAYFALARA YAZI VEYA METİN GİRMEK. İKİ “BODY” DEYİMİ ARASINA YAZILARIMIZI YAZARIZ. BİR WEB SAYFASININ İÇERİĞİNİ İNTERNET EXPLORER PROGRAMIYLA GÖREBİLİRİZ. YAZILARIMIZI BİÇİMLEME DEYİMLERİ KULLANARAK DÜZENLERİZ. ÖRNEK 6 (YAZI GİRME). <HTML> <HEAD>

triage
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. SAYFALARA YAZI VEYA METİN GİRMEK • İKİ “BODY” DEYİMİ ARASINA YAZILARIMIZI YAZARIZ. • BİR WEB SAYFASININ İÇERİĞİNİ İNTERNET EXPLORER PROGRAMIYLA GÖREBİLİRİZ. • YAZILARIMIZI BİÇİMLEME DEYİMLERİ KULLANARAK DÜZENLERİZ.

  3. ÖRNEK 6 (YAZI GİRME) <HTML> <HEAD> <title>DESEM Bilgisayar Kursları...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> DESEM Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi... </BODY> </HTML>

  4. <BR> DEYİMİ • BİR ÖNCEKİ ÖRNEĞİMİZDE “DESEM” YAZISINDA SONRA YAZIYA BİR ALT SATIRDAN BAŞLAMAK İNTERNET EXPLORER PROGRAMINDA HİÇBİR DEĞİŞİKLİĞE YOL AÇMADI.. • BİR ALT SATIRDAN YAZIYA DEVAM ETMEK İÇİN <BR> DEYİMİ KULLANILIR.

  5. ÖRNEK 7 (BR DEYİMİ) <HTML> <HEAD> <title>DESEM Bilgisayar Kursları...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> DESEM<BR> Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi... </BODY> </HTML>

  6. YAZILARIN ORTALANMASI • SAYFA İÇİNDE ORTALANMASINI İSTEDİĞİM YAZILAR İÇİN <CENTER>...</CENTER> DEYİMİNİ KULLANABİLİRİM. • ORTALAMAK İSTEDİĞİM METNİN BAŞINA “<CENTER>” BAŞLATMA DEYİMİNİ, SONUNA İSE “</CENTER> DEYİMİNİ YERLEŞTİRECEĞİM. BU İKİ DEYİM ARASINDA KALAN YAZI ORTALANIR.

  7. ÖRNEK 8 (<CENTER>) <HTML> <HEAD> <title>DESEM Bilgisayar Kursları...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> <CENTER> DESEM<BR> Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi... </CENTER> </BODY> </HTML>

  8. YAZI BÜYÜKLÜĞÜ • WEB SAYFAMIZDA KULLANDIĞIMIZ YAZILARIMIZIN FARKLI BÜYÜKLÜKTE OLMASI GEREKEBİLİR. • BÜYÜKLÜK AYARI İÇİN <FONT> DEYİMİ İÇİNDE KULLANILAN “SIZE” PARAMETRESİ KULLANILIR. • <FONT SİZE=+X>..YAZIMIZ..</FONT> • BURADA “X” HARFİ YAZIMIZIN BÜYÜKLÜĞÜDÜR.

  9. ÖRNEK 9 (YAZI BÜYÜKLÜĞÜ) <HTML> <HEAD> <title>DESEM Bilgisayar Kursları...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> <CENTER> <FONT SIZE=+6 >DESEM</FONT><BR> Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi... </CENTER> </BODY> </HTML>

  10. ÖRNEK 10 (H1,H2,...,H6) <HTML> <BODY> <h1> Bu başlık 1 dir</h1> <h2> Bu başlık 2 dir </h2> <h3> Bu başlık 3 dür </h3> <h4> Bu başlık 4 tür </h4> <h5> Bu başlık 5 dir </h5> <h6> Bu başlık 6 dır </h6> </BODY> </HTML>

  11. KALIN, İTALİK VE ALTI ÇİZGİLİ YAZI • BİR ÖNCEKİ ÖRNEĞİMİZDE YAZIMIZIN İSTEDİĞİMİZ BÜYÜKLÜKTE OLMASINI SAĞLAYABİLİYORDUK. • BENZER ŞEKİLDE METİNLERİN KALIN, İTALİK VE ALT ÇİZGİLİ OLMASINI DA SAĞLAYABİLİRİZ. • KALIN İÇİN <B>..YAZI</B> • İTALİK İÇİN <I>..YAZI..</I> • ALT ÇİZGİ İÇİN <U>..YAZI..</U> KULLANILIR

  12. ÖRNEK 11 (K, İ,ALT) <HTML> <HEAD> <title>DESEM Bilgisayar Kursları...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> <CENTER> <FONT SIZE=+6 >DESEM</FONT><BR> <B> Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi... </B><BR>

  13. ÖRNEK 11 (DEVAM) <I> Mühendislik Fakültesi </I><BR> <U> Bilgisayar Mühendisliği Bölümü... </U> </CENTER> </BODY> </HTML>

  14. <STRONG>,<EM> DEYİMLERİ • YAZIMIZI KALIN YAPMAK İÇİN “<B>” DEYİMİ YERİNE “<STRONG>” DEYİMİNİ KULLANABİLİRİZ. • AYNI ŞEKİLDE YAZIMIZI İTALİK YAPMAK İÇİN “<I>” DEYİMİ YERİNE “<EM>” DEYİMİNİ KULLANABİLİRİZ.

  15. ÖRNEK 12 (STRONG, EM) <HTML> <HEAD> <title>DESEM Bilgisayar Kursları...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> <CENTER> <FONT SIZE=+6 >DESEM</FONT><BR> <STRONG> Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi... </STRONG><BR>

  16. ÖRNEK 12 (DEVAM) <EM> Mühendislik Fakültesi </EM> <STRONG><EM> Bilgisayar Mühendisliği </EM></STRONG> </CENTER> </BODY> </HTML>

  17. YAZI RENGİNİ AYARLAMAK • YAZI RENGİ AYARI İÇİN DAHA ÖNCE BİR YOL TANIMLAMIŞTIK. • FAKAT SADECE TÜM SAYFAMIZIN YAZI RENGİNİ DEĞİŞTİREBİLİYORDUK. • BELLİ YAZILARIMIN RENGİNİN FARKLI RENKTE OLMASINI İSTİYORSAM “<FONT>” DEYİMİNİN “COLOR” PARAMETRESİNİ KULLANIRIM. • <FONT color= “ YAZI RENGİ”>YAZIM</FONT> KULLANILIR

  18. ÖRNEK 13 (YAZI RENGİ) <HTML> <HEAD><title>DESEM Bilgisayar Kursları...</title></HEAD> <body text="BLUE"> <CENTER> <FONT color=“red” >DESEM</FONT><BR> <FONT color=“yellow”> Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi... </FONT><BR> <font color=“green”>Mühendislik Fakültesi </font> </CENTER> </BODY> </HTML>

  19. FONT DEĞİŞİKLİĞİ • YAZILARIMIZI WORD PROGRAMINDA OLDUĞU GİBİ BİR FONT BELİRTEREKTE BİÇİMLENDİREBİLİRİZ. • ÖRNEĞİN “Arial”,”Times New Roman”,”Technical” vs.. HEP FONT ÇEŞİTLERİDİR. • WİNDOWS İŞLETİM SİSTEMİ BU FONTLARDAN BİR ÇOĞUN DESTEKLER.

  20. FONT DEĞİŞTİRME • WİNDOWS İŞLETİM SİSTEMİNİN DESTEKLEDİĞİ FONTLARI RAHATLIKLA WEB SAYFALARIMIZDA KULLANABİLİRİZ. • BU FONTLARI KULLANMAK İÇİN “<FONT>” DEYİMİNİN “FACE” PARAMETRESİNİ KULLANIRIZ. • <FONT face= “arial”>DESEM</FONT>

  21. ÖRNEK 14 (FACE PARAMETRESİ) <HTML> <HEAD><title>DESEM Bilgisayar Kursları...</title></HEAD> <body text="BLUE"> <CENTER> <FONT face=“Arial” >DESEM</FONT><BR> <FONT face="Courier New"> Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi...</FONT><BR> <FONT face=“Verdana”>Mühendislik Fakültesi </FONT> </CENTER> </BODY> </HTML>

  22. ÖRNEK 15 (FACE PARAMETRESİ) <HTML> <HEAD> <title>DESEM Bilgisayar Kursları...</title> </HEAD> <body > <CENTER> <FONT color="red" face=“Arial”>DESEM</FONT><BR> <font color="green">Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi...</font><BR> <FONT face=“Verdana”>Mühendislik Fakültesi </FONT> </CENTER> </BODY> </HTML>

  23. HTML RESİMLERİ • ÖZELLİKLE BANT GENİŞLİĞİNİN ARTMASIYLA WEB SAYFALARINDA ÇOK FAZLA RESİMLER KULLANILMAYA BAŞLANDI. • BUNUN SONUCU OLARAK <IMG> TAGININ İYİ BİLİNMESİ GEREKMEKTEDİR.

  24. <IMG> VE “SRC” ÖZELLİĞİ • <IMG> TAGININ BİTİŞ TAGI YOKTUR, SADECE ÖZELLİKLERİ VARDIR. • BİR SAYFADA RESİM GÖRÜNTÜLEYEBİLMEK İÇİN <IMG> TAGININ “SRC” ÖZELLİĞİ KULLANILIR. • YANİ; • <IMG SRC=“URL”> • < IMG SRC=“C:\İSMAİL.GIF>

  25. HTML RESİMLERİ • BİR RESMİ WEB SAYFAMIZA YERLEŞTİRMEK İSTİYORSAK İLK OLARAK RESİM DOSYAMIZ HARD DİSKİMİZ ÜZERİNDE OLMALIDIR. • AYNI ŞEKİLDE İNTERNET ÜZERİNDEN YAYINLAYACAĞIMIZ RESME AİT DOSYA DA İNTERNET’TE OLMALIDIR.

  26. RESİM TİPLERİ • İNTERNET ÜZERİNDEN YAYINLAYACAĞIMIZ RESİMLERİN FORMATI: • JPEG, JPG • BMP • GIF • XBM • PNG

  27. Örnek16 (Resim Ekleme) <HTML> <HEAD><title>DESEM Bilgisayar Kursları...</title></HEAD> <body text="BLUE"> <CENTER> <FONT face=“Arial” >DESEM</FONT><BR> <FONT face="Courier New"> Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi...</FONT><BR> <FONT face=“Verdana”>Mühendislik Fakültesi </FONT> <IMG SRC = “file:///C:/WINDOWS/Backgrnd.gif ”> </CENTER> </BODY> </HTML>

  28. Örnek 17(Resim ekleme) <HTML> <HEAD><title>DESEM Bilgisayar Kursları...</title></HEAD> <body text="BLUE"> <CENTER> <FONT face=Arial >DESEM</FONT><BR> <FONT face="Courier New"> Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi...</FONT><BR> <FONT face=Verdana>Mühendislik Fakültesi </FONT> <IMG SRC = ../dosyalar/bulutlar.gif ”> </CENTER> </BODY> </HTML>

  29. Resim Biçimleme • WEB SAYFASINA EKLEDİĞİMİZ RESİMLERİ • “BORDER” ÖZELLİĞİ İLE RESİM ÇERÇEVE KALINLIĞI BELİRTİLEBİLİR. • “ALİGN” ÖZELİĞİ İLE RESMİN KONUMU BELİRTİLEBİLİR • LEFT,RIGHT,CENTER,TOP,BOTTOM • “HEIGHT” İLE RESİM YÜKSEKLİĞİNİ VE • “WIDTH” İLEDE RESİM GENİŞLİĞİNİ BELİRTEBİLİRİZ.

  30. ÖRNEK18 (Resim özellikleri ) <HTML> <HEAD><title>DESEM Bilgisayar Kursları...</title></HEAD> <body text="BLUE"> <CENTER> <FONT face=“Arial “>DESEM</FONT><BR> <FONT face="Courier New"> Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi...</FONT><BR> <FONT face=“Verdana”>Mühendislik Fakültesi </FONT> <IMG SRC =“../dosyalar/bulutlar.gif” width="250" height="240" border="6" > </CENTER> </BODY> </HTML>

  31. Resim özellikleri “ALT” • RESİM GÖRÜNTÜLENEMEDİĞİ ZAMAN VEYA BELİRTİLEN TİPTEKİ RESMİ GÖRÜNTÜLEME İMKANI OLMAYAN TARAYICILAR İÇİN RESMİMİZ YERİNE BİR METİNDE HAZIRLANABİLİR • BUNUN İÇİN • <IMG SRC = “resim_adı” ALT=“METNİMİZ”> KULLANILIR

  32. ÖRNEK 19 (ALT ÖZELLİĞİ) <HTML> <HEAD><title>DESEM Bilgisayar Kurslary...</title></HEAD> <body text="BLUE"> <CENTER> <FONT face=“Arial” >DESEM</FONT><BR> <FONT face="Courier New"> Dokuz Eylül Üniversitesi Sürekli Eğitim Merkezi...</FONT><BR> <FONT face=“Verdana”>Mühendislik Fakültesi </FONT> <img src =“../dosyalar/bulutlar.gif” width="250" height="240" border="6" alt = "Guzel bir bulut"> </CENTER> </BODY> </HTML>

  33. SAYFALARDA YATAY ÇİZGİ • SAYFALARIMIZA YATAY BİR ÇİZGİ EKLEMEK İSTİYORSAK “<HR>” TAGINI KULLANMAMIZ GEREKİR. • SAYFANIZIN İSTEDİĞİNİZ BİR YERİNE <HR> DEYİMİNİ EKLERİZ. KAPANIŞ TAGI YOKTUR. • <HR align="center" width="250" size="5" noshade color="#0000CC">

  34. <P>...</P> • PARAGRAFLARI BELİRTMEK İÇİN KULLANILIR. • <P>BURASI BİR PARAGRAFTIR.</P>

  35. ÖRNEK 20 (<P>) <HTML> <HEAD><title>DESEM Bilgisayar Kurslary...</title></HEAD> <body text="BLUE"> <p align="left">BURASI İLK PARAGRAF </p> <p align="center">BURASI DA İKİNCİ PARAGRAF </p> <p align="right">BURASI ÜÇÜNCÜ VE SAĞA DAYALI</p> <p align="justify">VE DE İKİ KENARA DAYALI</p> </BODY> </HTML>

  36. KENAR BOŞLUKLARI • İNTERNET EXPLORER SAYFALARIMIZI GÖRÜNTÜLERKEN KENARLARDA BİR MİKTAR BOŞLUK BIRAKMAKTADIR. • EĞER BOŞLUK MİKTARINI KENDİMİZ BELİRTMEK İSTERSEK “BODY” DEYİMİ İLE KULLANILAN • TOPMARGIN • LEFTMARGIN ÖZELLİKLERİNİ KULLANIRIZ...

  37. ÖRNEK 21 (TOPMARGIN,LEFTMARGIN) <HTML> <HEAD><title>DESEM Bilgisayar Kursları...</title></HEAD> <body TOPMARGIN=50 LEFTMARGIN=100> <p align="left">BURASI İLK PARAGRAF </p> <p align="center">BURASI DA İKİNCİ PARAGRAF </p> <p align="right">BURASI ÜÇÜNCÜ VE SAĞA DAYALI</p> <p align="justify">VE DE İKİ KENARA DAYALI</p> <!-- AUTOSTART VE HIDDEN PARAMETRELERİ DE KULLANILABİLİR --> <EMBED SRC="C:\WINDOWS\MEDIA\LOGOFF.WAV"> </BODY> </HTML>

More Related