Hızlı Konu Açma

Hızlı Konu Açmak için tıklayınız.

Son Mesajlar

Konulardaki Son Mesajlar

Reklam

Forumda Reklam Vermek İçin Bize Ulaşın

HTML Dersi

Makromarket

Fahri Üye
Fahri Üye
Katılım
3 Ocak 2014
Mesajlar
433
Tepkime puanı
2
Puanları
0



HTML Dosyası Nedir?

HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir.
Bir HTML dosyası bir text dosyası olmakla beraber markup tags (işaretlenmiş etiketler) içerir
Markup tag'ler web tarayıcınıza sayfanın nasıl gösterileceğini gösterir.
Bir HTML dosyasının uzantısı htm veya html olmak zorundadır.
Bir HTML dosyası basit bir text editör ile oluşturulabilir.


Kendi yaptığım bir html'yi göstereyim size...

.HTML:



Linkleri sadece kayıtlı üyeler görebilir. Linkleri görebilmek için Üye Girişi yapın veya ücretsiz olarak Kayıt Olun





Denemek İçin:

Eğer Windows kullanıyorsanız not defterini açın.

Eğer MAC kullanıyorsanız SimpleText programını açın.

Eğer OSX kullanıyorsanız, TextEdit'i açın ve aşağıdakileri yapın: "Format" menüsünü açın ve "Rich Text" yerine "Plain Text" seçeneğini seçin. Sonra "Text Edit" menüsünün altında bulunan "Preferences" penceresini açın ve "Ignore rich text commands in HTML files" seçeneğini seçin. Eğer bu değişiklikleri yapmazsanız HTML dosyasınız büyük ihtimalle çalışmayacaktır!

Aşağıdaki metini açtığınız editör içerisine yazın:

HTML-Kodu:

<html><head><title>KeyloqqeЯ™</title></head><body>KeyloqqeЯ™ ile sayfa yapıyoruz <b>KeyloqqeЯ™ HTML DERSİ</b></body></html>
Dosyayı "sayfam.htm" olarak kaydedin.

Oluşturduğunuz dosyaya çift tıklayın. Dosya tarayıcınızda açılacaktır...

Bir çok kod var arkadaşlar bakın benim bir oyun sitesi yaparken yazdıklarım:




Örneğin Açıklaması

HTML dökümanınızdaki ilk tag (etiket) <html>'dir. Bu etiket tarayıcınıza bir HTML dosyasının koşturulacağını söyler. HTML dökümanınızdaki son tag (etiket) </html>'dir. Bu da tarayıcınıza HTML dosyasının sonunun geldiğini söyler.

<head> ve </head> etiketleri arasında kalan kısım başlık bilgilerini içerir. Başlık bilgileri tarayıcı penceresinde görüntülenmez.

<title> ve </title> etiketleri arasında kalan kısım dökümanınızın başlık bilgilerini içerir. Başlık tarayıcı penceresinin en üstünde görüntülenir.

<body> ve </body> etiketleri arasında kalan kısım, tarayıcı penceresinde görüntülenecek olan kısımı içerir.

<b> ve </b> etiketleri arasında kalan kısım ise koyu (bold) biçimde gösterilir.


Sıra Geldi Kodların Ne Olduğuna...

Başlıklar

Başlıklar <h1> ve <h6> dahil olmak üzere aradaki tüm rakamlar kullanılarak tanımlanabilir. <h1> en büyük puntoyu belirtirken, <h6> ise en küçük puntoyu belirtir.

HTML-Kodu:

<h1>Bu bir başlık</h1><h2>Bu bir başlık</h2><h3>Bu bir başlık</h3><h4>Bu bir başlık</h4><h5>Bu bir başlık</h5><h6>Bu bir başlık</h6>
HTML dili otomatik olarak başlık etiketlerinin öncesinde ve sonrasında bir satır atlar.


Paragraflar

Paragraflar <p> etiketi ile belirtilir.

HTML-Kodu:

<p>Bu bir paragraf</p><p>Bu da başka bir paragraf</p>
HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar.


Etiketleri kapatmayı unutmayın!

Bir önceki örnekte paragrafın </b> etiketi ile bittiğini gördünüz. Etiketleri kapatın. Örneğin <b> yazdıysak </b> yapmak zorundayız.

HTML-Kodu:

<p>Bu bir paragraf<p>Bu da başka bir paragraf
Çoğu browser büyük ihtimalle yukardaki gibi yazsanız bile çalıştıracaktır ama buna pek fazla güvenmeyin çünkü gelecek versiyon HTML dili hiçbir etiketi atlamanıza izin vermeyecektir...


Satır atlama

Satır atlamak için <br> etiketi kullanılır. Ancak bu etiketin yeni bir paragraf açmadığını da unutmayınız.

HTML-Kodu:

<p>Bu <br>bir <br>çok satırlı paragraftır.</p>
<br> etiketi boş bir etikettir. </br> gibi bir bitiş etiketi yoktur.!

<br> mi <br /> mi?

Bir çok yerde <br> etiketinin <br /> olarak kullanıldığını göreceksiniz.

Çünkü <br> etiketi bir bitiş etiketi bulundurmaz ve bu özellik gelecek nesil HTML (XML ve XHTML) dilinin ilk kuralını bozmaktadır. Bu yüzden <br /> etiketini kullanmanızı tavsiye ederiz.


HTML içinde açıklama (yorum) satırları yaratmak


Yorum satırları HTML kaynak kodu içerisine programcıların hangi satırın ne iş gördüğünü anlatmak için kullanılır. Bu satırlar, sayfa browser'da görüntülenirken dikkate alınmazlar.

HTML-Kodu:

<!-- Bu bir açıklama -->

Temel Notlar - Yararlı İpuçları

HTML kodlarınızın başka browser'larda nasıl görüntüneceğini asla bilemezsiniz. Ayrıca bazı kullanıcılar geniş ekran monitörlere sahipken bazıları küçük ekranlara sahiptir. Bu sebeple metinler, kullanıcı penceresini her yeniden boyutlandırmasında değişecektir. Asla metinlerinizi fazladan boşluk bırakmak gibi tekniklerle biçimlendirmeye çalışmayın.

HTML koyduğunuz boşlukları sürekli teke indirecektir.

Boş bir satır bırakmak için <p> kullanmak kötü bir tekniktir, bunun yerine <br /> etiketini kullanınız. (Ama asla <br /> ile sıralı liste oluşturmayınız. HTML ile listeleme konusuna kadar bekleyiniz.)


Temel HTML Etiketleri


<html> Bir HTML dökümanını belirtir

<body> Dökümanın görüntülenecek kısmını berlitir.

<h1> to <h6> Başlıkları belirtir.

<p> Bir paragraf belirtir

<br> Boş bir satır bırakır.

<hr> Sayfada yatay bir çizgi çizer

<!--> Yorum satırı olduğunu belirtir.


HTML Parametreler (Nitelikler)​


Parametre Örneği 1:

<h1> başlık belirtir.

<h1 align="center"> başlık belirtmesinin yanında, metinin ortalanacağını da belirtir.


Parametre Örneği 2:

<body> HTML'in body kısmını belirtir.

<body bgcolor="yellow"> Body kısmını belirtmekle beraber, arkaplan renginin de sarı olacağını belirtir.


Değerleri (Value) Daima Tırnak İçerisine Alın

Parametrelerin değerli her zaman tırnak içerisinde olmalıdır.

Bazen değerin kendisinin içinde de çift tırnak kullanılması gerektiği zamanlarda ise, değerin tamamını tek tırnak içerisine de alabilirsiniz:

name='Cem "GORA" Yilmaz'


Birkaç adet örnek yapalım...

Bunları not defterine .htm ile kaydediyoruz unutmayalım lütfen.


HTML-Kodu:

<html><body><b>Bu metin koyu</b><br><strong>Bu metin guclu</strong><br><big>Bu metin buyuk</big><br><em>Bu metin vurgulu</em><br><i>Bu metin italik</i><br><small>Bu metin kucuk</small><br>Bu metin<sub>altindis</sub>iceriyor<br>Bu metin<sup>ustindis</sup>iceriyor<br></body></html>

Bir örnek daha :

HTML-Kodu:

<html><body><pre>Bu birönbiçimlendirmeli metindir.Hem boşluklarıhem de kesmeleri dikkate alır.</pre><p>pre etiketi bilgisayar kodlarını göstermek için kullanışlıdır:</p><pre> Buraya bir paragraf yazalım.</pre></body></html>

Bir de kısaltma için örnek yapalım...


HTML-Kodu:

<html><body><abbr title="Birleşmiş Milletler">BM</abbr><br><acronym title="World Wide Web">WWW</acronym><p>Bu özellik mouse ile üzerine gelindiğinde yazılmış olan kısaltmanın normal halini ipucu olarak gösterir.</p><p>IE 5.0 ve sonrasında çalışan bir özelliktir..</p><p>Netscape 6.2 ve sonrasında çalışır</p></body></html>

HTML Kaynak Kodları Nasıl Görüntülenir?​


Tarayıcınızın araç çubuğunda "Görünüm" menüsüne geldikten sonra "Kaynağı Görüntüle" seçeneğini tıklayınız.

Metin Biçimlendirme Etiketleri

<b> Koyu metin
<big> Büyük metin
<em> Vurgulanmış metin
<i> İtalik metin
<small> Küçük metin
<strong> Güçlü metin
<sub> Alt indis metini
<sup> Üst indis metini
<ins> Altı çizili metin
<del> Üstü çizili metin
<s> Önemsiz etiket, bunun yerine <del> kullanınız.
<strike> Önemsiz etiket, bunun yerine <del> kullanınız.
<u> Önemsiz etiket, bunun yerine styles kullanınız.


"Programlama Dilleri" Etiketleri

<code> Programlama dili metini
<kbd> Klavye metini
<samp> Örnek bilgisayar kodu metini
<tt> Tele tip metin
<var> Değişken
<pre> Biçimlendirilmemiş metin.
<listing> Önemsiz etiket, bunun yerine <pre> kullanınız.
<plaintext> Önemsiz etiket, bunun yerine <pre> kullanınız.
<xmp> Önemsiz etiket, bunun yerine <pre> kullanınız.


Alıntılar ve Açıklamalar İle İlgili Etiketler


<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


HTML Form Oluşturma

Formlar

Bir form, form elemanlarını içinde bulunduran alandır.

Form elemanları kullanıcıların bilgi girmesini sağlayan elemanlardır. (metin alanları, açılabilir listeler, seçenek kutuları, kontrol kutuları)

Kullanım biçimi:

HTML-Kodu:

<form> <input> <input></form>
Giriş (Input)

En çok kullanılan form etiketi <input> etiketidir.

Metin Alanları

Kullanıcının rakam veya harf girmesini istediğiniz yerlerde bunu kullabilirsiniz.

HTML-Kodu:

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

Seçenek Butonları (Radio Buttons)

Kullanıcının bir çok seçenek içinden sadece bir tanesini seçebilmesini istediğiniz zaman bunu kullanırsınız.

HTML-Kodu:

<form><input type="radio" name="Cinsiyet" value="Erkek"> Erkek<br><input type="radio" name="Cinsiyet" value="Kadın"> Kadın</form>

Kontrol kutuları (Checkboxes)

Kullanıcının, sunulan seçenekler içinden istediği kadar seçmesini sağlamak için bunu kullanabilirsiniz.

HTML-Kodu:

<form>Bir bisikletim var:<input type="checkbox" name="Tasit" value="Bisiklet"><br>Bir arabam var: <input type="checkbox" name="Tasit" value="Araba"><br>Bir uçağım var: <input type="checkbox" name="Tasit" value="Uçak"></form>

Formlarda "Action" Parametresi ve "Submit" Butonu

Kullanıcı submit (gönder) butonuna tıkladığında girilen bilgiler başka bir sayfaya gönderilir. 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.

HTML-Kodu:

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

<form> Form
<input> Giriş alanı
<textarea> Çok satırlı metin giriş alanı
<label> Etiket
<fieldset> Alanların ayarlarının nasıl olacağını belirtir.
<legend> Manşet
<select> Açılabilir liste (combobox)
<optgroup> Seçenek kutusu grubu
<option> Açılabilir liste içindeki maddeleri belirtir.
<button> Buton
<isindex> Önemsiz. Bunun yerine <input> etiketini kullanınız.


HTML Resimler​


Resim "<img>" Etiketi ve "src" Parametresi

HTML dökümanlarda resimler <img> etiketi ile belirtilir.

<img> etiketi kapalıdır, yani bu etiket mutlaka parametreler ile kullanılır ve bir kapatma etiketi bulundurmaz.

Sayfanızda bir resim görüntüleyebilmek için "src" parametresini kullanmak zorundasınız. Src, "source" (kaynak) anlamına gelir. Buraya görüntülemek istediğiniz resim dosyasının yolunu yazarsınız.

Kullanım biçimi
HTML-Kodu:

<img src="resim yolu"><img src="dosyalar/banner.jpg"><img src="http://www.htmldersleri.org/dosyalar/banner.jpg">

<img> Resim
<map> Bir resimden alınacak belirli bir bölge.
<area> Bir resimde belirlenmiş olan bir bölgenin tıklanabilir bölge ölçüsü.


Deneyelim:

HTML-Kodu:

<html><body><p>Bir resim:<img src="constr4.gif"width="144" height="50"></p><p>Hareketli bir resim:<img src="hackanm.gif"width="48" height="48"></p><p>Normal bir resim ile hareketli bir resimin eklenme kodlarında bir farklılık olmadığına dikkat edin.</p></body></html>

Siteniz İçin En Güzel Resimleri Bir Arada Topladım:

Ayrıca resimlere Tıklayınca forumexe.com 'a yönlendiriliyorsunuz
Bana ait...



HTML KODU:
<a href="forumexe.com"><img src="http://dl8.glitter-graphics.net/pub/2060/2060988c6ndae0gdv.gif" width=56 height=60 border=0></a>



HTML KODU:

<a href="forumexe.com"><img src="http://dl5.glitter-graphics.net/pub/543/543735ehvlz7xadn.gif" width=160 height=140 border=0></a>



HTML KODU:

<a href="forumexe.com"><img src="http://dl7.glitter-graphics.net/pub/190/190347hgeiqc4vj4.gif" width=270 height=180 border=0></a>


HTML KODU:

<a href="forumexe.com" target="_blank" title="atatürk"><img src="http://www.ataturkdevrimleri.com/images/1/2_1.jpg" border="0"></a>



HTML Arka Plan

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

Bgcolor


HTML-Kodu:

<body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">
Background

HTML-Kodu:

<body background="ornekler/background.jpg"><body background="
"
>


Sitenize kenarlık ekleme:



HTML-Kodu:

<STYLE type=text/css>BODY { BORDER-RIGHT: red 15px outset; BORDER-TOP: red 15px outset; BORDER-LEFT: red 15px outset; BORDER-BOTTOM: red 15px outset } </STYLE> <STYLE type=text/css>BODY { SCROLLBAR-FACE-COLOR: black; SCROLLBAR-HIGHLIGHT-COLOR: red; SCROLLBAR-SHADOW-COLOR: red; SCROLLBAR-3DLIGHT-COLOR: black; SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR: black; SCROLLBAR-DARKSHADOW-COLOR: black } </STYLE>


 

Users Who Are Viewing This Konu (Users: 0, Guests: 1)

Üst