1 / 45

HTML

HTML. WEB NEDİR?. WORLD WIDE WEB’E KISACA WEB DENİR. WEB, INTERNET'E BAĞLANAN TÜM BİLGİSAYARLARIN OLUŞTURDUĞU BİR AĞDIR. BU AĞDAKİ TÜM BİLGİSAYARLAR BİRBİRİYLE “HTTP İLETİŞİM STANDARDI”NI KULLANARAK KONUŞUR. WWW NASIL ÇALIŞIR?. WEB’DEKİ BİLGİLER “WEB SAYFASI” DENİLEN DOSYALARDA SAKLANIR.

vevina
Télécharger la présentation

HTML

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

  2. WEB NEDİR? • WORLD WIDE WEB’E KISACA WEB DENİR. • WEB, INTERNET'E BAĞLANAN TÜM BİLGİSAYARLARIN OLUŞTURDUĞU BİR AĞDIR. BU AĞDAKİ TÜM BİLGİSAYARLAR BİRBİRİYLE “HTTP İLETİŞİM STANDARDI”NI KULLANARAK KONUŞUR.

  3. WWW NASIL ÇALIŞIR? • WEB’DEKİ BİLGİLER “WEB SAYFASI” DENİLEN DOSYALARDA SAKLANIR. • WEB SAYFALARI “WEB SERVER” DENİLEN MAKİNELERDE BULUNUR. • SAYFALARI OKUMAK İSTEYEN “CLIENT” MAKİNELER, “BROWSER” DENİLEN PROGRAMLARI KULLANARAK BU SAYFALARI OKUYABİLİRLER.

  4. TAG NEDİR? • WEB SAYFASI OLUŞTURMAK İÇİN KULLANILAN KOMUTLARA TAG DENİR. • <TAG>.....</TAG> ŞEKLİNDE KULLANILIRLAR.

  5. HTML NEDİR? • HTML, “HYPER TEXT MARKUP LANGUAGE” KELİMELERİNİN KISALTILMIŞIDIR. • BİR HTML DOSYASI, TAGLARDAN OLUŞAN BİR METİN DOSYASIDIR. • TAG’LAR, BROWSER’A WEB SAYFASININ NASIL GÖRÜNMESİ GEREKTİĞİNİ ANLATIRLAR.

  6. HTML NEDİR? • STANDART BİR WEB SAYFASININ UZANTISI .HTM VEYA .HTML OLMALIDIR. • HTML DOSYALARI “NOT DEFTERİ” GİBİ BASİT BİR METİN EDİTÖRÜ VEYA “FRONTPAGE” GİBİ GELİŞMİŞ EDİTÖRLERLE OLUŞTURULABİLİRLER.

  7. HTML EDİTÖRLERİ • HTML KODLARINI YAZMAK İÇİN BASİT BİR METİN DÜZENLEME PROGRAMI YETERLİDİR. FAKAT KOD YAZIM KONUSUNDA ÇOK GELİŞMİŞ EDİTÖRLER MEVCUTTUR. BUNLAR • DREAMWEAVER MX • MS FRONTPAGE • OFFİCE WORD vs.. • BU TÜR PROGRAMLAR İLE OLDUKÇA PROFESYONEL WEB SAYFALARI HAZIRLANABİLİR.

  8. HTML TAGLARI (ETİKET) • HTML TAGLARI, HTML SAYFALARINI OLUŞTURMAK VE DÜZENLEMEK İÇİN KULLANILIRLAR. • <TAG>.....</TAG> ŞEKLİNDE KULLANILIRLAR. • TAGLARIN ARASINDA KALAN METNE “TAG İÇERİĞİ” DENİR. • TAG’LER BÜYÜK HARFLE VEYA KÜÇÜK HARFLE YAZILABİLİRLER. GENELDE KÜÇÜK HARF TERCİH EDİLİR.

  9. ÖRNEK HTML SAYFASI • HER HTML BELGESİ BELİRLİ SAYIDA STANDART HTML TAGLARI İÇERMELİDİR. BİR HTML BELGESİNDE OLMASI GEREKEN KISIMLAR ŞUNLARDIR; • TEMEL <HTML> METNİ • BAŞ <HEAD> METNİ • GÖVDE <BODY> METNİ • İYİ BİR HTML BELGESİNDE BU ÜÇ KISIMDA OLMALIDIR.

  10. -İlk Sayfa- • Öncelikle çalışmalarınızı saklamak için kullanacağınız boş bir klasör oluşturup uygun bir ad verin, mesela html_ders olsun. • Daha sonra bu ad bize lazım olacağından kolaylık olması için siz de yeni klasöre bu adı verebilirsiniz. • Şimdi de bu klasörü açıp yeni bir metin belgesi oluşturun (sağ fare/Yeni/Metin belgesi).

  11. Şimdi dosyayı kaydedin (Dosya/Farklı Kaydet...). • Dosya adı kısmına şöyle yazın: "sayfa1.htm" (tırnaklar dahil) ve Tamam'a basın. • Notepad'i kapatın, metin dosyasını silin ve oluşan yeni dosyayı açın. • Dosya varsayılan browser'ınız (Internet Explorer, Netscape Navigator gibi) tarafından açılacaktır. • Şöyle bir görüntü elde edeceksiniz:

  12. <HTML>...</HTML> • HER WEB SAYFASI BU TAG’LA BAŞLAYIP BU TAGLA BİTER. • <HTML> ...... ...... ....... </HTML>

  13. <HEAD>...</HEAD> • SAYFA İLE İLGİLİ BİLGİLER VERMEK İÇİN KULLANILIR. • BU BÖLÜMDEKİ BİLGİLER BROWSER’DAN GÖSTERİLMEZ. • SAYFA ÖZELLİKLERİ BU BÖLÜME YAZILIR. SAYFANIN BAŞLIĞI “<TITLE>” BU BÖLÜMDEDİR.

  14. <TITLE>...</TITLE> • PENCERE BAŞLIĞINI BELİRLER. • <HEAD> • <TITLE>WEB SAYFASI TASARIMI DERSİ UYGULAMASI...</TITLE> • </HEAD>

  15. ÖRNEK...<TITLE>...<TITLE> <HTML> <HEAD> <TITLE> WEB SAYFASI TASARIMI DERSİ UYGULAMASI... </TITLE> </HEAD> </HTML>

  16. <BODY>...</BODY> • SAYFAMIZIN GÖVDE KISMIDIR. • BROWSER’DA ZİYARETÇİ TARAFINDAN GÖRÜNECEK BİLGİLERİ İÇERİR. • <HTML> • <BODY> • BU KISMA YAZILANLAR ZİYARETÇİ TARAFINDAN GÖRÜLÜR. • </BODY> • </HTML>

  17. ZEMİN RENGİ (BACKGROUND) • İYİ BİR ZEMİN RENGİ WEB SİTENİZİN DAHA GÜZEL GÖRÜNMESİNİ VE DAHA FAZLA ZİYARETÇİ GELMESİNİ SAĞLAYABİLİR. • SAYFANIZIN ZEMİN RENGİNİ <BODY> TAG’I İÇERİSİNDE TANIMLAMANIZ GEREKİR. • ZEMİN RENGİ İÇİN İSTERSENİZ TEK BİR RENK VEYA BİR RESİM KULLANABİLİRSİNİZ.

  18. ZEMİN RENGİ (BACKGROUND) • SAYFANIZDA ZEMİN RENGİ TANIMLAMAK İÇİN <BODY> TAG’INI DEĞİŞTİRMELİSİNİZ • <BODY bgcolor=“RENK_ADI”> • BURADAKİ “RENK_ADI” BÖLÜMÜNDE RENKLERİN İNGİLİZCE KARŞILIĞINI GİRMEMİZ GEREKMEKTEDİR. • RENK ADI YERİNE O RENGE KARŞILIK GELEN “RGB” CİNSİNDEN HEXADESİMAL SAYIYI DA YAZABİLİRİZ.

  19. ÖRNEK 1 (ZEMİN RENGİ) <HTML> <HEAD> <TITLE> WEB SAYFASI TASARIMI DERSİ UYGULAMASI... </TITLE> </HEAD> <BODY bgcolor="Yellow"> </BODY> </HTML>

  20. ÖRNEK 2 (ZEMİN RENGİ) <HTML> <HEAD> <title> WEB SAYFASI TASARIMI DERSİ UYGULAMASI...</title> </HEAD> <BODY bgcolor="FFFF00"> </BODY> </HTML>

  21. ZEMİN RESMİ • SAYFANIZIN ZEMİNİNE BİR RESİM DE KOYABİLİRSİNİZ. • “BACKGROUND” ÖZELLİĞİ BU İŞLEM İÇİN KULLANILIR. • BUNUN İÇİN; • <body background="clouds.gif"> • <body background=“C:\Windows\desktop\dosyalar\bulutlar.gif"> • <body background="http://www.w3schools.com/clouds.gif"> YAPABİLİRSİNİZ.

  22. ÖRNEK 3 (ZEMİN RESMİ) <HTML> <HEAD> <title> WEB SAYFASI TASARIMI DERSİ UYGULAMASI...</title> </HEAD> <BODY background= "C:\WINDOWS\Desktop\dosyalar\Bulutlar.gif" > </BODY> </HTML>

  23. TEXT DEYİMİ • BODY İÇİNDE “TEXT” DEYİMİ KULLANILARAK SAYFADA BULUNAN YAZILARIN RENKLERİ AYARLANABİLİR. • KULLANIMI • <BODY TEXT=“RENK_ADI”> ŞEKLİNDEDİR.

  24. ÖRNEK 4 (METİN RENGİ) <HTML> <HEAD> <title> WEB SAYFASI TASARIMI DERSİ UYGULAMASI...</title> </HEAD> <body background="C:\WINDOWS\Desktop\dosyalar\Bulutlar.gif“ text="BLUE"> Bu yazı mavi renkli bir yazıdır.. </BODY> </HTML>

  25. AÇIKLAYICI EKLEME • SAYFANIZDA İSTEDİĞİNİZ YERDE AÇIKLAMA BİLGİLERİ EKLEYEBİLİRSİNİZ. • EKLEDİĞİNİZ AÇIKLAMALAR TARAYICI (INTERNET EXPLORER) DA GÖRÜNMEZ. • AÇIKLAMA YAZISI “<!--” İLE BAŞLAR VE “-->” İLE BİTER...

  26. ÖRNEK 5 (AÇIKLAMA) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> Bu yazı mavi renkli bir yazıdır.. </BODY> </HTML>

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

  28. ÖRNEK 6 (YAZI GİRME) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> ENF-110 Muğla Üniversitesi Enformatik Bölümü... </BODY> </HTML>

  29. <BR> DEYİMİ • BİR ÖNCEKİ ÖRNEĞİMİZDE “ENF-110” 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.

  30. ÖRNEK 7 (BR DEYİMİ) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> ENF-110<BR> Muğla Üniversitesi Enformatik Bölümü... </BODY> </HTML>

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

  32. ÖRNEK 7 (<CENTER>) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> <CENTER> ENF-110<BR> Muğla Üniversitesi Enformatik Bölümü... </CENTER> </BODY> </HTML>

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

  34. ÖRNEK 8 (YAZI BÜYÜKLÜĞÜ) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> <CENTER> <FONT SIZE=+6 >ENF-110</FONT><BR> Muğla Üniversitesi Enformatik Bölümü...... </CENTER> </BODY> </HTML>

  35. ÖRNEK 9 (H1,H2,...,H6) <HTML> <BODY> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> </BODY> </HTML>

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

  37. ÖRNEK 10 (K, İ,ALT) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> <CENTER> <FONT SIZE=+6 >ENF-110</FONT><BR> <B> Muğla Üniversitesi Enformatik Bölümü... </B><BR>

  38. ÖRNEK 10 (DEVAM) <I> Web Sayfası Tasarımı Dersi </I><BR> <U> Biçimlendirme Çalışmaları... </U> </CENTER> </BODY> </HTML>

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

  40. ÖRNEK 12 (YAZI RENGİ) <HTML> <HEAD><title> WEB Sayfası Tasarımı Dersi...</title></HEAD> <body text="BLUE"> <CENTER> <FONT color=blue >ENF-110</FONT><BR> <FONT color=yellow> Muğla Üniversitesi Enformatik Bölümü... </FONT><BR> <font color=pink> Renk çalışması uygulaması </font> </CENTER> </BODY> </HTML>

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

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

  43. ÖRNEK 13 (FACE PARAMETRESİ) <HTML> <HEAD><title> WEB Sayfası Tasarımı Dersi...</title></HEAD> <body text="BLUE"> <CENTER> <FONT face=Arial >ENF-110</FONT><BR> <FONT face="Courier New"> Muğla Üniversitesi Enformatik Bölümü...</FONT><BR> <FONT face=Verdana> Yazı tipi çalışması </FONT> </CENTER> </BODY> </HTML>

  44. ÖRNEK 14 (FACE PARAMETRESİ) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD> <body > <CENTER> <FONT color="red" face=Arial>ENF-110</FONT><BR> <font color="green"> Muğla Üniversitesi Enformatik Bölümü...</font><BR> <FONT face=Verdana> Karışık örnek çalışması </FONT> </CENTER> </BODY> </HTML>

More Related