HTML Öğrenmeye Yeni Başlayanlar Kılavuzu

Reisci · 26 Ara 2022

Bir web sitesini değerlendirecek olsanız, bu teknolojilerden hangisine en çok kredi verirsiniz? HTML, CSS veya JavaScript?

Cevabınız muhtemelen CSS veya JavaScript olacaktır, çünkü CSS web sitesine güzel bir görünüm verir ve etkileşimli işlevselliklerden JavaScript sorumludur. Cevabınızın bu olması şaşırtıcı değil, insanlar olarak bile yapı taşımız olan iskelete neredeyse hiç itibar etmiyoruz. Güzel saçlarımız, düzgün kirpiklerimiz, kıvrık kaşlarımız, pürüzsüz ve ışıltılı cildimiz bizi çok büyülüyor çünkü görebildiklerimiz bunlar ve bizi etkilediler. Taze bir ceset bile hala güzel görünüyor. Ama kimse insan ya da hayvan iskeletinin güzel olduğunu söyleyemez.

Şimdi iskeletsiz bir insan hayal edin, cevabı zaten biliyorsunuz. Size HTML’siz bir web sitesi hakkında soru sorduğumda alacağınız cevap bu. Bu makalede, size web geliştirme için HTML5’in anatomisini anlatacağım. Başlayalım.

HTML nedir?

HTML, Köprü Metni Mockup Dili anlamına gelir. HTML’de dilden bahsedilmesine rağmen, bunun bir programlama dili olmadığı konusunda geniş çapta fikir birliği vardır. Sitemize şekil veren mockup dilidir. Sınırlı etkileşim ile web’in basit bir yapılandırmasıdır.

HTML belgesi nereye yazılır

Bir makale yazmak için bir metin ortamına ihtiyacınız vardır ve bir not defteri, Microsoft Word veya Google Docs kullanabilirsiniz. Benzer şekilde, web’de maket bir dil yazmak için, HTML belgenizi yazabileceğiniz, düzenleyebileceğiniz ve biçimlendirebileceğiniz bir metin düzenleyiciye ihtiyacınız vardır. Visual Studio Code (VS Code), Sublime, Atom, vb. gibi kullanabileceğiniz birkaç metin düzenleyici vardır. Esnekliği ve hızlı ve güzel kod yazmanızı sağlayan çeşitli uzantıları nedeniyle VS Code’u tercih ediyorum. bence VS Code yeni başlayanlar için uygundur.

HTML Belgesinin Yapısı

Tıpkı Word ve Excel belgeleri gibi diğer belgeler gibi HTML de web’e içerik koymayı mümkün kılan bir belgedir. HTML Belgesinin yapısı ve canlı sunucuda nasıl görüneceği aşağıda gösterilmiştir.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>This is heading</h1>
        <p>This is a paragraph</p>
        <p>This is another paragraph</p>
    </body>
</html>

HTML Etiketleri

HTML’deki etiketler, HTML öğelerini taklit etmek için kullanılır ve genellikle açılı ayraçlar, yani küçük küçüktür (<) ve büyüktür (>) sembolleri içine alınır. açık ve kapalı etiketler vardır. Açık etiket <> ile temsil edilir ve kapatma etiketi </> ile temsil edilir. Kapat etiketinde küçüktür (<) ve büyüktür (>) sembolleri arasında bir eğik çizgi olduğuna dikkat etmelisiniz.

Bir öğenin açık ve kapalı etiketlerine bir örnek görelim.

<html> = html öğesi için açık etiket

</html> = HTML öğesi için etiketi kapatın.

<p> = paragraf öğesi için açık etiket

</p> = paragraf öğesi için etiketi kapat

HTML Öğeleri.

HTML öğesi, bir HTML belgesinin en basit ve temel parçasıdır, açık ve kapalı etiketler arasında yazılan her şeydir. HTML belgesinin tamamı HTML öğelerinden oluşur.

HTML öğelerinin örnekleri şunlardır:

<title>My website</title>

<select>Gender</select>

<footer>&copy 2022</footer>
etc.

Not: Her HTML öğesinin açık ve kapalı etiketleri vardır. Bir eleman için etiket açılıp kapatılmadığında gerekli işlemi yapmayacak ve kod düzenleyiciniz hata verecektir. Ancak, kendi kendine kapanan etiketler olan bazı HTML etiketleri vardır. Bu etiketlerin kapanış etiketleri olması gerekmez.

Bu tür etiketlere örnekler:

Resim etiketi = <img>

Meta etiketi = <meta>

Satır sonu etiketi = <br> vb.

sonraki örneklerimizde bu etiketlerin kullanım durumuyla karşılaşacaksınız.

HTML Anatomisi

Şimdi HTML bölümünü inceleyelim ve her bölümün işlevini inceleyelim.

Yukarıda öğrendiğiniz gibi, öğeler HTML belgesinin en basit parçasıdır. bu bölüm size her HTML öğesinin gerçekleştirdiği eylemi göstermek içindir.

Başlık: başlığın 6 farklı etiketi vardır. h1 ila h6. başlık etiketi içine sarılmış herhangi bir metnin boyutu ve ağırlığı h1’den h6’ya düşürülür. Aşağıdaki kod ve canlı sunucu örneğini görelim.

<h1>Heading</h1>

<h2>Heading</h2>

<h3>Heading</h3>

<h4>Heading</h4>

<h5>Heading</h5>

<h6>Heading</h6>

Gördüğünüz gibi h1’den h6’ya gidildikçe boyut ve ağırlık azaldı. Bu nedenle başlık etiketleri, web belgelerinde başlıklar ve alt başlıklar için kullanılır. Boyut ve ağırlık, CSS ile stil oluşturarak aynı hale getirilebilse de, HTML’de varsayılan olarak göründüğü şekilde çalışmasını sağlayan yerleşik bir stil olduğunu kalbinizin arkasında tutmalısınız.

Paragraf: Paragraf etiketi uzun metin yazmak için kullanılır.

<p>you can write a dummy text in a paragraph tag by typing Lorem and press tab key.<br>This will give you about 50 words of text. Do you notice the line break self <br>closing tag used in this paragraph?it is responsible for making this text go to the next line</p>

Güçlü: güçlü etiket, bir metni kalınlaştırmak için kullanılır.

Vurgu: Bir metni vurgulamak için vurgu etiketi kullanılır. vurgu olsa da

<em>italic</em>

Not: Vurgu varsayılan olarak italik olmasına rağmen, CSS ile stillendirilerek değiştirilebilir.

Bağlantı: bağlantı etiketi, bir metni veya resmi tıklanabilir hale getirmek ve başka bir sayfaya bağlantı vermek için kullanılan bir etikettir. Bağlantı etiketi, metnin veya resmin nereye bağlanacağını belirten bir öznitelik gerektirir. Sonraki bölümde HTML niteliklerini öğreneceksiniz.

<a href=“https://www.google.com”>Google</a>

Liste: liste etiketi öğeler için kullanılır ve sırasız liste ve sıralı liste olmak üzere iki tür olabilir. Sırasız listede bir madde işareti listesi bulunurken, sıralı listede bir sayı listesi bulunur.

HTML:

HTML Etiketleri

HTML’deki etiketler, HTML öğelerini taklit etmek için kullanılır ve genellikle açılı ayraçlar, yani küçük küçüktür (<) ve büyüktür (>) sembolleri içine alınır. açık ve kapalı etiketler vardır. Açık etiket <> ile temsil edilir ve kapatma etiketi </> ile temsil edilir. Kapat etiketinde küçüktür (<) ve büyüktür (>) sembolleri arasında bir eğik çizgi olduğuna dikkat etmelisiniz.

Bir öğenin açık ve kapalı etiketlerine bir örnek görelim.

<html> = html öğesi için açık etiket

</html> = HTML öğesi için etiketi kapatın.

<p> = paragraf öğesi için açık etiket

</p> = paragraf öğesi için etiketi kapat

HTML Öğeleri.

HTML öğesi, bir HTML belgesinin en basit ve temel parçasıdır, açık ve kapalı etiketler arasında yazılan her şeydir. HTML belgesinin tamamı HTML öğelerinden oluşur.

HTML öğelerinin örnekleri şunlardır:

<title>My website</title>

<select>Gender</select>

<footer>&copy 2022</footer>
etc.

Not: Her HTML öğesinin açık ve kapalı etiketleri vardır. Bir eleman için etiket açılıp kapatılmadığında gerekli işlemi yapmayacak ve kod düzenleyiciniz hata verecektir. Ancak, kendi kendine kapanan etiketler olan bazı HTML etiketleri vardır. Bu etiketlerin kapanış etiketleri olması gerekmez.

Bu tür etiketlere örnekler:

Resim etiketi = <img>

Meta etiketi = <meta>

Satır sonu etiketi = <br> vb.

sonraki örneklerimizde bu etiketlerin kullanım durumuyla karşılaşacaksınız.

HTML Anatomisi

Şimdi HTML bölümünü inceleyelim ve her bölümün işlevini inceleyelim.

Yukarıda öğrendiğiniz gibi, öğeler HTML belgesinin en basit parçasıdır. bu bölüm size her HTML öğesinin gerçekleştirdiği eylemi göstermek içindir.

    Başlık: başlığın 6 farklı etiketi vardır. h1 ila h6. başlık etiketi içine sarılmış herhangi bir metnin boyutu ve ağırlığı h1’den h6’ya düşürülür. Aşağıdaki kod ve canlı sunucu örneğini görelim.

<h1>Heading</h1>

<h2>Heading</h2>

<h3>Heading</h3>

<h4>Heading</h4>

<h5>Heading</h5>

<h6>Heading</h6>

Gördüğünüz gibi h1’den h6’ya gidildikçe boyut ve ağırlık azaldı. Bu nedenle başlık etiketleri, web belgelerinde başlıklar ve alt başlıklar için kullanılır. Boyut ve ağırlık, CSS ile stil oluşturarak aynı hale getirilebilse de, HTML’de varsayılan olarak göründüğü şekilde çalışmasını sağlayan yerleşik bir stil olduğunu kalbinizin arkasında tutmalısınız.

    Paragraf: Paragraf etiketi uzun metin yazmak için kullanılır.

<p>you can write a dummy text in a paragraph tag by typing Lorem and press tab key.<br>This will give you about 50 words of text. Do you notice the line break self <br>closing tag used in this paragraph?it is responsible for making this text go to the next line</p>

    Güçlü: güçlü etiket, bir metni kalınlaştırmak için kullanılır.

<strong>bold this text</strong>

    Vurgu: Bir metni vurgulamak için vurgu etiketi kullanılır. vurgu olsa da

<em>italic</em>

Not: Vurgu varsayılan olarak italik olmasına rağmen, CSS ile stillendirilerek değiştirilebilir.

    Bağlantı: bağlantı etiketi, bir metni veya resmi tıklanabilir hale getirmek ve başka bir sayfaya bağlantı vermek için kullanılan bir etikettir. Bağlantı etiketi, metnin veya resmin nereye bağlanacağını belirten bir öznitelik gerektirir. Sonraki bölümde HTML niteliklerini öğreneceksiniz.

<a href=“https://www.google.com”>Google</a>

Not: sırasız liste her zaman web sitesi gezinme çubuğu için kullanılır.

Tablo: Tablo etiketi, web belgesinde tablo verileri oluşturmak için kullanılır. Birkaç alt etiketi vardır.

HTML:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Samuel</td>
            <td>Muhammad</td>
        </tr>
    </tbody>
</table>

Form: Form etiketi, web belgesinde bir form oluşturmak için kullanılır. Formun da nitelikleri vardır. nitelikleri daha sonra tartışacağız.

HTML:

<form>
    <label>firstName</label>
    <input type = “text” name = “firstName”></input>

    <label>Email</label>
    <input type = “text” name = “Email”></input>

    <label>message</label>
    <textarea name = “message”></textarea>

    <select name= “gender”>
        <option value = “male” >Male</option>
        <option value = “female” >Female</option>
    </select>

    <label>Age</label>
    <input type = “number” name = “age” value = “30”></input>

    <label>Birthday</label>
    <input type = “date” name = “birthday”></input>

    <input type = “submit” name = “submit” value = “submit”>Submit</input>
</form>

Buton: Buton, tıklama, gönderme, giriş yapma, kayıt olma gibi bir işlemi gerçekleştirmek için kullanılır. Sadece JavaScript ile işlevsellik kazandırılabilir. Bir button etiketi oluşturalım.

<button>Register</button>

Image: image etiketi, görüntüyü web belgesine koymak için kullanılır. Kendi kendine kapanan bir etikettir. Ayrıca görüntünün kaynağını gösteren bir öznitelik alır.

Alıntı: Alıntı etiketi, bir metinden alıntı yapmak için kullanılır, ayrıca alıntının nereden yapıldığını gösteren bir özniteliği vardır.

<blockquote cite=“http//:google”>Never take life too serious, at the end no one is will come out of it alive</blockquote>

Kısaltma: kısaltma etiketi, kısaltılmış metnin tam anlamını ifade etmek için kullanılır.

<p>The <abbr title=“world wide web”>WWW</abbr> the technology that change the way we do things in the 21st century </p>

Alıntı Yap: Alıntı yapılan bir metinden alıntı yapmak için kullanılır.

<p>The <cite>HTML</cite> Anatomy is a nice article for beginner to start learning html </p>

Küçük: küçük bir metin oluşturmak için küçük etiket kullanılır. Bir web sitesinin altbilgisindeki kopyala-yaz sembolü gibi.

Div: div etiketi, diğer etiketleri barındıran bir kap gibidir. Satır içi öğeleri blok öğelere dönüştürmek için kullanılır.

HTML:

<div>
    <label>Age</label>
    <input type = “number” name = “age” value = “30”></input>

    <label>Birthday</label>
    <input type = “date” name = “birthday”></input>
</div>

HTML Nitelikleri: Nitelikler, HTML öğesi hakkında ek bilgiler içerir ve genellikle eşittir işareti ve çift tırnak ile gelirler.

<img src=“image/picture.jpg” Alt= “ Children Playing on the field” height=“300” width=“400”>

Not: src, kaynak özniteliği adı verilen bir özniteliktir ve “image/picture.jpg”, görüntünün kaynağını söyleyen parametredir. Benzer şekilde Alt, yükseklik ve genişlik de özniteliklerdir.

Yorum: Yorumlar, metin editörü tarafından derlenmeyecek ve canlı sunucuda gösterilmeyecek şekilde yazılmış kelimelerdir. Programcılar tarafından bir kod bloğunun gerçekleştirmesi gereken eylemi açıklamak için kullanılırlar. HTML’de yorum bu sembolle yapılır <!–comment–>

HTML Semantik Etiketleri
HTML semantik etiketleri, etiketin anlamını hem tarayıcıya hem de geliştiriciye açık bir şekilde açıklar. Web sitenizi düzenlemek için kullanılırlar.
<header></header>
<footer></footer>
<aside></aside>
<main></main>
<article></article>
<section></section>
<details></details>

HTML Öğrenmeye Yeni Başlayanlar Kılavuzu

Reisci

Reisci

Yerli Ve Milli Hacker