Gerekli aletler
HTML'de hizalama kavramını detaylandırmak için HTML kodunu çalıştırmak için gerekli bazı araçlardan bahsetmemiz gerekiyor. Biri bir metin düzenleyici, diğeri ise bir tarayıcı. Bir metin düzenleyici, belki bir not defteri, yüce, not defteri ++ veya yardımcı olabilecek başka bir şey olabilir. Bu kılavuzda, Windows'ta varsayılan bir uygulama olan notepad'i ve tarayıcı olarak Google Chrome'u kullandık.
HTML biçimi
Hizalamayı anlamak için öncelikle HTML temelleri hakkında biraz bilgi sahibi olmamız gerekir. Örnek bir kodun ekran görüntüsünü sunduk.
< html >
< kafa >...</ kafa >
< vücut >….</ vücut >
</ html >
HTML'nin iki ana bölümü vardır. Biri kafa, diğeri gövde. Tüm etiketler köşeli parantez içinde yazılır. Başlık kısmı, başlık etiketi kullanılarak html sayfasının adlandırılmasıyla ilgilenir. Ayrıca, kafanın içindeki stil ifadesini kullanın. Öte yandan, body, metin, resim veya video vb. diğer tüm etiketlerle ilgilenir, yani html sayfanıza eklemek istediğiniz her şey html'nin body kısmına yazılır.
Burada vurgulamam gereken bir şey, açılış ve kapanış etiketi. Yazılan her etiket kapatılmalıdır. Örneğin, Html'de başlangıç etiketi vardır ve bitiş etiketi . Bu nedenle, bitiş etiketinin ardından etiket adının bir eğik çizgiye sahip olduğu gözlemlenir. Benzer şekilde, diğer tüm etiketler de aynı yaklaşımı izler. Her metin düzenleyici daha sonra html uzantısıyla kaydedilir. Örneğin, example.html adında bir dosya kullandık. Ardından not defteri simgesinin tarayıcı simgesine dönüştüğünü göreceksiniz.
Hizalama, stilin içeriği olduğundan. Html'deki stil üç tiptir. Hat içi stil, iç ve dış stil. Satır içi etikette ima eder. İç kafanın içinde yazılır. Aynı zamanda, harici stil ayrı bir CSS dosyasına yazılır.
Metnin satır içi stili
örnek 1
Şimdi burada bir örneği tartışmanın zamanı geldi. Yukarıda gösterilen resmi düşünün. O not defteri dosyasına basit bir metin yazdık. Tarayıcı olarak çalıştırdığımızda tarayıcıda aşağıda verilen çıktıyı gösterecektir.
Bu metnin ortada görünmesini istiyorsak, etiketi değiştireceğiz.
Bu etiket bir satır içi etikettir. Paragraf etiketini html gövdesinde tanıtacağımız zaman bu etiketi yazacağız. Metinden sonra paragraf etiketini kapatın. Dosyayı kaydedin ve ardından tarayıcıda açın.
Paragraf, tarayıcıda görüntülendiği gibi ortaya hizalanır. Bu örnekte kullanılan etiket, herhangi bir hizalama için, yani sol, sağ ve orta için kullanılır. Ancak metni yalnızca ortaya hizalamak istiyorsanız, bu amaç için belirli bir etiket kullanılır.
< merkez > …… ..</ merkez >Merkez etiketi metinden önce ve sonra kullanılır. Bu aynı zamanda önceki örnekle aynı sonucu gösterecektir.
Örnek 2
Bu, html metninde paragraf yerine başlığı hizalamaya bir örnektir. Bu başlık hizalamasının sözdizimi aynıdır. Bu, hem etiket aracılığıyla hem de satır içi stil vererek veya başlık etiketinin içine hizalama etiketi ekleyerek yapılabilir.
Çıktı tarayıcıda gösterilir. Başlık etiketi, düz metni bir başlığa dönüştürdü ve etiket onu ortaya hizaladı.
Örnek 3
Metni ortaya hizalayın
Tarayıcıda görüntülenen bir paragrafın olduğu bir örnek düşünün. Bunu merkeze hizalamamız gerekiyor.
Bu dosyayı not defterinde açacağız ve ardından etiketini kullanarak orta konuma hizalayacağız.
< P stil =Metin-hizalamak: merkez ;>Bu etiketi paragraf etiketine ekledikten sonra lütfen dosyayı kaydedin ve tarayıcıda çalıştırın. Paragrafın şimdi ortalanmış olarak hizalandığını göreceksiniz. Aşağıdaki resme bakın.
Metni sağa hizalayın
Metni sağa eğmek, onu sayfanın ortasına yerleştirmeye benzer. Paragraf etiketinde yalnızca ortadaki sözcük sağ ile değiştirilir.
< P stil =Metin-hizalamak: doğru ;>………..</ P >Değişiklikler aşağıdaki ekteki görselden görülebilir.
Web sayfasını tarayıcıda kaydedin ve yenileyin. Metin artık sayfanın sağ tarafına taşınmıştır.
Metnin iç stili
Örnek 1
Yukarıda açıklandığı gibi, dahili css (basamaklı stil sayfası) veya dahili stil, sayfanın html'sinin baş kısmında tanımlanan bir css türüdür. Dahili etiketlerin yaptığına benzer şekilde çalışır.
Yukarıda gösterilen sayfayı düşünün; içinde başlıklar ve paragraflar bulunur. Ortadaki metni görme zorunluluğumuz var. Satır içi hizalama, etiketlerin her paragrafın içine manuel olarak yazılmasını gerektirir. Ancak iç stil, stil ifadesinde p'den bahsederek metnin her paragrafına otomatik olarak uygulanabilir. Bu durumda paragraf etiketinin içine herhangi bir etiket yazmaya gerek yoktur. Şimdi kodu gözlemleyin ve çalışıyor.
< stil >P{Metin-hizalamak: merkez}
</ stil >
Bu etiket, head kısmındaki style etiketinin içine yazılır. Şimdi kodu tarayıcıda çalıştırın.
Sayfayı tarayıcıda çalıştırdığınızda, tüm paragrafların sayfanın ortasına hizalandığını göreceksiniz. Bu etiket, metinde bulunan her paragrafa uygulanır.
Örnek 2
Bu örnekte tıpkı bir paragraf gibi metindeki tüm başlıkları sağ tarafa hizalayacağız. Bu amaçla başlığın içindeki stil ifadesinde başlıklara değineceğiz.
H2, h3{
Metin-hizalamak: sağ
}
Şimdi dosyayı kaydettikten sonra, not defteri dosyasını tarayıcıda çalıştırın. Başlıkların HTML sayfasının sağ tarafında hizalandığını göreceksiniz.
Örnek 3
İç stilde, metindeki yalnızca bazı paragrafların metnini hizalamanız gerekirken diğerleri aynı kaldığı bir durum olabilir. Bu nedenle, sınıf kavramını kullanıyoruz. Stil etiketinin içinde bir nokta yöntemi ile sınıfı tanıtıyoruz. Hizalamak istediğiniz paragraf etiketinin içine sınıfın adını eklemeniz gerekir.
< stil >.center{
Metin-hizalamak: merkez}
</ stil >
sınıf =merkez>……</ P >
İlk üç paragrafta sınıfı ekledik. Şimdi kodu çalıştırın. Çıktıda ilk üç paragrafın ortaya hizalandığını, diğerlerinin hizalanmadığını görebilirsiniz.
Çözüm
Bu makale, hizalamanın satır içi ve dahili etiketler aracılığıyla farklı şekillerde yapılabileceğini açıkladı.