sax

Temel HTML   İleri HTML   Basamaklı Stil Sayfaları (CSS)   Web Renkleri

     
  • Belge Türü
  • Meta Etiketleri
  • Stiller
  • Bölümler
  • Satır İçi Kapsayıcıları
  • Resim Haritası

BELGE TÜRÜ

<html> etiketinden önce belge tipi, DOCTYPE ifadesi ile belirlenebilir. HTML'de üç tip belge türü seçeneği vardır. Bunlar Transitional (Geçişli), Strict (Katı), Frameset (Çerçeve Kümeleri) 'dir.

  • Transitional (Geçişli): Bu belge türü standart HTML üzerine kurulmuş olup artık geçerli olmayan HTML etiketleri ile de uyumludur. Genelde kullanılan belge türüdür. Belgeye <html> etiketinden önce aşağıdaki kod eklenir.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Strict (Katı) : Uygunluğu kabul edilmemiş etiketleri kabul etmeyen bir belge türüdür. Belgeye <html> etiketinden önce aşağıdaki kod eklenir.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Frameset (Çerçeve Kümeleri) : Bu belge tipi sayfada çerçeve kullanımına izin verir. Çerçeveler fazla kullanışlı olmadıkları için tavsiye edilmezler. Belgeye <html> etiketinden önce aşağıdaki kod eklenir.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

 

META ETİKETLERİ

Oluşturulan belgenin Başlık kısmına sayfanın açıklamasının yapılabileceği ve sayfa hakkında anahtar kelimelerin belirtilebileceği meta etiketler konabilir. Anahtar kelimeler bazı arama motorlarının sayfayı tanımasını ve tespit etmesini sağlar. Yeni nesil arama motorları (Ör : Google) meta etiketlerinin yanısıra belgenin Gövde kısmındaki içeriği de dikkate alır. Aşağıda, meta etiketlerinin content bölümünde açıklama yapılmış ve parantez içinde bu sayfa için uygun örnekler verilmiştir.

<meta name="author" content="Sayfayı düzenleyenin ismi(ODTÜ-EG)">
<meta name="Description" content="Sayfanın açıklaması(HTML öğrenmek isteyenler için dersler.)">
<meta name="keywords" content="Arama motorlarına yardımcı olmak için sayfa hakkında anahtar kelimeler(HTML,ders,web sayfası,web sitesi,bilgi işlem)">

Eğer sayfa içeriği T ürkçe ise hazırlanan sayfada herhangi bir T ürkçe karakter sorunu yaşamamak için Başlık bölümü içine aşağıdaki meta etiketi eklenir.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">

 

STİLLER

Stil (style) bir biçimlendirme kuralıdır. Bir belgedeki belirli bir etikete uygulanabileceği gibi, bir sayfa içerisindeki etiketin kullanıldığı her belgeye veya belgeler kümesinde belirli bir etiketin kullanıldığı yere uygulanabilen bir kuraldır.

Tek bir etikete uygulanması etikete style değişkeninin eklenmesi ile yapılır. Aşağıda <h1> etiketi, style değişkenine color özelliği eklenerek biçimlendirilmiştir.

<h1 style="color:red">Başlık</h1>

Başlık

Bir etikete ikinci bir özellik eklemek için style değişkeni içinde ilk özellikten sonra noktalı virgül ve ikinci özellik yazılır.

<h1 style="color:red; background:AliceBlue">Başlık</h1> Aşağıda başlığın arkaplan rengi AliceBlue olarak belirlendi.

Başlık

Eger bir belgedeki veya belirledigimiz belgeler kümesindeki <h1> etiketinin stilini belirlemek istersek Basamakli Stil Sayfaları (CSS) kullanırız. Stil Sayfaları hakkında detaylı bilgiye buradan ulaşabilirsiniz.

 

BÖLÜMLER

<div> etiketi ile belgede bölümler oluşturulabilir. <div> etiketi için herhangi bir stil özelliği belirlendiğinde <div>..</div> arasına yazılan tüm etiketler bu stilden etkilenir. Aşağıda oluşturulan bölümde <div> etiketine style="color:#FF0000;" stili uygulandığında bölüm içindeki paragraf ve başlık da kırmızı oldu.

HTML etiketi Etiketin Web Sayfasındaki görüntüsü

<div style="color:#FF0000;">
<h4>Bölüm içinde bir başlık</h4>
<p>Bölüm içinde herhangi bir paragraf</p></div>

Bölüm içinde bir başlık

Bölüm içinde herhangi bir paragraf

 

SATIR İÇİ KAPSAYICILARI

Herhangi bir bölümde veya paragrafta diğerlerinden ayrı stile sahip olması istenen herşey <span>...</span> etiketleri içerisine yazılabilir. Bu etiket Basit HTML dersinde kullanılması artık desteklenmeyen <font> etiketi yerine kullanılabilir.

HTML etiketi Etiketin Web Sayfasındaki görüntüsü

<div style="color:#FF0000;"><h4>Bölüm içinde bir başlık</h4>

<p><span style="color:#00FF33"> Bölüm içinde herhangi bir paragraf</span></p>
</div>

Bölüm içinde bir başlık

Bölüm içinde rengi bölümün renginden farklı bir paragraf

 

RESİM HARİTASI

Resimlerin faklı bölgelerinden farklı yerlere linkler vermek için resim haritası kullanılır. Örneğin bu sayede Türkiye haritasındaki tüm illere ayrı link verilip kullanıcılar o ille ilgili sayfaya yönlendirilebilir. Resim haritası bir resim üzerindeki tanımlanmış etkin noktaları (hotspots) link olarak belirler. Etkin noktalar dikdörtgen veya yuvarlak olabileceği gibi düzensiz şekiller de olabilir.

Dikdörtgen etkin noktanın konumu iki noktayla tanımlanır: sol üst ve sağ alt köşeler. Her nokta resmin sol-üst köşesinden yatay ve dikey uzaklığını piksel cinsinden belirten bir sayı çiftiyle tanımlanır. Aşağıdaki örnekte 0,0 etkin noktanın sol üst köşesinin 50,50 de sağ alt köşesinin resmin sol üst köşesine olan uzaklığıdır.

<map name="haritaismi" id="haritaismi">
<area shape="rect" coords="0,0,50,50" href="index.htm" />
</map>

Yuvarlak etkin noktanın konumunu tanımlamak için üç adet koordinat kullanılır: ikisi (yatay ve dikey değerler) dairenin merkezini tanımlamak için, üçüncüsü dairenin yarı çapı içindir.

<map name="haritaismi" id="haritaismi">
<area shape="circle" coords="100,110,50" href="index.htm" />
</map>

Çok köşeli etkin noktanın konumunu tanımlamak için şeklin tüm köşelerinin koordinatları kullanılır. Çok köşeli etkin noktalar tanımlanan noktaları birleştiren düz çizgilerden oluşur. Aşağıda beş köşeli bir etkin nokta için gereken kod verilmiştir:

<map name="haritaismi" id="haritaismi">
<area shape="poly" coords="310,14,559,195,274,356,5,118,126,411" href="index.htm" />
</map>

Aşağıdaki resimde 4 adet geometrik şekle de link verilmiştir. <img> etiketine usemap="#haritaismi" eklendiğinde haritaismi adlı resim haritasına göre resim içerisinde linkler belirir.

HTML etiketi Etiketin Web Sayfasındaki görüntüsü

 

<map name="Map" id="Map">
<area shape="rect" coords="20,158,170,210" href="#" />
<area shape="circle" coords="130,117,28" href="#" />
<area shape="poly" coords="97,27,96,40,157,95,164,90,160,27" href="#" />
<area shape="poly" coords="28,27" href="#" />
<area shape="poly" coords="21,110,83,111,84,27,26,25" href="#" />
</map>

 

  
 
 

Welcome to our Website!

Maecenas sodales pede eu massa. Fusce lacinia orci at nisi. Suspendisse at nisi nec diam pretium tincidunt. Ut vitae felis eu lectus ultrices varius. Aliquam lacus turpis, dapibus eget, tincidunt eu, lobortis et, magna. Integer pellentesque dignissim diam. Quisque ornare pulvinar lorem. Donec scelerisque. You may download Flash Templates for free of charge. Validate XHTML & CSS.

Company

image 1

Photos are provided by PhotoVaco.com website. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.

More »

New Services

image 2

Mauris varius risus fermentum nulla. Mauris vel sapien mattis urna luctus ultrices. Cum sociis natoque penatibus et magnis dis parturient montes.

More »

Testimonial

image 3

Praesent faucibus, dui vitae condimentum semper, dolor augue ornare elit, quis congue ante lacus id dui. Aliquam luctus posuere.

Super Hero (Web Designer)

About Us

image 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in lectus turpis. Vivamus cursus tortor quis leo ullamcorper auctor quis tincidunt metus.

Vestibulum vitae lectus a leo commodo egestas. Sed et ligula mauris. Donec interdum iaculis eros, sed porttitor justo ornare ac. Suspendisse ultrices arcu auctor sapien malesuada dictum. Vivamus non ante sit amet ligula dignissim blandit ut sit amet purus. Sed tristique euismod lectus sed scelerisque. Curabitur convallis fringilla ante, eget eleifend magna iaculis eget. Praesent at nunc tellus. Sed sed auctor odio. Maecenas ut mauris eu ligula placerat tempor vel ac augue. Integer fermentum, ante eget sodales lacinia, nisl diam semper elit, non hendrerit nunc urna vitae erat. Etiam vel nisi risus.

You may want to download Flash Templates for free of charge. Validate XHTML & CSS. Donec interdum, mi ut facilisis posuere, neque sapien lacinia urna, nec hendrerit dolor arcu sed justo. Aenean rhoncus porttitor dolor non posuere. Nulla eu mi id tellus vehicula pellentesque et vitae magna.

Services

image 5

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

More »

Quality Services

image 6

Donec enim enim, imperdiet quis, mollis a, elementum a, diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nunc commodo ante ornare imperdiet. Donec nunc neque, pulvinar a, vestibulum eget, luctus id, orci. Pellentesque elementum enim a augue.

Nam sodales, pede vel dapibus lobortis, ipsum diam molestie risus, a vulputate risus nisl pulvinar lacus. Donec euismod enim et risus. Vestibulum tempus porttitor ipsum, ut dictum metus molestie eu. Donec interdum, mi ut facilisis posuere, neque sapien lacinia urna, nec hendrerit dolor arcu sed justo.

Web Design Services

  • Nullam turpis est, interdum sed viverra nec, consequat at nisi.
  • Donec sed mattis sapien. Duis nec ligula vel quam consectetur ornare in ac lectus.
  • Ut sed velit sapien. In quis mi eget libero viverra vestibulum.
  • Nunc metus lorem, dapibus non adipiscing sed, ornare et turpis.

Testimonial

image 7

Nullam fermentum risus vitae lectus posuere sagittis. Praesent faucibus, dui vitae condimentum semper, dolor augue ornare elit, quis congue ante lacus id dui. Aliquam luctus posuere velit.

Super Hero (Web Designer)

Quick Contact

Where We Are

Address One
360-480 Quisque odio quam,
Pulvinar sit amet convallis eget, 10360
Venenatis ut turpis
Tel: 010-020-0340
Address Two
120-240 Duis lacinia dictum,
Vestibulum auctor, 10410
Nam rhoncus, diam a mollis tempor
Tel: 040-060-0870
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol