Transcript HTML
HTML HTML NEDİR? Html web sayfalarının tarayıcı’larda (browser) görüntülenmesini sağlayan dildir. Programlama dili olduğu söylenemez. Çünkü Visual Basic,Delphi,C gibi programlama dillerindeki benzer bir programlama mantığına sahip değildir. Bundan dolayı öğrenilmesi kolaydır. Kısaca, internette yayınlamak istediğiniz bilgileri tarayıcıların anlayacağı biçimde sayfaya yerleştiren komutlar dizisidir. HTML NEDİR? HTML, HyperText Markup Language (Hareketli – Metin İşaretleme Dili) deyiminin kısaltması olup bu kelimelerin baş harflerinden oluşmuştur. Html Tagı (Etiketi) ? HTML’nin bir dizi komuttan oluştuğunu söyledik.Bu kodların her birine tag(etiket) denir. Normal yazılardan ayrılması için, etiketler ” <” ve “>” işaretlerinin arasına yazılır. Örnek olarak web sayfasında bir cümlenin altı çizili olarak yazılmasını istiyorsak bu cümlenin başına <u> etiketini getirmeliyiz. Gördüğünüz gibi etiket “<“ ve ”>” işaretleri arasında yer almaktadır. Peki Biz Bu HTML Etiketlerini (Taglarını) nerede yazabiliriz. Bir çok program aracılığıyla html kodları yazılabilir. Ama biz şu anda NOTEPAD (Not Defteri) programını kullanacağız. Basit bir Web Sayfasında Hangi Etiketler Bulunur? Basit Bir Web sayfası: <html> <head> </head> <body> </body> </html> Her web sayfası bu satırla başlar ve </html> ile biter. Web sayfasının başlığı,arama motorlarında bulunması gibi etiketlerin yazıldığı yerdir. Web sayfasında görüntülenmesini istediklerinizi <body> tagının içine yazmalısınız. Basit bir Web Sayfasında Hangi Etiketler Bulunur? Yukarıda yazılı olan kodlar standart olduğu için her web sayfasında bulunur. Şimdi Notepad (Not defteri) programını açalım. Kodları yazdıktan sonra <body> tagının sonuna gelip Enter tuşuna basalım.Açılan satıra “Bu Benim ilk web sayfam” yazalım. Yazdıktan sonra “ilk_sayfam.html” olarak kaydedelim. Unutmayalım ki Web sayfalarının uzantısı .htm veya .html olmalıdır. Yazı İle ilgili Tag’lar(Etiketler) Web sayfalarında yazı ile ilgili değişiklikler yapabilmek için yazı etiketlerini(Tag) bilmemiz gerekmektedir. Örneğin “Yazının kalın görünmesini nasıl sağlarım?” diye bir soru sorarsak. Bu sorunun cevabı çok basit “Bu Benim ilk web sayfam” yazan satırın başına <b>,sonunada </ b> yazmalıyız.Bu etiket sayesinde yazı kalın gözükecektir. Kodlarda yapmamız gereken değişiklik : <b> Bu Benim ilk web sayfam </b> Yazı İle ilgili Tag’lar(Etiketler) Sayfada yer alan kelimeleri italik (eğik) yapmak için ise <i> tagını kullanmamız gerekiyor.Bunun için Not defterinde şu değişiklikleri yapmamız gerekiyor. <i> Bu Benim ilk web sayfam </i> Yazı İle ilgili Tag’lar(Etiketler) Sanırım html’in nasıl çalıştığını az çok anladınız. Eğer sayfadaki öğelerin görünümünü değiştirmek istiyorsanız, değiştireceğiniz kısmın başına ve sonuna ilgili tagı yazmanız yeterlidir. Sondaki tagı yazarken dikkat etmeniz gereken husus , ”<“ işaretinden sonra “/” işaretini koymayı unutmamaktır. Yazı İle ilgili Tag’lar(Etiketler) Sayfada yer alan kelimelerinin altı çizgili yapmak için ise <u> tagını kullanmamız gerekiyor.Bunun için Not defterinde şu değişiklikleri yapmamız gerekiyor. <u>Bu Benim ilk web sayfam</u> Yazı İle ilgili Tag’lar(Etiketler) Sayfada yer alan kelimelerinin fontunu değiştirmek için ise <font> tagını kullanmamız gerekiyor.<font> tagının kullanımını öğrenmek için yeni bir web sayfası oluşturalım ve uygulamalarımızı bu sayfa üzerinde gerçekleştirelim. Yazı İle ilgili Tag’lar(Etiketler) <html> <head> </head> <body> <font face=“verdana”>Bu satırın fontu verdana</font> </body> </html> Yazı İle ilgili Tag’lar(Etiketler) Sayfada yer alan kelimelerinin rengini ve boyutunu değiştirebilmek için ise yine <font> tagını kullanmamız gerekiyor. Yazı İle ilgili Tag’lar(Etiketler) <html> <head> </head> <body> <font face=“verdana” color=“red” size=“5”>Bu satırın fontu verdana rengi kırmızı boyutu büyük</font> </body> </html> Yazı İle ilgili Tag’lar(Etiketler) <html> <head> </head> <body> <font face=“verdana” color=“red” size=“5”>Bu satırın fontu verdana rengi kırmızı boyutu büyük</font> <p><font face=“tahoma” color=“#0000FF” size=“1”>Bu cümle mavi ve yazının boyutu küçük</font></p> </body> </html> Yazı İle ilgili Tag’lar(Etiketler) Kodlar dikkat etmişsek eğer <p> isimli yeni bir tag göreceğiz. Bu tag (<p>) görevi paragraf yapmaya yarayan tagdır. <p> tagı yazıyı paragrafa çevirmekle birlikte yazının ekranın sağına soluna v ortasına yaslanmasını sağlar. Aşağıdaki örnek kodları yazalım. Sayfamızın Arka planını renklendirelim Sayfamızın arka planını renklendirmek için yapılması gereken iş <body> tagından sayfayı renklendirmesini rica etmektir. <html> <head> </head> <body bgcolor=red> <p align=“center">ALİ</p> </body> </html> Basit Bir Web Sitesi Tasarımı Buraya kadar HTML ile ilgili temel bilgileri öğrendik.Önemli olan öğrenilen bilgilerin uygulamaya konulması . Bundan sonra farklı bir yol işleyeceğiz Basit bir web sayfası tasarlamaya başlayalım ve bundan sonraki konuları o web sitesi üzerinde uygulayarak öğrenelim. Basit Bir Web Sitesi Tasarımı Ana Sayfamızı tasarlamakla işe başlayalım.Web Sitesi tasarlarken bir noktaya dikkat çekmek gerekiyor.Ana sayfanın ismi “index” olmalıdır.Bunun dışındaki sayfaların isimlerini istediğiniz gibi seçebiliriz fakat akılda kalan ve baktığınız zaman kolayca bulabileceğiniz isimler vermeniz çok daha mantıklıdır. Basit Bir Web Sitesi Tasarımı Web sitemizde bir ana sayfamız olsun, elinizdeki kitapları ise ayrı bir sayfada listeleyelim.En son çıkan ve indirimde olan kitapları da ayrı ayrı sayfalarda gösterelim.Bu şekilde her sayfada yeni bilgiler öğrenmiş oluruz. Oluşturacağımız Sitenin Görüntüsü Oluşturacağımız Sitenin Kodları <html> <head> <title>Benim Kitapçım</title> </head> <body bgcolor=#DADADA> <h1 align=center><font face=Arial>Benim Kitapçım</font></h1> <center><font face=Verdana size=5>Benim Kitapçıma hoşgeldiniz</font></center> <p align=justify> <font face=Verdana>Internet üzerinden ihtiyacınız olan kitapları sizlere en iyi hizmet anlayışı içerisinden sunarak gönüllerinizde taht kurmayı amaçlıyoruz.En son kitapları en uygun fiyatlara sizlere sunuyyoruz.Ayrıca sizlerin istekleri ve görüşleri doğrultusunda kitap yelpazemizi genişleterek daima en iyi, en büyük ve en ucuz kitapların yer aldığı yayınevi olamak yolunda sizlerin de desteği ile ilerliyoruz. </font> </p> </body> </html> <h…> ve <center> Kodları incelediğimizde bizler için yeni olan iki tane tag(etiket) görüyoruz. <center> tagı, yazının,tablonun veya resmin sayfanın ortasında gösterilmesini sağlayan tagdır. <h…> tagı ise: 1’le 6 arasında değer alabilir.Yani <h1>,<h2> …. <h6> olabilir. Bu tag genelde başlık atarken kullanılır.Her biri belirli puntolara sahiptir. Ayrıca bu tag’ın içine renk ve hizalama ile ilgili parametreleri de yazabilirsiniz. Örnek Kodlar <html> <head> <title>h tagı denemesi</title> </head> <body> <h1>Bu satır H1 ile yazılacak.</h1> <h2 align=center><font face=Arial>Bu H2 ile ama(font değişik).</font></h2> <h3 align=center><font face=Arial color=“#0000FF>Bu H3 ile. </font></h3> <h6 align=right><font face=Arial>Benim Kitapçım</font></h6> </body> </html> Resim Tagı ve Parametreleri Bu tagları da öğrendikten sonra web sitemize geri dönelim. “Resimsiz web sitesi olur mu?” diyebilirsiniz.Haklısınız, sitemize bir tane de logo ekleyelim bunun için resimlerle ilgili özellikleri inceleyelim. Resim Tagı ve Parametreleri Bir web sayfasına resim eklemek için <img> tagı kullanılır.Bu tag da diğer taglar gibi birkaç değişik parametre içeriyor. Kendimize bir logo seçelim ve bu logoyu web sayfamızda görüntüleyelim. Logo için açık bir kitap resmi kullanacağız.. Resim Tagı ve Parametreleri <html> <head> <title>Benim Kitapçım</title> </head> <body bgcolor=#FEFFDF> <h1 align=center><font face=Arial><img src=logo.jpg>Benim Kitapçım</font></h1> <center><font face=Verdana size=5>Benim Kitapçıma hoşgeldiniz</font></center> <p align=justify> <font face=Verdana>Internet üzerinden ihtiyacınız olan kitapları sizlere en iyi hizmet anlayışı içerisinden sunarak gönüllerinizde taht kurmayı amaçlıyoruz.En son kitapları en uygun fiyatlara sizlere sunuyyoruz.Ayrıca sizlerin istekleri ve görüşleri doğrultusunda kitap yelpazemizi genişleterek daima en iyi, en büyük ve en ucuz kitapların yer aldığı yayınevi olamak yolunda sizlerin de desteği ile ilerliyoruz. </font> </p> </body> </html> Resim Tagı ve Parametreleri Bu şekilde sayfamıza bir resim eklemeiş olduk. <img> tagının kendine has birtakım parametreleri vardır.Örneğin, resmin yanında yer alan yazının alta veya üste yazılması gibi.. Resim Tagı ve Parametreleri Dikkat ederseniz yazı resmin altında yer alıyor.Yazı resmin altında yer alıyor. Yazı resmi ortalasa hiç fena olmaz değil mi? Bunun için <img> tagı içinde align parametresini kullanmamız gerekiyor. <img src=logo.jpg align=middle> Resim Tagı ve Parametreleri Yukarıdaki eki koda eklediğimizde göreceksiniz yazı resmin ortasına gelecektir. Align parametresinin alabileceği değerler Top=üst middle=orta bottom=alt Bu konuyla ilgili bir örnek yapacak olursak.. Resim Tagı ve Parametreleri <html> <head> <title>Align parametre uygulama </title> </head> <body> <p><img src=logo.jpg>Bu yazı resmi alt tarafında</p> <p>Yazı şimdi resmin ortasında <img src=logo.jpg align=middle></p> <p><img src=logo.jpg align=top>Yazı şimdi tepede olacak.</p> </body> </html> Resim Tagı ve Parametreleri Şimdide resim tagının üç özelliğini daha göreceğiz. Bunlardan birincisi alt özelliğidir.Bu özelliğin iki görevi vardır. Birincisi resim gösteremeyen tarayıcılarda resim hakkında bilgi vermek. İkincisi ise resmin üzerine fare ile gelinip beklendiğinde resim hakkında bilgi vermek için kullanılır. Resim Tagı ve Parametreleri Kodlarda yapmamız gereken değişiklik… <img src=logo.jpg alt=“Bu resim şirketin logosudur.”</img> Resim Tagı ve Parametreleri Bahsedeceğimiz ikinci özellik width ve height özelliğidir. Eğer resmi kendi boyutları değilde sizin belirttiğiniz boyda görüntülenmesini istiyorsanız bu özellikleri kullanmak zorundasınız. Örneğin kodumuzda şöyle bir değişiklik yaparsak ; <img src=logo.jpg width=50 height=75> Tablo Etiketleri ve Parametreleri Şimdi tasarlayacağımız sayfa indirimdekiler sayfası olacak. İndirimdeki kitapları sayfa içerisinde düzensiz bir şekilde Link Tagları Link(Bağlantı) eklemek web sayfasında bulunan bir yazının fontunu değiştirmek kadar kolay bir iştir. Link eklemek için <a href=…> tagı kullanılır. Tabii bu tagın da diğer taglar gibi değişik parametreleri vardır. Küçük bir örnek yaparak konuyu pekiştirelim. Bir Web Sitesine Nasıl Link Verebilirim ? Nasıl başka bir sayfaya link verdiysek burada da birkaç ufak değişiklikle herhangi bir web sitesine link verebilirim. Örneğin: <a href=http://www.google.com> Google gitmek için Tıklayın</a> Peki Bir Resme Link Verebilirim ? Evet verebiliriz. Bunun için yapmamız gereken <a href=“b.html”><img src=“resim.jpg”></a> Listeler Düz listeler 1 Listeye başlamak için belirteç açılır. <ul> 2 Liste elemanlarını teker teker girerken başına <li> belirteci girilir. Kapatmak için </li> belirtecine gerek yoktur. 3 Listeyi bitirmek için belirteç kapatılır. </ul> Listeler Düz listeler Örnek <ul> <li> Elma <li> Armut </ul> Not: <li> belirteçleri içinde paragraflar, diğer dökümanlara bağlantılar, ve diğer belirteçleri kullanabilirsiniz. Listeler Numaralı Listeler farklı olarak, <ul> belirteci yerine <ol> kullanırlar <ol> <li> Windows İşletim Sistemi <li> Windows 'un desteklediği donanımlar </ol> Tablo Hazırlama Tablo, satır ve sütunlardan oluştuğu için her hücre ayrı ayrı tanımlanır. Her satır ve sütun, kendi içinde başka satır ve sütunları ihtiva edebilir. Tablolara başlık, liste, paragraf, form, figür ve her formatta metin konabilir Parametreler <table border="..." cellpading="..." cellspacing="..." align="..." width="..." height="..."> Tablo Hazırlama Dikkat edilmesi gereken noktalar: Öntanımli olarak, header hücreler merkeze alınır, diğerleri sağa yanaşık olarak ekrana gelirler. Bunu engellemek için hücre için <ALIGN=.. belirteci, tüm tablo için <COLSPEC=.. belirteci kullanılır. Hücreler boş olabilir. Tablodaki her satırdaki kolon sayısının eşit olmadığı durumlarda kayıp hücreler tablonun sağına yerleştirilir ve içleri boş kalır. Tablodaki satır sayısı <tr belirteci tarafından tanımlanır. <th> ve <tc> belirteçleri sadece <tr> belirteçleri arasında olabilir. Hücrelerin üstüste gelmemesine çalışın, bu gibi durumlarda hatalı tablo görüntüleri ortaya Tablo Hazırlama Tablo ebadı: Tüm tablonun uzunluğu, en geniş satırla belirlenir. Kelimeler kısaltılmadığı için paragraflar <br> ile kesilmedikçe ekrana gelirler. En kısa uzunluk da en geniş kelime veya resmin uzunluğu ile bağıntılıdır. Align: Tablonun dik halinin nasıl olacağını belirler. Left: Metini ekranın soluna yanaşık yazar. Right: Metini ekranın sağına yanaşık yazar. Colspec: Sütunların ebadını ayarlar. Sütunlar soldan sağa, bir büyük harf ve onu izleyen bir sayı ile listelenirler (örneğin <COLSPEC="L20 C8 L10" > ). Hücrenin ihtiva etttiği yazıları L harfi sola, R harfi sağa alır. C harfi ortalamak için kullanılır. Burada belirteç seçenekleri mutlaka büyük harfle yazılır. Border: Bu belirteç, tablo kenarlarının ebadını kontrol etmeye yarar. <table border=10> Nowrap: Programın tablo içinde paragrafları otomatik olarak kesmemesi için kullanılır.Böylece kullanıcı istediği yerde <br> belirtecini kullanabilir. Tablo Hazırlama:Tabloda başlık ve gövde <table border="1"> <thead>Tablo Başlığı (thead)</thead> <caption align="bottom"> alt-yazı (caption) <caption> <tr> <th>1.Sütun</th> <th>2.Sütun</th> <th>3.Sütun</th> </tr> <tbody> <tr> <td>hücre1</td> <td>hücre2</td> <td>hücre3</td> </tr </tbody> </table> Tablo Başlığı (thead) ) 1.Sütun 2.Sütün 3.Sütun Hücre1 Hücre2 Hücre3 alt-yazı (caption) Tablo Örnekleri: Temel bir 3X2 tablo <table border> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </table> A D B C E F Tablo Örnekleri: Rowspan kullanılması <table border> <tr> <td>1. hücre</td> <td rowspan=2>2. hücre</td> <td>3. hücre</td> </tr> <tr> <td>4. hücre</td> 1. hücre <td>5. hücre</td> </tr> 4. hücre </table> 3. hücre 2. hücre 5. hücre Tablo Örnekleri: Rowspan kullanılması <table border> <tr> <td rowspan=2>1. hücre</td> <td>2. hücre</td> <td>3. hücre</td> <td>4. hücre</td> </tr> <tr> <td>5. hücre</td> <td>6. hücre</td> <td>7. hücre </td> </tr> </table> 2. hücre 3. hücre 4. hücre 1. hücre 5. hücre 6. hücre 7. hücre Çerçeveler Çerçeveler Frame.htm dosyası: <html> <head> <title>Çerçeveler</title> </head> <frameset cols="*,*"> <frame name="sol" src="htm1.htm"> <frame name="sag" src="htm2.htm"> </frameset> <noframes> <body> </body> </noframes> </html> Çerçeveler htm1.htm dosyası <html> <head> </head> <body bgcolor="red"> <font size="7" color="#ffffff">htm1. htm</font> </body> </html> htm1.htm dosyası <html> <head> </head> <body bgcolor="blue"> <font size="7" color="#ffffff">htm2. htm</font> </body> </html> Çerçeveler <frameset rows="*,*" cols="*,*"> <frame name="a" src="htm1.htm"> <frame name="b" src="htm2.htm"> <frame name="c" src="htm3.htm"> <frame name="d" src="htm4.htm"> </frameset>