HTML Kodlama Nasıl Öğrenilir?
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 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:
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.
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:
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.
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 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.
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.
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.
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.
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.
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 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’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 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>
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>
<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
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.
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 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.
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.
.TR öncelikli kayıtlar için son gün, 7 Ağustos 2024 olarak güncellenmiştir. Bunun akabinde süreçle ilgili…
WooCommerce, WordPress üzerine kurulu güçlü ve açık kaynaklı bir e-ticaret platformudur. Doğru WooCommerce eklentileriyle çevrimiçi…
Yedekleme, WordPress web sitenizi siber saldırılardan ve kritik hatalardan korumanın önemli bir parçasıdır. Bu yüzden…
Her WordPress web sitesi aşağıdaki giriş URL'lerine sahiptir: websiteniz.com/wp-admin websiteniz.com/wp-login Giriş yolları tüm web siteleri…
İnternette gezinirken büyük çoğunuz, "this site can’t provide a secure connection (bu site güvenli bağlantı…
ChatGPT'nin Kasım 2022'de piyasaya sürülmesinden bu yana teknoloji gündeminde en çok konuşulan şey yapay zeka…
View Comments
kodlama hakkında bilgim sıfır olduğu için bir fikrim yok.