Sayfanın HTML sayfası nedir? Temel HTML
Herhangi bir web sayfasını açarsanız, sitenin türü ve yönünden değişmeyen tipik unsurlar içerecektir. Örnek 1, ana elemanları içeren basit bir belgenin kodunu göstermektedir.
Örnek 1. Bir Web sayfasının kaynak kodu
Başlık
İlk paragraf.
İkinci paragraf.
İçeriği kopyalayın bu örnek Ve C: \\ www \\ klasörüne, örneği2.html adıyla kaydedin. Bundan sonra, tarayıcıyı çalıştırın ve dosyayı menü öğesi üzerinden açın. Dosya\u003e Dosya Aç (CTRL + O). Belge Seçimi iletişim kutusunda, example2.html dosyasını belirtin. Tarayıcı, Şekil 2'de gösterilen web sayfasını açacaktır. bir.
İncir. 1. Tarayıcıdaki örneğin sonucu
Eleman (Jarg. Doktorlar) Geçerli belge türünü belirtmek için tasarlanmıştır - DTD (belge türü tanımı, belge türünün açıklaması). Tarayıcının, geçerli Web sayfasının nasıl yorumlanacağını anlaması gereklidir, çünkü HTML birkaç sürümde - modern HTML5 veya modası geçmiş HTML4 ve XHTML'de bulunur. Tarayıcıya, bir web sayfasını görüntülemek için hangi standarda sahip olduğuna göre, "şaşkın olmayan" ve anlaşılan tarayıcıya ve birinci sırayı ayarlamanız gerekir..
Sadece HTML5 ile çalışmaya devam edeceğimiz için, sadece bir kısa ve modern dokümana ihtiyacımız olacak.
Öğelerin adlarının küçük yazılı olabileceğinden bahsettik ve büyük harfler. İçin Bu kural da geçerlidir ve farklı şekillerde kaydedilebilir. Bununla birlikte, bu öğenin adı geleneksel olarak büyük harfle yazılmıştır.
Açılış etiketi HTML belgesinin başlangıcını belirler, başın içinde saklanır (
) ve belgenin "gövdesi" ( ).Bu bölümün içeriği, ürün hariç, doğrudan sayfada gösterilmez.
Çifti etiketi. Daha büyük çifti etiketinde yazılı Bir çift etiketinden sonra
. Bu etikette diğer tüm etiketler var. Html Sayfa ve hacmin görünümünü verir. Bu etiket, siteyi oluşturma sürecini gerçekleştirir.Çifti etiketi. Daha büyük çifti etiketinde yazılı
. Bu etiket, sitedeki başlıkları vurgulamak için kullanılır. Etiketteki sayı ne kadar büyükse, daha az başlık değeri. Buna göre, başlık, site optimizasyon planındaki arama motorları üzerinde daha az etkisi daha azdır. Bu etiket etiket olarak büyük bir rol oynar
Çifti etiketi. Bir çift etiketi içinde yazılı
. Bu etiketin temel amacı, prizler için metinlerin ayrılması.
Çifti etiketi. Daha büyük çifti etiketinde yazılı
. Aynı diğer alanlara bir referanstır Html Sayfalar veya başka bir siteye referans.
. Amaç, etiketle aynıdır, ancak aralarında boşluk yapma bölümündeki tüm içeriği paylaşabilirsiniz. Küçük bir fiziksel aktivite taşır.
Etiketi görüntüleyin. Daha büyük çifti etiketinde yazılı
. Etiket bu yerde bir görüntü olduğunu gösterir.
Çifti etiketi. Daha büyük çifti etiketinde yazılı
. Siteye bir masa ekler.
. Bu etiketlerin temel amacı metin alanları yapmak şişman ve sözleşme İnsan gözünü çekmek için. Bu etiketler, metnin ana fikrini vurgulamanıza izin verir.
Çifti etiketi. Daha büyük çifti etiketinde yazılı
. Etiket anlamsal yük taşımıyor, ancak bu etiketin yardımıyla herhangi bir alanı tahsis edebilirsiniz Html CSS tarzı tablosunda bulunan sayfalar, tasarım planında herhangi bir değişiklik yapabilirsiniz.
Çifti etiketi. Daha büyük çifti etiketinde yazılı
. Amaç etiketle aynıdır
Eşleştirilmiş etiketler. Daha büyük çifti etiketinde yazılı
. Metni işaretleyicilerle birlikte paylaşın.
Eşleştirilmiş etiketler. Daha büyük çifti etiketinde yazılı
Çifti etiketi. Daha büyük çifti etiketinde yazılı
Özünün iki niteliği, bunlarda belirtilen bilgilerin adresini vereceklerdir. Yani, birinin veya başka bir içeriğin yattığı yeri gösterirler. Ve normal bir metin veya bir kaynak veya bir tür grafik bilgisi olabilir; Görüntü, video, ses vb. Ancak bu özellikler kesinlikle varış noktasına bölünmüştür. Öznitelik SRC \u003d "", yalnızca grafik kaynakları, yani, yalan söyledikleri yerde adresleri verir. Ve href \u003d "" "" "adreleri diğer sayfalara veya diğer kaynaklara verir, aslında, bu, sitenin başka bir sayfasında olan başka bir kaynağa banal köprüdür.
Neredeyse her etikete atanabilecek öznitelik. Bu özniteliğin özü, adı daha fazla dikkate alınarak belirli bir içerik bölümüne vermek ve CSS stillerini kullanarak değişmektir.
Özünün iki niteliği, örneğin bir grafik kaynağı vermektir; Görüntü açıklaması. Ancak ikisi olduğundan ve açıklama farklı olduğundan. Başlık \u003d "" özniteliği, fare imlecini bu nesneye getirdiğinizde vurgulanacak bir açıklama yazılmıştır, böylece ziyaretçinin bu nesnenin neyin gizlendiğini biliyordu. Kural olarak, bu bir bağlantıdır. ALT \u003d "" niteliği \u003d "", arama motorunu anlamak için bu nesnenin bir açıklaması yazılmıştır. Bu açıklama site ziyaretçileri için görünmez, ancak görünüşe göre arama motorları için.
Kedinin özünün iki niteliği, yatay veya dikey bölgeyi eşitlemek içindir. Yani, sitenin alanının bu bilgi olması gereken tarayıcıyı anlarlar. Align \u003d "" "öznitelik, yatay içeriğin belirli bir veya tamamı. Öznitelik Valign \u003d "" Belirli bir veya tüm içeriği dikey olarak çizerler.
Sitedeki bazı nesneleri germek veya azaltmak için ezilmiş olan iki niteliktedir. Temel olarak, bu özellikler, örneğin belirli nesnelerin deformasyonunu yapar; Masalar, yükseklikte ve genişlikte, böylece boyutlarını değiştirir.
Tablo çerçevesi özniteliği. Bu özniteliği kullanarak, görünür ve görünmez bir tablo çerçevesi yapabilir ve ayrıca çerçevenin kalınlığını ayarlayabilirsiniz.
Sınırdaki ile aynı özündeki öznitelik \u003d "öznitelik" ", ancak farkla sadece çerçevelerin tüm tabloya ve elemanlarının satırlarına ve sütunlarına atanmasıdır.
Renkli çerçeve renginin belirtildiği özellik.
Kesinlikle bir HTML kodu olarak böyle bir kavramla karşılaştınız. Arkadaşlardan haberdar, tarayıcıları menüsünde gördüm, vb. Ama ne? Kodun ne olduğunu ve hangi maddelerden oluştuğunu bulmaya çalışalım.
Temel Bilgiler
Tanımla başlayalım. HTML kodu, HTML dilini kullanarak gerçekleştirilen herhangi bir web sayfasının işaretlemesidir.
Bu kod, tarayıcının bir sayfanın nasıl göründüğünü belirlediği sayesinde etiketlerden oluşur. Yapı iki parçaya ayrılır: Baş - Sayfanın adının öngörüldüğü belgenin başlığı ve ayrıca belgenin kendisi hakkında bilgi ve vücut, sayfa parametrelerinin belirtildiği belgenin gövdesidir.
Sıfırdan yazılmış az ya da çok iyi bir web sayfası oluşturmak için, bu diller tarafından kullanılan etiketler çalışılmalı ve ayrıca HTML renk kodlarını da bilmelidir.
Etiketler
Tag - HTML dilinin öğesi. Bununla birlikte, yazı tipi, renk, metin boyutunu, tabloları ve resimleri yerleştirebilirsiniz, formatlar, başlıklar, bağlantılar oluşturun ve sayfayı boyayabilirsiniz.
Her zaman açısal parantez içine alınmış etiketler -<>Ve bu tam olarak onları görüntüleme sırasında sayfada görüntülenen ana metinden ayıran şeydir. Onlar iki tür - eşleştirilmiş ve yalnız.
Eşleştirilmiş bir keşif etiketinden ve kapanıştan oluşur, ikincisinde sol köşe braketinden sonra düz bir Slansh vardır. Örneğin: metin.
Web sayfasında görüntülenen iki etiket arasında bir metin, tablo, resim veya başka bir öğe var.
Tek bir etiketten oluşur ve düz bir eğik çizgi içermez. Örneğin:
.
Etiketler, HTML için özel kodları kullanarak, olabildiğince parametreleri olabilir.
Ayrıca çoğu karakter için: köpekler, parantez, daha fazla veya eşit, diğerlerine göre daha az veya eşittir - veri kodlarının öngörüldüğü özel bir tablo vardır. Bu kod, bir alfabe mnemonication atama gidebileceği veya üç basamaklı bir sembol koduyla kafes işareti olan mağaza ile başlar. Sonunda mutlaka virgülle bir nokta koyun.
Temel etiketler.
Şimdi bulduk, şimdi kendi web sayfalarınızı oluşturmazsanız, en azından metinler tasarlarken faydalı olabilecek temel etiketleri listelemeyi deneyin.
- < body> - Referanslar, alanlar ve diğerleri gibi belgenin temel parametrelerini içerir;
- < p> - paragrafı belirtir;
- < b> - Yağın metnini vurgular;
- < i> - italik;
- < u> - metni vurgular;
- < s> - metni geçer;
- < sup> - Metni üst dizin olarak belirtir;
- < sub> - alt dizin;
- < font> - Yazı Tipi Paramert'i belirtir: Boyut, Yazı Tipi, Renk;
- < div> - Bununla, metninizi hizalayabilirsiniz;
- < h>- Etiket başlıkları;
- < a> - Bununla, referanslar belirlenir;
- < table> - Tabloyu belgeye eklemeye yardımcı olur, etiketler buna bağlı< tr> (string) ve< td> (hücre).
Tek:
- Bekar, ardından yeni bir sayfaya, ardından metni aktarır;
- Bununla birlikte, metnin içine yatay bir özellik ekleyebilirsiniz.
Etiketlerin genellikle yeni bir hattan reçete edildiğine dikkat edilmeye değer. Bu, sadece vestovelin değil, aynı zamanda HTML'deki kodları görecek olanlar da yapılır.
Tag parametreleri
Bilmek istediğiniz temel etiketleri zaten düşündük. Tabii ki, hepsi listelendik, ancak bu asgari bile ilk web sayfalarınızı oluşturmak için yeterli olabilir.
Ancak bazı etiketler hakkında biraz, hala ayarlanabilecek parametreleri keşfetmeniz gerekir. Bu yazıda sadece kısa bir genel bakışını yapacağız, en sık kullanılanları açıklıyoruz. Herhangi bir HTML kodunu açarak onları görebilirsiniz.
Ayrıca, hangi etiketin, bu parametre uygun olduğu için, çoğu web işaretleme komutunda kullanıldığı için de boyayacağız.
- yüz - Yazı tipinin türünü tanımlar;
- boyut - boyut belirtir;
- renk - Rengi belirtir;
- hizalama - hizalama;
- İsim - İsim;
- hREF - Bu parametrenin kullanılması, bağlantı adresini ayarlar;
- alt - Alternatif Metin;
- genişlik - genişlik;
- yükseklik yüksekliği;
- arka plan - arka plan çizimi;
- bgcolor - arka plan.
Bu tüm parametreler değil, sadece en çok tüketilen ve bilinenleri listeledik.
Parametre eşitlik işareti olduğundan ve ardından alıntıların değerini reçete edilir. Sadece temel parametreleri tanımak için değil, aynı zamanda doğru parametreleri tanımak için özel ders kitapları veya faydalarını kullanmak için web siteleri ve sayfaları geliştirirken size tavsiyede bulunuruz.
Çiçek tablosu
Bu nedenle, ana etiketler ve parametreleri ile birlikte, şimdi renk kodlarına bakalım HTML'ye bakalım. Metin rengini, sayfanın veya aynı bireysel öğelerin rengini ayarlamanıza yardımcı olur.
Başlangıç \u200b\u200bweb yöneticileri, her gölgenin kodlarını veren özel renk tabloları olduğu bilinmelidir. Sadece tabloda değil, sadece adını İngilizce olarak belirten sadece 16 temel renk vardır. Ayrıca, istenen gölgeyi ayarlayarak, açık ve karanlık kelimeleri de ekleyebilirler.
Ayrıca her türlü tespit var.
Tabloları kullanmanın daha uygun olduğunu unutmayın. Onlar onaltılık renk kodu verilir. Aynı zamanda, bu gölgeyi hemen görebilirsiniz. Her kod bir kafes işareti ile başlar, ardından kırmızı, yeşil ve mavi yoğunluğunu karakterize eden üç çift işaret.
Bu kod, ihtiyacınız olan etiketi kopyalamak ve yerine koymak için yeterlidir.
Sayfa kodu nasıl görülür
Web sayfaları oluşturmakla ilgileniyorsanız, muhtemelen istediğiniz sitenin HTML kodunu veya çok sık ziyaret ettiğinizden birini görmek istiyorsunuz.
Ama bunu nasıl yapılır? İki yol var, oldukça basit ve anlaşılabilir. Birincisi, ihtiyacınız olan sayfayı açmak ve CTRL + U tuş kombinasyonuna basın. Yeni pencere, izleyebileceğiniz ve keşfedeyeceğiniz sayfanın kaynak kodunu görünecektir.
İkinci yol, sol fare düğmesine basmak ve "kaynak kodunu" seçin. Ancak yine de, ilk yolu kullanmanızı öneririz, çünkü sıcak anahtarların kullanımı çok daha kolay ve daha uygun.
Kodu okuyarak, buna benzeyen "Yorum" etiketinde öngörülen yorumları da görüntüleyebilir:. Aynı zamanda, yorumun kendisi bir ünlem işareti sonra yazılır. Tarayıcıda görüntülenmez. Ve temel olarak yazılmıştır, böylece diğer programcılar ve web tasarımcıları, bilgi bloğunun aşağıda olduğunu, neden belirli bir kodun belirtildiğini anlayabilir.
sonuç
HTML'deki kodlar ilk bakışta göründüğü kadar zor değil. Özellikle iddiasızsanız ve basit siteler oluşturmak istiyorsanız, HTML'ye dayalı elektronik ders kitapları vb. Yaratmak. Ana etiketlerin ve İşaretleme ilkesinin çalışması fazla zaman almaz. Kendi projelerinizi yaratmaya başlamak için birkaç gün bile var.
Bu işaretleme dilini incelemeye karar verirseniz, daha sonra dikkatli olun. Sorunların çoğu tam olarak dikkate alınmasından dolayı ortaya çıkar: Olmayan çift etiketleri, yanlış yazılı parametreler, yazılar - Bütün bunlar, yeterince uzun süre arama yapabileceğiniz hatayı çevirmek için tehdit eder. Ancak genel olarak, sayfaların HTML işaretlemesini incelemek oldukça ilginçtir.
Her web sayfasının ana HTML kodlarının genel yapısına sahiptir. Site sayfalarının en temel HTML kodlarına bakalım
En basit sitenin HTML kodu (web sayfası):
Metinsayfalar
Sitede, harflerin kaydı değeri yoktur, "HTML, Body ..." ve "HTML, Body ..." olarak kaydolabilirsiniz.
T. eGI ve HTML olarak tanımlanan belge koduna servis yapın.
- Sayfanın başının başladığını, sayfanın başlığı ve teknik bilgilerini önerir.
- Sayfanın başı sona erdi.
Etiketler açılıyor <тег> ve kapanış тег> . Kapatmak için gerekmeyen etiketler var. Bazı etiketler hataları bile kapatmaz, ancak kapanırsa her zaman yakınlar.
Sayfa Metni - Bu etiketler arasında, sayfanın tüm içeriği var - metin, resimler, linkler vb.
- Belge sona erdi. Kural olarak, t Tag U. değirmen belgenin sonundaki aviller.
Metin Biçimlendirme Etiketleri
-
- Bunlar başlıklardır.
Numara ne kadar küçük olursa, yazı tipi daha büyük başlıkta olacaktır, her bir başlık türünün boyutunu yapılandırabilirsiniz. Bu etiketlere inanılıyor ,
Arama motorları tarafından en favori etiketler, bu arama motorları aracılığıyla, içerik konusunu bu etiketler aracılığıyla tanımlar. Etiketler
-
Kapatacağınızdan emin olun.
Örnekler:
İkinci seviye başlık etiketi
- z.İkinci Seviye Aglon
Dördüncü seviyenin başlığı
- z.dört seviyeli agona
Metin biçimlendirme için bile, Etiketler genellikle hizmet eder - , , , , .
Metin yağ paylaşıyor
Metin yağ paylaşıyor - Analog Etiket Eğimli metin - Analog Altı çizili metinSuperscript - X. 2 Alt dizin - X. 2 Monoshyry Metin - Basılı bir makine olarak
Bütün bu etiketler bilateraldir ve kapanmalıdır. Etiketler kombinasyon halinde kullanılabilir. Örneğin:
Yağ, eğimli ve altı çizili metin
Kural olarak, etiketler açıldığı şekilde bu şekilde kapanır. Siparişi değiştirirseniz, bir şey değiştirmek mümkündür, ancak karmaşık metin biçimlendirmesiyle sorun yaşayacaksınız.
Çizgi çeviri ve metin blokları
Etiketler başlıkları (
-) Stil tablolarında aksi belirtilmedikçe, bir dize ("ENTER") sonra transfer oldum. HTML hedefine metni yazdığınızda, satır transferleriniz dikkate alınmayacak, metin başlıklar veya özel etiketlerden önce üst üste gidecektir.
- dizeyi koyar. Kapanış etiketi gerekli değildir. Satırlar arasında büyük bir boşluğa ihtiyacınız varsa, örneğin bu tür etiketleri kullanabilirsiniz.
- Beş sıra çeviri.
- Yatay bölme çizgisi:
Birçok etikette, örneğin etikette özel öznitelikler kullanılabilir.
Kalınlığını belirleyebilirsiniz:
http://site.ru/image.png. - buresmin adresi.
http://site.ru/"> Siteye git.
Neredehttp://site.ru/
- Bağlantının yol açtığı site,Siteye git. –
link adı , sözde çapa.
Bağlantı kodunda öznitelikhedef \u003d." _Boş. " - Bağlantı yeni bir pencerede ve resim kodunda açılacaksınır \u003d "0" - Resmin bir çerçeve olmayacak.
Listeler
Listeler aşağıdaki HTML'ler tarafından oluşturulur:
Tablolar
Tablolar bu HTML etiketlerinden daha karmaşık bir unsurdur, bir yazıya ayrılabilirler, burada basitçe en basit tablonun bir örnek kodunu göstereceğim:
İçerik
Koddaki her etiketin ardından satır çevirisi, bir HTML kodunu düzenleme kolaylığı için ayarlanır. Aynı tablo kodu aşağıdaki gibi eklenebilir:
İçerik
Bu, sitenin sitesinin ana yapısıdır. Temelleri bilmek, daha karmaşık hale getirebilirsiniz.
Temel Kodlar HTML Güncelleme: Yazar tarafından 10 Nisan 2017: yönetici.