Block Div Elementi

Başlık

Açıklama satırı

Örnek

<div style="background-color:black; color:white; margin:20px; padding:20px;">

<h2>Başlık</h2>

<p>
Açıklama satırı
</p>

</div>

Yukarıdaki örnekte background-color:black arkaplanı siyah renge dönüştürürken, color:white yazıyı beyaz renge dönüştürür. margin:20px dışardan sayfanın merkezine doğru 20 piksel içe iterken tüm gövdeyi, padding de siyah alanı 20 piksel içeri alacaktır. Yukardaki örnek için kodlar örnek de gösterilmiştir.

Read More

Sırasız HTML Listeler

Sırasız html listeler <ul> etiketi ile başlar. Her liste öğesi ise <li> etiketi ile başlar.

Liste öğeleri küçük siyah daireler ile işaretlenmiş olur.

Sırasız Listesi:

<ul>
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ul>

Sonuç:

• Kahve
• Çay
• Süt

Read More

HTML Tablo Özellikleri

<table>

Tablo Tanımla.

<th>

hücre başlığı tanımla.

<tr>

Tabloda satır tanımlamak için.

<td>

Tablodaki her satır için sütun tanımlaması yapar

Yukarıdaki özellikler her tabloda bulunan temel özelliklerdir

Read More

HTML'de Border Özelliği

HTML'de Border Özelliği

Örnek

<table border=1 style="width:100%;border-collapse:collapse">
  <tr>
    <td>Adı</td>
    <td>Soyadı</td> 
    <td>Sıra Numarası</td>
  </tr>
  <tr>
    <td>Işık</td>
    <td>Soysal</td> 
    <td>94</td>
  </tr>
</table>

Sonuç: 

Adı	Soyadı	Sıra Numarası
Işık	Soysal	94

Read More

HTML'de Border Özelliği

Örnek

<table border=1 style="width:100%">
  <tr>
    <td>Adı</td>
    <td>Soyadı</td> 
    <td>Sıra Numarası</td>
  </tr>
  <tr>
    <td>Işık</td>
    <td>Soysal</td> 
    <td>94</td>
  </tr>
</table>

Sonuç: 

Adı	Soyadı	Sıra Numarası
Işık	Soysal	94

Read More

HTML'DE Tablo Kullanmak

Örnek

<table style="width:100%">
  <tr>
    <td>Adı</td>
    <td>Soyadı</td> 
    <td>Sıra Numarası</td>
  </tr>
  <tr>
    <td>Işık</td>
    <td>Soysal</td> 
    <td>94</td>
  </tr>
</table>

Sonuç:

Adı	Soyadı	Sıra Numarası
Işık	Soysal	94

Read More

Resimlerin görüntü boyutlarını belirlemek

Aşağıdaki örnekde style özelliğini kullanarak resimlere boyut verebilirsiniz.Bu değerler  piksel olarak belirtilir:

Örnek

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">

Read More

HTML 'de resimleri linklemek

Web sitenizdeki resimlere link vermek için aşağıdaki kodları kullanabilirsiniz.

Örnek

<a href="default.asp">
  <img src="smiley.gif" alt="HTML örnek" style="width:42px;height:42px;border:0">
</a>

Read More

HTML Bağlantılar - target özelliği

Target özelliği Bir linke tıkladığınızda gidilen sayfanın ne şekilde açılacağını belirler.

Örnek

<a href="http://www.google.com/" target="_blank">HTML5 Link</a>

Sonuç:

Target Değeri	Açıklama
_blank	Linke tıklanıldığında linki yeni pencerede açar.
_self	Target değeri verilmediğinde varsayılan olarak self özelliği aktiftir.Self özelliği linke tıklanıldığında web sayfasını veya sitesini aynı pencerede açar.
_parent	Yine aynı pencerede açacaktır.
_top	frame gibi iç içe gömülü sayfalarda sıyrılarak aynı pencerede en üst sayfaya geçerek açar.
framename	Açılan pencereye isim verebilirsiniz.

Read More

HTML Bağlantılar - Renkler

Eğer bir bağlantının üzerine fare imlecini hareket ettirdiğinizde, iki şey olur:

• Fare oku  el işaretine dönüşür
• Bağlantı elemanının rengi değişir

Varsayılan olarak, bağlantılar tüm tarayıcılarda aşağıdaki gibi görünecektir:

• Gezilmemiş bağlantılar genelde Altı çizili ve mavi olur
• Ziyaret edilen bir bağlantı Altı çizili ve mor olur
• Genelde üzerine tıklanma durumunda olan link Altı çizili ve kırmızıdır.

Aşağıdaki stilleri kullanarak, varsayılan renkleri değiştirebilirsiniz:

Örnek

<style>
a:link  {color:#000000; background-color:transparent}
a:visited {color:#000000; background-color:transparent}
a:hover   {color:#ff0000; background-color:transparent}
a:active  {color:#ff0000; background-color:transparent}
</style>

Sonuç:
HTML Link

Read More

HTML'de Linkler

Aşağıdaki örnekte bir web sitesine nasıl link verebileceğimizi görmekteyiz.

Örnek:

<a href="http://www.google.com/">Google Web Sitesini Ziyaret Et</a>

Sonuç:
  Google Web Sitesini Ziyaret Et

Read More

Css çizgi özelliği

Paragrafa çizgi eklemek için border özelliğini kullanın

Örnek

p {
    border:1px solid black;
}

Sonuç: p { border:1px solid black; }

Read More

Dışardan css dosyası çağırmak

Eğer birden fazla web sayfanızda css kodları yazmaktan sıkıldıysanız örneğin başlıkların hep mavi olması gibi her sayfa için tek bir css dosyasına ihtiyacınız var demektir. aşağıda oluşturulan styles.css dosyasının nasıl web sayfalarında kullanılacağı gösterilmektedir.

Örnek

<DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Bu bir başlık</h1>
  <p>Bu bir paragraf</p>
</body>

</html>

Read More

CSS Başlangıç, Renk ve Arkaplan Rengi

Eğer html öğrenmediyseniz bu derse başlamamanızı tavsiye ederim çünkü aşağıdaki kod alanında html ağırlıklı css kodları yer almaktadır. Css html e yön veren bir web programlama dilidir. aşağıdaki örnekte html kodlara css ile nasıl renk verildiğini göreceksiniz.color özelliği css 'de rengi temsil etmektedir.background-color özelliği web sayfasının arka rengini temsil eder.

Örnek

<!DOCTYPE html>
<html>

<head>
<style>
  body {background-color:lightgray}
  h1   {color:blue}
  p    {color:green}
</style>
</head>

<body>
  <h1>Mavi renk başlığı</h1>
  <p>yeşil renk paragrafı</p>
</body>

</html>

Read More

HTML 'de açıklama yazmak

HTML DE açıklama yazmak istediğiniz metinleri <!-- --> içine yazmanız gerekir.

ÖRNEK:
<!-- Burası yorum -->

<p>Burası paragraf</p>

<!-- Bir yorum daha -->

Read More

HTML Yazı Ortalamak

Aşağıdaki  "text-align:center" özelliği html'de yazı ortalamak için kullanılır.

Örnek

<!DOCTYPE html>
<html>

<body>
  <h1 style="text-align:center">Ortalanan Başlık</h1>
  <p>Ortalanan paragraf</p>
</body>

</html>

Read More

HTML'de font belirlemek

Aşağıdaki örnekde html içinde font tanımlanmıştır. Sadece bilgisayarınızda bulunan standart font isimlerini web sitesinde kullanabilirsiniz.

Örnek

<!DOCTYPE html>
<html>

<body>
  <h1 style="font-family:verdana">Verdana Fontu</h1>
  <p style="font-family:courier">Courier Fontu</p>
</body>

</html>

Sonuç:

Verdana Fontu

Courier Fontu

Read More

HTML ' de renk uygulamak

Örnek

<!DOCTYPE html>
<html>

<body>
  <h1 style="color:blue">Bu başlık mavi</h1>
  <p style="color:red">Bu paragraf kırmızı</p>
</body>

</html>

Sonuç:

Bu başlık mavi

Bu paragraf kırmızı

Read More

HTML Eğik Yazı

HTML Italic Biçimlendirme

HTML <i> etiketi ile italik yazı yazabilirsiniz. Eğik yazı olarak tanımlanır.

Örnek

<p>Bu yazı normal.</p>

<p><i>Bu yazı italik</i>.</p>

Sonuç:
Bu yazı normal.
Bu yazı italik.

Read More

HTML Bold Etiketi

HTML <b> etiketi kalın yazı yazmak için kullanılır.

Örnek

<p>Bu yazı normal.</p>

<p><b>Bu yazı kalın</b>.</p>

Sonuç:
Bu yazı normal.
Bu yazı kalın.

Read More

HTML Satır Sonları

HTML <br> etiketi ile satır sonu tanımlayabilirsiniz .

Yeni bir paragraf başlatmadan bir satır  istiyorsanız <br> etiketini kullanın:

Örnek

<p>This is<br>a para<br>graph with line breaks</p>

Sonuç:
This is
a para
graph with line breaks

Read More

HTML head Etiketi

HTML <head> öğesi HTML başlıkları ile ilgisi yoktur.

HTML <head> etiketi  sadece meta bilgileri içerir. Meta bilgileri google aramaları için önemlidir özellikle web sitenizin bulunması açısından.

HTML <head> öğesi <html> etiketi ve <body> etiketinin arasına yerleştirilir:

Örnek

<!DOCTYPE html>
<html>

<head>
  <title>BAŞLIK</title>
  <meta charset="UTF-8">
</head>

<body>
.
.
.

Read More

Web Sitenize Yatay Çizgiler Ekleyin

Aşağıdaki kod'da hr etiketi ile paragraf aralarına çizgi eklenmiştir.

<p>Bu bir paragraf</p>
<hr>
<p>Bu bir paragraf</p>
<hr>
<p>Bu bir paragraf</p>

Sonuç:
Bu bir paragraf

---

Bu bir paragraf

---

Bu bir paragraf

Read More

HTML Etiket Özellikleri

Özellik	Açıklama
alt	resimler için kullanılır. Alternatif yazı kullanmak içindir.Fare resim üzerine geldiğinde çalışır.
disabled	input elementini pasif etmek için kullanılır. Örnek olarak yazı yazabildiğiniz bir alana yazı yazamaz hale getirir.
href	Özel web sitesi linkleri için hedef belirtmek için kullanılır. Mesela tıkladığınız linkin www.google.com gibi bir sayfa veya web adresine gitmek için.
id	HTML etiketlerine özel isimler verebilirsiniz.
src	resimlerin bilgisayardaki adıyla kaynağını belirtmek için kullanılır. örnek: image.jpg
style	HTML etiketlerine stil vermek için kullanılır
title	HTML etiketlerine başlık vermek için kullanılır. Tool Tip olarak adlandırılır.
value	input elementinin içindeki metini ifade etmek için kullanılır.

Read More

Başlık Özelliği

title özelliğini paragraf etiketine ekleyerek yazı üzerine fare ile gelindiğinde kısa bir açıklama başlığı ekleyebilirsiniz.
Örnek:
<p title="Google Hakkında">
Google bir arama motorudur.
</p>

Sonuç:

Google bir arama motorudur.

Read More

Web sayfanızda resim göstermek

Kaynak dosya ( src ) özelliğidir buraya resmin nerede olduğunu belirtmeniz gerekir eğer resminiz bir jpg ise ve html dosyanızla aynı klasörde yer alıyorsa sadece logo.jpg olarak kaynak gösterebilirsiniz eğer başka bir web sitesi üzerindeyse http ile başlayarak kaynak aşağıdaki gibi göstermeniz  gerekmektedir, resimin üzerine gelip bir süre bekletildiğinde alternatif metin ( alt )  özelliği ve boyut ( genişlik ve yükseklik ) olarak verilmiştir :

Örnek

<img src="https://www.google.com.tr/images/srpr/logo11w.png" alt="google.com" width="269" height="95">

Sonuç:

Read More

HTML Bağlantıları (Linkler)

HTML bağlantıları ile tanımlanmıştır <a> etiketi:

Örnek

<a href="http://www.google.com">Bu bir link</a>

Sonuç:

Bu bir link

Read More

HTML Paragraf

<p>Bu bir paragraf.</p>
<p>Bu başka bir paragraf.</p>

Yukarıdaki kod da ise paragraf etiketi bu şekilde kullanılır. Eğer web sitelerinde paragraf kullanmak isterseniz bu kodu kullanmalısınız.

Görüntüsü:

Bu bir paragraf.
Bu başka bir paragraf.

Read More

HTML Başlıklar

HTML başlıkları ile tanımlanan etiketler <h1> ile başlayıp <h6> ya kadar devam eden  etiketlerdir:

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

Yukarıdaki kodlar koyu ve büyük  bir başlıktan, küçük başlığa göre sıralanmaktadır. Başlık kullanmak için yukarıdaki etiketleri kullanabilirsiniz.

Read More