HTML (Hypertext Markup Language), web sayfalarını yapılandırmak ve içerik oluşturmak için kullanılan standart bir işaretleme dilidir. Metin, görsel, bağlantı ve multimedya öğelerini tanımlayarak internet sitelerinin iskeletini oluşturur. Geliştiriciler, HTML etiketlerini kullanarak yapılandırılmış, anlamlı ve kullanıcı dostu web sayfaları tasarlar ve tarayıcıların bu sayfaları doğru bir şekilde görüntülemesine olanak tanır.
HTML Kodları
Yorum Bırakma
<!-- Kesinlikle SEO için önerilmeyen, yorum satırıdır, site içerisinde görünmez -->
Bağlantı Ekleme
Site içeriğinde yada başka bir siteye yönlendirme yapmak için kullanılır. Href hedef adresi içerir, Title ise bağlantı üstüne geldiğimizde kullanıcıya çıkan metindir.
<a href="https://bertan.net/tr/" title="HTML dersleri">HTML Dersleri</a>
ABBR Kodu
Kullanıcılara kısaltılmış bir metin hakkında bilgi vermek için kullanılır. HTML gibi kısaltmaların, uzun anlamları böylede açıklanabilir.
<abbr title="Hypertext Markup Language">HTML</abbr>
Görsel Ekleme
Resim eklemek için img tagını açarak işlem yaparız. Src: Resim adresi, alt: resim açıklaması, height: Yükseklik, width: Genişlik değerlerini içerir.
<img src"gorsel.png" alt"Test görseli" height="100" width="200"/>
Paragraf Yapısı
P modeli kullanılarak, paragraf oluşturulur.
<p>Bu alan paragraftır</p>
Meta Etiketleri
Meta etiketleri yardımıyla tarayıcılara ve botlara sayfamız hakkında bilgi verebiliriz. Örnek alt taraftaki kod ile sitemizin dili bildirilir.
<html lang="tr">
Yatay Çizgi
En sevimli çizgilerden biridir. Alt taraftaki kod ile sayfaya baştan sona yatay çizgi çekilir.
<hr />
Boşluk Bırakma
br yardımıyla boşluk bırakabiliriz.
<br />
Div (Alan)
Kodları gruplandırmak için kullanılan bir etikettir. Bu sayede üst,alt,yan gibi herhangi bir bölüm birbirine karıştırılmaz. Sayfaya oluşturduğunuz CSS’de yer alan isimler ile, Div’de yer alan class birbiriyle aynı olursa, sayfa bu görünümle çalışacaktır.
<div class="ust"> <div class="gorsel"> <img src="gorseltesti.png" alt="Test Görsel"/> </div> </div>
Stil Oluşturma
Css kodlarını, html içinde çalıştırmak için <style> yapısı kullanırız. Style komutlarının <head> içerisinde olması önerilir.
<style>Buraya yazacağınız stil kodlarıdır</style>
Stilleri Dışardan Çağırma
CSS kodları, html içinde çalışmak zorunda değildir, dışarıdan da alttaki kod ile çekilebilir.
<link rel="stylesheet" type="text/css" href="//bertan.net/tr/wp-content/cache/wpfc-minified/d4935hhi/i79m.css" media="all"/>
JavaScript Çağırma
<script> içerisine </script> yazacağınız kodlar ile html tarafında JavaScript çalıştırabilirsiniz. Dışarıdan çekmek için alt taraftaki kodu kullanın.
<script src='//bertan.net/tr/wp-content/cache/wpfc-minified/1em105pw/i79m.js' type="text/javascript"></script>
Form Girişleri
Bir input yada textarea çeşidi oluşturarak metin, paragraf, sayı, tarih, seçim, onaylama kutusu, bton gibi nesnelerin gönderilmesi mümkün olur. POST: güvenli bir iletim yapısı sağlar, site üzerinde herhangi bir parametre görünmez. GET: Güvenli olmayan bir iletişim sağlar, gönderi yapıldığında URL değişir. POST yapısı önerilir.
<form action="iletisim.php" method="post"> <p>İsminiz</p> <input type="text" name="isim"/> <p>Telefon Numaranız</p> <input type="tel" name="telefon"/> <p>Mesajınız<p> <textarea name="mesaj"></textarea> <input type="submit" value="İlet"/> </form>
Başlık Yapıları
HTML’de 1’den 6’ya başlık yapıları bulunmaktadır. Bu yapılar sitemizdeki konuların hiyerarşisini belirtir. SEO tarafında kullanımı çok önemlidir.
<h1>Ana Başlık</h1> <h2>Alt Başlık</h2>
Listeleme Elemanları
UL – Li kullanımı ile ile, imli yani noktalamalı listeleme yapılır. OL – Li kullanımı ile, numaralı listeleme yapılır.
<ul> <li>Noktalama Kullanarak Listeleme</li> <li>İkinci Sıra</li> </ul> <ol> <li>Numaralı Listeme</li> <li>İkinci Numara</li> </ol>