Html Nedir? Html Ne İşe Yarar? Html Giriş

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’e Giriş, Html’in Açılımı, Html Sayfası Nasıl Yapılır, Html Etiketleri Nedir, Meta Nedir 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 ondan başlayalım.

HTML NEDİR?

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.

Dikkat : 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 ile sayfamızın tasarımını yapıyoruz. Şu an konumuz Html ama sadece Html kullanılarak yazılan buton ile Css kullanarak yazılan buton arasındaki farka bakalım.

html-dersleri-html-nedir-1

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. Css’in ne olduğu ile ilgili bilgi almak isterseniz Css Dersleri 1 – Css Nedir? Ne İşe Yarar? yazımı okuyabilirsiniz. Html’e kaldığımız yerden devam edelim.

Html sayfalarının yapısı, en temelde şu şekildedir.

Burdaki etiketlerin ne işe yaradığından bahsedecek olursak;

<!DOCTYPE html> : Dökümanın türünü belirtir. Burda 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 etiketilerini 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.

<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 burdaki 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. h1 ve p etiketi tanımlamak istersek;

Bazı etiketlerin kapanış etiketi yoktur. Örneğin;

Bu tür içeriği olmayan Html etiketleri boş etiket olarak adlandırılır.

Dikkat : 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İ

Öznitelikler, Html etiketlerine ek bilgiler vermek için kullandığımız ifadelerdir. Örneğin bir a etiketi tanımlayalım.

Burda 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.

Dikkat : Öznitelikler nitelik : “değer” şeklinde yazılırlar ve her etiket için kullanılabilen öznitelikler farklılık gösterir.

Ö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></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 NASIL YAPILIR?

Evet 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.

► File -> New File kısmından yeni bir dosya oluşturuyoruz.

html-dersleri-html-nedir-2

► 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.

html-dersleri-html-nedir-3

► File -> Save kısmından dosyamızı kaydedelim.

html-dersleri-html-nedir-4

► Burda 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. 

html-dersleri-html-nedir-5

► Uzantısını .html yaptığımız için sayfadaki kodlarımız artık renklendirildi.

html-dersleri-html-nedir-6

► 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.

html-dersleri-html-nedir-7

Bir yazımızın daha sonuna geldik. Html Nedir? artık öğrendiğimize göre şimdi Html Etiketlerini öğrenmeye başlayabiliriz. 

Umarım sizin için faydalı bir yazı olmuştur.

Bu yazılar da ilginizi çekebilir.

BOOTSTRAP NEDİR? BOOTSTRAP NASIL KULLANILIR?

JQuery Dersleri 1 – JQuery Nedir ve Nasıl Kullanılır?

Yeni bir yazımda görüşmek üzere.

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +