Front-End Developer Temel Kavramlar
Yazılım, ilk başladığınızda içinde kaybolduğunuz karmaşık bir labirente benzer. Önemli olan ise bazı süreç ve aşamalardan geçerek kendinizi hangi alana ait olduğunu bulabilmektir.
HTML5 Nedir? Nasıl Kullanılır?
HTML5 Nedir? Tanımını vermeden önce HTML’in ne demek olduğunu öğrenelim: HTML, Hiper Metin İşaretleme Dili (Hypertext Markup Language) web sayfalarını oluşturmak için kullanılan metin işleme dilidir.
HTML5 Nedir? Tanımını vermeden önce HTML’in ne demek olduğunu öğrenelim: HTML, Hiper Metin İşaretleme Dili (Hypertext Markup Language) web sayfalarını oluşturmak için kullanılan metin işleme dilidir. HTML5 bu dilin son sürümünün adıdır. HTML, bir programlama dili değildir. Temel olarak yazı, görüntü, ses dosyaları vs gibi verileri ve bunları içeren sayfaları birbirine bağlamak, bu sayfaları web tarayıcılarında görüntülemek için kurallar içeren bir bütündür. HTML ile CSS ve JS dosyaları kullanılarak görsel ve dinamik web siteleri oluşturulabilir.
Nasıl Kullanılır?
HTML kodlarını Notepad++ , Dreamweaver vb. gibi programlar ile geliştirebilir, düzenleyebilirsiniz. Notepad, hem ücretesiz hemde kullanışlı olduğundan tercih sebebi. Genel olarak bir HTML kod blogu aşağıdaki gibidir:
<html>
<head>
<title>Site Başlığı</title>
</head>
<body>
<p>Sitenin İçerik Kısımı</p>
</body>
</html>
HTML kodları html etiketi ile başlar html etiketi ile sonlanır. Head etiketleri arasında sitenin temel özelliklerinin bulunduğu kısımdır. Bu kısımda sayfa başlığı, css ve js gibi dosyaların linkleri yazılır. Body etiketi, web sayfasına ait içeriğin geleceği kısımı belirtir. Sayfada görünmesi istenilen tüm içerik body etiketleri içinde olmalıdır. Şimdi HTML sayfalarında kullanılan diğer etiketleri inceleyelim:
Başlıklar — Paragraflar -Bağlantılar — Görseller
Başlık(Heading) etiketleri: <h1>, <h2>, <h3>, <h4>, <h5> ve <h6>’dır. <h1> en büyük başlığı, <h6> ise en küçük başlığı temsil eder.
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>
Paragraf Etiketleri: Paragraf oluşturmak için <p>, </p>etiketi kullanılır. Bir etiketi kapatmak için / karakteri kullanılır. Örnek metin için kullanılan lipsum sitesini ziyaret edebilirsiniz.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis semper est et ligula tincidunt, eget pellentesque justo dapibus. Quisque convallis gravida commodo.
In hac habitasse platea dictumst.
Cras tincidunt urna eu pretium sollicitudin. Praesent ac urna pulvinar, viverra massa lacinia, dapibus metus.
Nulla vel porttitor neque. Sed vel interdum tellus, placerat consequat justo.
Etiam lacinia sem quam, id auctor leo rhoncus vitae. Nam at est sapien.</p>
Bağlantı Etiketleri: HTML’ de linkler <a></a> etiketleri içinde yazılır. Buradaki a harfi İngilizce’deki attribute kelimesinin kısaltmasıdır.
<a href="http://www.gokhanyavas.com/">Web sitesine git.</a>
Görsel Etiketleri: Web sayfalarına görsel eklemek için <img> etiketini kullanırız. img, image kelimesinin kısaltmasıdır.
<img src="gülücük.gif" alt="gülücük" height="40" width="40" />
Burada, alt ifadesi resim yüklenmediğinde belirecek ifadedir. height ve width resimin boyutlarını ifade eder.
İçerik Biçimlendirme
Bu kısımda bir içeriğin nasıl biçimlendirileceğini göreceğiz.
strong: Bu etiket yazdığımız yazıları kalınlaştırmak için kullanılır. Alternatifi bold etikedir.
<p>Bu metin normal yazıldı.</p>
<p><strong>Bu metin strong etiketi ile kalın yazıldı.</strong></p>
<b>Bu metin b etiketi kullanılarak yazıldı.</b>
em ve i etiketleri: Yazıları yatık yazmak için kullanılır.
<p>Bu metin normal yazıldı.</p>
<p><em>Bu metin yatık yazıldı.</em></p>
<p><i>Bu metin'de yatık yazıldı.</i></p>
sub ve sup etiketleri: İngilizce subscript ve superscript kelimelerinin kısatlmaları olan sub ve sup dilimizde altyazı ve üstyazı gibi bir anlama gelmektedir.
<p>Bu metin normal yazıldı</p>
<p>Bu metnin <sub>bu kısmı</sub> altta yazıldı</p>
<p>Bu metnin <sup>bu kısmı</sup> üstte yazıldı</p>
s ve u etiketleri: s etiketi İngilizce’de strike kelimesinin kısaltmasıdır. Yazıların üzerini çizmeye yarar. <strike> şeklinde de yazılır; fakat HTML5 bu yazım formatını desteklemez. Bunun yerine <del> etiketini kullanmalısınız. u etiketi İngilizce’de underline kelimesinin kısaltmasıdır. Yazıların altını çizmeye yarar.
<p><s>Bu metin üzeri çizili yazıldı.</s></p>
<p><del>Bu metin de üzeri çizili yazıldı.</del></p>
<p><strike>Bu metin de üzeri çizili yazıldı. Fakat kodu yanlış.</strike></p>
<p><u>Bu metin altı çizili yazıldı.</u></p>
small ve big etiketleri: Small: küçük, Big: büyük anlamındadır. Yazıları büyük ve küçük yazmaya yarar.
<p>normal metin</p>
<p><small>küçük metin</small></p>
<p><big>büyük metin</big></p>
center etiketi: Center bir ifadeyi ortalamak için kullanılır.
<p>Selam</p>
<p><center>naber?</center></p>
tt etiketi: İngilizcesi teletype kelimesinin kısaltması olan tt etiketi daktilo tipinde yazmayı sağlar.
<p>Normal yazıldı.</p>
<p><tt>Daktilo tipinde yazıldı.</tt></p>
cite ve abbr etiketleri: Cite alıntı anlamına gelir. abbr ise kısaltmalar için kullanılır.
<p><cite>"Alıntı yapıldı."</cite></p>
<p><abbr title="Türkiye Cumhuriyeti">T.C</abbr> gelişen bir devlettir.</p>
br ve hr etiketleri: br satır atlamak için kullanılır. hr etiketiketi yatay çizgi oluşturmak için kullanılır.
<p>Gökhan<br />Yavaş</p>
<hr>
<p>Gökhan Yavaş</p>
liste etiketleri: <ol> sıralı liste oluşturmak için <ul> ise sırasız liste oluşturmak için kullanılır.
<ul>
<li>HTML</li>
<li>SQL</li>
</ul>
<ol>
<li>JS</li>
<li>CSS</li>
</ol>
tanımlama listeleri oluşturma: <dl>,<dt>,<dd> etiketleri kullanılır. Örnek kullanımı aşağıdaki gibidir:
<dl>
<dt>Yazılım Dilleri</dt>
<dd>Python</dd>
<dd>JAVA</dd>
<dd>Go</dd>
<br />
<dt>Veritabanı Dilleri</dt>
<dd>SQL</dd>
<dd>T-SQL</dd>
<dd>PLSQL</dd>
</dl>
Blog
Son Blog Yazılarımız
WordPress ile Site Yapma Araçları
WEB Sitesi yapmak istiyorsanız ve yazılım ile ilgili bir şey bilmiyorsanız endişelenmenize gerek yok. Kod yazmayı bilmeden bir web sitesi sayfalarını web site oluşturucu (WEB Site builder) araçları ile kolay bir şekilde yapabilirsiniz.
Site Yapma Araçları
Web sitesi yapma araçları, bireyler ve küçük işletmeler için bir geliştirici (yazılımcı) tutmadan web sitesi yapmak için mükemmel bir çözümdür. Ancak, yeni başlayanlar için en iyi web sitesi oluşturucuyu bulmak biraz zor olabilir.