HTML yayılma etiketinin açıklaması: nedir, nasıl kullanılır, özellikler

  • 29.05.2019

Bilginin sunumu aracılığıyla modern fikir Hipermetin özünde saçmadır, ancak bu böyledir ve bu şekilde çalışır. Bununla tartışamazsınız ve bunu hesaba katmanız gerekir.

Bakış açısından modern dil programlamada, verilerin nasıl temsil edildiği önemli değildir: katı türler ve zorunlu bir ön açıklama veya türlerin olmaması ve gerekli açıklama algoritma yürütülürken dil kendisi "düşünecektir".

Tarayıcı, JavaScript veya sunucu tarafı dili tarafından "anlaşılmayan" hiçbir şeyin yürütülmeyeceğini unutmamak önemlidir. Mevcut koşullar altında bir blok etiketi satır içi etikete "dönüşebilir", ancak küçük harfli bir etiket blok etiketine dönüşemez.

HTML sayfa mantığı

Tarihsel örnek - HTML etiketi yazı tipi. Bir süredir kullanılması “tavsiye edilmiyor”. Motivasyon “tavsiye edilmez” karakteristik bir özelliktir modern programlama. Sürümler arasında "yukarı doğru" kod uyumluluğu eksikliği ve sürümlerin sıralı geliştirilmesinde istikrarın olmaması yazılım bileşenleri ve kavramlar da.

Aslında HTML'deki span etiketi çok daha pratiktir: yalnızca yazı tipine gönderme yapmaz. Span, belirli içeriğin görüntülenmesinin ve kullanımının birçok özelliğini değiştirebilir.

Dizeler her zaman herhangi bir verinin birincil temsili olmuştur, ancak programlama dilleri bunu her zaman sözdiziminde tanımlamamıştır ve programcılar, kullanılan sayının veya Boolean değerinin her zaman bir dize olduğunun farkındadır.

Hipermetnin saçmalığı ve nesnelliği HTML uygulamaları: düzen, içeriği (verileri) resmi olarak tanımlamak için bir dizi etiketin (eşleştirilmiş veya tek) kullanılmasıdır. Ne açıklama ne de içerik makul bir şekilde bilgi olarak tanımlanamaz. Birincisi, bazı içeriklerin (verilerin) uyduğu belirli bir çerçevedir.

Çerçeve, yapıda kesin olarak tanımlanmış yerleri kaplayan, sağlam bir şekilde sabitlenmiş tuğlalardan (etiketlerden) yapılmıştır ve göreceli unsurlar, "kart düşerken" bulunurlar.

Tabloları veya blok öğelerini kullanarak verileri görüntülemek için sayfayı bölümlere ayırabilir ve ortaya çıkan yapıyı diğer etiketlere sahip verilerle "doldurabilirsiniz". Genellikle küçük harf olarak adlandırılırlar, yani mevcut fırsatı ve güncel içeriği belirleyecek şekilde konumlandırılırlar.

HTML yayılma örneği: nedir ve nasıl açıklanır

Yeşil kutu, tarayıcının görüntülediği kodun bir örneğini gösterir gri arka plan. Block div öğesi, kodda onu takip eden metnin ortasında sona erdi. İlk öğe scSpanLine sınıfına sahip bir etiketti. Daha sonra scSimpleSpan sınıfı ile span etiketi kullanılarak bu metnin iki bölümünün vurgulandığı metin yerleştirildi.

İkinci ve üçüncü satır içi öğeler tam olarak kodda yazıldığı gibi bulunur.

Bu örnek Span'ın HTML'de nasıl çalıştığını gösterir. Bunun sadece bir veri dizisi olduğu açıktır. Açık olmayan bir şey daha var: Geliştirici bu etiketi istediği gibi tanımlayabilir, hatta kuralı bile uygulayabilir:

  • KONUM: mutlak;

Hiçbir etkisi olmayacak. Koordinatların ve boyutların belirtilmesi de herhangi bir rol oynamaz. HTML'de aralıkları ortalamak veya hizalamak boşunadır. Bu arada etiket çok pratiktir ve pratikte talep görmektedir. Bu vurgulamak için çok uygun bir sarmalayıcıdır önemli an V genel akış veri.

Önemli olan bunu anlamak yayılma HTML'si bir dizenin görünümünü değiştirmenin veya bir dizenin bir bölümünü görüntüleme kurallarını netleştirmenin bir yoludur.

Hat bilgisi sağlama mantığı

Betimleyici bir dil kullanın HTML verileri amacına göre yani veriyi anlatmak açısından dündür. Bir sayfanın gövdesini oluşturmak için sunucu tarafı dili kullanmak modern bir davranıştır ve "tüm" geliştiriciler bunu yapar. İçerik yönetim sistemleri (CMS) özellikle bu konuda isteklidir.

Canlı web siteleri oluşturmanın gerçek uygulaması ve ihtiyacı, sayfa çerçevesinin ve içeriğinin dinamik yönetimidir. Bu anlamda, HTML'deki span etiketi (basitçe dinamiktir), sonuç olarak JavaScript çalışması, anında dinamik içerik oluşturmanıza olanak tanır.

JavaScript, kaynak metinden biçimlendirilmiş metne ve onun yerine geçen metinlere dönüştürücü olarak çalışır gerekli etiketler gerekli olanlarla CSS kuralları sayfanın blok öğelerinin çerçevesi boyunca dağıtılan giden akışa.

Geliştiricinin profesyonelliği ne kadar yüksek olursa, sayfanın blok (veya tablo) düzeni o kadar fazla olur ve HTML'de statik yayılma etiketlerinin varlığı o kadar az olur. Bu ne veriyor? Dinamik. JavaScript, gelen bir dize akışı üzerinde çalışabilen ve bunu geliştiricinin amaçladığı şekilde oluşturabilen bir algoritmadır. Span etiketleri şurada görünecek: doğru yerde ve doğru zamanda.


Başlıklar
İçin
Etiketler başlıkları tasarlamak için kullanılır

...


Sanırım herkes bunu anlıyor, zor değil.Sonraki
Yazı tipi (tür) ve yazı tipi rengi

Burada iki yol var. İkincisi daha sonra anlatılacaktır. İlk önce bir etiket kullanılır

Niteliklerle yüz Ve renk sırasıyla:

Verdana yazı tipi

Verdana yazı tipi


kırmızı yazı tipi

kırmızı yazı tipi


Gece Mavisi renkli yazı tipi

Gece Mavisi renkli yazı tipi


Gece Mavisi renkli yazı tipi

Gece Mavisi renkli yazı tipi


Bu örnekte görüldüğü gibi rengin bir adı ve sayısal değeri vardır.
(Gece ​​Yarısı Mavisi=#191970). Çiçekler hakkında çok şey yazılabilir ama ben
Bir bağlantıya odaklanacağım:

Renk seçimi. Web uyumlu ve web akıllı renkler kullanıma uygundur.


Metni Biçimlendirme: Etiket Kullanma ve özellik stil (1)

Etiket seçilen (biçimlendirilmiş) bir metin parçasını ifade eder:
metin
. Niteliklerin hemen belirteyim
(özellikler) etiketle çalışma ile de kullanılabilir
Etiketler

VE

. Ancak etiket

Şunlar için geçerlidir:
bize her zaman uymayan paragraf (her ne kadar bir paragrafı biçimlendirirken
bunu kullanmak mantıklıdır). Etiket

kullanılabilir
aynen - bu daha çok zevk meselesi. Daha fazlası var
geniş bir uygulama yelpazesine sahiptir ve çok sayıda ek özellikler.
Ancak bu artık metin biçimlendirmesi için geçerli değildir. Bu nedenle
kesinliğe odaklanalım .

Kayıt
Metin kendi başına herhangi bir anlam taşımamaktadır.
Etiket metne atfedilmesi amaçlanan
herhangi bir mülk. Şimdi listelemeye çalışacaklarım bunlar
az ya da çok mantıksal bir sırayla.

Yazı tipi rengi

Yazı tipi rengi bir etiket kullanılarak ayarlanabilir yukarıda tartışıldığı gibi. Şimdi etiketi kullanalım ve özellik stil:

kırmızı yazı tipi - kırmızı yazı tipi

Aynı şekilde dijital renk değerlerini de ayarlayabilirsiniz (daha fazla ayrıntı için yukarıya bakın.

Yazı tipinin yazı tipi (türü)

Etiket kullanarak bir yazı tipinin yazı tipini (türünü) ayarlamanın yolu hakkında Geçen sefer de bu tartışılmıştı.

Şimdi ikinci yönteme bakalım - yapıyı kullanarak

yazı tipi

Yerinde ***
yazı tipinin yazı tipini (türünü) değiştirmek gerekir. Kural olarak yerine geçerler
ad belirli bir yazı tipi değil, bütün bir yazı tipi ailesidir; örneğin, Verdana, Times vb. şunu elde ederiz:

Verdana yazı tipi Times yazı tipi

Yazı tipi boyutu

Yazı tipi boyutunu belirtmek için yapı kullanılır

yazı tipi

Boyut
yazı tipi belirlenebilir çeşitli şekillerde. Belki de en bariz ve
basit - *** yerine aşağıdaki yedi değerden birini değiştirin:

xx-büyük, x-büyük, büyük, orta, küçük, x-küçük, xx-küçük.

Sonuç:

çok çok büyük yazı tipi
çok büyük yazı tipi
büyük yazı tipi
orta yazı tipi
küçük yazı tipi
çok küçük yazı tipi
çok çok küçük yazı tipi

Yazı tipi boyutunu Word'deki puntolarla (pt) tanıdık bir şekilde belirtebilirsiniz. 1 puan 1⁄72 inç'e eşittir. Örnekler:

12pt

36pt

Bu örneklerde 12pt, 36pt değerleri *** yerine kullanılmıştır. genel formül yazı tipi . Ayrıca pikselleri de kullanabilirsiniz:

yazı tipi 12 piksel
yazı tipi 36 piksel

Yukarıdaki boyutlar mutlaktır. Ancak yazı tipi boyutu ayarlanabilir göreceli olarak- yüzde olarak:
yazı tipi boyutu orijinalin %150'si

yazı tipi boyutu orijinalin %150'si


veya orijinal yazı tipindeki "m" harfinin genişliğine göre (karşılık gelen ölçü birimi denir) onları):
yazı tipi boyutu orijinalden 1,5em

yazı tipi boyutu orijinalden 1,5em


Yazı tipi ağırlığı (doygunluk)

Bu basit bir etiket kullanılarak belirtilebilecek bir şeydir
kalın metin

kalın metin

Kullanarak şu şekilde yapılır: kalın yazı tipi

kalın tip


Bu yöntemin avantajı, yazı tipi ağırlığı değerinin yanı sıra gözü pek değerler de kullanılabilir daha cesur ve daha hafif, “farklı ağırlıklarda” bir yazı tipi elde etmek (içinde bu durumda göreceli değerlerden bahsediyoruz). Ve varsayılan değer normal- normal yazı tipi.

Yazı tipi stili

İtalik, aşağıdaki etiketlerden herhangi biri kullanılarak elde edilebilir: ve şu şekilde:
italik

italik


Yerine yazı tipi stili:italik yazabilirsin yazı tipi stili:eğik ve sonuç italik olmamalı, eğik ("açısal") bir yazı tipi olmalıdır. Ancak bu her zaman işe yaramaz.

Başkent

Herkese selam!

Andrey yine seninle.

Bugün size dersin 2 versiyonu sunulacak. Bir tane metin formu– gözlerinizin önünde görüyorsunuz ve ikinci VİDEO – onu indirmeniz gerekecek.

Bizce video versiyonu sizin için daha anlaşılır olacaktır.

Yani, ek hakkında HTML öğeleri

Diyelim ki bazılarını seçmeniz gerekiyor ayrı kelime metinde (farklı bir renk ve arka planla diyelim) veya resim ve onunla ilgili metin tablo hücresinde üstte ve sağda olacak ve sayfanın ana içeriği diyelim ki altta ve sol kenara daha yakın. İlk örneğe gelince, bunu bir etiketle yapabileceğinizi söyleyeceğim. bir set ile gerekli parametreler, ancak yasaklı etiketler arasındadır (yeni tarayıcılar desteklemeyebilir) ve arka planı değiştirme özelliği yoktur.

Bu gibi durumlarda, aslında kendi başlarına hiçbir şey yapmayan iki özel etiket sağlanır. Ama uygulandığında istenilen stiller onlarla her şeyi başarabilirsin. Sitenin tüm sayfasını oluşturmak için genellikle yalnızca bu iki etiketi kullanabilir ve bunlara stil uygulayabilirsiniz.

Yani bunlar etiketler

Ve .

Aynı amaç için kullanılıyorlarsa aralarında ne fark var?

div öğesi - Bu blok etiketi ve bizim bildiğimiz herhangi bir etiketi (listeler, resimler, tablolar...) içerebilir.

açıklık elemanı- bu bir satır içi etikettir ve yalnızca metin için geçerlidir (bir metin parçasını farklı bir renkle vurgulayın).

Bu etiketlere uygulanan stiller, incelediğimiz tüm stiller. Herhangi bir stilin kullanımında herhangi bir kısıtlama yoktur.

Bu etiketler için en tipik olan stillere bakalım. Diğer tüm etiketler için geçerlidirler ve aynı şekilde kullanılırlar; yalnızca bu etiketlerle daha sık kullanılırlar (özellikle

) .

Başlamak istediğim ilk yer, elemanların konumlandırılmasıdır.

Bu özellik:

konum— bir öğenin konumunu ayarlar veya tanımlar.

Değerler:

statik- varsayılan olarak. Nesnenin konumu akım tarafından belirlenir HTML işaretlemesiİle standart kurallar.

mutlak- nesnenin konumu, ana nesnenin konumuna göre veya gövde nesnesine göre belirlenir. akraba— Nesnenin konumu, varsayılan olarak göründüğü konumdan uzaklığa göre belirlenir.

sol/üst— öğenin konumunu sol/üst kenara göre ayarlar veya belirler.

Değerler:

X– yüzde veya piksel cinsinden sayı.

oto— varsayılan değer.

Bir örneğe bakalım:

XHTML

Herhangi bir blok içeriği!!!

Bu örnek, 300 piksel genişliğindeki kutumuzun, varsayılan olarak göründüğü yere göre 350 piksel aşağıya ve 200 piksel sola hareket edeceğini göstermektedir.

Aşağıdaki önemli özellik:

marj– bloğumuzun dört tarafındaki komşu nesnelere olan girinti miktarı.

Değerler:

kenar boşluğu— değeri ayarlar üst girinti nesne

kenar boşluğu-sol— nesnenin sol girinti miktarını ayarlar

kenar boşluğu-sağ— nesnenin doğru girinti miktarını ayarlar

kenar boşluğu-alt— nesnenin alt girintisinin değerini ayarlar

XHTML

Herhangi bir blok içeriği!!!

Etrafında her taraftan 30px kenar boşlukları olan bir blok oluşturduk.

Başka ne üzerinde durmak isterim:

dolgu– özellik, nesne ile sınırları arasına eklenen boşluk miktarını belirtir.

Değerler:

dolgulu alt— nesne ile alt kenarlığı arasına eklenen boşluk miktarını belirtir.

sol dolgu— nesne ile sol kenarlığı arasına eklenen boşluk miktarını belirtir.

sağ dolgu- nesne ile sağ kenarlığı arasına eklenen boşluk miktarını belirtir.

dolgulu üst- nesnesi arasına eklenen boşluk miktarını belirtir üst sınır.

XHTML

Herhangi bir blok içeriği!!!

İçerikten tüm kenarlarına kadar 30px dolgulu bir blok oluşturduk.

Ve etiketi kullanan bir örneğe bakalım:

Diyelim ki şöyle bir yapımız var:

Herhangi bir metin!

Kelime metnini yapmak istiyoruz sarı arka plan mavi harflerle. Bunu yapmak için onu bir etiketin içine alacağız ve uygun stilleri uygulayacağız.




Bilgisayar yardım sitesi

© Telif Hakkı 2024,
rzdoro.ru -Bilgisayar yardım web sitesi

  • Kategoriler
  • Programlar
  • Microsoft Ofisi
  • internet
  • Linux
  • Programlar
  • Microsoft Ofisi
  • internet
  • Linux