NASIL

Ana Sayfa

Menüler

Simge Çubuğu Menü Simgesi Akordeon Sekmeler Dikey Sekmeler Sekme Başlıkları Tam Sayfa Sekmeleri Hover Sekmeleri En İyi Gezinme Duyarlı Topnav Simgeli Gezinme Çubuğu Arama Menüsü Arama çubuğu Sabit Kenar Çubuğu Sayfa Gezinme Duyarlı Kenar Çubuğu Tam Ekran Gezinme Tuval Dışı Menü Yan Gezinti Düğmelerini Üzerine Getirin Simgeli Kenar Çubuğu Yatay Kaydırma Menüsü Dikey Menü Alt Gezinme Duyarlı Alt Gezinme Alt Kenar Gezinme Bağlantıları Sağa Hizalanmış Menü Bağlantıları Ortalanmış Menü Bağlantısı Eşit Genişlik Menü Bağlantıları Sabit Menü Kaydırmada Aşağı Kaydırma Çubuğu Kaydırmada Navbar'ı Gizle Kaydırmada Gezinme Çubuğunu Küçült Yapışkan gezinme çubuğu Görüntüdeki gezinme çubuğu Fareyle üzerine gelinen açılır menüler Açılır Menüler'i tıklayın Basamaklı Açılır Menü Topnav'da açılır menü Sidenav'da açılır menü Navbar Açılır Menüsü Alt Navigasyon Menüsü açılan Mega Menü Mobil Menü Perde Menüsü Daraltılmış Kenar Çubuğu Daraltılmış Yan Panel sayfalandırma Galeta unu Düğme Grubu Dikey Düğme Grubu Yapışkan Sosyal Bar Hap Navigasyonu Duyarlı Başlık

Görüntüler

slayt gösterisi Slayt Gösterisi Galerisi Modal Görüntüler Hafif kutu Duyarlı Görüntü Izgarası Görüntü Izgarası Sekme Galerisi Görüntü Bindirme Solması Görüntü Bindirme Slaytı Görüntü Bindirme Yakınlaştırma Görüntü Bindirme Başlığı Görüntü Bindirme Simgesi Görüntü Efektleri Siyah Beyaz Görüntü Resim Metni Resim Metin Blokları Şeffaf Resim Metni Tam Sayfa Resmi Resimdeki Form Kahraman Resmi Arka Plan Resmini Bulanıklaştır Kaydırmada Bg'yi Değiştir Yan Yana Görüntüler Yuvarlak Görüntüler avatar resimleri Duyarlı Görüntüler Merkezi Görüntüler küçük resimler Resmin Çevresindeki Kenarlık Takımla tanış Yapışkan Görüntü Bir Resmi Çevir Bir Görüntüyü Sallayın Portföy Galerisi Filtrelemeli Portföy Görüntü Yakınlaştırma Görüntü Büyüteç Camı Görüntü Karşılaştırma Kaydırıcısı Favicon

Düğmeler

Uyarı Düğmeleri Anahat Düğmeleri Bölünmüş Düğmeler Hareketli Düğmeler Solma Düğmeleri Resimdeki Düğme Sosyal Medya Düğmeleri Daha Fazla Oku Daha Az Oku Yükleme Düğmeleri İndirme Düğmeleri hap düğmeleri Bildirim Düğmesi Simge Düğmeleri Sonraki/önceki Düğmeler Gezinme'de Daha Fazla Düğme Blok Düğmeleri Metin Düğmeleri Yuvarlak Düğmeler Üst Düğmeye Kaydır

Formlar

Giriş Formu Kayıt Formu Ödeme Formu İletişim Formu Sosyal Giriş Formu Kayıt Formu Simgelerle Form Bülten Yığılmış Form Duyarlı Form Pop-up Formu satır içi formu Giriş Alanını Temizle Sayı Oklarını Gizle Metni Panoya Kopyala Hareketli Arama Arama Düğmesi Tam Ekran Arama Navbar'da Giriş Alanı Navbar'da Giriş Formu Özel Onay Kutusu/Radyo Özel Seçim Geçiş anahtarı Onay Kutusu Büyük Harf Kilidi Algıla Enter'da Tetik Düğmesi Şifre Doğrulama Şifre Görünürlüğünü Aç/Kapat Çoklu Adım Formu otomatik tamamlama Otomatik tamamlamayı kapat Yazım denetimini kapat Dosya Yükleme Düğmesi Boş Giriş Doğrulaması

filtreler

Filtre Listesi Filtre Tablosu Filtre Elemanları Filtre Açılır Menüsü Sıralama Listesi Büyü Tablosu

tablolar

Zebra Çizgili Masa Orta Masalar Tam genişlikte masa Yan Yana Masalar Duyarlı Tablolar Karşılaştırma Tablosu

Daha

Tam Ekran Video Modal Kutular Kalıcı Sil Zaman çizelgesi Kaydırma Göstergesi İlerleme Çubukları Beceri Çubuğu Aralık Kaydırıcıları Araç ipuçları Ekran Öğesinin Üzerine Gelme Açılır pencereler katlanabilir Takvim HTML İçeriği Yapılacaklar listesi yükleyiciler Yıldız Derecelendirmesi Kullanıcı oyu Bindirme Etkisi İletişim Cips kartlar Flip Kart Profil Kartı Ürün Kartı uyarılar Çağırmak notlar Etiketler çevreler Stil İK Kupon Liste Grubu Madde İşaretsiz Liste Duyarlı Metin Kesme Metni parlayan metin Sabit Altbilgi Yapışkan Öğe Eşit Yükseklik düzeltme Duyarlı Şamandıralar snack bar Tam Ekran Penceresi Kaydırma Çizimi Pürüzsüz Kaydırma Gradyan Bg Parşömeni Yapışkan Başlık Kaydırmada Başlığı Küçült Fiyatlandırma Tablosu Paralaks En Boy Oranı Duyarlı Iframe'ler Beğen/Beğenme arasında geçiş yap Gizle/Göster arasında geçiş yap Karanlık Modu Aç/Kapat Metni Aç/Kapat Sınıfı Değiştir Sınıf Ekle Sınıfı Kaldır Aktif Sınıf Ağaç görünümü Mülkü Kaldır Çevrimdışı Algılama Gizli Öğeyi Bul Web sayfasını yeniden yönlendir Yakınlaştır Vurgulu Çevirme Kutusu Dikey Ortala DIV'deki Orta Düğme Hover'da Geçiş oklar şekiller İndirme: {link Tam Yükseklik Elemanı Tarayıcı penceresi Özel Kaydırma çubuğu Kaydırma çubuğunu gizle Kaydırma Çubuğunu Göster/Zorla Cihaz Görünümü İçerik Düzenlenebilir Kenarlık Yer Tutucu Rengi Metin Seçimi Rengi madde işareti rengi Dikey çizgi bölücüler Simgeleri Canlandır Geri sayım saati Daktilo Yakında Sayfası Sohbet Mesajları Açılır Sohbet Penceresi Bölünmüş ekran referanslar Bölüm Sayacı Tırnak Slayt Gösterisi Kapatılabilir Liste Öğeleri Tipik Cihaz Kesme Noktaları Sürüklenebilir HTML Öğesi JS Medya Sorguları Sözdizimi Vurgulayıcı JS Animasyonları JS Dizi Uzunluğu JS Üstelleştirme JS Varsayılan Parametreleri Geçerli URL'yi Al Geçerli Ekran Boyutunu Al Iframe Öğelerini Alın

İnternet sitesi

Ücretsiz Web Sitesi Oluşturun Web Sitesi Yap Statik Bir Web Sitesi Yapın Bir Web Sitesi Yapın (W3.CSS) Bir Web Sitesi Yapın (BS3) Bir Web Sitesi Yapın (BS4) Bir Web Sitesi Yapın (BS5) Bir Web Sitesi Oluşturun ve Görüntüleyin Bağlantı Ağacı Web Sitesi Oluşturun Portföy Oluştur Özgeçmiş Oluştur Restoran Web Sitesi Yapın Bir İşletme Web Sitesi Yapın WebKitabı Yap Merkez Web Sitesi İletişim Bölümü Sayfa Hakkında Büyük Başlık Örnek Web Sitesi

Kafes

2 Sütun Düzeni 3 Sütun Düzeni 4 Sütun Düzeni Genişleyen Izgara Liste Tablosu Görünümü Karışık Sütun Düzeni Sütun Kartları Zig Zag Düzeni Blog Düzeni

Google

Google Grafikleri Google Yazı Tipleri Google Yazı Tipi Eşleştirmeleri Google Analytics Kurulumu

dönüştürücüler

Ağırlığı Dönüştür Sıcaklığı Dönüştür Uzunluğu Dönüştür Dönüştürme Hızı

Blog

Geliştirici İşi Alın Bir Ön Uç Geliştiricisi Olun.

Nasıl Yapılır - Ücretsiz Bir Web Sitesi Oluşturun


W3Schools Spaces ile web sitenizi oluşturun ve barındırın.

Birkaç tıklamayla ücretsiz web sitenizi oluşturmaya başlayın.

İhtiyacınız olan her şey tarayıcıda.

Kullanımı kolaydır - deneyin!

Ücretsiz başlayın »

W3Schools Spaces ile İlk Web Sitenizi Oluşturun

W3Schools Spaces , kod oluşturup deneyebileceğiniz ve kendi web sitenizi barındırabileceğiniz kişisel bir yerdir.

W3Schools Spaces ile HTML, CSS ve JavaScript ile oluşturabilirsiniz.

Kodu doğrudan tarayıcınızda düzenleyin.

Dosyalarınızı ve resimlerinizi yükleyin ve barındırın.

Çevrimiçi varlığınızı bugün büyütmeye başlayın!


Neden W3Schools Spaces ile İnşa Etmelisiniz?

Spaces, web geliştiricileri tarafından web geliştiricileri için yapılır.

  1. Arayüz basit ve kullanımı kolaydır.
  2. Dosyalarınızı doğrudan tarayıcıda barındırın ve düzenleyin.
  3. Ücretsiz şablonlar.

Başlamak ücretsizdir ve kredi kartınızı girmeniz gerekmez.


Kodu Düzenleme ve Önizleme

Editörün kullanımı kolaydır - bu, en önemli şeylere odaklanmanıza yardımcı olur.

Farklı önizleme alternatifleriyle sitenizin yanıt verebilirliğini kontrol edin.

Değişiklikleri sitenizde önizleyin, canlı yayında!


Her Yerden İnşa Edin

Dosyalarınızı ve görüntülerinizi bulutta barındırın.

Klasörlerle bir yapı oluşturarak düzeninizi koruyun.

İhtiyacınız olan her şey tarayıcıda.


Ücretsiz Şablonlar

Duyarlı web sitesi şablonlarımıza göz atın ve kullanın.

Bunları değiştirin, kaydedin, paylaşın ve projelerinizde kullanın.

The templates are powered by W3.CSS


What Do I Need to Know to Get Started?

HTML, CSS and JavaScript are the foundational languages to build a website.

  1. Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
  2. Learn HTML »
  3. Style with CSS. The next step is to learn CSS, to set the layout of your web page with beautiful colors, fonts, and much more.
  4. Learn CSS »
  5. Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.
  6. Learn JavaScript »

Do not worry if you do not know how to code. The most important thing is to get hands on, early on. Learning how to code is best done with getting practical. Start to build something today!


Lets Get Started in a Few Steps

Do you already have a W3Schools Account? If so, skip the first step


Step One: Sign Up For an Account

To be able to use Spaces you need to sign up and get your account.

Lets get you set up!

Go to - Click "Sign up" and enter your email and password, then click the "Sign up for free" button.

Remember to validate your account in your email. Check the spam filter if you cannot find the validation email in your inbox.

Get more information about how to sign up in our article - How to sign up


Step Two: Start with a template or HTML skeleton

Go to

Select one of the options and click the "Continue" button.

Do not worry too much about this decision. You can reset your Space and start over again whenever you want.


Step Three: Give your space a name

Personalize your Space by giving it an amazing name.

You can not use special letters in the name, such as (#, ! or :). The only exception is dash ( - )

The name will be the link that you share with others to see your site. For example: yourname.w3spaces.com


Step Four: Enter your space

Great job! you made it to the dashboard.

In the dashboard you get an overview of your spaces and usage.

Enter your space and its File Overview by clicking somewhere on the space's row or click the button with the three dots to the right inside the row.

You can only have one space with the free plan. However, you can always upgrade to get more spaces.


Step Five: Edit code or upload files

This is where the magic happens!

Start to edit code or upload files

  • Edit code by clicking on the "Pen icon" to the right of the file that you want to edit.
  • Create new files by clicking on the "New file" button.
  • Upload files by clicking on the "Upload files" button.

Step Six: Publish your site and share it with someone

This is the start of building your online presence.

Learn, test, build, and go live with your space.

Create your website and share it with others.

Note: Your space name with the .w3spaces.com extension is your shareable link. Read more about how to share your space in this article How can I share my space?


W3Schools Spaces

W3Schools Alanları

Build your own website with W3Schools Spaces.

Get Started for Free