HTML, CSS ve JS'yi Çevrimiçi çalıştırın

Web sayfalarının tamamını HTML, CSS ve JavaScript ile tek bir düzenleyicide yazın.

giriiş

Modern web sayfaları üç temel teknolojiyle oluşturulmuştur: Yapı için HTML, stil için CSS ve etkileşim için JavaScript. Çevrimiçi kod çalıştırıcımız, tek bir düzenleyicide üçünü de destekler; eksiksiz bir web sayfası yazın ve anında oluşturulduğunu görün.

HTML, CSS ve JS Birlikte Nasıl Yazılır?

HTML Code Runner'ımızda, satır içi CSS ve JavaScript içeren eksiksiz bir HTML belgesi yazarsınız. İşte birlikte nasıl çalışıyorlar:

  • HTML — Sayfanızın yapısını ve içeriğini tanımlayın
  • CSS — dosyasındaki
  • JavaScript —

Örnek: Birleştirilmiş HTML, CSS ve JavaScript

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 2rem; }
    button { padding: 0.8rem 2rem; font-size: 1.1rem; cursor: pointer; }
    #counter { font-size: 3rem; margin: 1rem; color: #6C5CE7; }
  </style>
</head>
<body>
  <h1>Click Counter</h1>
  <div id="counter">0</div>
  <button onclick="count()">Click Me</button>
  <script>
    let n = 0;
    function count() {
      n++;
      document.getElementById('counter').textContent = n;
    }
  </script>
</body>
</html>

Neler İnşa Edebilirsiniz?

  • Doğrulamalı etkileşimli formlar
  • Animasyonlu açılış sayfaları
  • Veri görselleştirme kontrol panelleri
  • Oyun prototipleri
  • CSS sanatı ve animasyonları
  • API bağlantılı uygulamalar (harici verileri getir)

Çoklu Dil Koduna İlişkin İpuçları

  • FOUC'u (stilsiz içeriğin parlaması) önlemek için CSS'yi içine yerleştirin
  • JavaScript'i sonuna ekleyin veya defer komutunu kullanın
  • JavaScript hatalarında hata ayıklamak için konsol çıktı panelini kullanın
  • Tarayıcı pencerenizi yeniden boyutlandırarak duyarlı tasarımları test edin

Sıkça Sorulan Sorular

Evet. CDN'lerden harici kaynakları yüklemek için CSS için bağlantı etiketlerini ve src özniteliklerine sahip komut dosyası etiketlerini kullanın.

Evet. Bootstrap CDN bağlantısını HTML başlık bölümünüze ekleyin; tüm Bootstrap sınıfları önizlemede çalışacaktır.

Evet. jQuery CDN komut dosyası etiketini ekleyin ve kodunuzda jQuery sözdizimini kullanabilirsiniz.

İlgili Kaynaklar