WEB SİTESİ YAPIYORUM HTML Hazırlayan: Hazel İNCİ ULUĞ
Bir web sitesi yapmak için kullanabileceğimiz çeşitli programlar vardır. (Örn: Frontpage, Dreamweaver vb.) Bu programlar ile kod yazmadan web sayfası oluşturabiliriz. Görsel olarak eklediğimiz her resim, bağlantı vb. programın arkasında bir kod üretir. Bu kodlar, HTML olarak isimlendirilen bir dildir.
HTML (Hyper Text Markup Language) Bazen Frontpage, Dreamweaver gibi programlar yetersiz kalabilir. Böyle zamanlarda sitemizin kodlarına bizim müdahele etmemiz gerekir. Bu yüzden temel HTML kodlarını bilmemiz gerekir. HTML; internet sayfalarını oluşturmaya yarayan, internet tarayıcılarının okuyabileceği bir dildir.
HTML Kodları Nereye Yazılır? HTML kodlarını herhangi bir kelime işlemci programına yazabiliriz. (Notepad, Word vb) HTML dökümanı tek başına, sadece bir metin dosyasıdır. Ancak herhangi bir internet tarayıcısı ile (İnternet Explorer, Google Chrome vb.) çalıştırıldığında, içerdiği kodlara göre anlam kazanır.
HTML Kodları Nereye Yazılır? Not defterinde oluşturduğumuz belgeyi, uzantısı .html olacak şekilde kaydetmemiz gerekir. Bunun için Dosya menüsünden, Farklı Kaydet seçeneğini tıklayarak, açılan pencerede dosya ismi bölümünü dasya adı.html şeklinde yazmalıyız. Örn: Bir web tarayıcısından www.meb.gov.tr adresine girelim. Sayfada sağ tıklayıp Kaynağı Görüntüle seçeneğine tıklayalım. Tıkladıktan sonra, sayfanın HTML diliyle yazılmış kodlarını göreceksiniz.
Temel HTML Komutları HTML kodlarının yazılışında, bazı temel kurallar vardır. Bu kuralların herhangi birinde yapılacak hata, işlemlerinizin sonuç vermemesine neden olur. Şimdi bu kuralları inceleyelim:
Temel HTML Komutları HTML komutlarına etiket (tag) denir. Bu etiketlerin bir açma, bir de kapama bölümü bulunur. Komutlar küçüktür < , büyüktür > işaretleri arasına yazılır. Bir HTML sayfası, <html> komutu ile başlar ve sayfa sonunda </html> komutu ile biter. Bu bizim temel komutumuzdur. <html> </html> Etiketin kapama kısmı her zaman çizgi </> işareti içerir.
Temel HTML Komutları Head Komutu <head> </head> Sayfanın en üstünde web sayfası ile ilgili temel özellikler (Sayfa Başlığı Yazı karakterler kümesi, link özellikleri gibi) <head> komutu altında 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. Bilgiler bitince </head> ile kapatılır.
Temel HTML Komutları Title Komutu <title> </title> Sayfanın başlığının yazıldığı bölümdür. <title> ve </title> arasına yazılan metin, web sayfasının başlığı olarak görünür. Örn: <html> <head> <title> Deneme Sayfası </title> </head> </html>
Temel HTML Komutları Body Komutu <body> </body> Web sayfasında yer alacak asıl bilgiler bu komut altında yazılır. Burada yazılan metinler web sayfasında aynen görünür. Örn: <html> <head> <title> Deneme Sayfası </title> </head> <body> html öğreniyorum. İlk deneme sayfası </body> </html>
Metin Biçimlendirme Etiketleri Web sayfasına yazdığımız metinleri şekillendirmek için kullanacağımız etiketlerdir. BAŞLIKLAR HTML’de başlık tanımlamaları için özel komutlar vardır. Yazdığımız yazının başlık olduğunun belli olması için <h>………</h> etiketleri içine yazmamız gerekir. H harfleri, İngilizce’deki Header (başlık) kelimesinden gelmektedir. h harfinin yanında bir sayı bulunur ve bu sayı yazının büyüklüğünü gösterir. 6 tip başlık büyüklüğü vardır.
Metin Biçimlendirme Etiketleri BAŞLIKLAR <h1> </h1> büyük yazı, ana başlıklar <h2> </h2> orta yazı, alt başlıklar <h3> </h3> küçük yazı <h4> </h4> <h5> </h5> <h6> </h6> en küçük yazı
Metin Biçimlendirme Etiketleri <b>…</b> Yazıları kalın yapar. (bold) <i>…</i> Yazılarınızı italik karakter yapar. <u>…</u> Yazılarınıza alt çizgi koyar. <p>…</p> Paragraf etiketi yapar. Paragrafınızın altına ve üstüne boşluk koyar. <br> Satırbaşı yapar. Bir alt satıra geçer. Bu komutun </br> şeklinde kapama ifadesi yoktur. <NoBr> Uzun bir satır yazmak istiyor ve bu satırın bölünmesini istemiyorsak bu komutu kullanırız. <big>…</big> Büyük yazı yazar. <small>…</small> Küçük yazı yazar.
Metin Biçimlendirme Etiketleri UYGULAMA <html> <head> <title>Metin Biçimlendirme</title> </head> <body> HTML size metin biçimlendirme konusunda geniş olanaklar sağlar. Metinleri ister <h1>kocaman</h1> ister <h6>küçücük</h6> isterseniz <b>koyu</b>, <i>italik </i> veya <u>altyazılı</u> yazabilirsiniz.Yada satırbaşı yapabilir <br> veya <p> paragraf oluşturabilirsiniz </p> </body> </html>
Metin Biçimlendirme Etiketleri FONT ETİKETİ Font etiketi sayesinde, metinlerin renk, yazı tipi, boyut gibi özelliklerini değiştirebiliriz. geçebiliriz.HTML belgesinin body bölümüne yazdığımız metni, <font></font> etiketleri arasına alarak bu metne bazı özellikler kazandırabiliriz Yazı Rengi HTML’de renkler, kodlarla ifade edilir. (Örneğin #FFFFFF beyaz ,#000000 siyah) Fakat html, bazı renklerin İngilizce’sini anlar. Green=Yeşil Red=Kırmızı Black=Siyah Yellow=Sarı Blue=Mavi Orange=Turuncu
Metin Biçimlendirme Etiketleri FONT ETİKETİ Color Renk kodu veya rengin İngilizce ismi değerini alır Face Yazı türünün ismi değerini alır. Yazı tipini gösterir. Size 1 ile 7 arasında istenilen değeri alır. Yazı boyutunu gösterir. <font face=“tahoma,arial,times” color=“#FFDDCC” size=“2”> ……..….</font>
Metin Biçimlendirme Etiketleri ÖRNEK: <html> <head> <title>Font kullanımı</title> </head> <body> Font etiketinin color parametresini kullanarak <font color="#FF0000">renkli</font><font color="Blue">yazılar</font> <font color="#00FF00">yazabilir</font>;<p> değişik yazı karakterleri kullanabilirsiniz: <font face="Verdana">Mesela öyle!</font><p> Hatta yazılarınızı <font size="6"> büyütüp</font> <font size="1"> Küçültebilirsiniz</font> </body> </html>
Nesneleri Ortaya Hizalama Eklediğimiz yazı ya da resimleri sayfanın ortasında görmek istiyorsak; <center> </center> komutları arasına yazmamız gerekir.
Zemin Rengi (bgcolor) Hazırladığımız sayfanın arka plan rengini değiştirmek için, <body> etiketinin içine, etiketiyle birlikte renk kodunu yazmamız gerekir. <html> <body bgcolor=“blue”> <br> Arka plan rengi değiştirme denemesi <br> Bu bir denemedir </body> </html>
Arka Plana Resim Ekleme Hazırladığımız sayfanın arka planına resim eklemek için, <body> etiketinin içine, etiketiyle birlikte resim dosyasının konumunu yazmak gerekir. <body background=”c:\belgelerim\resim.jpg”> NOT: Dosya konumunu görmek için eklemek istediğiniz resmin üzerine sağ tıklayıp, özellikler seçeneğini seçin. Konum adresini orada göreceksiniz.
Düzen ve Yerleşim Yazı veya resimleri, ekranın sağına, soluna ya da ortasına koyabilmek için align etiketi kullanılır. <align=left> ……… </p> Nesneleri ekranın soluna yerleştirir. <align=right> ……...</p> Nesneleri ekranın sağına yerleştirir. <align=center> ……. </p> Nesneleri ekranın ortasına yerleştirir. Not: HTML’de tüm nesneler, eğer belirtmezsek ekranın solundan itibaren gösterilir. Yani soldan başlayarak yazı yazmak için, <align=left> komutunu kullanmaya gerek yoktur.
Düzen ve Yerleşim <html> <body> <h2> Sayfa Düzeni ve Yerleşimi </h2> Yazılar otomatik olarak ekranın sol tarafına yerleşir. <h2 align=right> Sağ tarafa yerleştirme </h2> <p align= right> Şimdi yazımız sağda </p> <h2 align=center> Ortaya yerleştirme </h2> <p align=center> Şimdi yazımız ortada </p> </body> </html>
Sayfaya Resim Ekleme Resimler <img> etiketi aracılığıyla kullanılırlar. src Resmin bulunduğu konumu belirtir. width Resmin genişliğini piksel cinsinden bildirir. height Resmin yüksekliğini bildirir border Resmin etrafındaki çizginin kalınlığını belirtir. align Yatay konum belirler; left, right, center değerlerini alır. title Mouse resmin üzerindeyken yazacağınız açıklamayı gösterir Örn: <img src="C:\Users\Desktop\resim.jpg" border="6" align=“center” title=”Açıklama”>
Bağlantılar Bağlantılar ziyaretçinin bir tıklama ile, sitenizin içinde veya dışında, belirlediğiniz herhangi bir adrese gitmesini sağlar. Bağlantılar <a> etiketi ile bildirilir. href Bağlantının adresi belirtilir. target Sayfanın açılacağı yeri belirler. Açılacak sayfa yeni bir sayfa olarak açılacaksa “_blank” yazılmalıdır. <a href=“C:\\Desktop\anasayfa.html” target=“_blank”>Buraya tıklayın..</a> <a href=“http://www.hotmail.com”>Hotmail</a> <a href=“mailto:info@anadolubil.edu.tr”>Görüşleriniz için…</a>
Resime Bağlantı Ekleme Resimleri bir bağlantı haline getirmek için; Aşağıdaki örneği yazdığınızda, resmin üzerine tıklanınca istediğiniz bir adrese yeni bir sayfa açılır. <a href=“http://www.google.com” target=“_blank"> <img src="C:\Users\Desktop\resim.jpg" > </a>
Müzik Ekleme Fareyle bir yere tıklandığında müzik sesi duymak için; <a href="C:\Users\Desktop\şarkı.mp3“> Müzik için tıklayın… </a> (burada “Müzik için tıklayın…” yazısına tıkladığımızda müzik çalacaktır) Fon müziği çalması için; <bgsound src="C:\Users\Desktop\şarkı.mp3"> (Sayfa açıldığında fon müziği çalmaya başlar)