Sunuyu indir
Sunum yükleniyor. Lütfen bekleyiniz
1
HTML Bu sunu PowerPoint'in yeni yeteneklerini gösterir ve en iyi Slayt Gösterisi'nde görüntülenebilir. Bu slaytlar, PowerPoint 2010'da oluşturacağınız sunular hakkında size iyi bir fikir vermek için tasarlanmışlardır! Daha fazla örnek şablon için Dosya sekmesini, sonra Yeni sekmesinde Örnek Şablonlar'ı tıklatın.
2
<body> (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) #000000 maroon (k.kırmızı) #800000 green (k.yeşil) #008000 navy (lâcivert) #000080 purple (k.mor) #800080 teal (k.türkuaz) #008080 oliver (hâki) #808000 gray (gri) #808080 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
1 Metin Etiketleri
5
Başlık Etiketleri <hx> </hx>
Başlıklar <h1> ve <h6> dahil olmak üzere aradaki tüm rakamlar kullanılarak tanımlanabilir. <h1> en büyük puntoyu belirtirken, <h6> ise en küçük puntoyu belirtir. <h1>Bu bir başlık</h1> <h2>Bu bir başlık</h2> <h3>Bu bir başlık</h3> <h4>Bu bir başlık</h4> <h5>Bu bir başlık</h5> <h6>Bu bir başlık</h6>
6
Başlık Etiketleri (Parametreler) <hx> </hx>
Align <h1 align=”center”> Milli Eğitim Bakanlığı </h1> şeklinde yazıldığında “Milli Eğitim Bakanlığı” yazısı sayfaya ortalanmış bir şekilde yazılacaktır. Style <h1 align="center" style="color:blue;">Web Tasarım</h1> <h1 align="center" style="color:#FF0000;">Programlama</h1>
7
Stil Etiketleri Etiket Açıklama Uygulama <b>. . </b>
Kalın biçimlendirme Metin <i>. . </i> İtalik biçimlendirme <u>. . </u> Altı çizgili biçimlendirme <s>. . </s> Üstü çizgili biçimlendirme <sup>. . </sup> Üst simge X2 <sub>. . </sub> Alt simge H2 <code>. . </code> Bilgisayar kodu biçimi
8
Stil Etiketleri Etiket Açıklama Uygulama <big> </big>
Büyük Metin <small> </small> Küçük <tt> </tt> daktilo yazısı <del> </del> Üstü çizgili biçimlendirme <ins> </ins> Altı çizgili biçimlendirme <strong> </strong> Güçlü metin H2 <em> </em> Vurgulanmış metin
9
Paragraf Etiketleri <p> </p> ve <br>
BR etiketinin sonlandırıcısı (</br>) 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. <p> ve </p> 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) <p align="center"> Bir şiir Tek bir şiir yazmalıyım Uyağı rüzgâr olan Yağmura bürünmüş soluğu </p>
10
Paragraf Etiketleri <p> </p> , <br> ve <pre> </pre>
<p align="center"> Bir şiir<br/> Tek bir şiir yazmalıyım<br/> Uyağı rüzgâr olan<br/> Yağmura bürünmüş soluğu </p> <pre align="center"> Bir şiir Tek bir şiir yazmalıyım Uyağı rüzgâr olan </pre>
11
Yazı Tipi Etiketleri <font> </font>
<font color="red" face="arial" size="3">. . </font> 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. Girilecek Kod Gö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
Yazı Tipi Etiketleri <font> </font>
<p><font face="tahoma" size="3" color="maroon"> <b>Burada bir yazı var.</b></font></p> <p><font face="tahoma" size="4" color="maroon"> <p><font face="tahoma" size="5" color="maroon"> <p style="color:maroon;font-family:tahoma; font-weight:bold;font-size:200%"> Burada bir yazı var.</p> <p class="author">Burada bir yazı var.</p>
13
Yatay Çizgi Etiketleri <hr>
Ekrana yatay çizgi çizmek için kullanılır. Bu etiketinde <br> etiketi gibi sonlandırıcısı yoktur. Yani bu etiket bir yorum aralığı belirtmez. Girilecek Kod Gö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
Yatay Çizgi Etiketleri <hr>
Bu kod, sayfa genişliğinde kalın ve mavi bir çizgi çizer. <hr width="100%" color="#0000F8" size="4"> Bu kod, 250 piksel, kalın, ortalanmış ve kırmızı bir çizgi çizer. <hr width="250" color="red" size="8" align="center">
15
Örnekler 1
16
Örnekler 1 <html> <body>
<h1>Temel Metin İşlemleri</h1> <p> Burası birinci paragraf sayfamızın ilk bilgileri burada yer alacak </p> <h2>HX etiketi</h2> <p> İkinci Pragrafta size hx etiketi hakkında bilgiler verilecek</p> <h2>Boşluklar</h2> <p> Buda başka bir paragraf satır ve kelime arasındaki boşluklar tarayıcıda görüntülenmez...</p> </body> </html>
17
Örnekler 2
18
Örnekler 2 <html> <body bgcolor = "#FFE4B5">
<h1 align="center" style="color:blue;">Bilgisayar</h1> <hr width="100%" color="red" size="5" align="center"> <p> Kullanıcıdan aldığı verilerle <b>mantıksal</b> ve <i>aritmetiksel</i> işlemleri yapan, yaptığı işlemlerin sonucunu saklayabilen, sakladığı bilgilere istenildiğinde ulaşabilen elektronik bir <u>makinedir.</u> </p> <h2 style="color:red;">Donanım (Hardware)</h2> <p><font face="tahoma" size="5" color="navy"> Donanım, bilgisayarların fiziksel kısımlarına denilmektedirler. Ekran, klavye, fare, sabitdisk, <del>Windows</del></font></p> <h2 style="color:red;">Software(Yazılım)</h2> <p align="center">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. </p> </body> </html>
19
2 Listeleme Etiketleri
20
Sıralı Listeleme Etiketleri <ol> </ol>
Sıralı liste oluşturmak için kullanılır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir. <ol> etiketi, <li> etiketi ile birlikte kullanılmalıdır. Girilecek Kod Görevi type = "listeleme türü" start = "değer" Sadece <ol> etiketi içindir. Sıralama elemanının başlangıç değerini belirtmekte kullanılır. value = "değer" Sadece <li> etiketi içindir. Liste öğesinin numarasını belirtmek amacıyla kullanılır.
21
Sıralı Listeleme Etiketleri <ol> </ol>
Listeleme türleri Türü Sıralama 1 Onluk tabanda numaralama (1,2,3,4,...) i Küçük rakamlarla romen sayıları (i,ii,iii,iv,...) I Büyük rakamlarla romen sayıları (I,II,III,IV,...) a Küçük harflerle alfabetik (a,b,c,...) A Büyük harflerle alfabetik (A,B,C,...)
22
Sıralı Listeleme Etiketleri <ol> </ol>
23
Sıralı Listeleme Etiketleri <ol> </ol>
<ol type="a" start="3"> <li>Elma</li> <li value="9">Armut</li> <li>Kavun</li> </ol>
24
Sıralamasız Listeleme Etiketleri <ul> </ul>
Madde işaretleri şeklinde listeleme yapmak için kullanılır. <ul> etiketi, <li> 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 circle - İçi boş bir daire görüntüler square - İçi dolu ya da boş bir kare görüntüler
25
Sıralamasız Listeleme Etiketleri <ul> </ul>
26
Tanımlama Listeleme Etiketleri
<dl> </dl>, <dt> </dt>, <dd> </dd> 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. Etiket Açıklama <dl> Tanımlama listesi <dt> Terim tanımı <dd> Tanım açıklaması <dl> <dt>align = "left"</dt> <dd>Paragrafı sola dayalı olarak yazar.</dd> <dt>align = "right"</dt> <dd>Paragrafı sağa dayalı olarak yazar.</dd> </dl>
27
Örnekler 1 <html> <head> <title>MTSL</title>
<body bgcolor="#ffcc00"> <h3>İlkbahar</h3> <ol type="1"> <li>Mart <li>Nisan <li>Mayıs </ol> <h3>Yaz</h3> <ol type="a"> <li>Haziran <li>Temmuz <li>Ağustos <h3>Sonbahar</h3> <ul type="disc"> <li>Eylül <li>Ekim <li>Kasım </ul> <h3>Kış</h3> <ul type="square"> <li>Aralık <li>Ocak <li>Şubat </body> </html>
28
Örnekler 2 <html> <body bgcolor="#EEE8AA">
<ol type="a" start="3"> <li>Marmara <ol type="I" start="5"> <li>İstanbul <ol type="A" start= "20"> <li>Kartal <li>Maltepe <li>Pendik </ol> <li>Bursa <li>Kocaeli <li>Akdeniz <ul type="circle"> <li>Antalya <li>Adana <li>Hatay </ul> <li>Doğu Anadolu <ol type="1"> <li>Van <li>Elazığ <li>Malatya <li>Karadeniz <ul type="disc"> <li>Ordu <li>Rize <li>Bolu </body> </html>
29
3 Bağlantı Etiketleri
30
Bağlantı Etiketleri <a> </a>
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. <a> etiketinin bir yorum aralığı vardır ve çeşitli tanımlayıcı kodlar da etiket ile birlikte kullanılabilir. Girilecek Kod Gö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
Bağlantı Etiketleri <a> </a>
<a href=" Web Sitesi</a> <a href="meyve.gif"> meyve resmi açın </a> <a href="midi.zip"> midi dosyalarını çekin </a> <a href="sayfa2.htm"> 2.sayfaya git </a> <a href=" sitemi ziyaret edin </a> <a href="ftp://ftp.benimsitem.com/"> dosyaları indirin </a> <a href="mailto: mail atın </a>
32
Bağlantı Etiketleri <a> </a>
Target parametresini kullanarak, açılacak olan sayfa, resim veya dosyanın açılacağı pencereyi belirtebiliriz. <a href="..." target="..." > </a> 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.
33
Bağlantı Etiketleri <a> </a>
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; <a href="#...">...</a>, <a name="....">...</a> komutları kullanılarak yapılmaktadır. <a href=”#...”> ile tıklanmasını istediğimiz metin; <a name=”...”> ile de karşımıza gelmesini istediğimiz bölüm belirlenir.
34
Resim Ekleme Etiketleri
4 Resim Ekleme Etiketleri
35
Resim Ekleme Etiketleri <img> </img>
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. Girilecek Kod Gö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. 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
Resim Ekleme Etiketleri <img> </img>
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ı: <img src="kedi.gif" width="65" height="91“ >
37
Resim Ekleme Etiketleri <img> </img>
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; <img src="resim/kedi.gif" width="65" height="91">
38
Resimlere Bağlantı Ekleme
Metinlere bağlantı vermeyi öğrendik, resimlere nasıl link vereceğiz? Bunun için resmi yerleştirmek için kullandığımız: <img src="..." width="x" height="y"> etiketini <a href>...</a> etiketinin arasına alıyoruz. örnek; <a href="sayfa1.htm"><img src="resim.gif" border="0"></a> 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.
Benzer bir sunumlar
