devam ediyoruz HTML öğrenmek. Bu öğreticide, HTML sayfa başlıklarına, başlıkların ne olduğuna, bunların nasıl doğru şekilde kullanılacağına ve ne zaman kullanılabileceklerine bakacağız. Sayfanızı zaten metinle doldurabilmeniz, ancak en önemlisi bunu doğru yapabilmeniz için paragrafları da analiz edeceğiz.

İlk makaleyi okumadıysanız, burada bulabilirsiniz:

Bu derste olduğunuz için site inşası konusunu daha fazla incelemek istiyorsunuz. Ve bu derslerin yardımıyla, onun ne olduğuna dair temel bir anlayışa sahip olacaksınız.

Ya daha fazla bilgiye ihtiyacınız varsa ve hatta bu alanda çalışmak istiyorsanız? Özel kurslar bulmak daha iyidir. Front-end geliştiricilerin eğitildiği RuNet'te çok iyi olanlar yok. Nelogy'nin "" kursunda verdiği eğitim programını beğendim. Skillbox ayrıca "" kursunda iyi bir programa sahiptir.

Web geliştirme okuyorsanız, o zaman profesyonellerle.

Teori ve Uygulama - Bir HTML sayfasının paragrafları ve başlıkları

Bugün paragraflar ve başlıklar hakkında konuşacağız. Basit başlayalım - paragraflarla ve nerede geçerli olduklarıyla.

sayfa başına paragraf

Şimdi paragraf etiketinin bulunacağı bir kod örneği vereceğim.

Temel yapıyı zaten ilk dersten hatırlıyorsunuz. Orada temelleri çözdük ve HTML'nin ne olduğuna baktık. Bu nedenle, etiketlerin arasında ne olduğuna odaklanacağız. .

Bir sayfaya herhangi bir metin yazdığınızda, ister sadece bir paragraf, ister görselin altına küçük bir açıklayıcı satır olsun, bu metni etiketin içine koymanız gerekir.

Sonraki derslerde, bu paragrafları biçimlendirme sürecini göreceksiniz. Artık etiketsiz bir sayfaya etiket koyamayacağınızı anlamalısınız. Çünkü gelecekte metnin bu belirli bölümü için bazı bireysel stilleri uygulamak zor olacaktır.

Birkaç paragraf yazmayı deneyin. Bazı paragrafları etikete koyun ve bazılarını onsuz bırakın. Ve farkı hemen göreceksiniz. Çünkü bu etiketin içine bir paragraf yazarsanız hemen girintileri olur. Şimdi sayfanın HTML başlıklarına geçelim.

Sayfa başına HTML başlıkları

İÇİNDE HTML Belgesi semantik vardır. HTML5 teknolojisinden ve onun yeni etiketlerinden bahsetmiyorum. HTML'nin temellerine hızla hakim olabilmeniz için burada yalnızca en temel olanları analiz edeceğiz. Semantik, başlıkların, paragrafların, tabloların vb. aynı etiket kullanılarak oluşturulmaması gerektiği anlamına gelir. Yapılabilir, ancak HTML teknolojisi daha çeşitlidir ve farklı durumlar için uygun etiketler vardır. Ve HTML koduyla özgürce çalışmak için temel etiketlerde uzmanlaşmanız yeterlidir.

Paragraflar için zaten bildiğiniz etiketi kullanmanız gerektiğine dair bu küçük girişi yazdım. Ancak başlıklar için İngilizce "H" harfi ile başlayan etiketler kullanılır.

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

Bu etiketlerin bazıları çok daha sık kullanılmaktadır. Bunlar h1, h2 veya h3 gibi etiketlerdir. Birisi zaten CSS'ye aşinaysa, o zaman h3 sayfasının HTML başlığının h1 veya h2 gibi görünecek şekilde biçimlendirilebileceğini anlar. Ancak taşıdıkları anlamlar, sadece SEO optimizasyonu, büyük ölçüde farklıdır. Kural olarak, etiketlerin içindeki bu sayılar, şu veya bu HTML başlığının önem düzeyi olarak anlaşılmalıdır. Bu nedenle, bu unsurları dikkatlice incelemek ve ardından arama motorları yazılarınız dikkat çekecektir.

CSS'ye gelene kadar, tarayıcılarda varsayılan olarak ayarlanan başlık stillerini göreceksiniz. Bu etiketleri birer birer eklerseniz ve içine biraz metin yazarsanız, aşağıdakileri göreceksiniz:

Arama robotları için sayfadaki başlıkların kullanımı da önemlidir. Kitabımızda okuyabileceğiniz bazı kurallar vardır -.

Her şeyi inceledikten sonra hemen koda giriyoruz ve her şeyi kendi ellerimizle yazmaya çalışıyoruz. Bu, herhangi bir programlama dilinde uzmanlaşmanın en hızlı yoludur. Ancak HTML teknolojisi, herhangi bir programlama dilinden çok daha hafiftir, dolayısıyla herkes onu anlayabilir. Bu şekilde etiketleri daha iyi hatırlayacaksınız.

Eğitim videosu - HTML sayfası başlığı? (pratik)

Bu etiketlerle çalışma örneğini gösteren görsel video:

Ev ödevi

D/W:örnek olarak 5-7 paragraf ve 2-3 farklı başlıktan oluşacak kısa bir metin yazınız.

Bir web sayfasındaki birçok metin öğesinin ortalanması gerekir. Çoğunlukla manşetler. nasıl yapıldığını görelim css hizalaması orta metin.

metin hizalama özelliği

text-align özelliği bundan sorumludur ve dört değeri vardır:

• Sol - bulunduğu öğenin sol kenarına metin hizalaması
• Sağa - sağa hizalanmış, ancak metnin yönü aynı kalıyor
• Merkez - merkezde. İhtiyacımız olan şey bu. Hiçbiri ekstra seçenekler ayarlamaya gerek yok - tarayıcının kendisi metni farklı ekran çözünürlüklerinde tam olarak ortaya koyacaktır
• Yasla - her satırdaki sözcükler tüm genişliğini kaplayacak şekilde uzatıldığında yasla

Örneğin, başlığı olan rastgele bir metnimiz var:

başlık

Yönümüzü (h1) merkeze hizalamak için şunu yazmamız gerekiyor:

H1(
Metin hizalama: merkez
}

Özellik, yalnızca normal metni değil, aynı zamanda tüm satır içi öğeleri de hizalar. Örneğin, bir resim varsayılan olarak bir satır içi öğedir, dolayısıyla bu kuraldan da etkilenecektir.

Text-align, bir kayan özellik gibi davranmaz. Metin içeren bir blok öğesine text-align uygulanırsa, blok davranışını kaybetmez. İçindeki metne basılacak, bloğun kendisine değil. Bunun, tüm öğeyi sağa veya sola gönderen float özelliğinden farklı olduğunu unutmayın.

Daha önce söz verdiğim gibi, bu eğitimde, kullanımdan kaldırılmış hizalama özelliğini kullanmadan bir sayfadaki herhangi bir HTML etiketinin içeriğini nasıl yatay olarak hizalayacağınızı öğreneceksiniz. Tahmin etmiş olabileceğiniz gibi, yine stilleri (CSS) veya daha doğrusu favori stil özniteliğimizi kullanacağız.

Bu nedenle, bir HTML öğesinin içeriğini hizalamak için, style özelliğine aşağıdaki değerlerden birini atamanız gerekir:

• metin hizalama: merkez- Her satırı paragraf gibi bir öğenin merkezine hizalayın.
• metin hizalama:sol- Her satır, öğenin sol tarafıyla aynı hizadadır (bu varsayılandır).
• metin hizalama:sağa- Her satıra karşı bastırılır Sağ Taraf.
• metin hizalama:yasla- Elemanın hemen sol ve sağ taraflarına hizalama. açıklayacak Tipik olarak, paragraf gibi bir öğenin metnin bir tarafı her zaman düzdür ve diğer tarafı satırların uzunlukları biraz farklı olduğu için "yırtıktır". Ve text-align:justify değerini kullandığımızda, her satırın genişliği eşit olarak dağıtılır. Gerekirse, tarayıcı kelimeler arasına ek boşluklar ekler ve satırın ilk ve son kelimesi her zaman karşılık gelen taraflara bastırılır, böylece blok her iki tarafta eşit olur.

Etiket içeriği hizalama örneği

Merkez başlığı.

Orta paragraf.

Tarayıcıda sonuç

Merkez başlığı.

Paragrafın metni sağa doğru basılır.

Orta paragraf.

Genel olarak, yatay hizalama yalnızca blok etiketler ve tablo hücreleri için geçerlidir (buna daha sonra değineceğiz). Öte yandan, deneseniz bile yerleşik (inline) için uygulayamayacaksınız. Neden? Yakın zamanda bir satır içi öğenin genişliğinin içeriğine eşit olduğunu öğrendiğimizi hatırlıyor musunuz? Buna göre, bu içeriğin hizalanacak hiçbir yeri olmadığı ve tarayıcının "sanatınızı" görmezden geleceği ortaya çıktı. :)

Ev ödevi.

1. Makale için bir başlık, iki bölümü ve ilk bölümde bir alt bölüm oluşturun. Ve makalenin başlığı sayfanın ortasında yer alsın.
2. Tüm sayfanın yazı tipini Arial ve tüm başlıkları Times olarak ayarlayın ve italik olarak bırakın.
3. Makale başlığının metin rengini #FF6600, bölümleri #6600FF olarak ayarlayın ve alt bölümü değiştirmeden bırakın.
4. Her başlığın altına bir paragraf yazın ve her birinin metni bir tarayıcıda görüntülendiğinde en az üç satır kaplamalıdır.
5. İkinci paragrafı ortaya, üçüncü paragrafı sağa ve dördüncü paragrafı her ikisine de hizalayın.

HTML çalışmaya devam ediyoruz. Bu öğreticide, HTML sayfa başlıklarına, başlıkların ne olduğuna, bunların nasıl doğru şekilde kullanılacağına ve ne zaman kullanılabileceklerine bakacağız. Sayfanızı zaten metinle doldurabilmeniz, ancak en önemlisi bunu doğru yapabilmeniz için paragrafları da analiz edeceğiz.

İlk makaleyi okumadıysanız, burada bulabilirsiniz:

• Ders 1. HTML nedir?

Teori ve Uygulama - Bir HTML sayfasının paragrafları ve başlıkları

Bugün paragraflar ve başlıklar hakkında konuşacağız. Basit başlayalım - paragraflarla ve nerede geçerli olduklarıyla.

sayfa başına paragraf

Şimdi paragraf etiketinin bulunacağı bir kod örneği vereceğim.

Temel yapıyı zaten ilk dersten hatırlıyorsunuz. Orada temelleri çözdük ve HTML'nin ne olduğuna baktık. Bu nedenle, etiketlerin arasında ne olduğuna odaklanacağız. .

Bir sayfaya herhangi bir metin yazdığınızda, ister sadece bir paragraf, ister görselin altına küçük bir açıklayıcı satır olsun, bu metni etiketin içine koymanız gerekir.

Sonraki derslerde, bu paragrafları biçimlendirme sürecini göreceksiniz. Artık etiketsiz bir sayfaya etiket koyamayacağınızı anlamalısınız. Çünkü gelecekte metnin bu belirli bölümü için bazı bireysel stilleri uygulamak zor olacaktır.

Birkaç paragraf yazmayı deneyin. Bazı paragrafları etikete koyun ve bazılarını onsuz bırakın. Ve farkı hemen göreceksiniz. Çünkü bu etiketin içine bir paragraf yazarsanız hemen girintileri olur. Şimdi sayfanın HTML başlıklarına geçelim.

Sayfa başına HTML başlıkları

Bir HTML belgesinde semantik vardır. HTML5 teknolojisinden ve onun yeni etiketlerinden bahsetmiyorum. HTML'nin temellerine hızla hakim olabilmeniz için burada yalnızca en temel olanları analiz edeceğiz. Semantik, başlıkların, paragrafların, tabloların vb. aynı etiket kullanılarak oluşturulmaması gerektiği anlamına gelir. Yapılabilir, ancak HTML teknolojisi daha çeşitlidir ve farklı durumlar için uygun etiketler vardır. Ve HTML koduyla özgürce çalışmak için temel etiketlerde uzmanlaşmanız yeterlidir.

Paragraflar için zaten bildiğiniz etiketi kullanmanız gerektiğine dair bu küçük girişi yazdım. Ancak başlıklar için İngilizce "H" harfi ile başlayan etiketler kullanılır.

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

Bu etiketlerin bazıları çok daha sık kullanılmaktadır. Bunlar h1, h2 veya h3 gibi etiketlerdir. Birisi zaten CSS'ye aşinaysa, o zaman h3 sayfasının HTML başlığının h1 veya h2 gibi görünecek şekilde biçimlendirilebileceğini anlar. Ancak en azından SEO optimizasyonu için taşıdıkları anlamlar kökten farklıdır. Kural olarak, etiketlerin içindeki bu sayılar, şu veya bu HTML başlığının önem düzeyi olarak anlaşılmalıdır. Bu nedenle, bu unsurları çok dikkatli bir şekilde çalışmak gerekir ve ardından arama motorları makalelerinizi fark etmeye başlayacaktır.

CSS'ye gelene kadar, tarayıcılarda varsayılan olarak ayarlanan başlık stillerini göreceksiniz. Bu etiketleri birer birer eklerseniz ve içine biraz metin yazarsanız, aşağıdakileri göreceksiniz:

Arama robotları için sayfadaki başlıkların kullanımı da önemlidir. Kitabımızda okuyabileceğiniz belirli kurallar vardır - Site tanıtımında PDF kitap.

Her şeyi inceledikten sonra hemen koda giriyoruz ve her şeyi kendi ellerimizle yazmaya çalışıyoruz. Bu, herhangi bir programlama dilinde uzmanlaşmanın en hızlı yoludur. Ancak HTML teknolojisi, herhangi bir programlama dilinden çok daha hafiftir, dolayısıyla herkes onu anlayabilir. Bu şekilde etiketleri daha iyi hatırlayacaksınız.

Eğitim videosu - HTML sayfası başlığı? (pratik)

Bu etiketlerle çalışma örneğini gösteren görsel video:

Ev ödevi

D/W:örnek olarak 5-7 paragraf ve 2-3 farklı başlıktan oluşacak kısa bir metin yazınız.

Paragraflarda ve HTML sayfası başlıklarında daha fazla pratik yapın!

www.sitehere.ru

HTML'de tablo nasıl yapılır?

Her tablo satırlar ve sütunlar içerir. Sırayla, metin ve bir resim içerebilirler.

Sayfaya tablo eklemek için etiketini kullanın.

. Bu, tablo öğelerinin (satırlar ve sütunlar) yerleştirildiği ana ve ana kaptır. Ve bu konteynerin kapatılması gerekiyor -.

Satırlar ve sütunlar etiketler kullanılarak tanımlanır Ve yerine güvenle kullanabilirsiniz . fark itibaren tarayıcının hücredeki metni göstermesi ve ayrıca onu hücrenin merkezine hizalar - örn. ek biçimlendirme olmadan tablo başlıklarında kullanılabilir. Aksi takdirde aralarında fark yoktur, dilediğinizi kullanabilirsiniz.

Tablo satırları ( ) kesinlikle arasına yerleştirilmelidir

. Ve tablo sütunları ( ) sırayla kesinlikle etiketlerin arasına yerleştirilir .

Bir satır ve dört sütundan oluşacak pratik bir tablo oluşturalım. Tablonun başlangıcını işaretlememiz gerekiyor (

), dizenin başlangıcı ( ), dört hücre ( ), tablonun sonu (

), yolun sonu (

).

Sonuç:

Şimdi etiketi kullanalım bir daha ona dönmemek.

Sonuç:

Tablo genişliğini 400 olarak ayarlıyorum ve gördüğünüz gibi birinci ve üçüncü hücreler kalın ve ortaya hizalı. Geri kalanlar sol tarafta. Kafanızın karışmaması için her zaman kodunuzu biçimlendirmek için yeterince zaman ayırmanızı öneririm. Küçük bir masada bu büyük bir rol oynamayabilir ama büyük bir masada ...

Bahsettiğim için genişlik hakkında biraz daha konuşalım. Tablonun genişliği, width özniteliği, yükseklik - yükseklik tarafından belirlenir. Bu şekilde sadece tablonun genişliğini ve yüksekliğini değil, aynı zamanda hücrelerin boyutlarını da değiştirebilirsiniz (hepsi tabloya sığmalıdır, aksi takdirde tarayıcı ondan ne istediğinizi anlamayacaktır).

Bu değerler (genişlik ve yükseklik) piksel cinsinden yüzde olarak belirtilir. Öyle bırakabilirsiniz, hiçbir şey yazmayın, tarayıcı “px” yazmak için çok tembel olduğunuzu düşünecek ve sayıyı piksel olarak kabul edecektir.

Pekala, bir veya daha fazla tablo hücresinin içeriğini hizalamak istiyorsanız, hizalama özelliğini sol, orta, sağ değerlerle kullanın. Bu yatay hizalamadır, ancak dikey hizalama da vardır ve kendi ayrı özelliğine sahiptir - valign, şu değerleri alabilir: taban çizgisi (tam olarak taban çizgisi boyunca dikey hizalama), alt (alt kenar boyunca), orta (hücre değerler dikey olarak ortada), üstte (üst kenar boyunca) hizalanacaktır. Varsayılan olarak, tarayıcılar hücreleri ortaya (ortaya) hizalar.

Tablonun çerçevesini (kenarlıklarını) artırın ve rengini değiştirin

Fark etmişsinizdir, size tablonun çerçevesi ve genişliği ile nasıl çalışılacağını zaten göstermiştim. Genel olarak, tablo varsayılan olarak tarayıcıda her zaman çerçevesiz görüntülenir ve bu her zaman uygun değildir. Bu yüzden:

Katılıyorum, bir şekilde pek değil. Ancak bu, yazının başında örneklerde kullandığım HTML border niteliğine zaten aşina olanlar için bir sorun değil.

Yalnızca 1 özellik ekleyerek daha iyi hale gelir:

Excel gibi! Hücrelerin çizgilerle (ızgara) bölünmesi olmayacağını hayal edin? Korku. Ancak sınırı 10 olarak ayarlarsanız ne olur?

Gördüğünüz gibi border, tablonun sadece dış kenarlığını ve çerçevesini etkiler, dış çerçevenin genişliğini değiştirirken, tablo hücreleri arasındaki sınırları aynı bırakır.

Bu kenarlığın rengini değiştirelim çünkü bunun için bir öznitelik de var - bordercolor. Değerini "d3d3d3" olarak ayarlayın. Sonuç:

Bir tablo nasıl girintilenir

Hücre kenarlıklarının yanı sıra "okunabilirliği" artırmak için tablodaki girintilere de ihtiyaç vardır. Dolgu oluşturmak için "hücre aralığı" özelliğine ihtiyacımız var. Bu özelliği ona uygulayarak 4x4 masamızla çalışmaya devam edeceğim. Kodu sizin için güncelleyeceğim (Gönderiyi karıştırmamak için yalnızca bir satır ekliyorum):

Sonuç:

Bunlar, hücrelerin dışındaki girintilerdi. Ancak hücrelerin içine girintiler ayarlamak için benzer bir özellik var - cellpadding, şimdi onu da 10'a eşitleyeceğim ve hücrenin içeriğinden sınırlarına olan mesafenin nasıl arttığını göreceksiniz (hücre sayısını yapmak zorunda kaldım) masanın aşırı büyümemesi için daha küçük). kod:

Sonuç:

Şimdi "hücre boşluğunu" kaldıracağız ve yalnızca "hücre dolgusunu" bırakacağız. Sonuç:

Böylece tabloda girintileri nasıl oluşturacağımızı ve bunları nasıl yöneteceğimizi bulduk. Harika! Satır sonu nasıl yapılır ile ilgileniyorsanız, o zaman bu burada yazılmıştır.

Bir tablodaki hücreleri doğru bir şekilde birleştirme

Tablonuzdaki hücreleri birleştirmek için özel nitelikler de vardır. Bunlar "colspan" ve "rowspan" dir. İlki (colspan), hücreleri sütunlarla (yatay olarak), ikincisi (satır aralığı) - satırlarla veya dikey olarak birleştirir. Masamıza bir şeyler katalım.

Burada dikkatlice! Hücreleri birleştirirken, sayılarını özellik parametrelerinde belirttiğiniz sayı kadar (eksi bir) azaltmanız gerekir. HTML'de bir tablo oluşturursanız, gereksiz olanları silmeden hücreleri birleştirin, ardından site gidecektir. İkisini birleştiriyoruz - birini siliyoruz. Üçü birleştiriyoruz - ikisini siliyoruz. Ve benzeri.

Sütun veya sütunlardaki hücreleri birleştirirken, bir hücrenin silinmesi gerekir! Ve bunu birleştirdiğiniz hücre sayısı kadar yapın. Şimdi size bir örnek göstereceğim.

Sütun veya sütunlardaki hücreleri birleştirirken, bir hücrenin silinmesi gerekir! Ve bunu birleştirdiğiniz hücre sayısı kadar yapın.

Şimdi size bir örnek göstereceğim. İşte güncel tablomuz:

"1 ve 2", "5 ve 9", "4, 8, 12", "6 ve 7" numaralı hücreleri birleştirelim. Bakın ne kadar havalı çıktı, ben de beklemiyordum!

Birliğin ilkesi budur.

1 ve 2 numaralı hücreleri yatay olarak birleştirirken, birinciye “colspan =” 2 ″ yazmanız, ikincinin içeriğini birinciye yerleştirmeniz (birleştiriyoruz) ve ikinci hücreyi silmeniz (veya benim gibi HTML'den gizlemeniz) gerekir. yaptım - daha sonra göstereceğim.)

4, 8, 12 numaralı hücreleri dikey olarak birleştirirken, ilk hücreye (4 numaralı) “rowspan =” 2 ″ ” yazmanız ve kalanların içeriğini birleştirilmiş hücreye yerleştirdikten sonra silmeniz gerekir.

İşte bulduğum kod. Netlik için hücreleri gizledim (anlamanızı kolaylaştırmak için), ancak siz de silebilirsiniz.

Umarım anlaşılır bir şekilde anlatmış ve güzel bir örnek vermişimdir.

Bir tablo için bir başlık nasıl yapılır

Bir tabloya başlık vermek için - etiketleri kullanın tablonun başlangıcından sonra (

), ancak etiketin başlangıcından önce . İşte olanlar:

Tablo başlığını tablonun altına yerleştirmesi gerekenler için küçük bir HTML hilesi. Align niteliğini şöyle bir dip değeriyle kullanın:

Ardından tablo başlığı tablonun altına taşınacaktır.

Yani, arka plan dışında neredeyse her şeyi ele aldık!

Bir hücre veya tüm masa için güzel bir arka plan nasıl yapılır?

HTML, rengi yalnızca tablonun tüm arka planı için değil, aynı zamanda her bir hücre için de (böyle bir ihtiyaç varsa) ayarlamanıza olanak tanır. Bir tablonun veya hücrenin arka plan rengini "bgcolor" niteliğine ayarlar.

Önce tüm tablo için arka planı ayarlayayım. Bu, ""açık yeşil"" renk olacaktır (genel olarak, şu şekilde ayarlayabilirsiniz - "" # 90EE90 ""). Masam şimdi böyle başlıyor:

Sonuç:

Vay canına, hücrelerin arka plan rengi çok ""açık yeşil"" hale geldi. Şimdi tablo hücrelerinden birini beyaza boyayacağım, ona aynı niteliği, yalnızca farklı bir renkle vereceğim:

Tada! Sonuç:

Bence harika! Yaratıcı bir e-tablo yarışmasına (veya okul öncesi çocuklara HTML öğretimi) girseydim kesinlikle kazanırdım.

HTML'de tablo arka planı olarak resim nasıl eklenir onu da yazmak istedim ama yukarıdaki linkteki diğer yazımda bundan bahsetmiştim zaten.

HTML öğrenmede iyi şanslar ve başarılar.

blogwork.ru

Site sayfalarının yerleşimi ve ortalanması yaratıcı bir konudur ve genellikle yeni başlayanlar için zorluklara neden olur. Öyleyse nasıl yapacağımızı görelim. Aşağıdaki yapıya sahip bir sayfa yapmak istediğimizi varsayalım:

Sayfamız dört bloktan oluşmaktadır: başlık (başlık), menü (menü), içerik (içerik) ve sitenin altı (alt bilgi). Sayfanın ortasına hizalamak için bu dört bloğu bir ana bloğa (ana) yerleştireceğiz: Bu yapı örneğinde birkaç seçeneği ele alacağız.

Kauçuk sitenin yerleşimi ve merkezlenmesi

Kauçuk bir siteyi döşerken, kullanılan ana ölçü birimi %'dir, çünkü site genişlik olarak uzanmalı ve tüm boş alanı kaplamalıdır.

Bu nedenle "header" ve "footer" bloklarının genişliği ekran genişliğinin %100'ü kadar olacaktır. "menu" bloğunun genişliği %30 olmalı ve "content" bloğu "menu" bloğunun yanında yer almalıdır, yani. "menü" bloğunun genişliğine eşit bir genişliğe sahip bir sol kenar boşluğuna (kenar boşluğu) sahip olmalıdır, yani otuz%.

"menu" ve "content" bloklarının yan yana gelmesi için "menu" bloğunu yüzer hale getirelim ve sol kenara doğru bastıralım. Bloklarımız için arka plan renklerini de ayarlayacağız. Şimdi tüm bunları bir stil sayfasına yazalım (style.css sayfasında)

Blokların yüksekliği, sonucun görünür olması için şartlı olarak ayarlandı. Bir tarayıcıda sayfamıza bakın:

Tarayıcı penceresini yeniden boyutlandırırsanız, tüm blokların genişliği değişir. Bu her zaman uygun değildir, çünkü. menü bloğu uzatıldığında, boş yer. Bu nedenle, "menü" bloğunun genişliği daha sık sabitlenir, hadi yapalım. Bunu yapmak için, stil sayfasındaki karşılık gelen özelliklerin değerlerini değiştirelim: Artık sayfamız daha doğal bir şekilde uzanıyor. Akıcı düzen ile sayfalar ekranın tüm genişliğini kaplar, bu nedenle sayfa ortalamasına gerek kalmaz.

Ancak dilerseniz sayfanızın ekranın sağında ve solunda eşit girintiler olmasını sağlayabilirsiniz. Bunu yapmak için, diğer tüm blokların taşıyıcısı olan "main" bloğa bir stil eklememiz gerekiyor: Şimdi sayfamız şöyle görünüyor:

Site düzeni ve merkezleme, sabit genişlik

Bu durumda bloklarımız için sabit boyutlar belirlememiz gerekecek: Sayfamız artık ekranın sol kenarına sabitlenmiş durumda.

Bu durumda site sayfalarının ortasına hizalama aşağıdaki gibi yapılabilir. Sayfamızın bir genişlik ve biraz dolgu verilebilen bir "body" etiketi olduğunu hatırlayın.

Bunu yapalım: "body" etiketinin genişliğini 800 piksele ("ana" blok gibi) ve sol girintiyi (sol dolgu) %50 olarak ayarlayın. Ardından, "ana" bloğun tüm içeriği ekranın sağ tarafında görüntülenecektir (yani ortadan sağa doğru):

“Ana” bloğumuzun ekranın ortasında yer alması için ortasının “body” etiketinin ortasıyla eşleşmesi gerekir. Onlar. “ana” bloğu, boyutunun yarısı kadar sola kaydırmamız gerekiyor. "Ana" bloğun genişliği 800 pikseldir, bu nedenle ona "margin-left: -400px" özelliğini ayarlamanız gerekir. Evet, bu özellik negatif değerler alabilir, bu durumda sol kenar boşluğu azalır (yani sola kaydırılır). Ve tam da ihtiyacımız olan şey bu.

Şimdi stil sayfası şöyle görünür: Ve tarayıcıdaki sayfamız tam olarak ortada bulunur:

Sitenin sayfalarını ortalamak için iki seçeneği düşündük, aslında bunlar bir dogma değil. Deneyebilir ve kendi sürümünüzü oluşturabilirsiniz, sadece çalışmasını kontrol edin. farklı tarayıcılar. Ne yazık ki, FireFox veya Opera'da iyi görüntülenenler IE'de tamamen anlaşılmaz olabilir ve bunun tersi de geçerlidir. Ve bu hatırlanmalıdır.

Yaratıcı arayışlarınızda iyi şanslar!

www.site-do.ru

Metni html'de ortalamak nasıl?

HTML'de, CSS kullanımını gerektirmeyen iki seçenek vardır.

1. 1.Etiket
   İçinde bulunan tüm satır içi öğeleri ortalayan, kullanımı çok kolay bir etiket, yani:
   • metin,
   • resimler,
   • bağlantılar,
   • etiketlerin yanı sıra , , , ve diğerleri.
     2. Değer merkezi ile HTML hizalama özelliğini kullanma.
     Bu niteliği ortalamamız gereken metni içeren blok etiketinin içine eklememiz gerekiyor.
     Bu bir etiket olabilir

     ,

     ,

     …

     ve diğerleri.

     Align niteliğinin başka değerleri de vardır:

     • hizala='"sola'- sola metin hizalaması
     • hizala='sağ'- doğru hizalama
     • hizalamak='haklı'- metni iki yana yasla

     Metin CSS ile nasıl ortalanır?

     Şahsen, metni ortalamak için HTML etiketlerini ve niteliklerini kullanmanın en iyi çözüm olmadığını düşünüyorum. Metni yalnızca bir veya iki yerde hizalamanız gerekiyorsa ve CSS ile uğraşmak istemiyorsanız, HTML'nin gücünü kullanabilirsiniz, ancak hizalamayı sayfada birden çok yerde ortalamak istiyorsanız, CSS'yi kullanın.

     Bunun için özel bir mülkümüz var. Metin hizalama, ayrıca birkaç anlamı vardır:

     • metin hizalama: merkez;- merkez hizalaması için
     • metin hizalama: sola;- sol tarafta
     • metin hizalama: sağ;- sağ tarafta
     • metin hizalama: iki yana yasla;- bloğun veya sayfanın genişliğine göre.

     Metnimize uygulamak için önerilen seçeneklerden birini kullanabilirsiniz:

     1. 1. Blok etiketini (başlık, form, paragraf veya diğer blok öğesi) CSS sınıfına atayın:

        Ardından sitenizin CSS dosyasına şunu yazıyoruz:

        Yerine metin bloğu başka herhangi bir sınıf adı olabilir.

        Sitedeki tüm paragraflar veya başlıklar için metin hizalamasını aynı anda ortalamanız gerekiyorsa, bu CSS özelliğini herkes için yazmak gerekli değildir. Bu paragrafların veya başlıkların bulunduğu bloğun sınıfını veya tanımlayıcısını ayarlamak veya tanımlamak ve ardından CSS dosyasına aşağıdaki girişi eklemek yeterlidir:

        Bu durumda, metnin merkeze hizalanması tüm etiketlere uygulanacaktır.

        Blok sınıfı ile etiketin içinde olanlar:

        Bir bloğun içindeki başlıkları blok sınıfıyla hizalamak için notasyon biraz farklı olacaktır:

     2. 2. Style niteliğini kullanarak gerekli CSS özelliklerini etiketin kendisine ekleyebilirsiniz:

        Bu yöntemin yanı sıra öznitelik hizalamak veya etiket merkez, yalnızca hizalamanın bir veya daha fazla yerde yapılması gereken durumlarda kullanışlıdır. Toplu metin hizalaması için kullanmanızı tavsiye etmiyorum.

     Benim için hepsi bu! Sitemi ziyaret ettiğiniz için teşekkür ederim! Yorumlarınızı görmekten çok memnun olacağım! İyi şanslar ve refah!

     Saygılarımla, Yulia Gusar

     dürtü-web.ru

     HTML'deki nitelikler

     Nitelik nedir? Nitelik, etiketlere belirli bilgileri veren bir parametredir. Bu parametrelerden çok sayıda olabilir. Örneğin, niteliklerin yardımıyla bir paragrafın metnini genişlikte hizalayabilir, yazı tipi stilini ve boyutunu ayarlayabilir, gerekli girintileri ayarlayabilir, vb. Nitelikler etiketlerin içine yazılır, ardından eşittir işareti gelir, ardından nitelik değerleri çift tırnak içinde belirtilir. Nitelikler birbirinden noktalı virgülle ayrılır.

     Nitelik Örnekleri

     Örnekler üzerinde niteliklerle çalışmayı düşünün. En basit örnek - paragraf etiketini alın

     "hizalama" özniteliği ile. Hadi yaz:

     Paragrafı sola hizalama örneği

     "Align" niteliği, tarayıcıya paragrafı ekranın soluna hizalamasını söyler.

     Nitelikler paragraf etiketine de uygulanabilir:

     • align="center" - ekranın ortasına hizalama;
     • align="right" - sağa hizalama;
     • align="justify" - metni ekranın genişliğine göre hizalayın.

     Şimdi görevi karmaşıklaştıralım - birkaç farklı özellik kullanarak bir HTML sayfası oluşturacağız. Böyle bir sayfanın bir örneği aşağıdaki koda sahip olacaktır:

     HTML'deki nitelikler

     "bgcolor" color niteliği, sayfanın arka plan rengini belirlememizi sağlar. "Merkez" ve "Yasla" nitelikleri, metni sırasıyla merkezde ve genişlikte kendi içlerinde hizalar.

     HTML'deki başlıklar

     indeks ile. Bu tür yalnızca altı dizin vardır - 1'den 6'ya kadar, başlığın boyutunu gösterirler (

     en büyük başlık,

     - en küçük). Örneğin, birkaç başlığı olan bir web sayfası oluşturalım. Bu sayfanın kodu şöyle görünecektir:

     HTML'deki nitelikler

     Nitelik nedir? Nitelik, etiketlere belirli bilgileri veren bir parametredir. Bu parametreler sınırsız olabilir.

     HTML'deki başlıklar

     Sayfada başlık oluşturmak için özel bir etiket kullanılır. indeks ile. Bu tür yalnızca altı dizin vardır - 1'den 6'ya kadar, bunlar başlığın boyutunu gösterir...

     Bu örnekte, iki başlığımız var - birinci seviye başlığın burada özelliği yok, ikinci seviye başlığın bir merkez hizalama özelliği var. Başlıklardan sonra kendi nitelikleri de olan paragraflar gelir.

     HTML'deki nitelikler ve başlıklarla bu şekilde çalışırlar. Burada karmaşık bir şey yok. Bu derste edindiğiniz bilgileri pekiştirmek için kendi örnekleriniz üzerinde pratik yaptığınızdan emin olun.

     siteblogger.ru

     Herkese selamlar. Tasarım sırasında blog başlığının, gönderi başlığının ve gadget başlıklarının merkez dışı olduğunu fark ettiniz mi?

     Belki birisi bu seçenekten memnundur. Ancak bunları hizalamak istiyorsanız, bu gönderi tam size göre.Genellikle Photoshop veya başka bir düzenleyici kullanarak kendi benzersiz blog başlığımızı oluştururuz. Burada tabi ki isim tam olarak olmasını istediğimiz yerde bulunuyor. Ancak başlangıçta herkes bunu nasıl yapacağını bilmiyor ve yalnızca bize sunulan ayarlarla yetiniyor. Sonuç olarak, blogun başlığı sola kaydırılır.

     Bunu blog şablonunda CSS ile nasıl düzeltebileceğimize bakalım. Tüm başlıkları kesinlikle merkeze yerleştirelim ve onlara biraz benzersizlik katalım.

     Her zamanki gibi, şablon sekmesine gidin ve bir yedek kopya oluşturduğunuzdan emin olun. Bir şeyler ters giderse, şablonu bilgisayarınızdan tekrar indirebilirsiniz. Ve şimdilik tüm deneyleri blog testlerinde yapsanız daha iyi olur. Bunun için aynı şablonu temel alan başka bir blog oluşturun.

     Blog başlığı nasıl ortalanır.
     
     Şablon sekmesi - HTML'yi düzenleyin. Şablonun en üstünde, soldaki siyah işaretçiye (ok) tıklayın.

     Ve burada tüm CSS kodları bizden önce açıldı. Yavaşça aşağı iniyoruz ve çizgiyi buluyoruz .Başlık h1 (
     
     

     Parantezlerden hemen sonra değeri yazın

     metin hizalama: merkez;

     Böylece blogun adı kesinlikle merkezde yer almaktadır. Sonucu görmek için şablonu görüntüle'ye tıklayın. Her şey yolunda gitti. Kaydet'i tıklayın.

     Ancak işleri biraz renklendirmek için, bu köşeli parantezlere eklenebilecek birkaç CSS stiline daha göz atalım. İhtiyacınız olup olmadığı size kalmış. Burada birçok seçenek var. Renk değerlerini değiştirin.

     arka plan:#e9967a; - arka plan rengi.
     veya arka plan:url (http://www.fonstola.ru/large/201310/134392.jpg); arka plan yerine resim
     yükseklik:50 piksel; — başlık bloğunun genişlik değeri.
     metin gölgesi: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.10); - metin için gölgeyi ayarla
     sınır yarıçapı: 15px; - yuvarlatılmış köşeler.
     -moz-box-shadow:0 0 30px #a28b53 ek;
     kutu gölgesi:0 0 30px #a28b53 ek;
     -webkit-box-shadow:0 0 30px #a28b53 ek;

     Başlık alanının iç gölgesi mavi renkle vurgulanmıştır. Sadece dikkatli ol. Rengi değiştirirseniz, yalnızca bu #e9967a(karma ve altı basamaklı sayı). İki nokta üst üste, parantez, kısa çizgi, noktalı virgül - kodda her şey çok önemlidir.

     Kenar çubuğunda gadget başlığı nasıl ortalanır.

     Ayrıca aşağıya inip bu satırı buluyoruz
     
     .kenar çubuğu .widget h2 (
     
     

     Parantez içinde text-align: center; yazıyoruz. Ancak bu durumda genişliği, yazı tipi boyutunu, girintileri ayarlamak gerekir. Burada arka plan yerine bir resim kullandım ve metin ve blok için bir gölge belirledim.

     arka plan:url(http://www.fonstola.ru/large/201310/134392.jpg); arka plan veya resim
     yükseklik:20 piksel;
     genişlik: 200 piksel
     sınır yarıçapı: 13px;
     sol kenar boşluğu: 0px;
     dolgu-top:0px; /çerçeve kenarından uzaklık/
     yazı tipi boyutu: 16 piksel; /yazı Boyutu/
     metin hizalama: merkez; /metin konumu/
     metin gölgesi: 4px 3px 0px #d2bf94;, 6px 5px 5px rgba(0,0,0,0.10); /metin için gölge/
     kutu gölgesi: 0 4px 6px rgba(0, 0, 0, .2); /blok gölgesi/
     

     www.spargalochki.ru

     CSS Düzey 3'te Dikey ve Yatay Merkezleme

     Her iki yöntemi de aynı anda yatay ve dikey olarak merkezleyecek şekilde genişletebiliriz.

     Mutlak paragraf konumlandırmanın bir yan etkisi, paragrafın tam olarak olması gerektiği kadar geniş hale gelmesidir (açıkça bir genişlik belirtmedikçe). Aşağıdaki örnekte, tam olarak istediğimiz şey bu: tek kelimelik bir paragrafı ortalıyoruz (“Merkez!”), böylece paragrafın genişliği o kelimenin genişliğine eşit olmalıdır.

     Sarı arka plan, paragrafın gerçekten de içeriğiyle aynı genişlikte olduğunu açıkça göstermektedir. İşaretlemenin aynı kaldığını varsayıyoruz:

     Merkez!

     Dikey merkezleme açısından, bu stil sayfası bir önceki örnektekine benzer. Ama şimdi 'left: 50%' kuralı ile elementi container'ın yarısına kadar hareket ettiriyoruz ve aynı zamanda 'translate' dönüşümünde kendi genişliğinin yarısı kadar sola kaydırıyoruz:

     div.container4 ( yükseklik: 10em; konum: göreli ) div.container4 p ( kenar boşluğu: 0; arka plan: sarı; konum: mutlak; üst: %50; sol: %50 sağ kenar boşluğu: -50% dönüştür: çevir( -50%, -50%) }

     Aşağıdaki örnek, 'sağ kenar boşluğu: -%50' kuralının neden gerekli olduğunu açıklamaktadır.

     CSS biçimlendirici 'esnek'i desteklediğinde işler daha da kolaylaşır:

     bu stil sayfasıyla:

     Div.container6( yükseklik: 10em; ekran: esnek; öğeleri hizala: merkez; haklı içerik: merkez) div.container6 p ( kenar boşluğu: 0 )

     onlar. tek ekleme "haklı içerik: merkez" şeklindedir. Nasıl 'align-items' konteyner içeriğinin dikey hizalamasını tanımlıyorsa, 'justify-content' de yatay hizalamayı aynı şekilde tanımlar. (Aslında, adlarından da anlaşılacağı gibi biraz daha karmaşıktır, ancak basit bir durumda, bu şekilde çalışır.). 'Esnek' özelliğini kullanmanın bir yan etkisi, bizim durumumuzda alt öğe olan P'nin otomatik olarak olabildiğince küçülmesidir.