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