Html etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Html etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Css Kodu Nasıl Yazılır? - Html Div Kullanımı
Hiç yorum yok:
Etiketler:
Css,
Div Kullanımı,
Html
Birincisi:
.csskodu{
kodlar
}
İkincisi:
#csskodu{
kodlar
}
Üçüncüsü:
csskodu{
kodlar
}
bu komutların kullanımı html sayfasında farklıdır fakat alacağımız sonuçlar aynıdır. Biraz kafanız karıştıysa yazının devamını okumaya devam edin :).
Birincisinin html kodu:
<div class="csskodu">Kodlar</div>
İkincisinin html kodu:
<div id="csskodu">Kodlar</div>
Üçüncüsünün html kodu:
<csskodu>kodlar</csskodu>
yani buradan anlayacağımız divde kullanacağımız ismi belirtirken nokta "." ile başlarsak div class oluyor, # (diyez) işareti olarak başlarsak div id oluyor, başına bir işaret koymuyorsak aynı <center> gibi kullanabiliyoruz. Biz genellikle class olanını yani nokta ile başlayanını tercih ediyoruz fakat diğerleriyle arasında bir fark yoktur.
Öyleyse şimdi kodları yazmaya başlayalım.
Öncelikle css dosyasını açalım ve şu kodları ekleyelim;
.baslangic{
background-color:red; /*Arkaplan rengini belirtir.*/
width:150px; /*Genişliğini belirtir.*/
height:150px; /*Uzunluğunu belirtir.*/
border-style: solid; /*Kenarlık türünü belirtir.*/
border-width: 1px; /*Kenarlık kalınlığını belirtir.*/
border-color: black; /*Kenarlık rengini belirtir.*/
color:white; /*Yazı rengini belirtir.*/
}
Şimdi html sayfamızı açalım ve <body> </body> etiketleri arasına şu kodu ekleyelim;
<div class="baslangic">Merhaba Mars</div>
Sonuç:
Yazı rengi beyaz olan, siyah, 1px kalınlığında, solid türünde çerçeveli kırmızı bir kutu eklemiş olduk.
Eee bu yazıyı 1 saattir okuyorum kardeşim bu muydu? Diyecek olursanız; unutmayın emeklenmeden yürünmüyor :).
Bunları yapmadan önce Html Sayfasına Css Tanımlama yazımı da okumalısınız.
Meta Etiketlerinin Kullanımı
Hiç yorum yok:
Etiketler:
Html,
Meta Etiketleri,
Meta Tags
Meta etiketleri seo çalışmalarının olmazsa olmazlarından biridir.
Meta etiketlerinde name kısmı etiketin ismi, content özelliğini tanımlamak için kullanılır.
İşte meta etiketleri:
abstract
Sayfa kısa açıklamasının belirtilmesi için kullanılır.
<meta name="abstract" content="Meta etiketlerinin kullanımı hakkında bilgi veren sayfa" />
copyright
Sayfanın telif hakkının belirtilmesi için kullanılır.
<meta name="copyright" content="(c) 2016 Websitekodlariz Tüm Hakları Saklıdır" />
designer
Sayfanın tasarımcısının belirtilmesi için kullanılır.
<meta name="designer" content="Cihan Kiracı" />
author
Sayfanın yazarını ve iletişim bilgilerini belirtmek için kullanılır.
<meta name="author" content="Cihan Kiracı, cihan2krc@outlook.com" />
content-language
Sayfa dilini belirtir, alttaki örnekte Türkçe belirtilmiştir.
<meta name="content-language" content="tr" />
Aynı zamanda aşağıdaki örnekte dil olarak Türkiye Türkçesi kullanıldığı belirtilmiştir.
<meta name="content-language" content="tr-TR" />
content-type
Sayfanın içerik tipini ve karakter setini belirtmek için kullanılır.
<meta name="content-type" content="text/html charset=utf-8" />
<meta http-equiv="content-type" content="text/html charset=utf-8" />
description
Sayfanın tam açıklamasının belirtilmesi için kullanılır.
<meta name="description" content="Meta etiketlerinin kullanımı, seo etkisi hakkında detaylı bilgi veren güncel sayfa." />
distribution
Sayfanın hitap ettiği bölgenin belirtilmesi için kullanılır.
- Global : Tüm internet ağına hitap ettiğini belirtir.
- Local : Sitenin bulunduğu IP adres bloğunun ait olduğu ülkeye hitap ettiğini belirtir.
- IU (Internal Use) : Kamuya hitap etmediğini belirtir.
<meta name="distribution" content="local" />
expires
Sayfanın son geçerli olduğu tarihi gmt formatında verir. Bu özelliği kapatmak için content değerini 0 yapmalısınız.
<meta name="expires" content="Thu, 31 Dec 2009 23:59:59 GMT" />
generator
Sayfayı oluşturmak için kullanılan programı belirtmek için kullanılır.
<meta name="generator" content="Notepad v7.2.2" />
keywords
Sayfa ile alakalı anahtar kelimeleri belirtmek için kullanılır.
<meta name="keywords" content="html, meta, tags, keywords" />
language
İngilizce olmayan sayfalarda İngilizce sayfa dilinin belirtilmesi için kullanılır.
<meta name="language" content="Turkish" />
publisher
Sayfayı yayınlayan uygulamayı belirtmek için kullanılır.
<meta name="publisher" content="VS 2015" />
reply-to
Sayfa hakkında e-posta adresi belirtilmesi için kullanılır.
<meta name="reply-to" content="cihan2krc@outlook.com" />
revisit-after
Arama motorlarına ne sıklıkla siteye uğraması gerektiğini belirtmek için kullanılır.
<meta name="revisit-after" content="5 days" />
refresh
Sayfayı belirtilen sürede, belirlenen sayfaya yönlendirmek için kullanılır.
Alttaki örnekte sayfa 5 saniyede bir kendini yeniler.
<meta name="refresh" content="5" />
Alttaki örnekte ise 20 saniye sonra belirtilen urlye yönlendirme yapar.
<meta name="refresh" content="20;belirtilen url" />
title
Sayfanın başlığını belirler, <title> </title> etiketinden bir farkı yoktur.
<meta name="title" content="Meta Etiketleri" />
robots
Sayfayı gezen arama motorlarına nasıl davranması gerektiğini belirtmek için kullanılır.
Örnekler:
<meta name="robots" content="all" />
<meta name="robots" content="noindex, follow" />
<meta name="robots" content="index, nofollow, noarchive" />
Aynı zamanda meta etiketleri arama motorları için özel olarak ta kullanılabilir.
<meta name="googlebot" content="noindex" />
Html Sayfasına Css Tanımlama
Hiç yorum yok:
Etiketler:
Css,
Html,
Html ile Css Bağlamak
Css kodlarımızı Html sayfasına yansıtmanın birden fazla yolu vardır. Bunlardan bazıları şunlardır:
1) Html sayfamızda <head> </head> etiketleri arasına;
<style type="text/css">
Css Kodları Buraya Yazılacak
</style>
eklemek.
2) Uzantısı .css olan bir metin dosyası içine tüm css kodları yazmak ve head etiketleri arasına;
<link rel="stylesheet" type="text/css" href="Buraya css dosyasının adresini yazın" />
ekleyerek css'i çağırmak.
Html5 İskeleti
Hiç yorum yok:
Etiketler:
Html,
Html5,
Html5 Kodları
Html5 oldukça kullanışlı, mutlaka öğrenilmesi gereken, Html'ın son dilidir.
Html5'i tek başına kullanmak tasarımsal anlamdan pek bir işimize yaramaz. Bunun için Css'in son sürümü olan Css3'ü öğrenmeliyiz. Kısacası Html'i bir duvar olarak düşünürsek, Css boyadır. Kullanışlı duvarlara uyumlu boyalar sürerseniz iyi bir tasarımcı olursunuz.
İşte HTML5 İskeleti:
<!DOCTYPE html>
<html lang=“tr”>
<head>
<title>Html5 İskeleti</title>
<meta charset=“utf-8”>
<!–[if lt IE 9]>
http://html5shiv.googlecode.com/svn/trunk/html5.js
<![endif]–>
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
<h1>Html5 İskeleti</h1>
</header>
<nav>
<ul>
<li><a href="#">K1</a></li>
<li><a href="#">K2</a></li>
<li><a href="#">K3</a></li>
</ul>
</nav>
<section>
<h1>Başlık</h1>
<article>
<h2>Deneme Başlık</h2>
<p> Deneme metin</p>
</article>
<article>
<h2>Website Kodları</h2>
<p>HTML5</p>
</article>
<article>
<h2>Merhaba</h2>
<p>Dünya</p>
</article>
</section>
<footer>
<p>© 2016 Webkodlariz</p>
</footer>
</body>
</html>
Kaydol:
Kayıtlar (Atom)