Kingzaaweb. Blogger tarafından desteklenmektedir.

Block Div Elementi

Posted by Kingzaaweb on 01:47 with No comments so far

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.

Sırasız HTML Listeler

Posted by Kingzaaweb on 01:41 with No comments so far

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

HTML Tablo Özellikleri

Posted by Kingzaaweb on 01:39 with No comments so far
<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

HTML Tablolarda keskin çizgiler kullanmak

Posted by Kingzaaweb on 02:31 with No comments so far

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

HTML'de Border Özelliği

Posted by Kingzaaweb on 02:29 with No comments so far
Ö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şıkSoysal94

HTML'DE Tablo Kullanmak

Posted by Kingzaaweb on 02:27 with No comments so far
Ö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

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

Posted by Kingzaaweb on 02:24 with No comments so far

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

HTML 'de resimleri linklemek

Posted by Kingzaaweb on 02:21 with No comments so far

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>

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

Posted by Kingzaaweb on 02:20 with No comments so far
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ğeriAçıklama
_blankLinke tıklanıldığında linki yeni pencerede açar.
_selfTarget 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.
_parentYine aynı pencerede açacaktır.
_topframe gibi iç içe gömülü sayfalarda sıyrılarak
aynı pencerede en üst sayfaya geçerek açar.
framenameAçılan pencereye isim verebilirsiniz.




HTML Bağlantılar - Renkler

Posted by Kingzaaweb on 02:11 with No comments so far

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

HTML'de Linkler

Posted by Kingzaaweb on 02:07 with No comments so far

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

Css çizgi özelliği

Posted by Unknown on 03:40 with No comments so far

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

Örnek

p {
    border:1px solid black;
}

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

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

Posted by Unknown on 02:57 with No comments so far

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>

CSS Başlangıç, Renk ve Arkaplan Rengi

Posted by Unknown on 01:57 with No comments so far

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>

HTML 'de açıklama yazmak

Posted by Unknown on 01:45 with No comments so far
HTML DE açıklama yazmak istediğiniz metinleri <!-- --> içine yazmanız gerekir.

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

<p>Burası paragraf</p>

<!-- Bir yorum daha -->

HTML Yazı Ortalamak

Posted by Unknown on 01:42 with No comments so far

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>

HTML'de font belirlemek

Posted by Unknown on 01:26 with No comments so far

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

HTML ' de renk uygulamak

Posted by Unknown on 01:01 with No comments so far

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

HTML Eğik Yazı

Posted by Unknown on 05:41 with No comments so far

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.

HTML Bold Etiketi

Posted by Unknown on 05:17 with 1 comment so far
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.
Kaydol: Kayıtlar (Atom)