Html Nedir - Kırklareli Üniversitesi Personel Web Sistemi
advertisement
HTML TEMELLERİ Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu Html Giriş Html Nedir? • Açılımı Hyper Text Markup Language tam Türkçe’si bulunmamakla birlikte HiperMetin İşaretleme dili denilebilir • Web sayfalarını oluşturmak için kullanılan ana dildir. • Önceden tanımlanmış, biçimlenmiş etiket (tag) lerini kullanır. • Bir programlama dili değil, işaretleme dilidir. • Html dosyaları, sunucu bilgisayarda .html ya da .htm uzantılı olarak saklanır Html Giriş Html Nedir? • Html etiketlerinin görevi, web sayfalarının birbirine nasıl bağlanacağını; sayfa içindeki metin, resim vb. elemanların nasıl yerleşeceğini belirlemektir. • Sunucudan istemciye gelen web sayfasının içeriği bu etiketler vasıtasıyla biçimlendirilerek ziyaretçiye sunulur. • İçeriğin biçimlendirme görevini İnternet Explorer, Firefox, Chrome gibi web tarayıcıları üstlenmiştir. Html Giriş Html Nedir? • Html tasarlanırken son derece basit ve anlaşılır olması planlanmıştır. • Bu nedenle özel programlara ihtiyaç duyulmadan sadece NotePad ile yazılabilir. • Günümüzde html kodlarını otomatik olarak oluşturan bir çok editör programı mevcuttur. Bunların bazıları Dreamweaver, Frontpage, Corel Web Suite olarak sıralanabilir. XHTML XHtml Nedir? • XHTML açılımı eXtensible Hyper Text Markup Language yani html’in hem genişletilmiş hem de daha işlevsel olan versiyonudur. • Html ve Xml yapılarının World Wide Web Consortium (W3C) tarafından 2001 yılında birleştirilerek XHTML 1.0 olarak duyurmasıyla ortaya çıkmıştır. • XML (eXtensible Markup Language) ise genişletilmiş işaretleme dilidir. Şimdilik XML’in daha önceden tanımlanmış etiketlerle değil kullanıcının tanımladığı etiketlerle oluşturulduğunu bilmemiz yeterlidir. XHTML Neden XHtml? • Html de uyulması gereken kurallar daha gevşektir. Bu nedenle çoğu zaman düzgün bir şekilde gösterilmeyen sayfalar ortaya çıkmaktadır. • Xhtml de ise belirli katı kurallar bulunmaktadır. Böylece hem görüntü hem de hız açısından daha işlevsel sayfalar oluşturulur. • Örneğin DOCTYPE etiketi kullanılmak zorundadır. • Arama motorları açısından da indekslemenin daha çabuk olması ve üst sıralarda yer alabilmesi için Html’den daha katı kurallara sahip Xhtml’in kullanılması daha iyi olacaktır. XHTML XHtml’de Uyulacak Kurallar • Açılan tüm etiketler kapatılmalıdır. • Tüm etiketler ve özellikler küçük harflerle yazılmalıdır. • Etiket özelliklerine ait değerler çift tırnak içerisinde yazılmalıdır. • Etiket özellikleri değer almadan tek başına kullanılamazlar. • İç içe girmiş daha bir biri içerisinde yuvalanmış elemanlarda etiketin kapanış sırasına dikkat edilmelidir. HTML Etiketleri HTML Etiketleri • Html biçimlendirme etiketlerine genellikle Html Etiketleri denir. • Her Html etiketi önce açılır ve sonra kapatılır.(istisnalar hariç) • <etiket>…</etiket> ifadesi gibi önce başlangıç etiketi ve sonra / işareti eklenerek bitiş etiketi yazılır. • Html etiketleri büyük-küçük harfe duyarlı değildir yani <etiket> , <ETİKET> ve <Etiket> aynı görevi görür. HTML Etiketleri • <html> ve </html> etiketleri: Tarayıcıya bir html dosyasının başlayacağını söyler. Html dosyasındaki son etiket ise </html> ‘dir. Bu da tarayıcıya html dosyasının sonlandığını söyler. • <head> ve </head> etiketleri: arasında kalan kısım, arka plan bilgilerini içerir. Tarayıcı penceresinde görüntülenmez. Başlık gibi… • <title> ve </title> etiketleri: arasında kalan kısım dokümanınızın başlık bilgilerini içerir. Başlık tarayıcı penceresinin en üstünde görüntülenir. • <body> ve </ body > etiketleri: arasında kalan kısım tarayıcı penceresinde görüntülenecek olan kısımdır. HTML Etiketleri • YORUM SATIRI <!-- Yorum satırı --> kaynak kodu içerisinde programcılar tarafından hangi satırın ne iş gördüğünü anlatmaları için kullanılır. Bu satırlar sayfa tarayıcı da görüntülenirken dikkate alınmazlar. HTML’de Nitelikler • Nitelikler (Attributes), Html öğelerine ek özellikler eklenmesini sağlar • Nitelikler daima özellik=" değer " ikililerinden oluşur. • Nitelikler, daima başlangıç etiketleri içerisinde belirtilir. • Niteliklerin değeri her zaman tırnak içerinde belirtilmelidir. • Etiket özellikleri yazılmadığında varsayılan değerlerini alır. • Örnek olarak yeni bir paragraf başlatan <p> etiketini verebiliriz. • Varsayılan olarak metin sola yaslanır. • Ortalamak ya da sağa yaslamak için etikete özellik eklenmelidir. • <p align=" center" > İçerik </p> <head> Etiketi • Belgenin konusu, başlığı, URL’si, kullanılan dil gibi ziyaretçiye görünmeyecek bilgiler yer alır • Alt etiketleri – <BASE> Etiketi – <META> Etiketi – <TİTLE> Etiketi – <STYLE> Etiketi – <LINK> Etiketi – <SCRİPT> Etiketi <head> Etiketi • <BASE> Etiketi: Bir HTML dokümanında daha sonra belirtilecek kaynakların aranması gereken temel URL’i gösterir. • Diyelim ki HTML belgesinde bir resme yer veriyorsunuz. HTML dosyasını siz yazdığınızda bunu muhtemelen şöyle yazarsınız: • <img src=" resim.png"/> • Böyle bir tanım yapıldığında tarayıcı resim.png dosyasını ona atıf yapılan html dosyası ile aynı dizinde arayacaktır ve büyük ihtimalle bulamayacaktır. <head> Etiketi • <BASE> Etiketi: • Base etiketi server veya tarayıcıya neyi nerede arayacaklarını bildirir. • Html dokümanının başlık kısmına <base href=" http://website.com.tr/resimler/"> şeklinde bir tanımlama ekleyerek her resim için ayrı ayrı <img src="http://website.com.tr/resimler/ resim.png"/> yazmaktan kurtuluruz. • Ayrıca resimleri farklı bir dizine aldığınızda sitedeki bütün kodları tek tek düzeltmektense yalnızca base etiketini düzenleriz. <head> Etiketi • <meta> Etiketi: • Meta etiketi Html belgesi hakkında meta verileri sağlar. Meta veriler tarayıcı da gözükmezler. • Meta etiketleri genellikle description (açıklama), keywords (anahtar kelime), authors (sayfanın yazarı) ve last modified (son değiştirme tarihi) gibi meta verileri tanımlamak için kullanılır. • Meta verileri, sayfa yüklenirken nasıl görüntüleneceğini belirlemek amacıyla tarayıcılar ve indeksleme yapmak amacıyla da arama motorları kullanır. • Meta verileri, isim/değer çiftleri şeklinde tanımlanır. • Xhtml standartlarına göre <meta> etiketi mutlaka kapatılmalıdır <head> Etiketi • <meta> Etiketi: • Arama motorları tanımlanması : için anahtar kelimelerin • Sayfa açıklamasının tanımlanması: • Karakter kodunun tanımlanması: • Sayfa yazarının tanımlanması: • Sayfanın yenilenme süresinin tanımlanması: <head> Etiketi • • <title> Etiketi: Sayfa başlığını ekler. • Tarayıcı da başlık çubuğunda <title></title> etiketleri arasına yazılan başlık görüntülenir. • <style> Etiketi: • Sayfa içi stil belirleme de kullanılır • <link> Etiketi: • Sayfaya ait stil dosyalarını harici olarak bağlamak için kullanılır <body> Etiketi • Html belgesinin tüm içeriğinin yer aldığı bölümdür. • Bu bölümde yer alan içeriğin tümü tarayıcı da görüntülenir. • Body etiketi ile birlikte kullanılacak özellikler ve aldığı değerler aşağıdaki gibidir: <body> Etiketi Özellik Değer Açıklama HTML5 HTML4.01 alink renk Linkin üzerine gelindiğinde tıklanırken oluşacak rengi belirler Kullanılmaz Kullanılması istenmiyor background URL Sayfanın arka planına resim ekler Kullanılmaz Kullanılması istenmiyor bgcolor renk Sayfanın arka plan rengini belirler Kullanılmaz Kullanılması istenmiyor link renk Tıklanmamış linklerin rengini belirler Kullanılmaz Kullanılması istenmiyor text renk Sayfadaki metinlerin rengini belirler Kullanılmaz Kullanılması istenmiyor vlink renk Tıklanmış linklerin rengini belirler Kullanılmaz Kullanılması istenmiyor topmargin piksel Sayfanın üst kenar boşluğunu belirler Kullanılmaz Kullanılması istenmiyor leftmargin piksel Sayfanın sol kenar boşluğunu belirler Kullanılmaz Kullanılması istenmiyor Metin Biçimlendirme Etiketleri • <font> Etiketi • Html dosyası içindeki yazının rengini, büyüklüğünü değiştirmek için kullanılır. tipini ve Metin Biçimlendirme Etiketleri • <b> veya <strong> Etiketi – Metni kalın yapar • <i> veya <em> Etiketi – Metni eğik yapar • <u> Etiketi – Metni alt çizgili yapar • <del> ve <s> Etiketi – Metni üst çizgili yapar • <sub> Etiketi – Metni alt simge olarak gösterir. • <sup> Etiketi – Metni üst simge olarak gösterir. • <address> Etiketi – İtalik bir şekilde adres ve yer tanımlamaları yapmak için kullanılır • <abbr> Etiketi – Kısaltma yazmak için kullanılır. Üzerine gelince ayrıntı çıkar. Metin Biçimlendirme Etiketleri • H2SO4 ifadesini web sayfasında oluşturunuz • (X+Y)2=X2+2XY+Y2 • " Burada sigara içmek yasaktır" ifadesini aynı sigara kelimesi kırmızı olacak şekilde yazdırınız • Pınarhisar Meslek Yüksekokulu ifadesini kelimelerin birisi beyaz diğeri kırmızı olacak şekilde mavi zemin üzerine yazdırınız Paragraf ile ilgili Html Etiketleri • <p> Etiketi – Metnin içinde paragraf oluşturmak için kullanılır. Otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar. • <br/> Etiketi – Alt satıra geçmek için kullanılır. Bu etiketin başlangıç etiketi yoktur. Çoğu zaman sadece <br> etiketi de kullanılır ancak bu özellik gelecek nesil HTML (Xml ve Xhtml) dilinin ilk kuralını bozmaktadır. Bu yüzden <br/> etiketini kullanmanız tavsiye edilir. • <h1>…….<h6> Etiketleri – Başlık oluşturmak için kullanılır. h1 en büyük puntoyu h6 ise en küçük puntoyu belirtir. Paragraf ile ilgili Html Etiketleri • <nobr> Etiketi – Ekran çözünürlüğüne bağlı olarak içeriğin yatayda kaydırılmasını engeller. İçerik tek satırda görüntülenir • <pre> Etiketi – Html kod sayfasındaki biçimin aynen kullanılmasını sağlar. Enter ile alt satıra geçilebilir. Bırakılan birden fazla boşluk tarayıcı da görüntülenir. • <center> Etiketi – İçeriği yatayda ortalar. İçeriğin türü paragraf, başlık, resim, vs. önemli değildir. Paragraf ile ilgili Html Etiketleri • <hr/> Etiketi - sayfaya yatay bir çizgi çizer ve <br/> etiketinde olduğu gibi başlangıç etiketi yoktur. • <hr/> etiketinin aldığı özellikler : • Align: Çizginin sayfadaki konumunu belirler. • Size: Piksel cinsinden çizgi kalınlığını belirler. Varsayılan değeri 2 piksel’dir. • Width: Çizginin kalınlığını belirler. Varsayılan değeri %100’dür. • Color: Çizginin rengini belirler. • NoShade: Gölgeli olmayan çizgi Paragraf ile ilgili Html Etiketleri • <div> Etiketi – sayfa içerisinde katman oluşturmak için kullanılır. Katmanlar stil kodları ile sayfanın istenilen yerine alınabilir. • <blockquote> Etiketi – Blok olarak verileri gruplamak için kullanılır. Bloklar biraz içeriden başlayarak devam eder. Girinti arttırma işlemi • <span> Etiketi – Satır içindeki verileri bütünden farklı bir şekilde biçimlendirmek için kullanılır. Örneğin bir paragraf içinde sadece span etiketleri içine alınmış bir cümle, bir kelime ya da sadece bir harf paragrafın şekline uymayıp ayrı bir şekilde görüntülenecektir. Html’de Listeleme Html’de 3 çeşit listeleme yöntemi bulunmaktadır: ― Sıralı Listeleme ― Sırasız Listeleme ― Tanımlama Listeleri • Listeye yeni bir eleman eklemek için <li> etiketi kullanılır • Html’de Listeleme • Sıralı Listeleme <ol> Etiketi – Ordered List yani sıralı listeleme anlamına gelen bu etiket harf veya rakam ile işaretlenmiş listeler oluşturmak için kullanılır • Type özelliği ile sıralamanın tipi belirlenir. Aldığı değerler aşağıdaki gibidir: 1 – Sayı ile listeleme a – Küçük harf ile listeleme A – Büyük harf ile listeleme i – Küçük roma rakamı ile listeleme İ – Büyük rom rakamı ile listeleme Html’de Listeleme • Sıralı Listeleme <ol> Etiketi Html’de Listeleme • Sırasız Listeleme <ul> Etiketi – Unordered List yani sırasız listeleme anlamına gelen bu etiket numara ve harfler olmaksızın çeşitli işaretler ile listeleme yapmak için kullanılır • Type özelliği ile listeleme de kullanılacak işaretlerin tipi belirlenir. • Type parametresinin aldığı değerler aşağıdaki gibidir: circle – İçi boş daire disc– içi dolu daire square – içi dolu kare Html’de Listeleme • Sırasız Listeleme <ul> Etiketi Html’de Listeleme • Tanımlama Listeleri <dl> Etiketi – Definition • Örnek olarak; List yani tanımlama listeleri anlamına gelen bu etiket terim ve açıklamaları içeren listeler oluşturmak için kullanılır. • Genel Kullanımı aşağıdaki gibidir : Html’de Listeleme • Aşağıda çıktısı verilen sayfanın kaynak kodunu yazınız. Html’de Listeleme • Aşağıda çıktısı verilen sayfanın kaynak kodunu yazınız. Html’de Resimler • Html sayfalarına resim ekleyebilmek için <img> etiketi kullanılır. • • • • • • • • • src – resmin yolu title – resmin üzerine gelindiğinde görüntülenecek başlık alt – resim yüklenmediğinde görüntülenecek metin width – resmin genişliği height – resmin yüksekliği align – resmin sayfadaki konumu border – çerçeve hspace – resmin yanındaki nesnelere olan yatay uzaklığı vspace – resmin yanındaki nesnelere olan dikey uzaklığı Html’de Resimler • Src parametresi <img src="Resim.jpg"> resim onu çağıran html dosyası ile aynı klasörde <img src= "Resimler/Resim.jpg"> Resim dosyası onu çağıran html dosyasının bulunduğu klasörden bir seviye aşağıda Resimler klasöründe <img src="../Resim.jpg"> Resim dosyası onu çağıran html dosyasının bulunduğu klasörden bir seviye yukarıda Html’de Resimler • align parametresi <img src="Resimler/web.jpg" width="50" height="50" border="1" align="top"> <img src="Resimler/web.jpg" width="50" height="50" border="1" align="middle"> <img src="Resimler/web.jpg" width="50" height="50" border="1" align="bottom"> <img src="Resimler/web.jpg" width="50" height="50" border="1" align="left"> <img src="Resimler/web.jpg" width="50" height="50" border="1" align="right"> Html’de Linkler • Başka bir bölüme, sayfaya, adrese link oluşturmak için <a> etiketi kullanılır. 4 farklı şekilde link verilebilir: 1. Sayfa arası link 2. Sayfa içi link 3. Dosya linki 4. Mail linki Html’de Linkler • Sayfa arası link • <a href="http://www.milliyet.com.tr">Haberler</a> • <a href="hakkimizda.html">Hakkımızda</a> • <a href="http://www.facebook.com.tr"> <img src="facebook.png" /></a> • <a href="iletisim.html" target="_blank" > İletişim</a> Html’de Linkler • Sayfa içi link • Uzun içeriğe sahip sayfalarda kullanılır. • Eklenen bağlantı farklı bir sayfayı değil aynı sayfada farklı bir bölümü işaret eder • Sayfanın farklı kısımlarına bağlantı eklemek için öncelikle bağlantı eklenecek satır veya paragraflara yer imi konulur • Yer imi tanımlaması şu şekildedir: • <a name=" yer imi adı " > Gözükecek Metin </a> • Tanımlanan yer imine bağlantı oluşturmak için • <a href="#yer imi adı"> Gözükecek Metin </a> Html’de Linkler • Dosya Linki • Bir resim dosyası, müzik dosyası, winzip arşivi gibi farklı türdeki dosyalara link vermek için kullanılır. • <a href="D:\Muzik\Birsen Tezer\Hoşgeldin.mp3"> Tıkla ve İndir</a> • <a href="C:\Users\EmineTuncel\Desktop\nivoslider3.2.zip">İndir • <a href="D:\Film\Dedemin İnsanları\Dedemin Insanlari.avi">indirmek için tıkla</a> Html’de Linkler • Mail Linki • Belirtilen bir mail adresine bağlantı oluşturur • <a href="mailto://[email protected]"> Bize sorun</a> • Konu belirtmek için; • <a href="mailto://[email protected] ?subject=sorular">Bize sorun</a>
