Kendi web siteni nasıl oluşturabilirim?

HyperText Markup Language (HTML) kullanılarak basit bir web sitesi tasarlanabilir. Komut dosyaları, kullandığınız işletim sistemine bağlı olarak Not Defteri'nde veya bir metin belgesinde yazılabilir. Web sitesi oluşturmak için kullanılan çok temel araçlar, HTML etiketlerinin ve HTML öğelerinin kullanılmasıyla başlar . Birincisi genellikle içeriğin birimi hakkında bilgi iletmek için kullanılır ve ikincisi de web sayfası için araçları biçimlendirmek için kullanılır. Kodlama yaparken, HTML öznitelikleri ve değerleri içerik için yerleşim, yükseklik vb. Bilgileri sağlamak için kullanılır. Bunlara ek olarak, canlı bir web sayfası oluşturmak için renk etiketleri, resim etiketleri ve HTML bölümü etiketleri de kullanılabilir.

Kendi web siteni nasıl oluşturabilirim?

HTML nedir?
Gereksinimler
- Örnek 1:
HTML Etiketleri
HTML Öğeleri
Hatırlanacak Temel HTML Etiketleri
- Örnek 2
HTML Nitelikleri ve Değerleri
- Örnek 3
Renk etiketleri
- Örnek 4
Metin biçimlendirme
- Örnek 5
HTML Bölümü Etiketleri
- Örnek 6
Resim Etiketleri
- Örnek 7
Etiketleri Bağlama
- Örnek 8
Tablo Etiketleri
- Örnek 9
HTML Çerçeve Etiketleri
- Örnek 10
WYSIWYG Yazılım

Bir web sitesi oluştururken, birçok kişi genellikle yardım için bir web tasarımcısı almayı seçer. Ancak, basit bir web sitesini kendiniz nasıl yapacağınızı öğrenmenin basit yolları vardır ve bu makalede anlatılacaktır.

HTML nedir?

Bir web sitesi oluşturmak için HTML'nin temellerini öğrenmeniz gerekir. HTML, World Wide Web'de köprü metni belgeleri oluşturmak için kullanılan programlama dili olan HyperText Markup Language'in kısaltmasıdır. Dil, tarayıcı sayfalarınızda metin, resim, ses, çerçeve ve animasyon oluşturacak bir dizi kod ve sembolden oluşur.

Web sitenizi başlatmanın iki yaygın yolu şunlardır:

Basit bir metin düzenleyicide kendi kodlarınızı oluşturma ve bunları bir .htm dosyası olarak kaydetme
HTML jeneratör yazılımını kullanma

Gereksinimler

Windows kullananlar için yeni bir Not Defteri belgesi açarak başlayın.

MAC çalıştıranlar için yeni bir SimpleText belgesi açın.

OSX kullanıcıları için, TextEdit'i açın ve aşağıdaki değişiklikleri yapın:

1. "Format" menüsünü açın ve "Düz Metin" i seçin

2. "Metin Düzenleme" menüsünde, "Tercihler" penceresini açın ve "HTML dosyalarındaki zengin metin komutlarını yoksay" seçeneğini işaretleyin.

Örnek 1:

Boş belgenizi aldıktan sonra, şunu yazarak başlayabilirsiniz:

Bu, sayfanızın başlığı

Burası tüm içeriğinizin görüneceği yer

Not:

1. Belgelerinizi web tarayıcınızda görüntülemek için her zaman bir .htm veya html uzantılı kaydedin. (örneğin, index.htm).

2. Kaynak belgenizi düzenlemek için, tarayıcı penceresinde araç çubuğunuzdaki "Görünüm" seçeneğini seçin ve "Kaynak" ı seçin.

3. Belgenizde yapılan her değişikliği kaydetmeyi unutmayın.

4. Belge üzerinde yapılan değişiklikleri tarayıcı penceresinde görüntülemek için, F5 tuşunu kullanarak sayfayı yenileyin.

HTML Etiketleri

Bir HTML etiketi, içerik hakkında daha fazla bilgi vermek için bir HTML belgesine eklenen bir işaretleme olarak tanımlanır. Bir HTML etiketi parantez arasına yerleştirilir ve bir kapanış etiketi gerekir. (Örneğin ).

HTML Öğeleri

Öğeler, bir web sayfasının bazı bölümlerini biçimlendirmek için kullanılan biçimlendirme etiketleridir. HTML öğesinin bir örneği , tarayıcıda görüntülenen metni kalınlaştırmak için kullanılan etikettir.

Tarayıcınıza, dosyanın HTML kodlu verilerden oluştuğunu bildirmek için kullanılır. Tarayıcının tarayıcınıza HTML içeriğinin burada bittiğini söylemek için kullanılır.

Belgenin ilk bölümünü içerir ve tarayıcı sayfanızın başlığının bulunduğu yerdir. Tarayıcınızın görüntüsünü biçimlendirmek için kullanılan komutları da içerebilir (örn. CSS çağrıları). daha sonra bu bölümü sonlandırmak için kullanılır. Bu bölüm tarayıcınızda gösterilmeyecek.

web sitenizi etiketlemek için kullanılacaktır. bu nedenle bu komutun sonunu belirtmek için kullanılır.

Tarayıcınızda görüntülenecek tüm içeriği tanımlar.

Hatırlanacak Temel HTML Etiketleri

Başlıklar

Başlıklar, web sitenizde aşağıdaki içeriğin konusunu belirtmek için kullanılır. HTML’de, boyut olarak

Paragraflar

Paragraflar, web sayfanızdaki metin bloklarını ayırmak için kullanılır. HTML’de, bunlar

etiket. Bir paragrafta açılış etiketi olacaktır

ve bir kapanış etiketi

Bu bölüm HTML etiketlerini tanımladı

Satır Sonları

HTML'de satır sonları kapanış etiketi gerektirmez. Bu nedenle, onlar sadece ile tanımlanır

etiket.

Bu bölüm HTML etiketlerini tanımladı

Yorumlar

Yorumlar, bir web sayfasındaki farklı bölümleri tasarımcı tarafından bulmak için bir HTML sayfasına eklenir. Onlar ile tanımlanır etiket. Yorum etiketleri tarayıcıda görüntülenmez ve bu nedenle web sayfasının biçimini etkilemeden belgenin herhangi bir yerinde kullanılabilir.

Örnek 2

HTML Hakkında Her Şey

HTML, HyperText Markup Language'ın kısaltmasıdır.

HTML Nitelikleri ve Değerleri

HTML Nitelikleri, öğelere eklenen ve HTML öğelerine belirli bir özellik eklemek için kullanılan bilgilerdir. HTML özellikleri her zaman bir değerle birlikte yazılır (örneğin, name = "value" ) ve bir HTML öğesinin başlangıç etiketine konur.

Örneğin, başlığın varsayılan olarak solda görüntülenmek yerine sayfanın ortasına yerleştirilmesini istiyorsanız, hizalama özelliğini etikete ekleyebilirsiniz:

HTML, HyperText Markup Language'ın kısaltmasıdır.

Renk etiketleri

Renk etiketleri, tarayıcı penceresinde görüntülenen metnin rengini değiştirmenize olanak sağlar. İsterseniz metin rengini nasıl değiştireceğinize bir örnektir.

HTML'de, onaltılık kodları kullanarak belirli renkler elde etmek için renk kodları da kullanabilirsiniz. Onaltılık üçlü olarak adlandırılanlar kırmızı, yeşil ve mavi (RGB) renklere karşılık gelir. Bu nedenle, onaltılık renk etiketi gibi bir şey görünecek . Bu kodları takip ederek renk kodlarını ve isimleri alabilirsiniz: //www.computerhope.com/htmcolor.htm

BGCOLOR niteliğini ekleyerek web sitenizin arka plan rengini değiştirmek için renk etiketlerini de kullanabilirsiniz. Bu nedenle, arka plan rengini varsayılan beyazından değiştirir.

Örnek 4

HTML Hakkında Her Şey

HTML, HyperText Markup Language'ın kısaltmasıdır.

Not:

1. Metniniz için sarı veya pembe gibi çarpıcı renkler seçmemeniz önerilir, çünkü bu renkler gözler için rahatsız edici olabilir

2. Ayrıca, daha iyi bir uyumlaştırma sonucu elde etmek için web sitenizin atmosferine karşılık gelen maksimum 4 hafif renk tonu kullanmaya çalışın.

3. Resmi web siteleri için tuhaf görüneceğinden mavi arka plan üzerinde pembe metin gibi garip renk eşleşmeleri yapmayın.

Metin biçimlendirme

Metin formatlama etiketleri, tarayıcı ekranındaki metin ekranınızı değiştirmenize olanak sağlar. Örneğin, bir metni koyu yazmak için etiket. (örn. Bu metnin kalın bir fontu olacaktır ). Metin ekranınızı değiştirmek için kullanabileceğiniz genel metin formatlama etiketlerinin listesi aşağıdadır:

1. Kalın Etiketi

Bu metin koyu olacak

2. Italik Etiketi

Bu yazı italik olacak

3. Alt Çizgi Etiketi

Bu metnin altı çizili olacak

4. Etiketi Vurgula

Bu, metninizi vurgulayacak

5. Güçlü Etiket

Bu metin güçlü olacak

6. Büyük Etiket

Bu büyük metni tanımlayacaktır

7. Küçük Etiket

Bu küçük metni tanımlayacaktır

8. Abonelik Etiketi

_{Bu metin abone olacak}

9. Üst simge etiketi

Bu metin geçersiz olacak

10. Merkez Etiketi

Bu metin ortalanacak

11. Sol Etiketi

Bu metin ekranın sol tarafında görünecektir

12. sağ etiketi

Bu metin ekranın sağ tarafında görünecektir

13. Sırasız Liste Etiketi

Bu sıralanmamış bir liste

Bu sıralanmamış bir liste

14. Sıralı Liste Etiketi

Bu listemdeki 1 numara.

Bu listemdeki 2 numara.

Not:

1. Bu etiketler de birleştirilebilir. Altı çizili kalın bir metin istiyorsanız, kullanabilirsiniz. Bu metin koyu ve altı çizili olacak

2. Ancak, daima en son açtığınız ilk etiketi kapatın. Yukarıdaki örnekte, önce İLK açıldı etiketi, ancak SON kapatıldı.

Örnek 5

HTML Hakkında Her Şey

HTML, HyperText Markup Language'ın kısaltmasıdır.

Dil, üretecek bir dizi kod ve sembolden oluşur:

Metin,

Görüntüler,

, sesler

çerçeveler

tarayıcı sayfalarınızdaki animasyon.

Web sitenizi başlatmanın iki yaygın yolu şunlardır:

Basit bir metin düzenleyicide kendi kodlarınızı oluşturmak ve bunları bir .htm dosyası olarak kaydetmek için. veya

HTML oluşturucu yazılımı kullanın.

HTML Bölümü Etiketleri

Yatay kural

Web sitenizin bölümlerini bölmek veya alt bölümlere ayırmak için yatay kurallar kullanılır.

etiketi yatay bir çizgi oluşturmak için kullanılır ve boyutlarını, renklerini veya genişliklerini değiştirerek farklı türde çizgiler oluşturmak için değiştirilebilir.

Örneğin

veya

Düz çizgi

etiketi düz bir çizgi oluşturmak için kullanılır. Yatay kural etiketinden biraz değiştirir, çizgi tarafından oluşturulan 3B kesiksiz satırı oluşturur.

etiket.

Örnek 6

HTML Hakkında Her Şey

HTML, HyperText Markup Language'ın kısaltmasıdır.

Dil, üretecek bir dizi kod ve sembolden oluşur:

Metin,

Görüntüler,

, sesler

çerçeveler

tarayıcı sayfalarınızdaki animasyon.

Web sitenizi başlatmanın iki yaygın yolu şunlardır:

Basit bir metin düzenleyicide kendi kodlarınızı oluşturmak ve bunları bir .htm dosyası olarak kaydetmek için. veya

HTML oluşturucu yazılımı kullanın.

Resim Etiketleri

HTML belgeleri, görüntü etiketlerini kullanarak görüntü eklemenizi sağlar. Çevrimiçi bir URL’den veya kendi bilgisayarınızdan bir resme göz atabilirsiniz. Resim etiketi "görüntü kaynağı" anlamına gelir; Bu nedenle, görüntü yolu öznitelikten sonra tanımlanmalıdır. Görüntü kaynak belgenizle aynı klasörde bulunursa, tüm yol dizinine girmenize gerek yoktur.

Örneğin

veya veya

Hizalama Etiketi

Bir kez daha, görüntüyü tarayıcınızın orta, sağ veya sol tarafında görüntülemek için ALIGN özelliğini kullanabilirsiniz.

EG1

Not: Ancak, tarayıcınız bu etiketi desteklemiyor olabilir. Böylece, görüntünüzü tarayıcıda ortalamak için etiketi görüntü etiketinden hemen önce kullanabilirsiniz.

eg2

Görüntü boyutu

Görüntülenen görüntünün boyutu, WIDTH ve HEIGHT özniteliği kullanılarak değiştirilebilir. Görüntünüzü boyutlandırmak için yüzde veya pikselleri kullanabilirsiniz.

EG1

eg2

Görüntü sınırı

Resminize kenarlık eklemek istiyorsanız, bunu yapmak için BORDER özelliğini kullanabilirsiniz.

Örneğin

Çevreleyen uzay

Çevreleyen alan, görüntünün etrafındaki boşluk aralığına karşılık gelir. Resminizin etrafında metin varken bu çok yararlı bir etiket. Üst ve alt taraflar için VSPACE özniteliği kullanılarak tanımlanır ve sol ve sağ taraflar için HSPACE özniteliği kullanılır.

Örneğin

Örnek 7

HTML Hakkında Her Şey

HTML, HyperText Markup Language'ın kısaltmasıdır.

Dil, üretecek bir dizi kod ve sembolden oluşur:

Metin,

Görüntüler,

, sesler

çerçeveler

tarayıcı sayfalarınızdaki animasyon.

Web sitenizi başlatmanın iki yaygın yolu şunlardır:

Basit bir metin düzenleyicide kendi kodlarınızı oluşturmak ve bunları bir .htm dosyası olarak kaydetmek için. veya

HTML oluşturucu yazılımı kullanın.

Renk kodları

Kendi web sitenizi oluşturmak için Theodora tarafından sağlanan onaltılık renk kodlarını kullanabilirsiniz.

Vspace ve hspace özniteliğine sahip olduğunuz örnek budur

Etiketleri Bağlama

HTML'de, bağlantı etiketleri sayfanın bir bölümünden diğerine veya bir sayfadan diğerine atlamak için kullanılır. Başka bir web sitesinden yeni bir tarayıcı penceresi açtığınızda bir bölümden veya kendi web sitenizin sayfasından diğerine ve Dış Bağlantı'ya geçmenize izin veriyorlarsa Dahili Bağlantılar adı verilir. Etiketleri birbirine bağlamanın en büyük avantajı, kayan bir web sayfası oluşturmak yerine dinamik bir web sitesi oluşturmanıza izin vermesidir.

Dış bağlantı

, web sayfanızda "Web Adres Bağlantısı" nı köprüler olarak gösterecek ve kullanıcı metne tıkladığında www.webaddress.com sayfasını yükleyecektir.

Dahili bağlantı

Dahili link eklemenin iki özel yolu vardır:

1. Geçerli sayfadan aynı web sitesindeki başka bir sayfaya atlamak için

2. Sayfanın geçerli bölümünden aynı sayfadaki başka bir bölüme atlamak için.

Bir bölümden diğerine atlayabilmek için önce bölüme bir ad vermelisiniz, böylece etiket çağrıldığında onu bulabilir. Örneğin, HTML Bağlantılarıyla ilgili bölümün web sayfasının üst bölümüne, "HTML Bağlantıları" başlığının hemen üstüne eklenmesi gerekiyorsa, etiketi ekleyin. . "Links" değeri, bulunması gereken bölüme atıfta bulunacaktır; bu nedenle, web sayfanızın bir bölümü kedileri temel alıyorsa etiketi ekleyin. Kediler için başlığın hemen üstünde.

Bu işlemden sonra, atlamak istediğiniz bağlantıyı da eklemelisiniz. Bu örnekte, sayfanın üst kısmından sayfanın alt kısmında bulunan "HTML Bağlantıları" konumuna atlamak istiyorsanız, Bağlama Etiketleri ekleyin. Köprü metni "Bağlantı Etiketleri" görünecek ve kullanıcı tıkladığında, geçerli konumlarından belirtilen bölüme atlayacaktır.

Örnek 8

HTML Hakkında Her Şey

Renk kodları

Etiketleri Bağlama

HTML, HyperText Markup Language'ın kısaltmasıdır.

Dil, üretecek bir dizi kod ve sembolden oluşur:

Metin,

Görüntüler,

, sesler

çerçeveler

tarayıcı sayfalarınızdaki animasyon.

Web sitenizi başlatmanın iki yaygın yolu şunlardır:

Basit bir metin düzenleyicide kendi kodlarınızı oluşturmak ve bunları bir .htm dosyası olarak kaydetmek için. veya

HTML oluşturucu yazılımı kullanın.

Renk kodları

Kendi web sitenizi oluşturmak için Theodora tarafından sağlanan onaltılık renk kodlarını kullanabilirsiniz.

Vspace ve hspace özniteliğine sahip olduğunuz örnek budur

Bu bağlantıya tıklayarak Microsoft’un web sitesini ziyaret etmek için yararlı bir yol bulabilirsiniz.

Etiketleri Bağlama

Bu bölüm, Etiketleme etiketlerinin web sitenizdeki önemi hakkında tartışacaktır.

Not:

Bunlar sadece bağlantı etiketlerinden nasıl yararlanabileceğinize dair örneklerdir. Elbette web sitenizi daha kullanıcı dostu ve çekici hale getirmek için yerleşimlerini değiştirebilirsiniz.

Hedef Penceresi

Hedef pencere, bağlantılı sayfayı başka bir tarayıcı penceresine yükler, böylece kullanıcı web sitenizin geçerli sayfasında kalabilir ve köprülü adresi başka bir tarayıcıda görebilir.

Tablo Etiketleri

Web sitenize tablo eklemek, bilgileri düzenli bir şekilde görüntülemek için çok yararlı olabilir. Ayrıca, metin ve grafiklerinizi daha kesin olarak kullanmanıza da olanak tanır.

Açılış etiketi

Tarayıcınıza, sayfadaki tablonun orada başladığını ve

etiket. Tablonuzun rengini, boyutunu ve kenarlık boyutunu da değiştirebilirsiniz.

Tablonun boyutu kullanılarak kullanılarak değiştirilebilir

etiket. Tablonun boyutunu değiştirmek için pikselleri ya da yüzdesini kullanabilirsiniz.

Etiketi kullanabilirsiniz

örneğin, tarayıcınızda görünmez bir kenarlık yapmak için.

etiketi metinle tablonun kenarlığının iç çizgisi arasında boşluk bırakmak için kullanılır.

etiketi, tablonun kenarlarının iç ve dış çizgisi arasına boşluk bırakmak için kullanılır.

Bir tablo, tablodaki sütunlar ve satırlarla tanımlanan hücrelerden oluşur. Bir hücre, içeriğinizin ekleneceği boşluk olacaktır. Sütun etiketi,

etiketleri ve satırlar veetiketleri. Hücre genişliğini değiştirmek için ve bir sütunu hizalamak için etiketi

etiket. Boyut, yüzde olarak veya piksel cinsinden ayarlanabilir.

Etiketlerinize ALIGN niteliğini ekleyerek satırlarınızı ve sütunlarınızı da hizalayabilirsiniz. Bu nedenle, örneğin belirli bir satırı hizalamak için etiketi ekleyin.

Hücrenizi hizalamak için VALIGN niteliğini kullanabilirsiniz .

hücreyi sayfanızın üst ortasına yerleştirir.

Bir sütunu yaymak için etiketi kullanabilirsiniz

Hücrenin yayması gereken sütun sayısını ayarlamak için. Varsayılan değerin 1 olarak ayarlandığını unutmayın.

Ayrıca, bir hücreyi birkaç satıra yaymak için

etiket.

Örnek 9

HTML Hakkında Her Şey

Renk kodları

Tablo Etiketleri

HTML, HyperText Markup Language'ın kısaltmasıdır.

Dil, üretecek bir dizi kod ve sembolden oluşur:

Metin,

Görüntüler,

, sesler

çerçeveler

tarayıcı sayfalarınızdaki animasyon.

Web sitenizi başlatmanın iki yaygın yolu şunlardır:

Basit bir metin düzenleyicide kendi kodlarınızı oluşturmak ve bunları bir .htm dosyası olarak kaydetmek için. veya

HTML oluşturucu yazılımı kullanın.

Renk kodları

Kendi web sitesi atmosferinizi oluşturmak için Theodora tarafından sağlanan Onaltılık Renk Kodlarını kullanabilirsiniz.

Buraya daha fazla metin eklenebilir.

Tablo etiketleri

Bu bölüm size masa etiketleri hakkında daha ayrıntılı bilgi verecektir.

başlık
Bu, içeriğin başka bir parçası
Sütun 1	Sütun 2	Sütun 3
3 Satırda Hücre Yayılımı (2. ve 3. birleşme)	2 Satırda Hücre Yayılımı (1. ve 2. Hücre birleştirildi)	1. hücre
		2. Hücre
		3. Hücre
	3. Hücre	4. Hücre

HTML Çerçeve Etiketleri

HTML çerçeveleri, bir web sayfasında bağımsız pencereler oluşturmanıza olanak sağlar. Bir web sayfasında birden fazla belge görüntülemenize izin verdiği için çok kullanışlıdır.

Kareleri kullanmak için, biri index.htm olarak adlandırılacak en az iki farklı .htm dosyasına sahip olmalısınız. İndex.htm dosyası tüm pencerelerin görüntüleneceği yer olacaktır. Çerçeve etiketi ve etiketi index.htm dosyasında kullanılan çerçeve kümesini tanımlamak için kullanılır.

Örnek 10

Çerçeve etiketlerini deneyin

tarayıcınızda görüntülenecek satırların boyutunu ayarlayacaktır.

tarayıcınızda görüntülenecek sütunların boyutunu ayarlayacaktır.

etiketi kareyi adlandırır ve ana pencereye bağlamak için kullanılır.

etiketi, çerçevelerinize kenarlık ayarlamak için kullanılır. 0'a ayarlamak, tüm tarayıcılarla uyumlu olmasını sağlayacaktır.

En yakın kareler arasında boşluk bırakacaktır.

çerçevelerin her iki tarafındaki genişlik alanını ayarlayacaktır. Boyut piksel olarak ayarlanmalıdır.

üst ve alt kenar boşluğu boyutunu piksel cinsinden belirleyecektir.

etiketi, çerçevenizdeki dikey veya yatay kaydırma çubuğunu açabilir. Değeri "evet", "hayır" veya "otomatik" olarak ayarlanmalıdır.

WYSIWYG Yazılım

WYSIWYG (ne görüyorsanız onu alırsınız) adında, sizin için kodlayan yazılım programları vardır, ancak bu, hoş olmayan sürprizlerden kaçınmak için sizi asgari html kavramlarını öğrenmekten alıkoymamalıdır! Bu yazılımla, metni ve görüntüleri koyarsınız ve yazılım aynı anda ilgili HTML kodunu oluşturur. Ayrıca çalışmayı animasyonların veya senaryoların dahil edilmesini kolaylaştıracaktır. Mesela:

Dreamweaver, ücretsiz değil ama çok kapsamlı ve iyi tasarlanmış bir öğretici ile kullanımı kolay

GoLive Photoshop editörü

Ücretsiz WYSIWYG'den bahsedebiliriz: