HTML Vurgulama: Kalın, italik ve renkli metin. Html'de güzel bir yazı tipi nasıl yapılır: boyutlar, renkler, html yazı tipi etiketleri i etiketiyle

Etiket HTML'de bir metin parçasını italik yapmak için kullanılır.

HTML etiketi fiziksel biçimlendirme etiketlerini ifade eder. Bir etiket kullanarak yazı tipi stilini değiştirin doğada üsluptur.

Ayrıca etiketini kullanarak HTML metnini italik yapabilirsiniz. Bu durumda, metin mantıksal olarak vurgulanmış (anlam bakımından), "altı çizili" olarak kabul edilecektir.

HTML5 spesifikasyonu, mantıksal biçimlendirme etiketlerine öncelik verilmesini önerir: önemli metin parçaları - bir etiket, vurgu - bir etiket, alt başlıklar - etiketler, metin vurgulama - bir etiket. Bir etiket kullanarak metni italik hale getirin yalnızca seçim karakteri herhangi bir mantıksal biçimlendirme etiketiyle eşleşmezse izler.

Makalede her türlü metin seçimi açıklanmıştır:

Sözdizimi

italik metin

Tarayıcı ekranı

Kullanım örneği HTML kodunda




HTML'de italik etiket


Herhangi bir sitede bulunabilecek basit metin. Ve işte italik metin (

Herkes bu etiketleri bilir , , , sunumdur ve bu nedenle, "yapı, sunum, davranış" paradigmasına dayalı olarak, kullanımları teşvik edilmez. Öğeler çok daha tanıdık geliyor , , ... Bu, yıllarca süren geliştirme uygulamaları için böyleydi. Bununla birlikte, HTML5'in gelişiyle bu öğelerin anlambiliminde çok şey değişti. Şimdi anlam ve kafamızda karışıklık olan 4 yeni etiketimiz var.

vs

Daha önce, düzendeki tüm ders kitapları "kullan yerine ”, Ve bu yarı doğruydu, o zaman bugün böyle bir alışkanlık kötü bir anlamsal şaka oynayabilir. Mesele şu ki, HTML5 yazarları, okuyucunun dikkatini çekmek için metin bölümlerini vurgulamak, ancak metnin anlamında veya tonlamada bir artış olduğunu ima etmek. Spesifikasyon, bir belgedeki anahtar kelimeleri işaretlemek için kullanım örnekleri sağlar

frobonitor ve barbinator bileşenler kızartılır.

Ve yol açar (gazetecilikte bir makalenin ilk paragrafı)


Evcil tavşan tarafından "sahiplenen" kedi yavruları


Altı terk edilmiş yavru kedi, beklenmedik yeni bir anne figürü buldu - evcil bir tavşan.


Veteriner hemşire Melanie Humble, üç haftalık yavru kedileri Aberdeen'deki evine götürdü.


Sırasıyla daha önce olduğu gibi, içeriğinin artan değeri anlamına gelir.

vs

Şu andan itibaren genel çevreden sıyrılan ancak duygusal bir çağrışımı olmayan metinler içerir. Bence, tipografik geleneğin italik yazıyı önerdiği durumlarda kullanmak mantıklıdır (örneğin, yabancı dildeki kelimeler, terimler vb.)

Aspera reklam Astra başına - Latince'den çevrilen söz, "Dikenlerden yıldızlara" anlamına gelir.

aynı şey, metnin belirli bir bölümünün vurgulanması, duygusal vurgu anlamına gelir. Bu, konuşmada kelimeleri bir sesle vurguladığımızda (tonlama, ses seviyesi vb.)

Yürütmek yapamam, Merhamet et.

Sözleşmeyi dikkatlice okuyun!

"Küçük harfli metin" (kurumsal lisans veya yasal adres vb. Gibi yasal bir formalite olan bilgiler), kural olarak, görsel kullanıcı aracılarında daha küçük bir yazı tipi ayarlayan bir sınıfa sahip bir öğeyle işaretleniriz. Şimdi cephaneliğimizde yeni bir eski belirdi anlamsal öğe - .

Holyvar hakkında

Daha erken üstü çizili metinden başka bir şey değildi. Şimdi alaka düzeyini kaybetmiş bilgiler sunar.
Ayrıca bir öğemiz var , görsel kullanıcı aracılarında varsayılan olarak üstü çizili metinle sonuçlanır. Belgedeki değişiklikler anlamına gelir ve ilk bakışta amaçları aynı görünebilir. Ancak burada ince bir nokta var. Bir çevrimiçi mağazadaki bir ürün sayfası örneğini düşünün.
Birinin üstü çizili iki fiyat gösterebilir. Onu bir elementle işaretliyoruz ... Bu, eski fiyatın geçerliliğini kaybettiği anlamına gelir (ne zaman olursa olsun, gerçeğin kendisi önemlidir). Neyin olmadığı nasıl kontrol edilir ? ima eder belgede yapılan değişiklikler(önemli olan şu ki bir noktada belge değiştirildi). Bizim durumumuzda, yeni belge zaten ilgisiz bilgiler içeriyor.

Yeni anlambilim ve eski belge türü

Bilinmeyen bir nedenden ötürü, doctype'ı yenisiyle değiştiremez ve HTML 4.01'de resmi olarak dizilemezseniz, umutsuzluğa kapılmayın. Eski yeni unsurları yeni anlamlarla kullanın ve zamanla kendinize teşekkür edeceksiniz. Belki birisi bunun yanlış olduğunu söyleyecektir, ancak sonuçta bu unsurlar hariç geçersiz bile değil. Ek olarak, HTML5 geriye dönük uyumluluk göz önünde bulundurularak tasarlanmıştır ve aynısı eski öğelerin yeni anlambilimlerine de uygulanır. Hiçbir şey kökten değişmedi ve sadece anlamsal bir biber eklendi.

Bu yazıda nasıl metin seçeceğimizden bahsedeceğiz. italik olarak HTML. Kalın metinde olduğu gibi, italik metin üç şekilde oluşturulabilir:

  • Etiket ben HTML;
  • Etiket em HTML;
  • CSS özelliği yazı stili.

HTML'de italik yapmak için üç seçeneği de ele alalım, bu konunun inceliklerini ve belirli durumlarda hangi yöntemlerin daha uygun ve doğru olduğunu tartışalım.

İtalik metin: etiket

Etiket ben (italik), etikete benzer b kalın metin için, italik metni fiziksel olarak vurgulamak için kullanılır (bu, yalnızca metnin stilinin değişeceği anlamına gelir). Etiket uygulaması ben:

Web sitesi oluşturucu "Nubex"

Böylece metnin gerekli kısmı etiketlerin arasına yerleştirilir. .

İtalik metin: etiket

Etiketi olmasına rağmen ben geçerli kalır, site optimizasyonu açısından etiketi kullanmak daha iyidir em mantıksal olarak önemli metin bölümlerini vurgulamak için. Bu, arama robotlarının etiketler arasına yerleştirilen metnin önemini hesaba kattığı anlamına gelir. :

Web Sitesi Oluşturucu "Nubex"

Sonuç:

Web Sitesi Oluşturucu "Nubex"

Ancak etiketlerin içine alınmış metnin ben ve em, neredeyse aynı şekilde görüntülenmelerine rağmen (tüm modern tarayıcılarda), özünde yukarıda belirtildiği gibi tamamen aynı değildirler. Bu nedenle, etiketleri gerektiği gibi kullanmanız gerekir: etiket em Metnin önemli bölümlerini çerçevelemek ve bir etiket kullanarak görsel italik tasarım uygulamak için HTML ben veya CSS stilleri. Şimdi italik metin seçimi için CSS stilleri kullanmaya bakalım.

CSS tarafından desteklenen italik metin

CSS'de yazı tiplerinin görüntü stillerini ayarlamak için özelliği kullanın yazı stili, aşağıdaki değerleri alabilir: eğik (italik metin), italik (italik) ve normal (normal yazı tipi).

Bunu hatırlamaya değer italik yazı tipi ve eğimliözünde aynı değildir. İtalik el yazısı metne benzer özel bir yazı tipidir ve eğimli normal bir yazı tipinin sağa eğilmesiyle oluşturulur.

Öznitelik uygulaması yazı stili pratikte:

CSS ile italik - "Nubex"

Sitelerimiz gerçekten büyük adım web geliştirmede.

Biz gerçekten yapıyoruz kalite Siteler.

Ancak bazı tarayıcıların özelliği ile metin yazdığı unutulmamalıdır. yazı tipi stili: eğik; italik metin olarak değil italik olarak yorumlanabilir.

Şimdi ana etiketleri inceleyeceğiz. Yapısını oluşturan sayfada hangi etiketlerin gerekli olduğu ile başlayalım.

Blok. En basit sayfanın yapısı

Site sayfası, uzantısına sahip bir düz metin dosyasıdır .html... Bu dosya HTML sayfasının metnini etiketlerle birlikte içerir. Bu dosya aşağıdaki etiketlere sahip olmalıdır: etiket , tüm sitenin metnini içermelidir (bu etiketin dışında yazılan her şey tarayıcı tarafından göz ardı edilecektir) ve içinde iki etiket daha bulunmalıdır: etiket sayfanın hizmet içeriği ve etiketi için - tarayıcı ekranında görünen ana metin için.

Etiketin içinde bulunan içeriğe hizmet vermek için , birçok farklı şey gelir, ancak şimdilik sadece ikisine ihtiyacımız var. Bu bir etiket , tarayıcı sekmesinde görünecek olan sayfanın adını ve etiketini ayarlayan <meta> , sayfa kodlamasını ayarlar (bu, öznitelikte ayarlanır <b>karakter kümesi</b> ve genellikle önemlidir <b>utf-8</b>, videoda bu konu hakkında daha fazlası, aşağıda birkaç paragraf olacak).</p> <p>Ayrıca etiketinden önce <html> inşaat genellikle yazılır <b>belge türü</b>, sitenin yapıldığı HTML dilinin sürümünü gösterir. Dilin şu anki sürümü beş numara ve bunun belge türü şöyle görünmeli -<!DOCTYPE html> .</p> <p>Öyleyse sayfanın temel yapısına bir göz atalım (bu örneği bir tarayıcıda çalıştırmak için, uzantısıyla bir metin dosyasına kopyalayın. <b>.html</b> ve bununla ilgili sorun yaşıyorsanız bir tarayıcıda açın - örneğin aşağıdaki videoyu izleyin):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bu başlık başlığı Bu, sayfanın ana içeriğidir.

Bu örneğin bir tarayıcıda nasıl göründüğünü öğrenmek için bu bağlantıya bakın.

Sanırım sayfanın temel yapısını okuduktan sonra, pratikte nasıl göründüğü konusunda hala kafa karışıklığı yaşıyorsunuz. Bu nedenle, size ilk HTML sayfanızı nasıl yapacağınızı ve bir tarayıcıda nasıl çalıştıracağınızı göstereceğim özel bir video yaptım (içinde size sayfa başlığı, kodlamalar, kod tasarımı hakkında da bilgi vereceğim). Bir göz atın ve ancak o zaman daha fazla okumaya geçin:

Artık en basit sayfaların nasıl oluşturulacağını öğrendiğimize göre, bir etiket içinde kullanılması gereken yararlı etiketleri keşfetmeye geçeceğiz. ... Bunlar paragraflar, başlıklar, listeler, bağlantılar ve diğer yararlı şeyler için etiketler olacaktır. Öyleyse başlayalım.

Blok. Paragraflar

Sayfanın ana unsurlarından biri paragraflar... Bir kitaptaki paragraflarla karşılaştırılabilirler - her paragraf yeni bir satırda başlar ve sözde kırmızı bir çizgiye sahiptir (bu, paragraf metninin ilk satırının hafifçe sağa doğru girintili olduğu zamandır). Varsayılan olarak kırmızı çizgi yoktur, ancak yapılması kolaydır (bundan sonra daha fazlası).

Etiketi kullanılarak bir paragraf oluşturulur

Böylece:

Bu başlık başlığı

Bu bir paragraf.

Bu başka bir paragraf.

Ve bir paragraf daha.

Bu bir paragraf.

Bu başka bir paragraf.

Ve bir paragraf daha.

Blok. Başlıklar h1, h2, h3, h4, h5, h6

Sayfada paragraflara ek olarak önemlidir manşetler... Bir kitabın başlıklarıyla da karşılaştırılabilirler - her bölümün kendi başlığı vardır (bu bölümün başlığı) ve kendi başlıklarına sahip olan paragraflara bölünmüştür. Eh, sayfanın ana metni paragraflar halinde.

Üstbilgiler oluşturuldu etiketleri kullanmak

,

,

,

,

,
... Farklı derecelerde önemleri vardır. Başlıkta h1 sahip olmalı tüm HTML sayfasının başlığı, içinde h2 - isim bloklar içindeki sayfalar h3 - alt blokların adı vb.

Tüm başlıklar varsayılan olarak kalındır ve farklı boyutlara sahiptir (bu, CSS aracılığıyla değiştirilebilir, ancak daha sonra bundan bahsedilecektir). Örneğe bakın:

Bu başlık başlığı

H1 başlığı

H2 başlığı

H3 başlığı

H4 başlığı

H5 başlığı
H6 başlığı

Bu ilk paragraf.

Bu ikinci paragraf.

Bu üçüncü paragraf.

Kod tarayıcıda şu şekilde görünecektir:

H1 başlığı

H2 başlığı

H3 başlığı

H4 başlığı

H5 başlığı
H6 başlığı

Bu ilk paragraf.

Bu ikinci paragraf.

Bu üçüncü paragraf.

Blok. Yağlı

Varsayılan başlıkların olduğunu zaten biliyorsunuz yağlı... Bununla birlikte, düz metni kalın da yapabilirsiniz - sadece etikete alın ... Örneğe bakın:

Bu başlık başlığı

Bu düz metindir ve bu yağlı Metin.

Kod tarayıcıda şu şekilde görünecektir:

Bu düz metindir ve bu yağlı Metin.

paragraf gibi başka bir etiketin içinde kullanılmalıdır. Bu durumda paragraflar, sayfanın genel yapısını (paragraflar ve başlıklar) ve etiketini oluşturur. b tek tek metin parçalarını kalın yapar.

Blok. İtalik

Yağlı ek olarak, ayrıca yapabilirsiniz italik etiketi kullanarak :

Bu başlık başlığı

Bu düz metindir ve bu italik Metin.

Kod tarayıcıda şu şekilde görünecektir:

Blok. Listeler

Paragraflar ve başlıkların yanı sıra, sayfanın başka bir önemli unsuru daha vardır - bu listeler... Bu tür öğeler muhtemelen tüm İnternet kullanıcılarına aşinadır. Nokta nokta bir şeyin listesi (bir liste). Listedeki her öğenin yanında genellikle içi dolu bir daire bulunur (buna işaretleyici liste).

Listeler etiketi kullanılarak oluşturulur

© 2020 Mobil ve Bilgisayar Cihazları