• Ana Sayfa
  
  Hoşgeldiniz !
  Bu sitede HTML,CSS ve PHP kodları kullanılarak yapılmış tamamen kişisel bir hobi ürünüdür.
  Bu siteyi yayınlamamın amacı, Bu sitede sizlere faydalı olacağını düşündüğüm bazı uygulamalar bulacaksınız. Lütfen eleştiri ve görüşlerinizi bana iletiniz. Site sizlerin önerisi ve katılımıyla daha faydalı olacaktır.
• Bilgi Teknolojileri

  Bilgi Teknolojileri Hakkında Çalışmalar

  HTML Dersleri

  • HTML Nedir ?
  • HTML Giriş
  • Metin Formları
  • Başlık Etiketleri
  • Liste Yapmak
  • Link İşlemleri
  • Resim İşlemleri
  • İleri Tablo
  • Sayfa Yenileme
  • Sayfa Yönlendirme
  • Ses Çaldırma
  • Buton Yapma
  • Kayan Yazı
  • Kaydırma Çubuğu

  CSS Dersleri

  • CSS Nedir ?
  • CSS Başlarken
  • HTML Sayfasında
  • CSS Eklentili Web
  • Margin Kullanımı
  • ID Hower
  • Transform Kullanımı
  • Web Katmanları

  Network Dersleri

  • Network Nedir ?
  • RJ45 Konnetkör Sıkma
  • Kablo Kategorisi
  • Switch Kurulumu

  PC Teknikleri

  • USB Port Kapatma
  • E-Posta Kuralları

  
  

  Excel Kullanımı

  • Excele Giriş
  • Excel Formülleri
  • Excel Makro Formülleri
• Seyahat Resimlerim

  İş veya Gezi Seyahatleim Anılar ve Oluşan Dostluklar

  • Adana
  • Elazığ
  • Rize
  • Van

  • Ankara
  • İstanbul
  • Samsun

  • Antalya
  • İzmir
  • Trabzon

  • Diyarbakır
  • Kayseri
  • Erzurum
• SAP Meterial

  SAP Meterial (SAP Malzeme Modülü)

  • Tedarik Süreci
  • Mal Girişi

  • Satınalma Talebi
  • Ödeme İşlemleri

  • Satınalma Siparişi
  • Süreç Ekranları
• Call Center
  • Çağrı Merkezi
  • Çağrı Merkezi Terimleri
  • Agent Motivasyonu
  • Kalite Yönetimi
  • Tele Satış
• Makaleler
  • Teknoloji
  • Sağlık
  • Spor
  • Sanat
  • Tarih
  • Mizah
• İletişim
  • Hakkımda
  • Sayfama Not Bırakınız
  • Ziyaretçi Defteri

HTML5 METİN FORMLARI (Metin Biçimlendirme)

Bu dersimizde yazdığımız bir içeriğ nasıl biçimlendirebileceğimizi ve biçimlendirmede kullanılan etiketlerden bahsedeceğim.

Şayet sitenizdeki yazı formu tek tip olmasını istiyorsanız (önerilen bu biçimdedir) bu işi CSS dosya kısmında yapabilirsiniz. yinede isterseniz sayfa içerisinde istediğiniz metin ve metin kümesini CSS'den ayrı biçimde yapabilirsiniz.

---

<strong> etiketi;

Metinlerimizi <strong> </strong> etiketi arasına yazdığımız yazıları kalınlaştırmak için kullanılır. Alternatifi bold kelimesinin kısaltması olan <b> etiketidir. aynı işi yapar ama biz HTML5 için yine de <strong> etiketini kullanalım.

Şimdi aşağıdaki kodu inceleyelim:

<p>Bu metin normal olarak etiketsiz yazıldı.</p> <p><strong>Bu metin<strong>etiketi ile yazıldı</strong></p> <p><b>Bu metin<b>etiketi ile yazıldı.</b></p>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir.

Bu metin normal olarak etiketsiz yazıldı. Bu metin <strong> etiketi ile yazıldı Bu metin <b> etiket olarak yazıldı.

---

<em> etiketi;

<em> etiketi yazdığımız yazıları yatıklaştırmak için yani yazılarımızı italik hâle getirmek için kullanılır. Alternatifi italic kelimesinin kısaltması olan <i> etiketidir.

Şimdi aşağıdaki kodu inceleyelim.

<p>Bu metin normal olarak etiketsiz yazıldı.</p> <p><em>Bu metin<em>etiketi ile yazıldı</em></p> <p><i>Bu metin<i>etiketi ile yazıldı.<i></p>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir.

Bu metin normal olarak etiketsiz yazıldı. Bu metin <em> etiketi ile yatık yazıldı. Bu metin <i> ile yatık yazıldı.

---

<sub> ve <sup> etiketleri;

İngilizce subscript ve superscript kelimelerinin kısatlmaları olan sub ve sup dilimizde altyazı ve üstyazı gibi bir anlama gelmektedir. Adından da anlaşılacağı gibi yazıları altyazı ve üstyazı hâline getirmeye yarar. Bilimsel makaleler dışında çok sık kullanılmaz.

Şimdi aşağıdaki kodu inceleyelim:

<p>Bu metin normal olarak etiketsiz yazıldı.</p> <p>Bu metnin _{bu kısmı} altta yazıldı.</p> <p>Bu metnin ^{bu kısmı} üstte yazıldı.</p>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir.

Bu metin normal olarak etiketsiz yazıldı. Bu metnin bu kısmı altta yazıldı. Bu metnin bu kısmı üstte yazıldı.

---

<s> ve <u> etiketleri;

<s> etiketi İngilizce'de strike kelimesinin kısaltmasıdır. Yazıların üzerini çizmeye yarar. <strike> şeklinde de yazılır; fakat HTML5 bu yazım formatını desteklemez. Bunun yerine <del> etiketini kullanmalısınız. <u> etiketi İngilizce'de underline kelimesinin kısaltmasıdır. Yazıların altını çizmeye yarar.

Şimdi aşağıdaki kodu inceleyelim.

<p>Bu metin etiketsiz olarak normal yazıldı.</p> <p><s>Bu metin <s> etiketi olarak üzeri çizili yazıldı.</s></p> <p><del>Bu metin <del> etiketi olarak üzeri çizili yazıldı.</del></p> <p><u>Bu metin <u> etiketi olarakaltı çizili yazıldı.</u></p>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir.

Bu metin etiketsiz olarak normal yazıldı. Bu metin <s> etiketi olarak üzeri çizili yazıldı. Bu metin <del> etiketi olarak üzeri çizili yazıldı. Bu metin <u> etiketi olarakaltı çizili yazıldı.

---

<small> ve <big> etiketleri;

Small ve big dilimizde küçük ve büyük anlamındadır. <small> ve <big> etiketleri sırasıyla yazıları küçük ve büyük yazmaya yarar. <small> etiketi çoğu zaman sitelerin copyright yani telif hakkı kısmındaki metinde kullanılır.

Şimdi aşağıdaki kodu inceleyelim:

<p>Bu metin etiketsiz olarak normal yazıldı.</p> <p><small>Bu metin<small>etiketi ile küçük yazıldı.</small></p> <p><big>Bu metin<big>etiketi ile büyük yazıldı.</big></p>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir.

Bu metin etiketsiz olarak normal yazıldı. Bu metin <small>etiketi ile küçük yazıldı. Bu metin <big>etiketi ile büyük yazıldı.

---

<center> etiketi;

Center dilimizde merkez anlamına gelmektedir. <center> etiketi yazıları ortalamak için kullanılır. HTML5 bu etiketi desteklemez. Bunun yerine CSS kodları tercih edilir. Yine de birçok tasarımcı hâlâ bu etiketi gerektiğinde kullanmaktadırlar.

Şimdi aşağıdaki kodu inceleyelim:

<p>Bu metin etiketsiz olarak normal yazıldı.</p> <p><center>Bu metin <center> etiketi ile ortalandı.</center></p>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir.

Bu metin etiketsiz olarak normal yazıldı. Bu metin <center> etiketi ile ortalandı.

---

<cite> ve <abbr> etiketleri;

Cite dilimizde alıntı anlamına gelmektedir. <cite> etiketi ise alıntı yaptığımızda kullanılır. <abbr> etiketi ise dilimizde "kısaltma" anlamına gelen İngilizce'deki abbreviation kelimesinin kısaltmasıdır. <abbr> ise kısaltma şeklinde yazılan bir kelimenin tanımını verir. title atıfı yardımı ile yazılır. Fare imleci ile kısaltılmış kelimenin üzerine gelince tanım ortaya çıkar.

Şimdi aşağıdaki kodu inceleyelim:

<p>Bu metin etiketsiz olarak normal yazıldı.</p> <p><cite>"Bu metin alıntı şeklinde yazıldı."</cite></p> <p><abbr title="Türkiye Büyük Millet Meclisi">TBMM</abbr> 23 Nisan 1920 tarihinde kuruldu.</p>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir. Mause'nizi TBMM üzerine getiriniz.

Bu metin etiketsiz olarak normal yazıldı. "Bu metin alıntı şeklinde yazıldı." TBMM 23 Nisan 1920 tarihinde kuruldu.

---

<dl>, <dt> ve <dd> etiketleri;

<dl> etiketi İngilizce'deki definition list kelimelerinin kısaltmasıdır. Dilimizde "tanımlama listesi" gibi bir anlama denk gelmektedir. Tanım listeleri oluşturmak için kullanılır. <dt> (definition item) etiketi tanım listesinin elemanlarını belirtirken; <dd> (definition description) etiketi ise liste elemanlarını tanımlar.

Şimdi aşağıdaki kodu inceleyelim:

<dl> <dt>Kahve Türleri</dt> <dd>Kolombiya</dd> <dd>Kenya</dd> <dd>Brezilya</dd> <br /> <dt>Çay Türleri</dt> <dd>Türk çayı</dd> <dd>Seylon çayı</dd> <dd>İngiliz çayı</dd> </dl>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir.

Kahve Türleri Kolombiya Kenya Brezilya Çay Türleri Türk çayı Seylon çayı İngiliz çayı

---

<ol>, <ul> ve <li> etiketleri;

Bu etiketler liste oluşturmak için kullanılır. <ol> dilimizde "sıralı liste" anlamına gelen ordered list kelimelerinin kısaltmasıdır. Sıralı liste oluşturmamıza yarar. <ul> ise dilimizde "sırasız liste" anlamındaki unordered list kelimelerinin kısaltmasıdır. Sırasız liste oluşturmamızı sağlar. <li> ise "liste elemanı"nın kısaltması olan list item kelimelerinin baş harflerini simgeler. Sıralı ya da sırasız listelerdeki elemanları <li> etiketinin içine yazarız. <ul> ve <li> etiketleri sıklıklıkla sitelerin menüleri oluşturulurken kullanılır.

Şimdi aşağıdaki kodu inceleyelim:

<ul> <li>Çiçek</li> <li>Böcek</li> <li>Kuş</li> <li>Balık</li> </ul> <ol> <li>Toplama</li> <li>Çıkarma</li> <li>Çarpma</li> <li>Bölme</li> </ol>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir. Mause'nizi TBMM üzerine getiriniz.

Çiçek Böcek Kuş Balık Toplama Çıkarma Çarpma Bölme

---

<br> ve <hr> etiketleri;

<img> etiketi gibi <br> ve <hr> etiketleri de "boş etiket" sınıfındadır. Daima bu şekilde yazılırlar. <br> etiketi dilimizde "satır boşluğu" anlamına gelen line break sözüne ithaf eder. Bir satırlık boşluk oluşturmak için kullanılır. <hr> etiketi ise dilimizde "yatay cetvel" anlamına gelen horizontal rule kelimelerinin kısaltmasıdır. Bir satırlık yatay bir çizgi oluşturmaya yarar.

Şimdi aşağıdaki kodu inceleyelim:

<ul> <li>Çiçek</li> <li>Böcek</li> <li>Kuş</li> <li>Balık</li> </ul> <ol> <li>Toplama</li> <li>Çıkarma</li> <li>Çarpma</li> <li>Bölme</li> </ol>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir. Mause'nizi TBMM üzerine getiriniz.

Bu metin normal yazıldı. Bu metin iki satırda yazıldı. Bu metin etiketsiz olarak normal yazıldı. Bu metin üç satırda yazıldı.

Metin içerisinde renk kullanımı;

Şimdi aşağıdaki kodu inceleyelim:

<p>Bu <span style="color: red">kelime</span>nin rengini degistirdim.</p>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir.

Bu kelimenin rengini degistirdim.

---

<mark> Etiketi;

<mark> Etiketi ile, metin içerisinde vurgulanmak istenilen metin kümesini fosforlu renk ile vurgulama yapabiliriz.

Şimdi aşağıdaki kodu inceleyelim:

<p>Bu cümledeki vurgulanmış kelime <mark>Elmadag Kayak Merkezi</mark>dır.</p>

Şimdi çıktıına bakalım, yukarıdaki kodlar İnternet tarayıcınız tarafından yorumlanıp sayfamızda aşağıdaki biçimde görüntülenecektir.

Bu cümledeki vurgulanmış kelime Elmadag Kayak Merkezidır.

Bu dersimizide burada sonlandırıyoruz.