TAG NEDĠR? WEB SAYFASI OLUġTURMAK ĠÇĠN KULLANILAN KOMUTLARA TAG DENĠR. <TAG>...</TAG> ġeklġnde KULLANILIRLAR.

Transkript

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). <html> <head> <title>ilk sayfam</title> </head> <body> Sayfama Hoşgeldiniz </body> </html>

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

13 <HTML>...</HTML> HER WEB SAYFASI BU TAG LA BAġLAYIP BU TAGLA BĠTER. <HTML> </HTML>

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

15 <TITLE>...</TITLE> PENCERE BAġLIĞINI BELĠRLER. <HEAD> <TITLE>WEB SAYFASI TASARIMI DERSĠ UYGULAMASI...</TITLE> </HEAD>

16 ÖRNEK...<TITLE>...<TITLE> <HTML> <HEAD> <TITLE> WEB SAYFASI TASARIMI DERSĠ UYGULAMASI... </TITLE> </HEAD> </HTML>

17 <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>

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

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

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

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

22 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.gi f"> <body background=" YAPABĠLĠRSĠNĠZ.

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

24 TEXT DEYĠMĠ BODY ĠÇĠNDE TEXT DEYĠMĠ KULLANILARAK SAYFADA BULUNAN YAZILARIN RENKLERĠ AYARLANABĠLĠR. KULLANIMI <BODY TEXT= RENK_ADI > ġeklġndedġr.

25 Ö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>

26 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 BĠTER...

27 ÖRNEK 5 (AÇIKLAMA) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD>  <body text="blue"> Bu yazı mavi renkli bir yazıdır.. </BODY> </HTML>

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

29 ÖRNEK 6 (YAZI GĠRME) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD>  <body text="blue"> ENF-110 Muğla Üniversitesi Enformatik Bölümü... </BODY> </HTML>

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

31 ÖRNEK 7 (BR DEYĠMĠ) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD>  <body text="blue"> ENF-110<BR> Muğla Üniversitesi Enformatik Bölümü... </BODY> </HTML>

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

33 ÖRNEK 7 (<CENTER>) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD>  <body text="blue"> <CENTER> ENF-110<BR> Muğla Üniversitesi Enformatik Bölümü... </CENTER> </BODY> </HTML>

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

35 ÖRNEK 8 (YAZI BÜYÜKLÜĞÜ) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD>  <body text="blue"> <CENTER> <FONT SIZE=+6 >ENF-110</FONT><BR> Muğla Üniversitesi Enformatik Bölümü... </CENTER> </BODY> </HTML>

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

37 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

38 ÖRNEK 10 (K, Ġ,ALT) <HTML> <HEAD> <title> WEB Sayfası Tasarımı Dersi...</title> </HEAD>  <body text="blue"> <CENTER> <FONT SIZE=+6 >ENF-110</FONT><BR> <B> Muğla Üniversitesi Enformatik Bölümü... </B><BR>

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

40 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

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

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

43 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>

44 Ö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>

45 Ö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>