Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

HTML. (Parametreler) Girilecek Kod Görevi text = “renk”Sayfanızdaki yazıların rengine renk ile belirtilen değeri verir. link = “renk”Sayfanızdaki bağların.

Benzer bir sunumlar


... konulu sunumlar: "HTML. (Parametreler) Girilecek Kod Görevi text = “renk”Sayfanızdaki yazıların rengine renk ile belirtilen değeri verir. link = “renk”Sayfanızdaki bağların."— Sunum transkripti:

1 HTML

2 (Parametreler) Girilecek Kod Görevi text = “renk”Sayfanızdaki yazıların rengine renk ile belirtilen değeri verir. link = “renk”Sayfanızdaki bağların rengine renk ile belirtilen değeri verir. vlink = “renk”Sayfanızdaki ziyaret edilmiş bağların rengine renk ile belirtilen değeri verir. alink = “renk”Sayfanızdaki aktif bağların rengine renk ile belirtilen değeri verir. bgcolor = “renk”Sayfanızın arka plan rengine renk ile tanımlı değeri verir. background = “resim_dosyası” Eğer arka planda sade bir renk değil de bir resim kullanmak istiyorsanız, resim dosyası kullanacağınız resmin adını temsil eder. topmargin = “değer”Sayfamızda kullanacağımız bileşenlerin istemci penceresinin üst kenarına olan uzaklığını belirler. leftmargin = “değer”Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sol kenarına olan uzaklığını belirler. rightmargin = “değer”Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ kenarına olan uzaklığını belirler. onload = “betik”Sayfa yüklenirken çalıştırılacak javascript betiğini belirler. onunload = “betik”Başka bir sayfaya geçerken çalıştırılacak javascript betiğini belirler.

3 Renkler ve Bazı Renk Kodları Web renkleri için genelde RGB (Red,Green,Blue) renk sistemi kullanilir. Bu renk sistemi Kirmizi,Yesil ve Mavi renklerinin 0'dan 255'e kadar olan degerleri ile ifade edilir. HTML'de çok kullanilan renklerin Ingilizce isimleri veya yukarıdaki RGB sistemindeki her renk degerinin 16'lik sayi sistemine çevrilip yanyana yazilmasiyla elde edilen Hex üçlüsükullanilir. Renk AdıKodu black (siyah)# maroon (k.kırmızı)# green (k.yeşil)# navy (lâcivert)# purple (k.mor)# teal (k.türkuaz)# oliver (hâki)# gray (gri)# Renk AdıKodu silver (gümüş)#C0C0C0 red (kırmızı)#FF0000 lime (yeşil)#00FF00 blue (mavi)#0000FF magenta (mor)#FF00FF aqua (türkuaz)#00FFFF yellow (sarı)#FFFF00 white (beyaz)#FFFFFF

4 Metin Etiketleri 1

5 Başlıklar ve dahil olmak üzere aradaki tüm rakamlar kullanılarak tanımlanabilir. en büyük puntoyu belirtirken, ise en küçük puntoyu belirtir. Bu bir başlık Başlık Etiketleri

6 Align Milli Eğitim Bakanlığı şeklinde yazıldığında “Milli Eğitim Bakanlığı” yazısı sayfaya ortalanmış bir şekilde yazılacaktır. Style Web Tasarım Programlama Başlık Etiketleri (Parametreler)

7 Stil Etiketleri EtiketAçıklamaUygulama.. Kalın biçimlendirmeMetin.. İtalik biçimlendirmeMetin.. Altı çizgili biçimlendirmeMetin.. Üstü çizgili biçimlendirmeMetin.. Üst simgeX2X2.. Alt simgeH2H2.. Bilgisayar kodu biçimiMetin

8 Stil Etiketleri EtiketAçıklamaUygulama BüyükMetin KüçükMetin daktilo yazısı Metin Üstü çizgili biçimlendirmeMetin Altı çizgili biçimlendirmeMetin Güçlü metinH2H2 Vurgulanmış metinMetin

9 BR etiketinin sonlandırıcısı ( ) yoktur, yani bir yorum aralığından söz edilemez. BR etiketi bulunduğumuz satırdan bir satır aşağı geçmek için kullanılır. ve etiketleri ise paragraf oluşturmak için kullanılır. P etiketi içinde yine body etiketinde olduğu gibi birtakım tanımlamalar yapılabilir. (align parametresi hizalama için kullanılır) Bir şiir Tek bir şiir yazmalıyım Uyağı rüzgâr olan Yağmura bürünmüş soluğu Paragraf Etiketleri ve

10 Bir şiir Tek bir şiir yazmalıyım Uyağı rüzgâr olan Yağmura bürünmüş soluğu Bir şiir Tek bir şiir yazmalıyım Uyağı rüzgâr olan Yağmura bürünmüş soluğu Paragraf Etiketleri, ve

11 .. Color yazı karakterinin rengini, face yazi tipini (arial, verdana, tahoma gibi), size da boyutunu belirler. Size değişkeninde kullanılan rakam 1'den 7'ye kadardır. Yazı Tipi Etiketleri Girilecek KodGörevi face = "yazıtipi"Kullanılacak yazı tipi belirlenir. color = "renk"Yazacağımız yazının rengi belirlenir. size = "boyut"Yazımızın boyu belirlenir.

12 Burada bir yazı var. Burada bir yazı var. Burada bir yazı var.

Burada bir yazı var. Yazı Tipi Etiketleri

Burada bir">

13 Ekrana yatay çizgi çizmek için kullanılır. Bu etiketinde etiketi gibi sonlandırıcısı yoktur. Yani bu etiket bir yorum aralığı belirtmez. Yatay Çizgi Etiketleri Girilecek KodGörevi width = "genişlik" Çizilecek çizginin yatay uzunluğunu belirlemek için kullanılır. size = "kalınlık"Çizilecek çizginin kalınlığını belirtir. color = "renk"Çizilecek çizginin rengini belirtir. Align="hizalama"Çizilecek çizginin hizalamasını belirtir.

14 Bu kod, sayfa genişliğinde kalın ve mavi bir çizgi çizer. Bu kod, 250 piksel, kalın, ortalanmış ve kırmızı bir çizgi çizer. Yatay Çizgi Etiketleri

15 Örnekler 1

16 Temel Metin İşlemleri Burası birinci paragraf sayfamızın ilk bilgileri burada yer alacak HX etiketi İkinci Pragrafta size hx etiketi hakkında bilgiler verilecek Boşluklar Buda başka bir paragraf satır ve kelime arasındaki boşluklar tarayıcıda görüntülenmez...

17 Örnekler 2

18 Bilgisayar Kullanıcıdan aldığı verilerle mantıksal ve aritmetiksel işlemleri yapan, yaptığı işlemlerin sonucunu saklayabilen, sakladığı bilgilere istenildiğinde ulaşabilen elektronik bir makinedir. Donanım (Hardware) Donanım, bilgisayarların fiziksel kısımlarına denilmektedirler. Ekran, klavye, fare, sabitdisk, Windows Software(Yazılım) Donanımı kullanmak için gereken programlardır. Bilgisayara nasıl çalışacağını söylerler. Bilgisayarda çalışan bütün programlara yazılım adı verilir.

19 2 Listeleme Etiketleri

20 Sıralı liste oluşturmak için kullanılır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir. etiketi, etiketi ile birlikte kullanılmalıdır. Sıralı Listeleme Etiketleri Girilecek KodGörevi type = "listeleme türü" start = "değer"Sadece etiketi içindir. Sıralama elemanının başlangıç değerini belirtmekte kullanılır. value = "değer"Sadece etiketi içindir. Liste öğesinin numarasını belirtmek amacıyla kullanılır.

21 Listeleme türleri Sıralı Listeleme Etiketleri TürüSıralama 1Onluk tabanda numaralama (1,2,3,4,...) iKüçük rakamlarla romen sayıları (i,ii,iii,iv,...) IBüyük rakamlarla romen sayıları (I,II,III,IV,...) aKüçük harflerle alfabetik (a,b,c,...) ABüyük harflerle alfabetik (A,B,C,...)

22 Sıralı Listeleme Etiketleri

23 Elma Armut Kavun

24 Madde işaretleri şeklinde listeleme yapmak için kullanılır. etiketi, etiketi ile birlikte kullanılmalıdır. Sıralamasız listlerde liste öğelerini belirtmek için (type değerleri) 3 sembol ismi kullanılır: disc - İçi dolu bir daire görüntüler o circle - İçi boş bir daire görüntüler  square - İçi dolu ya da boş bir kare görüntüler Sıralamasız Listeleme Etiketleri

25

26 ,, Terimler ve açıklamalarını içeren listeler oluşturmakta kullanılırlar. Bir uygulamanın komut satırı seçeneklerini listelemek ve altlarında açıklamalarını vermek için kullanışlıdır. Tanımlama Listeleme Etiketleri EtiketAçıklama Tanımlama listesi Terim tanımı Tanım açıklaması align = "left" Paragrafı sola dayalı olarak yazar. align = "right" Paragrafı sağa dayalı olarak yazar.

27 Örnekler 1 MTSL İlkbahar Mart Nisan Mayıs Yaz Haziran Temmuz Ağustos Sonbahar Eylül Ekim Kasım Kış Aralık Ocak Şubat

28 Örnekler 2 Marmara İstanbul Kartal Maltepe Pendik Bursa Kocaeli Akdeniz Antalya Adana Hatay Doğu Anadolu Van Elazığ Malatya Karadeniz Ordu Rize Bolu

29 3 Bağlantı Etiketleri

30 Bu etiketi bir adres belirterek başka sitelere, sayfalara ya da aynı sayfanın farklı bölümlerine bağ vermek veya eposta adreslerini yazmak için kullanırız. Web istemciler genellikle öntanımlı olarak bağları altı çizili ve mavi olarak görüntüler. etiketinin bir yorum aralığı vardır ve çeşitli tanımlayıcı kodlar da etiket ile birlikte kullanılabilir. Bağlantı Etiketleri Girilecek KodGörevi href = "URL"Yorum alanındaki bileşene tıklandığında yorumlanacak adres. target = "hedef"Yorum alanındaki bileşene tıklandığında sayfanın açılacağı yer belirtilir. name = "isim"Sayfa içi bağlantılarda başka bir bağın hedefi olacak yeri belirtmek için kullanılır.

31 Okul Web Sitesi meyve resmi açın midi dosyalarını çekin 2.sayfaya git sitemi ziyaret edin dosyaları indirin mail atın Bağlantı Etiketleri

32 Target parametresini kullanarak, açılacak olan sayfa, resim veya dosyanın açılacağı pencereyi belirtebiliriz. target="_blank": Bağlantının, yeni bir pencerede açılmasını sağlar. target="_self": Bağlantının, aynı pencere içerisinde açılmasını sağlar. target="_top": Bağlantının, aynı pencere içerisinde en üstten itibaren açılmasını sağlar. target="_parent" : Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerinde açılmasını sağlar. target="çerçeve(frame) adı": Bağlantının, adı verilen çerçevede açılmasını sağlamak için kullanılır. Bağlantı Etiketleri

33 Html kodları kullanarak, sayfa içi bağlantılar oluşturabilirsiniz. Bir sayfadaki metne tıklayarak, aynı sayfanın başka bir bölümüne gidebilirsiniz. Bu işlem çapa olarak da adlandırılır. Çapa oluşturma işlemi;...,... komutları kullanılarak yapılmaktadır. ile tıklanmasını istediğimiz metin; ile de karşımıza gelmesini istediğimiz bölüm belirlenir. Bağlantı Etiketleri

34 4 Resim Ekleme Etiketleri

35 Sayfamıza resim yerleştirmek için kullanılan etikettir. Internet üzerinde en çok kullanılan resim dosyası biçemleri GIF, JPG ve PNG’dir. Bu biçemlerin seçilmesindeki amaç sayfanın yüklenmesini kolaylaştırmaktır. Resim Ekleme Etiketleri Girilecek KodGörevi src = "resim_dosyası"Kullanacağımız resim dosyasının tam yolunu yazarak, hangi resmin kullanılacağını belirtiriz. width = "genişlik"Resmin genişliği burada tanımlanır. Büyük bir resminiz varsa genişlik değerini "100%" vererek resmin web istemci genişliğine dinamik uydurulmasını sağlayabilirsiniz.dinamik uydurulmasını height = "yükseklik"Resmin yüksekliği burada tanımlanır. alt = "metin"Resmin üzerinde fare ile bir süre beklendiğinde çıkan açıklayıcı bilgi burada tanımlanır. border = "değer"Resmin dışında çerçeve çizgisi olacaksa "1", olmayacaksa "0" değeri kullanılır..

36 Diyelim ki resmimizin adı kedi.gif eni 65, boyu da 91 piksel, eğer bu resim html sayfamızla aynı dizinde duruyorsa sorun yok, kod aynen şu şekilde olmalı: Resim Ekleme Etiketleri

37 Benim eklemek istediğim resimlerim resim adlı bir alt dizinlerde. Yani html dosyası site\ dizininde resimler de site\resim dizininde. Bu durumda browser'ınız o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul edecektir. Siz de buna göre resmin yolunu uyarlayacaksınız. Etiketi bu sefer şu şekilde kullanacağız; Resim Ekleme Etiketleri

38 Metinlere bağlantı vermeyi öğrendik, resimlere nasıl link vereceğiz? Bunun için resmi yerleştirmek için kullandığımız: etiketini... etiketinin arasına alıyoruz. örnek; resim.gif tıklanacak resmi, sayfa1.htm resme tıklandığında açılacak sayfayı gösteriyor. Border komutu ise resimde bağlantı özelliği olduğunu belirten çerçeveyi kontrol ediyor, 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. Bu komutu değişik sayılarla deneyebilirsiniz. Resimlere Bağlantı Ekleme


"HTML. (Parametreler) Girilecek Kod Görevi text = “renk”Sayfanızdaki yazıların rengine renk ile belirtilen değeri verir. link = “renk”Sayfanızdaki bağların." indir ppt

Benzer bir sunumlar


Google Reklamları