HTML Öğrenci Materyali

HTML, bir web sayfasının temelini oluşturur. Bu ünitede, bir web sayfası için nasıl sağlam ve anlamlı bir yapı oluşturacağımızı inceleyeceğiz.

Temel çıkarımlar

  • Öğrenciler HTML dosya yapısını anlar.
  • Öğrenciler, web sayfası oluşturmak için yaygın etiketleri nasıl kullanacaklarını bilir.

HTML nedir?

HTML, HyperText Markup Language (Köprü Metni Biçimlendirme Dili) ifadesinin kısaltmasıdır. Bu kod, aşağıdakiler için kullanılır:

  • World Wide Web'de depolanan ve tarayıcıda görüntülenen dokümanlar oluşturma
  • web sayfamız için temel bir yapı oluşturur (web sayfasının iskeleti).
  • Tarayıcımızın görüntülemesi için metin ve resimlerin düzgün şekilde yüklendiğinden emin olun.

HTML'yi Ne Zaman Kullanırız?

World Wide Web'de gördüğünüz her web sayfası HTML kodu kullanılarak yazılır. Düğmeler, resimler, formlar, metin bölümleri HTML ile oluşturulan öğelerdir.

Web sayfamızı insan vücudu olarak düşünürsek HTML, kemik yapısıdır. CSS kullanarak vücuda ten ve kıyafet ekleyebiliriz ancak bunu yalnızca iskelet yapısını oluşturduktan sonra yapabiliriz.

HTML In Action

HTML'nin temelinde öğeler bulunur. Öğeler etiketlerle oluşturulur.

Çoğu öğenin açılış etiketi ve kapanış etiketi vardır:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

Web sayfasında görmek istediğiniz içerik (metin veya diğer HTML öğeleri) bu etiketlerin arasına yerleştirilebilir. Bu, bir sandviçin katmanlarını iç içe yerleştirmeye benzer.

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

Bazı HTML içerikleri, ek bir kapanış etiketi gerektirmeyen kendi kendini kapatan etiketlerle oluşturulur:

<img />
<link />

Bu öğenin görevi dokümanınızda yer tutmak olduğundan yalnızca bu etiket yeterlidir. Diğer HTML öğelerinin çoğunun aksine, bu kendi kendini kapatan öğelerin içine başka öğeler veya bilgiler yerleştirmek mümkün değildir.

HTML Öğesinin Bölümleri

HTML Örneği

Bu kod, tarayıcıda aşağıdaki resimdeki gibi görünür.

Bu Kod...

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... Bu Web Sayfasını Oluşturur

HTML Referansı

Çerçeveleme

Bağlam ve amaç

HTML, Köprü Metni Biçimlendirme Dili'nin kısaltmasıdır. Metne yapısal anlam kazandırmanın bir yoludur. Bilgisayarların ve programcıların bir metin parçasının amacını kolayca belirlemesine olanak tanır.

HTML'yi bir web sayfasının iskeleti olarak düşünebilirsiniz. Yapıyı ve içeriği sağlarken JavaScript ve CSS etkileşimi ve stili sağlar.

Öğrenme hedefleri

Öğrenciler şunları yapabilir:

  • HTML dosyası oluşturup düzenleyicilerinde ve tarayıcılarında açma
  • Uygun yapıya sahip bir HTML dosyası oluşturun
  • web sitelerine yapı ve içerik eklemek için bazı yaygın etiketleri listelemek ve kullanmak

Başlarken

Bölümün çerçevesi ve amacı

  • HTML, .html uzantılı dosyaların içine yazılır.
  • HTML dosyalarınıza istediğiniz adı verebilirsiniz. Ancak geliştiricinin sunucuyu farklı şekilde yapılandırmak için bir nedeni yoksa açılış sayfası için en yaygın kullanılan ad index.html'dır.
# creating an html file on the command line
touch index.html
 
# opening your html file in your browser
open index.html

Mini yarışmalar

  1. İstediğiniz adlarda 3 ek HTML dosyası oluşturun.
  2. Dosyalardan birini metin düzenleyicinizde ve tarayıcınızda açın.

HTML Sayfasının Yapısı

Bölümün çerçevesi ve amacı

Bir HTML dokümanı her zaman aynı yapıyla başlamalıdır:

  • DOCTYPE etiketi özeldir ve kapatılmaz. Ayrıca, alfa sayısal olmayan (harf/sayı) değerler içerebilen tek etikettir.
  • <head>, web siteniz hakkında bilgiler içerir ancak sayfada gösterilecek asıl içerik yer almaz.
  • <body>, sayfanızın ekranda gösterilecek tüm içeriğini içerir.
  • Sayfanızın yapısını oluşturmak için kullanacağınız etiketler, <body> etiketleri arasına yerleştirilmelidir.
  • Açılış ve kapanış etiketleri arasına öğenin metnini veya "içeriğini" yerleştiririz. Nihai sonuç şu şekilde görünür: <example-tag>Content Goes in here</example-tag>. Etiketler diğer etiketlerin içine de yerleştirilebilir.
  • Bir etiketi başka bir etiketin içine yerleştirirken yeni etiketi girintilemeniz gerektiğini unutmayın. Bu, yeni etiketin üst etiketinin alt etiketi olduğunu gösterir.

Kelime hazinesi

  • Öğeler: HTML koduyla oluşturulan öğeler (ör. resimler, paragraflar ve başlıklar).
  • Etiketler: Belirli öğelerin nerede başlayıp nerede bittiğini gösteren kod parçalarıdır.
  • child: Diğer öğelerin İÇİNDE bulunan öğeler.
  • parent: Diğer öğeleri İÇEREN öğeler.

HTML örnekleri

Not: Aşağıdaki örnek yalnızca referans amaçlıdır. Hepsini hemen anlamanız gerekmez ancak iyi biçimlendirilmiş HTML'nin nasıl görünebileceğini görmek faydalı olabilir.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
 
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

Mini yarışmalar

  1. Oluşturduğunuz dosyalardan birini açın ve temel HTML etiketi yapısını ekleyin.
  2. Aile ağacınızı (veya başka birinin aile ağacını) gösterecek şekilde HTML gövdesini ayarlayın. Aile grubunu tutmak için section etiketi kullanın. Bir aile üyesini tutmak için p etiketi kullanın. Aileler karmaşık olabilir ancak örnek olarak şunlar verilebilir:
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

Sık Kullanılan Etiketler

Bölümün çerçevesi ve amacı

Genel olarak kendi öğe türlerimizi oluşturmayız. Bunun yerine, işlevselliği önceden ilişkilendirilmiş bir dizi önceden tanımlanmış öğe vardır.

Kod bloğu örneklerinin dökümü için HTML referansına bakın

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

Mini yarışmalar

  1. Yukarıdaki tüm içerikleri ilgi alanlarınıza göre düzenleyin.
  2. Dersin başında oluşturduğunuz diğer boş HTML dosyalarından birinde, başlık, ana başlıklar ve alt başlıklar içeren bir haber makalesi hazırladığınızı varsayın (İçerik bulamıyor musunuz? Seyahatteyken geçirdiğiniz bir günü anlatın. Yaptığınız kısa gezileri, ziyaret ettiğiniz yerleri ve yediğiniz yemekleri düşünün.
  3. İlgili etiketleri kullanın ve haber makalenizin web sitenizde görünmesi için biraz içerik ekleyin.
  4. İçeriğinizin tarayıcınızda göründüğünü doğrulayın.
  5. EKSTRA: Bir kullanıcının makalenizle ilgili yorum göndermek için doldurabileceği bir form oluşturun. Bu form henüz çalışmasa da (JavaScript'e bağlanmadığı için) HTML'de oluşturulması, çalışan bir formun nasıl oluşturulacağına dair ilk adımı gösterebilir.

Bağlam

HTML, World Wide Web'deki içeriklerin dilidir.

HTML dosyalarınıza gitmek ve bunları açmak için Komut Satırı'nı kullanırsınız. HTML dosyalarınız, çeşitli işlevlerden oluşan JavaScript komut dosyası kullanılarak yazılmış CSS stilleri ve davranışıyla zenginleştirilir. HTML dosyaları, Google App Engine tarafından kullanılan ve bir veritabanından doldurulan şablonlar da olacaktır.

HTML In Action

HTML'yi kullanmaya başlama

HTML, .html uzantılı dosyaların içine yazılır.

Sayfanızı görüntüleme

Mac'te bir HTML dosyasını önizlemek için: Komut satırında, HTML sayfanızın bulunduğu klasöre gidin ve "filename" yerine HTML dosyanızın adını yazarak open filename komutunu girin.

Genel Söz Dizimi

<tag>
  Content
</tag>

Öğeler İç İçe Yerleştirilmiş

HTML öğeleri diğer öğelerin içine yerleştirilebilir:

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

HTML Sayfasının Yapısı

Her web sayfasının aynı olan temel bir yapısı vardır. Şöyle görünür:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • <head>, web siteniz hakkında bilgi içerir ancak sayfada gösterilecek gerçek içeriği içermez (web sayfanızın "beyni" olarak düşünebilirsiniz).
  • <body>, sayfanızın ekranda gösterilecek tüm içeriğini içerir.

Ortak Öğeler

Bir sayfaya içerik eklemek için <body> ve </body> etiketlerinin içinde bu ortak öğeleri kullanın.

Paragraf

Paragraf oluşturmak için p açılış ve kapanış etiketlerini kullanın:

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

Yorum

Son oluşturulan HTML'yi etkilemeden kodunuzun daha kolay okunmasını sağlamak için yorumları kullanın.

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

Başlıklar

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Genel <div>

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

Listeler

Liste öğeleri listeleri (<li>), sırasız liste etiketi (<ul>) veya sıralı liste etiketi (<ol>) ile sarmalanır.

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
 
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

Resim

<img> etiketi, src özelliği kullanılarak resmin adresinin belirtilmesini gerektirir. İsteğe bağlı olan alt özelliği ise ekran okuyucular da dahil olmak üzere erişilebilirlik için kullanılır.

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

Köprü için <a> etiketi, href özelliği kullanılarak köprü hedefinin adresinin belirtilmesini gerektirir.

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

Yatay Çizgi

<!-- This self-closing tag creates a line across your web page. -->
<hr>

Ara

<!-- This self-closing tag creates a line break between elements. -->
<br>

Form

Kullanıcıdan bilgi toplamak için <form> kullanılır. Bir <form> çalışabilmesi için topladığı verileri işlenmek veya kullanılmak üzere bir yere göndermesi gerekir. Bu nedenle, <form> genellikle ek özellikler gerektirir:

  • action - form gönderildiğinde form verilerinin hedefi
  • method, verilerin GET veya POST türünde bir istek kullanılarak işlenip işlenmeyeceğini gösterir.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

Giriş

<input>, <form> tarafından bilgi toplamak için kullanılan öğedir.

Bir <input> öğesi genellikle gönderilen verilerin ait olduğu alanı tanımlamak için veritabanları tarafından kullanılan bir name özelliğine de sahiptir.

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

<input> öğesi çok yönlüdür: type özelliği belirtilerek metin alanı, takvim tarzı tarih seçici, radyo düğmesi, açılır liste vb. olarak oluşturulabilir. Daha kapsamlı bir liste için bazı harici belgelere göz atabilirsiniz.

İpuçları ve Püf Noktaları

  • Diğer geliştiricilerin bir web sayfasına bir öğe eklemek için hangi etiketleri kullandığını görmek üzere web sayfalarının kodunu inceleyerek hangi HTML etiketlerinin kullanılabildiğini öğrenin.
  • Eklemek istediğiniz öğeyi bulamıyorsanız Geliştirici Belgeleri'ne bakın. Olası tüm HTML öğelerinin bazı listelerini https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/ adreslerinde bulabilirsiniz.
  • HTML yazarken, açılış ve kapanış etiketi gerektiren öğeler için etiketler arasına içerik eklemeden önce etiketi açıp kapatmak en iyisidir. Bu şekilde, bağlantısız etiketleriniz olmaz.
  • Kodunuzdaki HTML öğelerinin iç içe yapısını en iyi şekilde görüntülemek için diğer öğelerin içindeki öğeleri girintileyin. Bu, HTML içeriğinizin yapısını hızlıca tanımanıza yardımcı olur.
  • Çok sayıda yorum kullanın. Bu yorumlar, kendi kodunuzda sorun gidermenize ve başkalarından incelemelerini istediğinizde onlara yardımcı olur.
  • html5boilerplate.com gibi web'deki kaynaklar, HTML yazmaya hızlıca başlamanıza yardımcı olabilir.

En İyi Uygulamalar Özeti

  • Bir web sayfası hakkındaki bilgiler, bir HTML belgesinin <head> bölümüne girilir: başlık, meta veriler, stillere giden bağlantılar vb.
  • Bir web sayfasındaki bilgiler, HTML dokümanının <body> bölümüne gider.
  • Geliştiriciler, HTML dokümanının içeriğini oluşturmak için birçok öğe kullanabilir. Örneğin: <p>, <h1>-<h6>, <div>, <li>, <img>, <a>, <hr>, <br>, <!-- --> ve daha fazlası.
  • Bazı öğeler için açılış etiketi ve kapanış etiketi gerekir: <p></p>.
  • Diğer öğeler kendiliğinden kapanır. Bu nedenle, yalnızca bir açılış etiketi gerekir: <img>.
  • Etiketler, bir öğenin nasıl davranması gerektiği hakkında daha fazla bilgi sağlayan özellikler (src, alt, id vb.) içerebilir: <img src="filename.png" alt="description">.
  • Yorumlar (<!-- -->), web sayfasının hangi bölümlerinin ne işe yaradığını anlamak için geliştiricilere faydalı notlar sağlar.
  • Sayfanın nasıl oluşturulduğunu incelemek için web sayfalarının HTML kodunu denetlemek üzere tarayıcınızdaki yerleşik geliştirici araçlarını kullanın.

1. Soru

Aşağıdaki öğelerden hangisi alt öğedir? (Bu alıştırma için gövde/html öğelerini yoksayın)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. Eh1
  2. p
  3. a
  4. h1 ve p

2. Soru

Bir HTML dokümanında __, <head> öğesine, __ ise <body> öğesine yerleştirilir.

  1. yapı, meta veriler
  2. meta veriler, yapı
  3. başlıklar, daha küçük içerikler
  4. Sitenin başlığı, sitenin ana içeriği

3. Soru

Aşağıdakilerden hangisi, iç içe yerleştirilmiş öğeleri girintilemek için iyi bir neden değildir?

  1. Girintileme, hangi öğelerin diğer öğelerde yer aldığını görmeyi kolaylaştırır.
  2. Girintileme, web sayfasının yapısını okumayı kolaylaştırır.
  3. Girintileme, botların/arama motorlarının web sayfasının yapısını okumasını kolaylaştırır.
  4. Girintileme, kardeş öğeleri tanımlamayı kolaylaştırır

4. Soru

Aşağıdakilerden hangisi HTML öğesinin bir özelliğidir?

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. kenar çubuğu
  4. Kenar çubuğu burada görünür.

5. Soru

Aşağıdaki HTML öğesi kaç özelliğe sahip?

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

6. Soru

Bir ilişkiyi gösteren aşağıdaki HTML snippet'inde hangi öğe üst öğedir?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

7. Soru

Aşağıdaki HTML snippet'indeki öğelerden kaçı üst öğenin alt öğesidir?

(Sarmalama <body> veya <html> öğelerini saymayın)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

8. Soru

Bazı tarayıcılar aşağıdaki HTML snippet'ini doğru şekilde oluşturacak olsa da bu snippet'te ne yanlış?

<img src=puppies.png width=400 />
  1. Kapanış etiketi yok
  2. Özellik değerleri tırnak içinde olmalıdır.
  3. width özelliğini sağlamak için height özelliği de gereklidir.
  4. Gerekli bir özellik eksik

1. Soru

Aşağıdaki öğelerden hangisi alt öğedir? (Bu alıştırma için gövde/html öğelerini yoksayın)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

a öğesi, başka bir öğe içinde yer aldığından alt öğedir.

2. Soru

Bir HTML dokümanında __, <head> öğesine, __ ise <body> öğesine yerleştirilir.

meta veriler <head> öğesine, yapı ise <body> öğesine yerleştirilir. <head> öğesindeki hiçbir şey web sayfasında görünmez.

3. Soru

Aşağıdakilerden hangisi, iç içe yerleştirilmiş öğeleri girintilemek için iyi bir neden değildir?

Girintileme, botların/arama motorlarının web sayfasının yapısını okumasını kolaylaştırmaz. Bir bot, web sitesini okurken HTML kodunu tek bir satırda olsa bile okuyabilir.

4. Soru

Aşağıdakilerden hangisi HTML öğesinin bir özelliğidir?

<div class="sidebar">Sidebar goes here!</div>

class, özelliktir. Özellikler bir HTML öğesinin içine yerleştirilir ve genellikle bir değere sahiptir (ancak değere sahip olması zorunlu değildir).

5. Soru

Aşağıdaki HTML öğesi kaç özelliğe sahip?

<input type="text" placeholder="username" name="username" />

Yukarıdaki input öğesinin 3 özelliği vardır: type, placeholder ve name.

6. Soru

Bir ilişkiyi gösteren aşağıdaki HTML snippet'inde hangi öğe üst öğedir?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p>, başka öğeler içerdiğinden üst öğedir.

7. Soru

Aşağıdaki HTML snippet'indeki öğelerden kaçı üst öğenin alt öğesidir?

(Sarmalama <body> veya <html> öğelerini saymayın)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

Snippet'te 4 alt öğe vardır. Temel olarak, üstünde bir üst öğesi olan tüm öğeler (<div> öğesi hariç) yani <h1>, <p>, <i>, <a>.

8. Soru

Bazı tarayıcılar aşağıdaki HTML snippet'ini doğru şekilde oluşturacak olsa da bu snippet'te ne yanlış?

<img src=puppies.png width=400 />

Özellik değerleri tırnak içine alınmalıdır. <img />, kendisini kapatan bir etikettir ve zorunlu özelliği yoktur. height olmadan width değerine sahip olmakta veya bunun tersini yapmakta sorun yoktur.