Google ve Youtube Reklamlarını Engelleyen Tarayıcı ve Uygulama İndir

html nedir

Web tasarım ve kodlama derslerinde ilk öğreneceğimiz dil html teknolojisidir.Bir internet sitesinin iskeletide denen bu işaretleme diliyle web site yapmasını öğreneceğiz.Hiç bir kodlama bilginiz olmasa dahi bloğumu takip edin makalelerimi okuyun ve uygulamaya çalışın.Eminim siz de kendi web sitenizi kodlayarak sıfırdan kendi projelerinizi hayata geçirebileceksiniz.

Öncelikle html nedir,ne işe yarar nasıl kullanılır bunları öğreneceğiz.Html öğrenilmesi en kolay dildir ve ben size bildiğim herşeyi uygulamalı olarak anlatacağım.Sitede kullandığım kod editörüyle  anında ne işe yaradığını göreceksiniz.Kod67 Html Dersleri başlıyor.
html
Html5 Dersleri Başlangıç



HTML Nedir  

İnternet siteleri yapmamıza olanak sağlayan işaretleme dili olan html sayesinde Chrome,Firefox,İnternet Explorer,Safari ve Opera gibi tarayıcılar html etiketlerini (kodlarını) yorumlayarak kullanıcıya istenen formatta görüntülenmesini sağlatırlar.Örneğin Google'da bir arama yaptığımızda çıkan sonuçlara göre bir linke tıklarız ve bağlantı sahibi internet sitesine gideriz.

Lafı uzatmadan bir html sayfası kodları nasıldır bunu inceleyelim.Aşağıdaki kod editorünü inceleyeniz.Ve o kodlar sayesinde bir web sitesi oluştu.Evet ilk web sitemiz aşağıda göründüğü gibidir.

<!DOCTYPE HTML> <html> <head> <title>Site Başlığı</title> </head> <body> <h1>Benim Sitem</h1> <p>Siteme Hoşgeldiniz</p> </body> </html>
Yukarıdaki kod yapılarıyla bir web sitesi oluşturduk.İnanması zor biliyorum ama bir web sitesinin en yalın ve en göze hitap etmeyen hali budur.Şimdi sırasıyla kod editöründeki etiket veya kodların anlamlarını açıklamaya başlayalım.
html etiketler
Html web sayfasındaki etiketlerin anlamları


  1. Doctype Bildirimi: En son kullanılan html teknolojisinin adı HTML5'tir.Bu belgenin html5 yapısına uygun olduğunu tarayıcılara  ve arama motorlarına bilgi verir.
  2. Öncelikle çoğu html kodları başlangıç ve bitiş etiketleriyle yazılır ve içerisinde bit html elemanı barındırır.
  3. Dikkat ederseniz html etiketi tüm belgeyi kucaklamış kod satırının başında ve sonunda var .Burdan anlamamız gereken şey internet siteleri html tagı(etiketi) ile başlar html etiketiyle biter.
  4. Sonrasında dikkatinizi çekecek  iki önemli etiket var. Bunlardan biri head diğeri ise body.Head bölümünde arama motorlarına bilgi sağlamaya çalışırız.Bunlardan bazıları:
  • Sayfanın başlığı (<title> </title> etiketleri arasına yazılan yer.Kullanıcılar bunu görebilir.)
  • Anahtar kelimler,Meta açıklama denilen  arama motorlarında görüntülenen açıklama kısımları.
  • Web sayfalarını oluştururken CSS teknolojisinden faydalanırız.Web sayfalarına stiller uygulayarak daha renkli sayfalar oluşturmamızı sağlayan bu dilin dosyalarınıda çoğu zaman head bölümüne ekleriz.
  • Keza dinamik web sayfalar oluşturmamızı sağlayan ve kullanıcı taraflı bir dil olan javascript kodlarını da head kısmına yerleştirebiliriz. 
Html ile hazırlanan belgelerin uzantısı html,html ve xhtml olabilir.Html kodlarını yazarken dikkat edilmesi gerekenş eyler:

  1. <html> ile başlayan etiket </html> bitiş etiketiyle sonlanır.
  2. <br /> <img /> gibi tek yazımla kullanılan etiketler de vardır.
  3. Html kodları(tag) türkçe karakter barındırmaz.
  4. Büyük ve küçük harf kullanımı fark etmez ama kabul gören yazım (syntax) küçük harflerdir. 

Şuan için bile bu kadar fazla bilgi yeterli kafanız karışsın istemiyorum.Head bölümüne arama motorları için ve tarayıcıların yorumlaması için bilgiler girildiğini unutmamak yeterli.
Son olarak body etiketinden bahsetmek istiyorum.Body etiketleri arasında kalan her şey web sitemize uğrayan ziyaretçinin gördüğü herşeyi içerir.

Örneğin kod editöründe yaptığımız web sitesi içerisindeki h1 etiketleri  başlık etiketlerinden biridir.Ve web sayfalarımızda başlıklar oluşturmamızı sağlar.Diğer gördüğünüz p etiketi ise paragraflar oluşturmamızı sağlayan html  kodlarından biridir.

Css Html sayfalarına stil uygulamamıza yardımcı olan teknolojidir

Eminim yukarıdaki  yaptığım web site tanımından rahatsız oldunuz.Bir web sitesi böyle olmaz ki dediğinizi duyar gibiyim.Bu algıyı kırabilmem için web sayfamızda css kullanmalıyım.Belki vay be web site nasıl bu hale geldi diyeceksiniz.

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Css ve html kardeşliği</title> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" /> </head> <body> <header class="w3-container w3-padding-16 w3-center w3-red"> <h1>Yeni web sitemiz</h1> </header> <p class="w3-panel w3-pale-blue w3-leftbar w3-rightbar w3-border-blue w3-padding-16 w3-container">Az önceki paragraftan eser yok değilmi</p> <h2>Birde tablo ekleyelim</h2> <table class="w3-table w3-bordered w3-striped w3-border test w3-hoverable"> <thead><tr class="w3-green"> <th>html</th> <th>Css</th> <th>Javascript</th> </tr> </thead> <tbody> <tr> <td>Web sayfalarının iskeletidir.</td> <td>Web sayfalarını süsler stiller oluşturur</td> <td>Javascript ise etkileşimli ve dinamik web sayfalar oluşturmamıza yardım eder.</td> </tr> </tbody> </table> <h3>Birde Javscript ile tanışın.</h3> <p>Aşağıda gördüğünüz butona lütfen tıklayın.</p> <button onclick="window.alert('Merhaba Nasılsın')">Çalıştır</button> <div class="w3-panel w3-leftbar"> <p><i class="fa fa-quote-right w3-xxlarge"></i><br> <i class="w3-serif w3-xlarge">Html öğrenerek hemen web site yapmaya başlayabilirsiniz.</i></p> </div> </body> </html>
Biraz daha ilerletirsek normal bir web sayfası oluşturabiliriz.Ama daha çok erken o kadar kolay ve hızlı öğreneceğiz ki kodlama öğrenirken en önemli şey sabır.Uygulamalarla birlikte html bu sitede çok kolay öğreneceksiniz.Sadece nelerle karşılacağımızın sunumu niteliğinde olan bir ders bu.

Eğer seo öğrenmek istiyorsanız HTML dilini asgari düzeyde bilmeniz gerekebilir.

Ben web sitesi hazırlarken Google'ın da dediği gibi daha tasarım süreceindeyken kararlar veriyorum.Arama motorları için önemli olan html etiketleri bulunmaktadır.Bunlara semantic etiketler de deniliyor.Article gibi.Header,footer,nav...

Bir web sitesi yapmak için editör kullanacağız.Bilgisayarınızdaki notepadle bile web sitesi yapılabilir ama kodları renkli göstermez yardımcı olmaz kod yazmanıza.Benim tercihim Netbeens ide editörü.Youtube video derslerinde bu html editörü üzerinden dersler anlatacağım.

Evet arkdaşlar html nedir konusunu anlatmaya çalıştığım makalemin şimdilik sonuna geldik.Html dersleri tüm hızıyla devam edecek.Web tasarım ve kodlama öğrencisi olarak sizlerle öğrendiğim herşeyi paylaşmaya devam edeceğim.İyi kodlamalar.Yeni Yılınız Kutlu Olsun.

Yorumlar