html nedir?...html, en basit yolla bir not defteri ile yazılabilir. fakat not defteri ile web...

HTML Nedir?

HTML (Hyper Text Markup Language) internet ortamında gönderdiğimiz metin belgeleri için işaretleme dilidir. HTML'in amacı

bir internet sayfasının kullanıcıya nasıl gösterilmesi gerektiğini belirlemektir. HTML, bir programlama dili olarak tanımlanamaz.

HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen

programlar yazılabilir.

HTML birçok programalam dili ile birlikte kullanılabilen bir işaretleme dilidir. Özellikle web programlama dilleri olan ASPX ve

PHP dilleri ile bütünleşik çalışabilmektedir.

Versiyon Yıl

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

HTML5 2012

XHTML5 2013

HTML Temel Kavramlar

HTML Dosyası Nedir?

HTML, Hyper Text Markup Language'in kısaltmasıdır. HTML kodlamalar (tag) ve düz metinden oluşur. Taglar ancak bir Web

Browser (Firefox, IE, Chrome) tarafından anlamlı hale gelirler. HTML kodlarıyla yazılmış dosyaların uzantıları html veya htm'dir.

HTML, en basit yolla bir not defteri ile yazılabilir.

HTTP Nedir?

HTTP (Hyper Text Transfer Protocol) HTML sayfalarının internet ortamında yayınlanmasını sağlayan bir protokoldür.

Browser'larınızın adres satırına baktığınızda ilk önce http:// ifadesi görünmektedir. Bu ifade sayfanın http protokolü üzerinden

görüntülenmekte olduğunu belirtir.

FTP Nedir?

FTP (File Transfer Protokol) Uzaktaki bilgisayarların aralarında doğrudan dosya göndermelerini sağlayan bir protokoldür. FTP

sayesinde bilgisayarımızdaki bir dosyayı uzaktaki bir bilgisayara gönderebiliriz.

WWW Nedir?

WWW (World Wide Web) Geniş Dünya Ağı anlamına gelen dünyadaki bilgisayarların birbirleriyle iletişim kurabildiği, veri

paylaşımının yapılabildiği global bir network'dür. Bu network'e bağlı olan milyarlarca bilgisayar web sayfalarını düzenleyip

belirli bir sunucu üzerinden yayın yaparlar. Her web sayfasının kendine ait www ile başlayan bir adresi vardır. Bu adresleri

İnternet Gezginleri (Browsers : IExplorer, Firefox, Chrome) ile görüntüleyebildiğimiz yazılımlar vardır.

URL Nedir?

URL (Uniform Resource Locator) İnternet ortamında gidilecek olacan adresin ifadesidir.

http://en.wikipedia.org/wiki/HTML

HTML, en basit yolla bir not defteri ile yazılabilir. Fakat not defteri ile web sayfası oluşturmak oldukca zaman alıcı ve yorucu

olabilir. Bu nedenle hata kontrolü yapabilen, tablo ve yerleşim konusunda hazır araçlar sunabilen, oluşturma aşamasında

sihirbazlarla çalışmaya olanak sağlayan birçok Web Tasarım Editörü ortaya çıkmıştır. Profesyonel anlamda HTML çalışmak

istiyorsanız mutlaka not defteri (tercihen notepad++) kullanmanızı tavsiye ediyorum.

Popüler Web Tasarım Editörleri

• Adobe Dreamweaver • Amaya W3C's Editor • RapidWeaver • WYSIWYG Web Builder • CoffeeCup HTML Editor • Notepad++

HTML Sayfasının Yapısı

<html> <head> <title> baslik </title> </head> <body> gövde </body> </html>

<html> </html> : Sayfamızın ana etiketidir.

<head> </head> : Sayfamıza ait başlık, meta, stil gibi tanımlamaları yapacağımız bölümdür.

<title> </title> : Sayfamızın başlığını bu etiket ile belirleriz.

<body> </body> : Sayfamızın gövdesidir. İçeriğimizi burada oluştururuz.

İlk Web Sayfam

HTML sayfaları aslında birer metin dökümanlardır. Windows'un not defteri yada notepad++ tarzı metin editörlerini kullanılarak

kod yazılabilir.

Bir not defteri açın ve aşağıdaki yazılanları bu not defterine yazıp test.html olarak kaydedin. Ve bu dosyayı bir browser ile

görüntüleyin.

<html> <head> <title> baslik </title> </head> <body> ilk web sayfam... </body> </html>

http://www.adobe.com/products/dreamweaver

http://www.w3.org/Amaya/

http://realmacsoftware.com/rapidweaver/index.php

http://www.wysiwygwebbuilder.com/

http://www.coffeecup.com/html-editor/

http://notepad-plus-plus.org/

HTML Görünümü

Örneğin Açıklaması

<html> </html> html tagları browser'mıza bir html dosyasının işleneceğini bildirir. Sayfamızdaki son tag </html>'dir. Bu da html

dosyasının sonunun geldiğini ifade eder.

<head> </head> head tagları başlık bilgilerini içerir.

<title> </title> title tagları sayfamızın başlık bilgilerini içerir. buradaki başlık tarayıcı penceresinin en üstünde

görüntülenmektedir.

<body> </body> tagları browser penceresinde görüntülenecek olan kısmı belirtir.

HTML Tag'ları

• HTML öğelerini belirtmek için kullanılır. • HTML etiketleri 2 karakter ile sınırlanır ve çift olarak kullanılır. <b> </b> • Bu çiftlerden birincisine start tag, ikincisine ise end tag denir. • Başlama ve bitiş arasında kalan herşeye ise element contents denir. • HTML etiketleri büyük/küçük harfe duyarlı değildir, yani <b> ve <B> aynı görevi görür.

Start tag End tag

<p> </p>

<a href="test.html"> </a>

<br>

World Wide Web Consortium (W3C) küçük harf kullanımını önerir.

HTML Elementler

Başlangıç etiketi ile bitiş etiketi arasında yer alan her şeye HTML element denir.

• HTML elementi başlangıç etiketi ile başlar bitiş etiketi ile biter. • Başlangıç etiketi ve bitiş etiketi arasında yer alan herşeye HTML elementi denir. • Bazı HTML elementlerinin içeriği boştur. Bu elementler başlangıç etiketi ile kapatılır. • Birçok HTML elementi attribute içerir. • HTML elementleri içlerinde bir çok HTML elementleri içerebilirler. • HTML belgeleri iç içe geçmiş elementlerden oluşur.

http://3.bp.blogspot.com/-pYAGtIngdnQ/UofrL6kcgQI/AAAAAAAAAkI/9sxEmU3xfT8/s1600/test.PNG

Basit Kodlar - HTML Başlıklar

HTML başlıkları <h1> <h6> aradaki tüm rakamlar kullanılarak tanımlanabilir.

<h1>Bu bir başlık</h1> <h2>Bu bir başlık</h2> <h3>Bu bir başlık</h3>

Bu bir başlık

Bu bir başlık

Bu bir başlık

Basit Kodlar - HTML Paragraflar

HTML paragrafları <p> etiketi ile tanımlanır. HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır

atlar.

<p>Bu bir paragraf</p> <p>Bu da başka bir paragraf</p>

HTML Görünümü

Bu bir paragraf

Bu da başka bir paragraf

Basit Kodlar - HTML Linkler

HTML bağlantıları <a> etiketi ile tanımlanır.

<a href="http://www.omercirak.com">Link ornegi</a>

HTML Görünümü

Link ornegi

Basit Kodlar - HTML Resimler

HTML'de resimler <img> etiketi ile tanımlanır. <img> etiketi kapalıdır, bu etiket parametreler ile kullanılır ve bir kapatma etiketi

bulundurmaz.

<img src="ornek.png" alt="Örnek Resim">

HTML Görünümü

http://www.ibrahimbayraktar.net/

http://3.bp.blogspot.com/-eSrARU-5Dc0/Uof43ukgMII/AAAAAAAAAkY/pdnpBDSUB2w/s1600/ornek.PNG

http://3.bp.blogspot.com/-eSrARU-5Dc0/Uof43ukgMII/AAAAAAAAAkY/pdnpBDSUB2w/s1600/ornek.PNG

Basit Kodlar - HTML Özellikler

• İngilizcede “attributes” denir, dilimizde ise özellik veya öznitelik denir. • HTML elementlere/etiketlere ilave bilgi sağlarlar. • Öznitelikler her zaman başlangıç/açılış etiketinde olur. • Öznitelikler isim ve değer (name=”value”) olarak iki kısımdan oluşur., • <h6> ise en küçük puntoyu belirtir.

HTML bağlantıları <a> etiketi ile tanımlanır.

<a href="http://www.omercirak.com">Link ornegi</a>

HTML Görünümü

Link ornegi

Bağlantı adresleri href özniteliği ile belirtilir. Öznitelik değerleri her zaman çift tırnak arasında olur. Bir değer arasında zorunlu

olarak çift tırnak işareti varsa tek tırnak ile yazılabilir.

Bazı HTML öznitelikleri:

class: Bir element için bir veya birden fazla sınıf belirtir.

id: Bir element için benzersiz bir kimlik belirler.

style: Element için bir satır içi CSS stili belirler.

title: Element için ilave bilgi sağlar.

HTML Biçimlendirme

Biçimlendirme

Web sayfalarındaki en temel unsurlardan biride metinlerdir. Bu dersimizde HTML sayfamızdaki metinleri biçimlendirirken

(kalınlık, italik yazma, vurgu, vb.) kodlardan nasıl yararlanabileceğimizi göreceğiz.

<b> ve <i> etiketleri : Kalın veya italik metin gibi, biçimlendirme çıkışı için <b> ve <i> etiketleri kullanır.

<strong> etiketi : Yine <b> etiketi gibi kalın olarak biçimlendirme çıkışı sağlar. Fakat <b> ve <strong> etiketleri, okuyucu için

sayfayı tarayıcıda görsel olarak izlerken herhangi bir farklılık yaratmamasına karşın ikisi de sonuçta yazının kalın görünmesini

sağlar. Ayrıldıkları nokta şudur <b> etiketi sadece yazının stilini değiştirir. <strong> etiketi ise, yazının stilini değiştirmekle

kalmayıp, ona önem katar. Arama motorları sayfayı indekslerken <strong> takıları arasındaki kelimelerin, diğer kelimeler ile

karşılaştırıldığında daha önemli olduğunu varsayar. Aynı şekilde, sayfayı bir okuma yazılımına okutursanız, <strong> takıları

arasındaki kelimeleri daha yüksek sesle okuduğunu görebilirsiniz. Diğer yandan <b> takısının böyle bir işlevi yoktur, tek yaptığı

yazıyı kalın göstermedir.

<em> (emphasize) etiketi : İçerdiği metnin italik gösterilerek öneminin vurgulanmasını sağlar.

<code> etiketi : İçerdiği metnin bilgisayar kod parçası olduğunu belirtir. <p> etiketi gibi metin bloklarının içinde kullanılması

durumunda blok ile uyumlu gösterilerek, metni kesintiye uğratmaz. İçerdiği metin sabit genişlikli yazı tipi ile gösterilir.

<sub> (subscript) ve <sup> (superscript> etiketleri : İçerdiği metnin güncel fontun ufak puntosu ile normal karakterlerin biraz

altında alt yazı olarak gösterilmesini sağlar. Aynı şekilde <sup> kullanımı satır yüksekliğini normal karakterlerin biraz üstünde

bir üst yazı olarak gösterilmesini sağlar.

Etiketlerin bir arada kullanım örneği


<html> <head> <title> metin bicimlendirme etiketleri </title> </head> <body> <p><b>Kalın bir metin</b></p> <p><strong>Güclü bir metin</strong></p> <p><i>Saga yatık bir metin</i></p> <p><em>Vurgulanmis bir metin</em></p> <p><code>Programlama dili metni</code></p> <p>Bu metin<sub> altsimge</sub> ve <sup>üst simge</sup></p> </body> </html>

HTML Görünümü

Kalın bir metin

Güclü bir metin

Saga yatık bir metin

Vurgulanmis bir metin

Programlama dili metni

Bu metin altsimge ve üst simge

Metin Biçimlendirme Etiketleri

<b> Kalın Metin <em> Vurgulanmış Metin <i> İtalik Metin <small> Küçük Yazı <strong> Güçlü Metin <sub> Alt hizada yazmak <sup> Üst hizada yazmak <ins> Altı çizgili metin <del> Üstü çizgili metin <mark> İşaretlenmiş metin

Programlama Dilleri Etiketleri

<code> Programlama dili metini <kbd> Klavye metini <samp> Örnek bilgisayar kodu metni <tt> Tele tip metin <var> Değişken <pre> Biçimlendirilmemiş metin

HTML Atıf, Alıntı ve Tanım Etiketleri

<abbr> Kısaltma <acronym> Baş harfleri ile kısaltma <address> Adres öğesi <bdo> Metin yönü <blockquote> Uzun alıntı <q> Kısa alıntı <cite> Alıntı <dfn> Tanımlama terimi

<br /> etiketi : Bir alt satıra geçmeyi sağlamaktadır. Bu etiket kullanılmazsa tüm yazılar ve nesneler yatay bir şekilde ard arda

gelecektir. Şimdi, HTML p etiketi ile oluşturduğumuz bir paragraf içinde br etiketi kullanarak satır başı yapılmasını sağlayalım.

<p>Burası birinci satır.<br />Burası ikinci satır</p>

HTML Görünümü

Burası birinci satır.

Burası ikinci satır

HTML Linkler

HTML Dersleri HTML

Linkler ile Çalışmak

Linkler neredeyse tüm web sayfalarında bulunur. Linkler kullanıcıların sayfadan sayfaya dolaşmalarını sağlayan yapılardır.

Bir HTML dosyasında link nasıl oluşturulur?

<a> etiketi : Bir köprü tanımlar. bu etiket ile herhangi bir yazıya, sayfaya veya resme hyperlink (köprü veya bağlantı)

oluşturabilirsiniz. Bir <a> etiketi bağlantı verilebilecek isimlendirilmiş bir çapa (anchor) oluşturulmasınada olanak sağlar. Çapa,

sayfa içinde bir nevi yer imi görevini görerek herhangi bir bağlantı adresinin sonuna '#' karakteri ile birlikte çapa ismi

kullanıldığında sayfanın o bölgesine odaklanılmasını sağlar. Farklı bir ifadeyle çapa, sayfa içi hedef bağlantı veya yer imi

oluşturur. <a> etiketinin en önemli özelliği bağlantıyı hedef gösteren href niteliğidir.

Temel Kullanımı : <a href="adres" target="hedef_tipi">link yazısı </a> şeklindedir.

href niteliği ile gidilecek olan adres belirtilir. Bu adres herhangi bir resim, dosya, web sayfası, sayfadaki alt bir bölüm veya mail

adresi olabilir. Target niteliği ise bağlantının açılış tipini belirler.

Target niteliği Parametreleri :

_blank (yeni pencerede aç)

_parent (açık sayfanın yerinde aç)

_self (aynı pencere içerisinde aç)

_top (aynı pencere içerisinde sayfa üzerinden itibaren aç)

Linklerde title Özelliği

<a> etiketinin bir özelliğide link üzerine mouse imleci ile gelindiğinde açıklama yazısı görüntülemesini sağlamaktır.

Örnekler

<a href="http://www.omercirak.com">/dev/null blog</a> <a href="mailto:[email protected]">e-mail göndermek için buraya tıklayın.</a> <a href="http://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png">Örnek resim dosyası için tıklayın.</a> <a href="http://www.omercirak.com" target="_blank">bağlantıyı yeni bir sayfada açmak için tıklayın..</a> <a href="http://www.omercirak.com/" target="_blank" title="bu link blog ana sayfasına gider">title özelliği</a>

HTML Görünümü

/dev/null blog

e-mail göndermek için buraya tıklayın.

Örnek resim dosyası için tıklayın.

bağlantıyı yeni bir sayfada açmak için tıklayın..

title özelliği

Yazılara link verebildiğimiz gibi aynı şekilde resimlerede link verebiliriz.

<a href ="mailto:[email protected]" <img src="http://www.omercirak.com/images/mail.png"> </a>


mailto:[email protected]

http://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png



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>

HTML <base> Elementi

Sayfamız içinde bulunan tüm bağlantılar için taban adresin (alan adının) tanımlanmasını sağlar. <base> elementi, <head>

elementi içinde ve harici kaynaklara referans veren bağlantılardan önce kullanılmalıdır. Bir browser, sayfa içinde tam yolu

belirtilmemiş herhangi bir bağlantının güncel sayfanın bulunduğu dizinde olduğunu kabul etmektedir. <base> elementi

bağlantıların aranacağı alan adının ayrıca belirtilmesini sağlar.

Kullanım Örneği

http://www.w3schools.com/tags/tag_head.asp

http://www.w3schools.com/tags/tag_title.asp

http://www.w3schools.com/tags/tag_base.asp

http://www.w3schools.com/tags/tag_link.asp

http://www.w3schools.com/tags/tag_meta.asp

http://www.w3schools.com/tags/tag_script.asp

http://www.w3schools.com/tags/tag_style.asp

http://www.ibrahimbayraktar.net/2013/11/html-ozel-karakterler.html

<head> <base href="http://www.omercirak.com/images/" target="_blank"> </head>

HTML <link> Elementi

<link> elementi, sayfanın <head> alanında sayfanın hazırlanması için gerekli harici dokümanlara erişim veya yüklenmesi için

bağlantı oluşturulmasını sağlar.

Kullanım Örneği

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

Link elementi Özellikleri

id= Kimliğini belirtir.

class= Sınıf adını belirtir.

style= CSS kuralları tanımlar.

title= Kısa bilgi belirtir.

lang= İçerdiği metnin lisanını belirtir.

dir= İçerdiği metnin yönünü belirtir.

charset= Bağlantı kaynağının karakter kodlamasını belirtir.

type= Bağlantı kaynağının içerik tipini belirtir.

href= URL adresini belirtir.

hreflang= Bağlantı kaynağının lisanını belirtir.

rel= Bağlantı kaynağının, elementin bulunduğu sayfanın nesi olduğunu belirtir.

rev= Elementin bulunduğu sayfanın, bağlantı kaynağının nesi olduğunu belirtir.

target= Hedef çerçevenin (frame) adını belirtir.

media= Stil şablon kurallarının geçerli olduğu medyayı belirtir.

HTML <meta> Elementi

<head> içinde kullanılarak, browser'a ve arama motorlarına sayfa ile ilgili veriler sağlamak için kullanılır. Bu veriler, isim-değer

çifti şeklinde name ve content özellikleri kullanılarak belirtilir. Ayrıca http-equiv özelliği ile bir http başlığı belirtilip aynı şekilde

content özelliği ile değeri atanabilir.

Kullanım Örneği

<head> <meta name="Author" content="ibrahim bayraktar" /> <meta name="keywords" content="html, css, html5, programlama" /> </head>

Meta elementi Özellikleri

lang= İçerdiği metnin lisanını belirtir.

dir= İçerdiği metnin yönünü belirtir.

http-equiv= HTTP başlığının adını belirtir.

name= Özelliğin veya verinin adını belirtir.

content= Özelliğin veya HTTP başlığının değerini belirtir.

scheme= Özelliğin değerini yorumlamak için kullanılacak isteğe bağlı şemayı belirtir.

HTML <script> Elementi

İstemci taraflı çalıştırılabilir bir script tanımlanmasını veya harici dosyadan yüklenmesini sağlar. Tanımlanan bu scriptler

browser'ların dahili script engine'i tarafından çalıştırılır. Eğer browser type özelliği ile belirtilen script lisanını tanımıyorsa ilgili

script çalıştırılamayacaktır. HTML yorumlayıcıları uygun olan lisanı seçerek betiği çalıştırırlar.

Kullanım Örneği

<script type="text/javascript"> document.write("mesaj sayfa yuklendiginde eklendi.."); function merhaba() { alert("Merhaba!"); } </script> <button type="button" onclick="merhaba()">Mesajı Gör</button>

mesaj sayfa yuklendiginde eklendi..

HTML <style> Elementi

<head> alanı içinde kullanılarak, sayfamızdaki elementleri görsel olarak biçimlendirmek içim CSS biçimlendirme kuralları

tanımlanmasını sağlar.

Kullanım Örneği

<head> <style type="text/css"> body {background-color:yellow;}

p {color:blue;} </style> </head>

HTML Özel Karakterler

Bazı özel karakterler HTML dilinde çeşitli anlamlara sahip olabilmektedir. Biz bu özel karekterleri kullanmak istediğimizde, kodlamalarda sorunla karşılaşabiliriz. Örneğin "<" karakteri bir HTML kodunun başladığını anlatır ve bunu düz metin kısmında kullanmak sorun oluşturabilir. Bu nedenle & veya # ile başlayan ve ; ile biten bazı özel kelimelerden yararlanarak özel karakterleri kullanmalıyız. İsim kısaltmalı özel karakterler akılda daha kalıcı olduğu için kullanımı daha kolaydır. Fakat çoğu tarayıcı bu kısaltmaları yeterince desteklemiyor. karakter numaraları ise tüm tarayıcılar tarafından desteklenmektedir. Özel karakterler büyük/küçük harf duyarlılığına sahiptirler. En Çok Kullanılan Özel Karakterler

Çıktı Açıklama Özel Karakterler Özel Karakter Numarası Fazladan boşluk

< Küçüktür < <

> Büyüktür > >

& Ve & &

" Alıntı " "

Özel karakter ile birden fazla boşluk bırakmak : HTML kodları içindeki 2 kelime arasında 10 tane de boşluk bıraksanız bunlardan sadece 1 tanesi dikkate alınır. Eğer birden fazla boşluk bırakmak istiyorsanız özel karaktlerini kullanmanız gerekir.

HTML CSS (Cascading Style Sheets)

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. CSS aşağıdaki şekillerde HTML eklenebilir:

• Harici Stil Kullanımı (External Style Sheet) • Dahili Stil Kullanımı (Internal Style Sheet) • Etiket İçinde Stil Kullanımı (Inline Style)

External Style Sheet (Harici Stil Kullanımı)

İsminden de anlaşılacağı gibi CSS kodlarımız ayrı bir dosyada olacaktır. Bu kullanım tarzı birçok sayfa için idealdir. Harici bir stil sayfası ile, bir dosya değiştirerek bir Web sitesinin tamamının görünümünü değiştirebilirsiniz. Her sayfada <link> etiketini kullanarak stil sayfası bağlanmalıdır.<link> etiketi <head> bölümünün içinde olmalıdır.

<head> <link rel="stylesheet" type="text/css" href="mavistil.css"> </head>

Internal Style Sheet (Dahili Stil Kullanımı) Bu kullanım tarzında CSS kodlarımızı <head> etiketi altında <style> etiketi içine yerleştirmeliyiz.

<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>

Inline Style (Etiket İçinde Stil Kullanım) Bu kullanım tarzında ise CSS kodlarımızı HTML etiketleri içine "style" özniteliği ile birlikte yazmalıyız.

<p style="color:blue;margin-left:20px;">etiket icinde stil kullanımı ornek.</p>

HTML Stil Örneği : Sayfa Arkaplanı

<!DOCTYPE html> <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">Baslık arkaplanı kırmızı</h2> <p style="background-color:green;">Paragraf arkaplanı yesil</p> </body> </html>

örnekte background-color özelliği bir öğe için arka plan rengini tanımlamaktadır.

Sayfamızda birden fazla kullanım tarzını kullanmak istersek öncelik sıralamasışu şekilde olacaktır : Etiket İçinde - Dahili Kullanım - Harici Kullanım HTML Stili Etiketleri <style> stil bilgilerini tanımlamak için kullanılır. <link> sayfa ve harici kaynak arasındaki ilişkiyi tanımlamakta kullanılır. HTML CSS (Cascading Style Sheets) Kaynaklar : http://www.w3.org/Style/Examples/011/firstcss http://www.csstutorial.net/ http://www.htmldog.com/guides/css/beginner/ http://www.yourhtmlsource.com/stylesheets/introduction.html

HTML Image Dosyalarıyla Çalışmak

http://www.w3.org/Style/Examples/011/firstcss

http://www.csstutorial.net/

http://www.htmldog.com/guides/css/beginner/

http://www.yourhtmlsource.com/stylesheets/introduction.html

<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ı">

src="..." aralığı image dosyamızın depolandığı konumun işaretidir.

Not : İki paragraf arasında bir resim etiketi koyarsanız, browser ilk olarak paragrafı, sonra resmi ve ardından ikinci paragrafı

gösterir.

<img> öznitelikler:

id= Eşsiz kimliğini belirtir. class= Sınıf adını belirtir. style= CSS kuralları tanımlar. title= Kısa bilgi belirtir. lang= İçerdiği metnin dilini belirtir. dir= İçerdiği metnin yönünü belirtir. longdesc= Resim hakkında açıklama içeren bir URL belirtir. alt= Alternatif metni belirtir. src= Resmin kaynağını belirtir. height= Resmin yükseklik ölçüsünü belirtir. width= Resmin genişlik ölçüsünü belirtir. usemap= Resim haritalama verilerinin bulunduğu MAP elementinin adresini belirtir. ismap= Sunucu taraflı resim haritalama kullanılıp-kullanılmadığını belirtir. border= Kenarlık genişlik ölçüsünü belirtir.

<img> etiketi "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" gibi etiketler içinde

kullanılmalıdır. image dosyaları, sayfanın yüklenme hızını belirlemede önemli bir rol oyanayacağından görselleri az kullanmak

yada boyutları konusunda dikkatli olmak gereklidir.

Html Kullanım örneği

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Sayfamızın Başlığı Buraya Yazılır </title> </head> <body> <p> <a href="http://www.omercirak.com/"> <img src="http://www.omercirak.com/images/logo.png" alt="Yüklenemedi" /> </a> </p> </body>

</html>

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

http://www.colorpicker.com/

http://www.gimp.org/

http://www.adobe.com/tr/products/photoshop.html

http://1.bp.blogspot.com/-VCDEjlORCko/VbErCs1c8aI/AAAAAAAACPs/kxIfhkcicMo/s1600/wrenk04.PNG

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

http://2.bp.blogspot.com/-PrgUfSrMD98/VbEg98HpJ5I/AAAAAAAACPI/q4nkTwDu6zA/s1600/wrenk01.PNG

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

http://3.bp.blogspot.com/-WAv8gRVcZXg/VbEjlCYXDHI/AAAAAAAACPU/cIvO4e2O3wg/s1600/wrenk02.PNG

http://4.bp.blogspot.com/-fpu026JQZsw/VbEneh9EWFI/AAAAAAAACPg/j7TS2Jw3O-I/s1600/wrenk03.PNG

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/

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.

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

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

http://www.colorhexa.com/

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


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

Html Tablo Başlıkları

Bir tablodaki başlık bilgileri <th> etiketi ile tanımlanır. Tüm tarayıcılar kalın ve ortalanmış olarak <th> öğesi metnini görüntüler.

Html Tablo Başlığı Örneği

<table border="1"> <tr> <th>Başlık 1</th> <th>Başlık 2</th> </tr> <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

Başlık 1 Başlık 2



HTML Tablo Etiketleri

Etiket Görevi

<table> bir tablo tanımlar

<th> bir tabloda bir başlık hücreyi tanımlar

<tr> bir tablodaki bir satırı tanımlar

<td> bir tablodaki bir hücreyi tanımlar

<caption> bir tablo başlığını tanımlar

<colgroup> biçimlendirme için bir tablodaki bir veya daha fazla sütun grubunu belirtir

<col> Bir <COLGROUP> elemanı içindeki her kolon için <col> sütun özelliklerini belirtir

<thead> Tabloda başlık içeriğini belirtir

<tbody> Tabloda body içeriğini belirtir

<tfoot> Tabloda altbilgi içeriğini belirtir

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>

HTML Görünümü : Sırasız Liste Örneği : Kırtasiye İhtiyaçları

• Kurşun Kalem • Silgi • Kalemtraş

Bir HTML belgesinde bir Sıralı liste nasıl oluşturulur ? <ol> ve <li> etiketleri : Bir sıralı liste <ol> etiketi ile başlar. Her liste öğesi <li> etiketi ile başlar. <ol> etiketi listemizi sıralı yani numaralandırılmış şekilde oluşturmamızı sağlar. <li> etiketi ile eklenen her elemana type özelliği ile belirtilen tipte numaralandırma uygulanır. Varsayılan numaralandırma tipi '1'dir. <ol> etiketinin açılımı "Ordered List"'tir. Sıralı (Ordered 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ıralı Liste Örneği : Kırtasiye İhtiyaçları</p> <ol> <li> Kurşun Kalem </li> <li> Silgi </li> <li> Kalemtraş</li> </ol> </body> </html>

HTML Görünümü : Sıralı Liste Örneği : Kırtasiye İhtiyaçları

1. Kurşun Kalem 2. Silgi 3. Kalemtraş

HTML Açıklama Listeleri <dl> , <dt> ve <dd> etiketleri : Terimler ve açıklamalarını içeren bir tanım listesi oluşturmamızı sağlayan etiketlerdir. Tanımlar <dl> , Terimler <dt> ve tanım açıklamalarını ise <dd> etiketleri ile oluşturulur. Tanımlar, Terimler ve Açıklamaları 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>

<dl> <dt> Bilgisayar: </dt> <dd> Kendisine verdiğimiz bilgileri istediğimizde saklayabilen, istediğimizde geri verebilen cihaza denir. </dd> <dt> Programlama Dili:</dt> <dd> Yazılımcının bir algoritmayı ifade etmek amacıyla, bir bilgisayara ne yapmasını istediğini anlatmasının tektipleştirilmiş yoludur. </dd> </dl> <p>Farklı Bir Kullanım Şekli</p> <dt> Bilgisayar: </dt> <dd> <select name="bilgisayar"> <option value="donanim">Donanım</option> <option value="yazilim">Yazılım</option> </select> </dd> <dt> Programlama Dilleri:</dt> <dd> <select name="programlama"> <option value="c">C++</option> <option value="java">JAVA</option> </select> </dd>

HTML Görünümü : Bilgisayar:

Kendisine verdiğimiz bilgileri istediğimizde saklayabilen, istediğimizde geri verebilen cihaza denir. Programlama Dili:

Yazılımcının bir algoritmayı ifade etmek amacıyla, bir bilgisayara ne yapmasını istediğini anlatmasının tektipleştirilmiş yoludur.

Farklı Bir Kullanım Şekli

Bilgisayar: Programlama Dilleri: Listeleme Etiketleri

• <ol> Sıralı bir liste tanımlar • <ul> Sırasız liste tanımlar • <li> Bir liste öğesini tanımlar • <dl> Bir açıklama listesini tanımlar • <dt> Bir açıklama listesinde bir terim / adını tanımlar • <dd> Bir açıklama listesinde bir terim / adının açıklamasını tanımlar

HTML Bloklar

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.

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

Framaset Etiketleri ve Kullanımı için html örneği:

sol.html dosyamız

<html> <head>

<title>Solda Açılacak Sayfamız </title> </head> <body bgcolor="LightBlue"> <font size="7">sol.html</font> </body> </html>

sag.html dosyamız

<html> <head> <title>Sagda Açılacak Sayfamız </title> </head> <body bgcolor="Orange"> <font size="7">sag.html</font> </body> </html>

index.html dosyamız (dikey frame)

<html> <head> <title>..</title> </head> <frameset cols="35%,65%"> <frame name="sol" src="sol.html"> <frame name="sag" src="sag.html"> </frameset> <body> </body> </html

Örnek Gösterimi

http://3.bp.blogspot.com/-z03F0QF9tEg/VbE4KsnM48I/AAAAAAAACQU/jo7r-m_xnnk/s1600/frm01orn.PNG

Örneğimizde dikey olarak bölünmüş bir frameset oluşturduk. Çerçevelerimizi yatay oluşturma istersek eğer örnek kodlarda

<frameset cols="*,*"> yerine <frameset rows="*,*"> yaparak, sayfanın satırlara ayrıldığını görebilirsiniz.Bunu yanı sıra yıldız

yerine oran veya sayı girerek meydana gelecek değişimleri gözleyebilirsiniz.

index.html dosyamız (yatay frame)

<html> <head> <title>..</title> </head> <frameset rows="35%,65%"> <frame name="ust" src="ust.html"> <frame name="alt" src="alt.html"> </frameset> <body> </body> </html

Örnek Gösterimi

NOT: Çerçevelerde görünebilir kenarlıklar dikkatinizi çekmiştir. Öntanımlı olarak kullanıcı bunları sürükleyerek yeniden

boyutlandırabilir. Bunu önlemek için noresize="noresize" parametrelerini <frame> etiketi içine yazabilirsiniz. <noframes>

etiketinide döküman içerisine eklerseniz, tarayıcınız çerçeve özelliğini desteklemez hale gelir. scrolling="yes, no veya auto"

parametresiylede kaydırma çubuklarının durumunu belirleyebilirsiniz.

iFrames Nedir Nasıl Kullanılır

iFrame asıl HTML sayfası içerisinde bulunan ve kaynağını, yani içeriğini asıl sayfa dışında başka bir siteden alan çerçevelerdir.

iFrame kullanılmadığında sunucu istenilen sayfayı yeniden yükler. Bu da sitenin hızının yavaşlaması demektir. İşte bu noktada

iFrame kullanılırsa sadece gerekli alanlar değiştiğinden sayfa yüklenmesi daha hızlı gerçekleşir.

http://4.bp.blogspot.com/-K-PxqhD_ib8/VbE4Or1cHqI/AAAAAAAACQc/gkFfxbG8KBU/s1600/frm02orn.PNG

iFrame kullanımı için en az iki sayfaya ihtiyacımız var. Bu sayfalardan ilki Ana Sayfamız (iFrame'in üzerinde bulunduğu sayfa)

diğeri ise iFrame'in Ana Sayfa üzerinde göstereceği sayfa.

iFrame kullanımı html örneği

<html> <body> <iframe width="100%" height="300px" src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.omercirak.com" target="iframe_a">omercirak.com</a></p> <p>Link'e tıklandığında istenilen sayfa iframe olarak belirtilen boyutlar açılakcaktır</p> </body> </html>

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>

Örnek Gösterimi

Siyah Beyaz

Kontrol Kutucukları (Checkboxes)

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

Örnek Gösterimi

Bir bisikletim var:

Bir arabam var:

Bir kamyonum var:

Şifreli Metin Alanı (password textbox)

<input type=password> etiketi, girilen karakterlerin maskelenerek gösterilmediği tek satırlık bir metin giriş kontrolü (password

textbox) oluşturulmasını sağlar.

<input> Kullanım Örneği ve Şifreli Metin Alanı (password textbox)

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

Örnek Gösterimi

Şifrenizi Giriniz:

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>

http://1.bp.blogspot.com/-Zgc3JTyRarE/U_97qFQBG7I/AAAAAAAABtA/AXlL9NsF2IQ/s1600/form1.PNG

http://4.bp.blogspot.com/-seP6wtP8HAQ/U_97wcK2uAI/AAAAAAAABtI/PTmX8ekg1AA/s1600/form2.PNG

<form action="MAILTO:[email protected]" 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 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.

http://1.bp.blogspot.com/-q6XsCFt0cyA/U_-HEAuGMnI/AAAAAAAABtY/70og2pJazWw/s1600/form3.PNG

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., [email protected]" />

copyright: Sitenin telif hakları konusunda bilgi veren etikettir.

<meta name="copyright" content="(c) 2013 İbrahim B. (omercirak.com) 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.

html nedir?...html, en basit yolla bir not defteri ile yazılabilir. fakat not defteri ile web...

Documents