Vasily Zaitsev
Onaylı Üye
Selamlar
Öncelikle bu konuyu hazırlamam yaklaşık 1 saatimi alacak. Umarım bu uğraşlarım boşa çıkmaz ve gerçekten Website yazılımlarına meraklı arkadaşlar için iyi bir başlangıç olur.
Bu anlatacaklarım oluşturacağınız sitenin temellerini oluşturur, ki HTML benim tabirim ile bir binanın iskeletini oluşturur. Şuanda yapacağımız şeyler binanın temeli ve iskeletini oluşturmak. İç ve dış dizaynını CSS, elektrik, su ve bilimum bir binayı bina yapacak parçaları da PHP ile tamamlayacağız. Binamızın bazı aksamlarını teknolojik hale getirmek için ise JavaScripti kullanacağız.
JavaScripti çok kullanır mıyız ? diye sorarsanız ben size hayır cevabını veririm. Çünkü kafa yorar ve bu yüzden asıl projenizin dışına çok çıkarsınız. Profesyonel arkadaşlar ne demek istediğimi anlayacaktır.
CSS'i çok kullanır mıyız ? diye soracak olursanız ben size "bu dili öğrenmeye bile kalkmayın." cevabını veririm. Çünkü bir yazacağınız kod bir diğer platformda hata verir, verecektir. Dengesiz ve aşırı uğraştıran bir dil. Bunun yerine hazır kullanın.
Gelelim HTML'a bir çok kişi buna dil bile demiyor. çünkü toplasan 90 satırlık bir dil. Ancak o 90 satır ile bir websitenin ne denli değişebileceğini bilmiyorlar.
Adım 1: Yorum Satırı
Öncelikle yazacağınız koda bir yorum eklemelisiniz. Bu nasıl yapılır ?
Öncelikle bu konuyu hazırlamam yaklaşık 1 saatimi alacak. Umarım bu uğraşlarım boşa çıkmaz ve gerçekten Website yazılımlarına meraklı arkadaşlar için iyi bir başlangıç olur.
Bu anlatacaklarım oluşturacağınız sitenin temellerini oluşturur, ki HTML benim tabirim ile bir binanın iskeletini oluşturur. Şuanda yapacağımız şeyler binanın temeli ve iskeletini oluşturmak. İç ve dış dizaynını CSS, elektrik, su ve bilimum bir binayı bina yapacak parçaları da PHP ile tamamlayacağız. Binamızın bazı aksamlarını teknolojik hale getirmek için ise JavaScripti kullanacağız.
JavaScripti çok kullanır mıyız ? diye sorarsanız ben size hayır cevabını veririm. Çünkü kafa yorar ve bu yüzden asıl projenizin dışına çok çıkarsınız. Profesyonel arkadaşlar ne demek istediğimi anlayacaktır.
CSS'i çok kullanır mıyız ? diye soracak olursanız ben size "bu dili öğrenmeye bile kalkmayın." cevabını veririm. Çünkü bir yazacağınız kod bir diğer platformda hata verir, verecektir. Dengesiz ve aşırı uğraştıran bir dil. Bunun yerine hazır kullanın.
Gelelim HTML'a bir çok kişi buna dil bile demiyor. çünkü toplasan 90 satırlık bir dil. Ancak o 90 satır ile bir websitenin ne denli değişebileceğini bilmiyorlar.
Adım 1: Yorum Satırı
Öncelikle yazacağınız koda bir yorum eklemelisiniz. Bu nasıl yapılır ?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Başlangıç</title>
<meta charset="UTF-8">
</head>
<body>
<!-- Bu yorum satırıdır. İçerisine yazacağınız kodlar işlevini yitirir. -->
<!--
Bu yorum satırıdır. İçerisine yazacağınız kodlar işlevini yitirir.
-->
</head>
</html>Adım 2: Meta Tagları
Meta tagları olmazsa olmazımızdır.
Meta tagları olmazsa olmazımızdır.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Başlangıç</title>
<meta charset="UTF-8"> <!-- burada türkçe karakterlere izin veriyoruz. ğ ş ç ş gibi-->
<meta name="description" content="Açıklama"> <!-- Açıklama satırıdır. Genellikle kullanılmaz. -->
<meta name="keywords" content="html, yazılım, öğren"> <!-- Daha çok SEO'cuları ilgilendiren bölüm. Google keywords havuzuna düşecek kelimeleri yazıyoruz. googlea bu kelimeleri yazarsak sıralamamıza göre aramalarda çıkacağız. -->
<meta name="author" content="Vasily Zaitsev"> <!-- Yazar bölümümüz. Genellikle kullanılmaz. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- bende bilmiyorum. genellikle kullanılmaz. -->
</head>
<body>
</body>
</html>Adım 3: HTML'e Giriş
Yukarıda ki verileri tamamen anladığınızda artık yavaş yavaş HTML etiketlerini öğrenmeye başlayabiliriz.
Yukarıda ki verileri tamamen anladığınızda artık yavaş yavaş HTML etiketlerini öğrenmeye başlayabiliriz.
- Başlık Etiketleri
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Başlangıç</title>
<meta charset="UTF-8">
</head>
<body>
<!-- Başlık Etiketleri -->
<h1>Başlık Etiketleri</h1>
<h2>Başlık Etiketleri</h2>
<h3>Başlık Etiketleri</h3>
<h4>Başlık Etiketleri</h4>
<h5>Başlık Etiketleri</h5>
<h6>Başlık Etiketleri</h6>
<!-- 6 adet başlık etiketlerimiz bulunmaktadır. Küçükten büyüğe doğru büyümektedir.
Duruma göre kullanılır.-->
</body>
</html>- br Etiketi
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Başlangıç</title>
<meta charset="UTF-8">
</head>
<body>
<!-- br Etiketi -->
Vasily <br>
Zaitsev <br><br><br><br><br><br><br><br><br><br>
Vasily "f.ckin" Zaitsev <br>
<!-- Hayat kurtaracak olan hemen hemen en önemli etiketlerden birisidir. Bir satır aşağı atlamanızı sağlar.-->
</body>
</html>- Paragraf Etiketi
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Başlangıç</title>
<meta charset="UTF-8">
</head>
<body>
<!-- Paragraf Etiketi -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- İsminde belirttiği gibi paragraf oluşturur.-->
</body>
</html>- hr Etiketi
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Başlangıç</title>
<meta charset="UTF-8">
</head>
<body>
<!-- hr Etiketi -->
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<!-- Düz bir çizgi oluşturur. Paragrafları ayırmak için kullanabilirsiniz.
Ekrana boydan boya düz ve ince bir çizgi çeker. -->
</body>
</html>- b Kalınlaştırma Etiketi
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Başlangıç</title>
<meta charset="UTF-8">
</head>
<body>
<!-- b kalınlaştırma etiketi -->
<p><b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</b></p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut <b>labore</b> et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in <b>reprehenderit</b> in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia <b>deserunt</b> mollit anim id est laborum.</p>
<h1><b>Vasily Zaitsev'in Önemli Hayatı</b></h1>
<!-- Forumda da çokça kullanmış olduğunuz "Kalınlaştırma" işlemi bu etiketten gelmektedir. Yazınızı kalın yapar..-->
</body>
</html>- Big, Small ve Eğik Yazı (İtalik) Yazı Etiketleri
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Başlangıç</title>
<meta charset="UTF-8">
</head>
<body>
<!-- big büyük yazı etiketi -->
<p>Udemy Eğitimi</p>
<big>Udemy Eğitimi</big>
<!-- b etiketinden farkı HTML5 desteklememesidir. b etiketi HTML5 desteklemektedir. -->
<!-- small büyük yazı etiketi -->
<p>Konu: Vasily Zaitsev</p>
<small>Васи́лий Григо́рьевич За́йцев (Rusça İsmi)</small>
<hr>
<h1>II. Dünya Savaşı'nın en tanınmış <small>Sovyet keskin nişancılarından</small> biridir.</h1>
<!-- İsminden anlayacağınız üzere yazılarınızı küçültür. -->
<!-- i eğitik yazı, italik yazı etiketi -->
<p><i>Vasily Zaitsev Kimdir ?</i></p>
<p><i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</i></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut <i>enim</i> ad minim veniam,
quis nostrud exercitation <i>ullamco</i> laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt <i>mollit</i> anim id est laborum.</p>
<!-- Bu etiketimizde forumlarda çokça kullanılan eğik yazı etiketidir. -->
</body>
</html>Bilerek kısa tutuyorum bu konuyu. Çoğu insan okumadan geçiyor. Duruma ve isteğe göre diğer etiketleri de anlatabilirim. Okuduğunuz için teşekkürler.
keşke bize de dediğin gibi işler gelse. unutma dünya da 1 tane yazılımcı yok. bir sürü var.