LARAVEL
SASS
HTTP PROTOKOLÜ (Heyper Text Transfer Protocol)
SERVER – SUNUCU
CLIENT – İSTEMCİ
Web tarayıcıları http protokolünü kullanarak isteci ile sunucu arasında akışı sağlayan yazılımlardır. Web tarayıcıları sunuculardan aldıkları
istemci tarafına görsel olarak sunarlar. Sunucunun gönderdiği bilgileri web taraycısı olarak standart HTML dil yapısına göre
yorumladıktan sonra web sayfası olarak kullanıcının monitöründe görüntüler. Bu görselliği sağlayan temel dile HTML denir. Web taraycısı
sunucudan aldığı bilgileri istemci tarafında görüntülerken aynı zamanda istemciden aldığı bilgiyi tekrar sunucuya gönderir. Sunucu ile
istemci arasındaki istek yanı transfer işlemleri bu şekilde gereçekleşir. Günümüzde en çok kullanılan web tarayıcılarının başında Internet Explorer,
Firefox,Crome,Safari ve Operadır.
En SAYFASI ADRESİ
Webpopiler sunucu(SERVER – SUNUCU) dilleri => PERL, PHP, ASP, RUBY, CGI vb. gibi dillerdir.
(Uniform Resource Locator) ile tanımlanmış protokol bilgilerine göre gerçekleşir. URL üç parçadan oluşur
Taraycı dilleri => JAVASCRIPT, HTML..
WEB tarayıcıları istemci(client) ile web sunucusu(server) istek yanıt döngüsünü web sayfaları adresleri ile gereçekleştirir. Web tarayıcısı
(Browser) istemciden aldığı adresi çözümleyerek adresin bağlı olduğu sunucuya aktarır. Sunucu bu adres bağlı kayıtların geçerli olup
olmadığını denetledikten sonra istenilen cevabı web sayfasının adres bilgisine web tarayıcıya bildirir. Bu işlemler web sayfasının URL
PROTOKOL(HTTP/HTTPS)=> SİTE ADI => DİZİN ya da DOSYA
http:// www. siteadi.com /dersler/html-php/index.html
host name domain-name dizin yolu dosya
HTTP: İstemci ile sunucu arasındaki veri transfer protokolü.
WWW : Web uygularmaları için tanımlanmış bir adres olduğunu belirtir.
siteadi : Sitenin tam olarak adıdır.
.com = Ticari alan adı olarak üretilmiş olmasına rağmen günümüzde her tür site için kullanılmaya başlamıştır.
.net = İngilizcede ağ uzantısı anlamına gelen “network” kelimesinden kısaltılmıştır.
.org = Organizasyonlar için kullanılır “organization” kelimesinin ilk üç harfi kullanılmıştır.
.biz = Bu uzantı iş, ticaret anlamına gelen “business” kelimesinden kısaltılmıştır.
.info = Uzantısı bilgi anlamına gelmektedir. İngilizcede “information” kelimesinin kısaltılmışıdır.
.pro = Profesyonel anlamına gelmektedir. İngilizcede professional” kelimesinin kısaltılmışıdır.
.name = Gerçek isimler için bu uzantı kullanılmaktadır. İngilizcede “nickler” kelimesinden üretilmiştir.
.edu = Eğitim kurumları için türetilmiş bir alan adı uzantısıdır. “education” kelimesinin kısaltılmışıdır.
.gov = Devlet kuruluşlarının alan adı uzantısıdır. “government” kelimesinin kısaltılmışıdır.
.tr = Türkiye
.us = Amerika Birleşik Devletleri
.de = Almanya (Deutschland)
/dosya/dizin: Belirtilen yola göre adres teki dizene ulaşılır ve gerekli işlemler yapılır. Eğer dizin adı belirtilmemişse varsayılan dosya
okunur. index.php, index.html, index.asp, index.pel, index.cgi, default.asp, default.aspx
HTML5
* Sayfanın girişinde belge tanımlama yapılır.
ÖRN:
<!DOCTYPE html>
* Güncel bütün tarayıcılar HTML5’i desteklemektedir.
* XHTML standartlarına göre bütün html kodları küçük yazılır. HTML5’de böyle bir kısıtlama yoktur.
* Boş element grubunda bulunan elemenrler hariç başlangıç ve bitiş elementleri mutlaka bulunamalıdır.
* Etiketler hiyerarşik bir şekilde kullanılmalıdır. Açılan etiket tekarar kapanmalı / iç içe elementler kapanmamalıdır.
* Element hiyerarşisinde en son yazlan elementin kapanış etiketi ilk öncedir. Baba-Çocuk-Torun ilişkisi.
GK => Hiyerarşi : Yunanca kökenli bir sözcüktür. Bir toplumda veya bir toplulukta yer alan kişileri alt-üst görev ve yetkilerine göre
sınıflandıran sistedir.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <!-- 1 --> <html lang="tr"><!-- 2 --> <head><!-- 3 --> <title><!-- 4 --> HTML GİRİŞ </title> <meta charset="utf-8" /><!-- 5 --> </head> <body><!-- 5 --> HELLO WORLD </body> </html> |
1 -> Belge tanmımlamak için kod başlangıcına DOCTYPE direktifi yerleştirilir.
DOCTYPE direktifi HTML sayfalarında kullanılacak html in sürüm standartları ile uyumlu desteğini tanımlar
HTML5, XHTML ve HTML4.1 standartları bu direktife bağlıdır. XHTML 1.1 sürümü için DOCTYPE bildirmi aşağıdaki gibidir.
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
XHTML 1.0 sürümü içinse tanımlama aşağıdaki gibidir.
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
2 -> <html> Web sayfasının kök elementidir. Web sayfasını tanımlayan bu blog arasındaki diğer elementler hiyerarşik bağ ile bir birine bağlıdır.
3 -> <head> Web sayfasının bilgilendirilen bigilerin bulunduğu bloktur. <title>, <sytle>,<link>,<meta>,<script> gibi önemli elementler burada yazılır.
3 -> <title> Bir web sayfasını tanıtan ve içerikle ilgili başlığın yazıldığı sayfa bilgilendirme etiketidir. YAZILMASI ZORUNLUDUR. Google aramaları için önemlidir.
4 -> <meta> etiketi web sayfasındaki yazı karakterini tanmılamak için kullanırlır.
5 -> Body Web sayfasının gövde elementidir. Html kodları bu bölüme yazılır.
ÖRNEK ETİKETLER
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html lang="tr"> <head> <title> HTML GİRİŞ </title> <meta charset="utf-8" /> </head> <body><!-- 5 --> HELLO WORLD<br> <BR> => Yazıda bir alt satıra geçirmek için kullanılır. <br> <p> => Yazıları paragraf olarak gösterme.<p></p> <h> => Yazılara konu başlığı ekleme etiketi. <h1></h1><h2></h2>.....<h6></h6> <q> => Dipnot alıntı ekleme. <blockquote>bu alıntı</blockquote> buda bir alıntıdır <q>alıntı</q> <hr> => Sayfa içeriğine çizgi ekleme. <hr /> <strong> => Yazıyı koyu kalın yapma <strong>Kalın yazı</strong><b>buda kalın yazı</b> <i> => Yazıyı yatık yazma. Bu <i> Eğik </i>yazı. Bir <em> eğik</em> yazı <cite> daha</cite> <del> => Yazının üstünü çizme. Adına bir <del> çizik </del> attım. Bir <strike>çizik</strike> daha <s>çiz</s>. <u> => Yazının altını çizme. <u> altı </u> çizik <ins>yazı</ins>. <pre> => Yazım biçimini olduğu gibi gösterme. <pre> <p>Merhaba dünya</p></pre> <ul - li> => Yazıyı listeli olarak gösterme <ul><li type="disk">liste</li><li type="circle">liste</li><li type="square">liste</li> <ol> <li>Sıralı liste</li></ol> <div> => P etiketi gibi çalışır ama boşluk bırakmaz. <div> örnek </div> <span> => Css ile kullanımlarda işe yarayan vasıfsız etiket. <span>Bu bir span</span> <small> => Var sayılan metin boyutunu biraz daha küçük yapar. Örnek <small> bir <small>metin</small></small> <big> => Varsayılan metin boyutunu biraz daha büyük yapar. Örnek <big>bir <big> metin</big></big> <sub> => Alt yazı ekler. 2H<sub>2</sub>O<sub>2</sub> <sup> => Üst yazı ekler. x*x = x<sup>2</sup> </body> </html> |
META ETİKETİ
<meta> Etiketi ile bir web sayfasını ya da sitenin arama motorları için bilglerin tanımlanmasını sağladığı gibi, içerinğin kodlama biçiminide sağlar.<meta> etiketi web tarayıcıları için bilgiler bulundurur.<meta> etiket <head></head> etiketleri arasında yazılarak kodlanır.
Bir web sayfasının içeriği ile ilgili kısa bir açıklama yapılmasını sağlar. Arama motorlarına bilgi vermek amacı taşır. Arama motorları kısa bir açıklama ile web içeriğindeki bilgi tutarlılığına göre web sayfasını kaydedecektir.
1 | <meta name="discription" content="Çağlar Hoca ile HTML dersleri" /> |
Bir web sayfasının içeriğini temsil eden ve aralarına virgül konarak tanımlanan anahtar kelimelerini arama motorlarına tanıtmamaızı sağlar. Arama motorları bu kelimleri indexler ve bu kelimelerin geçtiği bir aramada web sayfasını sıralar. Bu kelimeler web sayfası içeriği ile uyumlu olmalıdır. Aksi halde arama motorları bu siteyi pas geçer.
1 | <meta name="keywords" content="HTML, HTML5, CSS2, CSS3" /> |
Web sayfası tasarımı ve içeriği ile ilgilenen kişinin bilgilerini taşır. Çok nadiren kullanılır.
1 | <meta name="author" content="Çağlar Hoca" /> |
Web sayfası karakter kodlamasını tanımlar. Tarayıcı bu kodlamaya göre içeriği görüntüler.
1 | <meta charset="UTF-8" /> |
Web sayfasını otuz sani içerisinde yeniler.
1 | <meta http-equiv="refresh" content="30"> |
Bir <meta> alanı öğesi sayfanın boyutları ve ölçeklendirme nasıl kontrol edileceğine ilişkin tarayıcı talimatlar verir.
content = aygıt genişliği kısmı (cihaza bağlı olarak değişecektir) cihazın ekran genişliği takip genişliğini belirler.
İlk ölçekli = 1.0 kısım sayfa ilk tarayıcı tarafından yüklenen ilk yakınlaştırma düzeyini ayarlar.
İşte bir web sayfası örneğidir olmadan görünüm meta etiketi ve aynı web sayfasından ile görünüm meta etiketi:
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
Metin Listeleme
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!-- Liste: temel kullanım - Sırasız liste--> <ul> <li>Eleman 1</li> <li>Eleman 2</li> <li>Eleman 3</li> </ul> <hr> <!-- Liste: temel kullanım - sıralı liste --> <ol> <li>Eleman 1 </li> <li>Eleman 2 </li> <li>Eleman 3 </li> </ol> |
Liste: iç içe listeler – sıralı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <ol> <li>Eleman 1 <ol> <li>Eleman 1.1</li> <li>Eleman 1.2</li> </ol> </li> <li>Eleman 2 <ol> <li>Eleman 2.1</li> <li>Eleman 2.2</li> </ol> </li> <li>Eleman 3 <ol> <li>Eleman 3.1</li> <li>Eleman 3.2</li> </ol> </li> </ol> <ol type="I" value="III"><!-- type="1" type="a" type="i" type="i" type="I"--> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <dl> <dt>Başlık</dt> <dd>Açıklama</dd> <dt>Başlık</dt> <dd>Açıklama</dd> </dl> |
TABLO ELEMENTİ
Table elementi HTML sayfalarına Excel veya Word belglerindeki tablo özelliklerine benzer bir işlev kazandırır.<table> elementil ile beraber <th>,<td>,<tr> etiketleri kullanılır. border=”1″ tabloya kalınlık belirlemek için kullanılır.
<table></table> => Ana elementir. Tablo tanımlaması yapılır.
<tr></tr> => Satır direktifi ya da elementi.
<th></th> => Başlık direktifi ya da elementi.
<td></td> => Sutun ve satırların kesiştiği hücreleri oluşturmaya yarayan etiket.
<caption></caption> => Tablo başlığı.
<thead> Sutun başlıklarını gruplamada kullanılır.
<tbody> Tablonun gövdesini belirlemede kullanılır.
<tfoot> Tablonun sonun alt bölümünü gruplamada kullanılır.
colspan=”sayı” => satırları birleştirmeye yarıyor.
rowspan=”sayı” => sutunları birleştirmeye yarıyor.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <table border="1"> <tr> <td>Hücre bir</td> <td>Hücre iki</td> </tr> </table> <table border="1"> <caption>TABLO BAŞLIĞI</caption> <tr> <th>Sutun başlık 1</th> <th>Sutun başlık 2</th> </tr> <tr> <td>Sutun bir içerik</td> <td>Sutun iki içerik</td> </tr> </table> <hr> <table border="1"> <thead> <tr> <td>BAŞLIK 1</td> <td>BAŞLIK 2</td> </tr> </thead> <tfoot> <tr> <td>FOOT İÇERİK</td> <td>FOOT İÇERİK</td> </tr> </tfoot> <tbody> <tr> <td>BODY İÇERİK</td> <td>BODY İÇERİK</td> </tr> </tbody> </table> <hr> <table border="1"> <tr> <td>Hücre bir</td> <td>Hücre iki</td> </tr> <tr> <td colspan="2">Hücre bir</td> </tr> <tr> <td colspan="2">Hücre bir</td> </tr> <tr> <td rowspan="2">Hücre bir</td> <td>Hücre bir</td> </tr> <tr> <td>Hücre bir</td> </tr> </table> |
GRAFİK EKLEME
<img> Web sayfasına her türlü grafik içeriğinin eklenmesini ve gösterilmesini sağlar.
1 | <img src="zemin.jpg" alt="resim içeriği" title="açıklama alaını" height="200" Width="250" /> |
src=”url” => Resim dosyasının adı ve bir web sitenin adres yolu.
alt=”metin” => Grafiği tesilen bir açıklamayı gösterir.
title=”metin” => Resmin başlığını içerir.
width=”sayı” => Resmin genişliğini belirler.
height=”sayı” => Resmin yüksekliğini beliler.
figure => Web sayfasındaki görselleri (resim, video gibi içerikleri) gruplamak için kullanılır.
figcaption => Figure ile gruplanan resimlere açılama eklemeye yarar.
1 2 3 4 5 6 7 8 9 10 | <figure> <img src="zemin.jpg" alt="resim içeriği" title="açıklama alaını" height="200" Width="250" /> <figcaption> Örnek bir zemin rengi. </figcaption> <img src="zemin.jpg" alt="resim içeriği" title="açıklama alaını" height="200" Width="250" /> <figcaption> Örnek bir zemin rengi. </figcaption> </figure> |
LİNK EKLEME
Web sayfalarının içeriğine erişmek için kullanılan köprülerdir.
1 | <a href="http://www.google.com.tr" target="_blank" >GOOGLE GİDER.</a> |
_blank => Bağlantıyı yeni bir pencerede açmak için kullanılır.
_self => Bağlantıyı aynı pencerede açmak için kullanılır.
_top => Bağlantıyı aynı pencere içerisinde en üstte açmak için kullanılır.
_parent => Sayfa daha önce açık olan bağlantının yerine açar.
DOSYA YOLU ANLATIMI
1 | <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain"> |
BASE KULLANIMI
1 | <base href="https://www.w3schools.com/images/" target="_blank"> |
RESİME LİNK VERME
1 2 3 4 5 6 | <img src="zemin.jpg" width="1000" height="600" usemap="#zeminharita" /> <map name="zeminharita"> <area shape="rect" coords="100,146,255,283" href="http://www.google.com.tr" /><!--dikdörtgen--><!--coords="x-basla,ybasla,xbitis,ybitis"--> <area shape="circle" coords="913,370,70" href="http://www.yandex.com" /><!--daire--> <area shape="polyg" coords=",," href="http://www.google.com.tr" /><!--üçgen--> </map> |
ÇAPA KULLANIMI
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <li><a href="index2.html#capa1">ÇAPA 1</a></li> <div id="linkler">LİNKLER</div> <ul> <li><a href="#capa1">ÇAPA 1</a></li> <li><a href="#capa2">ÇAPA 2</a></li> <li><a href="#capa3">ÇAPA 3</a></li> </ul> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <div id="capa1">capa1 <a href="#linkler">LİNKLER</a></div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <div id="capa2">capa2 <a href="#linkler">LİNKLER</a></div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <div id="capa3">capa3 <a href="#linkler">LİNKLER</a></div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <hr> |
İFREME KULLANIMI
1 | <iframe src="https://www.btk.gov.tr/tr-TR/Anasayfa" height="310px" width="99%"></iframe> |
HTML SAYFA DÜZENİ
Header – Bir belgenin veya bir bölüm için bir başlık tanımlar
Nav – gezinme bağlantılarının bir kabı tanımlar
section – Bir belgedeki bir bölüm tanımlar
article – bağımsız müstakil yazı tanımlar
aside- (bir kenar çubuğu gibi) içeriğinden bir yana içerik tanımlar
footer – Bir belgenin veya bir bölümü için altbilgi tanımlar
details – ek ayrıntıları tanımlar
Özeti – summary elemanı için bir başlık tanımlar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <style> header{ width: 100%; height:15em; background:black; color:white; text-align:center;} nav{float:left; height:20em; width:15%; background:yellow;} article{float:right; height:20em; width:15%; background:yellow;} aside{float:left; height:20em; width:70%; background:blue;} footer{min-height:3em; width:100%; background-color:green; text-align:center;} </style> <div class="container"> <header> <h1>City Gallery</h1> </header> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <aside>İÇERİK ALANI</aside> <article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> <footer>Copyright © W3Schools.com</footer> |