HTML'de Çizgi Nasıl Eklenir?

Bu How.com.vn 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]XKaynağı araştır}

Yöntem 1

Yöntem 1 / 2:

HTML 4.01 Kullanarak

Makaleyi İndir

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ç’a tıkla.
- Bir HTML dosyası seç.
- Aç’a tıkla
Ç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.
Ç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şı.
Satırın başındaki boşluğa <hr> yaz. <hr> etiketi tüm sayfa boyunca yatay bir çizgi oluşturmaktan sorumludur.
Bunu yapmak için ↵ Enter tuşuna bas. Bu noktada, <hr> etiketi kendi satırında olmalıdır.
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]XKaynağı araştır}
- Ç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
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
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]XKaynağı araştır}
Reklam

Yöntem 2

Yöntem 2 / 2:

CSS/HTML5 Kullanarak

Makaleyi İndir

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ç’a tıkla.
- Bir HTML dosyası seç.
- Aç’a tıkla
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
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.
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
"<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.
Bu, <hr> etiketin için stil ayarlarını kapatır.

How.com.vn Türkçe: Step 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]XKaynağı araştır} 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>