HTML Ders Slaytları - Bilgisayar Kursu, NETSİS Muhasebe, Web

Transkript

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.
• 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.
• 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”
• Ç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”
• 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>
– ” İLE BİTER.
ÖRNEK 5 (AÇIKLAMA)
<HTML>
<HEAD>
</HEAD>

<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>
<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>
<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>
<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>
</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>
<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>
</HEAD>
<body text="BLUE">
<CENTER>
<STRONG>
</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>
</HEAD>
<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>
</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>
</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>
<body text="BLUE">
<CENTER>
<FONT face=Arial >DESEM</FONT><BR>
Dokuz Eylül Üniversitesi</FONT><BR>
<IMG SRC = “C:\WINDOWS\Backgrnd.gif” height=200 width=100>
</CENTER>
</BODY>
</HTML>
Örnek 13(Resim ekleme)
<HTML>
<BODY text="BLUE">
<CENTER>
<FONT face=Arial >DESEM</FONT><BR>
Dokuz Eylül Üniversitesi</FONT><BR>
<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>
<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>
</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>
</HEAD>
<BODY>
<p>Dokuz Eylul Üniversitesi web sayfası için
<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>
</HEAD>
<BODY>
Dokuz Eylul Üniversitesi web sayfası için
<br>
<A HREF="index.htm">Benim Sayfam</A> <br>
<a href="http://www.deu.edu.tr"><img src=“image.gif"></a>
<a href="mailto:[email protected]">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">
-->
</script>
<NOSCRIPT>...</NOSCRIPT>
• ESKİ BROWSER’LARDA SCRIPT ÇALIŞMADIĞI
ZAMAN BİR MESAJ GÖRÜNMESİNİ SAĞLAR.
– <script type="text/vbscript">
'-->
</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
• ANAHTAR KELİMELER <HX> TAGLARIYLA
KULLANILMALI
• ANAHTAR KELİMELER <B> VEYA <I>
TAGLARIYLA KULLANILMALI
• RESİM AÇIKLAMALARINDA ANAHTAR
KELİMELER BULUNMALI
• 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

HTML Ders Slaytları - Bilgisayar Kursu, NETSİS Muhasebe, Web

Transkript

Benzer belgeler

Vücut Kamerası

HTML

Forum: YENI FORUM

4 İnternet Programcılığı Dökümanı

Zawgyi font for gtalk window 7 64 bit

TÜRKÇE Biçim Tüm dosyalar word biçiminde gönderilmelidir

SAYI 12 Nisan - Haziran 2013