1 / 60

HTML ’E GİRİŞ

HTML ’E GİRİŞ. HTML ( H yper T ext M arkup L anguage ) Nedir ?. HTML ( Hareketli-Metin İşaretleme Dili ) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir.

laurie
Download Presentation

HTML ’E GİRİŞ

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’E GİRİŞ

  2. HTML (HyperText MarkupLanguage)Nedir? • HTML(Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir. • HTML, programlama dilleri (pascal, basic,..) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. • Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisi diyebiliriz.

  3. Bir Web Sayfasının Genel Yapısı <HTML> <HEAD> Başlık Metni </HEAD> <BODY> Body Metni </BODY> </HTML> • Not: Web Sayfaları <HTML> etiketinden önce DTD (DocumentTypeDefinition) başvurusu da içerebilir. Bu başvuru HTML nin versiyonunu bildirir. Ama çoğu Web Browser bunu otomatik olarak sayfaya ekler. Yani yazmasak ta olur. • Case-Insensitive: HTML büyük küçük harfe duyarsızdır. <BODY> ile <bOdy> etiketleri arasında bir fark yoktur.

  4. Yapısal Etiketler (Structural Tags) • Yapısal etiketler (< >) web sayfasında farklı bölümler tanımlamak için kullanılır. Bunlar;

  5. İlksayfam • Notepad'i açın ve şunları yazın: • Dosyayı “sayfa1.htm” olarak kaydedin.

  6. İlk sayfam • Sayfa1.htm dosyasını açtığınızda varsayılanbrowserınız (Internet Explorer, Netscape Navigator gibi) tarafından görüntülenecektir.

  7. İlk sayfam • Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim: • Birşey dikkatinizi çekti mi? İngilizce bir takım kelimeler var ve bu kelimeleri küçük< ve büyük> sembolleri arasına yazdık. Bu ifadelere tag(etiket) deniyor. Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor. • Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü işaretiyle tekrar yazıyoruz. Bu son yaptığımız etiketi sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda.

  8. İlk sayfam • Hazırladığımız sayfada dikkat ederseniz sadece temel etiketleri kullandık. Yani metin biçimlendirmeye yarayan hiçbir etiket kullanmadık. Bu yüzden <body>....</body> arasına yazdığımız Sayfama Hoşgeldiniz yazısı browser'ın varsayılan metin ayarlarıyla gösteriliyor. • İşin ilginç tarafı hiçbir kod yazmadan sadece Sayfama Hoşgeldiniz yazıp kaydetsek ve browser'da böyle görüntülesek de aynı neticeyi elde edecektik.

  9. Etiket Özellikleri (TagAttributes) • Bazı etiketler özelliklere sahiptirler. Bu özelliklere etiketin davranışını düzenlemek için değerler atarız. Kullanımı; • <ETİKET özellik1=”value” özellik2=”value”> • Örnek: Örnek olarak <P> etiketini söyleyebiliriz. <P> etiketi yeni bir paragraf başlatır ve varsayılan olarak metni sola yazlar. • <P>Bu Metin Sola Yaslıdır.</P> • <P align=”left”>Bu Metin Sola Yaslıdır.</P> • <P align=”right”>Bu Metin Sağa Yaslıdır.</P> • <P align=”center”>Bu Metin Ortalanmıştır.</P>

  10. Etiket Özellikleri (Tag Attributes) • <HTML> Etiketi • Bütün HTML dosyaları <HTML> kodu ile başlar </HTML> kodu ile biter. Yani Web sayfası ile ilgili tüm deyimler bu iki kodun arasında kalmalıdır. • <HEAD> Etiketi • Bu etiket içerisinde yazılan sayfada gözükmezler. Web sayfası ile ilgili temel özellikler, Sayfa Başlığı, Yazı karakterler kümesi, link özellikleri gibi, burada tanımlanır. Kısaca head kısmında sayfanın nasıl görüntüleneceği gibi bölümler yer alır. Bu etiket genellikle sadece <TITLE> ve </TITLE> etiketlerini <META> etiketlerini, (CSS) <STYLE> etiketlerini ve <SCRIPT> etiketlerini içerir.

  11. Etiket Özellikleri (Tag Attributes) • <TITLE></TITLE> •  <TITLE> satırında Internet Explorer (=IE) programına sayfaya başlık verilmek istendiği işaret edilmektedir. IE <TITLE> ve </TITLE> arasında yazılan metni pencere başlığı olarak kabul eder. Bu deyimler <HEAD></HEAD> deyimleri arasına yer alır.

  12. Etiket Özellikleri (Tag Attributes) • <BODY> Etiketi • <BODY> etiketleri ile tanımlanan <BODY> bölümüne sayfamızda görünmesini istediğimiz bilgileri yazarız. <BODY> etiketi birçok özelliğe sahiptir. Bunların çok sık kullanılanları; • BACKGROUND • BGCOLOR • TEXT • LINK • VLINK • ALINK

  13. Etiket Özellikleri (Tag Attributes) • <BODY> Etiketi • BACKGROUND • Sayfamızın arka planında gözükmesini istediğimiz resmi belirtmede kullanırız. Arka plan resmi kaynak dosyası olarak *.gif veya *.jpg dosyalarını kullanırız. Arka plan resmi web sayfasını doldurmaz, döşenir.

  14. Etiket Özellikleri (Tag Attributes) • <BODY BACKGROUND=“resim.gif” ></BODY> • Örnek: • <HTML> • <HEAD> <TITLE> Ornek08.html</TITLE></HEAD> • <BODY BACKGROUND=”File:///a:/resimler/artalan.gif”> • <!--Diskette bulunan bir resim artalan olarak görüntüleniyor... --> • <B> Ferhat BAHÇECİ</B> • </BODY> </HTML>

  15. Etiket Özellikleri (Tag Attributes) • <BODY> Etiketi • BGCOLOR • Sayfamızın arka plan rengini belirtmede kullanırız. Bu özelliğe vereceğimiz değerler renk adı olabileceği gibi rengin hexadecimal RGB renk kodu da olabilir.

  16. Etiket Özellikleri (Tag Attributes) • <BODY BGCOLOR=”renk”>…..</BODY> • Aşağıda HTML 3.2 nin desteklediği 16 renk adı yer almaktadır.

  17. Etiket Özellikleri (Tag Attributes) • <BODY BGCOLOR=”renk”>…..</BODY> • Not: Bazı Web Browser lar yukarıdakilerin haricinde renk adlarını da destekler. Mesela Internet Explorer lightgreen, darkgreen vs. gibi renkleri de destekler. Ama herkesin aynı Browser dan sayfa isteminde bulunmayacağını göz önüne alarak yukarıdaki renk isimlerini ya da hexadecimal renk kodunu kullanmak daha sorunsuz olacaktır.

  18. Etiket Özellikleri (Tag Attributes) • <BODY BGCOLOR=”renk”>…..</BODY> • Örnek: Daha önce hazırladığımız bir html sayfasının <BODY> etiketini <BODY bgcolor=”yellow”> ya da <BODY bgcolor=”#FFFF00”> olarak değiştirelim. Arka plan renginin sarı olduğunu görürüz. • Not: Bir <BODY> etiketinde BACKGROUND ve BGCOLOR özelliklerinin her ikisine de değer atandığında BACKGROUND resmi gösterilecektir.

  19. Etiket Özellikleri (Tag Attributes) • Diğer <BODY> Özelikleri • TEXT:Metin rengi • LINK:Ziyaret edilmemiş link rengi • VLINK: Ziyaret edilen link rengi (vizited link) • ALINK: Kullanıcı Mouse ile linke tıkladığında Mouse basılı iken gözükecek olan renktir. • BGPROPERTIES: Bu özelliğe fixed değeri atandığında arka plan resmi sabitolup kaydırma çubuğu ile arka plan resmi hareket etmeyecektir.

  20. Etiket Özellikleri (Tag Attributes) • Örnek: • <HTML> • <HEAD> <TITLE>WEB SAYFAMA HOŞGELDİNİZ (003_link.htm)</TITLE></HEAD> • <BODY background="bg.jpg" bgcolor="gray" text="white" • link="yellow" vlink="aqua" alink="red" bgproperties="fixed"> • <H1 align="center">WEB SAYFAMA HOŞ GELDİNİZ</H1> • <HR> <H2>Web Sayfası</H2> <HR> • Fırat Üniversitesinin Sayfasına Gitmek İçin • <A href="http://www.firat.edu.tr">Tıklayınız</A> <BR> • Karadeniz Teknik Üniversitesinin Sayfasına Gitmek İçin • <A href="www.ktu.edu.tr">Tıklayınız</A> <BR> • Arama motoru <A href="http://www.google.com.tr">Google</A> <BR> • </BODY></HTML>

  21. Etiket Özellikleri (Tag Attributes) • Örnek:

  22. Etiket Özellikleri (Tag Attributes) • <HR> Etiketi • <HR WIDTH=”uzunluk” COLOR=”renk” SIZE=”yükseklik” NOSHADE> • Web sayfasına belli bir uzunlukta,renkte ve boyutta yatay bir çizgi çizmek için kullanılır. •  WIDTH : Sayfada bulunan yatay çizginin uzunluğunu piksel veya % olarak burada belirlenir. Piksel ekrandaki nokta sayısı ile ilgilidir. % ise ekrandaki bir satırı kaplama oranıdır. Örneğin 80% bir satırın %80 ni kaplayacak şekilde bir yatay çizgiyi işaret eder. • SIZE : Çizginin kalınlığı. 1-5 arası değerler kullanılır. • COLOR : Çizginin rengi. • NOSHADE : Yukarıdaki 3 durumda da çizginin bir gölgesi vardır. Bu parametre kullanılırsa yatay çizginin gölgesi ortadan kalkar.

  23. Etiket Özellikleri (Tag Attributes) • Örnek • <HTML> <HEAD><TITLE>Ornek09.html</TITLE></HEAD> • <BODY BGCOLOR=#66CCFF> • <HR> • <HR WIDTH=75% NOSHADE> • <HR COLOR=#FF6600 WIDTH=200 SIZE=3 NOSHADE> • <HR COLOR=Red WIDTH=100 SIZE=3> • <HR COLOR=Yellow WIDTH=300 SIZE=3 NOSHADE> • </CENTER> </BODY> </HTML>

  24. Metin Biçimleme

  25. Belge Biçim Etiketleri (DocumentFormattingTags)

  26. Belge Biçim Etiketleri • HTML çok sayıda biçimlendirme etiketi sunar. • Bu etiketlerle belgede; • başlık oluşturur, • metni kalın, italik, altçizgili yapar, • madde imlerini oluşturur • ve yatay çizgiler oluşturabilirsiniz. • Bunlardan bazıları aşağıdaki tablodadır.

  27. Belge Biçim Etiketleri World Wide Web Konsorsiyumu bvei etiketlerinin kullanılmasını önermez; strongveemetiketleri bveietiketlerinin yaptığından daha fazla anlamsal bilgi sağlar.

  28. Belge Biçim Etiketleri

  29. Belge Biçim Etiketleri

  30. Metin Biçimleme • Başlık etiketlerinden başlıyoruz. Notepad'i açıyor ve şu kodları yazıyoruz :

  31. Metin Biçimleme • Dosyayı “sayfa2.htm” olarak kaydedin. • Kaydettiğimiz dosyayı açtığımızda :

  32. Metin Biçimleme • Sayfanın işleyişine baktığımızda, önce her zaman yapmamız gerektiği gibi <html>, <head>, <title> etiketlerini yerleştirdik. • Sayfa başlığı olarak "Başlık Etiketleri"ni seçtik ve sayfanın gövde <body> kısmına istediğimiz metinleri yazdık ve bu metinleri <h1>'den <h6>'ya kadar olan biçimlendirme etiketlerinin arasına aldık. • Browser metin biçimleme etiketleri olan <h1>...<h6> etiketleri arasındaki kelimelere belirli büyüklükler verdi.

  33. Metin Biçimleme • Diğer etiketleri toplu olarak kullanarak yeni bir HTML dosyası oluşturalım. Kodlar şu şekilde olsun:

  34. Metin Biçimleme • Dosyayı “sayfa3.htm” olarak kaydedin. • Kaydettiğimiz dosyayı açtığımızda :

  35. Metin Biçimleme Başladığınız etiketi sonlandırmayı sakın unutmayın ! • Bir html dökümanını açtığımızda ve ekran üzerinde farenin sağ tuşuna tıklayıp , kaynağı görüntüle/view source'u seçtiğimizde Internet Explorer için Notepad, Netscape için kendi Source Viewer'ı açılacak ve bize o sayfanın kodunu gösterecektir.

  36. Metin Biçimleme

  37. Metin Biçimlendirme Etiketlerinin Kullanımı • Örnek: • <HTML> <HEAD> <TITLE>Metin Biçimleri (005_text.htm)</TITLE> </HEAD> • <BODY> • <H1>Metin Biçimleri (005_text.htm)</H1> • <STRONG>Güçlü Vurgu STRONG (Strong Emphasis) Metni</STRONG> • <BR> • <B>Kalın B (Bolt) Gibi Gözüküyor.</B> • <!--Bir sonraki etiket yatay çizgi oluşturur.--> • <HR> • <EM>Vurgu EM (Emphasis) Metni</EM> • <BR><I>İtalik I (Italic) Gibi Gözüküyor.</I> • <HR>

  38. Metin Biçimlendirme Etiketlerinin Kullanımı • <PRE> • Bu Metin PRE (Preformatted) Etiketi Kullanılarak Yazılan • Metindir. • Başka Bir Satır ve biraz boşluk<BR> </PRE> • <HR> • Birkaç Metin Yazalım. • <BR>Bu Satırdan Önce Bir BR etiketi Var. • <P>Bu Satırdan Önce P Etiketi Var.</P> • Birkaç Metin Daha • <DIV>Bu Satırdan Önce DIV Etiketi Var.</DIV> • Bu Kadar Metin Yeter. • <HR> • </BODY> • </HTML>

  39. Metin Biçimlendirme Etiketlerinin Kullanımı

  40. Fontlar

  41. Fontlar • <BASEFONT> Etiketi • Sayfada başlık olmayan metnin varsayılan fontuna işaret eder. <BASEFONT> un varsayılan font büyüklüğü 3 tür. Kullanıldığı bölümden sonra temel font değişir. • Örnek: • <BASEFONT size=”5” color=”red”> • yukarıdaki etiketten sonra sayfada metin büyüklüğü 5 ve rengi de kırmızı olacaktır. (Aksi belirtilmedikçe)

  42. Fontlar • <FONT> Etiketi • Bu etiketler arasında bulunan metnin font ayarlarının yapıldığı etikettir. Bu etiketin bazı özellikleri;Font etiketinin kullanımı : • <fontface="..." size="..." color="...">...</font> • face= yazıtipinin adı (arial, tahoma, verdana, ...) • size= yazının büyüklüğü (1-7 arası) • color= yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk değeri) • Bunlara font etiketinin parametreleri diyoruz.

  43. Fontlar • Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse font etiketi ile biçimlemek istediğiniz metin browser'ın varsayılan fontu ile gösterilecektir. • Bu yüzden önce sisteminizde yüklü olan fontları inceleyin (Başlat/Ayarlar/Denetim Masası/Yazıtipleri). Buradan yazıtiplerini açarak inceleyebilir ve beğendiklerinizi kullanabilirsiniz.

  44. Fontlar • Şimdi font etiketinin kullanımını bir örnekle inceleyelim :

  45. Fontlar • Her zamankinden farklı olarak ve ilk defa sayfamızda renk kullandık. • Örnekte de gördüğünüz gibi bu işi renk kodlarıyla yaptık.

  46. Fontlar • Aslındarenkli yazmanınbiryoludahavar o darenkkoduyerinerenginingilizceadınıyazmak(color="red" gibi). Kırmızı-red Mavi-blue Siyah-black Sarı-yellow Lacivert-navy Yeşil-green

  47. Fontlar • <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar • Önceki örnekte <FONT> etiketi ile fontun büyüklüğünü ayarlamıştık font un size özelliğine +n veya –n değerlerini atayarak mevcut fontun n fazlası veya n eksiği olarak ayarlayabiliriz. • <BIG>ve <SMALL> etiketleri de bağlı etiketlerdir. Bu etiketlerle da sırası ile mevcut fontun bir derece büyüğünü ve bir derece küçüğünü yazmak mümkündür. Yani <BIG> ile <FONT size=”+1”> ve <SMALL> ile <FONT size=”-1”> aynı kullanıma sahiptir.

  48. Fontlar • <BIG> ve <SMALL> Etiketleri ve Bağlı Fontlar • Örnek: • <HTML> <HEAD><TITLE>Bağlı Fontlar (Relative Fonts)</TITLE></HEAD> • <BODY> <P>Bu normal BODY metnidir.</P> • <P><FONT size="+1">Bu size="+1" olan metindir.</FONT></P> • <P><BIG>Bu metin BIG etiketi ile yazılmıştır.</BIG></P> • <p><FONT size="+2">Bu size="+2" olan metindir.</FONT></p> • <P><BIG><BIG>Bu metin iki tane BIG etiketi ile yazılmıştır.</BIG></BIG></P> • <P><FONT size="-1">Bu size="-1" olan metindir.</FONT></P> • <P><SMALL>Bu metin SMALL etiketi ile yazılmıştır.</SMALL></P> • <p><FONT size="-2">Bu size="+2" olan metindir.</FONT></p> • <P><SMALL><SMALL>Bu metin iki tane SMALL etiketi ile yazılmıştır.</SMALL></SMALL></P> • </BODY> </HTML>

  49. Fontlar • Örnek:

  50. Listeler

More Related