Daha önce söz verdiğim gibi, bu derste, işe yaramaz eski hizalama özelliği olmadan sayfadaki herhangi bir HTML etiketi yerine yatay olarak nasıl hizalayabileceğinizi öğreneceksiniz. Tahmin edebileceğiniz gibi, stilleri (CSS) veya daha doğrusu favori stil özelliğimizi bir kez daha keşfedeceğiz.

Ayrıca, bir HTML öğesi yerine doğrulamak için stil özelliğine aşağıdaki değerlerden birini atamanız gerekir:

• metin hizalama: ortala- Öğenin ortasındaki dış görünüm sırasının doğrulanması, örneğin bir paragraf.
• metin hizalama: sola- Deri sırası elemanın sol tarafına doğru bastırılır (bunun nedeni astardır).
• metin hizalama: sağa- Bir sıra deri kucaklaşma Sağ Taraf.
• metin hizalama: iki yana yaslama- Elemanın sol ve sağ taraflarındaki deseni doğrulayın. Açıklamama izin ver. Bir öğenin, örneğin bir paragrafın, metnin bir tarafının her zaman eşit, diğer tarafının ise "yırtık" olduğunu, böylece birkaç satırın bile biraz farklı ortaya çıktığını düşünün. Ve eğer text-align: justify'ın doğru değerini kullanırsak, dış görünüm satırının genişliği eşit olarak dağıtılır. Kelimeler arasında kelimelere ihtiyaç duyulduğunda, tarayıcı ek boşluklar ekler ve satırdaki ilk ve son kelime aynı taraflara basılarak, taraflara eşit derecede rahatsız edici bir blok oluşturulur.

Etiketler yerine doğrulama örneği

Konu ortada.

Paragraf ortada.

Tarayıcıdaki sonuç

Konu ortada.

Paragrafın metni sağa doğru sıkıştırılmıştır.

Paragraf ortada.

Genel olarak yatay hizalama blok etiketleri ve tablo sütunlarıyla sınırlıdır (bunlar hakkında daha sonra konuşacağız). Öte yandan, denerseniz, hatırlayana kadar (satır içi) donduramazsınız. Neden? Geçenlerde eklenen elemanın genişliğinin emsaliyle aynı olduğunu öğrendiğimizi hatırlıyor musunuz? Görünüşe göre bunun yerine bağlanacak hiçbir yer kalmayacak ve tarayıcı "sanatınızı" görmezden gelecektir. :)

Ev ödevi.

1. İlk bölümde bir makale başlığı, iki bölüm ve bir alt bölüm oluşturun. Ve makalenin başlığının sayfanın ortasında görüntülenmesine izin verin.
2. Tüm sayfa ve tüm başlıklar için yazı tipini Arial olarak ayarlayın - Zamanlar ve italik olarak yazılacak diğer şeyler.
3. Makalenin başlık metnini #FF6600 olarak renklendirin, bölümleri #6600FF olarak renklendirin ve bölümü değiştirmeden bırakın.
4. Her başlığın altına bir defada bir öğe yazın; her öğenin metni, bir tarayıcıda görüntülendiğinde en az üç satır kaplayacaktır.
5. Ortaya başka bir paragraf, sağ tarafa üçüncü ve yan tarafa dördüncü bir paragraf yerleştirin.

Uçuyorum! HTML'nin temellerinde uzmanlaşmaya devam edin. Metni ortaya, genişliğe veya kenarlara hizalamak için ne yazmanız gerektiğini merak edeceksiniz.

Sağa doğru ilerleyerek HTML'de metnin üç noktanın ortasına nasıl yerleştirildiğine bakalım. farklı yollarla. Geriye kalan ikisi doğrudan stil sayfasına bağlıdır. Bu, sitenin sayfalarına bağlanan ve görünümlerini belirten bir CSS dosyası olabilir.

Yöntem 1 - HTML ile doğrudan çalışma

Gerçekte her şeyin yapılması kolaydır. Poponun alt kısmına hayret edin.

Paragrafı ortalayın.

Metin parçalarını farklı bir şekilde yok etmek gerekiyorsa, "merkez" parametresi yerine aşağıdaki değerleri yazıyoruz:

• yasla - sayfanın genişliğine göre metin hizalaması;
• sağa - sağa;
• sola - sola.

Benzer şekilde, başlıklarda (h1, h2) ve kaplarda (div) bulunan içeriği yok edebilirsiniz.

Yöntem 2 ve 3 - stil seçimi

Sunulan tasarım kolaylıkla dönüştürülebilir. Etki aynı olacaktır. Bunun için aşağıdaki kodu yazmanız gerekmektedir.

Metin bloğu.

Bu görünümde, metin içeriğini merkeze hizalamak için kod doğrudan HTML'ye yazılır.

Daha alternatif seçenek sonuca ulaşmak. Birkaç eylem imzalamanız gerekecek.

Prosedür 1. Ana koda şunu yazın:

Metin materyali.

Ders 2. CSS'yi içeren dosyaya aşağıdaki kodu girin:

Rovno (metin hizalama: orta;)

Şunu da belirteyim ki “rovno” kelimesi farklı şekilde adlandırılabilecek bir sınıfın adı değildir. Bu programcının takdirine bırakılmıştır.

HTML'deki benzetmeyle, kolayca ortada, genişlikte metin oluşturabilir ve ayrıca onu sayfanın sağ veya sol kenarına hizalayabilirsiniz. Bildiğiniz gibi hedefe ulaşmak için birden fazla seçenek var.

Bütün yemek:

• Kâr amacı gütmeyen bir bilgi projesiyle ilgileniyor musunuz?
• Sitenin ses sistemlerine maruz kalmasını mı istiyorsunuz?
• Gelirinizi sınırlar dahilinde azaltmak ister misiniz?

Tüm gelişmeler olumlu olduğundan sitenin geliştirilmesine yönelik kapsamlı yaklaşıma hayret etmek kolaydır. CMS WordPress'te çalıştığı için bilgiler özellikle ilginç olacaktır.

Çevrimiçi web sitelerinin internette pasif veya aktif gelir elde etmek için birçok seçenekten sadece biri olduğunu belirtmek isterim. Blogum gelecekteki finansal fırsatlara adanmıştır.

Uzun vadede ana veya ek gelir sağlayan trafik arbitrajı, metin yazarlığı ve diğer faaliyet alanlarında hiç çalıştınız mı? Bunu ve daha fazlasını blogumun sayfalarında hemen öğrenebilirsiniz.

Önceden birkaç tane daha yayınlayacağım temel bilgiler. Aramayı bırakın. İsterseniz Workip güncellemelerine e-posta yoluyla abone olabilirsiniz. Abonelik formu aşağıda gösterilmektedir.

HTML'yi değiştirmeye devam ediyoruz. Bu derste HTML sayfa başlıklarına, hangi başlıkların mevcut olduğuna, bunların nasıl doğru şekilde kullanılacağına ve ne zaman takılıp kalabileceklerine bakacağız. Ve paragraflara da bakalım ki sayfanızı metinlerle doldurabilesiniz, böylece bunu doğru bir şekilde yapabilirsiniz.

İlk makaleyi okumadıysanız burada bulabilirsiniz:

Bu derste olduğunuza göre web sitesi geliştirme konusunu öğrenmeye devam etmek istiyorsunuz. Ve bu derslerin yardımıyla bunun ne olduğuna dair temel bir anlayışa sahip olacaksınız.

Daha fazla bilgiye ihtiyacınız varsa ve belki bu alanda çalışmak istiyorsanız ne yapmalısınız? Özel kurslar bilmek daha iyidir. Runet'te çok fazla iyi, ön uç perakendeci yok. Netologiya kursu ““ gibi bir eğitim programıyla onurlandırıldım. Programın ve Skillbox'un bir kursu var ““.

Bir web geliştirme geliştirmek istiyorsanız profesyonellerle birlikte çalışın.

Teori ve pratik - HTML sayfalarının bölümleri ve başlıkları

Bugün paragraflardan ve başlıklardan bahsedeceğiz. Basit bir şeyle başlayalım: paragraflar ve koku.

Sayfadaki paragraflar

Hemen paragraf etiketinin bulunacağı kodun bir örneğini vereceğim.

Temel yapıyı ilk dersten zaten hatırlıyorsunuz. Orada temel bilgileri öğrendiler ve HTML'nin neyle ilgili olduğunu görünce hayrete düştüler. Bu nedenle saygımızı etiketlerin arasında olana odaklıyoruz .

Sayfada herhangi bir metin yazacaksanız, ister paragraf ister görsellerin altına küçük bir açıklama satırı olsun, bu metni etiketin ortasına yerleştirmeniz gerekir.

Gelecek derslerde bu paragrafları biçimlendirme sürecini öğreneceksiniz. Sayfaya etiket olmadan etiket yerleştirmenin mümkün olmadığını anlamak sizin sorumluluğunuzdadır. Çünkü gelecekte metnin bu özel kısmı için herhangi bir bireysel stil oluşturmak zor olacaktır.

Birkaç paragraf yazmayı deneyin. Bazı paragraflar etiket içerisine alınmalı, bazı paragraflar ise tek başına bırakılmalıdır. І Farkı anında artıracaksınız. Bu etiketin ortasına bir paragraf yazarsanız giriş hemen görünecektir. Şimdi sayfanın HTML başlıklarına geçelim.

Sayfadaki HTML başlıkları

Bir HTML belgesinde mevcut anlambilim vardır. HTML5 teknolojisinden ve onun yeni etiketlerinden bahsetmiyorum. Burada HTML'in temellerinde hızlı bir şekilde uzmanlaşabilmeniz için temel bilgilerin üzerinden geçeceğiz. Anlambilim, aynı etiket kullanılarak başlık, paragraf, tablo vb. oluşturulmasını gerektirmeyen anlamlar anlamına gelir. Para kazanmak mümkün ama HTML teknolojisi Farklı etiketlerin aktarılmasının farklı durumları için farklıdır. HTML koduyla rahatça çalışabilmek için temel etiketlere hakim olmanız yeterlidir.

Bu kısa tanıtımı paragraflarda zaten bildiğiniz etiketi kullanmak gerekli olsun diye yazdım. Başlıkların ekseninde ise İngilizce “H” harfiyle başlayan etiketler yer alıyor.

İşte kontrol edebileceğiniz başlıkların tam listesi:

Bu etiketlerden yapılan işlemler daha sık vikorize edilir. Bunlar h1, h2 veya h3 ile aynı etiketlerdir. CSS'ye zaten aşina iseniz, h3 sayfasının HTML başlığının, h1 veya h2'ye tamamen benzer olacak şekilde stillendirilebileceğini anlıyorsunuz. Ale anlamı, giymek ne kadar kötü bir koku, isterim SEO optimizasyonu, Radikal bir şekilde üzgünler. Kural olarak bu sayılar etiketlerin ortasında yer alır ve bu da HTML başlığının önemini gösterir. Bu nedenle bu unsurların ve yöntemlerin dikkatli bir şekilde işlenmesi gerekmektedir. ses sistemleri Makalelerinizi etiketlemeye başlayın.

CSS'ye gelinceye kadar tarayıcılarda ayarlanan başlık stillerini öğrenmeniz gerekecek. Bu etiketleri tek tek yerleştirip ortasına bir miktar metin yazarsanız şunu göreceksiniz:

Arama robotları için sayfadaki başlıkların seçilmesi de önemlidir. Ve kitabımızda okuyabileceğiniz şarkıların kuralları -.

Her şeyi öğrendikten sonra hemen koda geçelim ve her şeyi kendi ellerimizle yazmaya çalışalım. Programlama ne olursa olsun her şeye alışmanız çok kolaydır. HTML teknolojisi diğer programlamalardan çok daha kolaysa, dış görünümünüzü değiştirebilirsiniz. Bu sayede etiketleri daha iyi hatırlayacaksınız.

Video dersi - HTML sayfa başlığı? (Pratik)

Öncelikle robotun poposuna ilişkin şu etiketlerin yer aldığı videolar:

Ev geliştirme

D/Z: Ortaya 5-7 paragraf ve 2-3 farklı başlıktan oluşacak küçük bir metin yazın.

zengin bir şekilde metin öğeleri Web sayfasında merkeze hizalamanız gerekir. Çoğu zaman manşetler. Metni ortaya hizalamak için CSS'de nasıl çalışılacağını görelim.

Güçlü metin hizalama

Bunun nedeni metin hizalamanın gücüdür ve birkaç anlamı vardır:

• Sol - öğenin sol kenarına metin hizalaması; bu durumda eklenir
• Sağ - sağ kenar boyunca, aksi takdirde metin değişmeden kaybolur
• Merkez - merkezde. Bunlar ihtiyacımız olanlardır. hiçbiri ek parametreler Belirtmeye gerek yok; tarayıcının kendisi, farklı ekran çözünürlüklerinde metni tam olarak ortaya yerleştirecektir.
• Yasla - genişliğe göre hizalama, dış görünüm satırında kelimeler tüm genişliği kaplayacak şekilde uzatılmışsa

Örneğin, şu başlığı taşıyan çok sayıda metnimiz var:

Başlık

Başlığımızı (h1) ortalamak için şu şekilde yazmamız gerekiyor:

H1 (
Metin hizalama: ortala
}

Güç yalnızca orijinal metinde değil tüm küçük öğelerde doğrudur. Örneğin astarın arkasındaki görüntü bir sıra elemanıdır, bu yüzden genellikle aynı yerdedir.

Metin hizalama, kayan nokta ile aynı şey değildir. Text-align, metin içeren bir blok öğesine ayarlanırsa blok davranışını kaybetmez. Bloğun kendisine değil, metnin kendisi yenisine bastırılacaktır. Lütfen şamandıranın tüm elemanı sağa veya sola yönlendirme gücüne sahip olduğunu unutmayın.

Bu, herhangi bir uygulamanın temel unsurları olan HTML'de niteliklerin ve başlıkların atanmasına ilişkin bir derstir. HTML belgesi. Bu insanlara yiyecek vermek neden bu kadar önemli? Bu derste bir niteliğin ne olduğu açıklanmakta ve niteliklerin nasıl kullanılacağı tanıtılmaktadır. Ayrıca dersimizde HTML'de değiştirilmiş başlıklara bakacağız ve başlık örneklerini göstereceğiz.

HTML'deki Nitelikler

Nitelik nedir? Nitelik, etiketlere bilgi sağlayan bir parametre anlamına gelir. Bu parametreler daha da zengin olabilir. Örneğin, ek niteliklerle bir paragrafın metnini genişliğe göre hizalayabilir, yazı tipinin stilini ve boyutunu ayarlayabilir, gerekli girintileri vb. ayarlayabiliriz. Nitelikler etiketlerin ortasına yazılır, ardından saygı işareti gelir ve ardından katlanmış bacaklar niteliğin anlamını belirtir. Nitelikler bir türe ve diğerine bölünmüştür.

Niteliklere sahip robotları uygulama

Şimdi popolarındaki özelliklerle robota bir göz atalım. En basit örnek – paragraf etiketini alın

"Hizala" özelliğiyle. Hadi yaz:

Örnek: Paragraf sola hizalanmış

"Hizala" özelliği, tarayıcıya bu paragrafın ekranın sol kenarına hizalanması gerektiğini bildirir.

Paragraf etiketi ayrıca aşağıdaki özelliklere de sahip olabilir:

• align = "center" - ekranın ortasına hizalanmış;
• hizalama = "sağ" - sağa hizalanmış;
• align = "justify" - metni ekranın genişliğine sığacak şekilde hizalayın.

Şimdi görevi derlemenin zamanı geldi - çözülebilir HTML tarafı birkaç farklı özellikten oluşan bir seçim ile. Bu sayfaya bir örnek, saldırgan kodun anası olacaktır:

HTML'deki Nitelikler

“bgcolor” renk özelliği sayfanın arka planı için bir renk ayarlamamızı sağlar. "Merkez" ve "iki yana yasla" nitelikleri, metni ortaya, görünüşe göre ortalanmış ve geniş bir şekilde hizalar.

HTML'deki başlıklar

indeksli. Toplamda bu tür altı endeks vardır - başlığın boyutunu gösteren 1'den 6'ya kadar (

- en büyük manşet,

- en çok işe alınanlar). Örneğin, birçok başlığın bulunduğu bir web sayfası oluşturalım. Bu sayfanın kodu lütfen bakınız:

HTML'deki Nitelikler

Nitelik nedir? Nitelik, etiketlere bilgi sağlayan bir parametre anlamına gelir. Bu parametrelerden bazıları eşit olmayabilir.

HTML'deki başlıklar

Viktorya sayfasında başlık oluşturmak için özel bir etiket kullanılır indeksli. Toplamda bu tür altı dizin vardır - başlığın boyutunu belirten 1'den 6'ya kadar...

Bu uygulamada iki başlığımız var - ilk seviyenin başlığının hiçbir özelliği yoktur, diğer seviyenin başlığının özelliği ortada hizalanmıştır. Başlıklardan sonra bunların niteliklerini de içeren paragraflar yer alır.

Bu prensibin temeli, HTML'deki nitelikler ve başlıklarla çalışmaktır. Burada karmaşık bir şey yok. Bu derste alınan bilgilerin pekiştirilmesi için ıslak popo üzerinde pratik yapılması önemlidir.