HTML (HyperText Markup Language) HAYATI TANIMAK İÇİN İNTERNET; TANITMAK İÇİN KİŞİSEL BİR WEB
Giriş HTML nedir? Daha hızlı dönen bu yeni dünyada hobi ya da gereksinimden bu dile ihtiyaç var! Bu dilin Kolaylıkları ve Zorlukları
Gündem Bir web sitesi oluşturmak için günümüz teknolojisinde farklı yazılımlar ve bu siteleri paket olarak hazırlayan şirketler bulunmaktadır. Bir web sitesinin gerek hobi amaçlı gerekse reklam-tanıtım(genellikle kazanç düşüncesi) amaçlı yapılması, tanıtılması piyasalarda önemli bir yer teşkil eder.
1.1.HTML NEDİR ? HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir. Tanımda geçen "internet dökümanı" ifadesinin yanısıra HTML ile oluşturduğunuz belgeleri harddiskinize kaydedebilir ve internet bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz. 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 dizisidir diyebiliriz.
1.2. HTML'DE TEMEL UNSURLAR HTML nispeten kolay bir dildir. Bu dilde binary veya hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı oluşturmak için ihtiyacınız olan şey bir editör. Hatta sizde herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un notepad'i ile dahi halledebilirsiniz. Piyasada iki tip editör bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren fakat bunun yanısıra rutin bazı işlemleri kolaylaştıran editörler(HotDog, HomeSite..) diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler (FrontPage, Dreamweaver, NetObjects Fusion,..).
1.2. HTML'DE TEMEL UNSURLAR Belgeyi nasıl oluşturduğumuzu birlikte inceleyelim. Kelimeleri küçük "<" ve büyük ">" sembolleri arasına yazıyoruz. 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. Burada kullandığımız etiketler ve anlamları genel olarak şöyledir:
1.3. BAŞLIYORUZ !
1.4. İLK SAYFAMIZI YAPALIM 1. Ö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 olacak. 2. Şimdi de bu klasörü açıp yeni bir "metin belgesi" oluşturun (sağ fare/Yeni/Metin belgesi). 3. Dosyayı çift tıklayarak açın ve şunları yazın:
1.4. İLK SAYFAMIZI YAPALIM <html> <head> <title>İlk Sayfam</title> </head> <body>Sayfama Hoşgeldiniz</body> </html>
1.4. İLK SAYFAMIZI YAPALIM 4. Şimdi dosyayı kaydedin (Dosya/Farklı Kaydet...). Dosya adı kısmına şöyle yazın: "sayfa1.htm" (tırnaklar dahil)ve Tamam'a basın 5. 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.
1.4. İLK SAYFAMIZI YAPALIM
1.4. İLK SAYFAMIZI YAPALIM Böylece ilk HTML sayfamızı yapmış olduk. Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim. Kelimeleri küçük "<" ve büyük ">" sembolleri arasına yazıyoruz. 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. 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.
1.5.1. METİN BİÇİMLENDİRME Bu bölümde öğreneceğimiz etiketler: Başlık etiketleri: <h1>...<h6> Paragraf etiketi: <p>...</p> Ortalama : <center>...</center> Diğerleri : <b>...</b>,<i>...</i>,<u>...</u>
1.5.2. METİN BİÇİMLENDİRME HTML'de metin stillerini üç şekilde belirleyebiliriz: 1. Düzenlemek istediğimiz metnin hemen önüne koyacağımız bir etiketle biçimleme stili. Buna in-line (aynı satırda) biçimlendirme denir.
1.5.3. METİN BİÇİMLENDİRME 2. Sayfanın head (baş) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin biçimleme. (Embedded-Gömülü biçimlendirme) 3. HTML dosyasının dışında başka bir stil dosyası oluşturarak til için bu dosyayı kullanma. Buna Cascading Style Sheets-Yığılmalı Stil Kağıtları deniyor. Kısaca CSS. Bu teknik bize örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor.
1.5.4. METİN BİÇİMLENDİRME Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci ve üçüncü metodlarda stil bir defa belirleniyor ve bu stilleri istediğimiz metne uygulayabiliyoruz. Burada önemli olan bir diğer husus da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber) destekliyorlar. Burada konumuz birinci metoda göre biçimlendirmeyi öğrenmek....!
1.5.5. METİN BİÇİMLENDİRME Başlık etiketlerinden başlıyoruz. Notepad'i açıyor ve şunları yazıyoruz; <html> <head> <title>BaşlıkEtiketleri</title> </head> <body> <h1>Başlık1</h1><h2>Başlık2</h2> <h3>Başlık3</h3><h4>Başlık4</h4> <h5>Başlık5</h5><h6>Başlık6</h6> </body> </html>
1.5.6. METİN BİÇİMLENDİRME
1.5.7. METİN BİÇİMLENDİRME 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ığı (title) 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.
1.5.8. METİN BİÇİMLENDİRME Şimdi ise biraz daha amatörlük seviyesini geçip daha fazla kod kullanalım. Belki gün gelir iyi webmasterlar gibi sayfalarca kod yazıp sizde web tasarım şirketleri kurabilirsiniz. Kodlar şu şekilde olsun:
1.5.9. METİN BİÇİMLENDİRME <html> <head> <title>Başlık Etiketleri-2</title> </head> <body> <h1><center>Sayfama Hoşgeldiniz </center></h1> <p>HTML etiketleri ile,</p> Yazıları <b>koyu</b> <i>italik </i> ve <u>altı çizili</u> olarak yazabiliyorum </body> </html>
1.5.10. METİN BİÇİMLENDİRME
1.5.11. METİN BÇİMLENDİRME Yeni öğrendiğimiz kodlara bir göz atalım:
1.6. FONTLAR Font etiketinin kullanımı; <font face=.... size=.... color=....> </font>
1.6.1. FONTLAR Bunlara font etiketinin parametreleri deniyor.
1.6.2 FONTLAR <font> etiketinin yanı sıra öğreneceğimiz bir diğer etiket <br> etiketi. Önce bu etiketin kullanımını göreceğiz. <br> etiketi bir bakıma enter tuşunun görevini görüyor. Bunu biraz açıklayalım; HTML'de metinleri yazarken kullandığımız editörde bir alt satıra geçmek için enter tuşunu kullanırız. Fakat HTML dilinde bunun hiçbir anlamı yoktur, tüm kodları ve metinleri tek satırda dahi yazsanız browser açısından fark etmeyecektir. Bu yüzden metinleri bölmek, yani ikinci satıra atmak için <br> etiketini kullanıyoruz. İstisnai etiketlerden birisi bu, <br> etiketi sonlandırılmıyor. Yani “</br>” olarak sonlandırmaya gerek yok.
1.6.3. FONTLAR Buna bir örnek verelim; <html> <head> <title>BR etiketi</title> </head> <body> pazartesi salı çarşamba <br>ocak<br> şubat<br> mart<br> nisan </body> </html>
1.6.4. FONTLAR
1.6.5. FONTLAR Yukarıdaki örneğimizde "pazartesi, salı ve çarşamba"yı yazarken enter'la bir alt satıra geçmemize rağmen browser bunu gözönüne almayarak tüm metni bir satırda yazdı. Fakat ikinci sefer ay adlarını tek bir satıra yazdığımız halde bu kez browser aradaki <br> etiketine bakarak bir sonraki metni satır başına aldı. Buradan da anlaşıldığı üzere "enter" etkisini <br> etiketiyle veriyoruz. Bu etiketin bir özelliği de sonlandırılmaması.
1.6.6. FONTLAR Şimdi font etiketinin kullanımını bir örnekle inceleyelim. 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.
1.6.7. FONTLAR <html> <head> <title>Renkler ve Mevsimler</title> </head> <body> <font face="tahoma" size="5" color="#008000">İlkbahar</font> <br> <font face="verdana" size="5" color="#ff0000">Yaz</font> <br> <font face="arial" size="5" color="#ffff00">Sonbahar</font> <br> <font face="comic sans ms" size="5" color="#0000ff">Kış</font> <br> </body> </html>
1.7. LİNKLER <a>...</a> Geldik HTML'de en önemli unsurlardan birisi olan bağlantılara. Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili hale getirebiliriz. Bir tıklama bizi istediğimiz yere götürecektir. HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür. Bu yolla başka neler yapılabilir? Ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri,.. bunların hepsine bağlantı kazandırmak mümkün. Hatta yapacağımız bağlantı sayfa içinde, yani dahili bir bağlantı da olabilir.
1.7.1. LİNKLER Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim: <a href="....">...</a> Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz. Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak mümkün.
1.7.2. LİNKLER Şimdi aşağıdaki örnekleri birlikte inceleyelim, fakat öncelikle bir kuralı belirtelim; <a>...</a> etiketi arasına yazdığımız yazılar bağlantı özelliğine sahip olacaktır, yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir.
1.7.3. LİNKLER Ör: <a href="meyve.gif"> buraya tıklandığında meyve resmi açılacak </a> Birinci örnekte "buraya tıklandığında meyve resmi açılacak" yazısına bağlantı özelliği kazandırdığımızdan browser tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı fare imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir. Kullanıcı bu linke tıkladığında browser o anda açık bulunan sayfa ile aynı dizinde bulunan meyve.gif resmini açacaktır. Tabii ki dosya farklı bir dizinde ise kullanıcı hata mesajıyla karşılaşır.
1.7.4. LİNKLER Ör: <a href="midi.zip"> sıkıştırılmış midi dosyalarını çekmek için tıklayın </a> İkinci örnekte aynı şekilde "sıkıştırılmış midi dosyalarını çekmek için tıklayın" yazısına bağlantı özelliği kazandırdık. Fakat dosya tipinden kaynaklanan bir fark var; ilk örnekte meyve.gif'e tıklandığında browser resmi açacaktır fakat bu örnekte browser kullanıcıya midi.zip dosyasını açmak mı yoksa diske kaydetmek mi istediğini soran bir pencere açar. Bunun sebebi browser htm, txt, jpg, gif,.. uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları görüntüleyememesidir.
1.7.5. LİNKLER Ör: <a href="sayfa2.htm"> 2.sayfaya gitmek için tıklayın </a> Yine üçüncü örneğimizde oluşturduğumuz linke tıklandığında aynı dizinde bulunan sayfa isimli başka bir html dökümanı açılacaktır. Ör:<a href="http://www.seminerdeu.8m.com/"> tıklayın sitemi ziyaret edin </a> Dördüncü örnekte bir internet adresi verdik. Ör: <a href="ftp://ftp.seminerdeu.8m.com/"> tıklayın dosyaları indirin </a> Bu ise bir ftp adresine verilen link örneği.
1.7.6. LİNKLER Ör: <a href="mailto: tugrul.kirmizi@deu.edu.tr"> mail atın </a> Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.
TEŞEKKÜR EDERİM...