Bir Kahve Dükkanı Yer Bul Web Sitesi Yapın: 9 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-02-01 14:42

Bu Eğitilebilir Kitapta, size yakınınızdaki kafeleri gösteren basit bir web sitesinin nasıl yapıldığını, Google Haritalar, HTML ve CSS Kullanarak göstereceğim.

Gereçler

Bir bilgisayar

Bir metin editörü (Atom kullanıyorum)

Wi-Fi bağlantısı

Adım 1: Bir Metin Düzenleyici Seçin

Buradan indirilebilen Atom kullanıyorum. İndirildikten sonra açıldığında yeni bir proje yapar

Adım 2: Yeni Projenizi Oluşturun

1. Atom'u aç
2. Dosyayı bul
3. Dosya altında yeni'yi tıklayın
4. sol altta (mac) yeni bir klasör oluşturmak için bir düğme olacak
5. klasörünüzü "Harita web sitesi" olarak adlandırın
6. Sağ alttaki aç'a basın

3. Adım: Index.html'nizi Oluşturun

1. Klasörünüze yeni bir dosya ekleyin (Atomda klasörü sağ tıklayın ve yeni'ye basın)
2. Bu dosyayı 'Index.html' olarak adlandırın
3. Bu temel HTML yapısını ekleyin, Bu her HTML projesinde kullanılır:

4. Adım: Haritanızı Alın

1. Google haritalarını buradan ziyaret edin: Google Haritalar
2. Kahve ara
3. genel bölgenizdeki tüm kahve dükkanlarını almalısınız
4. kahvenin yanındaki üç satıra tıklayın
5. paylaşımı bul veya haritayı göm
6. gömme haritasını seç
7. Haritanın boyutunu seçin (Büyük kullandım) ve konumunuzu kesinleştirin
8. HTML'yi kopyala'ya basın

Adım 5: Web Sitesine Ekle

1. HTML dosyasına geri dönün.
2. iki '' etiketi arasına şu kodu ekleyin:

'

YAKININIZDAKİ KAHVE MAĞAZALARI

'GOOGLE MAPS'TAN YERLEŞTİRİLMİŞ KOD'

'

6. Adım: Önizleme

Bu birinci kısım tamamlandı!

dosyayı kaydedin ve bilgisayarınızda bulun, çift tıklayın ve ön izleme için varsayılan tarayıcınızda açılacaktır.

7. Adım: Daha İyi Görünmesini Sağlayın

1. İki '' etiketinin arasına 'Yakınımdaki kahve dükkanları' ekleyin
2. 'Index.html' oluşturduğunuz şekilde yeni bir dosya ekleyin, ancak buna 'Style.css' adını verin
3. HTML dosyanıza geri dönün, bu kodu başlığınızın üstüne yazın,"
5. Google görsellere gidin ve bir fincan kahvenin şirin bir küçük resmini indirin
6. Resmi, dosyalarımızın geri kalanını içeren klasöre ekleyin
7. CSS dosyasına şu kodu yazın: 'body{
8. arka plan resmi: url(RESİM ADI);
9. arka plan boyutu: kapak;
10. }'

Adım 8: Daha İyi Görünmesini Sağlayın Pt2

1. şimdi kaydedip önizlersek, web sitelerinin arka planının artık kahve fincanlarımızla döşendiğini görebiliriz
2. Maalesef başlığımızı okumak zor
3. Bu nedenle, CSS'de 'gövde {}' altına şu kodu ekleyin: h1{
4. arka plan rengi=rgb(255, 255, 255);
5. yazı tipi boyutu=40 piksel;
6. }

Adım 9: REVİZYON

Bu kadar! Sen bittin. HTML, CSS ve gömülü kodun temellerini öğrendiniz, Tebrikler. Kodu zevkinize uyacak şekilde düzenleyebilir ve istediğiniz her şeyin bir haritasını görüntülemesini sağlayabilirsiniz. O andan itibaren web sitenizi kurma yolculuğunuza devam edebilir ve sonsuza kadar gelişebilirsiniz.