Merhaba TürkHackTeam ailesi
Bugün sizlerle birlikte web geliştirme üzerine sıfırdan ileriye doğru bir seri başlatacağız. Önceden bilmemiz gerekenler hakkında bilgi vererek başlayalım.
Bugün sizlerle birlikte web geliştirme üzerine sıfırdan ileriye doğru bir seri başlatacağız. Önceden bilmemiz gerekenler hakkında bilgi vererek başlayalım.
Web geliştirme nedir?
Web geliştirme alanı temel olarak ikiye ayrılır.
1-Frontend(web tasarım)
2-Backend(Web programlama)
Frontend kısmında html,css,js bilmek yeterli olur, bunlarla gayet güzel çalışmalar çıkabilir.
Backend kısmında ise asp.net,php vb web programlama dillerine ihtiyaç duyulur. Bu dillerle beraber frontend kısmında tasarladığımız sitelere yönetim panelleri ekleyebiliriz.
Web geliştirici kimdir?
Her türlü amaca uygun, hem tasarımı hem de yazılımıyla ilgilenen kişilere denir.
Eğer bir web geliştirici hem frontend hem de backend bilmesi gerekenleri biliyorsa full-stack web geliştirici olarak adlandırılır.
Bir web geliştirici neler öğrenmelidir?
Frontend tarafında html,css ve javascript bilmemiz yeterlidir. Başlarda sadece html ve css bilerek bir firmanın tanıtım sayfasını yapabiliriz.İşlerimizi daha kolay hale getirmek için hazır css kütüphaneleri bulunmaktadır. Bunların en popülerleri ise Bootstrap, Material kütüphaneleridir. Backend kısmına baktığımız zamanda karşımıza bir çok alternatifler bulunmaktadır. Bunlarında en popülerleri ise asp.net, php, Java, python, node.js dilleridir. Bunları kullanmak için bazı kriterler mevcuttur tabi bunlar beklentilere göre değişmektedir.
Evet arkadaşlar teorik bilgileri aktardıktan sonra en temel konumuz olan html ile başlayalım. Bu konumda sizlere elimden geldiğince html etiketlerini(tag) anlatmaya çalışacağım.
Html sayfası nedir?
Tarayıcının anlayacağı bazı söz dizimleri vardır. Bu yazdıklarımızı tarayacılar üzerinde görüntülenir.
Bir html sayfası oluşturmadan önce mutlaka html 5 standartlarına uygun olması gerekmektedir. Html 5 standartına uygun olması web siştemizi arama motorlarında daha görünür hale getirmektedir.
Html Etiketleri nedir?
Sayfa üzerinde kullanılan her öğeye html etiketi denir.
Etiketlerin kullanımı ise şu şekildedir.
<etiket>...</etiket>: açılış ve kapanış etiketleri arasına içerikler yazılır ve etiket görevlerini uygular.
Web geliştirme alanı temel olarak ikiye ayrılır.
1-Frontend(web tasarım)
2-Backend(Web programlama)
Frontend kısmında html,css,js bilmek yeterli olur, bunlarla gayet güzel çalışmalar çıkabilir.
Backend kısmında ise asp.net,php vb web programlama dillerine ihtiyaç duyulur. Bu dillerle beraber frontend kısmında tasarladığımız sitelere yönetim panelleri ekleyebiliriz.
Web geliştirici kimdir?
Her türlü amaca uygun, hem tasarımı hem de yazılımıyla ilgilenen kişilere denir.
Eğer bir web geliştirici hem frontend hem de backend bilmesi gerekenleri biliyorsa full-stack web geliştirici olarak adlandırılır.
Bir web geliştirici neler öğrenmelidir?
Frontend tarafında html,css ve javascript bilmemiz yeterlidir. Başlarda sadece html ve css bilerek bir firmanın tanıtım sayfasını yapabiliriz.İşlerimizi daha kolay hale getirmek için hazır css kütüphaneleri bulunmaktadır. Bunların en popülerleri ise Bootstrap, Material kütüphaneleridir. Backend kısmına baktığımız zamanda karşımıza bir çok alternatifler bulunmaktadır. Bunlarında en popülerleri ise asp.net, php, Java, python, node.js dilleridir. Bunları kullanmak için bazı kriterler mevcuttur tabi bunlar beklentilere göre değişmektedir.
Evet arkadaşlar teorik bilgileri aktardıktan sonra en temel konumuz olan html ile başlayalım. Bu konumda sizlere elimden geldiğince html etiketlerini(tag) anlatmaya çalışacağım.
Html sayfası nedir?
Tarayıcının anlayacağı bazı söz dizimleri vardır. Bu yazdıklarımızı tarayacılar üzerinde görüntülenir.
Bir html sayfası oluşturmadan önce mutlaka html 5 standartlarına uygun olması gerekmektedir. Html 5 standartına uygun olması web siştemizi arama motorlarında daha görünür hale getirmektedir.
Html Etiketleri nedir?
Sayfa üzerinde kullanılan her öğeye html etiketi denir.
Etiketlerin kullanımı ise şu şekildedir.
<etiket>...</etiket>: açılış ve kapanış etiketleri arasına içerikler yazılır ve etiket görevlerini uygular.
Etiketlere başlayalım.
Doctype: html sayfasının html5 standartlarına uygun olduğunu belirtir.
Kullanım şekli:
Kod:
<!Doctype html><html>: sayfanın içeriklerinin tamamı <html>...</html> etiketleri arasına gelmelidir. Bu etiketin 2 ana etiketi bulunmaktadır. Head ve body etiketleridir.
Kullanım şekli:
Kod:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html><head>: sayfa tanıtıldığı ayrıca kullanılan harici kaynakları (css ve javascript) kısımdır. Sayfanın arama motorlarında bulunabilirliği arttırmak amaçıyla özet bilgilerin verildiği kısımdır. Head etiketinin alt ögeleri title ve m e t a etiketleridir.
Kullanım şekli:
Kod:
<head></head><title>: sayfa başlığını temsil eder.
Kullanım şekli:
Kod:
<title>Sayfa başlığı</title><m e t a> : sayfanın arama motorlarına tanıtmak ve bulunabilirliğini artırmak için kullanıdığımız etikettir.
Title : sayfa başlığı
Description : sayfa açıklaması
Keywords : Anahtar kelimeler
viewport: Responsive tasarım için gerekli
r e f r e s h: Sayfa yenileme süresi (saniye)
Kullanım şekli:
Kod:
<m e t a name=title content=Html>
<m e t a name=description content=Turkhackteam>
<m e t a name=keywords content=asp.net,html,css>
<m e t a name="author" content="Kelhack">
<m e t a name="viewport" content="width=device-width, initialscale=1.0">
<m e t a http-equiv="r e f r e s h" content="30"><h1>...<h6> : başlık etiketidir. Sayılar büyüdükçe başlığın boyutu küçülmektedir. H etiketine atanan büyüklük css kısmında değiştirebilir. <h1> etiketi bir html sayfasında bir tanesi olması gereklidir.
Kullanım şekli:
Kod:
<h1> h1 başlık etiketi </h1>
<h2> h2 başlık etiketi </h2>
<h3> h3 başlık etiketi </h3>
<h4> h4 başlık etiketi </h4>
<h5> h5 başlık etiketi </h5>
<h6> h6 başlık etiketi </h6><p> : paragraf oluşturma etiketidir. Içeriğinde yazı olması gerekmektedir. Block etikettir. Bir alt satıra geçmek için <br> etiketi kullanılır.
Kullanım şekli:
Kod:
<p> Sayfanın genel başlığı </p>
<h2>Alt başlık 1</h2>
<p> Alt başlık 1 ile alakalı bir paragraf. <br> Buradan itibaren alt satıra geçer.</p>
<h2>Alt başlık 2</h2>
<p>Alt başlık 2 ile alakalı bir paragraf.</p><b> ve <strong> : kalın yazı yazmak için kullanılır, <strong> içine aldığımız bilginin öneminin belirtmiş oluruz.
Kullanım şekli:
Kod:
<b>Kelhack</b>
<strong>Türk Hack Team</strong><i> ve <em> : italic yazı yazar, em etiketi ile bir yazıyı vurgulamış oluyoruz.
Kod:
<i>italic yazı</i>
<em>vurgulanmış içerik</em><u>,<ins>,<del> : <u> ve <ins> alt çizgili yazar. <del> etiketi ise üstü çizgili yazar.
Kullanım şekli:
Kod:
<span> indirimde
<del> 125 TL <del>
<ins> 75 TL <ins>
</span><ul>,<ol>,<li> : bu etiketle liste oluşturmak için kullanılır. Sıralı listelerde işaretler çok önemli değildir css ile değiştirilebilir. Genelde menü oluşturmak için kullanılır.
<ul> etiketi ile sırasız liste oluşturulur.
<ol> etiketi ile sıralı liste oluşturulur.
<li> her bir liste elemanını temsil eder.
Kullanım şekli:
Kod:
<ul>
<li> liste elemanı 1 </li>
<li> liste elemanı 2 </li>
<li> liste elemanı 3 </li>
</ul>
<ol>
<li> liste elemanı 1 </li>
<li> liste elemanı 2 </li>
<li> liste elemanı 3 </li>
</ol><img> : resim eklemek için kullanılır. Src: resmin yolunu belirtir. Alt: resim belirtilen yolda bulunamazsa gösterilecek yazıdır,arama motorlarında gösterimi için gereken yazıdır.
Kullanım şekli:
Kod:
<img src="resim.png" alt="resme alternatif yazı">
<img src="resim.jpg " alt="resme alternatif yazı"><form> : görevi form etiketleri arasına html kontrolleri ile kullanıcıdan bilgiler toplanarak servera göndermektedir. Henüz backend kısmına geçmediğimizden dolayı verilerin nasıl taşındığına bilmiyoruz şuan sadece tasarım kısmı ile ilgileniyoruz.
Form Kontrol Türleri ;
<input type="text"> : Alınacak olan bilgi sözel bir ifade ise kullanılır.
Örneğin ; Ad ,adres vb.
<input type="radio"> : Alınacak olan bilgi çoklu seçim içinden sadece birinin seçilmesi
istendiğinde kullanılır. Örneğin cinsiyet.
<input type="checkbox"> : Alınacak olan bilgi sunulan alternatifler içinden birden fazla
seçim istendiğinde kullanılır. Örneğin hobiler.
<select> : Seçenekler arasından sadece birinin seçilmesini istediğimiz zaman kullanılır.
Örneğin, şehir seçimi.
<input type="submit"> : Formu server'daki web programına gönderecek olan buton.
Kullanım şekli:
Kod:
<form>
Ad: <input type="text" name="firstname" value="Adınız"><br>
Cinsiyet : <br>
<input type="radio" name="gender" value="male" checked > Erkek<br>
<input type="radio" name="gender" value="female"> Kadın<br>
Şehir :<br>
<select name="city">
<option value="kocaeli">Kocaeli</option>
<option value="istanbul">İstanbul</option>
</select>
<br>
<input type="submit" value="Submit">
</form><table> : tabloları oluşturmak için kullanılır.
Her satır <tr> ile ifade edilir.
Satır içindeki her kolon <td> ile ifade edilir.
Başlık kolonu <th> ile ifade edilir.
Tablo genişliği style="width:100%" ile verilir.
Satır birleştirmek için rowspan kullanılır.
Sütun birleştirmek için colspan kullanılır.
Kullanım şekli:
Kod:
<table style="width:100%">
<tr>
<th>yaş</th>
<th>kilo</th>
<th>cinsiyet</th>
</tr>
<tr>
<td>35</td>
<td>75</td>
<td>erkek</td>
</tr>
</table><a> : link oluşturmak için kullanılır. Href yönlendirilecek kaynak yoludur. Target _blank özelliği sayfayı başka sekmede açılır.
Kullanım şekli:
Kod:
<a href="turkhackteam.org ">ziyaret et</a>
<a href="turkhackteam.org" target="_blank"> ziyaret et </a><div> : div bir bölme oluşturmak için kullanılır. Sistematik olarak gruplayabiliriz. Bu gruplama sayesinde her divin görüntü özelliklerini css ile biçimleyebiliriz. Div etiketi de p etiketi gibi block etikettir.
Kullanım şekli:
Kod:
<div id="container">
<h1>Türk Hack Team</h1>
<div id="service-1">
<h2>Siber güvenlik</h2>
<img src="">
<p>Siber güvenlik alanında hizmet vermekteyiz.</p>
</div>
<div id="service-2">
<h2>Eğitim </h2>
<img src="">
<p>Bu alanda yetişmek isteyenlere ücretsiz eğitimler verilmektedir. </p>
</div>
</div><span> : span etiketi parağraf içinde ki belli bir kısmı biçimlendirmek için kullandığımız etikettir. Inline etiket olduğu için bir alt satıra geçmez.
Kullanım şekli:
Kod:
<p>Kocaeli İzmit' de <span style="color:red;">halı yıkamada</span> kaliteli hizmet sunmaktayız. </p>Html5 semantic etiketler : html5 ile gelen anlamsal etiketler mevcuttur bunları kullanmak arama motorlarında bulunurluğumuzu artırmak için büyük önem taşımaktadır.
Bazı html5 semantic etiketler :
<header> ,<nav> ,<section>, <article>, <aside>, <figure>, <figcaption>, <footer>,
<details>, <summary>, <mark>, <time>
Kullanım şekli:
Kod:
<article>
<h2>Html nedir?</h2>
<p>Html nedir ve ne amaçla kullanılır, bu yazımızda bulabilirsiniz.</p>
<p> Kelhack tarafından <time datetime="2020-05-06 19:00">6 Mayıs tarihinde yayınlandı.</time> </p>
</article>iframe : bir web siteninde başka bir web sayfasını yada videoları eklemek için kullanılır. Iframe için tanımlaman özellikleri mevcuttur bunlar:
src : kaynak yolu (aynı klasör içindeki index.html sayfası ya da başka bir internet adresi olabilir.)
frameborder : çerçeve kenarlık kalınlığı.
width : iframe genişliği
height : iframe yüksekliği
Kullanım şekli:
Kod:
<iframe
src="http://turkhackteam.org"
frameborder="0">
</iframe>Evet arkadaşlar bu konumuzda en sık kullanılan html etiketlerini inceledik bir diğer css konumuzda görüşmek üzere.
Son düzenleme:
