1 / 26

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.

johnna
Download Presentation

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. HTML NEDİR? • HTML, “HYPER TEXT MARKUP LANGUAGE” KELİMELERİNİN KISALTILMIŞIDIR. • STANDART BİR WEB SAYFASININ UZANTISI .HTM VEYA .HTML OLMALIDIR. • BİR HTML DOSYASI, TAGLARDAN OLUŞAN BİR METİN DOSYASIDIR.

  5. HTML EDİTÖRLERİ • HTML KODLARINI YAZMAK İÇİN BASİT BİR METİN DÜZENLEME PROGRAMI (NOT DEFTERİ) 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.

  6. HTML TAGLARI (ETİKET) • WEB SAYFASI OLUŞTURMAK İÇİN KULLANILAN KOMUTLARA TAG DENİR. • <TAG>.....</TAG> ŞEKLİNDE KULLANILIRLAR. • TAGLARIN ARASINDA KALAN METNE “TAG İÇERİĞİ” DENİR. • TAG’LAR, BROWSER’A WEB SAYFASININ NASIL GÖRÜNMESİ GEREKTİĞİNİ ANLATIRLAR. • TAG’LER BÜYÜK HARFLE VEYA KÜÇÜK HARFLE YAZILABİLİRLER. GENELDE KÜÇÜK HARF TERCİH EDİLİR.

  7. ÖRNEK HTML SAYFASI • HER HTML BELGESİ BELİRLİ SAYIDA STANDART HTML TAGLARI İÇERMELİDİR. BİR HTML BELGESİNDE OLMASI GEREKEN KISIMLAR ŞUNLARDIR; <html> <head> {Başlık Bölümü} </head> <body> {Gövde Bölümü} </body> </html>

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

  9. <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. Örnek; <HEAD> <TITLE>WEB SAYFASI TASARIMI DERSİ UYGULAMASI...</TITLE> </HEAD>

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

  11. Uygulama • Masa üstünde bir klasör oluşturunuz, klasöre adınızı veriniz. • Şimdi de bu klasörü açıp yeni bir metin belgesi oluşturup aşağıdaki ifadeleri belge içine yazınız.(sağ fare/Yeni/Metin belgesi).

  12. Ş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:

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

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

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

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

  17. 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> kodu yazılamlıdır.

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

  19. ÖRNEK (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>

  20. <BR> DEYİMİ • HTML KODUNDA ENTER TUŞU İLE BOŞ SATIR AÇILAMAZ. BU İŞLEV İÇİN <BR> KOMUTU KULLANILIR. HER <BR> KOMUTU BİR BOŞ SATIR DEMEKTİR YAZILARIN ORTALANMASI ORTALANMAK İSTENEN METNİN BAŞINA “<CENTER>” BAŞLATMA DEYİMİNİ, SONUNA İSE “</CENTER> DEYİMİ KONULURSA BU İKİ DEYİM ARASINDA KALAN YAZI ORTALANIR.

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

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

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

  24. KÖPRÜ EKLEME <a href=“web adresi / dosya adı”>……</a> Nokta işaretli yere yazacağınız kelimeye ya da ekleyeceğiniz nesneye, fare sol düğme ile tıklatıldığında, tag içersinde belirttiğiniz web adresi ya da dosya açılacaktır. Örnek; <a href=http://www.facebook.com>feysbuğu aç.</a>

  25. RESİM EKLEME <img src=“dosya adı”> Örnek; <img src=resim1.jpg>

More Related