Bu makalede, basit kodlama örneklerini inceleyeceğiz.
Belki de başlangıç seviyesinde bir programcısınız veya geliştirme dünyasına yeni adım atmak isteyen biri olabilirsiniz. Basit kodlama örnekleri, temel anlamda nasıl kod yazıldığını anlamak ve pratik yapmak için harika bir yoldur. İster HTML’de tasarım yapmak, ister CSS kullanarak görünümü değiştirmek veya JavaScript ile etkileşim eklemek isteyin, bu makale sizin için bir başlangıç noktası olabilir.
Bir başka deyişle, bu makalede farklı programlama dillerindeki örnekleri inceleyecek ve kodlama konusundaki becerilerinizi geliştirmenize yardımcı olacak kullanışlı bilgiler sunacağız. HTML, CSS ve JavaScript gibi temel dilleri ele alacak ve her bir dilde birkaç örnek sunacağız.
| Dil | Örnek | Açıklama |
|---|---|---|
| HTML | HTML ile ilgili basit bir kod örneği | Bir HTML elementinin nasıl oluşturulacağını ve çalıştırılacağını gösterir. |
| CSS | CSS ile ilgili basit bir kod örneği | Bir HTML elementinin nasıl stilize edileceğini ve görünümünün nasıl değiştirileceğini gösterir. |
| JavaScript | JavaScript ile ilgili basit bir kod örneği | Web sayfasına nasıl etkileşim ekleyebileceğinizi ve dinamik özellikler kazandırabileceğinizi gösterir. |
- HTML örneği: Bir HTML elementinin nasıl oluşturulacağını gösteren basit bir örnek.
- CSS örneği: Bir HTML elementinin nasıl stilize edileceğini gösteren basit bir örnek.
- JavaScript örneği: Web sayfasına nasıl etkileşim ekleyebileceğinizi gösteren basit bir örnek.
Bu örnekler size temel bir anlayış sağlayacak ve daha karmaşık projelere başlamak için iyi bir temel oluşturacaktır. Ayrıca, bu örnekleri kendiniz deneyerek pratik yapmanız da önemlidir. Kodlama becerileriniz geliştikçe, daha ileri seviye projeler yapmak için kendinize güven duyacaksınız.
Her bir örnek hakkında daha fazla ayrıntıyı ilgili bölümlerde bulabilirsiniz. Şimdi, temel dillerdeki basit kodlama örneklerine geçelim ve yolculuğumuza başlayalım!
HTML
HTML, Hypertext Markup Language’ın kısaltmasıdır ve web sayfalarının oluşturulması için temel bir yapıdır. HTML, web tarayıcıları tarafından anlaşılabilen bir dildir ve internet üzerindeki içeriğin düzenlenmesinde kullanılır.
HTML ile ilgili basit bir kod örneği aşağıdaki gibidir:
| HTML Kodu | Açıklama |
|---|---|
| <!DOCTYPE html> <html> <head> <title>Web Sayfası Başlığı</title> </head> <body> <h1>Merhaba Dünya!</h1> </body> </html> | Bu HTML kodu, basit bir web sayfasını temsil eder. <h1> etiketi ile "Merhaba Dünya!" metni başlık olarak görüntülenir. |
Bu kodu çalıştırmak için, bir metin düzenleyicisi kullanarak bir dosya oluşturun ve içerisine yukarıdaki kodu yapıştırın. Dosyayı “.html” uzantısı ile kaydedin ve web tarayıcısında açın. Web sayfasının içeriği tekstil düzenleyicisinde olduğu gibi görüntülenecektir.
HTML kodunun yapısı anlaşılması kolaydır ve çeşitli etiketler kullanılarak içerik düzenlenir. Başlık etiketleri <h1> ile <h6> arasında sıralanır ve farklı boyutlarda başlıklar oluşturur. Paragraf etiketi <p> kullanılarak metinlerin gruplandırılması sağlanır. Bağlantılar için <a> etiketi kullanılır ve resimler <img> etiketi ile eklenir.
HTML, web sayfalarının temel yapısıdır ve diğer programlama dilleri ve teknolojileriyle birlikte kullanılarak web sitelerinin oluşturulmasına imkan sağlar. HTML’in temel yapısını öğrenerek, web sayfalarınızı istediğiniz gibi düzenleyebilirsiniz.
CSS
CSS, yani Cascading Style Sheets, web sitelerinde görünümü düzenlemek için kullanılan bir kodlama dilidir. CSS kullanarak HTML elementlerinin rengini, boyutunu, şeklini ve diğer birçok özelliğini değiştirmek mümkündür. Bu bölümde, CSS ile ilgili basit bir kod örneğini ve nasıl çalıştırılacağını inceleyeceğiz.
Renk Değiştirme
Renk değiştirme işlemi, CSS kullanılarak HTML öğelerinin renklerinin değiştirilmesini sağlar. Bu kod örneği, basit bir şekilde HTML elementinin rengini değiştirmeyi göstermektedir. Renk değiştirme işlemi için aşağıdaki örneği kullanabilirsiniz:
<html><head><style>h1 { color: red;}</style></head><body> <h1>Merhaba Dünya!</h1></body></html>
Yukarıdaki kod açıklamasında, “<style>” etiketi kullanılarak CSS stilinin HTML belgesine dahil edildiği görülmektedir. Burada, “h1” öğesinin renginin “red” (kırmızı) olarak belirtildiği farkedilmektedir. Bu durumda, “Merhaba Dünya!” başlığı kırmızı renkte görünecektir.
Bu basit kod örneği, CSS kullanarak HTML elementinin rengini değiştirmenin temelini göstermektedir. Renk değerlerini istediğiniz renk kodlarıyla değiştirerek farklı renklerdeki öğeler oluşturabilirsiniz. CSS kullanarak renklerinizi kolayca özelleştirebilirsiniz.
Açık Mavi
Açık mavi rengini bir HTML elementinin arka plan rengi olarak kullanmak istiyorsanız, CSS kullanarak kolayca yapabilirsiniz. İşte bir kod örneği:
Bu metin açık mavi arka plana sahip olacak.
Yukarıdaki kodda, bir CSS stil tanımladık ve .acik-mavi sınıfını arka plan rengi olarak “lightblue” yani açık mavi olarak ayarladık. Ardından, p elementine bu sınıfı ekleyerek background renginin açık mavi olmasını sağladık.
Bu basit örneği kullanarak, HTML elementlerinin rengini dilediğiniz gibi değiştirebilirsiniz. Örneğin, başlık elementi veya düğme elementi gibi farklı HTML elementlerine değişiklikler yapabilirsiniz. CSS kullanarak renk değiştirme, web sayfalarının görsel tasarımında önemli bir rol oynar ve istediğiniz renklere kolayca uygulanabilir.
Koyu Yeşil
Koyu yeşil olarak bir HTML elementinin rengini değiştirmek için CSS kullanabilirsiniz. Bu basit bir kod örneği ile nasıl yapabileceğinizi göstereceğiz. İşte adımlar:
- HTML dosyanızı açın ve renk değiştirmek istediğiniz elementi seçin.
- Elementin class veya id özelliğini belirleyin.
- CSS dosyanıza gidin ve elementin sınıf veya kimliğine göre bir seçici oluşturun.
- Oluşturduğunuz seçiciye koyu yeşil rengi belirtin. Örneğin:
.my-element { color: darkgreen; }veya
#my-element { color: darkgreen; }
Ardından, HTML dosyanızda belirlediğiniz elementin class veya id özelliğini kullanın ve görsel olarak koyu yeşil olarak değiştiğini göreceksiniz. Bu basit kod örneği ile elementlerin rengini kolayca değiştirebilirsiniz.
Görünürlük Ayarı
Görünürlük ayarı, CSS kullanarak bir HTML elementinin ne zaman görüleceğini veya görünmez olacağını belirlemek için kullanılan bir koddır. Bu özellik, bir web sayfasında belirli bir elementin görünürlüğünü kontrol etmek veya belirli bir eylem gerçekleştirildiğinde elementi göstermek/gizlemek için kullanılabilir.
Basit bir örnek olarak, bir düğmenin tıklandığında bir metni görünür hale getirmek veya başka bir elementin görünürlüğünü değiştirmek için CSS kullanabiliriz. Bu işlemi yapmak için öncelikle CSS’de “display” özelliğini kullanırız. “display” özelliği, bir elementin görünürlük durumunu belirlemek için kullanılan bir özelliktir.
Aşağıda, bir HTML elementinin görünürlüğünü belirlemek için kullanılan basit bir CSS kodu örneği bulunmaktadır:
<style>#element {display: none;}</style><div id="element">Bu element başlangıçta görünmez olacak.</div><button onclick="myFunction()">Görünür yap</button><script>function myFunction() {document.getElementById("element").style.display = "block";}</script>
Yukarıdaki kod örneğinde, “display: none;” komutu ile “element” adlı bir div elementi başlangıçta görünmez hale getirilir. Daha sonra, “myFunction” adlı bir JavaScript fonksiyonunu tetiklemek için bir düğme eklenir. Bu fonksiyon, “element” adlı div elementinin görünürlüğünü “block” olarak ayarlayarak elementi görünür hale getirir.
Bu basit örnek, CSS kullanarak bir HTML elementinin görünürlüğünü ayarlamak için bir fikir vermektedir. Bu özelliği kullanarak web sayfalarında dinamik ve etkileşimli içerik oluşturabilirsiniz.
JavaScript
JavaScript, web sayfalarını interaktif hale getiren ve dinamik özellikler ekleyen bir programlama dilidir. Bu nedenle, HTML ve CSS ile birlikte en önemli web teknolojilerinden biridir. JavaScript kullanarak, kullanıcıların etkileşimde bulunabileceği ve sayfa içindeki öğeleri değiştirebileceği birçok işlevi gerçekleştirebilirsiniz.
JavaScript’le ilgili basit bir kod örneği aşağıdaki gibidir:
<script> function greet() { var name = prompt("Adınız nedir?"); var message = "Merhaba, " + name + "! Hoş geldiniz."; document.getElementById("greeting").innerHTML = message; }</script><button onclick="greet()">Tıkla</button><p id="greeting"></p>
Bu kod örneğinde, sayfa içinde bir buton ve bir boş paragraf bulunmaktadır. Butona tıklandığında, “Adınız nedir?” sorusuyla birlikte bir giriş kutusu açılır ve JavaScript prompt() fonksiyonu aracılığıyla kullanıcıdan bir isim girmesi istenir. Ardından, girilen ismin “Merhaba, [isim]! Hoş geldiniz.” şeklindeki bir mesajla değiştirilip, boş paragrafın içine yerleştirilmesi sağlanır.
Bu örnekte, JavaScript’in kullanımının basit bir şekilde gösterildiğini görebilirsiniz. Bu sayede, kullanıcıyla etkileşimde bulunan ve dinamik içerik oluşturan web siteleri geliştirebilirsiniz.
Hesaplama
=JavaScript kullanarak basit bir hesaplama yapmak için aşağıdaki kod örneğini kullanabilirsiniz:
<!DOCTYPE html><html><head><script>function hesapla() { var sayi1 = parseInt(document.getElementById("sayi1").value); var sayi2 = parseInt(document.getElementById("sayi2").value); var sonuc = sayi1 + sayi2; document.getElementById("sonuc").innerHTML = "Sonuç: " + sonuc;}</script></head><body><label for="sayi1">Sayı 1:</label><input type="number" id="sayi1"><br><label for="sayi1">Sayı 2:</label><input type="number" id="sayi2"><br><button onclick="hesapla()">Hesapla</button><p id="sonuc"></p></body></html>
Bu kod örneği, kullanıcının sayıları girdiği bir HTML formu kullanarak basit bir toplama işlemi yapar. JavaScript fonksiyonu olan “hesapla()” sayıları alır, toplama işlemi yapar ve sonucu HTML içindeki “sonuc” id’li paragrafa yazdırır.
Bu örnek, JavaScript’i nasıl kullanacağınızı anlamanıza yardımcı olacak ve temel hesaplama işlemlerini yapabilmek için iyi bir başlangıç noktası olacaktır.
Buton Olayı
Buton olayı, JavaScript kullanarak bir butona tıklandığında bir işlem yapmak için basit bir kod örneğidir. Bir web sayfasında bir butonun nasıl etkileşimli bir şekilde kullanılabileceğini gösterir. Butona tıklandığında, belirli bir işlevi gerçekleştirmek için JavaScript kodunu çalıştırabiliriz. Bu, kullanıcıların web sitesi üzerinde belirli bir eylemi gerçekleştirmelerini sağlamak için kullanışlıdır.
Aşağıda, bir butona tıklandığında bir metin kutusuna “Hello World!” yazdıran basit bir kod örneği bulunmaktadır:
<!DOCTYPE html><html><head><script>function helloWorld() { document.getElementById("mesaj").value = "Hello World!";}</script></head><body><input type="text" id="mesaj" value=""><button onclick="helloWorld()">Click Here</button></body></html>
Bu örnekte, JavaScript’de bir helloWorld() fonksiyonu tanımlanır. Bu fonksiyon, document.getElementById("mesaj").value kullanarak HTML içinde yer alan bir öğenin değerini değiştirir. Butona tıklandığında, onclick özelliği, helloWorld() fonksiyonunu çağırır ve metin kutusuna “Hello World!” yazılır.
Buton olayı, web sayfalarının etkileşimi arttırmak ve kullanıcılara daha fazla kontrol sağlamak için kullanılır. Bu özellik, bir butona tıklandığında gerçekleştirilecek işlemleri belirlemek için JavaScript kodu kullanabilme becerisini sağlar.
