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

HTML

By Volkan Şengül

HTML

399

Volkan Şengül