13 Kasım 2013 Çarşamba

HTML Dersleri 1-13

HTML Dersleri

 Bütün dersleri biryerde topladım.İşte Linki:
HTML Dersleri Link

Gönderen zaman: Hiç yorum yok:

HTML Ders 13

HTML Anlatim     HTML Ders

HTML Ders 13

Script Kullanmak

Script olarak bahsettiğimiz şey aslında genellikle tarayıcı tabanlı küçük uygulamalardır. Genellikle HEAD (bilgiler) bölümünde yer verildiği gibi BODY bölümünde de kullanılabilir. İki çeşit ekleme yolu vardır.

HTML belgemizin içerisinde javascript kodlarına yer verebiliriz. Bunun için:

HTML Kodu

Kodların HTML belgesinde durması, dosya boyutunu arttırdığı gibi fazla kullanışlı değildir. Bu nedenle javascript kodlarımızı bir metin belgesine yazıp sonunu js bitecek şekilde kaydedip aşağıdaki şekilde src="" özelliğinde yolu belirterek eklememiz mümkün:

HTML Kodu
Gönderen zaman: Hiç yorum yok:

HTML Ders 12

HTML Anlatim     HTML Ders

HTML Ders 12

Meta Tagları

Daha önceden değişmez bir HTML yapısından bahsetmiştik.

HTML Kodu

Şimdi buradaki <head></head> arasında olması gereken nesnelerden en önemlilerini tanıyalım. Burası HTML dosyamız hakkında tarayıcı (browser, kullanıcı) ve arama motorlarına bilgi verdiğimiz kısımdır. Ne tür bilgiler veririz?

Sayfa Başlığı

<head> etiketinden hemen sonra gelmelidir. <title>Sayfa Başlığı</title> şeklinde kullanılır. Burası tarayıcının en üstünde görünecek kısımdır (aynı zamanda görev çubuğunda)..

META - Dil Kodlaması

Sayfa başlığından sonra ilk META'mız dil kodlaması üzerinedir. Sayfanın hangi dil ile kodlandığını bu bölüm yardımıyla tanıtırız. Örneğin sitemiz Türkçe yazılmış ve Türkçe karakterler içermekteyse şu etiket eklenmeli:

HTML Kodu



Buna bağlı her ülke ve dil için ayrı charset değeri vardır.

META - Arama Motorları İçin Site Detayları

Keywords isimli meta için arama motorlarına sitenin hangi anahtar kelimeleri içerdiğini yazabilir, Description kısmıyla ise siteniz hakkında bir cümlelik açıklama yazabilirsiniz.

HTML Kodu
Gönderen zaman: Hiç yorum yok:

HTML Ders 11

HTML Anlatim     HTML Ders

HTML Ders 11

CSS (Stil) Dosyaları

Hazır stil şablonları oluşturduğumuz ve bundan yararlandığımız stil dosyaları ya da HTML belgemizin stil bölümü belge içerisinde ya da başka bir dosyaya bağlantı vererek şu şekilde kullanılır: Belge içinde:

Bir not defteri yardımıyla stilleri belirlediğimiz (bu dosyada HTML kodları kullanılmaz) dosyaya bağlantı vererek stilleri tanıtmak için:

Her iki yolla da stillerimizi tanıtmamız mümkün. Fakat HTML belgemizin boyutunun şişmemesi için ayrı bir dosyaya yazıp LINK komutu ile çekmek daha iyi olacaktır.

Stil Belirlemek

Stil belirlemek için formatımız " .stiladı { stiller; } " şeklindedir. Stil adından önce kullandığımız nokta ilgili tüm class tanımlamaları için geçerli olduğunu anlatır. Başına HTML kodunu alarak sadece o nesneye özel yapabilme şansımız var. Örnekleri inceleyelim:

Tüm ilgili nesneler için (mesela tüm textarea - metin kutuları için) özellik belirmek istersek bu kez nokta kullanmadan kodu küçük harfle yazar ve özellikleri belirtiriz:

Dikkat edildiyse stil özelliği belirlerken " ozellik: deger; " şeklinde yazıyoruz. Nesnenin desteklediği özelliğe göre bunları kullanabiliriz. Bunlardan en önemlileri ve ne işe yaradıklarını aşağıdaki tabloda görebilirsiniz:

Arkaplan ile İlgili Özellikler

Özellik Açıklama
background-color: renk; Arkaplan rengini belirleriz.
background-image: url('dosya'); Arkaplan resmi belirleriz.
background-repeat: tekrar; Arkaplanın tekrar edilip edilmeyeceği. Bu değer no-repeat ise tekrar yok, repeat-x ise sağa tekrarlı, repeat-y ise aşağı tekrarlı, repeat ise tekrarlı anlamlar ifade eder.
background: renk url('dosya') tekrar; Yukarıdaki css kodlarını tek bir komutta kullandık.


Yazı ile İlgili Özellikler

Özellik Açıklama
font: boyut, yazıtipleri; Boyut piksel olarak belirtildikten sonra yazıtipleri sıralanır ve aralara virgül konur.
color: renk; Yazı rengini belirleriz.
font-weight: bold; Kalın yazmak.
font-style: italic; Sağa yatık yazmak.
text-align: hiza; Metinleri hizalamak. left sola, right sağa, center ortalanmış, justify iki yana hizalar.


Boyut ile İlgili Özellikler

Özellik Açıklama
width: deger; Genişliği belirtiriz.
height: deger; Yüksekliği belirtiriz.


Kenar ile İlgili Özellikler

Özellik Açıklama
border: boyut; Kenarlık boyutu piksel olarak belirtilir. Kenarlık kullanmayacaksak 0px olmalıdır.
border: boyut renk durum; Boyutla birlikte kenarlık rengini ve durumu (solid = normal, dotted = çizgili) belirtilir.


Stil Kullanmaya Bir Örnek: Stil dosyamızda belirlediğimiz özellikleri DIV (HTML için bir alan) kodu kullanarak nasıl kullanabiliriz. Aşağıdaki örneği inceleyelim:

Görüldüğü üzere herhangi bir koda class="stiladı" özelliği eklersek, onunla ilgili düzenlemeler gerçekleşmiş oluyor. Burada en basit anlatımıyla anlatılan CSS dosyalarının daha değişik komutları da bulunmakta, fakat başlangıç için en ideali bunları öğrenmektir.

Gönderen zaman: Hiç yorum yok:

12 Kasım 2013 Salı

HTML Ders 10

HTML Anlatim     HTML Ders

HTML Ders 10

Arkaplan Kullanma

Daha önceden HTML belgesinin klasik bir formatı olduğunu ve bunun dışına çıkılmaması gerektiğini söylemiştik. Bahsettiğimiz kodlar arasında <body>'ye ekleyeceğiniz bgcolor="" özelliği ile html belgesinin arkaplan rengini belirleyebilirsiniz: Bu özellik içerisine yazılan renk kodları ingilizce, 16'lık ya da RGB değerlerinde belirtilmelidir. Bunlara bir resim editörü yardımıyla ulaşabilirsiniz (Photoshop tarzı).

Eğer arkaplanda bir resim kullanacaksak bu kez aynı kod için background="resim" şeklinde bir özellik kullanıyoruz.

Burada belirtilen resim arkaplanda döşeli olarak çıkacaktır. Bu iki özelliği aynı zamanda Tablo sütunları ve DIV layerlar gibi birçok alanda kullanabilirsiniz.

Renk Kodları

Bir HTML belgesinde kullanılan renkler RGB (Red, Green, Blue) yani Kırmızı - Yeşil - Mavi tonlarının belirtilmesi ile ortaya çıkarlar. Bunlar 16'lık sisteme göre #RRGGBB şeklinde düzenlenir. Eğer bir kırmızı elde edeceksek, kırmızı tonlar en çok diğerleri en az kullanılmalı. 16'lık sistemde 0 = siyah, koyu, F = beyaz, açık anlamındadır. Buna göre değerleri koyudan açığa doğru sıralayacak olursak: 0123456789ABCDEF şeklinde olacaktır. 16'lık sisteme göre Kırmızı renk #FF0000 olacaktır. Burada dikkat edildiyse sadece kırmızı tonlar en açık belirtildi, yeşil ve mavi ise 0 yani en koyu tonunda bırakıldı

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF


Aradığınız rengin kodunu bulamadıysanız:
Gönderen zaman: Hiç yorum yok:

HTML Ders 9

HTML Anlatim     HTML Ders

HTML Ders 9

Resım Eklemek

HTML belgemize resim eklemek için <img> kodundan yararlanırız.

Çıktısı

Buradaki src="" özelliği resmin dosya adını yazacağımız yerdir. Eğer resim, html belgemizin olduğu yerde değil ve bir klasörün içindeyse bu kez src değerine "klasor/resim.jpg" şeklinde yazmak gerekecekti. Resmi farklı bir siteden alacaksanız o halde resmin yolunu yazmanız yeterlidir (http:// ile başlamalı ve bu bir resim dosyası olmalı, jpg, gif, png gibi). Resimlerimize alt="" özelliği kullanarak fare imleci ile üstüne tuttuğumuzda görünecek açıklayıcı bir yazı yazılabilir. Resmimize link verebiliriz. Bunun için normal link komutu arasına resmimizi alırız.

Çıktısı

Görüldüğü gibi kalın bir çizgi görünüyor resmimizin etrafında. Bunu stil dosyasından ayarlayabileceğiniz gibi, border="0" diyerek tamamen yok edebilirsiniz.

Çıktısı

Resmimizi yazımızın sağına ya da soluna dayamamız mümkün. Bunun için align="hizala" özelliğinden yararlanırız. Bu değer left ise sağa, right ise sola dayalı olacaktır.

Çıktısı
Sağa Dayalı Resim Ahmet Bey, küçük, ahşap, kırmızı boyalı, iki katlı bir evde otururdu. Erkenden kalkar, "Haydi ya nasip" derdi ve evden çıkardı. Kimseler anlamazdı "Ya nasip" ne demekti? O mahallede herkes gömlek giyerdi, Ahmet Bey bir de ceket diktirdi, mahalleli bundan pek hoşlanmamış gibiydi.

Mahalleli kahvede zaman öldürüyor, sabah akşam sohbet ediyordu. Oysa Ahmet Bey onlardan farklı olarak sessizliği severdi. Mahallelinin sevmediğini bildiği ceketine bir de astar diktirmişti. Mahalleliye dert olmuştu Ahmet Bey'in ceketi.
Gönderen zaman: Hiç yorum yok:

HTML Ders 8

HTML Anlatim     HTML Ders

HTML Ders 8

Form Nesneleri

Formları site ziyaretçileri ya da kullanıcılarından bilgi alma amaçlı kullanırız. Onlardan düz metin, şifre ve seçim kutuları gibi nesneler oluşturarak bilgiler alırız. Bir form alanı <form> ile başlar ve </form> ile biter. Öncelikle bilgi amaçlı yerleştireceğimiz form nesnelerini tanıyalım.

Yazı Alanları ve Form Gönderme

Bu bölümde kısa metinler, uzun metinler ve şifre kutularını tanıyacağız.
Çıktısı
Kullanıcı Adı:



Şifre:






name="isim" - Form için bir isim belirleyin, bu isim bilgileri değerlendirirken yardımcı olur.
action="dosya" - Formdan alınan bilgiler hangi dosyaya gönderilecek yazılır.
method="post" - Hangi yöntemle formun teslim edileceği. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür.

type="tür" - Nesnenin türü, yukarıda text ile düz metin, password ile şifre kutusu, submit ile formu gönderme butonu olduğunu belirttik.
size="boyut" - Nesnenin uzunluğu sadece type değeri text ya da password ise geçerlidir.
name="isim" - Forma isim verdiğimiz gibi nesnelere de isim vermeliyiz. Bilgileri gönderdiğimiz dosyadan veriyi alırken buradaki isimden yola çıkarız.
value="deger" - Metin kutusunda ya da butonda yazacak yazıyı buradan belirleriz.

Görüldüğü üzere type="" bize form nesnesini şekillendirme şansı veriyor. Bazı durumlarda kullanıcıdan uzun bilgi almamız gerekebilir. Bu durumda <textarea></textarea> kodunu kullanarak metin kutusu yapabiliriz



Çıktısı
Yorumunuzu Yazın:



cols="sutun sayısı" Sütun sayısı.
rows="satır sayısı" Satır sayısı.

Seçim Kutuları


Yine <input> komutu ile tür bölümüne radio yazarak çoktan seçmeli bir form nesnesi oluşturulabilir:
Çıktısı
Erkek
Kız

NOT: Sadece bir seçim yapılabilmesi için mutlaka ilgili seçeneklerde name="" değeri aynı olmalıdır.
Eğer birden fazla nesne seçebilmelerini sağlayacaksak bu kez checkbox türünden yararlanırız.
Çıktısı
Arabam var.
Evim var.

Seçim Kutuları

Seçim kutusu eklemenin diğer bir yolu da <select> kodudur. Bunun kullanımı aşağıdaki gibidir.
Çıktısı
Örnekte value="" ile belirtilen değer form için bilgi, option kodları arasına yazdığımız renk adları ise seçim kutusunda görünenlerdir. Bu nesnemizin adını select komutunun içinde name="renk" şeklinde belirledik.

Diğer <input type=""> Değerleri

Değer
Açıklama
button
Tıklanabilir bir düğme (çoğunlukla bir komut dosyası etkinleştirmek için bir JavaScript ile kullanılır) tanımlar
checkbox
Bir onay kutusunu tanımlar
color
Bir renk seçici tanımlar
date
Bir tarih kontrolü (yıl, ay ve gün (hiçbir zaman)) tanımlar
datetime
Bir tarih ve zaman girişi tanımlar (yıl, ay, UTC saat dilimini dayalı gün, saat, bir saniye, dakika, saniye, ve fraksiyonu)
datetime-local
Bir tarih ve zaman girişi tanımlar (yıl, ay, UTC saat dilimini dayalı gün, saat, bir saniye, dakika, saniye, ve fraksiyonu)
email
Bir e-posta adresi için bir alan tanımlar
file
Bir dosya seçim alanı tanımlarö "Gözat ..." düğmesi (dosya yükleme için)
hidden
Gizli bir giriş alanı tanımlar
image
Gönder düğmesine bir görüntü tanımlar
month
Bir ay ve yıl girişi tanımlar
number
Numara girmek için bir alan tanımlar
password
Bir şifre alanı (karakter maskelenir) tanımlar
radio
Bir radyo düğmesi tanımlar
range
Bir oy alanı atar(kaydırmalı)
reset
Bir reset düğmesi (varsayılan tüm form değerleri sıfırlar ) tanımlar
search
Bir arama dizesi girmek için bir metin alanı tanımlar
submit
Gönder düğmesi tanımlar
tel
Telefon numarası girmek için bir alan tanımlar
text
Varsayılan. Bir tek satırlık metin alanı (varsayılan genişliği 20 karakterdir) tanımlar
time
Zaman (saat dilimi) girmek için bir kontrol tanımlar
url
URL girmek için bir alan tanımlar
week
Hafta ve yıl girişi tanımlar
Gönderen zaman: Hiç yorum yok:
Kaydol: Kayıtlar (Atom)