Bilişim Teknolojileri Ödevi İçin Basit Bir Web Sitesi Nasıl Kodlanır?
Bilişim teknolojileri ödevi için basit bir web sitesi kodlamam gerekiyor ama nereden başlayacağımı bilmiyorum. Temel adımları ve kodları nasıl bulabilirim?
🚀 Bilişim Teknolojileri Ödevi İçin Basit Bir Web Sitesi Nasıl Kodlanır?
Web sitesi kodlamak, ilk başta karmaşık görünse de aslında oldukça eğlenceli ve öğretici bir süreçtir. Bu rehberde, bilişim teknolojileri ödeviniz için basit bir web sitesini adım adım nasıl kodlayacağınızı anlatacağım.
💡 İhtiyaçlar ve Hazırlık
💻 Metin Editörü: Kod yazmak için bir metin editörüne ihtiyacınız olacak. Notepad++, Sublime Text, VS Code gibi ücretsiz editörleri kullanabilirsiniz.
📁 Temel HTML Bilgisi: HTML'in ne olduğunu ve temel etiketlerini (örneğin, <html>, <head>, <body>, <h1>, <p>) bilmeniz gerekiyor.
🎨 Temel CSS Bilgisi (İsteğe Bağlı): Web sitenizi güzelleştirmek için CSS kullanabilirsiniz, ancak zorunlu değil.
🧱 Adım 1: HTML Yapısını Oluşturma
İlk olarak, web sitemizin temel HTML yapısını oluşturalım.
Aşağıdaki kodu bir metin editörüne kopyalayın ve "index.html" olarak kaydedin:
🧱 <body>: Web sitemizin içeriğinin yer aldığı bölümdür (metinler, resimler, bağlantılar vb.).
📝 <h1>: Ana başlık elementidir.
📃 <p>: Paragraf elementidir.
🎨 Adım 2: İçeriği Ekleme
Şimdi web sitemize daha fazla içerik ekleyelim.
Bilişim Ödevi Web Sitesi
Bilişim Teknolojileri Ödevi
Bu web sitesi, bilişim teknolojileri dersi için hazırlanmıştır.
Hakkımda
Ben [Adınız Soyadınız], bilişim teknolojileri öğrencisiyim.
İletişim
Bana [eposta adresiniz] adresinden ulaşabilirsiniz.
📝 <h2>: Alt başlık elementidir.
✍️ İçerik: Kendi bilgilerinizi ekleyerek web sitenizi kişiselleştirin.
✨ Adım 3: CSS ile Stil Verme (İsteğe Bağlı)
Web sitenize biraz stil eklemek için CSS kullanabilirsiniz. "style.css" adında bir dosya oluşturun ve aşağıdaki kodu ekleyin:
css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
p {
line-height: 1.6;
}
Ardından, HTML dosyanızın <head> bölümüne aşağıdaki satırı ekleyerek CSS dosyanızı bağlayın:
🎨 font-family: Yazı tipini belirler.
🌈 background-color: Arka plan rengini belirler.
📏 margin/padding: Kenar boşluklarını ve iç boşlukları ayarlar.
✍️ color: Metin rengini belirler.
📏 line-height: Satır yüksekliğini ayarlar.
🔗 Adım 4: Bağlantılar Ekleme
Web sitenize bağlantılar ekleyerek diğer sayfalara veya web sitelerine yönlendirme yapabilirsiniz.
Google'a Git
🔗 <a href="URL">: Bağlantı oluşturur. "URL" yerine gitmek istediğiniz adres yazılır.
🖼️ Adım 5: Resim Ekleme
Web sitenize resim eklemek için <img> etiketini kullanabilirsiniz.
🖼️ <img src="resim.jpg">: Resim ekler. "resim.jpg" yerine resminizin adını yazın.
📝 alt="Resim Açıklaması": Resim görüntülenemediğinde gösterilecek metni belirtir.
✅ Sonuç
Bu adımları takip ederek basit bir web sitesi oluşturabilirsiniz. Ödevinizde kullanacağınız bilgileri ve içeriği kendi ilgi alanlarınıza göre özelleştirmeyi unutmayın. Başarılar!
