HTML Kodlama Nasıl Öğrenilir? - Niobe Hosting

Trang chủ » Html Yazılım öğrenme » HTML Kodlama Nasıl Öğrenilir? - Niobe Hosting

Có thể bạn quan tâm

HTML öğrenmek diğer dillere nazaran öğrenmesi en kolay dillerden biridir. Çünkü HTML bir programlama dili değil, metin işaretleme dilidir. Bu sebepten dolayı HTML ile kod yazılacağı zaman herhangi bir nesne oluşturulmaz, algoritma kurulmaz. HTML kodlama ile sadece metin işaretleme yaparak bir web sitesinin adeta iskeleti oluşturulur.

HTML öğrenmek için internette sayısız kaynak bulunmaktadır. Bu dili öğrenmek istediğinizde önce “tag” denilen etiket sistemini öğrenip ardından bu etiketlerin hangi sırayla yazıldığını öğrenerek başlayabilirsiniz. Fakat en önce HTML’in ne olduğundan ve neden öğrenilmesi gerektiği bilinmelidir.

Fakat bir web sitesini oluşturmak için HTML tek başına yetersiz kalacaktır. Bu sebeple HTML’in yanında CSS ve Javascript dilleri de öğrenilerek daha profesyonel, kullanıcı dostu ve etkileşimli siteler yapmak mümkün hale gelecektir. Web sitesini yaparken HTML kodlama kullanıldıktan sonra CSS ile bu siteye stil verilerek site göze daha güzel gelen bir forma sokulur. Burada unutulmaması gereken kural HTML kodları CSS ve JS kodlarına uygun bir şekilde yazılmalıdır. Bu sayede bu 3 dil birbiri arasında daha entegre ve sağlıklı çalışabilmektedir.

HTML Nedir ve Neden Öğrenilmeli?

HTML yani Hyper Text Markup Language, adından da anlaşılacağı üzere Hiper Metin İşaretleme Dili’dir. Bu dil bir web sitesi yapılırken web sitesinde görülen buton, başlık, paragraf, metin kutucukları, sayfalar arası dolaşım gibi birçok işlevin çalışması için yazılması gereken en temel kodları yazmamıza yarar.

Daha kolay anlaşılmasını isteyecek olursak bir web sitesini insan vücuduna benzetelim. Bir insan vücudunun iskeleti, organları ve işlevleri vardır. Bu iskelet HTML ile organlar CSS ile işlevler ise Javascript ile bir web sitesine kazandırılmaktadır. HTML bahsedildiği üzere sitenin en temel kısmını yani iskeletini oluşturmaya yaramaktadır.

HTML kodlama, web sitesi yapmak isteyen herkesin bilmesi gereken bir dildir. HTML bilmeden bir web sitesinin CSS kodlarını yazmak ya da o siteye Javascript kodları entegre etmek bir işe yaramayacaktır. Çünkü bu kodların doğru çalışması için öncelikle kodların yazılacağı .html uzantılı dosyaya “ <html> “ etiketi açılmalıdır ki bunun bir web sitesi olduğu anlaşılsın. HTML dili ile yapılabilecekleri şu şekilde listeleyebiliriz:

  • Bir web sitesinde görsel, yazı, video ya da buton gibi birçok içeriğin web sitesinde istenilen konuma getirilebilir.
  • Bahsedilen içeriklerin web sitesinde doğru ve istenen konumda gösterilebilir.
  • Browser’lara web sitesi hakkında bilgiler verilip sitenin browser’lar tarafından doğru tanınması sağlanır.
  • Web sitesine metin veya görsel gibi içerik eklenmesi gerektiğinde devreye giren dil HTML’dir. Bu dil sayesinde sitede belirlenen yerlere içerik eklenebilmektedir.

HTML ile CSS ve JS Arasındaki Bağlantı Nedir?

HTML, CSS ve JS birbirinden oldukça farklı 3 yazılım dilidir. Bunların içinden sadece Javascript programlama dili olmakla beraber diğer iki dil ise metin işaretleme dilidir. HTML ile CSS ve JS arasındaki bağlantıdan bahsetmeden önce CSS ve JS kavramlarının ne olduğu bilinmelidir. CSS (Cascading Style Sheets) Türkçede “Basamaklı Stil Şablonları” olarak belirtilmektedir. HTML ile sitenin iskeleti oluşturulduktan sonra bu iskeletin kullanıcıya güzel gözükmesi için CSS kullanılır. CSS de bir metin işaretleme dili olarak bilinir. Fakat sadece metinler üzerinde değil sitenin bütün formatı üzerinde CSS ile işlem yapılabilir. CSS’in yazılı olmadığı bir site kullanıcının gözüne kötü gelmekle birlikte neredeyse işlevsiz bir site olarak kullanılacaktır. Yani HTML kodlama bir web sitesi için ne kadar önemliyse CSS’ de bir o kadar önemlidir denilebilir. CSS ile bir web sitesinde yapılabilecek geliştirmeler şunlardır.

  • Sitenin genel tasarımı konusunda köklü değişiklikler CSS ile yapılabilir. CSS ile sitenin arka plan görseli veya rengi değiştirilebilir bu rengin her sayfada değişmesi sağlanabilir.
  • CSS kodları yazılırken HTML’deki class ve tag sisteminden yararlanılabilir. Her tag ve class için ayrı CSS kodları yazılması siteyi geliştiren yazılımcı için büyük kolaylık sağlamaktadır.
  • CSS kodları sitedeki yazılar, butonlar, metin kutuları gibi her birimde değişiklik yapmamıza izin verir. CSS ile sitedeki yazının fontu değiştirilebilir, yazı renkleri ve boyutlarıyla oynanabilir ve çeşitli animasyonlar eklenebilir.
  • Bir sitenin responsive, yani mobil uyumlu olması için CSS olmazsa olmazdır. Çünkü sitenin responsive olması için gereken kodlar CSS dosyalarına yazılır. Bu sayede site her boyuta uygun bir şekle girer. Bunu sağlayan dil CSS’ dir.

Bir insanın nasıl işlevleri varsa bir web sitesinin de işlevleri olması için gereken kodlar Javascript dili ile yazılır. Adından da anlaşılacağı üzere Javascript, bir Script dilidir. Java dili ile herhangi bir alakası yoktur. Genellikle web siteleri için kullanılıyor olsa da Javascript yapay zekâ, oyun geliştirme gibi birçok alanda da aktif bir şekilde kullanılabilen geniş kapsamlı bir dildir. Aynı zamanda Javascript nesne tabanlı bir programlama dilidir.

Javascript sayesinde daha etkileşimli siteler oluşturulmaktadır. Bir web sitesinde genellikle HTML kodları ve CSS kodları yazıldıktan sonra Javascript kodları eklenerek istenen yerlerde site ile kullanıcı arasında etkileşim sağlanmaktadır. Javascript ile bir web sitesinde yapılabilecekler:

  • Web sitesini ziyaret eden kullanıcıya site üzerinden anlık bildirim gönderme sağlanabilir.
  • Web sitesine HTML ve CSS ile oluşturulan bir iletişim formuna Javascript ile işlev kazandırılabilir.
  • Web sitesi için akla gelebilecek bütün dinamik etkileşimler bu dil ile sağlanabilir.

Javascript görüldüğü üzere bir web tasarımcı tarafından neredeyse olmazsa olmaz denilebilecek kadar önemli bir dildir. Peki Javascript kullanmanın avantajları nelerdir? Javascript’in avantajlarını şu şekilde sıralayabiliriz.

  • Herhangi bir compiler (derleyici) ihtiyacı gerekmeksizin kullanılabilen bir dildir. Çünkü bu dil HTML kodları arasında yer alacağından tarayıcılar bu kodları HTML ile yorumlamaktadır.
  • Web sayfalarında özel durumlara göre ayarlanabilir. Belli yerlere gelince imlecin rengi değişmesi, ses çıkması gibi özellikler Javascript ile siteye kazandırılır.
  • Javascript esnek bir yapıya sahiptir. Bu sayede birbirinden farklı platform ve tarayıcılarda sorunsuzca çalışabilmektedir.
  • Web sitelerini interaktif yapar, ziyaretçilerin ilgisini çeker.
  • Öğrenmesi çok zor değildir. Basit bir yapısı vardır. Basit yapısı dolayısıyla diğer yazılım dillerine nazaran hata bulma işlemi çok daha kolaydır.
  • Diğer yazılım dillerinden daha hafif olması dolayısıyla web sitesini çok yoracak bir dil değildir.

Bahsedilen bu 3 dili toparlayacak olursak web sitelerinin yapıtaşı olan HTML kodlamayı sitelere içerik eklemek, içeriklerin nerede görünmesini sağlamak ve tarayıcılara sitemiz hakkında gerekli bilgileri ulaştırmak için gerekli olan dil olarak tanıtabiliriz.

CSS için siteyi oluşturan yazılımcıya siteye stil ekleme şansı veren dil diyebiliriz. Bir öğenin rengini, şeklini, nerede olması gerektiğini ve eğer isteniyorsa animasyonunu bu dil ile ekleriz. Bu istenenlerin birçoğunu HTML’de yapabilsek de CSS bize toplu kısımları tek seferde yapabilmemize olanak sağlar. Bu şekilde zaman ve enerjiden tasarruf etmiş oluruz.

Son ve en aktif dilimiz olan Javascript ise sitelere interaktif olma özelliği katmaktadır. Scriptler PHP gibi sunucuda değil de ziyaretçinin internet tarayıcısında çalışır bu sayede sunucu güvenliği ve sunucu sağlığı olarak bizi bir adım öne taşımaktadır. Javascript’i sitede etkileşim istediğimiz her kısımda özgürce kullanabilir, bu kısımların etkileşimli olmasını sağlayabiliriz.

HTML Kodlamak İçin Hangi Programlara İhtiyaç Var?

HTML kodlamak için kullanabileceğimiz birçok seçenek mevcut. Aslında ekstra bir programa ihtiyaç duymadan bilgisayarınızın not defteri ile de HTML kodlayabilirsiniz. Ancak yazılım dünyasında kodlama için geliştirilmiş çok fazla seçeneğe sahip olduğunuzu unutmayın. Bahsedeceğim programlar ile kolayca kodlama yapabilir, bu programlar sayesinde yazım hatalarınızı görebilir, kısayollar sayesinde kodlarınızı hızlıca yazabilirsiniz.

1. Notepad++

Notepad ++, birçok kullanıcının favori kod editörüdür. Notepad ++ kolay kullanışlı klasik bir yazılımdır. Bilgisayarımızda bulunan not defteri yetersiz olduğu için piyasaya çıkmıştır.

Notepad ++, size otomatik tamamlama gibi kolaylıkların yanında mükemmel kod vurgulama seçenekleri sunar. Makro kayıt özelliği bulunan program ayrıca, sık kullanılan komutları otomatikleştirir. Kullanıma hazır birçok eklenti barındırır.

2. Sublime Text 2

Sublime Text 2 oldukça popüler olan bir diğer HTML editörüdür. Farklı uzantılar ve JSON dosyaları ile kişiye özel kullanıma müsade eder. Paket Kontrolü yardımıyla, uzantıları indirip kurmanıza olanak sağlar. Editörün oldukça kapsamlı bir eklenti kütüphanesi bulunmaktadır. Sublime Text 2 ücretsiz olarak indirilebilir ve sınırsız olarak kullanılabilir.

3. CoffeeCup

CoffeeCup HTML Editor, diğer editörler gibi HTML/CSS projelerinizin üzerinde çalışmak için basit bir araçtır. CoffeeCup HTML Editor yeni kullanıcıların olduğu kadar profesyonel kullanıcıların da tercih ettiği bir araçtır. Programın avantajlarına göz atacak olursak, FTP senkronizasyonu ve site önizlemesi gibi özellikleri mevcuttur.

4. Phase 5

Phase5, proje yönetimi, kod tamamlama, resim görüntüleyici, özel karakterler için destek, hata ayıklayıcı, girinti yardımı, arama ve değiştirme ve özelleştirilebilir menüler-şablonlar gibi özellikler barındırmakta.

Phase5 ayrıca PHP, Javascript, HTML, VBScript, Java ve Pearl gibi popüler formatları da destekler.

5. SynWrite

SynWrite oldukça işlevsel bir editördür. SynWrite yukarıda sıraladığımız diğer editörlerin özelliklerine ek olarak Python ile yazılmış eklentiler eklenebilir olması ile gayet kullanışlı bir araç olmayı başarıyor. SynWrite ile ayrıca çoklu ayarlama yapabilir, böylece zamandan bolca tasarruf edebilirsiniz.

HTML Kod Örnekleri

HTML kodları < ile > işaretlerin arasına yazılmalıdır.

HTML kodları, içeriğin arasına yerleştirilen bir başlangıç etiketi ve bitiş etiketinden oluşur. Örnek: <p>Merhaba</p> başlangıç etiketi, bitiş etiketi şeklinde yazılır, bitiş etiketinin önüne bir / işareti eklenir. <html> </html>, <p> </p> gibi.

Burada yazdığımız HTML kodlarını açıklayacak olursak,

<html> </html>, kodlarımızın tamamını içine alan, sayfanın başında açılarak sayfanın sonunda da kapatılan etiketin adıdır. <html> Tüm İçerikler </html> şeklinde açılıp, kapanmalıdır.

<head> </head> etiketi çalışma sayfamız hakkında başlık bilgilerini içerir. Bu bölüme eklenen hiç bir şey sayfada görünmez. Bu alan, sayfa açıklaması, anahtar kelimeler, belgenin yazarı ve diğer verileri belirtmek için kullanılır.

<title> </title> bu etiketler arasına yazdıklarınız sayfamızda başlık olarak görüntülenir.

<body> </body> sayfamızda görünmesini istediğimiz tüm HTML kodları bu alana yazılır. Başlıklar, paragraflar, resimler, videolar, listeler vb.

Özetleyecek olursak, sayfa yapısı aşağıdaki şekilde olmalıdır.

<html><head><title>İlk HTML Denemem</title></head><body>Sayfada görünecek içerikler.</body></html>

HTML’nin temel etiketlerini açıkladık. Şimdi, içerik oluşturmak için kullanabileceğimiz diğer HTML kodlarını inceleyelim.

HTML <Hx> Etiketleri – Başlık Etiketleri

HTML’de başlıklar <h1> <h2> <h3> <h4> <h5> <h6> etiketlerinden oluşur.

Başlık boyutu <h1> den <h6> ya doğru küçülür. İçerik başlığı veya önemli başlıklar için <h1> etiketi kullanılır.

HTML <p> Etiketi – HTML Paragraf Ekleme

HTML sayfalarına paragraf eklemek için <p> </p> etiketi kullanılır.

HTML Paragraf Ekleme Kodları:

<p>Bu bir paragraftır.</p><p>Bu ikinci paragraftır.</p>

HTML <a> Etiketi  –  HTML Link Kodu Kullanma

Sayfanıza link eklemek isteyebilirsiniz. Bu linkler, kullanıcıların sayfanızdan başka bir sayfaya doğru yönlendirilmesi için kullanılır. Örnek olarak, sitemizde tıkladığınız her menü link kullanılarak yönlendirme işlemi yapar. Sayfanıza verdiğiniz bağlantının farklı pencerede açılması isterseniz bağlantıya target=”_blank” özelliği eklemelisiniz.

Örnek;

<a href=” https://www.niobehosting.com/blog” target=”blank”>Anasayfaya Gidin.</a>

HTML <strong> Etiketi

<strong> etiketi yazıya <b> etiketi ile aynı görünümü verir. Yani yazının kalın görünmesini sağlar. Ayrıldıkları nokta şudur: <b> takısı sadece yazının stilini değiştirir. <strong> takısı ise, yazının stilini değiştirmekle kalmayıp, ona önem katar. Arama motorları sayfayı indekslerken <strong> takıları arasındaki kelimelerin, diğer kelimeler ile karşılaştırıldığında daha önemli olduğunu varsaymaktadır. Aynı şekilde, sayfayı bir okuma yazılımına okutursanız, <strong> takıları arasındaki kelimeleri daha yüksek sesle okuyacaktır.

Örnek;

HTML kodlama nasıl öğrenilir <strong>HTML</strong> Örnekleri

HTML <b> Etiketi – Kalınlaştırma

Bu etiket ile istediğiniz metnin bold (kalın) olarak yazılması sağlanır.

Aşağıdaki HTML kodunu incelediğimizde b etiketinin kullanımını görüyoruz.

Bu etiket ile istenen metnin <b>bold (kalın)</b> olarak yazılması sağlanır.

HTML <i> Etiketi – Eğik Yazı (İtalik) Etiketi

Bu etiketi kullanarak italik (eğik) yazı özelliği vermek istediğimiz yazıları hazırlayabiliriz. Aşağıda örnek HTML kodlarını görebilirsiniz.

HTML kodlama nasıl öğrenilir <i>HTML</i> Dersleri

HTML <br> Etiketi – HTML Alt Satıra Geçme

HTML kodlamada alt satıra geçmek için <br> etiketi kullanılır.

<br> etiketi satır sonu olduğunu belirtir. Eğer paragraf kullanmadan bir alt satıra geçmek isterseniz <br> etiketi kullanmalısınız.

HTML Tablo Oluşturma Kodu

Bir HTML tablosu <table> </table> etiketi ile tanımlanır.

Her tablo satırı <tr> </tr> etiketi ile tanımlanır.

Tablo başlığı <th> </th> etiketi ile tanımlanır. Varsayılan olarak tablo başlıkları kalın ve ortalanmış yazılacaktır.

Tablo hücreleri tanımlamak için <td> </td> etiketleri kullanılır.

Yazımızda verdiğimiz örnekler temel HTML kodlarını içermektedir. Bu kodlar ile basit bir sayfa oluşturarak HTML kodlamaya giriş yapabilirsiniz.

Từ khóa » Html Yazılım öğrenme