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

Bu How.com.vn 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.

Kısım 1

Kısım 1 / 2:

Web Sayfasını Oluşturmak

Makaleyi İndir

1
Bir metin düzenleyici aç. Windows bir bilgisayarda genelde Not Defterini veya Notepad++’ı kullanırsın. Mac kullanıcıları ise TextEdit’i kullanır:
- Windows - Başlat’ı
  aç, {{kbd|not defteri} veya notepad++ yaz ve pencerenin en üstünde Not Defteri’ne veya Notepad++’a tıkla.
- Mac - Spotlight’a
  tıkla, textedit yaz ve sonuçların en üstünde TextEdit’e çift tıkla.
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]XKaynağı araştır}
```
<!DOCTYPE html><html><head>
```
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
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
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
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
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
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]XKaynağı araştır}
```
<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
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]XKaynağı araştır}
```
<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
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
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]XKaynağı araştır}
```
<a href="https://www.facebook.com">Bu, Facebook'un web sitesine bağlantıdır.</a>.
```
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>
```

How.com.vn Türkçe: Step 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>How.com.vn Hayran Sayfası</title></head><body><h1>Sayfama Hoş Geldin!</h1><p>Bu bir How.com.vn hayran sayfasıdır. Rahatına bak!</p><h2>Önemli Tarihler</h2><p><i>15 Ocak 2019</i> - How.com.vn’ın Doğum Günü</p><h2>Bağlantılar</h2><p>İşte How.com.vn’a bir bağlantı: <a href="http://www.wikihow.com.tr">https://www.wikihow.com.tr</a></p></body></html>

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

Kısım 2

Kısım 2 / 2:

Web Sayfanı Kaydetmek ve Açmak

Makaleyi İndir

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
"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.
Belgene vermek istediğin ismi "Dosya adı" (Windows) veya "Ad" (Mac) metin kutusuna yaz.
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
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.
Bu noktada, web sayfanı görüntülemek için HTML dosyanı tarayıcında açmaya hazırsındır.
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
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