1~

Minter Coder's Blog

1-Html5 Kurulumlar ve Ilk Program

2020-07-01

Arkadaşlar merhabalar bu dersimizi çok kısa geçmek istiyorum burada çok fazla kod yazmayacağım.Ben xampp ' ı kurdum ve sizler de web alanında belki gelişim göstermek istersiniz diye video da yükledim.Sizin videoyu izlemenizi şiddetle tavsiye ediyorum.

Dostlar ben ortam olarak visual studio code ' yi kullanıyorum.Sizlere de öneririm. Buraya Tıkla ya basarak visual studio code'yi kendi işletim sisteminize uygun olarak indirebilirsiniz

Html ile ilgili dosyamızın içeriğinde bulunan taglarını göstereceğim sizlere , kısaca.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Başlık</title>
</head>
<body>
    Kerem
</body>
</html>

Visual studio kullanan arkadaşlar için kısa yol söylemek istiyorum. html dosyanızı oluşturduktan sonra shift+1 yapıp ünlem işareti bıraktıktan sonra tek ünlem önünüze çıkacak ve burada enter yaparsanız üstte yazdığım kodlar hazır olarak önünüze gelecektir.

<DOCTYPE html> : Bunun anlamı dökümanımızın yani sayfamızın türünün html olacağını üstte bildiriyoruz.

<html> : Html kodları yazılırken dökümanımızı bildirdikten sonra her zaman bu tag açılıp yazılmaya kodlar başlanır.

<head> : Baş,kafa anlamına geliyor . HTML ' i gövde ve kafa , bir insan vücudu olarak düşünün.Burada css dosyalarınızı sitenizle ilgili açıklamaları ekleyebilirsiniz.Html kodlarınız = head (baş) + body (gövde)

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle>

Şu üç kısma kısaca değiniyorum metacharset bizim sayfamızdaki kodları utf-8 ' e göre okumasıdır. Yani türkçe karakterleri de yazınca ekranda farklı yazı türleri çıkmadan direk türkçe karakterleri göstermesidir.Alttaki kısımda görünümport isimli metamızın contenti (içeriği)nde yazan kodlar bizim yaptığımız sitenin kendi genişliğini aygıt genişliğine göre ayarlamasıdır yani telefonda da görüntülenebilsin, masaüstü bilgisayarın genişliğinde de kendisini ayarlayıp gösterebilsin.Title adından da anlaşılacağı gibi başlık demek yani sitemizin üst kısmındaki başlığıdır ve ben adını kalıcı olarak anlaşılabilsin diye Başlık yaptım :)
<body> : ŞGövde demektir.Buraya artık detaylara inerek içeriğini doldurursunuz sitenizin , örneğin tablo yapıp içini doldurmak istersiniz , yada yazdığınız yazıların renklerini , arka plan renklerini değiştirebilirsiniz.Örneğin ben içine Kerem yazdım . Siz eğer bu html sayfasını ekranda gösterirseniz Ve bunun gibi binlercesi...
 
Alttaki diğer etiket kısımları da açtığımız etiketleri kapatmamızı sağlar.
<body> : Açtığımız body etiketini kapatmamızı sağlar.
<head> : Açtığımız head etiketini kapatmamızı sağlar.
<html> : Açtığımız html etiketini kapatmamızı sağlar.
 
Eğer siz yukarıda ki html kodlarını kendi html dosyanıza bırakıp sayfada gösterirseniz eğer şöyle bir sayfayla karşılaşırsınız.

Ders bitti.Umarım anlatabilmişimdir , herhangi bir sorunuz varsa bana sitede aşağıda yada youtube dersin altında yorumlarda sorabilirsiniz elimden geldiğince yardımcı olmaya çalışırım.Bir sonraki html5 dersimizde görüşmek üzere...

Dersin Videosu