Popüler Aramalar:  TLS Nedir?  MyBB SSL Ayarları  MyBB 1.8 Linkleri Gizleme Eklentisi  Wordpress LiteSpeed Cache Ayarları  Wordpress Eklentisiz Breadcrumb  Yandex Webmaster
Temel HTML 5 Etiketleri

Temel HTML 5 Etiketleri

Temel HTML 5 Etiketleri

Merhaba,

İlk HTML 5 yazımı yazmaya başlıyorum. HTML hakkında birçoğunuzun bilgisi vardır diye düşünerek yazıma başladım, bilmiyorsanız eğer google’da biraz araştırmak yaparak ön bilgi sahibi olabilirsiniz. Herşeyi ben anlatacak değilim dimi?

Web tasarım ya da geliştiricisi olmak istediğinizde ve nereden başlamalıyım diye sorduğunuz da size gelen ilk cevap “sen html’i öğren kardeş gerisi gelir” olacaktır.Temel olarak internet sitelerinin omurgasını oluşturan HTML ‘dir. Ancak günümüzde yüzlerce yapı ve omurga mevcuttur. Yukarıda söylediğim söz de bundan kaynaklanmaktadır. HTML, birçok web yazılım dilinin temelini oluşturur ve bu dillerde html rahatlıkla kullanabilirsiniz. Örneğin, PHP, php sayfalarında html kullanabilirsiniz. ASP sayfasında  da html yapısı kullanabilirsiniz. Daha birçok yapının içerisinde html kullanabilirsiniz.

HTML’in önemini anladığınızı varsayıyorum. Gel gelelim asıl mevzuya, her web dili bir ihtiyaçtan ortaya çıkmaktadır. Teknoloji’de bu değil midi? insanların bir ihtiyacını ya da bir sorununu çözmek için geliştirilir,bulunur. HTML ‘de bu amaçla ortaya çıkmış bir web dilidir. Daha sonralarında asp,php,xml gibi birçok yapı da ihtiyaçlar doğrulsunda web dili çıkmıştır.

Her web programlama dili kendi içerisinde bir takım kurallar ile gelmektedir. Her birinin kendi içerisinde, kendilerine has bir etiketi mevcuttur. Örneğin bir html sayfasını oluşturmak için gerekli olan temel etiket

<html> &nbsp;</html> etiketidir. Bu PHP içinde geçerlidir oda <?php  ?> . Bunlara benzer birçok etiket ve özel karakterler mevcuttur. Bu yazımda sizlere HTML için geçerli olan ve en çok kullanılan etiketler ve özel karakterleri aktarmaya, göstermeye çalışacağım.

HTML5 kodlarını yazmak ve tasarımı geliştirmek için IDE (İntegrated Development Envirenment – Birleşik Geliştirici Ortamı) ve editörler mevcuttur. Kullanılan programlar geliştiricinin uyumuna, alışmasına ve editörün kullanışlı özelliklerine göre farklılık göstermektedir. Bu yazıda şahsımın tercih ettiği ve çokça kullanılan Notepad++ programından bahsedeceğim.

Notepad++: Kod editörüdür. IDE olarak tanımlanamaz. Hata denetimi yoktur. Fakat basit, kullanışlı ve hızlı notepad-plus-plusolması ayrıca pratik ve bellekte fazla yer tutmaması en çok tercih edilenlerden yapar onu.  ASP.NET (.aspx) formatı dışındaki bir çok web programlama dilini/formatını desteklemektedir. Notepad++ İndir bağlantısından ücretsiz olarak edinebilirsiniz.

 

Temel HTML5 Etiketleri

Bir HTML5 sayfasında olmazsa olmazlardan olan ve her html sayfasında olan temel etiketleri aşağıda açıklamalarıyla birlikte anlattım.

  • <!DOCTYPE html>  Bu etiket oluşturduğunuz sayfanın HTML5 sayfası olduğunu ve web tarayıcınızın bunu anlamasını sağlayan temel kodlardan bir tanesidir.
  • <html>  Bu etiket ise sayfanızın başlangıcını ve sayfa boyunca html etiketlerini kullanabilmenizi sağlayan temel etiketlerden birisidir.
  • </html> Sayfamızın bittiğini belirtir. Bu koddan sonra yazılan kodlar artık HTML5 kodları olarak algılanmayacaktır ve geçersiz olacaktır. Bir html sayfası <html> ile başlar </html> ile biter.
  • <head> Oluşturduğunuz html sayfasının en üst kısmı olduğunu belirtir.
  • </head> Oluşturduğunuz html sayfasının üst kısmının bittiğini gösterir.
  • <title> Oluşturduğunu sayfanın başlığını belirtir. Tarayıcınızda sekme kısmında yazılar yazıyor ya o kısımda ki yazıları biz bu kod yardımıyla yazmaktayız.
  • </title> Sayfa başlığının bittiğini gösterir.
  • <body> Oluşturmuş olduğunuz sayfanın orta bölümünü yani gövdesini gösterir. Sitenizde yer alacak yazılar,resimler vb şeyler bu bu etiketin bulunduğu bölümde yer alır.
  • </body> İçerik bölümünüzün bittiğini gösteren etikettir.
  • <footer> Sitenizin en alt bölümü yani sayfanızın aşağıyı kısmını belirtir.
  • </footer> Sitenizin alt kısmının bittiğini gösterir.
  • <meta> Arama motorlarına ve internet tarayıcılarına siteniz hakkında bilgi sunan küçük betiklerdir.

Örnek Bir HTML5 Sayfası

<!DOCTYPE html><!-- Sayfanın bir HTML5 sayfası olduğunu belirtir.-->
<html> <!-- Sayfanın başlangıcıdır.-->
<head><!-- Sayfanın en üst kısmını belirtir. -->
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/><!-- Türkçe karakter kodlamasını sağlar. Yani, ç,ş,i,Ğ gibi harfleri kullanmanızı sağlar.-->
<title>Deneme Sayfa Başlığı</title> <!-- Sayfanızın Adı,Başlığını belirtir.-->
</head><!-- En üst kısmın bittiğini gösterir.-->
<body><!-- İçerik kısmının başladığı kısımdır.-->
Resim,yazı artık sayfanızda ne olacaksa ahanda buraya ekleyeceksiniz.
</body><!--İçerik kısmının bittiğini gösterir-->
<footer><!--Sitenizin en alt kısmını belirtir -->
Site sonudur.
</footer><!-- En alt kısmın bitişini gösterir-->
</html><!-- HTML5 sayfanızın bittiğini ve sonlandığını gösterir.-->

<!--
HTML 5 derslerimi blogumdan takip etmeye devam edin. https://huseyinkorbalta.com -->
<!-- Tarih: 30/08/2016 -->

HTML dosyalarının dosya uzantısı .html, .htm olarak kullanılmaktadır. Oluşturduğunuz bir html sayfasınının uzantısı muhakkak .html ya da .htm olmak zorundadır aksi halde çalışmayacaktır. Bir sonra ki yazımda bu etiketleri açıklamaya devam edeceğim. Tek yazıda bütün html etiketlerini anlatamam, birçok temel html etiketleri mevcut hepsini parça parça sizlere aktarmaya devam edeceğim. Aşağıdan örnek html sayfasını indirip inceleyebilirsiniz.

[button url=”https://huseyinkorbalta.com/wp-content/uploads/2016/08/%C3%96rnek-HTML-5-Sayfas%C4%B1.rar” style=”red”]Örnek HTML 5 Sayfasını İndir[/button]

 Yazı Bağlantısını Kopyala & Paylaş

Benzer Yazılar

  • Çerezler (Cookies) Nasıl Çalışır ?

    Çerezler (Cookies) Nasıl Çalışır ?

    Selamlar, Daha önce ki yazım olan Çerez (Cookie) Nedir ? Çerez Türleri Nelerdir ? adlı yazımda çerezler hakkında olabildiğince detaylı bilgiler vermiştim. O yazım çok uzun olacağı için çerezlerin nasıl çalıştığını başka bir yazı yazarak anlatmanın daha doğru olacağını düşündüm. Oldukça kısa ve öz bir şekilde Çerezler (Cookies) Nasıl Çalışır ?…
  • Çerez (Cookie) Nedir ? Çerez Türleri Nelerdir ?

    Çerez (Cookie) Nedir ? Çerez Türleri Nelerdir ?

    Selamlar, Eminim birçoğunuz Çerezler yani Cookies'ler hakkında bilgi sahibisiniz. İnternette bununla ilgili birçok yazı, belge ve birçok şey bulabilirsiniz. Ancak, internette çerezler hakkında yazılan birçok yazı ne yazık ki kopyala-yapıştır yazılar olmasından dolayı eksik ve yanlış bilgiler içeriyorlar. Hergün yeni teknolojiler ve yapılar ortaya çıkıyor haliyle çerezlerinde ilk günkü gibi…
  • HTML5 ile HTML Arasında ki Farklar

    HTML5 ile HTML Arasında ki Farklar

    Selamlar, Bu yazımda sizlere her zaman duyduğunuz html'in sürümleri arasında ki farkları anlatacağım. HTML5 ile HTML Arasında ki Farklar ın ne olduğunu madde madde sıralayacağım. Buna neden gerek duydum önce bunu açıklamak istiyorum, biliyorsunuz günümüzün en güncel html teknolojisi ve sürümü HTML5'dir. Ancak tam olarak yaygın bir şekilde kullanılmıyor ve hatta…
  • HTML Dersleri 5: Liste Yapısı (List)

    HTML Dersleri 5: Liste Yapısı (List)

    HTML Dersleri 5: Liste Yapısı (List) Merhabalar, HTML derslerimize kaldığımız yerden devam ediyoruz. Bu dersimde sizlere HTML liste yapılarını göreceğiz, liste yapılarıyla ilgilili örnek uygulamalar yapacağız. Bir html web sayfası üzerinde yazıyı, veriyi vb. herhangi bir ögeyi belli şartlara göre listelemek istediğimizde, HTML’in tasarımcıya sunduğu listeleme etiket ve elementlerini kullanmak…
Temel HTML 5 Etiketleri için Yorum'da Bulun

Bir Cevap Yaz

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

 Lütfen, en az 15 karakterli bir yorum belirtiniz.

 Lütfen,isminizi belirtiniz.
 Lütfen, kullanmakta olduğunuz bir e-mail adresi giriniz.
 Yukarıda ki alanı işaretlemeniz zorunludur.Aksi takdirde yorumunuz gönderilemeyecektir.