Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

HTML TEMELLERİ Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu.

Benzer bir sunumlar


... konulu sunumlar: "HTML TEMELLERİ Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu."— Sunum transkripti:

1 HTML TEMELLERİ Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu

2 Html Giriş Html Nedir? Açılımı H yper T ext M arkup L anguage 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

3 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.

4 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.

5 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.

6 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.

7 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.

8 HTML Etiketleri

9 Html biçimlendirme etiketlerine genellikle Html Etiketleri denir. Her Html etiketi önce açılır ve sonra kapatılır.(istisnalar hariç) … 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, ve aynı görevi görür.

10 HTML Etiketleri ve etiketleri: Tarayıcıya bir html dosyasının başlayacağını söyler. Html dosyasındaki son etiket ise ‘dir. Bu da tarayıcıya html dosyasının sonlandığını söyler. ve etiketleri: arasında kalan kısım, arka plan bilgilerini içerir. Tarayıcı penceresinde görüntülenmez. Başlık gibi… ve 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. ve etiketleri: arasında kalan kısım tarayıcı penceresinde görüntülenecek olan kısımdır.

11 HTML Etiketleri YORUM SATIRI 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.

12 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 etiketini verebiliriz. Varsayılan olarak metin sola yaslanır. Ortalamak ya da sağa yaslamak için etikete özellik eklenmelidir. İçerik

13 Etiketi Belgenin konusu, başlığı, URL’si, kullanılan dil gibi ziyaretçiye görünmeyecek bilgiler yer alır Alt etiketleri – Etiketi

14 Etiketi 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: 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.

15 Etiketi Etiketi: Base etiketi server veya tarayıcıya neyi nerede arayacaklarını bildirir. Html dokümanının başlık kısmına şeklinde bir tanımlama ekleyerek her resim için ayrı ayrı 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.

16 Etiketi 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 etiketi mutlaka kapatılmalıdır

17 Etiketi Etiketi: Arama motorları için anahtar kelimelerin tanımlanması : Sayfa açıklamasının tanımlanması: Karakter kodunun tanımlanması: Sayfa yazarının tanımlanması: Sayfanın yenilenme süresinin tanımlanması:

18 Etiketi Etiketi: Sayfa başlığını ekler. Tarayıcı da başlık çubuğunda etiketleri arasına yazılan başlık görüntülenir. Etiketi: Sayfa içi stil belirleme de kullanılır Etiketi: Sayfaya ait stil dosyalarını harici olarak bağlamak için kullanılır

19 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:

20 Etiketi ÖzellikDeğerAçıklamaHTML5HTML4.01 alinkrenkLinkin üzerine gelindiğinde tıklanırken oluşacak rengi belirler KullanılmazKullanılması istenmiyor backgroundURLSayfanın arka planına resim eklerKullanılmazKullanılması istenmiyor bgcolorrenkSayfanın arka plan rengini belirlerKullanılmazKullanılması istenmiyor linkrenkTıklanmamış linklerin rengini belirlerKullanılmazKullanılması istenmiyor textrenkSayfadaki metinlerin rengini belirlerKullanılmazKullanılması istenmiyor vlinkrenkTıklanmış linklerin rengini belirlerKullanılmazKullanılması istenmiyor topmarginpikselSayfanın üst kenar boşluğunu belirlerKullanılmazKullanılması istenmiyor leftmarginpikselSayfanın sol kenar boşluğunu belirlerKullanılmazKullanılması istenmiyor

21 Metin Biçimlendirme Etiketleri Etiketi Html dosyası içindeki yazının rengini, tipini ve büyüklüğünü değiştirmek için kullanılır.

22 Metin Biçimlendirme Etiketleri veya Etiketi – Metni kalın yapar veya Etiketi – Metni eğik yapar Etiketi – Metni alt çizgili yapar ve Etiketi – Metni üst çizgili yapar Etiketi – Metni alt simge olarak gösterir. Etiketi – Metni üst simge olarak gösterir. Etiketi – İtalik bir şekilde adres ve yer tanımlamaları yapmak için kullanılır Etiketi – Kısaltma yazmak için kullanılır. Üzerine gelince ayrıntı çıkar.

23 Metin Biçimlendirme Etiketleri H 2 SO 4 ifadesini web sayfasında oluşturunuz (X+Y) 2 =X 2 +2XY+Y 2 " Burada sigara içmek yasaktır" ifadesini aynı sigara kelimesi kırmızı olacak şekilde yazdırınız P ınarhisar M eslek Y üksekokulu ifadesini kelimelerin birisi beyaz diğeri kırmızı olacak şekilde mavi zemin üzerine yazdırınız

24 Paragraf ile ilgili Html Etiketleri Etiketi – Metnin içinde paragraf oluşturmak için kullanılır. Otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar. Etiketi – Alt satıra geçmek için kullanılır. Bu etiketin başlangıç etiketi yoktur. Çoğu zaman sadece etiketi de kullanılır ancak bu özellik gelecek nesil HTML (Xml ve Xhtml) dilinin ilk kuralını bozmaktadır. Bu yüzden etiketini kullanmanız tavsiye edilir. ……. Etiketleri – Başlık oluşturmak için kullanılır. h1 en büyük puntoyu h6 ise en küçük puntoyu belirtir.

25 Paragraf ile ilgili Html Etiketleri 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 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. Etiketi – İçeriği yatayda ortalar. İçeriğin türü paragraf, başlık, resim, vs. önemli değildir.

26 Paragraf ile ilgili Html Etiketleri Etiketi - sayfaya yatay bir çizgi çizer ve etiketinde olduğu gibi başlangıç etiketi yoktur. 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

27 Paragraf ile ilgili Html Etiketleri Etiketi – sayfa içerisinde katman oluşturmak için kullanılır. Katmanlar stil kodları ile sayfanın istenilen yerine alınabilir. Etiketi – Blok olarak verileri gruplamak için kullanılır. Bloklar biraz içeriden başlayarak devam eder. Girinti arttırma işlemi 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.

28 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 etiketi kullanılır

29 Html’de Listeleme Sıralı Listeleme 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

30 Html’de Listeleme Sıralı Listeleme Etiketi

31 Html’de Listeleme Sırasız Listeleme 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

32 Html’de Listeleme Sırasız Listeleme Etiketi

33 Html’de Listeleme Tanımlama Listeleri Etiketi – Definition 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 : Örnek olarak;

34 Html’de Listeleme Aşağıda çıktısı verilen sayfanın kaynak kodunu yazınız.

35 Html’de Listeleme Aşağıda çıktısı verilen sayfanın kaynak kodunu yazınız.

36 Html’de Resimler Html sayfalarına resim ekleyebilmek için 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ığı

37 Html’de Resimler Src parametresi resim onu çağıran html dosyası ile aynı klasörde Resim dosyası onu çağıran html dosyasının bulunduğu klasörden bir seviye aşağıda Resimler klasöründe Resim dosyası onu çağıran html dosyasının bulunduğu klasörden bir seviye yukarıda

38 Html’de Resimler align parametresi

39 Html’de Linkler Başka bir bölüme, sayfaya, adrese link oluşturmak için etiketi kullanılır. 4 farklı şekilde link verilebilir: 1.Sayfa arası link 2.Sayfa içi link 3.Dosya linki 4.Mail linki

40 Html’de Linkler Sayfa arası link Haberler Hakkımızda İletişim

41 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: Gözükecek Metin Tanımlanan yer imine bağlantı oluşturmak için Gözükecek Metin

42 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. Tıkla ve İndir İndir indirmek için tıkla

43 Html’de Linkler Mail Linki Belirtilen bir mail adresine bağlantı oluşturur Bize sorun Konu belirtmek için; Bize sorun


"HTML TEMELLERİ Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu." indir ppt

Benzer bir sunumlar


Google Reklamları