Hiper Metin İşaretleme Dili’nin İngilizcesi olan Hypertext Markup Language’ın kısaltılmış hali yani HTML ile kendi web sayfanızı oluşturabilirsiniz.
Her web sayfasının kullanıcı tarafından görünen kısmını oluşturan HTML, öğrenmesi kolay ve eğlenceli bir metin işaretleme dilidir. Bu eğitim serisiyle HTML hakkındaki temel bilgileri edinmiş olacaksınız.
HTML Etiketleri
HTML’de her şey birer etiket içerisinde yer alır ve bu etiketlerin hepsi farklı görevlere sahiptir. Her etiket [enlighter lang=”html”]<[/enlighter] ve [enlighter lang="html"]>[/enlighter] işaretleri içerisinde başlar ve [enlighter lang=”html”][/enlighter] işaretleri içerisinde biter. Mesela aşağıdaki örnekte 5. satırda [enlighter lang=”html”]
[/enlighter] ve [enlighter lang=”html”][/enlighter] etiketi arasında yer alan kısımdaki metinler tarayıcınızın sekmesinde görünecek yazıyı belirler.
Basit Bir HTML Sayfa Örneği:
[enlighter lang=”html”]
Sekme Başlığı
Sayfa İçindeki Başlık
Bu bir paragraf alanıdır. Buraya genellikle sayfadaki uzun yazılar gelir.
[/enlighter]
HTML Sayfa Örneğimizi İnceleyelim:
Örneğimizin 1. satırındaki [enlighter lang=”html”][/enlighter] etiketi, dokümanın en başında yer alır ve tarayıcıya bu dokümanın bir HTML dokümanı olduğunu söyler.
2. satırda yer alan [enlighter lang=”html”][/enlighter] etiketiyse içerisindeki metinlerin HTML olduğunu belirtir.
3. satırda HTML sayfamızın üst kısmını oluşturan ve İngilizce baş anlamına gelen [enlighter lang=”html”]
[/enlighter] etiketi yer alıyor. Bu etiket 5. satır için yukarıda açıkladığım [enlighter lang=”html”]<title>[/enlighter] etiketleri gibi sayfanın baş kısmında yer alması gereken etiketleri içerir.
<p><b>7.</b> satırdan itibaren başlayan ve İngilizce gövde anlamını taşıyan [enlighter lang=”html”]<body></body>[/enlighter] etiketi, HTML sayfanızdaki esas elementleri içerecek kısımdır. Body kısmı, <b>8.</b> satırda yer alan ve sayfalarda başlık oluşturmaya yarayan [enlighter lang=”html”]
<h1></h1>
<p>[/enlighter] etiketi ve <b>9.</b> satırdaki [enlighter lang=”html”]
<p>[/enlighter] paragraf etiketi gibi etiketleri içerisinde barındırır.
<h2>HTML Dosyası Oluşturma</h2>
<p>Örneğimizi bilgisayarınızda denemeniz oldukça kolay çünkü HTML, her türlü tarayıcıda çalışır ve herhangi bir program yüklenmesi gerekmez.
<p>HTML dosyası oluşturmak için Windows işletim sistemindeki Not Defteri veya benzeri bir metin editörüne örneğimizdeki kodları kopyalayın ve metin dosyasını “<b>metinadi.txt</b>” yerine “<b>metinadi.html</b>” olarak kaydedin. Kaydetmiş olduğunuz dokümanı herhangi bir tarayıcıda çalıştırdığınızda aşağıdaki gibi bir görüntüyle karşılaşacaksınız.
<p><a href="https://www.ozgurceyaz.com/wp-content/uploads/2017/01/html-dosyasi-olusturma-1.jpg"><img fetchpriority="high" decoding="async" src="https://www.ozgurceyaz.com/wp-content/uploads/2017/01/html-dosyasi-olusturma-1.jpg" alt="" width="800" height="400" class="aligncenter size-full wp-image-141" srcset="https://www.ozgurceyaz.com/wp-content/uploads/2017/01/html-dosyasi-olusturma-1.jpg 800w, https://www.ozgurceyaz.com/wp-content/uploads/2017/01/html-dosyasi-olusturma-1-414x207.jpg 414w" sizes="(max-width: 800px) 100vw, 800px" /></a>
<h2>Sık Kullanılan Bazı HTML Etiketleri</h2>
<p>En yaygın kullanılan ve sizin de sık sık kullanacağınız bazı HTML etiketlerini aşağıda listeledim. Bunlar HTML’deki etiketlerin tamamı değildir ve tüm HTML etiketlerini görmek için W3.org’un <a href="https://www.w3.org/wiki/HTML/Elements" target=”_blank">tüm HTML elementleri</a> sayfasını ziyaret edebilirsiniz.
<p>Aşağıdaki örneklerimizin tamamı [enlighter lang=”html”]<body></body>[/enlighter] etiketi içerisinde olacağından kodları daha sade bir şekilde sunuyorum. Örnekleri denemek isterseniz gövde içerisinde kullandığınızdan emin olun.
<h3>HTML’de Yorum Satırı Yapma</h3>
<p>Yorum satırları, HTML dosyalarının içerisinde görünen ve tarayıcının kullanıcılara göstermediği kısımlardır. HTML’de yazdığımız kodlara yorum eklemek için [enlighter lang=”html”]<!--[/enlighter] ve [enlighter lang="html"]-->[/enlighter] etiketlerinin arasında yorumlarımızı yazıyoruz.
<p><b>HTML Yorum Satırı Örneği:</b><br />
[enlighter lang=”html”]<br />
<!--Bu bir yorumdur ve yalnızca kod tarafında görünür yani tarayıcı bu kısmı derlemez.--><br />
[/enlighter]
<h3>HTML’de Bağlantı Oluşturma</h3>
<p>Bağlantı etiketi, HTML’de en çok kullanılan etiketlerden biridir. HTML’de bağlantı vermek için [enlighter lang=”html”]href=””[/enlighter] içerisindeki çift tırnakların arasına bağlantıyı ve [enlighter lang=”html”]<a href="">[/enlighter] ve [enlighter lang=”html”]</a>[/enlighter] etiketleri arasına görünecek metni yazmalıyız.
<p>Hemen aşağıdaki örneğimizde HTML bağlantı etiketinin tamamı birlikte yer aldığı için daha anlaşılır olacaktır.
<p><b>HTML Bağlantı Verme Örneği:</b><br />
[enlighter lang=”html”]<br />
<a href="https://www.ozgurceyaz.com">Özgürce Yaz Sitesine Git</a><br />
[/enlighter]
<h3>HTML’de Kalın Yazı ve İtalik Yazı Etiketleri</h3>
<p>HTML’de [enlighter lang=”html”]<b></b>[/enlighter] etiketi arasında yer alan metnin tamamı kalın yazıyla yazılmış gibi görünür. İtalik yazı görünümü içinse [enlighter lang=”html”]<i></i>[/enlighter] etiketi kullanılır.
<p><b>HTML Kalın Yazı ve İtalik Yazı Örneği:</b><br />
[enlighter lang=”html”]
<p>Normal yazı kısmı ve <b>kalın yazı kısmı</b>.
<p>Adam öyle iriydi ki herkes ona <i>Koca Hasan</i> diye hitap ediyordu.
<p>[/enlighter]
<h3>Span Etiketi ve Satır İçi Stil Verme</h3>
<p>[enlighter lang=”html”]<span></span>[/enlighter] etiketi genellikle paragraf içerisindeki metinlerin belirli bölümlerine çeşitli özellikler vermek için kullanılır.
<p>Aşağıdaki örneğimizde Span etiketinin içindeki metni [enlighter lang=”html”]style=”color:blue”[/enlighter] koduyla maviye çevirdik. Buradaki Color, yazı rengini iki nokta üst üsteden sonraki renge çevirmeye yarıyor. Örneğimizde Blue dediğimiz için metin mavi görünecektir.
<p><b>Span Etiketi ve Style Örneği:</b><br />
[enlighter lang=”html”]
<p>Onun çok güzel <span style="color:blue">mavi</span> gözleri vardı.
<p>[/enlighter]
<h3>Div Etiketi ve Renk Kodları</h3>
<p>[enlighter lang=”html”]<span class="post-ads"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1827963976431127" data-ad-slot="6083443153" data-ad-format="auto"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></span>
<div></div>
<p>[/enlighter] etiketi hemen hemen her yerde görebileceğiniz bir kapsayıcıdır. HTML’de herhangi bir bölümü ifade eder. İçerisinde diğer birçok etiket yer alabilir.
<p>Bu örneğimizde [enlighter lang=”html”]
<div></div>
<p>[/enlighter] etiketi içerisine metin etiketleri yerleştirdik ve yazı rengini stil vererek değiştirdik. HEX renk kodu dediğimiz [enlighter lang=”html”]style=”color:#0000FF”[/enlighter] bu kodla ekranda görünebilecek tüm renkleri elde etmemiz mümkün. HEX renk kodlarını kolayca belirleyebilmek için W3 Schools’un <a href="http://www.w3schools.com/colors/colors_picker.asp" target="_blank">HTML renk paletini</a> kullanabilirsiniz.
<p><b>Div Etiketi ve HTML Renk Kodu Örneği:</b><br />
[enlighter lang=”html”]
<div style="color:#0000FF">
<h3>Bu Bir Başlıktır</h3>
<p>Bu bir paragraftır.
</div>
<p>[/enlighter]
<h3>HTML’de Resim Ekleme</h3>
<p>[enlighter lang=”html”]<img decoding="async" src="">[/enlighter] etiketiyle yine bağlantı verme etiketinde olduğu gibi resmin adresini yazarak HTML’de resimleri görüntülemek mümkün. [enlighter lang=”html”]src=””[/enlighter] kısmındaki çift tırnakların arasına gelen adrese sahip resim tarayıcılarda tam ekran olarak görünecektir. Eğer resmin belirli bir boyutta görünmesini isterseniz [enlighter lang=”html”]height=””[/enlighter] parametresinin çift tırnakları arasına piksel cinsinden resmin boyunu veya [enlighter lang=”html”]width=””[/enlighter] parametresini kullanarak yine aynı şekilde resmin enini belirtebilirsiniz.
<p>Örneğimizde resmin 48 piksel eni ve boyu var ayrıca [enlighter lang=”html”]alt=””[/enlighter] parametresiyle resmin neyi içerdiğiyle ilgili bir açıklama da ekledik.
<p><b>HTML Resim Ekleme Örneği:</b><br />
[enlighter lang=”html”]<br />
<img decoding="async" src="http://ozgurceyaz.com/wp-content/themes/ozgurceyaz/assets/img/ozgurceyaz.png" alt="Özgürce Yaz" height="48" width="48"><br />
[/enlighter]
<h3>HTML’de Liste Oluşturma</h3>
<p>Liste oluşturmak için en başta listenin dış elementini [enlighter lang=”html”]
<ul></ul>
<p>[/enlighter] etiketiyle oluşturmalıyız. Ardından bu etiketin içerisine [enlighter lang=”html”]
<li></li>
<p>[/enlighter] etiketiyle dilediğimiz kadar liste elemanı ekleyebiliriz.
<p><b>HTML Liste Örneği:</b><br />
[enlighter lang=”html”]
<ul>
<li>Kahve</li>
<li>Limonata</li>
<li>Su</li>
</ul>
<p>[/enlighter]
<h2>Basit Örnek HTML Sayfa</h2>
<p>En basit haliyle mobil uyumlu bir HTML sayfasının yapısını görebilmeniz için <a href="https://www.ozgurceyaz.com/wp-content/uploads/2017/01/Ornek-HTML-Sayfa/index.html" target="_blank">mobil uyumlu basit bir HTML sayfa</a> oluşturdum.
<p><b>Mobil Uyumlu HTML Sayfa Örneği:</b><br />
[enlighter lang=”html”]<br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Sekme Başlığı
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et sodales diam. Proin vehicula dui sed urna ullamcorper pretium. Nulla facilisi. Sed a fringilla ex. Donec vel rutrum nisi. Phasellus at viverra diam, quis scelerisque purus. Sed lobortis eros sed leo sagittis, quis pellentesque dui cursus. Cras pharetra sapien orci, at fringilla dolor ultrices a.
Cras dignissim tempor neque, eu ullamcorper felis convallis ac. Maecenas nec ultricies felis, sit amet vulputate nibh. Aliquam urna diam, eleifend nec dictum non, vulputate in mi. Vestibulum vitae convallis tellus. Proin accumsan consequat orci vulputate hendrerit. Suspendisse sit amet ante ac nibh placerat faucibus ut a mauris.
Alt Başlık
Sed iaculis justo tortor, nec interdum odio cursus id. Suspendisse ex lacus, egestas et nisl congue, malesuada luctus nisl. Integer sed purus id nisi fermentum facilisis. Sed maximus dapibus magna, quis viverra lacus rutrum ut. Vivamus aliquam quam quis arcu interdum mollis.
Duis convallis tellus vel felis molestie, maximus commodo metus fermentum. Proin nec purus non ex elementum ultrices in ac libero. Nunc nisi velit, rhoncus eu vehicula vel, faucibus quis lacus.
