İlk HTML Projemizi Oluşturma

  • M. Kasım Sular
  • September 29, 2020
  • 1996 Görüntülenme
  • 0 Yorum
İlk HTML Projemizi Oluşturma

HTML Nedir?

Html (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir
dildir. 

HTML Etiket (Tag) Kavramı

Html komutları etiketlerden (tag) oluşur. Html komutları yazılırken aşağıdaki
kurallara dikkat edilmesi gerekir;

Html komutları “<” ve “>” işaretleri arasına yazılır. Burada yer alan“< >”
etiketleme yapmak için kullanılan işarettir. <etiketadi>……</etiketadi>,
<tag>…..</tag>

Html etiketleri yazılırken Türkçe karakterler kullanılmamalıdır.(ş, ç, ö, ü, ı, ğ)

Html komutları büyük küçük harf duyarlı değildir. Başka bir deyişle tümü
büyük harflerle açılmış olan bir etiket tümü küçük harflerle yazılan aynı etiket
ile kapatılabilir.<body>….</BODY> veya <Html>….</html>

Açılan bir etiket kapatılmalıdır. İlk açılan etiket en son kapatılır ve etiketi
kapatma sırasında “/” işareti unutulmamalıdır.
 

Temel Html Etiketleri

<html> html kodlarının yazımına başladığımızı gösteren ana etikettir.

<head> title, link ve meta etiketlerinin yer aldığı başlık etiketidir.

<title> Sayfa başlığnı yazdığımız bölüm

<meta> Web tarayıcı ve arama motorlarıyla sayfa ile ilgili bilgi paylaştığımız  bölüm

<link> Genellikle harici CSS tanımladığımız etiket

<body> Html belgesinin tüm içeriğinin yer aldığı içerik bölümüdür.

IDE’miz hazır, Extensionslar (Eklentiler) yüklendi. Haydi ilk HTML projemizi oluşturalım.

1. Adım

File / Open Folder ile HelloHtml adında bir klasör oluşturup bu klasör içinde çalışmaya başlayalım.

 

2. Adım

New File butonuna tıklayarak index.html adında ilk html dosyamızı oluşturalım.

 

3. Adım

index.html dosyamızda html yazalım ve ekrana gelen kod tamamlama penceresinden html:5 seçeneğini onaylayalım. Tüm eğitim süresince kullanacağımız bu Kod Tamamlama (IntelliSense) penceresi (Emmet eski adıyla Zen Coding)  CTRL + Boşluk tuş grubuyla da açılmaktadır.

 

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Hello Html</title>
</head>
<body>
   Hello Html
</body>
</html>

4. Adım

Projemizi yayınlamak için VS Code durum çubuğunda yer alan Go Live düğmesini tıklayabilir ve Live Server eklentisini çalıştırabiliriz ya da CTRL + SHIFT + V kısayol tuşu ile hemen yan sekmede HTML Preview eklentisini kullanarak görüntüleyebiliriz.

Seçim size kalmış her 2 yöntemi de kullanabilirsiniz görüntüleme için. Live Server çalışmayı http://localhost:500 portunu kullanarak sunucu üzerinden çalıştırmakta iken HTML Preview görüntüleme işlemini tarayıcı bazlı çalıştırmaktadır. Ben Live Server kullanmayı tercih ediyorum.