| 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 | WebSite Çözümleri |
| Action |
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önder