WD 001 – HTML Giriş – Muhammet Esat BÜYÜKBULUT

Table of Contents

HTML Nedir?

Hiper Metin İşaretleme Dili (HTML, İngilizce HyperText Markup Language kelimelerinin baş harflerinin kısaltılmasıdır) web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5’tir.

HTML, bir programlama dili olarak tanımlanamaz. Çünkü HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Fakat bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Programlama dili denilememesinin nedeni tam olarak budur. Temel gereği, yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak, söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir.

https://tr.wikipedia.org/wiki/HTML

Layout

DOCTYPE html: Belgemizin bir HTML 5 dökümanı olduğu belirtiyoruz.
head: Sayfamızda görünmeyecek bazı tanımlamaları buraya yazıyoruz.
body: Sayfamızın görünecekleri buraya yazıyoruz.
meta : Metaveri/üstveri anlamına gelip. Sayfamızdaki içeriğin özelliklerini belirtir.
lang : Sayfamızın dili. Türkçe için tr yazılır.
<!– –> : Yorum satırı.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Yorum satırı-->
</body>
</html>

h1-h6 : Başlık etiketi
p : paragraf etiketi
br : satır atlama etiketi
hr : yatay çizgi etiketi

<body>
    <h1>Merhaba HTML</h1>
    <h2>HTML Nedir?</h2>
    <hr>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos modi cum culpa harum obcaecati blanditiis optio, dolore magni soluta ut perspiciatis.</p>    
    <p>Lorem ipsum dolor sit amet Molestias officiis a eligendi nostrum dolor dignissimos?</p>
    <p>Lorem ipsum dolor sit amet consectetur, <br> adipisicing elit. Provident, optio.</p>
</body>

Formatlama Etiketleri

b : bold yazar
strong : bold yazar anlamsal olarak önemli olan yerler için kullanılır
i : italik yazar
em : italik yazar, anlamsal olarak metnin en anlamılı parçalarını vurgulamak için kullanılır
small : Telif hakkı vb şeyleri yazmak için kullanılır. Daha küçük yazılır.
mark : Highlighting yapmak için kullanılır
sub/sup : yarım karakter aşağıda/yukarıda yazar. Formül yazmak için kullanışlı.
ins/del : metine eklenen/çıkarılan kısımları göstermek için kullanılır.

<body>
    <p>Yazılarımızı kalın yazmak için <b> b etiketini kullanıyoruz.</b> </p>
    <p>İtalik <i> yazmak için</i> i etiketini kullanıyoruz. Aynı şekilde <em> em etiketi de</em> italik bir şekilde yazar.</p>
    <p><b>em</b> ve <b>i</b> etiketlerinin farkı em etiketinin semantik bir etiket olup <b>vurgu</b> vermesi. Metinde anlamını öne çıkarmak istediğimiz yerlerde kullanabiliriz. Metin okuyucu bu etiketi okurken daha vurgulu okur.</p>
    
    <p>Başka bir sematik etiketimiz de strong'dur. <strong> tıpkı b etiketi gibi kalın bir şekilde görülür.</strong></p>
    <p>Strong etiketini metindeki önemli yerleri yazmak için kulanabiliriz.</p>

    <p>H2O'yu H<sub>2</sub>O şeklinde yazabilmek için <b>sub</b><br>x2+y2=0 formülünü x<sup>2</sup>+y<sup>2</sup>=0 şeklinde yazabilmek için <b>sup</b> etiketlerini kullanıyoruz.</p>
    <p>Copyright, legal dökümanlar gibi şeyleri belirtmek için <small>©Copyright 2025</small> small etikeni kullanabiliriz. Default olarak bir font boyutu küçük yazılır(?)</p>

    <p>Bir dökümandan silinen metni belirtmek için <b>del</b>; bir dökümana eklenen metni belirtmek için <b>ins</b> etikelerini kullanıyoruz:<br>
        My favorite color is <del>blue</del> <ins>red</ins>!
    </p>
    <p>Bir yazının <mark>bir kısmını</mark> highlight etmek için mark etiketini kullanıyoruz</p>
</body>

Linkler

<a href="https://www.google.com/" target="_blank" title="linkin üstünde durunca çıkan yazı">Google'a git</a>

Resim Ekleme

<img src="https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 
alt="A road scene in autumn" 
width="600">

Tablolar

<table>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
</table>

Listeler

<ul type="square">
    <li>list item 1 </li>
    <li>list item 2 </li>
    <li>list item 3 </li>
</ul>

<ol>
    <li>list item 1 </li>
    <li>list item 2 </li>
    <li>list item 3 </li>
</ol>

Video

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Ses

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>

WD 001 – HTML Giriş