fbpx
Yazılım

Html Kodları Nedir? 5 Dakikada Html Öğren

Html Kodları Nedir? Html web sayfalarını oluşturmak için kullanılan basit bir metin işaretleme dilidir. Html asla bir programlama dili değildir. Ancak html i tanıyan ve yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir.

html nedir, html öğren
Html Kodları Nedir

Html’in temel görevi görüntü, video, yazı gibi elementler bulunan sayfaları birbirine bağlamak ve tarayıcılar tarafından düzgün görüntülenmesini, doğru taranmasını sağlamaktır. Html estetik açıdan hiç bir şeye benzemez lakin CSS ve JavaScript gibi programlama dilleri ile beraber kullanıldığında hoş görünümlü ve dinamik siteler yaratılabilir. Html kullanarak arama motorlarına web sitemizin içeriğinde ne olduğunu içerik kısımlarını belirtiriz. SEO öğrenmek isteyen, Html de bilmek zorundadır. Örneği şu şekilde:

<p> Şu anda yazının başında ve sonunda gördüğünüz etiketler arama motorlarının burada ne olduğuyla alakalı bilgi sahibi olması için koyduğum html etiketidir.  Bu etiket de tahmin edeceğiniz üzere paragraf etiketidir. </p>

Html Etiketleri

.html

Html etiketi tarayıcılara dosyanın html ile yazıldığını belirtir. Dosya uzantı adı da .html dir. Her html dosyası html ile başlamak ve html ile bitmek zorundadır.

<html> </html>

Head etiketi html sayfasının ilk kısmıdır. Bu kısıma yazılan kodlar sayfa içerisinde görünmez.

<head> </head>

Title

Title bir başlık etiketidir. Tile a yazdığınız başlık tarayıcı penceresinde gözükecektir. Bu başlık sayfanız ile uyumlu olmalı sayfa içeriğinizi tanımlamalı.

<title> </title>

Body

Body sayfanızın en uzun ve sayfa içeriğinizi yazacağınız kısımdır.

<body> </body>

Basic Html İskeleti

İçerik olmadan görünen temel html iskeleti. Çalışmaya bu iskelet ile başlarsınız.

<!DOCTYPE html>
<html>
<head>
<title>Sayfa Pencere Başlığı</title>
</head>

<body>

Sayfa içerik kısmı.
</body>

</html>

Başlıklar

H1 den başlayan ve H6 kadar küçülen başlıklar ve alt başlıklar. Bu başlıkları içeriğinize göre doğru kullanmalısınız.

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

Paragraf

Oluşturduğumuz sayfadaki metinleri ifade etmek için, metinlerin paragraf olduğunu işaret etmek için kullanırız.

<p> Lorem ipsum dolor sit am </p>

Listeler Yapmak

Html ile çeşitli varyasyonlarda liste yaratabilirsiniz bunlar: Numaralandırılmış listeler, numaralandırılmamış listeler, tanım listeleri.

Numaralandırılmamış listeleri oluşturmak için <ul> etiketi ile başlıyoruz ve ul etiketine eleman eklemek için ise <li> etiketini kullanıyoruz.

     <ul>
         <li>Eleman 1</li>
         <li>Eleman 2</li>
         <li>Eleman 3</li>
         <li>Eleman 4</li>
         <li>Eleman 5</li>
     </ul>
Numaralandırılmış (sıralanmış) listeleri oluşmak için <ol> etiketi ile başlıyoruz ve içerisine az önceki örnekteki gibi <li> etiketini ekliyoruz.

    <ol>
        <li>Eleman 1</li>
        <li>Eleman 2</li>
        <li>Eleman 3</li>
        <li>Eleman 4</li>
        <li>Eleman 5</li>
    </ol>

Html in en büyük özelliklerinden bir tanesi link oluşturmaktır. Bir kelimeyi yada bir resmi bağlantıya dönüştürebiliriz.

<a href="ozantozanoglu.com">Ana Sayfa</a>

Html Linklerinde Target Özelliği

Oluşturduğumuz linkteki web site adresinin nasıl açılacağını nerede açılacağını belirtebiliriz.

_blank 	   sayfayı yeni bir pencerede açar.
_self	   sayfayı aynı çerçevede açar. 
_parent    sayfayı bir üst çerçevede açar.
_top	   sayfayı en üst çerçevede açar.

  <a href="ozantozanoglu.com" target="_blank">Ana Sayfa</a>

html öğrenmek, kodlama bilgisi
<img src=”html_dersi.gif”>

İmajlar (Resimler) Nasıl Olmalı

Html de resim kodlaması yaparken resminizi url yada dosya yolunu belirtmeniz gerekmektedir. İnternet sayfanızın hızlı açılmasını istiyorsanız resim uzantınız WEBP olmalı ve mutlaka alt etiketi girmelisiniz. Çünkü bu resminizin ne ile alakalı olduğunu anlatır.

<img src="köpekresmi.webp" 
 alt="sevimli köpeğim bana sevgiyle bakıyor">

<img src="url" alt="kırmızı kadın elbise">

En Sık Kullanılan Etiketler

<pre>

Sabit genişlikte bir yazı tipi eşliğinde bir metin oluşturmak istediğinizde kullanabileceğiniz bir etikettir. Satır boşluklarını ve metin içerisindeki boşlukları bu etiket ile daha anlamlı bir hale getirebilirsiniz.

<pre> Lorem ipsum dolor sit amet. </pre>

<br>

Satır atlmak veya satır başına dönmek için kullanılır.

<p> Lorem ipsum dolor sit amet <br>
lorem ipsum amet sit dolor </p>

<hr>

<hr> etiketi sayfanıza genişlemesine bir çizgi çeker ve yazılarınızı veya sayfanızın herhangi bir bölümünü birbirinden ayırabilirisiniz.

<h1> Güncel Ekmek Fiyatları </h1>
<hr>

<em>

Metnin istenilen kısmını belirginleştirmenizi sağlar. Bu etiketin görünümü tipik bir italic font şeklindedir.

<p><em>Lorem ipsum</em> dolor sit amet</p>

<s> ve <strike>

Üstü çizili metin yazmanızı sağlar.

<s> Lorem ipsum </s>
<strike> Lorem ipsum </strike>

<strong>

Metni vurgulamak ve güçlendirmek için kullanılır.

<strong> Lorem ipsum dolor sit amet </strong>

<u>

Altı çizili metin yazmanızı sağlar.

<u> Lorem ipsum dolor sit </u>

<b>

Yazılarınızı kalın yani bold şekilde yazmanızı sağlar.

<b> Lorem ipsum dolor sit </b>

<i>

Yazılarınızı eğik yani italic bir şekilde yazmanızı sağlar.

<i> Lorem ipsum dolor </i>

Öğrendiklerinizi Uygulama Zamanı

Öğrendiğiniz html kodları ile kendi sayfanızı oluşturmak isterseniz aşağıdaki online tool u kullanabilirsiniz.

Free online HTML editor – onlinehtmleditor.dev

Bültene Abone Ol

İlgili Makaleler

Bir Cevap Yazın