Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

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.

Benzer bir sunumlar


... konulu sunumlar: "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."— Sunum transkripti:

1 HTML

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

3 HTML NEDİR?  HTML, HyperText Markup Language (Hareketli – Metin İşaretleme Dili) deyiminin kısaltması olup bu kelimelerin baş harflerinden oluşmuştur.

4 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 ” ” 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 etiketini getirmeliyiz.  Gördüğünüz gibi etiket “ ” işaretleri arasında yer almaktadır.

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

6 Basit bir Web Sayfasında Hangi Etiketler Bulunur?  Basit Bir Web sayfası: Her web sayfası bu satırla başlar ve 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 tagının içine yazmalısınız.

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

8 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,sonunada yazmalıyız.Bu etiket sayesinde yazı kalın gözükecektir.  Kodlarda yapmamız gereken değişiklik :  Bu Benim ilk web sayfam  Bu Benim ilk web sayfam

9 Yazı İle ilgili Tag’lar(Etiketler)  Sayfada yer alan kelimeleri italik (eğik) yapmak için ise tagını kullanmamız gerekiyor.Bunun için Not defterinde şu değişiklikleri yapmamız gerekiyor.  Bu Benim ilk web sayfam  Bu Benim ilk web sayfam

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

11 Yazı İle ilgili Tag’lar(Etiketler)  Sayfada yer alan kelimelerinin altı çizgili yapmak için ise tagını kullanmamız gerekiyor.Bunun için Not defterinde şu değişiklikleri yapmamız gerekiyor.  Bu Benim ilk web sayfam  Bu Benim ilk web sayfam

12 Yazı İle ilgili Tag’lar(Etiketler)  Sayfada yer alan kelimelerinin fontunu değiştirmek için ise tagını kullanmamız gerekiyor. 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.

13 Yazı İle ilgili Tag’lar(Etiketler) Bu satırın fontu verdana Bu satırın fontu verdana

14 Yazı İle ilgili Tag’lar(Etiketler)  Sayfada yer alan kelimelerinin rengini ve boyutunu değiştirebilmek için ise yine tagını kullanmamız gerekiyor.

15 Yazı İle ilgili Tag’lar(Etiketler) Bu satırın fontu verdana rengi kırmızı boyutu büyük Bu satırın fontu verdana rengi kırmızı boyutu büyük

16 Yazı İle ilgili Tag’lar(Etiketler) Bu satırın fontu verdana rengi kırmızı boyutu büyük Bu satırın fontu verdana rengi kırmızı boyutu büyük Bu cümle mavi ve yazının boyutu küçük Bu cümle mavi ve yazının boyutu küçük

17 Yazı İle ilgili Tag’lar(Etiketler)  Kodlar dikkat etmişsek eğer isimli yeni bir tag göreceğiz.  Bu tag ( ) görevi paragraf yapmaya yarayan tagdır.  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.

18 Sayfamızın Arka planını renklendirelim Sayfamızın arka planını renklendirmek için yapılması gereken iş tagından sayfayı renklendirmesini rica etmektir. ALİ ALİ

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

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

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

22 Oluşturacağımız Sitenin Görüntüsü

23 Oluşturacağımız Sitenin Kodları    Benim Kitapçım  Benim Kitapçım    Benim Kitapçım  Benim Kitapçım  Benim Kitapçıma hoşgeldiniz  Benim Kitapçıma hoşgeldiniz    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.  

24 ve ve  Kodları incelediğimizde bizler için yeni olan iki tane tag(etiket) görüyoruz.  tagı, yazının,tablonun veya resmin sayfanın ortasında gösterilmesini sağlayan tagdır.  tagı ise: 1’le 6 arasında değer alabilir.Yani, …. 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.

25 Örnek Kodlar    h tagı denemesi  h tagı denemesi    Bu satır H1 ile yazılacak.  Bu satır H1 ile yazılacak.  Bu H2 ile ama(font değişik).  Bu H2 ile ama(font değişik).  Bu H3 ile.  Bu H3 ile.  Benim Kitapçım  Benim Kitapçım  

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

27 Resim Tagı ve Parametreleri  Bir web sayfasına resim eklemek için 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..

28 Resim Tagı ve Parametreleri    Benim Kitapçım  Benim Kitapçım    Benim Kitapçım  Benim Kitapçım  Benim Kitapçıma hoşgeldiniz  Benim Kitapçıma hoşgeldiniz    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.  

29 Resim Tagı ve Parametreleri  Bu şekilde sayfamıza bir resim eklemeiş olduk.  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..

30 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 tagı içinde align parametresini kullanmamız gerekiyor.  

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

32 Resim Tagı ve Parametreleri    Align parametre uygulama  Align parametre uygulama    Bu yazı resmi alt tarafında  Bu yazı resmi alt tarafında  Yazı şimdi resmin ortasında  Yazı şimdi resmin ortasında  Yazı şimdi tepede olacak.  Yazı şimdi tepede olacak.  

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

34 Resim Tagı ve Parametreleri  Kodlarda yapmamız gereken değişiklik…  

35 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 ;

36 Tablo Etiketleri ve Parametreleri  Şimdi tasarlayacağımız sayfa indirimdekiler sayfası olacak.  İndirimdeki kitapları sayfa içerisinde düzensiz bir şekilde

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

38 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:  Google gitmek için Tıklayın  Google gitmek için Tıklayın

39 Peki Bir Resme Link Verebilirim ?  Evet verebiliriz.  Bunun için yapmamız gereken  

40 Listeler  Düz listeler 1Listeye başlamak için belirteç açılır. 1Listeye başlamak için belirteç açılır. 2Liste elemanlarını teker teker girerken başına belirteci girilir. Kapatmak için belirtecine gerek yoktur. 3Listeyi bitirmek için belirteç kapatılır. 3Listeyi bitirmek için belirteç kapatılır.

41 Listeler  Düz listeler Örnek

    Elma Elma Armut Armut Not: belirteçleri içinde paragraflar, diğer dökümanlara bağlantılar, ve diğer belirteçleri kullanabilirsiniz.

    42 Listeler  Numaralı Listeler farklı olarak, belirteci yerine kullanırlar Windows İşletim Sistemi Windows İşletim Sistemi Windows 'un desteklediği donanımlar Windows 'un desteklediği donanımlar

    43 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

    44 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

    45 Tablo Hazırlama  Tablo ebadı: Tüm tablonun uzunluğu, en geniş satırla belirlenir. Kelimeler kısaltılmadığı için paragraflar 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 ). 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.  Border: Bu belirteç, tablo kenarlarının ebadını kontrol etmeye yarar.  Nowrap: Programın tablo içinde paragrafları otomatik olarak kesmemesi için kullanılır.Böylece kullanıcı istediği yerde belirtecini kullanabilir.

    46 Tablo Hazırlama:Tabloda başlık ve gövde Tablo Başlığı (thead) alt-yazı (caption) 1.Sütun 2.Sütun 3.Sütun hücre1 hücre2 hücre3 Tablo Başlığı (thead) alt-yazı (caption) 1.Sütun 2.Sütun 3.Sütun hücre1 hücre2 hücre3

    47 A BC DEF A B C D E F Tablo Örnekleri: Temel bir 3X2 tablo

    48 1. hücre 2. hücre 3. hücre 4. hücre 5. hücre 1. hücre 2. hücre 3. hücre 4. hücre5. hücre Tablo Örnekleri: Rowspan kullanılması

    49 1. hücre 2. hücre 3. hücre 4. hücre 5. hücre 6. hücre 7. hücre 1. hücre 2. hücre3. hücre4. hücre 5. hücre6. hücre7. hücre

    50 Çerçeveler

    51 Çerçeveler Frame.htm dosyası: Çerçeveler Çerçeveler

    52 Çerçeveler htm1.htm dosyası htm1. htm htm1. htm htm1.htm dosyası htm2. htm htm2. htm

    53 Çerçeveler


"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." indir ppt

Benzer bir sunumlar


Google Reklamları