HTML5 Nedir, Genel Bilgiler - Mehmet Kaplan

Bu Reklam Alanı Esnektir.

Bu Reklam Alanı Esnektir.

HTML5 Nedir, Genel Bilgiler

HTML5 Nedir, Genel Bilgiler

Nedir ?

Önceki sürümleri ile aynı özellikleri sunmakla birlikte, fırsatlar dünyasının kapılarını açmak için birçok yeni özellikleri bulunmaktadır. Ancak, bazı web yöneticileri zaman harcamaya değmez korkusuyla, HTML5 diline geçiş yapmakta şüpheciler. Eğer siz de hala şüpheci olanlardansanız, aşağıda listelenen HTML5 dilinin üstün faydalarından bazılarına göz atmanızda fayda var.

Nasıl Kullanılır ?

HTML kodlarını Notepad++ , Dreamweaver vb. gibi programlar ile geliştirebilir, düzenleyebilirsiniz. Notepad, hem ücretesiz hemde kullanışlı olduğundan tercih sebebi. Genel olarak bir HTML kod blogu aşağıdaki gibidir:

<html>
  <head>
    <title>Site Başlığı</title>
  </head>
  <body>
    <p>Sitenin İçerik Kısımı</p>
  </body>
</html>

HTML kodları html etiketi ile başlar html etiketi ile sonlanır. Head etiketleri arasında sitenin temel özelliklerinin bulunduğu kısımdır. Bu kısımda sayfa başlığı, css ve js gibi dosyaların linkleri yazılır. Body etiketi, web sayfasına ait içeriğin geleceği kısımı belirtir. Sayfada görünmesi istenilen tüm içerik body etiketleri içinde olmalıdır. Şimdi HTML sayfalarında kullanılan diğer etiketleri inceleyelim:

Başlıklar — Paragraflar -Bağlantılar — Görseller

Başlık(Heading) etiketleri: <h1>, <h2>, <h3>, <h4>, <h5> ve <h6>’dır. <h1> en büyük başlığı, <h6> ise en küçük başlığı temsil eder.

<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>

Paragraf Etiketleri: Paragraf oluşturmak için <p>, </p>etiketi kullanılır. Bir etiketi kapatmak için / karakteri kullanılır. Örnek metin için kullanılan lipsum sitesini ziyaret edebilirsiniz.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis semper est et ligula tincidunt, eget pellentesque justo dapibus. Quisque convallis gravida commodo.
In hac habitasse platea dictumst.
Cras tincidunt urna eu pretium sollicitudin. Praesent ac urna pulvinar, viverra massa lacinia, dapibus metus.
Nulla vel porttitor neque. Sed vel interdum tellus, placerat consequat justo.
Etiam lacinia sem quam, id auctor leo rhoncus vitae. Nam at est sapien.</p>

Bağlantı Etiketleri: HTML’ de linkler <a></a> etiketleri içinde yazılır. Buradaki a harfi İngilizce’deki attribute kelimesinin kısaltmasıdır.

<a href="http://www.mehmetkaplan.net/">Web sitesine git.</a>

Görsel Etiketleri: Web sayfalarına görsel eklemek için <img> etiketini kullanırız. img, image kelimesinin kısaltmasıdır.

<img src="gülücük.gif" alt="gülücük" />

Burada, alt ifadesi resim yüklenmediğinde belirecek ifadedir. height ve width resimin boyutlarını ifade eder.

İçerik Biçimlendirme

Bu kısımda bir içeriğin nasıl biçimlendirileceğini göreceğiz.

strong: Bu etiket yazdığımız yazıları kalınlaştırmak için kullanılır. Alternatifi bold etikedir.

<p>Bu metin normal yazıldı.</p>
<p><strong>Bu metin strong etiketi ile kalın yazıldı.</strong></p>
<b>Bu metin b etiketi kullanılarak yazıldı.</b>

em ve i etiketleri: Yazıları yatık yazmak için kullanılır.

<p>Bu metin normal yazıldı.</p>
<p><em>Bu metin yatık yazıldı.</em></p>
<p><i>Bu metin'de yatık yazıldı.</i></p>

sub ve sup etiketleri: İngilizce subscript ve superscript kelimelerinin kısatlmaları olan sub ve sup dilimizde altyazı ve üstyazı gibi bir anlama gelmektedir.

<p>Bu metin normal yazıldı</p>
<p>Bu metnin <sub>bu kısmı</sub> altta yazıldı</p>
<p>Bu metnin <sup>bu kısmı</sup> üstte yazıldı</p>

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.

<p><s>Bu metin üzeri çizili yazıldı.</s></p>
<p><del>Bu metin de üzeri çizili yazıldı.</del></p>
<p><strike>Bu metin de üzeri çizili yazıldı. Fakat kodu yanlış.</strike></p>
<p><u>Bu metin altı çizili yazıldı.</u></p>

small ve big etiketleri: Small: küçük, Big: büyük anlamındadır. Yazıları büyük ve küçük yazmaya yarar.

<p>normal metin</p>
<p><small>küçük metin</small></p>
<p><big>büyük metin</big></p>

center etiketi: Center bir ifadeyi ortalamak için kullanılır.

<p>Selam</p>
<p><center>naber?</center></p>

tt etiketi: İngilizcesi teletype kelimesinin kısaltması olan tt etiketi daktilo tipinde yazmayı sağlar.

<p>Normal yazıldı.</p>
<p><tt>Daktilo tipinde yazıldı.</tt></p>

cite ve abbr etiketleri: Cite alıntı anlamına gelir. abbr ise kısaltmalar için kullanılır.

<p><cite>"Alıntı yapıldı."</cite></p>
<p><abbr title="Türkiye Cumhuriyeti">T.C</abbr> laik bir devlettir.</p>

br ve hr etiketleri: br satır atlamak için kullanılır. hr etiketiketi yatay çizgi oluşturmak için kullanılır.

<p>Gökhan<br />Yavaş</p>
<hr>
<p>Gökhan Yavaş</p>

liste etiketleri: <ol> sıralı liste oluşturmak için <ul> ise sırasız liste oluşturmak için kullanılır.

<ul>
    <li>HTML</li>
    <li>SQL</li>
</ul>
<ol>
    <li>JS</li>
    <li>CSS</li>
</ol>

tanımlama listeleri oluşturma: <dl>,<dt>,<dd> etiketleri kullanılır. Örnek kullanımı aşağıdaki gibidir:

<dl>
    <dt>Yazılım Dilleri</dt>
    <dd>Python</dd>
    <dd>JAVA</dd>
    <dd>Go</dd>
    <br />
    <dt>Veritabanı Dilleri</dt>
    <dd>SQL</dd>
    <dd>T-SQL</dd>
    <dd>PLSQL</dd>
</dl>

Genel olarak HTML etiketleri bu şekilde bir sonraki yazımda diğer etiketleri inceliyor olacağız.

Bu Reklam Alanı Esnektir.

  • Paylaş
  • 0

Benzer İçerikler

gravatar

mehmetkpln18

Architect, Graphic Designer and Website Developer

Mehmet Kaplan, yeni mezun bir mimar, web ve grafik tasarımcısı, araştırmacı. Tasarım, programlama ve kodlama konusunda tutkusu olan biri.

Yorumlar Yorum Yok

Bilgi :Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.

Bu Reklam Alanı Esnektir.

Bu Reklam Alanı Esnektir.