Web sitesi nasıl yapılır diye merak edip sizde öğrenmeye karar verdiyseniz, ilk başlayacağınız yer Html olmalıdır. Bu yazımızda Html Nedir? Ne İşe Yarar? Html Giriş, Html Açılımı, Html Etiketleri (Tagları), Html Sayfası Oluşturma gibi konuların hepsinden bahsedeceğiz.
Diğer derslerde olduğu gibi yine en temelden başlayıp ileri seviyeye kadar öğreneceğiz. İlk olarak Html Nedir? ile başlayalım.
HTML NEDİR? NE İŞE YARAR?
Html, web sayfalarını yapmak için en temelde kullandığımız bir biçimlendirme dilidir. Html’in açılımı Hyper Text Markup Language‘dir.
Önemli HTML bir programlama dili değildir.
Web sitelerinde görmüş olduğunuz sayfalar aslında birer Html belgesidir. Sadece Html kodları kullanarak alışık olduğumuz gibi görselliği yüksek siteler yapamayız.
Çünkü Html ile sitenin temelini oluşturup daha sonra Css özelliklerini kullanarak sayfamızın tasarımını yapıyoruz. Şuan konumuz Html ama sadece Html kullanılarak yazılan buton ile Css özellikleri uygulanarak yazılan buton arasındaki farka bakalım.
Bu konuya değinmemin sebebi, Html derslerinde ilerledikçe neden yazdığımız kodlar alışık olduğumuz web sitelerine benzemiyor gibi aklınıza gelebilecek sorulara cevap vermek.
Html derslerini bitirdikten sonra Css Derslerine de bakmanızı tavsiye ederim. Tüm Css konuları için A’DAN Z’YE CSS DERSLERİ yazımı inceleyebilirsiniz.
Html’e kaldığımız yerden devam edelim.
HTML SAYFA YAPISI
Html sayfalarının yapısı, en temelde şu şekildedir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Html Dersleri</title> <style> /* css kodları */ </style> <script> /* javascript kodları */ </script> </head> <body> İÇERİK </body> </html> |
Buradaki etiketlerin ne işe yaradığından bahsedecek olursak;
<!DOCTYPE html> : Dökümanın türünü belirtir. Burada sayfanın bir Html5 dökümanı olduğunu belirtiyor. Sayfanın en üstünde yazılmalıdır. Tarayıcıların sayfayı doğru görüntülemesini sağlar.
<html> : Tüm Html etiketlerini kapsar. Yani diğer etiketler bunun içerisine yazılır.
<head> : Sayfa ile ilgili bazı bilgilerin ( meta bilgileri, sayfa başlığı vb.. ) tanımlandığı etikettir.
<meta> : Sayfa açıklaması, sitenin yazarı, kullanılan karakter seti vb.. gibi bilgilerin tanımlandığı etikettir. Meta etiketleri ile ilgili daha detaylı anlatım için Meta Etiketleri (Tagları) Nedir? Meta Etiketi Kullanımı yazımı okuyabilirsiniz.
<title> : Sayfa başlığının verildiği etikettir.
<style> : Css kodlarının yazıldığı etikettir.
<script> : Javascript kodlarının yazıldığı etikettir.
<body> : Sayfa içeriklerinin yazıldığı etikettir. Tarayıcılar sadece buradaki içeriği bize gösterirler.
HTML ETİKETLERİ (HTML TAGLARI)
Sayfa üzerindeki her öğeye etiket denir. Html etiketleri şu şekilde yazılır.
⇒ <etiket-adı> İçerik </etiket-adı>
Örneğin bir p etiketi tanımlamak istiyorsak önce açılış etiketi (<p>) yazılır, sonra içerik kısmı yazılır, en son ise kapanış etiketi (</p>) yazılır.
Örnek olması için h1 ve p etiketi yazalım.
|
1 2 3 4 |
<h1>Html Nedir?</h1> <p>Html, web sitelerini yapmak için en temelde kullandığımız bir dildir.</p> |
⇒ Bazı etiketlerin kapanış etiketi yoktur.
Örneğin br, img etiketleri gibi.
|
1 2 3 4 5 |
<br /> <img /> |
Bu tür içeriği olmayan Html etiketleri boş etiket olarak adlandırılır.
⇒ Html etiketleri büyük – küçük harfe duyarlı değildir. Yani <p></p> ile <P></P> aynıdır. Fakat her zaman etiketleri küçük harfler ile yazmanız önerilir.
HTML ÖZNİTELİKLERİ
Html etiketlerine ek bilgiler vermek için kullandığımız ifadelerdir.
Öznitelikler nitelik : “değer” şeklinde yazılırlar ve her etiket için kullanılabilen öznitelikler farklılık gösterir.
Örneğin bir a etiketi tanımlayalım.
|
1 2 3 |
<a href="https://www.google.com/">Google</a> |
Burada a etiketinin açılış etiketi içerisine yazmış olduğumuz href bir özniteliktir. Yani a etiketine bir ek bilgi vermiş olduk. (Bu linke tıklandığında gidilecek adres belirtildi.)
Bir Html sayfasının dilini belirtmek için, Html etiketinin lang özniteliğine değeri yazılır. Bunun belirtilmesi arama motorları için önemlidir.
|
1 2 3 |
<html lang="tr"></html> |
Örnek olması için sadece 2 tane öznitelikten bahsettim. Diğer tüm öznitelikleri ilerleyen derslerde öğreneceğiz.
HTML SÜRÜMLERİ
6 farklı Html sürümü var ve son olarak 2014 yılından bu yana Html5 kullanmaya başladık.
► HTML : 1991
► HTML 2.0 : 1995
► HTML 3.2 : 1997
► HTML 4.01 : 1999
► XHTML : 2000
► HTML5 : 2014
WEB TARAYICILARI
Web tarayıcılarının (Chrome, Edge, IE, Opera, Firefox, Safari) amacı, hazırlamış olduğumuz Html sayfalarını görüntülemektir. Tabi bize Html etiketlerini göstermezler.
Örneğin sayfamızda h1 etiketi varsa, bize bu içeriği daha koyu ve büyük olarak gösterir. Veya bir img etiketi varsa, bize etiketi değil içerisinde tanımladığımız resmi gösterir.
HTML SAYFASI OLUŞTURMA
Teorik bilgilerden sonra şimdi ilk Html sayfamızı oluşturup tarayıcıda görüntüleyelim.
Html kodlarımızı yazmak için birçok editör bulunuyor. Herhangi bir editör kullanmadan bilgisayarınızda bulunan Notepad ile de kodlarınızı yazıp düzenleyebilirsiniz. Hatta ilk defa Html kodları yazıyorsanız daha iyi öğrenmeniz için Notepad kullanabilirsiniz.
Ben Visual Studio Code kullanıyorum. En başta biraz karmaşık gelebilir ama kesinlikle tavsiye ediyorum. Alıştıktan sonra işinizi kolaylaştıran birçok özelliği bulunuyor.
Şimdi ilk Html sayfamızı oluşturmaya başlayalım.
► Visual Studio Code’u açtıktan sonra File -> New File kısmından yeni bir dosya oluşturuyoruz.
► Gördüğünüz gibi dosyanın adı Untitled-1 olarak oluştu. İçerisine temel Html etiketlerini, daha sonra title etiketi içerisine sayfamızın başlığını ve body etiketi içerisine sayfamızın içeriğini yazalım.
► File -> Save kısmından dosyamızı kaydedelim.
► Burada dosyanın adını istediğiniz gibi verebilirsiniz. Ben index olarak verdim. Uzantısını .html olarak yazıyoruz. Kaynak türünüde HTML olarak seçiyoruz.
► Uzantısını .html yaptığımız için sayfadaki kodlarımız artık renklendirildi.
► Sayfamızı nereye kaydettiysek ordan oluşturduğumuz sayfaya tıklayarak açabiliriz. Ben masaüstüne index.html olarak oluşturduğum için masaüstündeki sayfama tıklıyorum.
Artık sayfamız tarayıcıda görüntülendi. Dikkat ederseniz title etiketi ile verdiğimiz başlık değeri tarayıcıda sol üstte görünüyor. Body içerisinde tanımladığımız içerik de tarayıcıda görüntülendi.
Bir yazımızın daha sonuna geldik. Html nedir? Ne işe yarar? Html sayfası oluşturma gibi konuları artık öğrendiğimize göre diğer tüm Html Etiketlerini konu konu öğrenmeye başlayabiliriz.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
BOOTSTRAP NEDİR? BOOTSTRAP NASIL KULLANILIR?
Jquery Nedir? Ne İşe Yarar? Jquery Kullanımı
Yeni bir yazımda görüşmek üzere.
