HTML / HTML5

HTML 5 Eğitimi 2020

HTML Nedir ?

 


HTML bir işaretleme dilidir ve front end tasarımın en önemli unsuru hatta iskeletini oluşturmaktadır. HTML 5 temelde elementlerden oluşmaktadır. HTML içerisinde bir çok element bulunmakta olup ihtiyaçlarımıza göre bu elementleri sayfamıza yerleştiririz. Daha sonra ise oluşturduğumuz bu elementleri css gibi yapılarla stillendirebiliriz.

 

HTML 5 Nedir ?

 


HTML 5 html kodlarının son versiyonu olup bir çok yenilik getirilmiştir. HTML 5 ile web sayfalarının hızları ve performansları oldukça etiklenmiştir. Ayrıca web sayfalarının uyumlulukları artmış mobil yapılara sunulan destek artmıştır. Ancak html5 ile html arasındaki farklar çok azdır. HTML 5 ile yeni özellikle gelse bile eski yapılar kullanımdan kaldırılmamıştır.

 

HTML 5  Nasıl Yazılır ?

 


HTML 5 bir çok editör tarafından desteklenmekte olup istediğiniz editörü kullanarak HTML 5 kodları yazabilirsiniz. Bu iş için en çok kullanılan editörlerden bir kaçı şöyledir;

  • Sublime Text 3
  • Atom
  • Visual Studio Code
  • Dreamweaver

HTML 5 Yazarken Hangi Editörü Kullandığımız Önemli Mi ?

 


 

Hayır html veya html 5 yazarken hangi editörü kullandığınız önemli değildir. Burada şöyle düşünebilirsiniz. Dijital mesajlaşma için kullandığımız bir çok uygulama bulunmaktadır. Örneğin Whatsapp, Telegram , Viber , Messenger ancak bu bizim kullandığımız dili metinerimizi gramerimizi sözcüklerimizi değiştirmez. Tamamen kişisel  bir tercihtir. İstediğiniz zaman bir kaç dakika içerisinde kullandığınız editörü değiştirebilirsiniz.

Temel HTML Kodları

 


HTML yazarken her sayfada kullanmamız gereken temel bir şablon vardır. Bu şablon editörler tarafından genellikle default olarak getirilmektedir. Bu yapı şöyledir;

<!DOCTYPE html>
<html>

	<head>
		<title></title>
	</head>

	<body>

	</body>

</html>

HTML Etiketleri Kullanımı

 


Html’de istediğimiz özellikleri kullanmak için elementler kullanmaktayız. Örneğin sayfamıza bir buton oluşturmak için button etiketlerini kullanırız. Görsel eklemek için ise img yapısını kullanırız.

Html elementlerinin genellikle bir açılış bir de kapanış etiketi bulunmaktadır. Ancak bu yapının tersine bazı etiketlerde sadece kapanma veya sadece açılma etiketi bulunmaktadır. HTML’in mantığı oldukça basittir. Açılış ve kapanış etiketleri html de o yapının nerede başlayacağı ve nerede biteceğini belirlemektedir. Başka bir cümle ile bunu ifade etmek istersek bir html etiketi içerisine aldığı her yapıyı kendi özelliğine dönüştürür.

 

<button>

          Buraya gelen her şey buton özelliği alır

</button>
Buraya gelen her şey buton özelliği alır

 

HTML Attribution Kullanımı

 

HTML yapılarını daha da güçlendirmek ve isteklerimize uygun uyarlamak için attribution yapıları kullanırız. Bunları Türkçe’ye alt etiketler de diyebiliriz. Bunlara şu an size yabancı gelebilecek bazı örnekler verebiliriz.

  • href
  • src
  • width
  • height
  • style
  • class
  • id

HTML yazarken attribution yapılarını elementleri açılış etiketlerine ekleriz. Attributionlar sadece kendileri ile uyumlu olabilcek elementlerde çalışmaktadır. Örneğin src görsellerde yani img yapılarında çalışırken, href linklerde yani a yapılarında kullanılmaktadır.

<a>Burası Link</a>

<a href="https://www.cagrigungor.com">Burası Link</a>

<a href="https://www.cagrigungor.com" title="örnek link">Burası Link</a>

Yukarıda a yapısını kullandık. A bir bağlantı yani link oluşturma yapısıdır. a açılış ile kapanış arasına aldığımız yapılar tıklanabilir özellik kazanır. Ancak tıklandıktan sonra bir hedefe göndermek istediğimiz için buraya href ile bağlantı sağlarız.

Elementlerde birden fazla attribute kullanabiliriz. Yukarıdaki örnekte ayrıca birde linkin başlığı yani title özelliği de kullandık.

 

HTML Elementleri

 

HTML elementleri çok gelişmiş bir yapıda web sitesi oluşturmak için hemen hemen tüm ihtiyaçlarımızı karşılayacak şekilde hazırlanmıştır. HTML 5 elementleri ile bu yapılar çok daha kullanışlı hale getirilmiştir. HTML elementlerini incelerken konu ve kullanım bütünlüğü sağlamak için bu elementleri gruplar halinde açıklama ihtiyacı duydum.

 

HTML Metin Elementleri

 

  • < p > : Paragraflar oluşturmamızı sağlar.
  • < span >: inline metin grupları oluşturmamız sağlar.
  • < b > : koyu metin parçaları oluşturmamızı sağlar.
  • < br > : boşluk bırakmamızı sağlar.
  • < i > : italik metinler oluşturmamızı sağlar..
  • < strong > : önemli işaretlendirilmiş içerikler oluşturmamızı sağlar.
  • < del > : üzeri çizi metinler oluşturmamızı sağlar.
  •  < hr > : yatay separate çizgiler oluşturmamızı sağlar.
  •  < mark > : marker ile çizilmiş gibi işaretleme yapar.
  •  < big > : nispeten büyük yapar.
  •  < small > : nispeten küçük yapar.
  • < sup > : üst indis yapar.
  • < sub > : alt indis yapar.

 

Örnek:

 

		<p>
			Paragrafımı hazırlarken paragraf içerisinde bir başka metin bağlantısı kullanmak için <span> "span" yapıları kullanabiliyorum.</span> Burada <b>koyu</b> bir metin için "b" yapıları, <strong>önemli</strong> kelimeleri belirtmek için ise "strong" yapıları kullanabilirim. Ayrıca matematiksel ve bilimsel yapılarda kullanacağım X<sup>2</sup> "sup" ve H<SUB>2</SUB>O "sub" yapıları bulunmaktadır. Etkisini kaybeden ve sildiğim ancak göstermeye devam ettiğim <del>silinmiş</del> yapıları del ile yapabilirim. Kavramlarda çok kullandığıım <i>italik</i> yapılarıda oluşturmam mümkündür. Bu yapıları kullanarak içeriğimizi <mark>daha ilgi çekici</mark> hale getirebiliriz.
		</p>

 

Önizleme:

 

Paragrafımı hazırlarken paragraf içerisinde bir başka metin bağlantısı kullanmak için “span” yapıları kullanabiliyorum. Burada koyu bir metin için “b” yapıları, önemli kelimeleri belirtmek için ise “strong” yapıları kullanabilirim. Ayrıca matematiksel ve bilimsel yapılarda kullanacağım X2 “sup” ve H2O “sub” yapıları bulunmaktadır. Etkisini kaybeden ve sildiğim ancak göstermeye devam ettiğim silinmiş yapıları del ile yapabilirim. Kavramlarda çok kullandığım italik yapılarıda oluşturmam mümkündür. Bu yapıları kullanarak içeriğimizi daha ilgi çekici hale getirebiliriz.

 

HTML elementleri içi içe yazılabilmektedir. Gelişmiş yapılar kullanmak için de bu yapıları genellikle iç içe yazarız.
HTML elementlerini sayfadaki pozisyonlarına göre ikiye ayırabiliriz. Bunlar blok ve satır elementleridir. blok elementleri bulundukları satırı tamamen kaplarlar yanlarına herhangi başka bir eleman gelmesine izin vermezler. Satır elemanlar ise yan yana gelme eğilimindedirler
paragraf yani p ile span arasındaki en önemli fark paragraflar blok elemandır yani 2 paragraf eklediğimizde bunlar alt alta konumlanmaktadır. Span yapıları ise yan yana gelmektedir.
HTML kodlarını yazarken satır atlama yani satır boşluğu bırakmanın bir önemi yoktur boşluklar okunmaz ve değerlendirmeye alınmaz.

 

HTML Bağlantı Elemanları

 

HTML içerisinde bir sayfadan başka bir sayfaya bağlantı sağlamak için < a href=””> </a> yapısı kullanılmaktadır. Bağlantı sağlama sadece “a” yapısının yalnız kullanılmasıyla oluşturulmaz. HTML elemanlarının temel mantığı burada da çalışmaktadır. İçerisine aldığı her yapıya tıklanabilme ve tıklandığında bir başka içeriğe gönderebilme özelliği verir. Bunlar iconlar, butonlar veya görseller olabilir.

 

Örnek:

<a href="https://www.hedefwebsitesiburada.com"> Bağlantı Metni </a>

 

Önizleme:

Bağlantı Metni

 

< a > </a> yapısı tek başına bağlantı verme özelliğine sahip değildir. Bunun için ekstra bir attribute alması gerekmektedir. Burada tıklandığında gönderilecek hedefi belirlediğimiz href=”” yapısı a içerisinde kullanılmaktadır.

Butonlar

 

Butonlar html içerisinde dikkat çekici bağlantılar oluşturmamızı sağlayan elemanlardır. Buton yapıları tek başlarına bir bağlantı özelliği göstermezler bağlantı özelliği göstermeleri için bağlantı yapıları yani “a” içerisinde bulunmaları gerekir.

 

Örnek:

 

<button> Buton Metni Buraya Gelecek </button>

 

Önizleme:

 

Buton Metni Buraya Gelecek

 

Butonlarda Bağlantı Oluşturma

 

Daha önce de bahsettiğimiz gibi butonlara bağlantı sağlamak için butonlar a yapıları içerisine almamız gerekmektedir. Bu şekilde butonlar link özelliği gösterecektir.

 

Örnek:

 

<a href="https://www.cagrigungor.com"> 

           <button> Çağrı Güngör'ün Web Sitesi </button>

</a>

 

Önizleme: 

 

Çağrı Güngör’ün Web Sitesi

 

Medya Elemanları

 

Web tasarımda medya elemanlarının etkisi büyüktür. Web sayfalarının genelde büyük kısmını görsel ve videolar kaplamaktadır. Yeni nesil web sayfalarında bu oranlar daha da fazladır. Medya elemanlarımızı başlıca ;

  • Görseller
  • Videolar
  • Ses

olarak sıralayabiliriz.

 

HTML Görsel Ekleme

 

Html’de görsel ekleme sırasında kullandığımız etiket < img > yapısıdır. < img > etiketinin kapanış kısmı bulunmamaktadır.

 

Örnek:

 

<img src="resim.jpg" >

<img src="https://www.cagrigungor.com/img/resim.jpg" >

 

Önizleme:

 

Görseller sadece img açılış yapısını içerirler zaten içerisine herhangi bir eleman alamadıkları için kapanışa ihtiyaçları yoktur. Hangi görselin açılacağı ise source’dan gelen src=”” yapısı içerisine eklenmektedir.

 

İmg inline bir elemandır. Yani birden fazla img kodunu ardışık olarak eklediğimizde görseller yan yana sıralanmaktadır.

 

Yüksek boyutlu img dosyaları web sayfasının açılış hızını etkilemektedir. Web sayfanıza ekleyeceğiniz görselleri yeniden boyutlandırıp web için optimize etmenizi tavsiye ederim.

 

HTML Video Ekleme

 

HTML 5 ile web sayfalarına video ekleme işlemleri esnek ve kullanışlı bir hale getirilmiştir. HTML 5 ile video eklemek için kullancağımız yapı <video> </video> etiketleridir.

 

Örnek:

 

<video> 
<source src="https://www.cagrigungor.com/wp-content/uploads/2019/08/deniz.mp4" type="video/mp4">
</video>

 

Önizleme:

 

 

 

Html 5 içerisinde video eklerken eklediğimiz videoyu otomatik başlatmak için autoplay yapısı kullanabiliriz.
autoplay="true"

 

HTML ile Ses Dosyası Ekleme

 

HTML 5 ile ses dosyaları eklemek için sound yapısını kullanmamız gerekemktedir. <audio> </audio> ile ses dosyaları eklememiz mümkündür.

 

Örnek:

 

<audio controls>
  <source src="muzik.ogg" type="audio/ogg">
  
</audio>

 

Önizleme:

 

 

 

4.3 6 votes
Article Rating
Subscribe
Bildir
guest
0 Yorum
Inline Feedbacks
View all comments