Birlikte Kodlayalım: Basit Bir Web Sayfası Oluşturma
Eğlenceli bir sayfa oluşturmak için adım adım talimatları izleyin
Birlikte Kodlayalım: Basit Bir Web Sayfası Oluşturma, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 2 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 2 dersten oluşur.
İlk Web Sayfanızı Oluşturma
Birlikte Kodlayalım: Basit Bir Web Sayfası Oluşturma
İlk kodlama projenize hoş geldiniz! Bu derste adım adım basit bir web sayfası oluşturacağız. HTML, CSS ve temel tasarımın parçalarının nasıl bir araya geldiğini görmek için siz de uygulayın.
Hedef: Kişisel bir profil sayfası oluşturmak.
Dosyanızı Ayarlama
1. Adım: Dosyanızı Ayarlama
Öncelikle projeniz için bir klasör oluşturalım ve bir HTML dosyası ekleyelim:
- Bilgisayarınızda MyWebPage adında yeni bir klasör oluşturun.
- Klasörün içinde
index.htmladlı bir dosya oluşturun. - Dosyayı kod düzenleyicinizde açın (örneğin Visual Studio Code).
İpucu: index.html dosya adı, bir web sitesinin ana sayfası için yaygın olarak kullanılır.
Temel Yapıyı Ekleme
2. Adım: Temel Yapıyı Ekleme
Şimdi dosyanıza temel HTML yapısını ekleyin. Bu yapı <!DOCTYPE html>, <html>, <head> ve <body> etiketlerini içerir.
Örnek:
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
</body>
</html>
Profil Bölümü Ekleme
3. Adım: Profil Bölümü Ekleme
Adınızı ve kısa bir açıklamayı görüntülemek için bir bölüm ekleyelim.
Örnek:
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
<!-- Profile Section -->
<h2>About Me</h2>
<p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>
Görsel Ekleme
4. Adım: Görsel Ekleme
Ardından <img> etiketini kullanarak bir profil fotoğrafı ekleyelim. Bir görseli proje klasörüne kaydedin ve HTML dosyanıza bağlayın.
Örnek:
<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />
Hobiler Listesi Ekleme
5. Adım: Hobiler Listesi Ekleme
<ul> ve <li> etiketlerini kullanarak hobilerinizin sırasız bir listesini oluşturun.
Örnek:
<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
<li>Reading books</li>
<li>Playing video games</li>
<li>Coding projects</li>
</ul>
Bağlantı Ekleme
6. Adım: Bağlantı Ekleme
<a> etiketini kullanarak favori web sitenize bir bağlantı ekleyin.
Örnek:
<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>
Satır İçi Stiller Ekleme
7. Adım: Satır İçi Stiller Ekleme
style özniteliğini kullanarak doğrudan HTML'nize bazı temel stiller ekleyelim.
Örnek:
<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>
Web Sayfası Projesinin Özeti
Harika İş Çıkardınız!
Tebrikler! İlk web sayfanızı adım adım oluşturdunuz. Bu projede HTML'nizi nasıl yapılandıracağınızı, içerik ekleyeceğinizi ve satır içi stillerle nasıl stil vereceğinizi öğrendiniz. Denemeye ve sayfanıza yeni bölümler eklemeye devam edin!
İpucu: Sayfanızı arkadaşlarınızla paylaşmak için GitHub Pages üzerinde barındırmayı deneyin!
Sıkça Sorulan Sorular
“Birlikte Kodlayalım: Basit Bir Web Sayfası Oluşturma” dersi ücretsiz mi?
Evet — “Birlikte Kodlayalım: Basit Bir Web Sayfası Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 2 dersten oluşur.
“Birlikte Kodlayalım: Basit Bir Web Sayfası Oluşturma” dersinde ne öğreneceğim?
Eğlenceli bir sayfa oluşturmak için adım adım talimatları izleyin HTML for Kids ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML for Kids öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 2 dersinin 1. dersidir.
“Birlikte Kodlayalım: Basit Bir Web Sayfası Oluşturma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML for Kids dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML for Kids dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Birlikte Kodlayalım: Basit Bir Web Sayfası Oluşturma
- HTML Hazine Avı