HTML sayfası nasıl yazılır (resimlerle) - Ipuçları

Video: Basit Web Site Yapımı - Html Css Basit Web Site Yapımı

İçerik

Adımlar
Bölüm 1: HTML'yi nasıl keşfettim
Tavsiye
Uyarı
Neye ihtiyacın var

HTML (HyperText Markup Language), web sayfaları oluşturmak için temel bir dildir. Kolay ve esnek bir kodlama dili olarak oluşturulmuştur. İnternetteki hemen hemen her web sitesi bu kodun bir biçimi (ColdFusion, XML, XSLT) ile geliştirilmiştir. HTML'yi kavramak kolaydır, ancak kapsamlı işlevselliğiyle ilgileniyorsanız, uzun süre öğrenmeye devam edebilirsiniz. Web sitenize renk ve eğlence katmak için, temel bir HTML sayfasına alıştığınız anda temel CSS'yi öğrenebilirsiniz.

Adımlar

Bölüm 1/4: Belge Oluşturma

Basit bir metin düzenleyici açın. NotePad iyi bir seçenektir ve ücretsiz olarak indirilebilir. Çoğu metin düzenleyiciyle HTML yazabilirsiniz, ancak otomatik biçimlendirme yeteneklerine sahip daha karmaşık yazılımlar, HTML sayfanızı düzenlemeyi zorlaştırabilir.
- Dosyayı genellikle tarayıcınızın HTML olarak tanımayabileceği bir biçimde kaydettiği için TextEdit'i kullanmayın.
- Ayrıca çevrimiçi bir HTML düzenleyici de kullanabilirsiniz. Yeni başlayanlar için özel HTML düzenleme programları önerilmez.
Bir dosyayı web sayfası olarak kaydedin. Üstteki menüden Dosya → Farklı Kaydet'i seçin. Dosya biçimini "Web Sayfası", ".html" veya ".htm" olarak değiştirin. Dosyayı kolayca bulabileceğiniz bir yere kaydedin.
- Bu üç seçenek arasında hiçbir fark yoktur.
Dosyayı bir tarayıcıda açın. Dosyaya çift tıklayın ve otomatik olarak tarayıcınızda boş bir web sayfası olarak açılacaktır. Alternatif olarak, Firefox veya Internet Explorer gibi bir tarayıcı açabilir ve ardından belgeyi seçmek için Dosya → Dosya Aç'ı kullanabilirsiniz.
- Bu web sitesi çevrimiçi değil. Yalnızca bilgisayarınızda görüntülenebilir.
Web sayfasını yenileyin ve yapılan değişiklikleri görün. Aşağıdakileri boş belgenize yazın: Merhaba. Belgeyi kaydedin. Tarayıcınızda boş web sayfasını yenileyin ve sayfanın üst kısmında kalın harflerle "Merhaba" kelimesini görmelisiniz. Bu eğitim sırasında yeni HTML'nizi test etmek istediğinizde, .htm belgesini kaydedin ve ardından HTML'nin nasıl derlendiğini görmek için tarayıcı pencerenizi yenileyin.
- Eğer kelimeleri görürsen"ve"Tarayıcınızda görünüyor, dosya HTML olarak doğru şekilde derlenmemiş. Farklı bir metin düzenleyici veya farklı bir tarayıcı deneyin.
Etiketleri öğrenin. HTML komutları, tarayıcıya web sayfanızı nasıl derleyeceğini ve görüntüleyeceğini söyleyen "etiketlere" yazılır. Her zaman tek tırnak içinde yazılırlar
ve yukarıdaki örnekte kullandığınız gibi web sayfasında görüntülenmez:
- bir "başlangıç kartı" veya "açılış kartı" dır. Bu etiketten sonra yazılan her şey "kalın" (bir web sayfasında kalın) olarak tanımlanacaktır.
- sembol / işaret ile ayırt edebileceğiniz bir "bitiş etiketi" veya "kapanış etiketi" dir. Kalın metnin sonunu gösterir. Çoğu (tümü değil) etiketin çalışması için bir bitiş etiketine ihtiyacı vardır, bu nedenle bunu eklediğinizden emin olun.
Belgenizi oluşturun. HTML belgenizdeki her şeyi silin. Aşağıdaki metinle, aynen yazıldığı gibi baştan başlayın (madde işaretleri hariç). Bu HTML kodu, tarayıcıya ne tür HTML kullandığınızı ve tüm HTML kodunuzun etiketlerin içine yerleştirileceğini söyler. ve .
Baş (kafa) ve gövde etiketlerini ekleyin. HTML belgeleri iki bölüme ayrılmıştır. "Üst" bölüm, sayfanın başlığı gibi özel bilgiler içindir. "Gövde" bölümü, sayfanın ana içeriğini içerir. Bu bölümlerin her ikisini de belgenize ekleyin ve bitiş etiketlerini eklemeyi unutmayın. Yeni eklenen metin kalın:
Sayfanıza bir başlık verin. Baş bölümündeki kartların çoğu, yeni başlayanlarla öğrenmek için önemsizdir. Bununla birlikte, başlık etiketinin kullanımı kolaydır ve tarayıcı penceresinin adı olarak veya tarayıcı sekmesinde neyin görüneceğini belirler. Başlık başlangıç ve bitiş etiketlerinizi başlık etiketlerinin içine yerleştirin ve bu etiketler arasına istediğiniz başlıkları yazın:
- İlk HTML sayfam.
İlan

Bölüm 2/4: Metin Biçimlendirme

Vücudunuza metin ekleyin. Bu bölüm için sadece gövde etiketleriyle çalışacağız. Diğer metin yine de belgenizde olacaktır, ancak bu eğitimde tekrar etmeyerek yerden tasarruf edeceğiz. Kartların arasına ne istersen yaz ve ve sayfanızdaki ilk içerik olarak görünecektir. Örneğin:
- Bir HTML sayfası yazmak için wikiHow talimatlarını takip ettim.
Metin için başlıklar ekleyin. Sayfanızı, tarayıcıya aralarındaki metni daha büyük bir yazı tipi boyutunda görüntüleme talimatı veren başlık etiketleriyle düzenleyin. Bu etiketler, web sitenizin neyle ilgili olduğunu ve nasıl organize edildiğini belirlemek için arama motorları ve diğer araçlar tarafından da kullanılır.

en büyük başlıktır ve daha küçük başlıklar oluşturabilirsiniz.

. Bunları sayfanızda deneyin:
- Sayfama hoşgeldiniz.
- Bir HTML sayfası yazmak için wikiHow talimatlarını takip ettim.
- Bugünkü hedefim:
- Tamamlanan hedefler:
- Başlıkları nasıl kullanacağınızı öğrenin.
- Tamamlanmamış hedefler:
- Daha fazla metin biçimlendirme etiketi öğrenin.
Daha fazla metin biçimlendirme etiketi öğrenin. "Güçlü" etiketi zaten gördünüz, ancak metninizi biçimlendirmenin birçok başka yolu var. Bu etiketleri veya aynı metin dizesi için aynı anda birden çok etiketi deneyin. Arkaya bitiş etiketleri eklemeyi unutmayın!
- Tarayıcıda kalın olarak gösterilen önemli metin.
- Tarayıcıda italik olarak gösterilen vurgulanmış metin.
- Normalden biraz daha küçük metin. Bu metin, başlıkta kullanılırsa otomatik olarak yeniden boyutlandırılacaktır.
- ~~Metin artık alakalı değil, gövde çizgisiyle görüntüleniyor.~~
- Metin, altı çizili olarak görüntülenen diğer belgelerden daha sonra eklenir.
Sayfanızdaki metni düzenleyin. Metnin başka bir satırda görünmesi için "enter" tuşuna basmanın yeterli olmadığını fark etmiş olabilirsiniz. Bu etiketler paragraflar ve satır sonları oluşturmanıza veya metninizi başka şekillerde düzenlemenize yardımcı olabilir:
- "Paragraf" ın kısaltması olan bu etiket, bir paragrafta bu etiketler arasındaki tüm metni saklar ve onu üstündeki ve altındaki metinden ayırır.
- Bu etiket satır sonları oluşturacaktır. Diğer içeriğe müdahale etmediğinden buna bir bitiş etiketi eklemeyin. Bu etiketi paragraflarda değil şiirlerde veya adres satırlarında kullanın.
- ```
Metni çok doğru bir şekilde görüntülemeniz gerekiyorsa, bu etiket içindeki metni sabit genişlikte bir yazı tipine ayarlar (her harf aynı genişliğe sahiptir) ve aralıklar oluşturmanıza olanak tanır Etiketler yerine düzenli düzenlemede istediğiniz gibi boşluklar ve satır sonları.
```
- Bu etiket, bir kaynaktan alıntılanan metin türünü tanımlar.
  Kaynağı daha sonra açıklayabilirsiniz. alıntı kartı.
Görünmez başlık metni ekleyin. Yorum etiketleri web sayfasında görüntülenmez. İçeriği etkilemeden HTML belgesine kendinize açıklama eklemenizi sağlar. Bitiş etiketi eklemeyin.
- Bitiş etiketi olmadan tek başına giden kartlara "boş etiket" denir.
Onları bir araya getirin. Bu etiketleri hatırlamanın en iyi yolu, onları web sitenizde kullanmaktır. İşte şimdiye kadar öğrendiğiniz adımlarda kartları kullanan bir örnek. Tarayıcıda nasıl görüneceklerini tahmin etmeye çalışın, ardından bunları belgenize kopyalayın ve öğrenin.
- İlk HTML sayfam.
- Web siteme hoş geldiniz.
- Bu sayfayı beğeneceğinizi umuyoruz!
  Bunu sadece senin için yaptım.
- Bölüm 1: HTML'yi nasıl keşfettim
- HTML'yi zaten öğrendim ~~bir~~ ikisaat, yani şimdi bir uzmanım.
İlan

Bölüm 3/4: Bağlantı ve Görüntü Ekleme

Özellikler hakkında bilgi edinin. Etiketler, öznitelikler adı verilen, içlerine yazılan ek bilgilere sahip olabilir. Bu öznitelikler, etiketlerin içinde ek sözcüklerle temsil edilir. özellik adı = "belirli değer". Örneğin, herhangi bir HTML etiketi title özniteliğine sahip olabilir:
- Giriş paragrafı burada.
  Web sayfasındaki paragrafın üzerine geldiğinizde görünecek olan "Giriş" paragrafına başlık verin.
Diğer web sitelerine bağlantılar. Kartların kullanımı başka herhangi bir web sayfasına bir köprü oluşturmak için. Href niteliğini kullanarak bağlantı kurulacak web sayfasının URL'sini girin. İşte okuduğunuz web sayfasına bağlantı veren bir örnek:
- Web sitenize gelen ziyaretçileriniz bağlantıyı takip etmek için bu metne tıklayabilir.
İd niteliğini etikete ekleyin. Herhangi bir HTML etiketinin kullanabileceği başka bir özellik de "id" öğesidir. Herhangi bir kartta yazın id = "vidu" veya boşluk içermeyen herhangi bir ad kullanın. Görünür bir etki yaratmaz, ancak bir sonraki adımda kullanacağız.
- Örneğin, belgenize aşağıdakileri ekleyin:
  Bu paragraf, id özniteliğinin nasıl çalıştığını açıklamak için bir örnek olarak kullanılmıştır.
Belirli bir kimliğe sahip bir öğeye bağlantı. Artık köprü etiketini kullanabiliriz, , aynı sayfadaki başka bir konuma bağlantı vermek için. Bir URL yerine, # sembolünü ve ardından bağlanmak istediğimiz id değerini kullanacağız. Örneğin, Bu metin "vidu" kimliğine sahip metne bağlanacaktır.
- Tüm HTML değerleri büyük / küçük harfe duyarlıdır. "#VIDU" ve "#vidu" aynı konuma bağlanacaktır.
- Sayfanız tüm sayfayı aynı anda görüntüleyecek kadar kısaysa, tarayıcınızdaki bağlantıyı tıkladığınızda muhtemelen hiçbir şey fark etmeyeceksiniz. Kaydırma çubuğu görünene kadar pencereyi yeniden boyutlandırın ve ardından tekrar deneyin.
Fotoğraf ekle. Kart boş bir etikettir, yani bitiş etiketine gerek yoktur. Tarayıcının resmi görüntülemesi için ihtiyaç duyduğu tüm bilgiler, özellikler kullanılarak eklenir. Aşağıda, wikiHow logosunun arkasında her bir özniteliğin bir açıklamasıyla birlikte bir örnek verilmiştir:
- Özellikleri src = "" tarayıcıya fotoğrafın nerede olduğunu söyler. (Başka birinin sitesinden bir fotoğraf göndermenin uygunsuz olarak değerlendirildiğini ve sayfa artık etkin olmadığında fotoğrafın kaybolacağını unutmayın.)
- Özellikleri style = "" Pek çok şey yapabilir, ancak en önemlisi, bir görüntünün genişliğini ve yüksekliğini piksel cinsinden ayarlamak için kullanılır. (Bunun yerine ayrı ayrı genişlik = "" ve yükseklik = "" özniteliklerini de kullanabilirsiniz, ancak bu, CSS kullanıyorsanız tuhaf yeniden boyutlandırma sorunlarına yol açabilir.)
- Özellikleri alt = "" resmin yüklenememesi durumunda kullanıcının göreceği resmin kısa bir açıklamasıdır. Kör olan web sitesi ziyaretçileri için ekran okuyucularda kullanıldığından, bu bir gereklilik olarak kabul edilir.
İlan

Bölüm 4/4: Web Sitenizi Ekleme ve Çevrimiçi Kullanıma Alma Daha Fazla Bilgi

HTML'nizi onaylayın. HTML doğrulaması, kodunuzdaki hataları kontrol eder. Siteniz doğru görüntülenmiyorsa, doğrulama soruna neden olan hatayı bulmanıza yardımcı olabilir. Ayrıca, kodun ekranda iyi göründüğünü belirleyerek size HTML hakkında daha fazla şey öğretebilir, ancak HTML standardındaki yeni güncellemeler nedeniyle artık önerilmemektedir. Geçersiz HTML kullanmak sitenizi işe yaramaz hale getirmez, ancak sorunlara neden olabilir veya farklı tarayıcılarda kararsız görüntülenebilir.
- W3C'nin ücretsiz bir çevrimiçi doğrulama hizmetini deneyin veya çevrimiçi olarak başka bir HTML 5 doğrulama aracı arayın.
Daha fazla etiket ve özellik öğrenin. Diğer birçok HTML etiketi ve özniteliği ve bunları öğrenebileceğiniz birçok yer vardır:
- Daha fazla eğitim ve eksiksiz etiket listesi için w3schools ve HTML Dog'u deneyin.
- Görünüşünden hoşlandığınız bir web sayfası bulun, ardından HTML kodunu kendiniz almak için tarayıcınızın "Sayfa Kaynağını Görüntüle" işlevini kullanın. Belgenize kopyalayın ve nasıl çalıştığını inceleyin.
- Diğer makaleleri okuyun ve HTML'de nasıl tablo oluşturacağınızı öğrenin, arama motorları tarafından bulunma şansınızı artırmak için meta etiketleri kullanın veya bir bölüm kullanın. CSS aracılığıyla stil oluşturmaya yardımcı olmak için sayfada bir alan ayarlayın) ve span (metin öğesinin stilini belirtmek için kullanılır).
Web sitenizi çevrimiçi yapın. Web sitenizi barındırmak için bir hizmet seçin ve ardından kişisel web alanınıza istediğiniz kadar HTML sayfası yükleyebilirsiniz. Bunu yapmak için, FTP yükleme yazılımını kullanmanız gerekecektir, ancak birçok web kiralama hizmeti de bu hizmeti sunmaktadır.
- Doğrudan sitenizde bulunan sayfalara veya resimlere bağlantı verirken, tam site adresini kullanmanız gerekecektir. Örneğin, alan adınız www.chuyengiahtmlsieudang.com ise, o zaman metin bu etiketlerde "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html" bağlantısına sahip olacak
CSS ile stiller ekleyin. HTML sayfanız biraz monoton görünüyorsa, renkler, farklı yazı tipleri eklemek ve öğelerin nereye yerleştirileceğini daha iyi kontrol etmek için CSS'nin temellerini öğrenmeyi deneyin. Bir CSS "stil sayfasını" bir HTML sayfasına bağlamak, belirli bir etiket içindeki tüm metnin stilini otomatik olarak ayarlayarak, anında büyük değişiklikler yapmanızı sağlar. Temel biçimlendirme katmanını biraz burada oynayabilir veya HTML Dog's CSS Tutorial'daki daha ayrıntılı eğitimlere dalabilirsiniz.
Web sitenize JavaScript ekleyin. JavaScript, HTML sayfalarınıza birçok işlevsellik eklemek için kullanılan bir programlama dilidir. JavaScript komutları, başlangıç ve bitiş etiketleri arasına yerleştirilir ve etkileşimli düğmeler eklemek, matematik problemlerini hesaplamak ve daha fazlası için kullanılabilir. W3c örneklerinde daha fazlasını öğrenin. İlan

Tavsiye

Bu eğiticide kullanılan belge türü bildirimi (kullanılan Belge Türü Bildirimi), kolay bir biçim olan "gevşek HTML 4.0.1 geçişidir" (HTML 4.0.1 sıkı geçiş değildir). acemiler için kullanmak. Kullan () tarayıcının onu katı bir HTML 5 biçiminde derlemesine bir alternatif, ki bu önerilen (daha az yaygın olarak kullanılan) standart stildir.

Uyarı

HTML'nin amacı, içeriği genel bir formatta tutmaktır. Arka plan rengi ve öğelerin tam yerleşimi gibi web sitenizin sunumu üzerinde hiçbir kontrolü yoktur. Hala bunu yapmanıza izin veren etiketler olsa da, daha kontrol edilebilir ve tutarlı bir web sitesi oluşturmak için CSS kullanmak iyi bir fikirdir.

Neye ihtiyacın var

NotePad veya TextEdit gibi basit bir metin düzenleyici
Internet Explorer veya Mozilla Firefox gibi bir web tarayıcısı
(İsteğe bağlı) Adobe Dreamweaver, Aptana Studio veya Microsoft Expression Web gibi bir HTML düzenleyici