dislanze
v10
today : | at : dislanze | safemode : ON
> / home / facebook / twitter / exit /
name author perms com modified label

Temel HTML Kodları [ Acıklamalarıyla Beraber ] Süleyman Akyıldız rwxr-xr-x 0 Temmuz 16, 2013

Filename Temel HTML Kodları [ Acıklamalarıyla Beraber ]
Permission rw-r--r--
Author Süleyman Akyıldız
Date and Time Temmuz 16, 2013
Label
Action
 Herkese Merhaba Bu Kodları Düzenlemek İçin Baya Bi Zaman Harcadım Aslında Basit Bir Olay Ama Bu Aralar Fazla İlgilenemediğim İçin Parça Parça Düzenledim.:)

Hemen Sizlerle Paylaşmak İstiyorum Çünkü Bu Kodlar Bir Webmasterin Kesinlikle Bilmesi Gereken Temel Kodlardır Ve Ben Sizlere Bu Kodları Örnek Ve Açıklamalarıyla Oluşturdum.

Konumuza Geçelim.;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> gibi.

AÇIKLAMA:
<!DOCTYPE tagı ile hangi dökümanı kullandığımızı belirleriz


ÖRNEK:
<html></html>

AÇIKLAMA:
Döküman hakkında bilgilerin başladığına dair haber veririz.

ÖRNEK:
<head></head>

AÇIKLAMA:
Döküman hakkında bilgileri head tagları arasına yerleştiririz. Bilgiler görünmez gömülü kalır.(css, javascript vb. bilgiler.)

ÖRNEK:
<link rel="stylesheet" type="text/css" href="http://www.destweb.blogspot.com/örnek.css olmak zorundadır." />



AÇIKLAMA:
<link> tagı sitemizde veya başka bir sitede (adreste) bulunan "css stil" dosyalarını (kodlarını) çağırmak için kullanılan bir bağlantı görevi görür.<link> tagı, <head> ile </head> tagları arasında kullanılır.


ÖRNEK:
<head>
<link rel="stylesheet" type="text/css" href="/örnek.css" />
</head>




ÖRNEK:

<body><body>

AÇIKLAMA:
<body> tagı arasına eklediğimiz içerikler görünmesini istediğimiz içeriklerimizdir. Body tagı <head> tagından sonra gelir.




ÖRNEK:
<p> Bu yazılar "paragraf" kullanılarak yazılmıştır.<p>

AÇIKLAMA:
<p> tagı yazılarımızı "paragraf" halinde yazmamızı sağlar.




ÖRNEK:
<pre>Burda alanda yazdığım yazılar yazdığım gibi görünüyor. N güsel :$ <pre>

AÇIKLAMA:
<pre> tagı arasında yazılan yazılar yazıldığı gibi görünür. Örnek olarak; Hazırladığımız yazılarda satır atlatmak için <br> tagını kullanmaya gerek kalmaz.


ÖRNEK:
<font>Yazımız</font>

AÇIKLAMA:
<font> tagını kullanarak, yazılarımıza renkler, boyutlar, açıklamalar, (title) değişik stiller ekleyebiliriz.


ÖRNEK ;

<font style="color:blue; font-size:2em;font-family:roman;" title="font kod açıklaması">gibi, özellikler belirtebiliriz.</font>


ÖRNEK:
<i>Bu tagın arasındaki yazılar italik (eğik) yazılmıştır.<i>

AÇIKLAMA:
<i> tagı yazılarımızı italik (eğik) olarak yazmamızı sağlar.Bu tag arasında yazılan makale veya yazı, ince halde eğik olarak görünür.


ÖRNEK:
<b>Bu yazılar bold (kalın) yazılmıştır.<b>

AÇIKLAMA:
<b> tagı yazılarımızı bold (kalın) belirgin olarak yazmamızı sağlar.Bu tag arasında yazılan makale veya yazı, belirgin (kalın) halde görünür.


ÖRNEK:
<u> Tagı ile altı çizgili yazı yazıyorum.</u>

AÇIKLAMA:
<u> tagı arasında yazdığımız yazılar, "altı çigili görünür." Genelde üstünü basa basa, anlatmak istediğimiz kelimeler için kullanırız.


ÖRNEK:
ali merveye selam verdi.<br>
naber ?<br>
merve cevap verdi:<br>
Teşekkürler Ali bey iyiyim, siz nasılsın?



AÇIKLAMA:
<br> tagı yeni "boş" bir paragraf oluşturmamızı ve yazılarımızın "alt altta" gelmesini sağlar. Uzun bir anlatım (metin, yada makale) yapacaksanız eğer, <br> tagı yerine <pre> tagını kullanmanızı tavsiye ederim. Yazılarınız ilk düzenlenlediğiniz gibi (normal haliyle) görünür.


<PRE> TAGI İÇİN BİR ÖRNEK:
<pre>
ali merveye selam verdi
naber ?
mervecevap verdi:
Teşekkürler Ali bey iyiyim, siz nasılsın?
</pre>




ÖRNEK:
<s>Örnek kullanım.</s>



AÇIKLAMA:
<s> tagı içinde kullanılan yazılar üzeri çizgili olarak ekrana yansır. Genelde yalnış yazılan yazılara örnek olarak kullanırız.




ÖRNEK:
<code>Yazıyı genişleterek özel bir yazı tipi tanımlar.</code>


AÇIKLAMA:
<code> tagı içinde yazdıımız yazılar italik şeklinde ve genişlik aralıklar halinde ekrana yansır. Genelde kod paylaşımı için kullanırız.


ÖRNEK:
<cite>Örnek tag kullanımı.</cite>



AÇIKLAMA:
<cite> tagı içinde yazdıımız yazılar italik olarak ekrana yansır.


ÖRNEK:
<hr align=left color=blue size=10 width=300>


SADE KULLANIMI:
<hr>

AÇIKLAMA:
<hr> tagını sayfayı ayırmak ortadan çizgi halini alması için kullanırı. Tablo çizgilerine benzer bir çizgi çizer.




ÖRNEK KULLANIMLAR:
<h1>Başlık Yazımız</h1>

<h2>Başlık Yazımız</h2>

<h3>Başlık Yazımız</h3>

<h4>Başlık Yazımız</h4>

<h5>Başlık Yazımız</h5>

<h6>Başlık Yazımız</h6>



AÇIKLAMA:
<h1> ile başlayıp <h6>'ya kadar değer verilebilen bu taglar belli birer değerlere sahip olup, başlıklar oluşturmamızı sağlar. Stil referansları belirtilerek, başlıklarımızı daha görkemli bir hal almasını sağlayabiliriz.


ÖRNEK:
<a href="Url adresi" title="Açıklama mesajı">Link Adı</a>

AÇIKLAMA:
<a> tagını kullanarak yazılarımıza link verebiliriz. A tagının diğer bir adı <link>'tir ve XML'de kullanılır. <a> tagı bizi yada ziyeretçilerimizi istediğimiz bir yola (adrese) (url'ye) yönlendirmesini sağlarız.


KULLANIM ÖRNEĞİ:
<a href="http://www.destweb.blogspot.com/css.htm" title="Css Kodları hakkında bilgiler">Css Kodları</a>


ÖRNEK:
<img src="Resmin Url adresi" title="Resmin Açıklaması" alt="Resmin adı"></img>

AÇIKLAMA:
<img> tagını resim eklemek için kullanırız. <img> tagını kullanırken </img> şeklinde kapatmaya gerek yoktur.


KULLANMA ÖRNEĞİ:
<img src="http://bumerang.hurriyet.com.tr/images/bumerangcampaignimages/thumb-0a9e3975-469e-431a-ab55-b2f4aac8b9d3.jpg" title="Microsoft" alt="Microsoft Reklam"></img>




ÖRNEK:
<ul>
<li>Liste</li>
<li>Listeler</li>
<li>Listeleme</li>
<li>Listelemeler</li>
</ul>

AÇIKLAMA:
<ul> tagı içinde <li> taglarını kullanarak listeleme yapabiliriz.<li> tagı (listeleme), <ul> tagı ile başlar ve aynı şekilde </ul> tagı ile sonlandırılır.

ÖRNEK:
<ol>
<li>Liste</li>
<li>Listeler</li>
<li>Listeleme</li>
<li>Listelemeler</li>
</ol>

AÇIKLAMA:
<ol> tagı numaralı listeleme yapmamızı sağlar. Numaralı listeler oluştururken, liste başlarına; 1.liste 2.liste gibi sayıları yazmaya gerek kalmadan <ol> tagını kullanarak numaralı listeler oluşturabiliriz.




ÖRNEK:
<marquee></marquee>

AÇIKLAMA:
<marquee> tagını yazılarımızı sağdan sola, soladan sağa, aşağıdan yukarıya, yukarıdan aşağıya kaymasını sağlamak için kullanırız.


ÖRNEK:
<comment></comment>



AÇIKLAMA:
<comment>tagı içinde yazdığınız yazılar web sayfasında görünmez gömülü kalır.


ÖRNEK:
<center>Burdaki içeriklerimiz ekran ortalanarak görünür.</center>



AÇIKLAMA:
<center>tagını yazı yada içeriklerimizi ortalamak için kullanırız.


ÖRNEK:
<ifame src="http://www.destweb.blogspot.com/css.htm" border="0" width="600" height="900"></iframe>



AÇIKLAMA:
<iframe> tagını başka bir sitedeki içeriği (video, resim) veya sayfayı olduğu gibi kendi sitemizde göstermek için kullanırız.


Teşekkürler.



0 yorum:

Yorum Gönderme