/dev/null Web Günlüğü: Web Programlama

Web Programlama etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

25 Temmuz 2015 Cumartesi

HTML5 Yeni Form Özellikleri

HTML Dersleri
HTML5 Yeni Form Özellikleri

HTML5 <form> ve <input> için birkaç yeni özellik içerir.

HTML5 <form> için yeni özellikler:

<form> ve <input> autocomplete özelliği: Bir form yada input alanının autocomplete'sinin açık olup olmadıgını kontrol eder. autocomplete açık olduğunda, tarayıcı kullanıcının önceden girdiği değerlere göre alanları tamamlar. Autocomplete özelliği <form> ve takip eden <input> tipleri ile çalışır:text, search, url, tel, email, password, datepickers, range ve color.

<!DOCTYPE html>
<html>
<body>

<form action="#" autocomplete="on">
  İsim:<input type="text" name="isim"><br>
  Soyisim: <input type="text" name="soyad"><br>
  E-Posta: <input type="email" name="eposta" autocomplete="off"><br>
  <input type="submit">
</form>

</body>
</html>

Bu özellik Chrome, Safari, Firefox ve IE tarafından desteklenmektedir.

NOT: Bazı tarayıcılarda bu örneğin çalışması için "otomatik tamamlama" özelliğini aktifleştirmeniz gerekebilir.

<form> novalidate özelliği: Bir boolean özelliktir. (TRUE - FALSE) Var olduğunda, form gönderildiğinde <input> elementinin doğrulanıp doğrulanmayacağını belirler.

<!DOCTYPE html>
<html>
<body>

<form action="#" novalidate>
E-Posta: <input type="email" name="user_email">
<input type="submit">
</form>

</body>
</html>

Bu özellik Safari ve IE tarafından v9 öncesinde desteklenmemektedir.

HTML5 <input> için yeni özellikler:

<input> autofocus özelliği: Bir boolean özelliktir. (TRUE - FALSE) Var olduğunda, tarayıcının <input> elementine sayfa yüklendiğinde otomatik olarak odaklanmasını belirler.

<!DOCTYPE html>
<html>
<body>

<form action="#">
  İsim:<input type="text" name="ad" autofocus><br>
  Soyisim: <input type="text" name="soyad"><br>
  <input type="submit">
</form>

</body>
</html>

Bu özellik IE tarafından v9 öncesinde desteklenmemektedir.

<input> form özelliği: Bir <input> elementinin hangi form ya da formlara ait olduğunu belirtir.

<!DOCTYPE html>
<html>
<body>

<form action="#" id="form1">
İsim: <input type="text" name="ad"><br>
<input type="submit" value="Submit">
</form>
Soyisim: <input type="text" name="soyad" form="form1">

</body>
</html>

Bu özellik Chrome, Safari, Opera ve Firefox tarafından desteklenmektedir.

<input> formaction özelliği: <input> elementinin formun action özelliğini değiştirmesini sağlar. bir form gönderildiğinde giriş denetimi (input control) işleyecek bir dosyanın url'ni belirtir. Bu özellik type="submit" ve type="image" ile kullanılır.

<!DOCTYPE html>
<html>
<body>

<form action="form.php">
  İsim: <input type="text" name="ad"><br>
  Soyisim: <input type="text" name="soyad"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="admin.php" value="Submit as admin">
</form>

</body>
</html>

Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

<input> formenctype özelliği: form-data'nın sunucuya gönderilirken nasıl şifrelenmesi gerektiğini belirtir. formun enctype özelliğini değiştirmesini sağlar. Bu özellik type="submit" ve type="image" ile kullanılır.

<!DOCTYPE html>
<html>
<body>

<form action="post_enctype.php" method="post">
  İsim: <input type="text" name="ad"><br>
  <input type="submit" value="Gönder">
  <input type="submit" formenctype="multipart/form-data" value="Multipart/form-data Olarak Gönder">
</form>

</body>
</html>

Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

Devamı »

HTML5 Yeni Form Elementleri

HTML Dersleri
HTML5 Yeni Form Elementleri

Bu dersimizde HTML5'in yeni form elementleri olan <datalist>, <keygen> ve <output> elementlerini inceleyeceğiz.

<datalist> Elementi: Düzenlenebilir elementlere otomatik tamamlama (autocomplete) drop-down özelliği sağlamak için yani input elementlerine ön tanımlı değerler vermek için kullanılır.

<!DOCTYPE html>
<html>
<head>
         <title>DATALIST ORNEK</title>
</head>
 
<body>
<p>
     <input type="text" name="ARA" id="ARA" placeholder="GIRIS YAP" list="ARA_LIST" autocomplete="off">
     <datalist id="ARA_LIST">
               <option>JAVA</option>
               <option>C SHARP</option>
               <option>PASCAL</option>
               <option>COBOL</option>
     </datalist>
</p>
 
</body>

Bu özellik Safari ve IE tarafından v9 öncesinde desteklenmemektedir.

Örneğimizde <datalist> elementi bilgi girişinde kullanıcıya kolaylık sağlamak amacıyla bir drop down menu içinde bilgi giriş seçeneklerini listelemiştir. Ayrıca bir harf girilirse, menüdeki sadece o harf ile ilişkili seçenekler listelenecektir. <datalist> kullanmak için <datalist> elementinin id'si ile input etiketinin list özniteliği aynı değerlere sahip olmalıdır.

<keygen> Elementi: Formlar için bir çift anahtar oluşturur. Yani bir form içerisinde bir anahtar çifti (key-pair) jeneratörü belirtir. Daha basit açıklamak gerekirse kullanıcılara kimlik doğrulaması yapmak çin güvenli bir yol sağlar. Form gönderildiğinde 2 ayrı key üretilir, bir özel (private key) ve bir açık (public key). Özel key yerel olarak depolanırken, açık key sunucuya bir istemci sertifikası üretip kullanıcı doğrulaması yapması için gönderilir.

<!DOCTYPE html>
<html>
    <head>
        <title>Kullanıcı Kontrolü</title>
    </head>
    <body>
        <form action="keygen.php" method="post">
            Kullanici Adi: <input type="text" name="text">
            Kodlama: <keygen name="key">
            GONDER:<input type="submit" name="submit" >
        </form>
    </body>
</html>

Bu özellik Chrome, Safari, Firefox ve Opera tarafından desteklenmektedir.

<output> Elementi: Bir işlemin sonucunu temsil eder. Yani formdaki elemanların değerleri kullanılarak bir hesaplama yapılır ve bu hesaplamanın sonucu yine formda kullanılacak olursa output elemanı kullanılır.

<!DOCTYPE html>
<html>
<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

</body>
</html>

Bu özellik Chrome, Safari, Firefox ve Opera tarafından desteklenmektedir.

HTML5 (Input) Tipleri

HTML Dersleri
HTML5 (Input) Tipleri

HTML5 formlar için bir kaç yeni input tipine sahiptir. Bu yeni özellikler daha iyi kontrol ve doğrulama olanağı sağlar. HTML5 ile gelen bu yeni input tiplerini gelişmiş tarayıcılar destekler. Ancak desteklemeyen tarayıcılar bu yeni inputları normal text alanları gibi görmektedir. Şimdi HTML5 ile birlikte gelen input tiplerini birlikte inceleyelim..

color Input Tipi: Giriş alanının bir renk içermesi için color kullanılır.

<!DOCTYPE html>
<html>
<body>

<form action="#">
  Bir renk seçin: <input type="color" name="renksec"><br />
  <input type="submit">
</form>

</body>
</html>

Bu özellik Chrome ve Opera tarafından desteklenmektedir.

date Input Tipi: Tarih seçmemize yardımcı olur.

<!DOCTYPE html>
<html>
<body>

<form action="#">
  Doğum günü: <input type="date" name="dogumgunu">
  <input type="submit">
</form>

</body>
</html>

Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir.

datetime Input Tipi: Tarih ve Saat seçmemize yarar.

<!DOCTYPE html>
<html>
<body>

<form action="#">
  Tarih ve Saat: <input type="datetime" name="tarihsaat">
  <input type="submit">
</form>

</body>
</html>

Bu özellik Safari ve Opera tarafından desteklenmektedir.

datetime-local Input Tipi: Bir tarih ve saat seçmenizi sağlar (time zone olmadan).

<!DOCTYPE html>
<html>
<body>

<form action="#">
  Toplantı Günü (tarih ve saat): <input type="datetime-local" name="tdaytime">
  <input type="submit">
</form>

</body>
</html>

Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir.

email Input Tipi: Form giriş alanında bir e-posta adresi olması gerektiğinde kullanılır.

<!DOCTYPE html>
<html>
<body>

<form action="#">
  E-Posta: <input type="email" name="eposta">
  <input type="submit">
</form>

</body>
</html>

Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

month Input Tipi: Kullanıcının bir ay ve yıl seçmesine olanak verir.

<!DOCTYPE html>
<html>
<body>

<form action="#">
  Ay ve yıl: <input type="month" name="Ayyil">
  <input type="submit">
</form>

</body>
</html>

Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir.

number Input Tipi: Input alanı numerik bir değer gerektirdiği zaman kullanılır. Ayrıca hangi sayıların kabul edilebileceğini belirtebilirsiniz.

<!DOCTYPE html>
<html>
<body>

<form action="#">
  Miktar girin (10 ve 20 arasında): <input type="number" name="quantity" min="10" max="20">
  <input type="submit">
</form>

</body>
</html>

Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

search Input Tipi: Arama işleri için search tipi giriş kullanılır. (bir search alanı tipik bir metin (text) alanı gibi davranır)

<!DOCTYPE html>
<html>
<body>

<form action="#">
  Google'da ara: <input type="search" name="googlesearch"><br />
  <input type="submit">
</form>

</body>
</html>

Bu özellik Chrome ve Safari tarafından desteklenmektedir.

url Input Tipi: Bir giriş alanı bir URL bağlantısı içerecekse kullanılır. Bu özellik form gönderildiği sırada doğrulanır.

<!DOCTYPE html>
<html>
<body>

<form action="#">
  Ana sayfanızı ekleyin: <input type="url" name="anasayfa">
  <input type="submit">
</form>

</body>
</html>

Bu özellik Chrome, Firefox ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

range Input Tipi: Belirli bir aralıkta olan bir sayıyı seçmenizi sağlar Hangi sayıların kabul edilebileceğini belirtebilirsiniz:

<!DOCTYPE html>
<html>
<body>

<form action="#" method="get">
Puanlar: 0<input type="range" name="points" min="1" max="10">10
<input type="submit">
</form>

</body>
</html>

Bu özellik Chrome, Firefox ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

NOT: Kullanmış olduğunuz web tarayıcının HTML5 desteğini html5test.com adresine girerek test edebilirsiniz.

24 Temmuz 2015 Cuma

HTML5 Yeni Semantik Elementler

HTML Dersleri
HTML5 Yeni Semantik Elementler

HTML5'in özellikleri incelendiğinde, birçok yeni etiketin eklendiğinden bir önceki HTML5 Giriş dersinde kısaca bahsetmiştim. Bu dersimizde semantik (anlamsal) etiketlerden bahsedeceğim.

Peki nedir bu semantik ve semantik olmayan elementler. Semantik Elementler kısaca anlamı olan elementler. Anlamdan kasıt semantik bir element hem tarayıcıya hem de geliştiriciye kendisinin anlamını açıkça belirten element demektir. Daha basit açıklamak gerekirse <form>, <table>, ve <img> elementleri içeriği açıkça belirtirler yani birer semantik elementtirler. Semantik olmayan elementlere ise <div> ve <span> gibi içerik hakkında bir şey söylemeyen elementleri örnek verebiliriz.

Klasik HTML ve Semantik HTML5 Sayfa Yapıları

Günümüzde bir çok HTML sayfası resimdeki HTML sayfa yapısı standardında kodlanmıştır. HTML5 buna daha anlamlı bir çözüm buluyor. Bu hem Tarayıcı, hemde sitenizi indexleyen botlar için daha anlamlı bir yapı demek oluyor.

<header>: Sitenin en üst kısmını içine alır.
<nav>: Menüler içindir.
<section>: Genel bölümleme öğesidir.
<article>: Makale, deneme tarzı yazıları kapsar.

<aside>: Ana içerikten ayrı yazılan kısımdır.
<figure>: Çeşitli medya içeriği gruplarını belirler.
<figcaption>: <figure> elementinin başlığını belirler.
<footer>: Sitelerin en alt kısmını içine alır.
<details>: Detay bilgisi içerir.
<summary>: Detay bilgisi başlığını içerir.
<mark>: Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
<time>: Tarih, saat verilerini kapsar.

<header> Elementi: <header> elementi bir sayfa veya bir kısmın (section) başlık alanını belirtir. Sadece başlık yazılacaksa <h1> den <h6> ya kadar olan başlıklardan biri yeterlidir. Başlığı temsil eden başka öğelerde varsa <header> etiketi kullanılmalıdır. Bu etiket bir sayfada birden fazla kullanılabilir.

<header>
 <h1>Başlık Alanı</h1>
 <h2>Sitemizin Tanımı</h2>
</header>
 
<article>
  <header>
    <h1>Tarayıcılar</h1>
  </header>
  <p>Chrome, Internet Explorer, Firefox</p>
</article>

<nav> Elementi: Navigasyon bağlantıları olan sayfalar için kullanılır ama sayfadaki tüm linkler bu element içinde olmak zorunda değildir. Gezinti bağlantıları, menüler veya içerik listesi...

<nav>
<a href="/html/html5-giris.html/">HTML5 Giriş</a><br>
<a href="http://www.google.com/">GOOGLE</a><br>
</nav>

<section> Elementi: Genel bölümleme öğesidir. <section> elementi içinde içinde başlığı ve bir yazısı olan bir makale olabilir. Eğer section elementi bir başlık ile başlamamışsa yanlış kullanılmış demektir. İstisnası aside veya nav yerine kullanılan section lardır.

<section>
  <h1>Bölüm 1</h1>
  <p>Bu bölüm personel listesini içermektedir.</p>
</section>

<article> Elementi: Bir makale ya da yazı alanını temsil eder. Kullanılabileceği örnekler; Blog Sayfalarındaki yazılar, Haber'in özeti, yorumlar, makaleler vs. gibi.

<article>
  <header>
   <h2>Makale Başlık</h2>
   <p><time datetime="2015-07-24T22:29:26+00:00">24-07-2015</time></p>
  </header>
  <p>Makale yada özetin bulunduğu bölüm</p>
</article>

<aside> Elementi: <aside> elementi yan menü olarak kullanılır. <aside> onu kapsayan içerikle yüzeysel bir bağlantısı olan içeriğe denir.

<article>
  <h2>C Programlama Dersleri</h2>
  <p>C Programlama Dersleri Konunun Anlatımı</p>
    <aside>
      <!--Bu bölüm yazı ile doğrudan ilişkilidir ama yazının devamı değildir -->
      <h3>Benzer Dersler</h3>
      <ul>
        <li>C Programlama Değişkenler</li>
        <li>C Programlama Veri Tipleri</li>
      </ul>
    </aside>
</article>
<aside>
  <!--Bu bölüm yazı ile doğrudan ilişkili değildir. Sitenin kendisiyle ilişkisi vardır. -->
  <h2>Kategoriler</h2>
    <ul>
      <li><a href="/cprogramlama/">C Programlama</a></li>
      <li><a href="/sql/">SQL</a></li>
      <li><a href="/html/">HTML</a></li>
      <li><a href="/php/">PHP</a></li>
    </ul>
</aside>

<figure> Elementi: Figure elementi kod tarayıcı tarafından yorumlandığında, ekranda görsel olarak bu koda ait herhangi bir nesne göremezsiniz yani bir UI'e (User Interface / Kullanıcı Arayüzü) sahip değildir. Figure resim (img), çizim (svg) gibi elemanları belirtmek için kullanılan etikettir. Arama Motoru Örümcekleri tarafından kaynak kodun okunmasını kolaylaştırır.

<figure>  
     <img src="resim1.jpg" alt="Resim Açıklaması"/>  
     <img src="resim2.jpg" alt="Resim Açıklaması"/>  
     <img src="resim3.jpg" alt="Resim Açıklaması"/>  
</figure>

<figcaption> Elementi: <figure> etiketinin başlığını tanımlamamızı sağlar, figure kullanılan bir kodda figcaption kullanmak zorunda değilsiniz, w3c açısından böyle bir mecburiyet yok.

<figure>  
    <img src="resim1.jpg" alt="Resim Açıklaması"/>  
    <img src="resim2.jpg" alt="Resim Açıklaması"/>  
    <img src="resim3.jpg" alt="Resim Açıklaması"/>  
    <figcaption>Buraya resimlerle ilgili açıklama girilir.</figcaption>  
</figure>

<footer> Elementi: Bir sayfa veya bir kısım için alt bilgi belirten bölümdür. <footer> elementi genelde sitenin / yazının yazarını, telif hakkını, iletişim bilgileri vb. içerir. Bir sayfada bir kezden fazla kullanılabilir.

<footer>
  <p>Yazan: İbrahim BAYRAKTAR</p>
  <p><time pubdate datetime="24-07-2015"></time></p>
</footer>

<details> Elementi: Sayfa içindeki uzun yazılarımızı kategorize etmek için kullanırız. <summary> elementi ile başlık bilgisi girilir ve details ile içerik belirlenir.

<details>
  <summary>Copyright 2013-2015.</summary>
  <p> - by İbrahim BAYRAKTAR. Tüm Hakları Saklıdır.</p>
  <p>Bu web sitesindeki tüm içerik ve grafikler .....lisansı ile korunmaktadır.</p>
</details>

<mark> Elementi: Bazen cümle içindeki bir kelimeyi ya da sözcük öbeğini fosforlu kalemle çizilmiş gibi önplana çıkartmak isteyebiliriz. Bunun için <mark> etiketini kullanabiliriz.

<p>Bu cümledeki vurgulanmış kelime <mark>cümle</mark>dir.</p>

<time> Elementi: Gregoryan takvimine göre saat veya tarih tanımlar. <time> etiketinin tarayıcılar üzerinde görsel olarak bir etkisi yoktur.

<p>Her sabah <time>07:00</time> gibi kalkarım.
<p>Özel bir gün <time datetime="2016-06-21">Babalar Günü</time>'ne az bir zaman kaldı.</p>

HTML5 Elementler ile ilgili Faydalı Linkler

HTML Elements and Attributes

diveintohtml5.info/semantics.html

HTML5 - New Tags (Elements)

HTML5 Element Index

HTML5 Giriş

HTML Dersleri
HTML5 Giriş

HTML5, World Wide Web Consortium W3C (W3C Web'in standartlarını belirleyen ve geliştiren uluslararası bir topluluk.) ile Web Hypertext Application Technology Working Group (WHATWG) işbirliğidir.

HTML5, internet'in çekirdek teknolojilerinden HTML işaretleme standardının beşinci sürümüdür. Internet Explorer, Google Chrome, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından desteklenmektedir. HTML5, HTML dili için yeni stratejiler ve hedefler ortaya koyan ve farklı web tarayıcıları için standardizasyon sağlayan yeni nesi bir sürüm olarak karşımıza çıkmaktadır. HTML geliştikçe gelişti ve yıllar geçtikçe CSS'in yeni özellikleri ile birlikte dördüncü sürüme kadar geldi. HTML4 her ne kadar yeterli gibi gözükse de CSS ile yazılan fazladan kodlar hatalara sebep oluyordu ve bunu önlemek için HTML5 geliştirildi. HMTL5 ile HTML dilinin işlevselliği, sunum ve programlama gücü artmıştır. Sadeleştirilmiş, düzeltilmiş HTML4 ve XHTML dillerinin son sürümüdür.

HTML5 ile gelen esnek yapı kod hatalarını en aza indiriyor hatta görmezden geliyordu. XHTML'deki küçük/ büyük harf duyarlılığı kalkmıştı. Bununla birlikte çok fazla kod sorunu kısmen çözüldü. CSS ile olan uyum sorunu düzeltildi ve beraberinde getirdiği yeni etiketler ile hem içerik ve görsele hem de arama motorlarına büyük kolaylıklar sağladı. HTML5 hala geliştirilme aşamasında olsa da bugün birçok web tasarımcısı artık bu yeni sürümü tercih etmektedir. Kısmen daha az kod yazma olanağı verse de HTML5 asıl gücünü PHP, ASP, ASP.net gibi web programlama dillerinden, JavaScript betik dilinden ve CSS'ten almaktadır.

HTML5 Neler Sunuyor?

Yeni Elementler
Yeni Özellikler (Attributes)
Full CSS3 Desteği
Video ve Ses
2D/3D Grafikler
Yerel Depolama
Yerel SQL Veritabanı
Web Uygulamaları

HTML5'in Temel Yapısı

HTML5 <!DOCTYPE> Tanımlaması: HTML dosyamızın HTML5 özelliklerinde olacağını tanımlamak için şu etiket kullanılır.

<!DOCTYPE html>

<!DOCTYPE> Nedir?

DOCTYPE'ın açılımı Document Type'dır yani Türkçe söyleyecek olursak Belge Tipi anlamına gelmektedir. Sayfa başında DOCTYPE kullanarak tarayıcıya o sayfanın hangi tipte bir belge olduğunu söylemiş oluyoruz.

<!DOCTYPE> Neden Gereklidir?

HTML'in yeni yeni yaygınlaşmaya başladığı zamanlarda belli bir standart yoktu. O yüzden tarayıcılar kendi standartlarını oluşturmaya başlamıştı. W3C kuruluşu kurulduktan sonra web dünyasına belli standartlar getirildi. DOCTYPE ile de belgemizin hangi standartlarda olduğunu tarayıcıya bildiriyoruz ki belgemizi ona göre işlesin.

Temel özeliklere sahip bir HTML5 dosyası örneği:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Başlık</title>
</head>

<body>
İçerik......
</body>

</html>

Bir HTML5 belgesi her zaman <!DOCTYPE> etiketi ile başlar ve ardından diğer etiketler tanımlanır. HTML5 ile belge türünü ayarlamak için kullanılan <!DOCTYPE> etiketi eski sürümlerdeki tanımlama karmaşasını kaldırmış ve geriye doğru bir uyumluluk sağlamıştır.

Şimdi önceki HTML sürümlerinde kullanılan <!DOCTYPE> tanımlamalarına bakalım ve HTML5 ile nasıl kısa ve kullanışlı bir hale geldiğini görelim.

XHTML 1.0 Transitional <!DOCTYPE> Tanımlaması

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Strict <!DOCTYPE> Tanımlaması

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 4.01 Transitional <!DOCTYPE> Tanımlaması

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5 <!DOCTYPE> Tanımlaması

<!DOCTYPE html>

Gördüğünüz gibi HTML5 öncesi <!DOCTYPE> tanımlamaları oldukça uzun. Belge içerisinde <!DOCTYPE> tanımlası yapmazsak tarayıcı sayfayı Quirks Modda çalıştıracaktır. Bir tarayıcı sayfayı Quirks Modda çalıştırır ise W3C standarlarına bağlı kalınmaz. Yani sayfa görünümü ve elemanların yerleşimi kullanılan tarayıcıya bağlı değişiklik gösterebilir.

<!DOCTYPE> tanımlası bu noktada çok önemli. Tanımlama yapılmış ise tarayıcın sayfanın Standart Modda değerlendirilmesini ve göstermesini sağlamış oluyoruz. Bu mod HTML4 bildirimin no quirks mode olarak adlandırılmıştır.

Kısaca <!DOCTYPE> etiketi ve farkını açıkladıktan sonra temel HTML5 kavramlarına devam edelim.

Character Set Bildirimi ve UTF-8

Temel örneğimizde meta etiketini head etiketleri arasında görüyorsunuz. Bu etiket sayfa hakkında tarayıcılara ve arama motorlarına bir takım bilgiler sunmaktadır. Bu etiketin charset özelliği ise sayfada kullanılan karakter kümesini tanımlamamızı sağlayan parametredir.

<meta charset="UTF-8">

Eski HTML sürümlerinde charset kullanımı yine daha zor ve uzundu, Örneğin:

HTML<META http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML5'de artık desteklenmeyen HTML elementleri: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>

Yeni Gelen Elementleri: <canvas>, <audio>, <video>, <progress>, <caption>, <header>, <nav>, <footer>, <article>, <aside>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time>

Bu elementlerin bir çoğunun işlevlerini az çok isimlerinden anlamışsınızdır. sonraki derslerde bu elementleri detaylı bir şekilde inceleyeceğiz.

HMTL5 Faydalı Linkler

HTML5 Reference Quide
HTML5 Reference Poster
HTML5 Elementlerinin Periyodik Tablosu

23 Temmuz 2015 Perşembe

HTML Meta Etiketleri (Meta Tags)

HTML Dersleri
HTML Meta Etiketleri (Meta Tags)

Sayfanın HEAD alanında kullanılan meta etiketleri (tags) tarayıcılara, arama motorlarına, robotlara, link analiz vb. programların hepsine sayfa hakkında ihtiyaç duydukları bilgileri sağlar. Bu bilgiler, meta etiketinin name özelliğinin ismini, content özelliğinin değerini oluşturduğu isim-değer çifti olarak sağlanır. Kısaca bu etiketler bir web sayfasında bilgi vermek ve browserları yönlendirmek amacıyla kullanılır.

Meta Etiketlerinin SEO Etkisi
Meta etiketleri eski dönemlerde SEO (Arama Motoru Optimizasyonu) için çok büyük önem taşımaktaydı. Keywords ve description meta etiketlerine yazılan bir kelimede sitenin sayfa arama motorundaki yerini alabiliyordu. Fakat arama motorlarının zamanla gelişmesinden dolayı artık meta etiketleri aracılığı ile arama motorlarında bir yerlere gelebilmek durumu tarih oldu. Bu durum özellikle Google açısından böyledir.

Meta etiketleri içerdiği kelimelerde üst sıralara taşıma etkisini yitirmiştir fakat bir web sayfası için her zaman önemli bir öğe olma niteliğini yitirmeyecektir. Meta etiketlerini kullanarak üst sıralara çıkmak beklenemez fakat meta etiketleri olmayan bir sayfa eksiktir.

NOT: Tüm meta etiketleri <head> .. </head> kodları arasına yazılır. XHTML standartlarına göre, meta etiketleri > ile değil /> ile kapatılmalıdır.

Temel Meta Etiketleri ve Kullanımları (Bunların dışında da birçok meta etiketi mevcuttur.)

title: Aslında bir Meta Etiketi değildir. Fakat meta etiketi şeklinde kullanımı vardır ve aynı kategoridedir. Sayfanın başlığını verir ve Google açısından en önemli etikettir. Buraya yazılanlar tarayıcının üst bilgi kısmında, arama motorunda sayfa listelenirken ve sayfanız sık kullanılanlar gibi bir yere kaydolurken gözükecek olan kısımdır. Sayfa içeriği ile ilgili en uygun başlık yazılmalıdır. HEAD etiketi içerisine yazılır.

<title>İbrahim Bayraktars' Blog</title>

abstract: Tüm site hakkında bilgi veren cümledir. Sayfanın kısa özetinin belirtilmesini sağlar.

<meta name="Abstract" content="Site özeti" />

author: Site yapımcısının adı, iletişim bilgilerinin bulunduğu etikettir.

<meta name="author" content="İbrahim B., leucjo@gmail.com" />

copyright: Sitenin telif hakları konusunda bilgi veren etikettir.

<meta name="copyright" content="(c) 2013 İbrahim B. (ibrahimbayraktar.net) Tüm Hakları Saklıdır." />

description: Sayfa ile ilgili açıklama girilen kısımdır. Olması çok önemlidir. Çoğu zaman arama motorları açıklama kısımlarında sizin buraya yazdığınız yazıyı görüntülerler. Mümkün olduğu kadar kısa ve içerikle ilgili bilgi veren bir yazı girilmelidir.

<meta name="description" content="Sitenizin içeriği hakkında geniş bilgi" />

expires: Sitenin içeriğinin hangi tarihte zaman aşımına uğradğını arama motorlarına ileten etiket.Son geçerli olduğu tarihi GMT formatında belirtir. Sayfayı daimi olarak geçersiz kılmak için content özelliğine '0' değeri atanmalıdır.

<meta name="expires" content="Thu, 23 July 2015 20:55:05 GMT" />

keywords: Arama motorlarının temel aldığı, sitenizin içeriğini oluşturan kelimelerin bulunduğu etiket. Fazla anahtar kelimenin olması zarar getirebilir. Birkaç anahtar kelime girilmesi yeterli olacaktır.

<meta name="keywords" content="kelime1 kelime2 kelime3 kelime4 kelime5" />

content-language: Sayfanın hangi dilde yayın yaptığının, sitenin varsayılan dilini belirten etiket bilgisini verir.

<meta name="content-language" content="tr" />

content-type: Güncel sayfanın içerik tipini ve karakter setini belirtir. Aşağıdaki örnek, sayfa içerik tipinin "text/html" ve karakter setinin "UTF-8" olarak belirtilmesini gösterir.

<meta name="content-type" content="text/html charset=utf-8" />
<meta http-equiv="content-type" content="text/html charset=utf-8" />

revisit-After Tag: Arama motorlarına, sitenin içeriğinin kaç günde bir güncellendiğini ileten etiket.

<meta name="revisit-after" content="7 days" />

refresh: Belirtilen süre sonunda belirtilen bir URL adresinin yüklenmesini sağlar. URL adresi belirtilmezse güncel sayfa adresi tekrar yüklenir. Aşağıdaki örnek, her 10 saniyede bir güncel sayfanın tekrar yüklenmesini gösterir.

<meta name="refresh" content="10" />

Aşağıdaki örnek, sayfa yüklendikten 30 saniye sonra "http://www.ibrahimbayraktar.net" adresinin yüklenmesini gösterir.

<meta name="refresh" content="30;http://www.ibrahimbayraktar.net" />

redirect: Sayfanın, belli bir zaman sonra başka bir sayfaya yönlenmesini sağlar. Örnekte, sayfa 10 saniye sonra google'a yönlenir.

<meta http-equiv="refresh" content="10;url=http://www.google.com.tr" />

robots: Arama motoru robotlarının, site içerisindeki linkleri takip edip etmeyeceklerini gösteren etikettir. Sayfanın arama motorlarında listelenip listelenmemesini bu tag ile belirleyebiliyoruz. Bu tagın alternatifi olarak robots.txt dosyası da bu işlevi görebiliyor.

Sayfanın indexlenmesini istiyorsak

<meta name="robots" content="index, follow" />

Sayfanın indexlenmesini istemiyorsak

<meta name="robots" content="noindex,nofollow" />

content özelliğinin alabileceği diğer değerler:

archive: Sayfanın ön izleme için ekran görüntüsünün oluşturulmasını bildirir.
noarchive: Sayfanın ön izleme için ekran görüntüsünün oluşturulmasını engeller. Daha önce oluşturulduysa silinmesini sağlar. (Önizlemenin silinmesi arama motorlarına göre farklılık gösterebilir.)
all: Tüm olumlu bildirimleri uygular. Arama motorları index, follow ve archive bildirimlerinden farklı bildirimleri de kabul ediyor olabilir. Bu yüzden arama motorunun yardım/destek sayfasına bakmalısınız.
none: Sayfanın gözardı edilmesini bildirir.
noodp: Eğer sayfa DMOZ dizininde kayıtlı ise arama sonuçlarında DMOZ dizinindeki açıklamanın yerine sayfanın kendi açıklamasının kullanılmasını sağlar.

HTML Meta Etiketleri Faydalı Linkler:
www.wordstream.com/meta-tags
Google'ın anladığı meta etiketler
computerhope.com/jargon/m/metatags.htm
List of Usable HTML Meta and Link Tags
complete-list-of-html-meta-tags

HTML Çerçeveler (Frames) ve iFrames

HTML Dersleri
HTML Çerçeveler (Frames) ve iFrames

Frame, HTML'de birden fazla belgeye tek bir sayfada görüntüleme için açılan iç pencerelerdir. Bu şekilde sağda farklı bir pencere ve içerik, solda farklı bir pencere ve içerik olacaktır. Genellikle bir pencere linklerin bulunduğu alan, diğer pencere ise asıl içeriğin bulunacağı alan olarak kullanılır. Klasik yapıda Menü öğelerinin bulunduğu bir pencere ve sayfa içeriğinin bulunduğu bir pencere olarak düşünebilirsiniz. Arama Motoru optimizasyonu için olumsuz etkileri olduğu için genellikle kullanılmaz. Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz.

Özetle Frames kullanımı, sayfamızı parçalara ayırmamızı sağlar. Böylece sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir. Bunun anlamı ise kullanılacak çerçeve miktarınca ek Html sayfası oluşturmak demektir.

Avantajlarının yanı sıra Web geliştiricilerin birden fazla HTML dökümanını takip etmesinin zorluğu ve istenilen sayfanın yazıcıya gönderilmesindeki problemler gibi dezavantajlarıda mevcuttur.

Framaset Etiketleri ve Kullanımı

Çerçeve oluşturmada kullanılan etiket framesettir. cols parametresi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını, rows parametresi ise çerçevelerin alt alta satırlar şeklinde görüntüleneceğini belirtmekte kullanılır. Yani <frameset> pencerenin hangi biçimde çerçevelere ayrılacağını belirlerken her frameset satır rows veya sütun cols olarak belirlenir.

Frame Etiketi: <frame> etiketi, her bir çerçevede hangi HTML dökümanının görüntüleneceğini belirtir.

<frameset cols="35%,65%">
   <frame src="frameA.html">
   <frame src="frameB.html">
</frameset>

Örneğimizde 2 sütun çerçeveli bir döküman bulunmaktadır. İlk çerçeve için tarayıcı penceresinin genişliğinin %35'i ayrılmıştır. İkincisine ise %65'i ayrılmıştır. "frameA.html" birinci sütuna, "frameB.html" ise ikinci sütuna yerleştirilmiştir. Frameset sütun değerlerimizi yüzdelik dilimler yerine piksel olarakta belirleyebiliriz. Örneğin: (cols="300,400") verebilir ve geri kalanının da kendi kendini 100 değerine tamamlamasını sağlayabiliriz: (cols="35%,*").

NOT: Frameset etiketi html dosyasının </head>...<body> etiketleri arasında kullanılmaktadır. <body></body> etiketlerini <frameset></frameset> etiketleri ile beraber kullanamazsınız!

Örneğimizde sayfa iki sütuna ayrımıştır. Eğer sayfa iki satıra ayrılmak istenseydi, yukarıdaki <frameset cols="*,*"> etiketi, <frameset rows="*,*">şeklinde yazılmalıydı. Eğer sayfayı üç sütuna ayırmak isteseydik bu seferde <frameset cols="*,*,*"> şeklinde yazılmalıydı.

Devamı »

8 Aralık 2013 Pazar

HTML Form Elemanları

HTML Dersleri
HTML Form Elemanları

HTML Formlarını en kısa şekilde açıklamak gerekirse; kullanıcının klavye ile girdiği bilgileri işlemek için kullanılır.

Kullanıcı form içeriğine bilgilerini girip gönder butonuna tıkladığında bilgiler sunucu taraflı çalışan bir sayfaya gönderilir ve bu sayfada işlenir. Sunucu taraflı çalışan sayfa form elemanları vasıtasıyla aldığı bilgilerle çeşitli işlemler yapabilir ve kullanıcıya mesaj dönebilir.

Form elemanları ile çalışabilmemiz için öncelikle <form> etiketini tanıyalım.

<form>: Form kontrollerini oluşturan etiketleri içine alarak kullanıcının veri girişi yapmasını sağlayan yapıyı sunmaktadır. Bu yapı içinde klavye veya fare ile kontrol edilebilen metin giriş kutuları, listeler, seçim kutuları, düğmeler ve diğer kontroller eklenebilir. <form> etiketi içinde sunucuya veri gönderecek bütün etiketlerin/elementlerin name özellikleri tanımlanmalıdır.

Form elemanları <form>..</form> etiketleri arasına yazılır.

HTML Form Kullanımı

<form>
  <input>
</form>

HTML Formları - <input> (giriş) Elementi: En çok kullanılan form etiketidir. <input> elementi kullanıcı bilgilerini seçmek için kullanılır. Kapatılmaz. <input> elementi içerisinde kullanılan type ifadesiyle girdi türü belirlenir.

<input> Kullanım Örneği ve Metin Alanları (textbox)

<form>
Adınız: 
<input type="text" name="isim"> 
Soyadınız: 
<input type="text" name="soyad">
</form>

Örnek Gösterimi

Adınız: Soyadınız:

Örnekte kullandığımız <INPUT type=text> etiketi, tek satırlık metin giriş kontrolü (textbox) oluşturulmasını sağlar. Metin alanları (textbox) bir kullanıcının metin içine girebileceği bir tek satırlık giriş alanı tanımlar. Bir çok tarayıcı metin alanları için varsayılan olarak 20 karakterlik alan bırakmaktadır. "size=" parametresi ile gösterilecek karakter miktarına göre genişliğini belirtebilirsiniz.

Seçenek Butonları (Radio Buttons)

Kullanıcının bir çok seçenek içinden sadece bir tanesini seçebilmesini istediğiniz zaman Seçenek Butonları (Radio Buttons) kullanılır.

<input> Kullanım Örneği ve Seçenek Butonları (Radio Buttons)

<form>
<input type="radio" name="Renk" value="siyah"> Siyah
<input type="radio" name="Renk" value="beyaz"> Beyaz
</form>

<input type = "checkbox"> Sunulan seçeneklerden istenildiği kadar seçilmesini sağlar.

<input> Kullanım Örneği ve Kontrol Kutucukları (Checkboxes)

<form>
Bir bisikletim var:
<input type="checkbox" name="Tasit" value="Bisiklet">
<br>
Bir arabam var: 
<input type="checkbox" name="Tasit" value="Araba">
<br>
Bir kamyonum var: 
<input type="checkbox" name="Tasit" value="Kamyon">
</form>

<form>
Şifrenizi Giriniz:
<input type="password" name="Sifre">
</form>

Örnek Gösterimi

Formlarda "Action" Parametresi ve Gönder (Submit) Butonu
<input type=submit> etiketi, kullanıcının formu göndermesini sağlayan bir düğme (button) kontrolü oluşturulmasını sağlar. Action parametresinde ise bilgilerin hangi dosyaya gönderileceği belirtilir. Bilgilerin gönderildiği dosya, genellikle gelen bilgilerle ilgili ne tür işlem yapılacağı hakkında bilgiler içerir.

<input> Kullanım Örneği ve Formlarda "Action" Parametresi ve Gönder (Submit) Buton

<form name="input" action="fomrornek/action_submit.php"
method="get" target="_blank">
Kullanıcı Adı: 
<input type="text" name="kullanici">
<input type="submit" value="Gönder">
</form>

Kullanıcı, submit butonuna tıkladığında veriler, method özelliği ile belirtilen yöntemle bu adrese gönderilir. form.method özelliği, form verilerinin sunucuya gönderilme yöntemini belirtir. HTML form verileri "get" "post" olmak üzere iki şekilde sunucuya gönderilebilir. "get" yönteminde form verileri isim-değer çifti olarak action özelliği ile belirtilen adrese sorgu olarak eklenip sunucuya gönderilir. "post" yönteminde ise veriler, HTTP isteği (HTTP Request) içinde bir veri paketi olarak gönderilir. "post" yöntemi ile sunucuya gönderilebilecek veri miktarı hakkında teorik olarak bir limit yoktur.

Form Etiketleri

Form Parametreleri

Örnek E-posta Gönderim Formu

<html>
<body>
<b>Örnek E-posta Gönderim Formu</b>
<form action="MAILTO:leucjo@gmail.com" method="post" enctype="text/plain">
Adınız:<br>
<input type="text" name="ad" value="İsminizi Giriniz"><br>
E-Posta:<br>
<input type="text" name="posta" value="E-Posta Adresiniz"><br>
Mesaj:<br>
<input type="text" name="mesaj" value="Mesajınız" size="50"><br><br>
<input type="submit" value="Gönder">
<input type="reset" value="Temizle">
</form>
</body>
</html>

Örnek Gösterimi

HTML Bloklar

HTML Dersleri
HTML Bloklar

HTML etiketleri, sayfadaki yerleşimlerine göre satır içi ve blok seviyesi olmak üzere 2 gruba ayrılırlar. HTML sayfalarımızı kodlarken iki seviye arasındaki farkları bilmek faydalı olacaktır.

Blok (blocks) Seviyesi Elementler : Bu gruptaki HTML elementleri eklendikleri zaman yeni bir satıra yerleşirler ve bulundukları yerin tamamı kadar genişliğe sahip olurlar. Blok seviyesi elemanlar, satır seviyesi elemanların aksine %100 genişliğe sahip olurlar. Örnek: <h1>, <p>, <ul>, <table>

Satır İçi (inline) Elementler : Bu elementler blok seviyesi gibi yeni bir satır başlatmazlar. Satır içi elemanlardan sonra gelenler, yeni bir satır yerine bu elemanın yanında görüntülenirler. Örneğin linkler (a) , resimler (img) ve metin biçimlendirme etiketlerinden bazıları (strong, b, td ve em) bu gruba girerler. Bu elemanlar kendisini oluşturan içerik kadar bir alan kaplarlar.

<div> elementi : İsteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir blok oluşturulmasını sağlar. <div> bir blok oluşturduğu için bir metnin içinde kullanılması durumunda ilgili metni kesecektir <div> elementi ilk anda herhangi bir görsel özelliğe sahip olmadığı için style veya css özelliklerinin ayrıca belirtilmesi gerekir.

HTML Kullanımı

<p>Bu paragrafta DIV elementi içinde <div>HTML Satırlar ve Bloklar</div> kelimesi kullanılmıştır.</p>

HTML Görünümü
Bu paragrafta DIV elementi içinde

HTML Satırlar ve Bloklar

kelimesi kullanılmıştır.

<span> elementi : İsteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir katman oluşturulmasını sağlayan elementdir. <span>, <div> elementinden farklı olarak bir satır içi (inline) element olduğu için metnin içinde kullanılması durumunda ilgili metni kesmez .<span> elementi ilk anda herhangi bir görsel özelliğe sahip olmadığı için style veya css özelliklerinin ayrıca belirtilmesi gerekir. CSS ile birlikte kullanıldığında, <span> metin parçalarına stil ayarlamak için kullanılabilir.

HTML Kullanımı

<p>HTML Satırlar ve Bloklar= <span style="font-style:italic; color:navy;">HTML Satırlar ve Bloklar</span></p>

HTML Görünümü

HTML Satırlar ve Bloklar= HTML Satırlar ve Bloklar

HTML elementlerinin satır seviyesi mi yoksa blok seviyesi mi oldukları display adındaki css özelliği ile kontrol edilebilir. Satır seviyesi elemanların display özelliği varsayılan olarak inline, blok seviyesi elemanlarının display özelliği de varsayılan olarak block değerine sahiptir.

3 Aralık 2013 Salı

HTML Listeler

HTML Dersleri
HTML Listelerle Çalışmak

Bir HTML belgesinde bir Sırasız liste nasıl oluşturulur ?

<ul> ve <li> etiketleri : Her liste elemanının çember (circle), disk (disc) veya kare (square) tipi madde imi ile gösterildiği sırasız listeler oluşturmamızı sağlar. <ul>'in açılımı "Unordered List" 'tir. "Unordered List" Sırasız Liste anlamına gelmektedir. HTML'de metinlerimizi veya cümlelerimizi maddeler halinde yazmak için <ul> ve <li> etiketlerini kullanırız. Her liste <ul> etiketi ile her liste öğeside <li> etiketi ile başlar. Liste öğeleri genellikle küçük siyah daireler ile işaretlenmiştir.

Sırasız Liste (Unordered List) HTML Örneği :

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>
            Sayfamızın Başlığı Buraya Yazılacak
        </title>
    </head>
    <body>

        <p> Sırasız Liste Örneği : Kırtasiye İhtiyaçları</p>
        
        <ul>
            <li> Kurşun Kalem </li>
            <li> Silgi </li>
            <li> Kalemtraş</li>
        </ul>
        
    </body>
</html>

Devamı »

27 Kasım 2013 Çarşamba

HTML Renkler ve Arkaplan Kullanımı

HTML Dersleri
HTML Renkler ve Arkaplan Kullanımı

Web Renkleri
Web renkleri, web sayfası tasarımında kullanılan ve izlenen sayfanın görünümünü düzenlemeye yarayan renklerdir.Web sayfası yazarlarının düzenledikleri web dosyalarını renklendirmek için kullanabilecekleri çeşitli yöntemler mevcuttur. Renkler RGB renk sisteminde kullanılan üçlü hexadecimal kod ile belirlenebileceği gibi, standart ingilizce adları kullanılarak da belirlenebilir.

Üçlü Hexadecimal Renkler
İngilizce, 16'lık veya RGB değerlerinde belirtilmelidir. Renk değerlerini oluşturmak için online ya da offline çalışan bir renk seçim aracı veya grafik yazılımı tercih edilebilir. (Online Color Picker, Gimp, Photoshop)

Hex üçlüsü ifadesi altı haneli, üç-baytlık hexadecimal bir numaradır. HTML, CSS, SVG ve diğer kodlarda renkleri bildirmek için kullanılır. Baytlar, kullanılacak olan rengin kırmızı, yeşil ve mavi bileşenlerini örnekler. Her bayt heksadesimal gösterim kullanılıyorsa 00 ile FF arasında, desimal gösterim kullanılıyorsa 0 ile 255 arasında bir sayı ile belirtilir. Heksadesimal üçlü web renklerinde aşağıdaki sırayla birleştirilerek kullanılır:

    Bayt 1: kırmızı değer
    Bayt 2: yeşil değer
    Bayt 3: mavi değer

Örneğin, renk değerleri kırmızı=36, yeşil=104, ve mavi=160 olan bir renk ele alalım. Bu renkteki 36, 104 ve 160 desimal sayıları sırasıyla 24, 68 ve A0 heksadesimal sayılarına denk gelmektedir. Elde ettiğimiz heksadesimal renk değerlerini yan yana yazacak olursak, 2468A0 hex üçlüsünü elde etmiş oluruz.

Bu sistem kullanarak oluşturulabilen renk sayısı: 256 x 256 x 256 = 16,777,216

HTML Arka Plan Renk ve Resim Kullanımı

<body> etiketi arka plan belirlemek için iki tane parametre bulundurur. Bunlar "bgcolor" ve "background" parametreleridir. bgcolor ile arka plan rengi, background ile de bir arka plan resimi belirtebilirsiniz.

Sayfa Arka Plan Rengi belirleme için html örneği:

<html>
<head>
<title>Sayfa Arkaplanı Renklendirme Örneği</title>
</head>

<body bgcolor="teal">
<h3>Sayfa Arkaplanı Renklendirme Örneği</h3>
</body>
</html>

Örnek Gösterimi

Örneğimizde <body> etiketine arkaplan rengi belirlemek için "bgcolor" parametresini kullandık ve parametre değeri olarak web renklerinden "teal" seçtik. ( Teal, genelde Teal mavisi olarak bilinir. Teal rengi hafif koyu yeşilimsi mavi bir renktir. Windows 98 kullananlar hatırlayacaklardır bu arkaplan rengini ) Örneğimizde web rengi olarak teal yazmak yerine teal renginin hex karşılığı olan #008080 koduda yazsaydık yine aynı rengi arka plan olarak elde edecektik. (<body bgcolor="#808080">) Yine aynı şekilde hex veya web rengini belirtmeden istediğimiz rengin RGB kodlarınıda yazsak istediğimiz rengi elde edebileğiz. (<body bgcolor="rgb(0,128,128)">

Sayfa Arkaplan Resmi belirleme için html örneği:

<html>
<head>
<title>Resim olarak Arkaplan ekleme Örneği</title>
</head>
<body background="../resimler/bg.gif">
<h3>Resim olarak Arkaplan ekleme Örneği</h3>
<h3>bg.gif dosyası Sayfa Arkaplan Resmi olarak eklendi.</h3>
</body>
</html>

Örnek Gösterimi

Arkaplana resim ekleme işleminde dikkat edilmesi gereken nokta eklenecek image dosyasına ait yolu doğru bir şekilde belirtmektir. Web tasarımına yeni başlayanlar, genelde kullandığı html dökümanı ile kullandığı resimleri aynı klasör içinde barındırırlar. Html dökümanı ile bu html dökümanına eklenecek resim aynı klasörde ise, url olarak direkt resmin adını ve uzantısını yazmak yeterlidir.

Web sayfalarınızı hazırlarken image dosyalarının farklı bir klasörde bulunması ileride oluşacak karmaşayıda önlemek için yararlı bir yöntemdir. Resmin yolunu belirlerken, adres yolunun tamamı yazılabilir. (Örneğin; C:\HTML\Dersler\resimler\bg.gif) Bu yol tanımlaması, html dökümanlarının bulunduğu bilgisayarda sorunsuz bir şekilde çalışır, fakat; başka bir bilgisayarda yapılan tasarım bir server'a gönderildiğinde, belirtilen bu yol bulunamayacağı için resimlerin yerinde boşluk ve kırmızı çarpı işaretleri görülür. Dolayısıyla resimleriniz görüntülenemez. Bu sorunları yaşamamak için web tasarımında göreceli adresleme tekniği kullanlır.

Göreceli Adresleme Tekniği ile Image yolunu belirtmek

Göreceli adres yolu belirtmede, adresler dökümanların konumuna göre belirtilir. Bu nedenle, değişik ortamlarda doğru şekilde yorumlanır.

Aynı dizin içinde resimler klasöründeki bg.gif isimli resmi html dökümanına eklemek için; resimler/bg.gif yazılır.

Dersler isimli klasörümüz içindeki, html dökümanımıza Dersler klasörü ile aynı dizindeki bayraktar.jpg isimli resmi eklemek istersek ../bayraktar.jpg yazılır. Burada "../" ile bir üst dizine çıkılır yani içinde bulunduğum klasörden dışarı çık anlamındadır.

Bu şekilde dökümanların birbirlerine göre durumlarının kullanılması ile yapılan adres belirtmeye göreceli adres belirtme denir. Arkaplan ayarlamalarında bgcolor ve background parametreleri aynı anda kullanılabilir. Sayfanın açılması sırasında resmin yüklenmesi uzun zaman alabilir. Bu sürede arkaplana verilen renk görüntülenir. Resim yüklendiği zaman, arkaplanda resim görüntüleneceği için rengin bir önemi kalmaz. Kullanım şekli aşağıdaki gibidir.

<body bgcolor="teal" background="../Dersler/bg.gif">..........</body>

HTML Renkler Faydalı Linkler

http://html-color-codes.info/

http://www.color-hex.com/

http://www.colorhexa.com/

26 Kasım 2013 Salı

HTML Table

HTML Dersleri
HTML Tablolarla Çalışmak

<table> : İçerisine satır, sütun ve çok boyutlu görsel yapılar eklenebilen ayrıca veri sunumu yapılabilen tablo oluşturulmasını sağlar. <table> etiketi içinde CAPTION, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD ve TR etiketleriy kullanılabilir. Diğer HTML kodları bu etiketlerin içine eklenir. <table> etiketi içinde TH veya TD ile oluşturulacak sütun miktarı olmamasına karşın Internet Explorer 8 en fazla 1000 sütun göstermekle sınırlandırılmıştır.

Tablolar <table> etiketi ile tanımlanır. Bir tablonun <tr> etiketi ile satırları belirlenir ve her satır <td> etiketi ile veri hücrelerine ayrılır. <td> (table data yani tablo veri) anlamına gelir ve bir veriyi hücrenin içeriğinde tutar. Bir <td> etiketi ise metin, bağlantılar, resimler, listeler, formlar, ve diğer tabloları içerebilir.

Html Tablo Örneği

<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>

Örnek Gösterimi

satır 1, hücre 1	satır 1, hücre 2
satır 2, hücre 1	satır 2, hücre 2

Örnek kodda belirtilen "border" özniteliği tablo çerçevesinin incelik kalınlığını belirlemektedir.

Devamı »

HTML IMG

HTML Dersleri
HTML Image Dosyalarıyla Çalışmak

<img> etiketi ve src özelliği : HTML'de image dosyaları <img> etiketi ile tanımlanır. Sayfalardaki resimler, dokümana dahil değildir. <img> elementinin src parametresi ile resmin bulunduğu adrese referans verilerek browser'ın resmi yüklemesi sağlanır. Src "source - kaynak" anlamına gelir.

Bir resmi tanımlamak için html örneği

<img src="resim kaynak adresi buraya yazılır" alt="resim icin ifade yazısı">

Devamı »

21 Kasım 2013 Perşembe

HTML CSS (Cascading Style Sheets)

HTML Dersleri
HTML Stil Dosyalarıyla Çalışmak

CSS (Cascading Style Sheets - Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları) HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir. Sayfalarımızın ve içindeki bileşenlerin görünüm kalitesini artırmak amacıyla bizlere birçok biçimlendirme özelliği sağlar. HTML Head başlıklı yazımda HTML elementlerinin alt nesnesi olarak anlatılan style nesnesi ile doküman üzerinde herhangi bir HTML elementinin kenar dolgusu (padding), arka plan (background), kenarlık (border), renk (color), yazı tipi (font) ve yerleşim (position) gibi farklı CSS özelliklerini dinamik olarak okumak ve değiştirmek mümkündür. Bir Web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılabilir ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir kez tanımlayıp bütün sayfalarımızda ortak olarak kullanabiliriz. Bu bize hem görünümde ortak stil uygulanmasını hemde sayfaların hafızadaki boyutu küçüldüğü için yüklenme ve güncellemede hızı sağlayacaktır.

CSS ile HTML Styling

CSS stil HTML öğeleri için HTML4 ile birlikte tanıtılmıştır. CSS kodları HTML kodlarının içine yazılabildiği gibi harici bir CSS dosyası oluşturularak da kullanılabilirler. Türüne göre <body> veya <head> bölümlerinde yer alabilirler.

Devamı »

19 Kasım 2013 Salı

HTML Head

HTML Dersleri
HTML Head

HTML <head>

HTML sayfamızın ilk bölümüdür. WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır. Head etiketinin yorum aralığında <meta>, <title>, <base>, <link>, <style>, <meta>, <script> elementleri yer alabilir.

HTML Head Elementleri

Tag	Description
<head>	Sayfa ile ilgili bilgiler tanımlar.
<title>	Sayfanın başlığını tanımlar.
<base>	Sayfadaki bağlantılar için bir adresi veya varsayılan hedefi tanımlar.
<link>	Sayfa belge ve harici kaynak arasındaki ilişkiyi tanımlar.
<meta>	HTML belgesi hakkında meta tanımlar.
<script>	Sayfa için istemci taraflı komut dosyası tanımlar.
<style>	Sayfa için stil bilgilerini tanımlar.

HTML <title> Elementi

HEAD etiketi içinde sadece bir kere kullanılarak sayfa içeriğini tanımlayan bir başlık eklenmesini sağlar. Atanan bu başlık, tarayıcı penceresinin başlığında gösterilir. Her HTML dokümanda mutlaka tanımlanmalıdır.<title> elementi içinde büyüktür (>) ve küçüktür (<) işaretleri kullanıldığı takdirde tarayıcı, bu işaretleri bir HTML kod başlangıcı veya bitişi olarak yorumlayacağı için kullanılmamalıdır. Bu işaretlerin kullanılması gerektiği yerlerde büyüktür için > küçüktür için < HTML özel karakterleri kullanılabilir.

Kullanım Örneği

<html>
    <head>
        <title>sayfa baslik bilgisi buraya yazılır</title>
    </head>
    <body>

    </body>
</html>

Devamı »