Skip to content

Latest commit

 

History

History
266 lines (192 loc) · 12.5 KB

html.md

File metadata and controls

266 lines (192 loc) · 12.5 KB

İÇİNDEKİLER

  1. HTML Dersleri
    1.1. Html nedir?
    1.2. Html ne yapar?
    1.3. Html Tarihi Hakkında Kısaca
    1.4. Html yapısı
    1.5. Html etiketi nedir
    1.6. En çok kullanılan html etiketleri nelerdir
    1.7. Body etiketi
    1.8. 'h' etiketleri
    1.9. 'p' etiketi
    1.10. 'br' etiketi
    1.11. Html attribute nedir
    1.12. 'a' etiketi
    1.13. 'strong' ve 'b' etiketi etiketleri
    1.14. 'button' etiketi
    1.15. 'script' etiketi
    1.16. 'img' etiketi
    1.17. 'iframe' etiketi
    1.18. Yorum satırı
    1.19. 'form' etiketi
    1.20. 'input' etiketi
    1.21. 'link' etiketi
    1.22. 'style' etiketi
    1.23. 'meta' etiketleri
    1.24. 'title' tiketi
    1.25. Listeleme etiketleri
    1.26. Sıralı listeler
    1.27. Blog elementler ve inline elementler
    1.28. Semantic anlamlandırılmış html etiketleri
    1.29. Kaynaklar

1.HTML Dersleri

1.1-Html Nedir?

Html hiper metin işaretleme dili (HyperText Markup Language) olaraktanımlanır. Yani web sayfalarında gördüklerimizin iskelet yapısını oluşturmak için kullanılan metin işaretleme dilidir. Html bir programlama dili DEĞİLDİR...!

1.2-Html Ne yapar ?

  • Web sayfalarında gördüğümüz görsel, yazı ve videoların konumlanmasını sağlamak
  • Konumlandırılan web sayfalarının tarayıcılar tarafından doğru bir şekilde görüntülenmesi için gerekli olan kuralları belirler.

1.3-Html Tarihi Hakkında Kısaca

Html CERN de araştırmacıların dokümanlarını birbirleriyle paylaşabilmeleri için bir sistem kullanmak amaıyla çıkartılmış 1990 yılında da metin işaretleme dili olarak geliştirilmiştir. Geliştirici : W3C ve WHATWG (Kaynak: wikipedia)

1.4-Html Yapısı

Html sayfa yapısı

1.5-HTML Etiketi Nedir?

Html etiketi, dosya içeriğinin HTML dilinde yazıldığını tarayıcımıza bildirir. Etiket yapısı aşağıdaki gibidir

< etiket >

Yazı yazarken belirli kulrallara ve standartlara uyarak yazılarımızı hazırlamamız gerekir.

1.6-En Çok Kullanılan Html Etiketleri Nelerdir?

Html etiketi, dosya içeriğinin html dilinde yazıldığını tarayıcımıza bildirir. Etiketler küçüktür ve büyüktür işaretlerinin arasına yazılarak başlar ve içeriği yazdıktan sonra etiketi kapatmamız gerekir.(<html> </html> ) bu etiket altına mutlaka head ve body etiketlerinin olması gerekir

  • <html>
  • <head>
  • <body>

HEAD Etiketi

<head> etiketi site ziyaretçieri tarafından görülmesi gerekmekyen kodları içerir. Bu etiket altına yazılan kodlar genelde arama motorları içindir. Bütün etiketleri bu etiket altında kullanamayız.Bu etiket altına aşağıdaki etiketleri kullanabiliriz.

  • <title>
  • <meta>
  • <style>
  • <script>
  • <noscript>
  • <link>
  • <base>

1.7-BODY Etiketi

Web sayfamızda görünmesini istediğimiz bütün içeriği bu etiket altında yazarız.

1.8-H Etiketleri

Bu etiketler başlık etiketleridir. Linkteki örnekte başlık etiketlerini inceleyebilirsiniz. H etiketleri blok etiketlerdir ve satırı tamamen kaplar. (İleride ele alınacaktır.)

  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>

1.9-P Etiketi

<p> paragraf etiketidir. Linkteki örnekte p etiket örneğini inceleyebilirsiniz. P etiketleri blok etiketlerdir ve satırı tamamen kaplar. (İleride ele alınacaktır.) HTML otomatik olarak Paragraf etiketinin öncesine ve sonrasına satır atlatır.

1.10-BR Etiketi

<br /> etiketi satır atlatma etiketidir. Atlamakistediğimiz satır sayısı kadar bu etiketi kullanabiliriz. Linkteki örnekten incelenebilir.

1.11-HTML attribute Nedir?

HTML özellikleri, öğenin davranışını kontrol etmek için açılış etiketinde kullanılan özel kelimelerdir. HTML özellikleri, bir HTML öğesi türünün değiştiricisidir. Bir öznitelik, bir öğe türünün varsayılan işlevselliğini değiştirir veya bunlar olmadan düzgün çalışamayan belirli öğe türlerine işlevsellik sağlar (Kaynak: wikipedia)

1.12-A Etiketi

<a> etiket ile sayfalar linklenebilir. En önemli attribute ü (özelliği) href özelliğidir. Etiket içerisindeki yazılan yazı sayfamızda görünecek href içerisine ise tıklandığında gidilecek olan URL adresi yazılmaktadır.Linkteki örnekte a etiket örneğini inceleyebilirsiniz.

1.13-STRONG ve B Etiketi Etiketleri

<strong> etiketi arama motorlarına metinin önemli olduğunu bildirmek için kullanılır.Kullanıldığında metini kalın yapar. B etiketi ise sadece metini kalın yapar. Linkteki örnekte etiketler kullanılmıştır.

1.14-Button Etiketi

<button> etiketi buton oluşturmak için kullanılır. Buton üzerindeki yazmasını istediğimiz içeriği etiketin içerisine yazarız.

1.15-Script Etiketi

<script> etiketi JavaScript kodlarını HTML içerisine yazabilmemizi sağlar.

1.16-img Etiketi

Sayfamıza resim eklemek için <img> etiketini kullanırız. <img src="resim_adi.jpg" alt="açıklama yazısı" / > (Bakızın örnek) örnekte etiketler kullanılmıştır.

1.17-iframe Etiketi

Bu etiket genelde başka sayfa içerisindeki belge/video v.s. kendi sayfamızda göstermek için kullanırız. Örneğin youtube dan sayfamıza bir video eklemek istediğimizde bu etiketi kullanarak yapabiliriz. (Bakızın örnek) örnekte etiketler kullanılmıştır.

1.18-Yorum Satırı

Html sayfası içerisinde yorum satırı aşağıdaki gibi oluşturulur. <!-- (Buraya yorumu yazınız) --> Linkte bolca yorum satırı kullanılmıştır.

1.19-Form Etiketi

<form> web sayfalarında kullanıcıdan bilgi almak için kullanılan ve alınan bu bilgilerin işlenmek üzere arka tarafa (sunucuya) gönderilmesini sağlar.Formlar aşağıdaki etiketleri içerebilir.

  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>
  • <optgroup>
  • <fieldset>
  • <label>
  • <output>

1.20-Input Etiketi

<input> etiketi hmtl sayfalarında kullanıcıdan veri almak için kullanılmaktadır. Inputlar aşağıdaki gibidir.

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text"> (default value)
  • <input type="time">
  • <input type="url">
  • <input type="week">

Aşağıdaki resimde input tipleri gösterilmiştir. İnceleyiniz. Inputs

1.21-Link Etiketi

<link> etiketi sayfamızın görünmesini istemediğimiz kodları kısmında kullanırız. Bu etiket HTML dokümanımıza farklı kaynaklardan farklı dosyalardahil etmemizi sağlar. Örneğin: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"><-script> <link rel="stylesheet" href="styles.css">

1.22-Style Etiketi

Bu etikette sayfamızın head kısmında tanımlanır. Css kodlarının sayfamıza uygulanmasına olanak tanımaktadır. <style><-style>

1.23-Meta Etiketleri

Mete, genelde bilgisayar bilimleri dünyasında verilerin verisi olarak tanımlanır. Yanı bir veri ile ilgili verileri içermektedir. Örneğin: <meta charset="UTF-8"> Buradaki sayfa yapısını inceleyiniz.

1.24-Title Etiketi

Sayfamızızn head kısmında tanımladığımız sayfamızın başlığıdır ve kullandığımız browser sekmesini isimlendirir. Sayfanın başlığını inceleyiniz.

1.25-Listeleme Etiketleri

Bu etiketler iki çeşittir.

  • Sıralı Listeler (ol)
  • Sırasız Listeler (ul)

1.26-Sıralı Listeler

Sıralı listelerde sıra numarası vermek içi ardışık liste numaraları kullanılır. Yapısı aşağıdaki gibidir. Sıralı Liste Sırasız Liste Ayrıca Linkteki sayfada örneklenmiştir.

1.27-Blog Elementler ve Inline Elementler

Html kodlarımızı incelediğimizde kullandığımız etiketlerin bazıları kullandığı satırın tamamını kapladığını bazılarının da sadece kapladığı alan kadar yer kapladığını görürüz. Kullanıldığı satırın tamamını kaplayan elementlere blog element sadece kullanıldığı satırda işal ettiği alan kadar yer kaplayan etiketlere ise inline element denir. Hangi etiketler inline hangileri blog etiket olduğunu bu linkten inceleyebilirsiniz.

1.28-Semantic (Anlamlandırılmış) Html Etiketleri

Semantic kelimesi anlamlandırma olarak tanımlanabilir. Semantic etikeler, herhangi bir anlamı olan etiketler olarak ifade edilir. Yani hem tarayıcı hem de geliştirici için ne anlama geldiği açıkça bilinir. <div> ve <span> semantik etiketler değildir ve bir anlam ifade etmezler. Ancak aşağıdaki etiketler en çok kullanılan semantic etiketlerdir. Semantic Etiket Kullanım Örnek Sayfayı İnceleyiniz

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

1.29-Kaynaklar

https://www.w3schools.com

www.patika.dev