Bu wikiHow makalesi HTML’de yatay bir çizginin nasıl oluşturulacağını öğretir. Yatay bir çizgi, internet sitendeki içeriği ayırmak için kullanılabilir. Bir çizgi oluşturmanın kodu oldukça basittir. Ancak, çizgini biçimlendirmek için HTML 4.01’de satır için kod ekleyebilirsin. HTML5’te çizgini biçimlendirmek için CSS kullanman gerekir.[1]

Yöntem 1 / 2:
HTML 4.01 Kullanarak

  1. 1
    Yeni bir HTML belgesi aç ya da oluştur. HTML belgeleri Not Defteri gibi bir metin düzenleyicisi ile düzenlenebilir. Ayrıca Adobe Dreamweaver gibi bir kod düzenleyicisi de kullanabilirsin. Bir HTML belgesini tercih ettiğin programda açmak için aşağıdaki adımları kullan:
    • Not Defterini ya da tercih ettiğin metin/kod düzenleyicisini aç.
    • Dosya menüsüne tıkla.
    • ’a tıkla.
    • Bir HTML dosyası seç.
    • ’a tıkla
  2. 2
    Çizgi eklemek istediğin noktayı seç. Çizgi eklemek istediğin satırın üzerindeki satırı bulana kadar sayfayı kaydır, ardından imleci satır başlangıcının hemen önüne yerleştirmek için satırın en soluna tıkla.
  3. 3
    Bir boşluk oluştur. Çizgiyi eklemek istediğin satırdaki metni aşağı taşımak için iki kez Enter tuşuna bas, ardından imleci yukarıdaki boş alana taşı.
  4. 4
    "<hr>" etiketini ekle. Satırın başındaki boşluğa <hr> yaz. <hr> etiketi tüm sayfa boyunca yatay bir çizgi oluşturmaktan sorumludur.
  5. 5
    "hr" etiketinin önündeki satırı yeni bir satıra taşı. Bunu yapmak için Enter tuşuna bas. Bu noktada, <hr> etiketi kendi satırında olmalıdır.
  6. 6
    Yatay çizgiye özellikler ekle (isteğe bağlı). Bir çizgiye, uzunluk, genişlik, renk ve hizalama gibi özellikler ekleyebilirsin. Aşağıdaki kodları, kod parantezindeki "hr" ifadesinden sonra kullan. Aralarına bir boşluk bırakarak bir parantez içine birden fazla özellik ekleyebilirsin.[2]
    • Çizginin kalınlığını değiştirmek için <hr size="#"> yaz. # yerine kalınlık değerini gir (ör., size="10").
    • Çizgi genişliğini değiştirmek için <hr width="#"> yaz. # yerine piksel genişlik değerini ya da sayfa genişliği yüzdesini gir (ör., width="200" veya width="75%").
    • Çizginin rengini değiştirmek için <hr color="#"> yaz. # yerine rengin adını ya da onaltılı kodu gir (ör., color="red" veya color="#FF0000")
    • Çizgiyi hizalamak için <hr align="#"> yaz. # yerine "right" (sağ), "left" (sol), ya da "center" (orta) yaz (ör., <hr width="50%" align="center">).
  7. 7
    HTML dosyanı kaydet. Bir metin dosyasını HTML belgesi olarak kaydetmek için dosya uzantısını (.txt, .docx) ".html" ile değiştirmen gerekir. HTML belgeni kaydetmek için aşağıdaki adımları kullan:
    • Dosya menüsüne tıkla.
    • Farklı Kaydet’e tıkla.
    • Dosya için "Dosya adı" alanına bir isim yaz.
    • Dosya adının sonuna .html yaz.
    • Kaydet’e tıkla.
  8. 8
    HTML dosyanı test et. HTML dosyanı test etmek için dosyaya sağ tıkla ve Birlikte aç’ı seç. Sonra bir internet tarayıcısı seç. "hr" etiketini yerleştirdiğin yerde kalın bir çizgi gözükmeli. HTML kodun şunun gibi görünmelidir:[3]
      <!DOCTYPE html>
      <html>
      <body>
      
      <h1>Bu bir Başlıktır</h1>
      
      <hr size="6" width="50%" align="left" color="green">
      
      <p1>Bu paragraf metni bir çizgi ile başlıktan ayrılmıştır.</p1>
      
      </body>
      </html>
      
    Reklam

Yöntem 2 / 2:
CSS/HTML5 Kullanarak

  1. 1
    Yeni bir HTML belgesi aç ya da oluştur. HTML belgeleri Not Defteri gibi bir metin düzenleyicisi ile düzenlenebilir. Ayrıca Adobe Dreamweaver gibi bir kod düzenleyicisi de kullanabilirsin. Bir HTML belgesini tercih ettiğin programda açmak için aşağıdaki adımları kullan:
    • Not Defterini ya da tercih ettiğin metin/kod düzenleyicisini aç.
    • Dosya menüsüne tıkla.
    • ’a tıkla.
    • Bir HTML dosyası seç.
    • ’a tıkla
  2. 2
    HTML belgene head etiketi ekle. Eğer HTML belgende bir head etiketi yoksa eklemek için aşağıdaki adımları kullan. Head, "<html>" etiketinden sonra ve "<body>" etiketinden önce gelir.
    • Belgenin en üstüne <head> yaz.
    • İki satır eklemek için iki kez Enter’a tıkla.
    • Head etiketini kapatmak için </head> yaz.
  3. 3
    Head bölümüne <style type="text/css"> yaz. Style etiketi iki head etiketinin arasında olur. Bu, HTML’ini biçimlendirmek için CSS kodu yazabileceğin bir yer oluşturur.
    • Alternatif olarak harici bir stil sayfası kullanabilirsin.
  4. 4
    hr { yaz. Bu, yatay çizgini biçimlendirmek için kullanacağın CSS etiketidir. Bunu head bölümündeki style etiketinden sonra ya da harici CSS dosyana ekle.
  5. 5
    "<hr>" etiketin için CSS stillerini ekle. Bunlar "hr {" etiketinden sonra gelir. Yatay bir çizgiyi biçimlendirmek için birçok yol vardır. Aşağıda birkaç örnek göreceksin.
    • Çizgi genişliğini ayarlamak için width: ##px; yaz. ## yerine çizgi genişliğinin piksel değerini yaz. Piksel (px) yerine yüzde (%) değerini de kullanabilirsin.
    • Çizgi kalınlığını ayarlamak için height: ##px; yaz. ## yerine çizgi kalınlığının piksel değerini yaz.
    • Çizginin rengini ayarlamak için background-color: ##; yaz. ## yerine rengin adını ya da diyez (#) işaretinin peşine onaltılı renk kodunu yaz.
    • Sağ kenara olan mesafeyi ayarlamak için margin-right: ##px; yaz. ## yerine piksel sayısını ya da "auto" yaz. Çizgiyi sola ya da ortaya hizalamak için "auto" yaz.
    • Sol kenara olan mesafeyi ayarlamak için margin-left: ##px;yaz. ## yerine piksel sayısını ya da "auto" yaz. Çizgiyi sağa ya da ortaya hizalamak için "auto" yaz.
    • Çizgiye bir üst boşluk ayarlamak için margin-top: ##px; yaz. ## yerine boşluk kalınlığının piksel değerini yaz.
    • Çizgiye bir alt boşluk ayarlamak için margin-bottom: ##px; yaz. ## yerine boşluk kalınlığının piksel değerini yaz.
    • Çizginin etrafında bir sınır oluşturmak için border-width: ##px; yaz (isteğe bağlı). ## yerine sınır kalınlığının piksel değerini gir.
    • Sınır rengini ayarlamak için border-color: ##; yaz (isteğe bağlı). ## yerine rengin adını ya da diyez (#) işaretinin peşine onaltılı renk kodunu yaz.
  6. 6
    Stil ayarından sonra } yaz. Bu, <hr> etiketin için stil ayarlarını kapatır.
  7. 7
    HTML belgenin body bölümünde bir yere <hr> yaz. Bu, HTML belgene yatay bir çizgi ekler. HTML’inde <hr> etiketini kullandığın anda CSS stil ayarların hemen uygulanır.[4] Kodun şunun gibi gözükmelidir:
      <!DOCTYPE html>
      <html>
      <head>
      <style type="text/css">
      
      hr {
      width: 50%;
      height: 20px;
      background-color: red;
      margin-right: auto;
      margin-left: auto;
      margin-top: 5px;
      margin-bottom: 5px;
      border-width: 2px;
      border-color: green;
      }
      
      </style>
      
      </head>
      <body>
      
      <h1>Bu bir Başlıktır</h1>
      
      <hr>
      
      <p1>Bu paragraf metni yatay bir çizgi ile başlıktan ayrılmıştır.</p1>
      
      </body>
      </html>
      
    Reklam

Bununla İlgili wikiHow'lar

wikiHow

Google'da Resimli Arama Nasıl Yapılır?

wikiHow

Android'de Güvenli Mod Nasıl Kapatılır?

wikiHow

Smart TV'ye Uygulama Nasıl Eklenir?

wikiHow

Android'de Telegram Hesabı Nasıl Silinir?

wikiHow

Birisinin Numaranı Whatsapp'ına Kaydettiği Nasıl Anlaşılır?

wikiHow

Snapchat Puanı Nasıl Hızlı Arttırılır?

wikiHow

Windows Bilgisayarda Ses Çıkmaması Sorunu Nasıl Çözülür?

wikiHow

WhatsApp’ta Silinen Mesajlar Nasıl Kurtarılır?

wikiHow

Akıllı Saat Android'le Nasıl Eşleştirilir?

wikiHow

Nasıl Hacker Olunur?

wikiHow

Bilgisayarın Bluetooth Özelliği Olup Olmadığı Nasıl Anlaşılır?

wikiHow

Televizyonun Ölçüsü Nasıl Alınır?

wikiHow

Hoşlanılan Kişiye Mesaj Nasıl Atılır?

wikiHow

Resim Kullanarak Biri Kolayca Nasıl Araştırılır ve Bulunur?
Reklam

Bu wikiHow makalesi hakkında

wikiHow Kadrosu
Ortak yazarlar:
wikiHow Editör Ekibi
Bu makale editörler ve araştırmacılardan oluşan, makalenin doğruluğu ile kapsamlılığını onaylayan, eğitimli bir ekip tarafından ortaklaşa yazılmıştır.

wikiHow’ın İçerik Yönetim Ekibi, yüksek kalite standartlarımızı sağladığından emin olmak için, editör ekibimizden gelen her çalışmayı dikkatli bir şekilde denetler. Bu makale 1.001 defa görüntülenmiştir.
Bu sayfaya 1.001 defa erişilmiş.

Bu makale işine yaradı mı?

Reklam