Monthly Archives: Haziran 2009
Html dersleri html bağlantılar
Html de link verme işlemini <a href=”adres”> koduyla yapıyoruz.Kelimeyide yazarak </a> şeklinde kapatıyoruz.
Aşağıda sitenin bir sayfasına, başka bir siteye, mail adresine ve bir dosyaya link örnekleri görmekteyiz. Bunları inceleyelim:
<a href=”index.html”>HTML Dersleri için buraya tıklayın (Sayfa)</a>
<a href=”mailto:bilgi@klavyeweb.net”>Bize e-mail göndermek için buraya tıklayın (E-mail).</a>
<a href=”baglantilar_dosyalar/image001.gif”>Site logosunu görmek için buraya tıklayın (GIF resim dosyası).</a>
Ana sayfa için buraya tıklayın (Sayfa).
Bize e-mail göndermek için buraya tıklayın (E-mail).
Site logosunu görmek için buraya tıklayın (GIF resim dosyası).
Not: Bir siteye link verirken www.siteadresi.com şeklinde ya da siteadresi.com şeklinde yazarsanız link yine sayfanızda bu bağlantıyı arar. Bunun için başka bir siteye link verirken mutlaka http:// ile başlanmalıdır.
Bağlantıyı Yeni Pencerede Açmak
Bunun için target=”_blank” özelliğini kodumuza ekleriz. Böylece bağlantı sayfamızda değil yeni bir pencerede açılacaktır:
<a href=”index.html” target=”_blank”>Ana sitemizi yeni bir sayfada açmak için tıklayın..</a>
HTML Görünümü
Bazı durumlarda (özellikle uzun sayfalarda) sayfanın belirli bir bölümüne link vermek gerekebilir. Bunun için name=”" özelliğinden yararlanırız. Böyle durumlarda href=”" özelliği kullanılmaz.
Öncelikle sayfa içinde bağlantı vereceğimiz yere giderek <a name=”etiket”></a> şeklinde yer imimizi belirtiyoruz. Böylece sayfanın bu kısmını işaretledik. Şimdi bu işarete link vermek için sayfa içerisinde başka bir yerde (en aşağıda ya da en yukarıda olabilir) <a href=”#etiket”>(metin)</a> şeklinde işaretlediğimiz yere link veriyoruz.
html dersleri html özel karakterler
Bazı karakterler HTML dilinde çeşitli anlamlara gelebilmektedir. Örneğin (<) karakteri bir HTML kodunun başladığını anlatır ve bunu düz metin kısmında kullanmak kodlamalarda soruna yol açabilir. Böyle durumlarda (&) ya da (#) ile başlayan ve (;) ile biten bazı özel kelimelerden yararlanarak özel karakterleri kullanmalıyız.
Kaynak koduna baktığımızda bunlar < şeklinde görülmektedir. Fakat tarayıcının (<) işaretini oluşturduğunu görürüz.
Gözardı Edilemez Boşluklar
Normalde HTML dilinde boşluk ( ) karakterleri bazı özel durumlar hariç sayılmaz. Yani 10 tane boşluk kullanmış da olsanız bu tarayıcı tarafından boşluk yokmuş gibi algılanır. Bu durumu da özel karakterlerle halledebiliriz. Böyle bir durumda boşluk bırakmak için kullanacağımız metin ( )’dir. Aşağıda iki farklı örnekte birinde 10 tane boşluk karakteri, diğerinde 10 tane kullanıldı.
Bu 10′luk standart boşluk.
Bu 10′luk özel boşluk
(Boşluk) Boşluk vermeye yarar.
< Küçüktür işareti. <
> Büyüktür işareti. >
& Ve işareti. &
“ Tırnak. "
‘ Ayıraç. '
Bunun dışında fazla kullanılmamakla birlikte © (©), ® (®) gibi işaretlerinde özel kullanım şekilleri vardır. Bunların tamamı HTML Entities olarak geçer
html dersleri html biçimlendirme
HTML dosyamızdaki metinleri biçimlendirirken (kalınlık, sağa yatık yazma, vurgu vb.) çeşitli kodlardan yararlanırız. Bunların birbirinden farklı en önemlilerine aşağıdaki listeden ulaşabilirsiniz. Tüm metin biçimlendirme çeşitleri ise aşağıdaki örnekte verilmiştir.
Etiket Anlamı
<b> Kalın yazmak.
<i> Sağa yatık (italik) yazmak.
<u> Altı çizili yazmak.
<del> Üstü çizili yazmak.
<sub> Üs yazmak.
<sup> Alt hizada yazı yazmak.
<big> Büyük yazı.
<small> Küçük yazı.
<b>Kalın bir yazı</b><br />
<i>Sağa yatık bir yazı</i><br />
<u>Altı çizili yazı.</u><br />
<del>Üstü çizili yazı.</del><br /><br />
Normal Metin <sub>Yazı hizasının altında küçük yazı.</sub><br /><br />
Normal Metin <sup>Yazı hizasının üstünde küçük yazı.</sup><br /><br />
<big>Büyük bir yazı</big><br />
<small>Küçük bir yazı</small><br /><br />
<em>Vurgulu bir yazı</em><br />
<strong>Vurgulu bir yazı</strong><br />
<ins>Vurgulu bir yazı.</ins><br />
<s>Vurgulu bir yazı.</s><br />
<strike>Vurgulu bir yazı.</strike><br />
HTML Görünümü
Kalın bir yazı
Sağa yatık bir yazı
Altı çizili yazı.
Üstü çizili yazı.
Normal Metin Yazı hizasının altında küçük yazı.
Normal Metin Yazı hizasının üstünde küçük yazı.
Büyük bir yazı
Küçük bir yazı
Vurgulu bir yazı
Vurgulu bir yazı
Vurgulu bir yazı.
Vurgulu bir yazı.
Vurgulu bir yazı.
Yazı Tipi, Yazı Boyutu ve Renk Seçimi
Bunun için <font> kodunu kullanıyoruz. Örneğe bakalım ;
<font face=”Tahoma” size=”1″ color=”red”>Bu 1. örnek yazı..</font><br />
<font face=”Verdana” size=”2″ color=”blue”>Bu 2. örnek yazı..</font><br />
<font face=”Times New Roman” size=”3″ color=”#CCFFCC”>Bu 3. örnek yazı..</font><br />
HTML Görünümü
Bu 1. örnek yazı..
Bu 2. örnek yazı..
Bu 3. örnek yazı..
face=”yazıtipi” – Yazı tipi, font klasöründeki adıyla yazılır.
size=”boyut” – 1-6 arasında bir değerdir.
color=”renk” – Yazı rengini burdan belirtiriz. Renklerle ilgili bilgi verilecek..
html dersleri html özellikleri
Özellikleri
Daha önceden de söylediğimiz gibi, HTML kodları çeşitli özellikleri desteklemekte ve bunları ozellik=”deger” tarzı bir kullanımla belirtmekteydik.Örnekleştirelim.
<h1 align=”center”>Ortalanmış Bir Başlık</h1>
HTML Görünümü
H1 Başlık
Align özelliği h1, div, td, p gibi anahtarlarda desteklenen sayfa düzeni özelliğidir. Bu değer left (sola), right (sağa) ve center (ortalanmış) olabilir.
Başka bir örnek, tablo kenarlığını tarayıcıya anlatmak:
<table> – bir tablo başlattığımızı anlattık.
<table border=”0″> – bir tablo başlattığımızı, aynı zamanda bu tablonun kenarlığı olmadığını (0) anlattık.
Bir özelliği yazarken tırnak işareti ya da ayıraç kullanacaksak dikkat etmemiz gereken nokta kullanmadığımız karakterle özelliği belirtmek. Misal ;
<a href=”#” title=”Omar’ın sitesi için tıklayınız.”>My Contact 1</h1>
<a href=”#” title=’”Omar’ın sitesi için tıklayınız.’>My Contact 2</h1>
Hazırlayan : Omar KARAKUS
Html dersleri basit kodlar
Bu dersimizde H1-H2-H3-H4-H5-H6 olarak tabir ettiğimiz başlık yapısı (heading), paragraf açma ve satır atlamayı öğrenmek için uğraşıcağız (:
Nese sözü fazla uzatmadan konumuza girelim.
Başlık Kullanma
Başlıklar <H1>’den <H6>’ya kadar en büyükten en küçüğe doğru sıralanan ve sayfadaki yerine göre kullanacağımız, W3C standardında başlıklarımızdır. Bu başlıklardan sonra ayrıca bir satır atlanmaktadır.
<h1>H1 yazı</h1>
<h2>H2 yazı</h2>
<h3>H3 yazı</h3>
<h4>H4 yazı</h4>
<h5>H5 yazı</h5>
<h6>H6 yazı</h6>
HTML Görünümü
H1 Yazı
H2 Yazı
H3 Yazı
H4 Yazı
H5 Yazı
H6 Yazı
H1′in ne olduğunu gördük ilerleyen derslerde renk,boyut gibi ayarları göreceğiz.
Paragraflar
Paragraf yeni bir satıra başlangıcı ifade eder. Bunu HTML dilinde <p> ile başlatır ve </p> ile bitiririz. Aynı başlık yapısında olduğu gibi paragraflardan sonra da kendiliğinden satır atlar.
<p>Paragraf örneği.</p>
<p>Değişik paragraf örneği.</p>
HTML Görünümü
NOT: Açılan bir kodu kapatmayı gerekir.Satır atlama (<br />) ve meta dışında <b>…</b> gibi kullanılmalı. Aksi takdirde sayfa düzeninde bozulmalar oluşabilir.
Satır Atlamak
Bir paragrafta ya da paragraf kullanılmadan başlanılan bir yazıda, HTML dilinde satır atlamak için <br /> tagını kullanırız.
<p>Bu bir<br /> paragraf ve satır atlama<br /> örneği..</p>
HTML Görünümü
Bu bir
paragraf ve satır atlama
örneği.
Gerçekte <br> ile <br /> arasında fark yoktur. Fakat (/) eklenmesinin nedeni, satır atlama kodunun bir kapanış tagı olmamasıdır (yani </br> şeklinde bir kullanım olamaz). W3C Standartlarına göre <br /> daha doğru bir kullanımdır (XHTML gereği)
Hazırlayan : Omar KARAKUS
Html dersleri elementler
Özellikleri
Html dili tag,etiket adlarına verilen kodlardan oluşur.
Kodlar < ile başlar > ile biter.
Kod genellikle 2 parçadan oluşur.Elementin başladığı ve bittiği kodlardır.Element bittiği zaman bölme işareti ” / ” ile başlangıçtaki değeri yazması yeterlidir.Misal <b>omar* ~</b>
Tabi her kod duruma uymaz.Bazı kodlar için kapanma anahtarı bulunmaz.Onun yerine bu işaret başlangıç kodunun sonuna eklenir.Misal <br /> , <hr />
Bu kodlar büyük veya küçük harf etmeden işlemine sürdürür.Misal <b> ve <B> arasında hiç bir fark yoktur.Ama siz W3C standartları için küçük harf kullanınız.
Bu örnek kalın yazma elementidir.
<b>kalın yazı</b>
Değişmez Sayfa Yapısı
Bir html dosyası şöyle kodlanmalıdır.
<html>
<head>
<title>Sayfa Başlığı</title>
(Meta etiketler, scriptler, RSS yolları ve CSS dosyası)
</head>
<body>
(Diğer tüm elementler ve düz metin)
</body>
</html>
W3C standardında bir HTML belgesinde bu kodlar olmassa olmazdır.Sonuçta yerlerini ters yazsanız da ya da düz metin yazsanız da browser tarafından görünür fakat HTML ön bilgileri, sayfa başlığı, içeriğin bulunduğu yer tarayıcı tarafından görülmez ve hem arama motorları, hem ziyaretçi, hem de browser için bazı sıkıntılar doğurabilir ..
Şimdi buradaki standart diyebileceğimiz kodlar ve aralarında geçen html kodlarını incelemeye başlayalım..
Hazırlayan : Omar KARAKUS
Html dersleri html’ye genel bakış
Html kodlarını anlamak
İlk önce kodlama yapabilmek için bazı programlama dillerin ana taşı olan elementlerin temel unsurlarını nasıl çalıştıklarını bilgi vermek gerekir.
Her kod < ile başlar > ile biter.
<html>
Html belgeleri bu şekilde hazırlanmış kodlar ve metinlerden oluşur.
Html kodunun özelliğini belirteceksek özellik=”değer” şeklinde olmalıdır.
<body bgcolor=”lightblue”>
Hangi tagın ne işe yaradığını ne özelliğe sahip olduğunu ilerleyen derslerde göreceksiniz.
Hazırlayan : Omar KARAKUS
