HTML

Hyper Text Markup Language

Volkan ŞENGÜL

Yazılımcı'nın Seyir Defteri

@volkansengul

http://volkansengul.com

HTML'in Tarihçesi

  • 1990 HTML - Tim Berners-Lee / CERN
  • 1993 HTML+ Dave Raggett
  • 1995 HTML 2.0 - HTML Working Group
  • 1997 HTML 3.2 - W3C
  • 1999 HTML 4.0 - W3C
  • 2000 xHTML 1.0 - W3C
  • 2008 HTML 5 - WHATWG (first public draft)
  • 2012 HTML5 - WHATWG (living standart)
  • 2014 HTML5 - W3C
  • 2016 HTML5.1 - W3C

Nasıl Çalışır

  • Bir işaretleme dilidir
  • HTML Tagleri ve Metinler içerebilir
  • Web Browser tarafından yorumlanır
  • HTML Dökümanı = Web Sayfası

Anatomisi

<html>

<head> ... </head>

<body> ... </body>

</html>

<tag>

  • Açılan her tag kapatılmalıdır
     
  • İç içe birden fazla tag kullanılabilir
     
  • küçük harfler ile yazılır
     
  • <span>Merhaba Dünya</span>
     
  • <a href="http://google.com">google</a>
     
  • <img src="logo.jpg" />

<head>

  • <title>
    • ​<title>Site Başlığı</title>
       
  • <meta>

    • <meta charset="UTF-8">

    • <meta name="description" content="site kısa açıklama">

    • <meta name="keywords" content="HTML, CSS, XML, JavaScript">

    • <meta name="author" content="Volkan ŞENGÜL">

    • <meta name="viewport" content="width=device-width, initial-scale=1.0">
       

  • <link>
    • <link rel="stylesheet" href="mystyle.css">

<head>

  • <style>
    • <style>
        body {background-color: white;}
        h1 {color: red;}
        p {color: blue;}
      </style>
  • <base>

    • <base href="https://volkansengul.com/blog" target="_blank">

<head>

  • <script>
    • <script>
      function myFunction {
          document.getElementById("demo").innerHTML = "Hello JavaScript!";
      }
      </script>

<h1> Başlıklar <h6>

  • <h1>Başlık 1</h1>
  • <h2>Başlık 2</h2>
  • ....
  • <h6>Başlık 6</h6>

Paragraf

  • <p>This is a paragraph.</p>
     
  • <p>This is another paragraph.</p>

HTML Biçimlendirme

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

Resim

  • <img src="logo.jpg" alt="Site adı">

 

  • <img src="haber_resmi.jpg" alt="Haber başlığı">

Link

  • <a href="https://google.com">Google !</a>
     
  • <a href="https://google.com" target="_blank">Google !</a>

     
  • _blank -  Yeni tab veya pencere
  • _self - Aynı pencerede veya tabda
  • _parent - Bir üst kapsayıcı frame'de
  • framename - belirtilen frame'de

Tablo

  • <table style="width:100%">
      <tr>
        <th>Name:</th>
        <td>Bill Gates</td>
      </tr>
      <tr>
        <th rowspan="2">Telephone:</th>
        <td>55577854</td>
      </tr>
      <tr>
        <td>55577855</td>
      </tr>
    </table>

List

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

 

disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

Div

<div>Hello</div>
<div>World</div>

Class

<div class="hello">Hello</div>

Id

<div class="helloworld">Hello World !</div>

HTML5 Semantic

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

DEMO !

Teşekkürler

Made with Slides.com