Merhaba sevgili blog okuyucuları! Bu makale üzerinde durulacak metin biçimlendirme etiketleri... Kalın veya italik metin en iyi örnektir. Ayrıca bazı etiketlerin sitenin dahili optimizasyonu üzerindeki etkisini ve bunların yazım kurallarını da ele alacağız. Bunu yukarıdaki makalede okuyabilirsiniz. Bu arada, benzer metin tasarım öğelerini birçok metin düzenleyicide, örneğin Word'de bulabilirsiniz.
Etiketler 2 türe ayrılır: blok ve satır içi etiketler. İlkini kullanırken, metnin bir bölümünün içeriğini (satırlar, tek tek parçalar veya kelimeler), ikincisi ise değiştirebilirsiniz. Bu makalede inceleyeceğimiz biçimlendirme etiketleri ağırlıklı olarak küçük harflidir.
Etiketleri yazma kuralları ve sırası
Başlangıç ve bitiş etiketlerinin ne olduğunu zaten biliyorsunuz. Değilse, bu materyalin en başındaki makaleyi okuyun. Kısacası, iki tür etiket vardır: tek etiketler (örneğin, yeni bir satıra kaydırma) ve kapsayıcı (eşleştirilmiş). Bu nedenle, tüm metin biçimlendirme etiketleri eşleştirilmiş... Bu, herhangi bir öğenin bir başlangıç ve bitiş etiketine sahip olduğu ve seçimin bunların arasına yerleştirilmesi gerektiği anlamına gelir. Örneğin, bir ifadenin doğru seçimi şöyle görünür: Seçili snippet
Tarayıcı bu parçayı işlediğinde aşağıdaki metni göreceksiniz: Seçilen snippet. Bu arada, tüm etiketler RSS beslemesinde () görüntülenmez.
Etiketleri yazarken ana şey onları kapalı tutmaktır. Aksi takdirde, sayfadaki tüm metinler kalın olacaktır (etiketli örnekte ). Ancak, belirli bir parçayı aynı anda hem italik hem de kalın olarak vurgulamanız gereken zamanlar vardır. Ancak bu eylemi gerçekleştiren bir etiket yoktur. Bu durumdan çıkmanın tek bir yolu var: aynı anda iki etiket kullanmak. Bunları hangi sırayla kullandığınız önemli değil. Bu nedenle, metni aşağıdaki gibi etiketlerle yazarak:
Seçili snippet
veya bunun gibi:
Seçili snippet
yine de alacaksın Seçili snippet italik ve aynı zamanda kalın harflerle. Bununla birlikte, ilk seçeneği kullanmak tercih edilir, çünkü başlangıçta tek ve doğru olan buydu. Ayrıca, ayarlara bağlı olarak her tarayıcının etiketleri farklı şekilde () işleyebileceğini unutmayın. Şimdi biçimlendirme etiketlerinin kendilerine geçelim.
Kalın ve italik metin - etiketler , , ve
En Popüler Metin Biçimlendirme Etiketleri - Vurgulama gözü pek ve italik olarak... Genellikle bir parçaya önem vermek için kullanılırlar. İlk durum, içeren bir parçayı seçmeye yarar. kullanışlı bilgi veya anahtar kelimeler. İtalik, kalın metinle aynı amaçlar için kullanılır, ancak bilgiler daha az önemlidir, çünkü italikler gövde metninin arka planında kalın metne göre daha az görünür.Önce düşünün kalın yazı... Bu eylem için kullanılan iki etiket vardır - ve ... Farklılıklar dış görünüş numara. Her ne kadar herhangi bir tarayıcının her bir öğeyi farklı şekilde yorumlayabildiği göz önüne alındığında, farklılıkları görebilirsiniz. Etiketlerdeki metin böyle görünüyor ve tarayıcı tarafından önceden işlenmiş biçimde:
Güçlü etiketlerdeki metin
b etiketlerindeki metin
Ve işte sayfanın kaynak kodunda bu iki satır nasıl görünüyor:
Güçlü etiketlerdeki metin b etiketlerindeki metin
durumunda da aynı durumu gözlemleyebiliriz. italik etiketler ve ... İki örnek arasındaki farkları bulmaya çalışın:
em etiketlerindeki metin
Etiketlerdeki metin I
Ve burada kaynak:
em etiketlerindeki metin Etiketlerdeki metin I
Bu nedenle, kalın ve italik olarak kabul edilen etiketler aslında farklı değildir, ancak o zaman neden örneğin etikete ihtiyacımız var? varsa ? Sonuçta, ikincisi yalnızca bir karakter içerir (parantezleri saymaz) ve bu nedenle yazması daha kolaydır. Ve mesele şu ki, etiketler ve etkilemek. Anahtar kelimeleri bu etiketlerle çevrelerseniz, web sitesinin tanıtımı üzerinde faydalı bir etkisi olacaktır.Önemli olan aşırıya kaçmamaktır - etikette maksimum metin %5 kalın metin olmalıdır. ve etikette aynı miktarda italik .
Metinde sadece bir anı vurgulamak istiyorsanız, etiketi kullanın. veya ... Genel olarak, arama motorlarının da bu etiketlerdeki metni daha önemli olarak gördüğünü düşünüyorum. dahili optimizasyon hala daha az etkiye sahipler ve .
Eğik çizgi metin etiketleri - , ve
Şimdi, metin stilinde bir özellik kullanan birkaç etikete bakalım. Sizin için en iyi bilinen metin editörleri — etiket
veya altını çizin. Bu etiket sıralamayı etkilemiyor (bildiğim kadarıyla), ancak bazı metinleri vurgulamaya ve ona odaklanmaya yardımcı olacak. Bu etiketi kullanmanın bir örneğini hemen yukarıda verdim. Amaca benzer iki etiket daha var - ve ... Her ikisi de üstü çizili metin işlevi görür. Bu etiketi herhangi bir durumda kullanabilirsiniz: bir belgeyi (veya daha doğrusu bir kısmını) güncellerseniz, eskisinin üzerini çizebilir ve yenisini ekleyebilirsiniz; materyalin konusundan sapan bir şey yazacaksanız; ahlaki ve etik standartlara uymayan bir şey.
Bu iki etiket arasındaki farklar yalnızca yazı, bunun sonucunda birincisini kullanmak tercih edilir, çünkü ilk olarak, yazmak daha uygundur ve ikincisi, sayfanızda daha az HTML kodu olacak ve arama motorları buna bayılacak.
Etiket ve nitelikler - metnin yazı tipi parametreleri
Şimdi, nitelikler olmadan kullanılmayan bir etiket düşünün. Bununla, belirli bir metin parçası için parametreler ayarlayabilirsiniz. Genel olarak, artık (basamaklı stil sayfaları) kullanılması tercih edilir, çünkü sayfanın tüm HTML kodunu büyük ölçüde kısaltabilirler. Yani, aynı etikete bakalım . Onun için her şey var üç nitelik:
- yüz- yazı tipinin kendisi. Örneğin, Arial, Courier veya Verdana. Birkaç tane sıralayabilirsiniz, tk. tüm kullanıcıların geniş bir yazı tipi seti yoktur ve yüz özniteliğine birkaç tane yazarak, tarayıcı hangisini kullanacağını veya daha doğrusu sistemde hangisinin bulunduğunu seçebilecektir;
- boy- metnin boyutunu belirten bir özellik. Hem keyfi birimlerde hem de piksellerde ifade edilebilir;
- renk- metin rengi. Bu özellik hem HTML kodlarında hem de kelimelerde kullanılabilir. İlki #FFFFFF biçimindedir (burada F, A'dan F'ye herhangi bir sayı veya harftir) ve ikincisi yazılır basit kelimelerle(örneğin, kırmızı kırmızıdır).
Etiketteki metin böyle görünüyor her özniteliği kullanarak:
Bu metnin boyutu 6 pikseldir
Bu metin kırmızı Bu metin Arial yazı tipindedir Bu metin kırmızı ve 5pxVe işte yazılı kodu işledikten sonra göreceğiniz şey: 
Bloklu metin tasarım öğeleri - üstbilgiler -, paragraf
, paragraf
Son olarak hemen hemen her belgede kullanılan blok elemanlara bakacağız. Bunlar başlık ve paragraf etiketleridir. İlkini düşünelim. 6 tür başlık vardır ve her birinin kendi etiketi vardır. Her türün yalnızca kendi seri numarası vardır ve etiketler kullanılarak kaydedilir.
, ,..., ... İşlendiğinde tüm başlıklar şöyle görünür:
... İşlendiğinde tüm başlıklar şöyle görünür:
Kelime başlığından sonraki sayı, etiketteki sayıyla eşleşir
Şimdi paragraf vurgulama etiketi hakkında konuşalım.
Bu etiketin işlevi, metni diğer benzer metinlerden boş bir satırla ayırmaktır. Bir belgenin kaynak koduna bakarsanız, aşağıdakileri görebilirsiniz:
Yeşil kutularda bir paragraf, kırmızı kutularda başka bir paragraf vardır. Ve bu kod tarayıcı tarafından işlendikten sonra şöyle görünür (ok boş bir satırı gösterir):
Sonuç olarak, bir paragrafın diğerinden oldukça belirgin bir şekilde ayrıldığını elde ederiz, bu yararlıdır - okuma daha uygun hale gelir.
Bu yüzden makale hakkında belge biçimlendirme etiketleri... Bu materyalde tarif ettiğimden çok daha fazlası var. Sadece bazıları hakkında oldukça fazla şey söylemeniz gerekiyor, bunun sonucunda onlara tam bir inceleme içeren ayrı makaleler ayrılacak.!
Bu yazımızda nasıl metin seçileceğinden bahsedeceğiz. italik olarak HTML. Kalın metinde olduğu gibi, italik metin üç şekilde yapılabilir:
- Etiket ben HTML;
- Etiket em HTML;
- CSS özelliği yazı stili.
HTML'de nasıl italik yazabileceğinize ilişkin üç seçeneği de ele alalım, bu sorunun 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, fiziksel seçim için italik metin(bu, yalnızca metnin stilinin değiştirildiğ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
etiket olmasına rağmen ben geçerli kalır, site optimizasyonu açısından etiketi kullanmak daha iyidir em Metnin mantıksal olarak önemli bölümlerini vurgulamak için. Bu, arama motoru tarayıcılarının, etiketler arasına yerleştirilen metnin önemini dikkate aldığı anlamına gelir. :
Web Sitesi Oluşturucu "Nubex"
Sonuç:
Web Sitesi Oluşturucu "Nubex"
Ancak etiketlerin içine alınmış metnin ben ve em, hemen hemen 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, gerektiği gibi etiketleri 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 vurgulama için CSS stillerini kullanmaya bakalım.
CSS tarafından desteklenen italik metin
CSS'de yazı tiplerini görüntülemek için stilleri 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ırlamakta fayda var italik yazı tipi ve eğimli, özlerinde aynı değildir. italik el yazısı metne benzeyen özel bir yazı tipidir ve eğimli normal yazı tipini sağa eğerek oluşturulur.
Özellik uygulaması yazı stili pratikte:
Sitelerimiz, gerçekten, büyük adım web geliştirmede.
gerçek için yapıyoruz kalite Siteler.
Ancak bazı tarayıcıların bu özelliğe sahip metinler yazdığı unutulmamalıdır. yazı tipi stili: eğik; italik metin yerine italik olarak yorumlanabilir.
Şimdi ana etiketleri inceleyeceğiz. Sayfada hangi etiketlerin gerekli olduğu ile başlayalım ve yapısını oluşturalım.
Engellemek. En basit sayfanın yapısı
site sayfası normal Metin dosyası uzantılı .html... Bu dosyanın içinde, HTML sayfasının metni etiketlerle birlikte saklanır. Bu dosya aşağıdaki etiketlere sahip olmalıdır: etiket tüm sitenin metnini içermesi gereken (bu etiketin dışında yazılan her şey tarayıcı tarafından yok sayılır) ve içinde iki etiket daha olmalıdır: etiket
sayfanın hizmet içeriği ve etiket için - tarayıcı ekranında görünen ana metin için.Etiketin içinde yer alan hizmet içeriğine
, dahil birçok farklı şey var, ancak şimdilik sadece iki tanesine ihtiyacımız var. bu bir etiketBu örneğin bir tarayıcıda nasıl göründüğü için bu bağlantıya bakın.
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 tarayıcıda nasıl çalıştıracağınızı göstereceğim özel bir video yaptım (içinde ayrıca sayfa başlığından, kodlamalardan, kod tasarımından bahsedeceğim). Bir göz atın ve ancak ondan sonra okumaya devam edin:
Şimdi en basit sayfaları nasıl oluşturacağımızı öğrendiğimize göre, bir etiket içinde kullanılması gereken faydalı etiketleri keşfetmeye devam edeceğiz.
... Bunlar paragraflar, başlıklar, listeler, bağlantılar ve diğer faydalı şeyler için etiketler olacaktır. Öyleyse başlayalım.Engellemek. paragraflar
Sayfanın ana unsurlarından biri, paragraflar... Bir kitaptaki paragraflarla karşılaştırılabilirler - her paragraf şununla başlar: Yeni hat ve sözde kırmızı çizgiye sahiptir (bu, paragraf metninin ilk satırının hafifçe sağa girintili olduğu zamandır). Varsayılan olarak kırmızı çizgi yoktur, ancak yapılması kolaydır (daha sonra anlatacağız).
etiketi kullanılarak bir paragraf oluşturulur.
Böylece:
Bu bir paragraf.
Bu başka bir paragraf.
Ve bir paragraf daha.
Bu bir paragraf.
Bu başka bir paragraf.
Ve bir paragraf daha.
Engellemek. Başlıklar h1, h2, h3, h4, h5, h6
Paragraflara ek olarak, sayfada önemlidir manşetler... Ayrıca bir kitaptaki başlıklarla da karşılaştırılabilirler - her bölümün kendi başlığı (bu bölümün başlığı) vardır ve kendi başlıkları da olan paragraflara bölünmüştür. Eh, sayfanın ana metni paragraflar halindedir.
Başlıklar oluşturuldu etiketleri kullanma
,
,
,
,
,
... Farklı derecelerde önemleri vardır. başlıkta h1 sahip olmalı tüm HTML sayfasının başlığı, v h2- Başlık bloklar içindeki sayfalar h3- alt blokların adı vb.
,
,
,
... Farklı derecelerde önemleri vardır. başlıkta h1 sahip olmalı tüm HTML sayfasının başlığı, v h2- Başlık bloklar içindeki sayfalar h3- alt blokların adı vb.
,
... Farklı derecelerde önemleri vardır. başlıkta h1 sahip olmalı tüm HTML sayfasının başlığı, v h2- Başlık 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 ile değiştirilebilir, ancak daha sonra bu konuda daha fazlası). Örneğe bakın:
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.
Engellemek. yağlı
Varsayılan başlıkların olduğunu zaten biliyorsunuz. yağlı... Ancak, düz metni kalın da yapabilirsiniz - sadece bir etikete koyun ... Örneğe bakın:
Bu düz metin ve bu yağlı Metin.
Kod tarayıcıda şu şekilde görünecektir:
Bu düz metin 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 etiket B tek tek metin parçalarını kalın yapar.
Engellemek. italik
Yağlı olmanın yanı sıra şunları da yapabilirsiniz. italik etiketi kullanmak :
Bu düz metin ve bu italik Metin.
Kod tarayıcıda şu şekilde görünecektir:
Engellemek. Listeler
Paragraflar ve başlıkların yanı sıra sayfanın bir başka önemli unsuru daha vardır - bu listeler... Bu tür unsurlar muhtemelen tüm İnternet kullanıcılarına aşinadır. Bir şeyin (bir listenin) nokta nokta bir listesidir. Listedeki her öğenin yanında genellikle içi dolu bir daire bulunur (buna işaretleyici liste).
Listeler etiketi kullanılarak oluşturulur
- , hangi etiketlerin içine girmesi gerekir
- ... Etiket ul listenin kendisini belirtir ve etiketlerde li liste öğeleri yerleştirilmelidir (yani, bir li, bir liste işaretçisine karşılık gelir). li etiketlerinin tek başına kullanılamayacağını unutmayın. Örneğe bakın:
bu başlık başlığı - Listedeki ilk öğe.
- Listedeki ikinci öğe.
- Listedeki üçüncü öğe.
Kod tarayıcıda şu şekilde görünecektir:
- Listedeki ilk öğe.
- Listedeki ikinci öğe.
- Listedeki üçüncü öğe.
Etiket yoluyla oluşturulan listeler ul arandı düzensiz listeler. oldukları için onlara bu isim verilmiştir. sipariş edildi nokta işaretleri yerine sayısal madde işaretleri içeren listeler. Bu tür listelerde ul etiketi yerine şu etiket bulunur:
- , ve bu tür listelerin öğeleri de etiketler aracılığıyla oluşturulur li.
- Listedeki ilk öğe.
- Listedeki ikinci öğe.
- Listedeki üçüncü öğe.
- Listedeki ilk öğe.
- Listedeki ikinci öğe.
- Listedeki üçüncü öğe.
- renk - metnin rengini ayarlar;
- boyut - geleneksel birimlerde yazı tipi boyutu.
- face - etiketin içinde kullanılacak metnin yazı tipi ailesini ayarlamak için kullanılır ... Virgülle ayrılmış birkaç değer aynı anda desteklenir.
- - html'de kalın yazı tipini ayarlar. Etiket eylem öncekine benzer;
- - boyut varsayılandan daha büyük;
- - daha küçük yazı tipi boyutu;
- - italik metin. benzer etiket ;
- - altı çizili metin;
- üstü çizildi;- - metni yalnızca küçük harfle göster;
- - büyük harfle.
- piksel olarak;
- Mutlak değerde ( xx-küçük, x-küçük, küçük, orta, büyük);
- Yüzde olarak;
- Nokta olarak (pt).
- normal - normal yazım;
- italik - italik
- eğik - sağa eğik yazı tipi;
- devral - ana öğenin yazımını devralır.
- kalın - html kalın yazı tipini ayarlar;
- daha cesur - normale göre daha şişman;
- daha hafif - normale göre daha az doymuş;
- normal - normal yazım;
- 100-900 - yazı tipi kalınlığını sayısal eşdeğerde ayarlar.
- başlık - düğmeler için;
- simge - simgeler için;
- menü - menü;
- mesaj kutusu - iletişim kutuları için;
- küçük resim yazısı - küçük kontroller için
- durum çubuğu - durum çubuğu yazı tipi.
etiketini kullanarak sıralı bir liste yapalım ol:
bu başlık başlığı Kod tarayıcıda şu şekilde görünecektir:
Sıralı listelerin rahatlığı, herhangi bir yere yeni bir liste öğesi ekleyebilmemdir - ve numaralandırmanın kendisi yeniden düzenlenecektir (yani, manuel olarak ayarlamış olsaydım, herhangi bir değişiklik olması durumunda onu takip etmek zorunda değilim).
Engellemek. Bağlantılar
Bağlantılar interneti internetten çıkaran unsurlardır. Bağlantılara tıklayarak sitenin bir sayfasından diğerine geçebiliriz. Eğer bunlar olmasaydı, İnternet sadece birbiriyle hiçbir şekilde ilişkili olmayan bir sayfalar topluluğu olurdu.
bu başlık başlığı phphtml.net web sitesine bağlantı.Kod tarayıcıda şu şekilde görünecektir:
Bağlantılar mutlak ve akraba ayrıca hem sizin sitenize hem de bir başkasının sitesine yönlendirebilirler. Bu zor anları metinde anlatmak yerine göstermek daha iyidir, bu yüzden aşağıdaki videoyu sizin için çektim. Bir göz atın ve ancak ondan sonra okumaya devam edin:
Engellemek. Resimler
Şimdi nasıl yerleştireceğimizi bulalım resim web sitenizin sayfasında. Etiket bunun için var
gerekli bir özelliğe sahip olan kaynak, görüntü dosyasının yolunu saklar.
Aşağıdaki örnekle nasıl çalıştığını görelim:
bu başlık başlığı 
Kod tarayıcıda şu şekilde görünecektir:
etiketine dikkat edin
bitiş etiketi gerektirmez.
Engellemek. Resim şeklinde linkler
Bağlantı belki sadece metin değil, aynı zamanda resim- etiket bunun için yeterli
etikette yuva aşağıdaki örnekte olduğu gibi. Resme tıklayın - ve phphtml.net web sitesine giden bağlantıyı takip edeceksiniz (daha sonra kitaba geri dönmek için - tarayıcıda "geri" düğmesine basın):
bu başlık başlığı
Kod tarayıcıda şu şekilde görünecektir:
Engellemek. Satır sonu
Örneğin, yan yana iki paragraf yaparsanız ne olacağını unutmayın - bu durumda, her birinde bulunan metin yeni Teller.
Bunu aşağıdaki örnekle görelim:
bu başlık başlığı Bu ilk paragraf.
Bu ikinci paragraf.
Kod tarayıcıda şu şekilde görünecektir:
Bu ilk paragraf.
Bu ikinci paragraf.
Bununla birlikte, bir paragrafımızın olmasını istediğimiz durumlar vardır, ancak içindeki bazı metinler yeni bir satırda başlar. Bu neden gerekli olabilir? Örneğin bir şiir yazmak istiyorum ama çok mantıklı olmayacağı için her satırını ayrı bir paragrafa bölmek istemiyorum.
Bunun için satır sonu olması gereken yere etiketi yazmalısınız.
... Bu etiketin özel olduğunu ve bitiş etiketi olmadığını unutmayın.Aşağıdaki örnekle nasıl çalıştığını görelim:
bu başlık başlığı Bu metnin ilk satırı
ve bu ikincisi.Kod tarayıcıda şu şekilde görünecektir:
Bu metnin ilk satırı
ve bu ikincisi.Engellemek. HTML yorumları
Hemen hemen tüm programlama dillerinde "yorumlar" gibi bir kavram vardır.
Html'de yazı tipi boyutu önemli bir rol oynar. Kullanıcının dikkatini şu noktalara çekmenizi sağlar. önemli bilgi site sayfasında yayınlanmıştır. Harflerin sadece boyutu değil, aynı zamanda rengi, kalınlığı ve hatta ailesi de önemlidir.
Html yazı tipleriyle tarama yaparken etiketler ve nitelikler
Köprü metni dili, yazı tipleriyle çalışmak için geniş bir araç setine sahiptir. Sonuçta, html'nin ana görevi metin biçimlendirmesidir.
HTML dilinin yaratılmasının nedeni, tarayıcılarda metin biçimlendirme kurallarının görüntülenmesi sorunuydu.
Html'deki yazı tipleriyle çalışmak için kullanılan etiketleri ve özelliklerini düşünün. Asıl olan etikettir ... Özniteliklerinin değerlerini kullanarak yazı tipinin çeşitli özelliklerini ayarlayabilirsiniz:1'den 7'ye kadar olan pozitif öznitelik değerleri desteklenir.
Yalnızca eşleştirilmiş yazı tipi etiketinin bölümleri arasındaki metin biçimlendirilir. Metnin geri kalanı varsayılan standart yazı tipinde görüntülenir.
Ayrıca html'de yalnızca bir biçimlendirme kuralı belirten bir dizi eşleştirilmiş etiket vardır. Bunlar şunları içerir:
düz metin
küçük resim
küçük resim
Normalden daha fazla
normalden daha az
italik
italik
altı çizili
Üstü çizildiStil Özelliği Yetenekleri
Tanımlanan etiketlere ek olarak, html'de yazı tipini değiştirmenin birkaç yolu daha vardır. Bunlardan biri, genel stil özniteliğinin kullanılmasıdır. Özelliklerinin değerlerini kullanarak yazı tipi görüntüleme stilini ayarlayabilirsiniz:
1) font-family - özellik, font ailesini ayarlar. Birkaç değerin numaralandırılması mümkündür.
Önceki aile olarak ayarlanmadıysa, html'deki yazı tipini bir sonraki değere değiştirmek gerçekleşir. işletim sistemi kullanıcı.Sözdizimi yazma:
yazı tipi ailesi: yazı tipi adı [, yazı tipi adı [, ...]]
2) yazı tipi boyutu - boyut 1'den 7'ye ayarlanır. Bu, html'deki yazı tipini artırmanın ana yollarından biridir.
Sözdizimi yazma:yazı tipi boyutu: mutlak boyut | göreceli boyut | değer | faiz | miras
Yazı tipi boyutu da ayarlanabilir:
Yazı tipi boyutu: 7
Yazı tipi boyutu: 24 piksel
Yazı tipi boyutu: x-large
Yazı tipi boyutu: %200
Yazı tipi boyutu: 24pt
3) yazı tipi stili - yazı tipini yazma stilini ayarlar. Sözdizimi:
yazı tipi stili: normal | italik | eğik | miras
Değerler:
Bu özelliği kullanarak html'de yazı tipinin nasıl değiştirileceğine bir örnek:
yazı tipi stili: devral
yazı tipi stili: italik
yazı tipi stili: normal
yazı tipi stili: eğik
4) yazı tipi değişkeni - tüm büyük harfleri büyük harfe dönüştürür. Sözdizimi:
yazı tipi değişkeni: normal | küçük kapaklar | miras
Bu özellik ile html'de yazı tipinin nasıl değiştirileceğine bir örnek:
yazı tipi değişkeni: devral
yazı tipi değişkeni: normal
yazı tipi varyantı: küçük büyük harfler
5) yazı tipi ağırlığı - metnin yazı kalınlığını (doygunluk) ayarlamanıza olanak tanır. Sözdizimi:
yazı tipi ağırlığı: kalın | daha kalın | daha hafif | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Değerler:
yazı tipi ağırlığı: kalın
yazı tipi ağırlığı: daha kalın
yazı tipi ağırlığı: daha hafif
yazı tipi ağırlığı: normal
yazı tipi ağırlığı: 900
yazı tipi ağırlığı: 100
Yazı tipi özelliği ve html yazı tipi rengi
Font, başka bir kapsayıcı özelliğidir. Dahili olarak, yazı tiplerini değiştirmek için tasarlanmış çeşitli özelliklerin değerlerini birleştirdi. Yazı tipi sözdizimi şöyledir:
yazı tipi: yazı tipi boyutu yazı tipi ailesi | miras
Ayrıca, değer, çeşitli kontrollerdeki yazılarda sistem tarafından kullanılan yazı tiplerine ayarlanabilir:
yazı tipi: simge
yazı tipi: başlık
yazı tipi: menü
yazı tipi: mesaj kutusu
küçük altyazı
yazı tipi: durum çubuğu
yazı tipi: italik 50 piksel kalın "Times New Roman", Times, serif
Yazı tipinin rengini html'de ayarlamak için color özelliğini kullanabilirsiniz. Rengi olduğu gibi ayarlamanızı sağlar. anahtar kelime ve rgb formatında. Ve ayrıca onaltılık bir kod şeklinde.
WEB sayfamızın daha anlaşılır görünmesi için metni paragraflara bölüp başlık seçeceğiz. HTML, bir belgenin bölümleri için 1'den 6'ya kadar numaralandırılmış 6 başlık düzeyine sahiptir. Başlıklar, uygun düzey numaralarına sahip bir çift etiketle bildirilir, örneğin,
- birinci seviye bölümün başlığı ve - altıncı seviye bölümün başlığı. Başlıklar, harflerin boyutu ve genişliği açısından normal metinden farklıdır. Birinci seviye başlık h1 genellikle çok büyük baskı, altıncı seviye h6'nın başlığı çok küçük.Başlıklar
Belge bölüm başlıklarını, daha önce tartışılan belge başlığı ile
.Metnin başlığı olarak ilk cümleyi kullanıyoruz - Bunun için etiketlerle sınırlandırmak yeterli
ve
.Diğer.html dosyasının metnine etiketler ekleyin
ve
böylece metnin ilk cümlesini sınırlandırırlar ve bu kod parçası şu şekli alır:SD Şirket Sayfasına Hoş Geldiniz!
Elde edilen sonucu gözden geçirelim.
Not Defteri menü komutunu Dosya - Kaydet'i seçerek dosyayı kaydedin.
Kaydetme işlemi her zaman belgeyi görüntülemeden önce yapılmalıdır, çünkü dosyayı görüntülemek için açar, diskten bilgisayarın RAM'ine yükler. HTML kodunu düzenledikten sonra dosyayı kaydetmezseniz, tarayıcıda herhangi bir yapılandırma görmezsiniz.
Görev Çubuğundaki düğmesine tıklayarak tarayıcı penceresini geri yükleyin.
Programın çalışma penceresinin araç çubuğundaki F5 düğmesine veya Yenile düğmesine basın. other.html dosyası yeniden yüklenecek ve tarayıcı penceresinde ilk seviye başlığının nasıl göründüğünü göreceksiniz.
Diğer 5 seviyenin başlıklarının nasıl görüneceğini görün, etiketlerdeki sayıları değiştirin: h2, h3 vb. Her yapılandırmadan sonra dosyayı kaydetmeyi ve tarayıcı penceresindeki görüntüyü güncellemeyi unutmayın.
Denemeleri bitirdiğinizde, other.html dosyasındaki etiketleri tekrar geri yükleyin.
.HTML'nin hizmetinize sunduğu 6 düzeydeki başlığı kullanarak, sezgisel bir yapıya sahip, okunması kolay bir belge oluşturabilirsiniz. Belgenizin bölümlere ve alt bölümlere ayrılmış kesin bölümleri varsa, belgenizin her zaman çok daha iyi okunacağını unutmayın.
Başlıkları hizalama
Varsayılan olarak, başlık sayfanın soluna hizalanır. Ancak aynı zamanda sağa hizalanmış veya ortalanmış olabilir. Bir etikette sağ taraf hizalaması için
align = "right" özniteliği kullanılır ve merkezleme için - align = "center" kullanılır. Sola hizalamanın açık bir göstergesine de izin verilir - hizalama = "sol".
etikete ekle
başlığı ortalamak için align = "center" niteliği. Bu eleman aşağıdaki formu almalıdır:
SD Şirket Sayfasına Hoş Geldiniz!
Gelecekte, dosyayı ilk kodla kaydetmeniz ve görüntüyü görüntülemeden önce tarayıcıda güncellemeniz gerektiğini size hatırlatmayacağız.
HTML'de metin nasıl kalın yapılır
Şimdi metnin geri kalanına geçelim. Boyutunu büyütelim ve metni kalın italik yapalım. Kalın stili ayarlamak için eşleştirilmiş etiketler kullanılır .
Açılışı other.html dosyasına ekleyin ve kapanış etiketleri böylece metni sınırlandırırlar Burada öğreneceksiniz ... Bu öğe aşağıdaki formu almalıdır:
HTML'de metin italik nasıl yapılır
İtalik stil, etiketler kullanılarak ayarlanır .
Başlangıç koduna bir HTML etiketi ekleyin ve böylece düzenlenen öğe aşağıdaki formu alır:
Burada faaliyetlerimiz, şirketimizin yazılım ürünleri ve ürettiğimiz ekipmanlar hakkında bilgi edineceksiniz.
İşaretleme öğeleri, bu yapıda olduğu gibi iç içe yerleştirilebilir. … elemanda yuvalanmış …... Modern tarayıcılar, iç içe geçmiş etiketleri doğru şekilde işleme yeteneğine sahiptir. Bu nedenle yuvalama sırasının bozulmadığından emin olmanız gerekir. Yuvalama bozulursa tarayıcı performansı zor olacaktır. Örneğin, böyle bir giriş yanlış olacaktır: …... Yerleştirme, genel HTML kodlama kültürünün çok önemli bir parçasıdır.
HTML'de altı çizili metin nasıl yapılır
Bir çift etiket ile bir metin parçasının altı çizili stilini, bu etiketlerle sınırlı olarak ve bir çift etiket kullanarak ayarlayabilirsiniz. - metni teletype yazı tipinde göster.
Unutulmamalıdır ki son zamanlarda etiket sadeleştirilmiş ve stiller ile altı çizili yapılmıştır. eş değer ... Evet yeni analog daha hantal görünüyor, ama ne yazık ki bu daha doğru. Bu lehte ana şey, hacimli sürümün çapraz tarayıcı olmasıdır, başka bir deyişle, her ikisi de olduğunda tüm tarayıcılar için uygundur. Tüm tarayıcılar bunu desteklemez.
HTML'de metin nasıl büyütülür
Şimdi metnin yazı tipi boyutunu büyütelim. Bu çeşitli şekillerde yapılabilir.
Etiketler: aralarındaki metnin yazı tipi boyutunu artırın.
Yukarıdaki kod parçasının başına ve sonuna sırasıyla etiketler ekleyin ve böylece eleman aşağıdaki formu alır:
Burada faaliyetlerimiz, şirketimizin yazılım ürünleri ve ürettiğimiz ekipmanlar hakkında bilgi edineceksiniz.
Etiketleri kullanma metnin yazı tipi boyutunu ilk yazıyla eşleşecek şekilde küçültebilirsiniz.
Yazı tipi boyutunu belirlemenin başka bir yöntemi de etiketlerdir. bir boyut özelliği ile. Bu özniteliğin değerleri 1'den 7'ye kadar tam sayılardır. Bu durumda, 1 değeri en küçük yazı tipi boyutuna ve 7 değeri - en büyüğüne karşılık gelir.
Etiketler yerine kullanma etiketleri görüntüle , metnin yazı tipi boyutunun, boyut özelliğinin farklı değerleriyle nasıl değiştiğini görün - 1'den 7'ye.
Beden özelliğinin değeri olarak 1'den 7'ye kadar olan sayıları + (artı) veya - (eksi) işaretli olarak da kullanabilirsiniz. Bu durumda, yazı tipi boyutu, örneğin ilk etiketlere kıyasla buna göre artar veya küçülür. yazı tipi boyutunu mevcut olana kıyasla bir düzey artıracaktır. Bunu kontrol et.
Söz konusu metin parçası için size özniteliğinin değerini 5 olarak ayarlayın: ... Bu parçanın HTML kodu şöyle olmalıdır:
Burada faaliyetlerimiz, şirketimizin yazılım ürünleri ve ürettiğimiz ekipmanlar hakkında bilgi edineceksiniz..
Etiketlerde color niteliği, yazı tipinin rengini, metin etiketleriyle sınırlandırılmış olarak belirtmek için de kullanılabilir. Bu özniteliğin değerleri, belgenin arka planını ve metin rengini açıklayan daha önce tartışılan özniteliklerle aynıdır.
Varsayılan olarak, Burada öğreneceğiniz metni içeren paragraf ... sola hizalanır. Etiketleri kullanarak yatay olarak ortalayın
... Etiketleri kullanarak bir paragrafı sayfanın sağına da hizalayabilirsiniz. veya sola - etiketleri kullanarak . Etiketleri ekle
bunları belirtilen paragrafla sınırlamak. Paragrafı ortalamak için etiketleri kullandığımızı unutmayın.
, etiketlerde uyguladığımız align = "center" özelliğinden farklı olarak . Dikkat! 2010 etiketleri için ,
, , kullanımdan kaldırılmıştır ve bu nedenle stillerden analogların kullanılmasını gerektirir. Bu, onları kullanamayacağınız anlamına gelmez, ancak yapabiliyorsanız onlardan kurtulmaya çalışın. =
= = = =
Ayrıca, bu makalede ana hatlarıyla belirtilmeyen çok sayıda eski etiket vardır, bu nedenle, bu konuda uzmanlaşmış WEB sitelerini hemen tanımak daha iyidir. Ama burada ortaya koyduğum ana olanlar biraz daha yüksek
Tahsis kodları
HTML, metin parçalarının yazı tipi seçimine iki yaklaşım sağlar. Bir yandan metnin belirli bir bölgesindeki yazı tipinin kalın veya italik olabileceğini doğrudan belirtebilirsiniz, başka bir deyişle bu deneyde yaptığımız gibi metnin yazı tipini belirtmek açıktır. Öte yandan, herhangi bir metin parçasını normalden iyi, mantıklı bir stile sahip olarak işaretleyebilir ve tarayıcıyı bu stili yorumlamaya bırakabilirsiniz. Böylece, mantıksal üslup, bir metin parçasının rolünü, örneğin sıradan metne kıyasla büyük önem taşıdığını veya bu parçanın bir alıntı olduğu gerçeğini gösterir. Kendi çalışmanızda, mantıksal stilleri tanımlayan sonraki etiketleri kullanabileceksiniz. Nasıl çalıştıklarını kontrol edin farklı tarayıcılar.
- bir kelimeyi tanımlamak için kullanılır. Metin varsayılan olarak italik olarak görüntülenir.
- kelimeleri vurgulamak ve güçlendirmek için. Metin varsayılan olarak italik olarak görüntülenir.
- kitapların, filmlerin, performansların vb. başlıklarını vurgulamak için varsayılan olarak italik görüntülenir.
- program kodu parçaları için. Ekranda sabit genişlikte bir yazı tipiyle gösterilir.- kullanıcının klavyeden girdiği metin için kullanılır. Farklı tarayıcılarda farklı yazı tiplerinde görüntülenebilir. Kullanımdan kaldırılmış etiket.
- program mesajlarını görüntülemeye yarar. Sabit genişlikte bir yazı tipinde görüntülenir. Kullanımdan kaldırılmış etiket.
- özellikle önemli parçalar için. Genellikle kalın harflerle.
- bir metnin veya kelimenin bir bölümünün sembolik bir değişken olduğunu, başka bir deyişle farklı ifadelerle değiştirilebilen metin olduğunu belirtmek için kullanılır. Varsayılan olarak italik olarak görüntülenir. Kullanımdan kaldırılmış etiket.
HTML 4.0 spesifikasyonu, CSS (Basamaklı Stil Sayfaları) adı verilen özel bir dil kullanarak metin ve diğer bölümler için stilleri belirlemek için daha aşamalı bir yöntem sunar. Stil sayfaları, WEB tasarımı alanında, sayfaların görünümünü iyileştirme yeteneğini genişleten büyük bir başarıdır. Stil sayfaları, satır aralığını, dolguyu, metin ve arka plan için renkleri, yazı tipi boyutunu ve stilini vb. tanımlamayı kolaylaştırır.HTML'nin çoğu parçası, bir öğenin açılış etiketinin içine yerleştirilen stil niteliği kullanılarak biçimlendirilebilir. "Özellik: değer" biçimindeki çiftler, stil özniteliğinin değeri olarak kullanılır. Örneğin, bir bölüm başlığını açıklayan bir kod parçasında,
style = "color: blue" özniteliği, color özelliğinin mavi olduğunu, diğer bir deyişle birinci seviye başlık metninin mavi olarak görüntülenmesi gerektiğini belirtir.
Stilleri hizala
Şimdi kelimelerle başlayan bir metin parçasının stilini belirtmek için basamaklı stil sayfası dilini nasıl kullanacağımızı görelim.
Yazı tipi kalınlığını belirtmek için, daha açık (dar), kalın (kalın), daha kalın (kalın) değerleriyle yazı tipi ağırlığı özelliğini kullanın, örneğin, stil = "yazı tipi ağırlığı: kalın".
İtalik stili tanımlamak için italik olarak ayarlanmış font-style özelliğini kullanın. Bu nedenle, metni kalın italik yapmak için stil özniteliğini şu şekilde bulmalısınız: style = "font-weight: bold; font-style: italic". Dikkat edin: özellikler herhangi bir sırada yerleştirilebilir ve mutlaka bir noktalı virgül paylaşmalıdır.
Yazı tipi boyutunu belirtmeniz gerekiyorsa, değerleri göreli veya mutlak değerlerle belirtilebilen font-size özelliğini kullanmalısınız. Göreceli değerler yüzdelerdir ve mutlak değerler olarak noktalar (pt), pikseller (px), santimetre (cm), milimetre (mm) kullanılır. Örneğin:
stil = "yazı tipi boyutu: %200"
stil = "yazı tipi boyutu: 16pt"
stil = "yazı tipi boyutu: 100 piksel"
Göreceli değil mutlak boyutlar belirleyerek, sayfalarınızı görüntüleyen kullanıcıları, görüşlerine ve monitör çözünürlüğüne göre tarayıcı menü komutunu kullanarak yazı tiplerinin boyutunu artırma veya azaltma yeteneğinden mahrum bırakırsınız. Yazı tipleri yalnızca belirttiğiniz boyutta görüntülenecektir. Bu nedenle yazı tipi boyutunu yüzde olarak belirtmek daha iyidir. Bu durumda, yazı tipi boyutu, belirtilen yüzde sayısı ile tasarlandığından daha az veya daha fazla olacaktır. HTML yardımı varsayılan olarak etiketleyin.
Metnin yatay hizalama yöntemini belirlemek için, sol (sol), sağ (sağ), orta (orta), yasla (genişlik) değerleriyle metin hizalama özelliğini kullanın. Bu nedenle, burada bulacağınız metnin ... ilk harfinin % 150'si büyüklüğünde kalın italik olarak biçimlendirilmesi ve ortaya hizalanması gerektiğini belirtmek için, stilini aşağıdaki gibi bulmalısınız:
style = "yazı tipi ağırlığı: kalın; yazı tipi stili: italik; yazı tipi boyutu: %150; metin hizalama: orta"
Bu özelliği etiketlerde kullanacağız<р>metni ayrı bir paragraf olarak sunmanıza izin verir.
Düzenlemek HTML öğesi, metin dahil Burada öğreneceksiniz ... etiketleri kaldırarak
, , , ve etiketlerin eklenmesi<р>vestyle özniteliği ile bu öğenin aşağıdaki formu alması için: <р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Burada faaliyetlerimiz, şirketimizin yazılım ürünleri ve ürettiğimiz ekipmanlar hakkında bilgi edineceksiniz.
Görüyorsunuz, HTML çeşitli stil tasarım teknikleri kullanmanıza izin veriyor. Ancak, CSS basamaklı stil sayfası dilinin kullanılması daha çok arzu edilir.
Diğer hizalama ve stil seçenekleri
Bir stil sayfası dili için yalnızca bir kullanım örneği gördük, burada bir stil tanımı, özellikle tanımladığınız öğenin etiketine yerleştirilir.
Bu, çoğu standart HTML etiketiyle kullanılan stil özniteliği kullanılarak yapılır. Ancak CSS'nin başka kullanımları da vardır.
Standart HTML'de, stil sayfalarını gömmeden, herhangi bir öğeye renk, boyut, sayfadaki konum vb. gibi belirli parametreleri atamak için, 10-ki olsa bile, her öğe için bu özellikleri her seferinde özetlemeniz gerekir. birbirinden farklı olmayan parçalardan oluşmaktadır. Aynı HTML kodunu sayfaya 10 kez eklemeniz gerekir, bu da dosya boyutunu ve onu ağdan indirmek için gereken süreyi artırır.
Stil sayfaları farklı, daha konforlu ve ekonomik bir şekilde çalışır. Bir öğeye belirli özellikler atamak için bu öğeyi bir kez ana hatlarıyla belirtmeli ve bu açıklamayı bir stil olarak bulmalısınız ve ileride uygun bir şekilde tasarlamak istediğiniz öğenin sizin tarif ettiğiniz stilin özelliklerini alması gerektiğini belirtmeniz yeterlidir. . Rahat, değil mi?
Ayrıca, stil açıklamasını WEB sayfanızın metnine değil, ayrı dosya- bu, stil açıklamasını istediğiniz sayıda WEB sayfasında kullanmanıza izin verecektir. Bir diğer ilgili avantaj da, herhangi bir sayıda sayfanın tasarımını, yalnızca stil açıklamasını ayrı bir dosyada düzelterek değiştirebilme yeteneğidir.
Ek olarak, stil sayfası dili, sayfaların yazı tipi tasarımıyla daha da fazla çalışmanıza olanak tanır. en yüksek seviye standart HTML'den farklıdır.
Şu anda, CSS dili, HTML'nin kontrol edebileceği oldukça fazla sayıda parametreye sahiptir. Başka bir deyişle, en fazla sayıda tarayıcının CSS öğeleriyle uyumlu "güvenli" kullanarak - yazı tipi özellikleri, parçaların ve arka planın renkleri, metin ve kenarlıkların özellikleri - işinizi önemli ölçüde kolaylaştırabilir ve WEB sayfalarınızı aşağıdakiler açısından daha çekici hale getirebilirsiniz. metin tasarımı.