HTML Ders Slaytları - Bilgisayar Kursu, NETSİS Muhasebe, Web
Transkript
HTML Ders Slaytları - Bilgisayar Kursu, NETSİS Muhasebe, Web
HTML KODLARI İLE WEB TASARIMI EĞİTMEN • AD SOYAD : • TECRÜBE • OKUL : : LÜTFEN DİKKAT! • SINIFTAKİ BAŞARIMIZIN MAKSİMUM DÜZEYDE OLMASI İÇİN: • • • DEVAMSIZLIK YAPMAYINIZ; KAÇIRDIĞINIZ DERSLER SONRAKİ KONULARA TEMEL OLUŞTURDUĞUNDAN SONRAKİ DERSLERİ DE ANLAYAMAZSINIZ DERSLERE ZAMANINDA GELİNİZ; KAÇIRILAN DERSLERİN TELAFİSİNİN YAPILMADIĞINI UNUTMAYINIZ ANLAMADIĞINIZ KONU OLDUĞUNDA HEMEN EĞİTMENE SORUNUZ LÜTFEN DİKKAT! • DERSLERDE CEP TELEFONU V.B. CİHAZLARI KAPATINIZ • EĞİTMEN DERS ANLATIRKEN TELEFON, MAKYAJ V.B. ŞEYLERLE İLGİLENMEYİNİZ • SINIFIN DİKKATİNİ DAĞITACAK DAVRANIŞLARDAN KAÇININIZ LÜTFEN DİKKAT! • LABORATUVARDAKİ BİLGİSAYAR V.B. CİHAZLARIN BOZULMAMASI İÇİN: • SINIFTA YİYECEK-İÇECEK TÜKETMEYİNİZ; SIVI VE SUSAM GİBİ MADDELER CİHAZLARA ZARAR VERİR VE DÜZGÜN ÇALIŞMASINI ENGELLER • CİHAZLARI KURCALAMAYINIZ; CİHAZDA ARIZA OLDUĞUNU DÜŞÜNÜYORSANIZ BİR KAĞIDA NOT BIRAKINIZ LÜTFEN DİKKAT! • BİLGİSAYARLARDAKİ KORUMA YAZILIMI, BİLGİSAYAR KAPANDIKTAN SONRA KAYDETTİĞİNİZ TÜM DOSYALARI & AYARLARI SİLMEKTEDİR • LÜTFEN DOSYALARINIZI FLASH BELLEĞE KAYDEDİN VEYA DERS SONUNDA EMAIL ADRESİNİZE GÖNDERİN LÜTFEN DİKKAT! • YAZILIM İSTEMEYİNİZ. KORSAN YAZILIM SUÇTUR; HAPİS VE PARA CEZASI VARDIR • LİSANSLI OLARAK SATIN ALINAN YAZILIMLARIN YÜKLENMESİNDE YARDIMCI OLUNABİLİR • ÜCRETSİZ VEYA AÇIK KAYNAK KODLU YAZILIMLARI SUNUCUMUZDAN İNDİREBİLİRSİNİZ DERS SLAYTLARI • DERS SLAYTLARI VE DİĞER DÖKÜMANLARI SUNUCUDAN ALINIZ • Windows Gezgini ->Adres Çubuğu -> \\sunucu\ depo\ • Kullanıcı Adı : bilimsel • Parola : bilimsel • KAYNAKLAR • HTML EL KİTABI – BETA YAYINLARI – MEMİK YANIK • HTML – BETA YAYINLARI – ADEM KARAHOCA • WWW.W3SCHOOLS.COM KONULAR • • • • • • • • TEMEL KAVRAMLAR TEMEL HTML KOMUTLARI METİN İŞLEMLERİ LİNKLER RESİM İŞLEMLERİ TABLO OLUŞTURMA FORM İŞLEMLERİ TEMEL SEO BİLGİSİ İNTERNET NEDİR? • İNTERNET, İKİ YA DA DAHA FAZLA BİLGİSAYAR AĞININ ROUTER VE HUB/SWITCH’LERLE BİRBİRİNE BAĞLANMASI İLE OLUŞAN YAPIDIR. • HER PC’NİN EŞSİZ BİR IP NUMARASI VARDIR, TCP/IP PROTOKOLÜ İLE BU BİLGİSAYARLAR BİRBİRLERİ İLE KONUŞABİLİR. TCP/IP NEDİR? • BİLGİSAYARLARIN BİRBİRLERİ İLE KONUŞABİLMESİ İÇİN KURARALLARA YANİ PROTOKOLLERE İHTİYAÇ VARDIR. • TCP/IP, AĞLARDA BULUNAN BİLGİSAYARLARIN BİRBİRİ İLE KONUŞABİLMESİ İÇİN KULLANILAN KURALLAR TOPLULUĞUDUR. TCP/IP NEDİR? • TCP/IP’DEN BAŞKA, NETBEUI, IPX/SPX GİBİ PROTOKOLLER DE VARDIR. FAKAT TCP/IP GÜNENİRLİLİĞİ NEDENİYLE ARTIK BİR STANDART HALİNE GELMİŞTİR. • TCP/IP PROTOKOLÜ VERİYİ “PAKET” ADI VERİLEN KÜÇÜK BİRİMLERE EYIRIR; BİR YA DA DAHA FAZLA YOL ÜZERİNDEN BU PAKETLERİ GÖNDERİR VE GİTTİĞİ YERDE YENİDEN BİRLEŞTİRİR. İNTERNET UYGULAMALARI • E-MAIL • SOHBET • TELNET (UZAKTAKİ BİR BİLGİSAYARA SANKİ O BİLGİSAYARDA ÇALIŞIYORMUŞ GİBİ BAĞLANMA) • FTP • WEB HTML SAYFASI NEDİR? • HTML “HYPER TEXT MARKUP LANGUAGE” KELİMELERİNİN BAŞ HARFLERİDİR. • METİN, RESİM, SES, GÖRÜNTÜ VE DİĞER NESNELERİN BİR SAYFADA KULLANILMASINI SAĞLAYAN KOMUTLAR TOPLULUĞUDUR. HTML KODU (TAG’I)NEDİR? • HTML SAYFALARI OLUŞTURMAK İÇİN KULLANILAN KOMUTLARDIR. • ÖRNEĞİN <B>...</B> KOMUTU ARAYA YAZILAN METİNLERİ KALINLAŞTIRIR. • BİR HTML (WEB) SAYFASI DÜZENLİ BİR ŞEKİLDE BİR ARAYA GELEN HTML KODLARINDAN OLUŞUR. HYPER TERİMİNİN ANLAMI • BİR HTML DÖKÜMANINDA HİPER LİNKLER (BAĞLAR) KULLANILARAK DİĞER DÖKÜMANLARA ATLANABİLİR. BELGE1.HTM BELGE2.HTM MARKUP TERİMİNİN ANLAMI • BİR HTML DÖKÜMANINDAKİ METNİN BİÇİMLENDİRİLMESİDİR. • BU ŞEKİLDE BİR HTML SAYFASINDA METİNLERİN NASIL GÖRÜNTÜLENECEĞİ KONTROL EDİLEBİLİR. HTML’İN TARİHÇESİ • HTML’İN TEMELLERİ İLK DEFA 1986 YILINDA “ULUSLARARASI STANDARTLAR KOMİTESİ” TARAFINDAN BİR MAKALE İLE ORTAYA ATILDI. • MAKALENİN ADI “INFORMATION PROCESSING - TEXT AND OFFICE SYSTEMS – STANDARD GENERALIZED MARKUP LANGUAGE (SGML)” ŞEKLİNDE İDİ VE METNE DAYALI BİR DÖKÜMANI İŞARETLEMEK İÇİN GEREKLİ KODLARA AİT İLK ULUSLAR ARASI STANDARDI TANIMLIYORDU. HTML’İN TARİHÇESİ • 1989 YILINDA, AVRUPA PARÇACIK FİZİĞİ LABORATUVARINDA ÇALIŞAN TIM BERNERS LEE BİR “HİPER METİN DOKÜMAN SİSTEMİ” ÖNERDİ. • BUNA GÖRE; HTML KODLARINDAN OLUŞAN DOSYALAR BİR WEB SERVER’A YERLEŞTİRİLECEK VE İNSANLAR İNTERNET ÜZERİNDEN BROWSER KULLANARAK BU DOSYALARI UZAKTAN OKUYABİLECEKLER. HTML’İN TARİHÇESİ • 1992 YILINDA, AVRUPA PARÇACIK FİZİĞİ LABORATUVARINDAN İLK METİN BAZLI WEB TARAYICI 1.1 VERSİYONUYLA KULLANIMA SUNULDU. • İLK GRAFİK TABANLI TARAYICI OLAN “MOSAIC” İSE 1993 YILINDA MARC ANDREESEN TARAFINDAN KULLANIMA SUNULDU. HTML’İN VERSİYONLARI • 1990 YILINDA ORTAYA ATILAN HTML, ZAMAN GEÇTİKÇE YENİ TEKNOLOJİLERE AYAK UYDURDU VE YENİ VERSİYONLAR İLE KULLANILDI. • HER YENİ VERSİYON ÖNEMLİ ÖZELLİKLER BARINDIRMAKTA VE WEB TASARIMCILARININ İMKANLARINI ARTTIRMAKTADIR. HTML 1.0 • 1990 YILINDA DUYURULDU. • SADECE “NEXT” İŞLETİM SİSTEMİNDE ÇALIŞIYORDU. HTML 2.0 • EYLÜL 1995’TE ORTAYA ÇIKTI. • HTML’İ STANDARD HALE GETİRMEK İÇİN CİDDİ BİR REVİZYONDAN GEÇİRİLEREK OLUŞTURULDU. • GÖRÜNTÜ DÜZENLEME VE FORMLARIN DOLDURULMASI İLE İLGİLİ BAZI YENİLİKLERE SAHİPTİ. HTML 3.0 • İNTERNETİN İYİCE YAYGINLAŞMASI İLE 2.0 VERSİYONU YETERSİZ BULUNMAYA BAŞLANDI. • BUNUN SONUCU OLARAK 3.0 VERSİYONU OLUŞTURULDU. • TABLO KULLANIMI, GÖRÜNTÜLER ÜZERİNDE METİN AKIŞI, METİN BİÇİMLENDİRME VE SAYFA YERLEŞİMİNİN DAHA ESNEK OLMASI İLE İLGİLİ YENİLİKLERE SAHİPTİ. HTML 3.2 • MAYIS 1996’DA DUYURULDU. • ÇERÇEVELER, SCRIPT OLANAĞI, İLERİ MATEMATİKSEL FONKSİYONLAR GİBİ YENİ ÖZELLİKLER İÇERİYORDU. HTML 4.0 • HTML’İN EN SON VERSİYONUDUR. • 18 ARALIK 1998’DE KULLANIMA SUNULDU. • NESNE VE KASKAD STİL OLUŞTURMA ÖZELLİKLERİNE SAHİPTİR. XHTML • “EXtensible HyperText Markup Language” KELİMELERİNİN KISALTILMIŞIDIR. • EN SON ÇIKAN HTML VERSİYONUDUR. • 2000 YILINDA ORTAYA ATILMIŞTIR. • DAHA ÖNCEKİ SÜRÜMLERDEN DAHA KATI BAZI KURALLARA SAHİPTİR. – – – – TAGLAR DÜZGÜN AÇILIP KAPATILMALIDIR TÜM TAGLAR KAPATILMALIDIR TAGLAR KÜÇÜK HARFLE YAZILMALIDIR BİR KÖK ELEMAN (html) OLMALIDIR. XHTML • TAGLAR DÜZGÜN AÇILIP KAPATILMALIDIR: – <b><i>This text is bold and italic</b></i> • TAG’LAR KAPATILMALIDIR: – <p>This is a paragraph <p>This is another paragraph • KOMUTLAR KÜÇÜK HARFLE OLMALIDIR. – <body><p>This is a paragraph</p></body> HTML 5 • HENÜZ BETA (DENEME) AŞAMASINDADIR • BETA AŞAMASINDA OLMASINA RAĞMEN ÇOĞU TARAYICI HTML5 KODLARINI ESTEKLEMEKTEDİR • ÖZELLİKLER GÖRÜNTÜ VE VİDEO İLE İLGİLİ GELİŞTİRMELER YAPILMIŞTIR WEB SERVER NEDİR? • HTML KODLARINI KULLANARAK HTML (WEB) SAYFALARI YAPIYORUZ. • WEB SAYFALARI BİR ARAYA GELEREK “WEB SİTELERİ”Nİ OLUŞTURURLAR. • YAPTIĞIMIZ WEB SİTESİNİN İNTERNET KULLANICILARI TARAFINDAN ERİŞİLEBİLMESİ İÇİN SİTEMİZİ BİR WEB SERVER’A KOYMALIYIZ. WEB SERVER NEDİR? • WEB SERVER’LAR HER GÜN 24 SAAT ÇALIŞIRLAR VE SİTEMİZDEN İSTENİLEN SAYFALARI İNTERNET KULLANICILARINA GÖNDERİRLER. • ŞU AN PİYASADA WINDOWS(IIS) VE LINUX (APACHE) TABANLI WEB SERVER’LAR VARDIR. • HTML SAYFALARINIZI HER İKİSİNDE DE BARINDIRABİLİRSİNİZ. HOSTİNG (ALAN) NEDİR? • YAPTIĞIMIZ WEB SİTEMİZİN YAYINLANMASI VE İNTERNET KULLANICILARININ BİZİM SAYFALARIMIZA ULAŞMASI İÇİN ARTIK BİR WEB SERVER’A İHTİYACIMIZ OLDUĞUNU BİLİYORUZ. • SİTEMİZİ YAYINLAMAK İÇİN YA KENDİ WEB SERVER’IMIZI KURARIZ YA DA BAŞKA BİR SERVERDAN İHTİYACIMIZA GÖRE BİR MİKTAR ALAN SATIN ALIRIZ. HOSTİNG (ALAN) NEDİR? • WEB SERVER BARINDIRMAK ZAHMETLİ VE TEKNİK BİLGİ GEREKTİRDİĞİ İÇİN GENELDE WEB TASARIMCILARI YAPTIKLARI WEB SİTELER İÇİN “HOSTİNG” YANİ ALAN SATIN ALIRLAR. • HOSTİNG FİRMASI İHTİYACINIZA GÖRE SERVER’IN HARDİSKİNDEN BİR MİKTAR (5,10, 15, 50, 100,... MB) ALAN KİRALAR VE KARŞILIĞINDA ÜCRET ALIR.. DOMAIN (ALAN ADI) NEDİR? • WEB SERVER’A KOYDUĞUNUZ SİTENİZE TÜM İNTERNET KULLANICILARININ ERİŞEBİLMESİ İÇİN BİR İSİM VERMENİZ GEREKİR. • WEB SİTELERİNE VERDİĞİMİZ İSİMLERE “DOMAIN” YANİ “ALAN ADI” DENİR. • ÖRNEĞİN “EDERSANE.TV” BİR ALAN ADIDIR. DOMAIN İSİMLERİ • DOMAIN İSİMLERİ “ALAN ADI”, “ALAN UZANTISI” VE “ÜLKE” KODUNDAN OLUŞURLAR. • ÖRNEĞİN “BİLİMSEL.COM.TR” – “BİLİMSEL” KURUMUN ADIDIR. – “COM” UZANTISIDIR. – “TR” ÜLKE KODUDUR. ALAN UZANTISI NEDİR? • KURUMLAR, YAPTIKLARI İŞE GÖRE FARKLI UZANTILARA SAHİP OLURLAR. – .COM: TİCARİ KURUMLAR – .EDU: EĞİTİM KURUMLARI – .GOV: DEVLET KURUMLARI – .NET: AĞ SERVİS SAĞLAYICILARI – .MİL: ASKERİ KURUMLAR – .ORG: DERNEK V.B. KURUMLAR ÜLKE UZANTISI NEDİR? • FARKLI ÜLKELER FARKLI UZANTILARA SAHİPTİR. • ÖRNEGİN: – .TR: TÜRKİYE – .GR: YUNANİSTAN – .CA: KANADA – .FR: FRANSA – .DE: ALMANYA ALAN ADI NEDİR? • DEU.EDU.TR – DEU: KURUM ADI – EDU: EĞİTİM KURUMU – TR: ÜLKE KODU TÜRKİYE • KAVA.NET.FR – KAVA: KURUM ADI – NET: AĞ SERVİS SAĞLAYICI – FR: ÜLKE KODU FRANSA DİKKAT!!! • BİR WEB SİTESİ İÇİN: – HAZIRLANMIŞ WEB SAYFALARI – ALAN (HOSTİNG) – ALAN ADI (DOMAIN) OLMALIDIR. NEREDEN ALINIR? • DOMAIN VE HOSTING SATIN ALMAK İÇİN ÇOK DEĞİŞİK KURULUŞLAR VARDIR. – TURKTİCARET.NET – NIOBEWEB.COM – WEBSAHİBİ.COM – ACİLHOST.COM – SANALWEB.ORG BUNLARDAN BAZILARIDIR. URL NEDİR? • URL, “UNIFORM RESOURCE LOCATORS” KELİMELERİNİN BAŞ HARFLERİDİR. • WEB’DE ADRESLENMİŞ İNTERNET KAYNAKLARINA ERİŞİMİ SAĞLAR. • ÖRNEĞİN YAPTIĞINIZ BİR HTML SAYFASININ HANGİ SERVER’DA VE HANGİ KLASÖRDE OLDUĞUNU BELİRTİR. URL NEDİR? • http://www.bilimsel.com.tr/bilimsel-akademiiletisim-bilgileri/ BİR URL’DİR VE İLGİLİ SERVERDAKİ SAYFANIN ADRESİNİ BELİRTİR. HTTP NEDİR? • HTTP, “HYPER TEXT TRANSFER PROTOKOL” KELİMELERİNİN KISALTILMIŞIDIR. • ÇOK YÖNLÜ METİN DÖKÜMANLARININ (HTML YA DA WEB SAYFALARININ) HIZLI BİR ŞEKİLDE İNTERNET ÜZERİNDEN ERİŞİLMESİNİ SAĞLAR. HTTP NEDİR? • BU PROTOKOL İLE “INTERNET EXPLORER” YA DA “FIREFOX” GİBİ BİR BROWSER KULLANARAK SERVERLARDA BULUNAN WEB SAYFALARINA İSTEKTE BULUNABİLİR VE SAYFALARA GÖZ ATABİLİRİZ. • ÖRNEGİN: – http://www.bilkur.net • ADRESİNİ YAZARAK “BİLKUR.NET” DOMAİN’İNDE BULUNAN “index.asp” DOSYASINA İSTEKTE BULUNULUR VE WEB SERVER BU DOSYAYI BİZİM BROWSER’IMIZA GÖNDERİR. HTTP NEDİR? • SONUÇ OLARAK HTTP, WEB SAYFALARININ TRANSFERİNİ SAĞLAYAN PROTOKOLDÜR. BROWSER (TARAYICI) NEDİR? • WEB SERVERLARDA BULUNAN SİTELERE ULAŞABİLEN, WEB SERVER’DAN GELEN HTML KODLU SAYFALARI BİZE GÖSTEREN YAZILIMLARDIR. – INTERNET EXPLORER – FIREFOX – GOOGLE CHROME GİBİ YAZILIMLAR BUNLARA ÖRNEKTİR. HTML WEB NEDİR? • WORLD WIDE WEB’E KISACA WEB DENİR. • “DÜNYA ÇAPINDA AĞ” OLARAK TÜRKÇEYE ÇEVRİLEBİLİR. • WEB, INTERNET'E BAĞLANAN TÜM BİLGİSAYARLARIN OLUŞTURDUĞU BİR AĞDIR. WWW NASIL ÇALIŞIR? • WEB’DEKİ BİLGİLER “WEB SAYFASI” DENİLEN DOSYALARDA SAKLANIR. • WEB SAYFALARI “WEB SERVER” DENİLEN BİLGİSAYARLARDA BULUNUR. • SAYFALARI OKUMAK İSTEYEN “CLIENT/İSTEMCİ” BİLGİSAYARLAR, “BROWSER/TARAYICI” DENİLEN YAZILIMLARI KULLANARAK BU SAYFALARI GÖRÜNTÜLEYEBİLİRLER. BROWSER/TARAYICI NEDİR? • CLIENT/İSTEMCİ BİLGİSAYARLARIN, WEB SAYFALARINI OKUMASI İÇİN KULLANDIKLARI YAZILIMDIR. • INTERNET EXPLORER VEYA FIREFOX EN ÇOK KULLANILAN TARAYICILARDIR. • TARAYICILAR WEB SUNUCULARINDA BULUNAN SAYFALARI ALIRLAR VE GÖSTERİRLER. • YANİ TARAYICILAR, HTML TAG’LARIYLA BİÇİMLENMİŞ METİNLERİ VE DİĞER NESNELERİ GÖRÜNTÜLER. BROWSER NASIL ÇALIŞIR? • İLGİLİ WEB SAYFASININ ADRESİ YAZILDIKTAN SONRA, TARAYICI İLGİLİ WEB SUNUCUSUNU BULUR VE SAYFAYI İSTER. • SUNUCU İLGİLİ SAYFAYI “TAG” DENİLEN KOMUTLAR TOPLULUĞU OLARAK İSTEMCİ BİLGİSAYARA GÖNDERİR. • İSTEMCİDEKİ TARAYICI BU SAYFAYI ALIR, GELEN TAGLARI (KOMUTLARI) YORUMLAR VE ANLAŞILIR BİR ŞEKİLDE GÖSTERİR. SUNUCU/İSTEMCİ SUNUCU/SERVER (IIS/APACHE) 1.ÖNCE İSTEMCİ SAYFAYI İSTER (REQUEST/İSTEK) http://www.desem.net İSTEMCİ/CLIENT (IE) İndex.htm 2.SONRA SUNUCU SAYFAYI GÖNDERİR (RESPONSE/TEPKİ) TAG/ETİKET NEDİR? • WEB SAYFASI OLUŞTURMAK İÇİN KULLANILAN KOMUTLARA TAG DENİR. • <TAG>.....</TAG> ŞEKLİNDE KULLANILIRLAR. • İKİ TAG ARASINDA KALAN METİN VEYA DİĞER NESNELER BU TAGLARDAN ETKİLENİR. WEB STANDARTLARINI KİM DÜZENLER? • WEB STANDARTLARINI MICROSOFT VEYA NETSCAPE GİBİ FİRMALAR BELİRLEMEZ. • WEB STANDARTLARI “W3C” DENİLEN BİR KURUM TARAFINDAN SAPTANIR. • W3C “WORLD WIDE WEB CONSORTIUM”UN KISALTILMIŞIDIR. • KURUMUN WEB ADRESİ: WWW.W3C.ORG WEB STANDARTLARINI KİM DÜZENLER? • HTML, CSS VE XML GİBİ STANDARTLAR BU KURUM TARAFINDAN BELİRLENMİŞTİR. • EN SON HTML STANDARDI XHTML 1.0’DIR. HTML NEDİR? • HTML, “HYPER TEXT MARKUP LANGUAGE” KELİMELERİNİN KISALTILMIŞIDIR. • BİR HTML DOSYASI, TAG’LARDAN OLUŞAN BİR METİN DOSYASIDIR. • TAG’LAR, TARAYICIYA WEB SAYFASININ NASIL GÖRÜNMESİ GEREKTİĞİNİ ANLATIRLAR. 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Ü İLE VEYA “DREAMWEAVER” GİBİ GELİŞMİŞ EDİTÖRLERLE OLUŞTURULABİLİRLER. HTML EDİTÖRLERİ • WEB SAYFASI OLUŞTURMAK İÇİN NOT DEFTERİ GİBİ BASİT BİR METİN DÜZENLEME YAZILIMI YETERLİDİR. • FAKAT ÇOK GELİŞMİŞ EDİTÖRLER DE MEVCUTTUR. BUNLAR DREAMWEAVER, EXPRESSION WEB GİBİ YAZILIMLARDIR. • BU TÜR YAZILIMLARLA HTML KODLARINI KULLANMADAN, GRAFİKSEL OLARAK, OLDUKÇA KOLAY VE PROFESYONEL WEB SAYFALARI HAZIRLANABİLİR. HTML EDİTÖRLERİ • HTML KODLARI BU YAZILIMLAR TARAFINDAN OTOMATİK OLARAK ÜRETİLİRLER. • AMATÖR BİR WEB TASARIMCISI HTML BİLMESE DE OLUR: DREAMWEAVER/FRONTPAGE İLE HER İŞİNİ GÖRÜR. • BİZİM AMACIMIZ İNTERNET PROGRAMCILIĞI, YANİ HTML KODLARININ ARASINA PROGRAM YAZMAK OLDUĞU İÇİN EN AZINDAN TEMEL DÜZEYDE HTML BİLMEK ZORUNDAYIZ. 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. • XHTML STANDARDI KÜÇÜK HARF KULLANILMASINI ÖNERİR. Ö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. ÖRNEK HTML SAYFASI <html> <head> <title>SAYFA BAŞLIĞI</title> </head> <body> BU BENİM İLK SAYFAM. </body> </html> TAG ÖZELLİKLERİ • TAG’LARIN ÖZELLİKLERİ DE OLABİLİR. • ÖRNEĞİN SAYFANIN ARDALAN RENGİNİ BELİRLEMEK İÇİN <BODY> TAG’ININ “BGCOLOR” ÖZELLİĞİ KULLANILIR. – – – – <body bgcolor=“red”> ....... ....... </body> TAG ÖZELLİKLERİ • TAG ÖZELLİKLERİ DAİMA “İSİM=DEĞER” ŞEKLİNDE BULUNURLAR. • YANİ – Name=“value” =>bgcolor=“red” • ŞEKLİNDE OLURLAR. TEMEL HTML TAGLARI • BUNLAR – <html> – <body> – <head> – <h1>,...,<h6> – <br> – <hr> – <!-- • GİBİ TAGLARDIR. <HTML>...</HTML> • HER WEB SAYFASI BU TAG’LA BAŞLAYIP BU TAGLA BİTER. – <HTML> ...... ...... ....... </HTML> <HEAD>...</HEAD> • SAYFA İLE İLGİLİ BİLGİLER VERMEK İÇİN KULLANILIR. • BU BÖLÜMDEKİ BİLGİLER TARAYICIDA GÖSTERİLMEZ, YANİ ZİYARETÇİ BURADAKİ BİLGİLERİ GÖREMEZ. • SAYFA ÖZELLİKLERİ BU BÖLÜME YAZILIR. SAYFA BAŞLIĞI “<TITLE>” BU BÖLÜMDEDİR. <TITLE>...</TITLE> • TARAYICIDAKİ PENCERE BAŞLIĞINDA BULUNAN YAZIYI BELİRLER. <HEAD> <TITLE>BİLKUR BİLGİSAYAR KURSLARI</TITLE> </HEAD> ÖRNEK...<TITLE>...<TITLE> <HTML> <HEAD> <TITLE> BİLKUR BİLGİSAYAR KURSLARI... </TITLE> </HEAD> </HTML> <BODY>...</BODY> • SAYFAMIZIN GÖVDE KISMIDIR. • TARAYICIDA 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> 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 BİR RENK VEYA BİR RESİM KULLANABİLİRSİNİZ. 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. ÖRNEK 1 (ZEMİN RENGİ) <HTML> <HEAD> <TITLE> Bilkur Bilgisayar Kursları... </TITLE> </HEAD> <BODY bgcolor="Yellow"> </BODY> </HTML> ÖRNEK 2 (ZEMİN RENGİ) <HTML> <HEAD> <title>BİLKUR Bilgisayar Kursları...</title> </HEAD> <BODY bgcolor="FFFF00"> </BODY> </HTML> 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"> ÖRNEK 3 (ZEMİN RESMİ) <HTML> <HEAD> <title>BİLKUR Bilgisayar Kursları...</title> </HEAD> <BODY background= "C:\WINDOWS\Desktop\dosyalar\Bulutlar.gif" > </BODY> </HTML> TEXT DEYİMİ • BODY İÇİNDE “TEXT” DEYİMİ KULLANILARAK SAYFADA BULUNAN YAZILARIN RENKLERİ AYARLANABİLİR. • KULLANIMI – <BODY TEXT=“RENK_ADI”> ŞEKLİNDEDİR. BASEFONT VE FONT SEÇİMİ • BİR WEB SAYFASINDA BİR YAZININ FONTU BELİRTİLMEMİŞSE ÖNCEDEN TANIMLI OLAN BİR FONT KULLANILIR. • BASEFONT DEYİMİ İLE BİZ BU FONTU DEĞİŞTİREBİLİRİZ. – <BASEFONT FACE=“Arial”> ÖRNEK 4 (METİN RENGİ) <HTML> <HEAD> <title>BİLKUR Bilgisayar Kursları...</title> </HEAD> <BODY bgcolor=“yellow” text="BLUE"> Bu yazı mavi renkli olarak görünecek. </BODY> </HTML> AÇIKLAYICI EKLEME • SAYFANIZDA İSTEDİĞİNİZ YERDE AÇIKLAMA BİLGİLERİ EKLEYEBİLİRSİNİZ. • EKLEDİĞİNİZ AÇIKLAMALAR TARAYICIDA (INTERNET EXPLORER) GÖRÜNMEZ. • AÇIKLAMA YAZISI “<!--” İLE BAŞLAR VE “-->” İLE BİTER. ÖRNEK 5 (AÇIKLAMA) <HTML> <HEAD> <title>BİLKUR Bilgisayar Kursları...</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> SAYFALARA METİN GİRMEK • İKİ “BODY” DEYİMİ ARASINA YAZILARIMIZI YAZABİLİR VEYA DİĞER NESNELERİ (TABLO, RESİM) KOYABİLİRİZ. • 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> <title>Bilimsel Akademi</title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <BODY text="BLUE"> Bilimsel Akademi </BODY> </HTML> <BR> DEYİMİ • BİR ÖNCEKİ ÖRNEĞİMİZDE “DESEM” YAZISINDAN SONRA, ALT SATIRA GEÇMEK TARAYICIDA HİÇBİR DEĞİŞİKLİĞE YOL AÇMADI.. • ALT SATIRA GEÇMEK İÇİN <BR> DEYİMİ KULLANILIR. Ö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"> Bilimsel Akademi <BR> T.C. M.E.B. Özel Bilkur Eğitim Merkezi </BODY> </HTML> YAZILARIN ORTALANMASI • SAYFA İÇİNDE ORTALANMASINI İSTEDİĞİMİZ NESNELER İÇİN <CENTER>...</CENTER> DEYİMİNİ KULLANABİLİRİZ. • ORTALAMAK İSTEDİĞİMİZ METNİN BAŞINA <CENTER> BAŞLATMA DEYİMİNİ, SONUNA İSE </CENTER> DEYİMİNİ YERLEŞTİRECEĞİZ. BU İKİ DEYİM ARASINDA KALAN YAZI ORTALANIR. ÖRNEK 7 (<CENTER>) <HTML> <HEAD> <title> Bilimsel Akademi </title></HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <BODY text="BLUE"> <CENTER> Bilimsel Akademi <BR> T.C. M.E.B. Özel Bilkur Eğitim Merkezi</CENTER> </BODY> </HTML> YAZI BOYUTU/BAŞLIKLAR (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> 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 ÖRNEK 10 (K, İ, ALT) <HTML> <HEAD> <title> Bilimsel Akademi </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 </B><BR> ÖRNEK 10 (DEVAM) <I> Mühendislik Fakültesi </I><BR> <U> Bilgisayar Mühendisliği Bölümü... </U> </CENTER> </BODY> </HTML> <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. ÖRNEK 11 (STRONG, EM) <HTML> <HEAD> <title> Bilimsel Akademi </title> </HEAD> <!-- Aşağıda verilen satırda Web sayfasındaki metinlerin rengi değiştiriliyor. --> <body text="BLUE"> <CENTER> <STRONG> Dokuz Eylül Üniversitesi </STRONG> <BR> ÖRNEK 11 (DEVAM) <EM> Mühendislik Fakültesi </EM> <STRONG><EM> Bilgisayar Mühendisliği </EM></STRONG> </CENTER> </BODY> </HTML> 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. ÖRNEK 8 (YAZI BÜYÜKLÜĞÜ) <HTML> <HEAD> <title>BİLKUR 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 >Bilimsel</FONT> <BR> T.C. M.E.B. Özel Bilkur Bilgisayar Kursu </CENTER> </BODY> </HTML> 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. • BAZI METİNLERİN FARKLI RENKTE OLMASINI İSTİYORSAM “<FONT>” DEYİMİNİN “COLOR” PARAMETRESİNİ KULLANIRIM. – <FONT color= “ YAZI RENGİ”>YAZI</FONT> KULLANILIR ÖRNEK 12 (YAZI RENGİ) <HTML> <HEAD><title> Bilimsel Akademi </title> </HEAD> <body text="BLUE"> <CENTER> <FONT color=red > BİLKUR</FONT> <BR> <FONT color=yellow> Dokuz Eylül Üniversitesi </FONT> <BR> <font color=green>Mühendislik Fakültesi </font> </CENTER> </BODY> </HTML> FONT DEĞİŞİKLİĞİ • YAZILARIMIZI WORD PROGRAMINDA OLDUĞU GİBİ BİR FONT BELİRTEREK DE BİÇİMLENDİREBİLİRİZ. • ÖRNEĞİN “Arial”, “Times New Roman”, ”Technical” v.b. FARKLI FONT ÇEŞİTLERİDİR. • WİNDOWS İŞLETİM SİSTEMİ BU FONTLARDAN BİR ÇOĞUNU DESTEKLER. FONT DEĞİŞTİRME • WINDOWS İŞ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”>BİLKUR</FONT> ÖRNEK 13 (FACE PARAMETRESİ) <HTML> <HEAD><title>Bilgisayar Kursları...</title></HEAD> <body text="BLUE"> <CENTER> <FONT face=Arial >BİLİMSEL</FONT><BR> <FONT face="Courier New"> Dokuz Eylül Üniversitesi.</FONT><BR> <FONT face=Verdana>Mühendislik Fakültesi </FONT> </CENTER> </BODY> </HTML> ÖRNEK 14 (FACE PARAMETRESİ) <HTML> <HEAD> <title>Bilgisayar Kursları...</title> </HEAD> <BODY > <CENTER> <FONT color="red" face=Arial>DESEM</FONT> <BR> <font color="green">Dokuz Eylül Üniversitesi</font> <BR> <FONT face=Verdana>Mühendislik Fakültesi </FONT> </CENTER> </BODY> </HTML> HTML RESİMLERİ • ÖZELLİKLE BANT GENİŞLİĞİNİN ARTMASIYLA WEB SAYFALARINDA ÇOK FAZLA RESİM KULLANILMAYA BAŞLANDI. • BUNUN SONUCU OLARAK <IMG> TAGININ İYİ BİLİNMESİ GEREKMEKTEDİR. 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. RESİM TİPLERİ • İNTERNET ÜZERİNDEN YAYINLAYACAĞIMIZ RESİMLERİN FORMATI: – JPEG, JPG – BMP – GIF – XBM – PNG <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”> ÖRNEK12 (Resim Ekleme) <HTML> <HEAD><title>Bilgisayar Kursları...</title></HEAD> <body text="BLUE"> <CENTER> <FONT face=Arial >DESEM</FONT><BR> <FONT face="Courier New"> Dokuz Eylül Üniversitesi</FONT><BR> <FONT face=Verdana>Mühendislik Fakültesi </FONT> <IMG SRC = “C:\WINDOWS\Backgrnd.gif” height=200 width=100> </CENTER> </BODY> </HTML> Örnek 13(Resim ekleme) <HTML> <HEAD><title>Bilgisayar Kursları...</title></HEAD> <BODY text="BLUE"> <CENTER> <FONT face=Arial >DESEM</FONT><BR> <FONT face="Courier New"> Dokuz Eylül Üniversitesi</FONT><BR> <FONT face=Verdana>Mühendislik Fakültesi </FONT> <IMG SRC = ../dosyalar/bulutlar.gif ”> </CENTER> </BODY> </HTML> 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"> <P>...</P> • PARAGRAFLARI BELİRTMEK İÇİN KULLANILIR. – <P>BURASI BİR PARAGRAFTIR.</P> ÖRNEK 16 (<P>) <HTML> <HEAD><title>Bilgisayar Kursları...</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> 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 20 <A> <HTML> <HEAD> <title> Bilimsel Akademi </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">Ana Sayfa</A> </BODY> </HTML> Örnek 22 <img> <HTML> <HEAD> <title> Bilimsel Akademi </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> </BODY> </HTML> Örnek 23 <mailto> <HTML> <HEAD> <title> Bilimsel Akademi </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> <br> <a href="http://www.deu.edu.tr"><img src=“image.gif"></a> <a href="mailto:fahrettine@gmail.com">bana mail yolla<a> </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> • <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> • <LI>ÇAY</LI> • <LI>KAHVE</LI> • <LI>ŞEKER</LI> – </OL> • SONUÇ 1. ÇAY 2. KAHVE 3. ŞEKER 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> Bilimsel Akademi</title></HEAD> <BODY> <TABLE border="1"> <tr><td>Hücre 1</td> <td>Hücre 2</td></tr> </TABLE> </BODY> </HTML> BORDER ÖZELLİĞİ • <TABLE BORDER=“1”> • ŞEKLİNE TABLONUN SINIRLARININ KALINLIĞI BELİRTİLİR. TABLE BORDER <table border="1"> <tr> <td>İSİM</td> </tr> <tr> <td>Dokuz Eylül</td> </tr> </table> BOŞ HÜCRELİ TABLOLAR • BOŞ HÜCRELER ÇOĞU TARAYICIDA 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> BİR TABLO ÖRNEĞİ <TABLE BORDER="1" > <TR ALIGN="CENTER" VALIGN="TOP"> <TD WIDTH="94"><B>ÜLKE ADI</B></TD> <TD WIDTH="72"><B>NÜFUSU</B></TD> <TD WIDTH="153"><B>BULUNDUĞU KITA</B></TD> </TR> <TR> <TD>AVUSTURYA</TD> <TD>8,000,000</TD> <TD>AVRUPA</TD> </TR> BİR TABLO ÖRNEĞİ(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> HTML FORMLARI VE BİLGİ GİRİŞİ • FORM, FORM ELEMANLARI BARINDIRAN BİR ALANDIR. • FORM ELEMANLARI KULLANICILARDAN BİLGİ GİRİŞİNE İZİN VERMEK İÇİN KULLANILAN METİN KUTULARI, SARKAN LİSTELER, RADYO (SEÇENEK) BUTONLARI, ONAY (CHECK) KUTULARI V.B. NESNELERDİR. FORM ELEMANLARI • ŞİMDİ DE FORMDA KULLANILAN BAZI ELEMANLARI LİSTELEYELİM – FORM ALANI – SUBMIT VE RESET BUTONLARI (BUTTON) – METİN KUTUSU(TEXT) – SEÇME LİSTELERİ (SELECT LISTS) – ONAY KUTUSU (CHECKBOX) – SEÇENEK DÜĞMESİ (RADIO) – METİN ALANI (TEXT AREA) <FORM>...</FORM> • FORM OLUŞTURMAK İÇİN <FORM> TAGI KULLANILIR. • <form> – <input> – <input> • </form> <INPUT> (VERİ GİRİŞİ) • FORMLARDA EN ÇOK KULLANILAN TAGLARDAN BİRİDİR. • BİLGİ GİRİŞİNİN (INPUT) NE ŞEKİLDE OLACAĞI “TYPE” ÖZELLİĞİ İLE BELİRLENİR. Adı: <input type="text" name=“ad” size=25 maxlength=25> SEÇENEK DÜĞMESİ (RADIO) • BİRKAÇ SEÇENEKTEN SADECE BİRİNİ SEÇMEK İÇİN KULLANILIRLAR. • <input type="radio" name=“cins" value=“bay“> Bay • <input type="radio" name=“cins” value=“bayan"> Bayan ONAY KUTULARI (CHECKBOXES) • BİR VEYA BİRDEN FAZLA SEÇENEK SEÇİLEBİLİR. • <input type="checkbox" name=“motor"> Motor kullanıyorum • <br> • <input type="checkbox" name=“araba"> Araba kullanıyorum ŞİFRE ALANLARI • FORMUMUZ İÇİNDE ŞİFRE GİRİLMESİ GEREKEN YERLERDE KULLANILIR – <input type=“PASSWORD” name=“sifre” size=“12” max=“8”> TEXT AREA ELEMANI • UZUN MİKTARDA BİR YAZI GİRİLECEKSE BU DURUMLARDA “TEXT AREA” KULLANILIR. • <TEXTAREA NAME=“yorum” ROWS=7 COLS=30>buraya düşüncelerinizi yazınız... • </TEXTAREA> SEÇME LİSTELERİ • SEÇME LİSTELERİ; KULLANICILARI BELİRLENMİŞ OLAN BİR LİSTEDEN BİR YADA DAHA FAZLA ELEMAN SEÇMELERİNİ SAĞLAYAN OLDUKÇA ESNEK BİR YAPIDIR. • ÖRNEĞİN BİR ÜLKE LİSTESİNDEN ÜLKE SEÇMEK GİBİ... ÖRNEK <SELECT NAME=“sec”> <OPTION VALUE=“tur” SELECTED>türkiye <OPTION VALUE=“ing”> ingiltere </SELECT> • BİR ELEMANIN SEÇİLİ OLMASINI İSTİYORSAK “SELECTED” DEMEMİZ LAZIMDIR. SEÇME LİSTELERİ • İSTENİRSE TÜM LİSTEDEN BİRDEN FAZLA ELEMAN SEÇİMİ AYARLANABİLİR. BUNUN İÇİN MULTIPLE YAZISININ EKLENMESİ YETERLİDİR. • AYRICA “SIZE” PARAMETRESİ İLE DE GÖRÜLECEK ELEMAN SAYISI DA BELİRTİLİR “ACTION” ÖZELLİĞİ VE “SUBMIT” BUTONU • SUBMIT BUTONUNA TIKLADIĞINIZDA, FORM İÇERİĞİ BAŞKA BİR DOSYAYA GÖNDERİLİR. • “ACTION” ÖZELLİĞİ, FORMDAKİ BİLGİLERİN GÖNDERİLDİĞİ DOSYAYI BELİRLER. • BU MUHTEMELEN BİR “ASP” VEYA “PHP” DOSYASIDIR, GÖNDERİLEN BİLGİLER ALINIR VE İŞLENİR. “ACTION” ÖZELLİĞİ VE “SUBMIT” BUTONU <form name=“kayit" action=“kayit.asp" method="get"> Username: <input type="text" name=“ad"> <input type="submit" value=“Tamam"> </form> HTML HEAD ELEMANI • HEAD TAGI, SAYFA İLE İLGİLİ GENEL BİLGİLER İÇERİR. • AYRICA “META-INFORMATION” ŞEKLİNDE DE ADLANDIRILIRLAR. • “META”, BİR ŞEY HAKKINDA BİLGİ DEMEKTİR. HTML HEAD ELEMANI • META-DATA DENİLDİĞİ ZAMAN “DATA” (VERİ) İLE İLGİLİ BİLGİ, META-INFORMATION DENİLDİĞİ ZAMAN DA SAYFA İÇERİĞİ İLE İLGİLİ BİLGİ ANLAŞILIR. HTML HEAD ELEMANI • BU BÖLÜMDEKİ BİLGİLER BROWSER’DAN GÖSTERİLMEZ. • BU BÖLÜMDE SADECE BİRKAÇ TAG KULLANILABİLİR. • BUNLAR; – BASE, LINK, META, TITLE, STYLE VE SCRIPT TAGLARIDIR. HEAD TAGLARI • • • • • • BASE LINK META TITLE STYLE SCRIPT <META>...</META> • SAYFA İLE BİLGİLER VERİR. • ÖRNEĞİN SAYFANIN TASARIMCISI, HANGİ PROGRAMLA OLUŞTURULDUĞU, ANAHTAR KELİMELER V.B. ARAMA MOTORLARI İÇİN ANAHTAR KELİMELER • BAZI ARAMA MAKİNELERİ META TAGININ “NAME” VE “CONTENT” ÖZELLİKLERİNİ KULLANARAK ARAMA YAPARLAR. • BU NEDENLE META TAGININ BAZI ÖZELLİKLERİ ÖNEMLİDİR. META İLE SAYFANIN TANIMLANMASI • <META NAME=“DESCRIPTION” CONTENT=“BEDAVA HTML, VB, PHOTOSHOP VE CORELDRAW KURSLARI”> META İLE ANAHTAR KELİMELERİN TANIMLANMASI • <META NAME=“KEYWORDS” CONTENT=“HTML, VB, PHOTOSHOP, CORELDRAW, KURS”> HTML SCRIPT’LERİ • HTML SAYFALARINIZI DİNAMİK VE ÇEKİCİ HALE GETİRMEK İÇİN “SCRIPT” DENİLEN BASİTLEŞTİRİLMİŞ PROGRAM KODLARINI EKLEYEBİLİRSİNİZ. • SCRIPT’LER BASİTLEŞTİRİLMİŞ PROGRAM KOMUTLARIDIR. • HTML İÇİNDE DAHA ÇOK “JAVASCRIPT” VE “VBSCRIPT” KULLANILIR. <SCRIPT>...</SCRIPT> • HTML KODLARI İÇİNE SCRIPT YAZABİLMEK İÇİN <SCRIPT> TAG’I KULLANILIR. • AMA SCRIPT KULLANIMINDAN ÖNCE HANGİ SCRIPT DİLİNİN KULLANILACAĞI BELİRTİLMELİDİR. ÖRNEK <html> <head> <title> script örneği </title> </head> <body> <script type="text/vbscript"> document.write("Hello World!") </script> </body> </html> ESKİ TARAYICILAR SCRIPT’LERİ DESTEKLEMEZ • ESKİ TARAYICILAR SCRIPTLERİ DESTEKLEMEZ VE BUNLARI ÇALIŞTIRAMADIKLARI İÇİN HATA VERİRLER. • BU TARAYICILAR KODLARI ÇALIŞTIRMAK YERİNE ONLARI SANKİ BİR METİNMİŞ GİBİ ZİYARETÇİYE GÖSTERİRLER. • BU DURUMU ENGELLEMEK İÇİN SCRİPTLER AÇIKLAMA “COMMENT” TAGININ İÇİNE YAZILIR. ESKİ TARAYICILAR SCRIPTLERİ DESTEKLEMEZ • SCRIPTLERİ AÇIKLAMA < !-- ....--> TAGI İÇİNE ALIRSANIZ, ESKİ TARAYICILAR YAZILAN KODLARI GÖZ ARDI EDECEKTİR. • EĞER TARAYICI ESKİ DEĞİLSE AÇIKLAMA TAG’I İÇİNDEKİ SCRİPTLERİ ÇALIŞTIRACAKTIR. ÖRNEK • JavaScript: <script type="text/JavaScript"> <!-document.write("Hello World!") //--> </script> ÖRNEK • VBScript: <script type="text/vbscript"> <!-document.write("Hello World!") --> </script> <NOSCRIPT>...</NOSCRIPT> • ESKİ BROWSER’LARDA SCRIPT ÇALIŞMADIĞI ZAMAN BİR MESAJ GÖRÜNMESİNİ SAĞLAR. – <script type="text/vbscript"> <!-document.write("Hello World!") '--> </script> <noscript>Tarayıcınız VBScript desteklemiyor!</noscript> SEO NEDİR? • «SEARCH ENGINE OPTIMISATION» KELİMELERİNİN KISALTILMIŞIDIR • WEB SAYFALARIMIZIN ARAMA SONUCUNDA EN YUKARILARDA GÖRÜLMESİNİ SAĞLAR • SEO AÇISINDAN UYGUN SİTE YAPMAK ÇOK ÖNEMLİ; ARAMA SONUÇLARINDA GÖRÜNMEZSENİZ ZİYARETÇİ SAYISI AZALIR TEMEL SEO TEKNİKLERİ • İŞİNİZLE İLGİLİ ANAHTAR KELİMELER BELİRLENMELİ VE BU ANAHTAR KELİMELER SAYFA İÇİNDE %5 ORANINDA KULLANILMALIDIR • DOMAIN ADI ANAHTAR KELİMENİZİ BARINDIRMALIDIR • ANAHTAR KELİMELER SAYFA BAŞLIĞINDA (TITLE) BULUNMALIDIR TEMEL SEO TEKNİKLERİ • ANAHTAR KELİMELER <HX> TAGLARIYLA KULLANILMALI • ANAHTAR KELİMELER <B> VEYA <I> TAGLARIYLA KULLANILMALI • RESİM AÇIKLAMALARINDA ANAHTAR KELİMELER BULUNMALI TEMEL SEO TEKNİKLERİ • BAŞKA SİTELERDEN KENDİ SİTEMİZE LİNKLER OLUŞTURULMALI • SİTE İÇİNDE LİNKLER OLUŞTURULMALI • ANLAMLI VE RAHAT OKUNAN LİNKLER VE SAYFALAR OLUŞTURULMALI • ÖZETLE; ANAHTAR KELİMELER ARAMA MOTORLARINDAN SİZİN SİTENİZE ZİYARETÇİ YÖNLENDİREN KELİMELERDİR VE SİTENİN HER YERİNDE KULLANILMALIDIR