HTML ile Basit Bir Web Sayfası Nasıl Oluşturulur?

Ortak yazar: wikiHow Kadrosu

Bu wikiHow makalesi sana HTML ile basit bir web sayfasını nasıl yazacağını öğretir. HTML World Wide Web’in ana bileşenlerinden birisidir; web sayfalarının yapısını oluşturur. Web sayfanı oluşturduğunda onu bir HTML dokümanı olarak kaydedip web tarayıcında görüntüleyebilirsin. Hem Windows hem de Mac bilgisayarda bulunan basit metin düzenleyicilerle bir HTML sayfası oluşturmak mümkündür.

Makalenin 1.Kısmı: Web Sayfasını Oluşturmak

  1. 1
  2. 2
    HTML için belge türünü belirle. <!DOCTYPE html> yaz ve Enter’a bas, ardından <html> yaz ve yine Enter’a bas. Son olarak <head> yaz ve Enter’a bas. Belgenin başı aşağıdaki gibi olmalı: [1]
    <!DOCTYPE html>
    <html>
    <head>
    
  3. 3
    Web sayfan için bir sekme başlığı ekle. Bu, sayfayı açtığın zaman tarayıcı sekmesinde görünecek olan başlıktır ("Facebook" gibi). <title> yaz ve web sayfanın sekme başlığını gir, ardından da </title> yaz. Sonrasında kendi satırına </head> şeklindeki kapatma "Head" etiketini ekle. Başlık bölümü şöyle görünmeli:
    <title>Benim Web Sayfam</title>
    </head>
    
  4. 4
    Sayfanın body metninin başlangıcını belirt. Kapalı olan "Head" etiketini altına <body> yaz. Bu, sen "Body" etiketini kapatana kadar belgenin metninin geri kalanının web sayfası metni olarak algılanmasını sağlar. Kodun aşağıdaki gibi olmalı:
    <body>
    
  5. 5
    Bir sayfa başlığı oluştur. Sayfa başlığın web sitenin en üstünde görünecek olan başlıktır. Bir başlık oluşturmak için <h1> yaz, başlığını ekle ve etiketi </h1> ile kapat. Örnek:
    <h1>Sayfama Hoş Geldin!</h1>
    
  6. 6
    Devam ettikçe fazladan başlıklar ekle. <h1></h1> ve <h6></h6> etiketlerini kullanarak altı farklı başlık oluşturabilirsin. Örneğin; arka arkaya farklı boyutlarda başlıklar oluşturmak için aşağıdaki kodu yazabilirsin:
    <h1>Sayfama Hoş Geldin!</h1>
    <h2>Benim adım Bora.</h2>
    <h3>Umarım burayı beğenirsin.</h3>
    
  7. 7
    Bir paragraf yarat. Paragraf etiketleri, ayrık metin öbekleri oluşturmak için kullanılır. Bir paragrafın içine metin yerleştirmek için type in <p> yazıp metnini yaz, ardından etiketi kapatmak için </p> yaz:
    <p>Bu benim paragrafım.</p>
    
    • Tek bir başlık altında bir paragraf dizisi oluşturmak için tek seferde birden fazla paragraf satırı ekleyebilirsin.
  8. 8
    Metin rengini değiştir. Tüm metinlerin rengini, metni <font color="color">...</font> etiketleriyle çevreleyerek ve tercih ettiğin rengi "color" alanına yazdığından (tırnak işaretleriyle birlikte) emin olarak değiştirebilirsin. Örneğin; bir paragrafın rengini mavi yapmak için aşağıdakini yazarsın: [2]
    <p><font color="blue">Balinalar muhteşem yaratıklardır.</font></p>
    

    Note: the

    <font>
    
    etiketi artık kullanılmıyor. Onun yerine
    <span style="color: (your color)">...</span>
    

    bunu kullanmalısın.

    • Bu etiket grubuyla tüm metinleri (başlıklar gibi) farklı bir renge dönüştürebilirsin.
    • HTML, şaşırtıcı derecede fazla renk desteklemekte; yani farklı renk isimleri denemekten çekinme.
  9. 9
    Metni kalın, yana eğik veya altı çizgili olarak biçimlendir. Kalın metin, yana eğik metin ve altı çizili metin sırasıyla <b></b>, <i></i> ve <u></u> etiketleriyle oluşturulabilir. Alt simge (Kareköklerden önceki sayılar gibi şeyler için kullanılır) ve üst simge (sayıların karesi gibi şeyler için kullanılır) metinleri de oluşturabilirsin: [3]
    <b>Kalın metin</b>
    <i>Yana eğik metin</i>
    <u>Altı çizili metin</u>
    <sub>Alt simge metni </sub>
    <sup>Üst simge metni</sup>
    
  10. 10
    Sayfana bir resim ekle. Mevcut bir resmi web sayfana eklemek için <img src="URL"> etiketlerini kullanabilirsin. Örneğin; resmin URL’i "http://www.mypicture.com/lake" ise aşağıdakini yazarsın:
    <img src="http://www.mypicture.com/lake">
    
  11. 11
    Başka bir sayfaya bağlantı ver. <a href="link">link text</a> etiket grubunu kullanarak başka bir web sitesine bağlantı verebilirsin ki buradaki link, bağlantı vermek istediğin web sitesinin URL’idir. link text ise bağlantı olarak görev yapacak olan metindir: [4]
    <a href="https://www.facebook.com">Bu, Facebook'un web sitesine bağlantıdır.</a>.
    
  12. 12
    Web sayfasının etiketlerini kapat. HTML’deki çoğu etikette olduğu gibi (bazı HTML etiketlerinin kapatma etiketi yoktur), belgenin en üstünde bulunan <body> ve <html> etiketlerini belgenin en altına aşağıdaki kodu yazarak kapatman gerekir:
    </body>
    </html>
    
  13. 13
    Web sayfanı incele. Gerekirse <body></body> etiketleri arasında herhangi bir yere daha fazla paragraf, başlık ve metin ekleyebilirsin. Tamamlanmış bir web sayfasını şöyle görünür:
    <!DOCTYPE html>
    <html>
    
    <head>
    <title>wikiHow Hayran Sayfası</title>
    </head>
    
    <body>
    
    <h1>Sayfama Hoş Geldin!</h1>
    <p>Bu bir wikiHow hayran sayfasıdır. Rahatına bak!</p>
    
    <h2>Önemli Tarihler</h2>
    <p><i>15 Ocak 2019</i> - wikiHow’ın Doğum Günü</p>
    
    <h2>Bağlantılar</h2>
    <p>İşte wikiHow’a bir bağlantı: <a href="http://www.wikihow.com.tr">https://www.wikihow.com.tr</a></p>
    
    </body>
    </html>
    
  14. 14
    Son dakika değişiklikleri yap. Kodunda hata görürsen, devam etmeden önce bunları düzelt. HTML’in beklentilerini doğru şekilde yansıttığından emin olduktan sonra bir sonraki kısma geçebilirsin.
    Reklam

Makalenin 2.Kısmı: Web Sayfanı Kaydetmek ve Açmak

  1. 1
    Mac kullanıyorsan belgeni yalın metne dönüştür. Ekranın en üstündeki Biçim menü öğesine tıkla, ardından açılır menüde Yalın Metin Yap’a tıkla.

    Bu adım Windows’ta gerekli değildir; uygulanması da mümkün değildir.

  2. 2
    "Kaydet" menüsünü aç. Web sayfanı yazmak için yeni bir metin belgesi oluşturduğuna göre kaydetmek için Ctrl+S tuşlarına (Windows) veya Command+S tuşlarına (Mac) basabilirsin.
    • Dosya’ya, ardından da açılan menüde Farklı Kaydet’e de tıklayabilirsin. Bu hem Windows hem de Mac bilgisayarlarda çalışır.
  3. 3
    HTML belgen için bir isim gir. Belgene vermek istediğin ismi "Dosya adı" (Windows) veya "Ad" (Mac) metin kutusuna yaz.
  4. 4
    Belgenin dosya türünü değiştir. Belgeyi bir metin dosyasından bir HTML dosyasına dönüştürmen gerekir.
    • Windows - Kaydetme biçimi adlı açılır menüye tıkla, ardından Tüm Dosyalara tıkla ve dosya adının sonuna .html yaz.
    • Mac – Dosya adının sonundaki .txt’yi .html ile değiştir.
  5. 5
    Click Kaydet’e tıkla. Pencerenin el atındadır. Böylece bir HTML dosyası oluşturulur.
    • Genelde HTML dosyaları varsayılan web tarayıcında açılır.
  6. 6
    Metin düzenleyicini kapat. Bu noktada, web sayfanı görüntülemek için HTML dosyanı tarayıcında açmaya hazırsındır.
  7. 7
    HTML belgesini tarayıcında aç. Bunu yapmak için çoğu durumda HTML belgesine çift tıklayabilirsin. Belgeye çift tıklayınca hata oluşuyorsa aşağıdakini uygula:
    • Windows – Belgeye sağ tıkla, Birlikte Aç’ı seç ve tercih ettiğin tarayıcıya tıkla.
    • Mac – Belgeye bir kez tıkla, Dosya’ya tıkla, Birlikte Aç’ı seç ve tercih ettiğin tarayıcıya tıkla.
  8. 8
    Gerekirse HTML belgesini düzenle. HTML sayfanda bir hata fark edebilirsin. Bunu değiştirmek için HTML belgesinin metnini düzenleyebilirsin:
    • Windows’ta belgeye sağ tıklayabilirsin ve açılan menüde de Düzenle’ye tıklayabilirsin (bilgisayarında Notepad++ yüklüyse burada onun yerine Notepad++ ile Düzenle yazar).
    • Mac’te, seçmek için belgeye tıkladıktan sonra Dosya’ya tıklayıp Birlikte Aç’ı seçmek ve TextEdit’e tıklamak istersin. Belgeyi TextEdit’in içine de sürükleyebilirsin.
    Reklam

İpuçları

  • Sayfanda bir görseli ortaya almak istiyorsan resmin img etiketi içindeki adından sonra <class="center"> yazabilirsin (<img src="URL" class="center"> gibi).
  • Web sitene, <marquee></marquee> etiketini kullanarak yana kaydırmalı metin ekleyebilirsin; ama bazı tarayıcıların bu etiketi tanımayabileceğini unutma.
  • Çoğu kişi kodlarını yazmak ve derlemek için Notepad++ kullanır.
  • Etiketler her zaman, açık hâldeki eşlerinin tersi olacak şekilde kapatılmalıdır. Örneğin; <etiket1><etiket2>, </etiket2></etiket1> şeklinde kapatılmalıdır.
Reklam

Uyarılar

  • Kendi görsellerini, web sayfana görsel yüklemeyi düşünüyorsan Imgur veya benzeri bir platformda barındırmak en iyisidir. Başkalarının resimlerini paylaşmak telif hakkı ihlâliyle sonuçlanabilir.
Reklam

Bununla İlgili wikiHow'lar

Bu wikiHow makalesi hakkında

Ortak Yazar:
wikiHow Editör Ekibi
Bu makale editörler ve araştırmacılardan oluşan, makalenin doğruluğu ile kapsamlılığını onaylayan, eğitimli bir ekip tarafından ortaklaşa yazılmıştır.

Bu makale işine yaradı mı?

Evet
Hayır
Reklam