Teknoloji

HTML / HTML5

Hiper Metin İşaretleme Dili (Hypertext MarkuP Language), Web’in en temel yapısıdır fakat bir programlama dili değildir. Bu temelde metin, resim, video gibi değişik verileri birbirine bağlar, bunları içeren sayfalar arasında bağlantı kurar ve sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirler. HTML kodunu web tarayıcıları okur, yorumlar ve görsel hale dönüştürürler.

HTML, bir Web tarayıcısında görüntülenmek üzere metin, resim ve diğer verileri tanımlamak için “işaretlemeyi” (markup) kullanır. HTML işaretlemesi <head>, <title>, <body>, <header>, <footer>, <section>, <p>, <div>, <span>, <img>, <nav>, <ul>, <ol>, <li> gibi birçok özel “element” adı verilen başlıklar içerir. Elementler örneğin <header> şeklinde açıldığında ters slash işareti ( / ) kullanılarak </header> şeklindeki gibi kapatılmalıdır.

Bir HTML dosyası standart olarak <html>…</html> etiketleri ile başlayıp sonlandırılır ve HTML dökümanını belirtir. İki ana bölümü bulunur; <head> ve <body> kısımlarıdır. Web sayfası ile ilgili tanımlamalar, sayfa başlığı (title), arama motoru kelimeleri, JavaScript ve CSS kodları vb. unsurlar <head>…</head> etiketleri arasında yer almalıdır. Web sayfasının gövdesi, sayfa bileşenleri (yazılar, resimler, tablolar, listeler, menüler vs.) ise <body>…</body> etiketleri arasında bulunur.

Örnek bir HTML kod bloğu genel olarak şu şekildedir:

 

 

HTML5, HTML standartlarının 5. yani son halidir. HTML5, HTML’in günümüz modern multimedya araçlarını destekleyebilmesi için geliştirilmiştir. Yeni özellikleri kapsayan, tüm web geliştiriciler için kullanılabilir olmasına yönelik tasarlanmış olan bir sürümdür. HTML5; dahili ses / video oynatabilme, çevrimdışı önbelleğe alma, temiz kodlama yapma, mobil optimizasyon şeklinde iyileştirilmiş faydalar sağlamaktadır.

 

HTML5 Semantik Elementler

 

Semantik elementler hem tarayıcıya hem de geliştiriciye web sayfasının farklı bölümlerini tanımlamak için belirten elementlerdir.

<header>: Bir döküman ya da bir kısım (section) için bir başlık belirtir.

<nav>: Bir dizi bağlantı tanımlar.

<article>: Web sayfalarında forum, blog ya da haber içeriği gibi içerikleri barındıran kısımdır.

<section>: Bir döküman içindeki bir kısmı belirtir.

<aside>: İçindeki içerikten farklı olarak başka bazı içerikler tanımlar. Örneğin reklam veya başka siteler ilgili içerikleri eklemede kullanılabilir.

<footer>: Bir döküman ya da bir kısmın altbilgini belirtir. Bir footer genelde dökümanın yazarını, telif haklarını, kullanım gizliliği, iletişim vs. gibi bilgileri içerir.

<details> ve <summary>:  Kullanıcının gerektiğinde gizleyebileceği veya görünür hale getirebileceği detay bilgi vermek için kullanılır. <summary> etiketi ile detail elementinde verilen içeriğin başlığı verilir.

 

HTML Öğeleri

Bir HTML öğesi genellikle içeriğin arasına eklenen bir başlangıç etiketi ve bir bitiş etiketinden oluşur. HTML öğeleri iç içe yerleştirilebilir.

<!DOCTYPE HTML> : HTML dosyasının HTML5 özelliklerinde olacağını tanımlamak için kodlama başlangıcında kullanılır.

<meta> : Etiketi veri hakkında bilgiler verir. Tarayıcıda gözükmezler ve tarayıcılar (sayfa yüklenirken nasıl görüntüleneceği), arama motorları (indexleme ve anahtar kelimeler) veya diğer web servisleri tarafından kullanılırlar.

<p> : Paragraf alanı oluşturur.

Başlık etiketleri: Farklı boyutta yazmak üzere <h1> en büyük başlığı ifade ederken, <h6> en küçük başlığı ifade edecek şekilde altı tanedir.

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

<br> : Kapanış etiketi olmayan boş bir öğedir. Satır sonunu tanımlamak için kullanılabilir.

<a> : Başka bir sayfaya bağlantı oluşturmak için kullanılır.

  •  bağlantı adresi ise href özelliği kullanılarak belirtilir.

Örnek;

<a href=”http://ozlemsoydan.com/”>anasayfa</a>

Çıktısı;

anasayfa

Bu metne tıklandığında, metne verilen bağlantı ile o dökümana götürür.

  • target özelliği ile dökümanın nerde açılacağı belirtilir. Örneğin yeni bir pencerede açılabilir.
  • name özelliği ile aynı döküman içinde belirlenmiş başka bir satıra direkt geçiş yapılabilir.

<img> : Görüntüler bu etiket ile tanımlanır.

  • src özelliği ile görüntü kaynağının dosya adı belirtilir.
  • width ve height özellikleri ile resmin genişliği ve yüksekliği belirlenirr.

Örnek;

<img src=”resim.jpg” width=”500 px” height=”600 px”>

<table>: Tablolar bu etiket ile belirlenir. Bir tablo <tr> etiketi ile satırlara bölünür ve her satır da <td> etiketi ile sütunlara bölünür.

 

 

(Çıktısı)

<style> : HTML öğelerinin ekranda nasıl görüntüleneceğini ayarlamak için kullanılır. Renk, arkaplan, yazı tipi vs. gibi özellikler tanımlanır.

<div> : Etiketi bir HTML belgesi içinde bir blok oluşturur, bir bölümünü tanımlar. Her bir div yeni bir satırdan başlar. <div> etiketinin özel nitelikleri yoktur. CSS ile özellik kazandırılır.

<span> : Satır içinde bir bölge oluşturmak istediğimizde bu etiket içerisinde içeriklerimizi yerleştirebiliriz. <div> gibi her defasında satır atlamaz.

Liste etiketi: Sırasız bir liste oluşturmak için <ul> , sıralı bir liste oluşturmak için <ol> , liste elemanlarını oluşturmak içinse <li> etiketi kullanılır. Sıralı listede type özelliği ile listeme şekli belirlenebilir.

 

 

 

 

 

 

 

 

 

 

<form> : Form oluşturmak için kullanılır. HTML Formları kullanıcının klavye ile girdiği bilgileri işlemek için kullanılır. Bu etiket diğer tüm form elemanlarını içinde bulundurur.

  • <input> Eleman en önemli form elemanıdır. Giriş tiplerinin tanımlandığı etikettir. type özelliği ile giriş tipi belirlenir.

 

 

 

  • <option> Açılır liste oluşturulabilmesi için gerekir.
  • <select> Açılır liste elemanlarını ifade eder. <option> içinde yazılır.
  • <button> Etiketi tıklanabilir bir düğme tanımlar.

 

HTML5’de Metin Biçimlendirme

Web sitesi metinleri, belli HTML metin biçim etiketleri sayesinde hem ziyaretçi görüşü açısından hem de arama motoru robotlarına belirli bilgiler vererek içeriği tanımasını kolaylaştırmış olursunuz. En çok kullanılan etiketler;

<b> : Yazılan metni kalın yazı tipine dönüştürür.

<strong> : Bu etiket de metni kalın yazı tipine dönüştürür fakat bununla beraber arama motorları içinde önemli bir kelime olduğunu ifade etmek için kullanılır.

<i> : Yazılan metni italik yapma işlemi için kullanılır.

<em> : Bu etiket de yine metni italik yapar. <i> Etiketinden farkı arama motoru robotlarına o kelimenin önemli olduğunu bildirmektedir.

<mark> : Metinde vurgulamak istenilen alanı renkli vurgulamak için kullanılır.

<ins> : İstenilen metni altı çizili yazıya dönüştürür.

<del> : İstenilen metni üstü çizili yazıya dönüştürür.

<sub> : Metinde alt indis kullanılmak istenirse bu etiket kullanılır.

<sup> : Metinde alt indis kullanılmak istenirse bu etiket kullanılır.

Örnek:

Class ve Id

HTML class özelliği, aynı sınıf adına sahip öğeler için eşit stilleri tanımlamak için kullanılır. Class tanımlamak için harici stil dosyasında .class{} şeklinde tanımla yapılır. Süslü parantezler arasına istenilen özellikler eklenebilir. Birden fazla öğe aynı class ismine sahip olabilir, aynı class ismi olan tüm ögeler aynı stillere sahip olacaktır. Aşağıda yazı rengi gösterilmektedir.

Örnek:

<p class=”intro“>My best friend is Mickey.</p>

<style> .intro{  background-color: yellow; }  </style>

 

id kullanımı ise yine benzer özellikler sahip olur ancak tanımlama şekli farklıdır. id tanımlama harici stil dosyasında #id{ } şeklinde yapılır. Süslü parantezler arasına istenilen kodlar yazılır. id ismi özel olmalıdır, birden fazla elemente aynı isim verilmemelidir.

Örnek:

<p id=”firstname“>My name is Donald.</p>

<style> #firstname { background-color: yellow }  </style>

 

Paylaş

Bir cevap yazın

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