Neden DocType Kullanılmalı ?
HTML`in ilk zamanlarında her tarayıcı sayfayı farklı yorumlamaktaydı. Bu sorundan dolayı standartlara uyum için DocType yöntemi geliştirildi.
Artık tarayıcılar kullandığınız belge tipine göre sayfayı standart kipde (standards mode) kurallara uygun şekilde farklı yorumlanmaktadır.
Hiçbir belge tipi kullanmadığında ise sayfa eski usul garip kipde (Quirks mode) yorumlanmaktadır.
Tarayıcı tarafından garip kipde yorumlanan sayfalar her tarayıcının yorumuna göre farklı çıkmaktadır. Bu da tasarımcıların her tarayıcıda aynı görünen sayfalar hazırlamasını son derece zorlaştırmaktadır.
Html tagı nedir?
Html sayfalarının içersinde bulunan ve internet explorer gibi tarayıcılar tarafından yorumlanarak görsel hale getirilen yazılardır.
basit bir tag örneği:
<b>Yazı</b>
yukarıdaki yazı internet sayfasında ise bu yazı kullanıcıya aşağıdaki gibi yansıtılacaktır.
Yazı
Burada kullanılan <B> işareti BOLD kelimesinin kısaltması olup anlamı koyu harflerle yazılmış yazıdır.
Head nedir?
Bu tag'ın adı < HEAD > </ HEAD> yani BAŞ, ÜST anlamına da gelen HTML etiketlerinden ilkidir.HEAD etiketi ne işe yarar?
Kod:
<! docteyps> <html> <head> Tanımlama bilgileri (Meta Etiketleri, Stil Etiketleri, Yardımcı Etiketler) </head> </html>
Bu etiketlerle Sitemizin tanımlamarını sağlarız, mesela sitemizin açıklama yazısını, tanımla kelimelerini, sitemizi kimin yaptığını, dışarıdan kullandığı stil (CSS) dosyalarını gösteririz, kullandığımız diğer yardımcı dilleri bu alanda sitemizin içerisine çağırırız,
Kısacası, Sitemizin baştan aşağı tanımlamasını, bu etiketin çerçevesi içerisinde yaparız.
<!--...--> Açıklama yazmak için kullanılır
<!DOCTYPE> Dosya tipini belirtir
<a> Link belirtir
<abbr> Yazının bir kısaltma olduğunu belirtir
<acronym> Kelimenin başharfleri olduğunu belirtir
<address> iletişim adresleri için kullanılır
<applet> Gömülü aplet eklemekte kullanılır(html 4 ile bu özellik iptal edilmiştir)
<area /> Resmin parçalarına ait link vermeyi sağlar
<b> Koyu harfli yazı
<base /> Tüm linkler için kaynak kök adresi belirtir
<basefont /> Fon tipi belirtir (html 4 ile bu özellik iptal edilmiştir)
<bdo> Yazının yönünü belirler
<big> Büyük yazı tanımlar
<blockquote> Uzun alıntı metin olduğunu gösterir
<body> Dosyanın ana kısmını gösterir
<br /> Alt satıra geçiş işaretidir
<button> Gönderme butonu üretir
<caption> Tablo başlığı yazar
<center> Elemanı sayfada ortalar (html 4 ile bu özellik iptal edilmiştir)
<cite> Alıntı belirtir
<code> Bilgisayar kodları belirtir
<col /> Tablo sütunları için özellik verir
<colgroup> TAblodaki bir grup sütuna özellik verir
<dd> Tanım Listesi
<del> Silinmiş yazı
<dir> Klasör listesi belirtir (html 4 ile bu özellik iptal edilmiştir)
<div> Dökümanda bir bölümü temsil eder
<dfn> Tanım kelimesini gösterir
<dl> Tanım listesi elemanı
<dt> Tanım listesindeki elemanlardan biridir
<em> Vurgulanmış yazı
<fieldset> Form için çerçeve üretir
<font> Yazı özellikleri belirtir (html 4 ile bu özellik iptal edilmiştir)
<form> Bilgi yayıt formu
<frame /> Sayfa içinde gömülü pencere açar
<frameset> Sayfada bölme yapar
<h1> ile <h6> arası Başlık yazısı belirler
<head> Dökümanın temel başlık elemanlarını içerir
<hr /> Yatay çizgi
<html> sayfa türünü belirtir
<i> Eğik yazı
<iframe> Başka bir sayfayı dökümanda gösterir
<img /> Resim
<input /> Form için bilgi alanı
<ins> Eklenmiş yazı
<isindex> Dökümana ait arama kelimesi (html 4 ile bu özellik iptal edilmiştir)
<kbd> Klavye yazısı
<label> Form için metin etiketleri
<legend> Form çerçevesi için açıklama
<li> Liste elemanı
<link /> Dökümana dışardan bir kaynak bağlar
<map> resim için parçaları tanımlar
<menu> Menü listesi (html 4 ile bu özellik iptal edilmiştir)
<meta /> Dökümana ait önemli tanımlamaları içerir
<noframes> Frame özelliği kapalı ise gösterilecek yazı
<noscript> Javascript kapalı isse gösterilecek yazı
<object> Gömülü uygulamalar
<ol> Düzenli Liste
<optgroup> Seçim listesindeki alkalı bileşenler
<option> Seçim listesindeki elemanlar
<p> Paragraf başı
<param /> Gömülü uygulamalar için ayar kısmı
<pre> Düz yazı biçimi
<q> Kısa alıntı
<s> Üseri çizili yazı (html 4 ile bu özellik iptal edilmiştir)
<samp> Örnek bilgisayar kodu gösterir
<script> Kullanıcı taraflı uygulama
<select> Seçim listesi
<small> Küçük yazı
<span> Dökümanda bir bölümü gösterir
<strike> Üzeri çizili ayzı (html 4 ile bu özellik iptal edilmiştir)
<strong> Kalın yazı
<style> Elemanların görünümünü belirten şekiller
<sub> Alt yazı
<sup> Üst yazı
<table> Tablo
<tbody> Tablo grubu
<td> Tablonun bir gözü
<textarea> Form için uzun yazı alanı
<tfoot> Tablonun dip kısmı
<th> Tablodaki başlık alanı
<thead> Tablo başlık grubu
<title> Dökümanın ana başlığı
<tr> Tablonun bir satırı
<tt> özel metin
<u> Altı çizili yazı (html 4 ile bu özellik iptal edilmiştir)
<ul> Düzensiz liste
<var> Yazı içinde değişken tanımı
<xmp> Ön tanımlı yazı (html 4 ile bu özellik iptal edilmiştir)
CSS Nedir?
Css internet sayfalarının görünümünü değiştiren bir tanım dosyasıdır. CSS kendine has kuralları olan bir tanım dilidir denilebilir. CSS Sayfa içersindeki her bir elemana ait farklı özellik atamayı sağlarCss Özellikleri:
- Html sayfasındaki nesnelerin görüntüsünü belirler
- Html 4.0 sürümü ile stil dosyaları geliştirilmiştir
- CSS ayrı bir dosyada *.css uzantısı ile saklanabilir. Bu işlem sayfanın daha hızlı açılmasını sağlar
- Elemanlar üzerinde style="" parametresi ile özel kısa tanımlar yapılabilir
HTML ilk üretildiğinde yazı rengi ve boyu gibi özellikleri tag´lar ile tanımlayacağı düşünülmedi. ilk Html sürümünde aşağıdaki gibi temel taglar kullanıldı.
<h1>Başlık yazısı</h1>
<p>Paragraf yazısı</p>
Daha sonra html 3.2 sürümüyle <font> gibi taglar sunulduğundarenk ve yazı boyu gibi alt özellikler gelişmeye başladı. Fakat çok büyük web sayfalarında bu durum tasarımcı için sıkıntılı olmaya başladı. çünkü sonradan doğru tagı bulmak ve değiştirmek zorlaşıyordu.
Bu sorunu çözmek için Dünya internet topluluğu (W3C) html 4.0 sürümü ile CSS yapısını geliştirdi. Böylece boyut ve şekil bilgileri sayfada olmak yerine CSS uzantılı tek bir dosyada toplandı. Bu sayede web tasarımcı sayfanın görünümünü değiştirmek istediğinde tek yapması gereken CSS dosyasını açmaktı. böylece web sayfasında bir anda birçok sayfa değişmiş oluyordu.
Background Nedir?
CSS‘in Background satırı arka plan görsellerimizin seçimini, yerleşimini, boyutunu ve pozisyonunu yönetmemizi sağlar.
Overflow Nedir? Nasıl Kullanılır?
CSS anlatımlarımıza devam ediyoruz arkadaşlar. Şimdi sizlere CSS‘de overflow tekniğinden bahsedeceğim. Öncelikle Overflow tekniğini tanımlamak gerekir ise, şöyle ki; Örnek olarak bir yazıyorsunuz ve yazdığınız yazı çok uzun. Dolayısı ile yazdığınız yazı taşıyor. İşte, tam bu anda yardımınıza Overflow yetişiyor. Çünkü Overflow tekniği ile belirlediğiniz yükseklik doğrultusunda, yazınızın taşmamasını sağlıyorsunuz. Yani çıkan kaydırma çubuğu ile, yazdığınız yazı belirlediğiniz yükseklik doğrultusunda kalıyor ve taşmamış oluyor.Ve diğerleri....
text- decoration: Yazının biçiminde değişiklik yapmayı sağlar.
border: Kenarlıkları belirler.
owerflow : Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
font-weight: Yazının kalın olmasını sağlar.
width: Genişliği belirler.
height: Yüksekliği belirler.
display: Elemanın nasıl görüneceğini beirler.
list-style: Liste biçiminin resimli olmasını sağlar.
padding: Tablo kenarları ile tablo içeriği arasında bırakılacak boşluğu belirler.
margin: Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
color: Yazının rengini belirler.
font-size: Yazı boyutunu belirler.
float: Bir elemanın yerini ayarlamayı sağlar.
Html için etiketler:
Metin Biçimlendirme Etiketleri
| Tag | Açıklama |
|---|---|
| <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
| Tag | Açıklama |
|---|---|
| <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
| Tag | Description |
|---|---|
| <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 |
En Çok Kullanılan Özel Karakterler
| Sonuç | Açıklama | Özel karakterleri | Numaralı Hali |
|---|---|---|---|
| Fazladan boşluk | |   | |
| < | Küçüktür | < | < |
| > | Büyüktür | > | > |
| & | Ve | & | & |
| " | Alıntı | " | " |
| ' | apostorof | ' (IE'de çalışmaz) | ' |
Bazı Başka Özel Karakterler
| Result | Description | Özel karakterleri | Numaralı Hali |
|---|---|---|---|
| ¢ | Cent | ¢ | ¢ |
| £ | Pound | £ | £ |
| ¥ | Yen | ¥ | ¥ |
| € | Euro | € | € |
| § | Section | § | § |
| © | Copyright | © | © |
| ® | Kayıtlı marka | ® | ® |
| × | Çarpma | × | × |
| ÷ | Bölme | ÷ | ÷ |
Hiç yorum yok:
Yorum Gönder