Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>KodDersleri.com</title>
​
        <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
​
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
​
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
​
    <!-- fontawesome -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
​
    <link rel="stylesheet" type="text/css" href="../side_menu_css/side-menu.css">
​
    <style type="text/css">          
​
      .bold {
              
          font-weight: bold;
      }
​
      .margin {
        margin: 15px;
      }
          
      .marginTop {
              
          margin-top: 30px;
      }
          
      .marginBottom {
              
          margin-bottom: 30px;
      }
          
      .center {
         
          text-align: center;
      }
​
      .lgText {
        font-size: 1.15em;
      }
​
      .title {
          margin-top: 100px;
          font-size: 370%;
          font-weight: bold;
      }
​
​
    .htmlTitle {
      font-weight: bold;
    }
​
    .htmlTitlePadding {
        margin-bottom: 15px;
    }
​
    .kod-alani {
        font-family:Consolas,"courier new";
        font-size:16px;line-height:1.4;
        width:auto;background-color:#fff;
        padding:8px 12px;
        border:4px solid #7FCBFE;
        word-wrap:break-word
    }
​
    .ornek-alani{
        background-color:#1E90FF;
        padding:0.01em 16px;
        box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
    }
​
    .sonraki {
        float: right;
        position: relative;
        top: -22px;
    }
​
    body {
      background-color: #f2fcff;
    }
    
    html, body {
        overflow-x: hidden;
    }
​
    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1.5px solid #ccc;
        margin: 1em 0;
        padding: 0; 
    }
​
    </style>
​
  </head>
  <body>
​
<!-- SIDE MENU -->
    <div class="side-menu">
    
    <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <div class="brand-wrapper">
            <!-- Hamburger -->
            <button type="button" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
​
            <!-- Brand -->
            <div class="brand-name-wrapper">
                <a class="navbar-brand bold" href="http://www.koddersleri.com/">
                    <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Anasayfa
                </a>
            </div>
​
        </div>
​
    </div>
​
    <!-- Main Menu -->
    <div class="side-menu-container">
        <ul class="nav navbar-nav scrollable-menu">
​
            <h4 class="htmlTitle">HTML DERSLERI</h4>
            <li ><a href="http://www.koddersleri.com/html/html_giris.html"> HTML Giris</a></li>
            <li><a href="http://www.koddersleri.com/html/html_editorler.html"> HTML Editorleri</a></li>
            <li><a href="http://www.koddersleri.com/html/html_elementler.html"> HTML Elementler</a></li>
            <li ><a href="#"> HTML Ozellikler</a></li>
            <li><a href="#"> HTML Basliklar</a></li>
            <li><a href="#"> HTML Paragraflar</a></li>
            <li><a href="#"> HTML Stiller</a></li>
            <li ><a href="#"> HTML Formatlama</a></li>
            <li><a href="#"> HTML Alintilama</a></li>
            <li><a href="#"> HTML Bilgisayar Kodu</a></li>
            <li><a href="#"> HTML Yorumlar</a></li>
            <li ><a href="#"> HTML Renkler</a></li>
            <li><a href="#"> HTML CSS</a></li>
            <li><a href="#"> HTML Linkler</a></li>
            <li><a href="#"> HTML Resimler</a></li>
            <li ><a href="#"> HTML Cerceveler</a></li>
            <li><a href="#"> HTML Listeler</a></li>
            <li><a href="#"> HTML Bloklar</a></li>
            <li><a href="#"> HTML Siniflar</a></li>
            <li ><a href="#"> HTML Sayfa Duzeni</a></li>
            <li><a href="#"> HTML Duyarli Dizayn</a></li>
            <li><a href="#"> HTML Iframe</a></li>
            <li><a href="#"> HTML JavaScript</a></li>
            <li ><a href="#"> HTML Head</a></li>
            <li><a href="#"> HTML Varliklar</a></li>
            <li><a href="#"> HTML Semboller</a></li>
            <li><a href="#"> HTML Karakter Setleri</a></li>
            <li><a href="#"> HTML URL Kodlamak</a></li>
            <li class="htmlTitlePadding"><a href="#"> XHTML</a></li>
​
            <h4 class="htmlTitle"> HTML Formlar</h4>
            <li><a href="#"> HTML Formlar</a></li>
            <li><a href="#"> HTML Form Elementleri</a></li>
            <li><a href="#"> HTML Input Tipleri</a></li>
            <li class="htmlTitlePadding"><a href="#"> HTML Input Ozellikleri</a></li>
​
            <h4 class="htmlTitle"> HTML5</h4>
            <li><a href="#"> HTML5 Giris</a></li>
            <li><a href="#"> HTML5 Destek</a></li>
            <li><a href="#"> HTML5 Elementler</a></li>
            <li><a href="#"> HTML5 Anlamlandırma</a></li>
            <li><a href="#"> HTML5 Migration</a></li>
            <li class="htmlTitlePadding"><a href="#"> HTML5 Stil Rehberi</a></li>
​
            <h4 class="htmlTitle"> HTML5 Grafikleri</h4>
            <li><a href="#"> HTML Kanvas</a></li>
            <li class="htmlTitlePadding"><a href="#"> HTML SVG</a></li>
​
            <h4 class="htmlTitle"> HTML Medya</h4>
            <li><a href="#"> HTML Medya</a></li>
            <li><a href="#"> HTML Video</a></li>
            <li><a href="#"> HTML Ses</a></li>
            <li><a href="#"> HTML Plug-in'ler</a></li>
            <li class="htmlTitlePadding"><a href="#"> HTML Youtube</a></li>
​
            <h4 class="htmlTitle"> HTML API'lari</h4>
            <li><a href="#"> HTML Cografi Konum</a></li>
            <li><a href="#"> HTML Surukle/Birak</a></li>
            <li><a href="#"> HTML Yerel Depolama</a></li>
            <li><a href="#"> HTML Uygulama Bellekleme</a></li>
            <li><a href="#"> HTML Web Calisani</a></li>
            <li class="htmlTitlePadding"><a href="#"> HTML SSE</a></li>
​
            <!-- Examples
            <h4 class="htmlTitle"> HTML Ornekler</h4>
            <li><a href="#"> HTML Ornekler</a></li>
            <li><a href="#"> HTML Test</a></li>
            <li><a href="#"> HTML5 Test</a></li>
            <li><a href="#"> HTML Sertifika</a></li>
            <li><a href="#"> HTML5 Sertifika</a></li>
            <li><a href="#"> HTML Ozet</a></li>
            -->
​
            <h4 class="htmlTitle"> HTML Referans</h4>
            <li><a href="#"> HTML Etiket Listesi</a></li>
            <li><a href="#"> HTML Ozellikler</a></li>
            <li><a href="#"> HTML Etkinlikler</a></li>
            <li><a href="#"> HTML Canvas</a></li>
            <li><a href="#"> HTML Ses/Video</a></li>
            <li><a href="#"> HTML Dokuman Tipleri</a></li>
            <li><a href="#"> HTML Renkler</a></li>
            <li><a href="#"> HTML Karakter Setleri</a></li>
            <li><a href="#"> HTML URL Kodlamak</a></li>
            <li><a href="#"> HTML Dil Kodlari</a></li>
            <li><a href="#"> HTML Mesajlar</a></li>
            <li><a href="#"> HTML Metodlar</a></li>
            <li><a href="#"> Klavye Kisa Yollari</a></li>
            
        </ul>
    </nav>    
    </div>
<!-- SIDE MENU END -->
​
  <div class="container-fluid contentContainer">
    <div class="side-body">
​
        <h1>HTML Giriş</h1>
        <div class="önce-sonra">
            <div class="önceki"><a href="http://www.koddersleri.com/html/html_giris.html">&laquo; Önceki</a></div>
​
            <div class="sonraki"><a href="http://www.koddersleri.com/html/html_editorler.html">Sonraki &raquo;</a></div>
        </div>
        <hr>
        <h2>HTML Nedir?</h2>
        <p class="lgText">HTML web dökümanlarını(web sayfaları) oluşturmak için kullanılan <strong>markup</strong>(işaretlenmiş etiketler) dilidir.</p>
        <ul class="lgText">
            <li>HTML'in açılımı Hyper Text Markup Language'dir.(Bunun Türkçe'si Hiper Metin İşaretleme Dili'dir.)</li>
            <li>Bir markup dili, diğer markup etiketlerinden oluşan bir settir.</li>
            <li>HTML dökümanları HTML etiketleriyle oluşturulur.</li>
            <li>Her ayrı HTML etiketi başka bir dökümanın içeriğini oluşturur.</li>
        </ul>
        <hr>
        <h2>HTML Örneği</h2>
        <div class="ornek-alani marginBottom">
        <h3 style="color:white;">Küçük bir HTML dökümanı:</h3>
        <div class="kod-alani notranslate htmlHigh">
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>&lt;head&gt;<br>&lt;title&gt;Page Title&lt;/title&gt;<br>
 &lt;/head&gt;<br>
&lt;body&gt;<br><br>&lt;h1&gt;My First Heading&lt;/h1&gt;<br>&lt;p&gt;My first paragraph.&lt;/p&gt;<br><br>
    &lt;/body&gt;<br>&lt;/html&gt;
        </div>
            <a target="_blank" href="kendin_dene_001.html" class="btn btn-info margin">Kendin Dene! &raquo;</a>
        </div>
        <hr>
​
        <h2>Örneğin Açıklaması</h2>
​
        <ul class="lgText">
            <li>En üstteki DOCTYPE yazısı dokümanın HTML tipinde olduğunu tanımlar.</li>
            <li><strong>&lt;html&gt;</strong> ve <strong>&lt;/html&gt;</strong> etiketleri arasındaki kalan kısım HTML dökümanının başlangıç ve bitişini tanımlar. HTML etiketlerinin amacı dökümanın başlangıç ve bitişini belirlemek ve tarayıcınıza HTML dosyasının sonunun geldiğini söylemektir.</li>
            <li><strong>&lt;head&gt;</strong> ve <strong>&lt;/head&gt;</strong> arasında kalan kısım döküman hakkında bilgi verir. Bu bölüm tarayıcı penceresinde görüntülenmez.</li>
            <li><strong>&lt;title&gt;</strong> ve <strong>&lt;/title&gt;</strong> arasında kalan kısım dökümanın başlığını belirler. Bu başlık tarayıcınızın en üstünde veya sekmenin içinde sergilenir.</li>
            <li><strong>&lt;body&gt;</strong> ve <strong>&lt;/body&gt;</strong> arasında kalan kısım sayfanın görüntülenecek olan içeriğini içerir.</li>
            <li><strong>&lt;h1&gt;</strong> ve <strong>&lt;/h1&gt;</strong> arasında kalan kısım başlığı içerir.</li>
            <li><strong>&lt;p&gt;</strong> ve <strong>&lt;/p&gt;</strong> arasında kalan kısım ise paragrafın içeriğini içerir.</li>
        </ul>
​
        <p class="lgText">Web Tarayıcınız bu açıklamayı kullanarak başlığı ve paragrafı olan bir dökümanı sergileyebilir.</p>
        <hr>
        <h2>HTML Etiketleri</h2>
        <p class="lgText">HTML etiketleri köşeli parantezler içerisine alınmış anahtar kelimelerdir.</p>
        <div class="lgText">
            <strong>&lt;etiketismi&gt;</strong>içerik<strong>&lt;/etiketismi&gt;</strong>
        </div>
​
        <ul class="lgText">
            <li>HTML etiketleri genel olarak &lt;p&gt;</strong> ve <strong>&lt;/p&gt;</strong> gibi çiftler halindedirler.</li>
            <li>Çiftteki ilk etiket başlangıç etiketi, ikincisi ise bitiş etiketidir.</li>
            <li>Bitiş etiketi başlangıç etiketi ile aynı yazılır, tek fark etiket isminden önce <strong>slash</strong> konulmasıdır.</li>
        </ul>
        <hr>
        <div class="önce-sonra">
            <div class="önceki"><a href="http://www.koddersleri.com/html/html_giris.html">&laquo; Önceki</a></div>
​
            <div class="sonraki"><a href="http://www.koddersleri.com/html/html_editorler.html">Sonraki &raquo;</a></div>
        </div>
​
        <!-- KALANI EDITORS KISMINA KOY -->
​
        <br>
        <br>
​
    </div>
  </div>
​
​
​
​
​
​
​
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script> 
​
    <script>
      
​
​
    </script>
​
​
​
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers