ร่วมเขียน โดย
ทีมงานวิกิฮาว
X
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว
จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้
บทความนี้ถูกเข้าชม 4,463 ครั้ง
บทความวิกิฮาวนี้จะแนะนำวิธีการสร้างเส้นนอนใน HTML เส้นนอนนี้ใช้แบ่งเนื้อหาในเว็บไซต์ออกจากกันให้เห็นเด่นชัด โค้ดที่ใช้สร้างเส้นนี้ก็ไม่ซับซ้อนอะไร ถ้าเป็น HTML 4.01 ต้องเขียนโค้ดเป็นบรรทัด ถ้าเป็น HTML5 ให้ใช้ CSS สร้างเส้นแทน [1] X แหล่งข้อมูลอ้างอิง
ขั้นตอน
-
1เปิดหรือสร้างเอกสาร HTML ใหม่. คุณแก้ไขเอกสาร HTML ได้ด้วย text editor อย่าง Notepad หรือใช้ code editor อย่าง Adobe Dreamweaver ก็ได้ ให้ทำตามขั้นตอนต่อไปนี้ เพื่อเปิดเอกสาร HTML ในโปรแกรมที่ถนัดโฆษณา
- เปิด Notepad หรือ text editor/code editor ที่ถนัด
- คลิกเมนู File
- คลิก Open
- เลือกไฟล์ HTML
- คลิก Open
- พิมพ์ <hr size="#"> เพื่อกำหนดความหนาของเส้น โดยเปลี่ยน # เป็นค่าความหนา (เช่น size="10")
- พิมพ์ <hr width="#"> เพื่อกำหนดความกว้างของเส้น โดยเปลี่ยน # เป็นค่าความกว้างแบบพิกเซล หรือเปอร์เซ็นต์ความกว้างของหน้า (เช่น width="200" หรือ width="75%")
- พิมพ์ <hr color="#"> เพื่อกำหนดสีของเส้น โดยเปลี่ยน # เป็นชื่อสีหรือโค้ด hexadecimal (เช่น color="red" หรือ color="#FF0000")
- พิมพ์ <hr align="#"> เพื่อ align หรือปรับแนวเส้น โดยเปลี่ยน # เป็น "right" (ขวา), "left" (ซ้าย) หรือ "center" (ตรงกลาง) (เช่น <hr width="50%" align="center"> )
- คลิกเมนู File
- คลิก Save As
- พิมพ์ชื่อไฟล์ข้าง "File name"
- พิมพ์ .html ท้ายชื่อไฟล์
- คลิก Save
<!DOCTYPE html>
<
html
>
<
body
>
<
h1
>
นี่คือ Heading </
h1
>
<
hr
size
=
"6"
width
=
"50%"
align
=
"left"
color
=
"green"
>
<
p1
>
นี่คือย่อหน้าข้อความที่แยกจาก heading ชัดเจน โดยคั่นด้วยเส้นนอน </
p1
>
</
body
>
</
html
>
-
1เปิดหรือสร้างเอกสาร HTML ใหม่. คุณแก้ไขเอกสาร HTML ได้ด้วย text editor อย่าง Notepad หรือใช้ code editor อย่าง Adobe Dreamweaver ก็ได้ ให้ทำตามขั้นตอนต่อไปนี้ เพื่อเปิดเอกสาร HTML ในโปรแกรมที่ถนัด
- เปิด Notepad หรือ text editor/code editor ที่ถนัด
- คลิกเมนู File
- คลิก Open
- เลือกไฟล์ HTML
- คลิก Open
- พิมพ์ <head> ทางด้านบนของเอกสาร
- กด ↵ Enter 2 ครั้งเพื่อเพิ่มบรรทัดใหม่ 2 บรรทัด
- พิมพ์ </head> เพื่อปิด head
- หรือใช้ style sheet จากแหล่งอื่นก็ได้ ลองอ่าน " How to Add a CSS File to HTML " ดู ว่าจะลิงค์ไฟล์ CSS จากแหล่งอื่น กับไฟล์ HTML ของตัวเองยังไง
- พิมพ์ width: ##px; เพื่อกำหนดความกว้างของเส้น โดยเปลี่ยน ## เป็นเลขพิกเซลกำหนดความกว้างของเส้น หรือใช้เลขเปอร์เซ็นต์ (%) แทนพิกเซล (px) ก็ได้
- พิมพ์ height: ##px; เพื่อกำหนดความหนาของเส้น โดยเปลี่ยน ## เป็นเลขพิกเซลกำหนดความหนาของเส้น
- พิมพ์ background-color: ##; เพื่อกำหนดสีของเส้น โดยเปลี่ยน ## เป็นชื่อสีหรือเครื่องหมายสี่เหลี่ยม (#) ตามด้วยโค้ดสีแบบ hexadecimal
- พิมพ์ margin-right: ##px; เพื่อกำหนดเลขพิกเซลจากขอบขวา โดยเปลี่ยน ## เป็นเลข หรือพิกเซล หรือ "auto" ให้พิมพ์ "auto" เพื่อ align ปรับแนวเส้นชิดซ้ายหรือตรงกลาง
- พิมพ์ margin-left: ##px; เพื่อกำหนดเลขพิกเซลจากขอบซ้าย โดยเปลี่ยน ## เป็นเลข หรือพิกเซล หรือ "auto" ให้พิมพ์ "auto" เพื่อ align ปรับแนวเส้นชิดขวาหรือตรงกลาง
- พิมพ์ margin-top: ##px; เพื่อกำหนด margin ด้านบนของเส้น โดยเปลี่ยน ## เป็นเลข หรือพิกเซลกำหนดความหนาของ margin
- พิมพ์ margin-bottom: ##px; เพื่อกำหนด margin ด้านล่างของเส้น โดยเปลี่ยน ## เป็นเลขพิกเซลกำหนดความหนาของ margin
- พิมพ์ border-width: ##px; เพื่อกำหนดเส้นกรอบรอบเส้น (ไม่จำเป็น) โดยเปลี่ยน ## เป็นเลขพิกเซลกำหนดความหนาของกรอบ
- พิมพ์ border-color: ##; เพื่อกำหนดสีกรอบ (ไม่จำเป็น) โดยเปลี่ยน ## เป็นชื่อสี หรือเครื่องหมายสี่เหลี่ยม (#) ตามด้วยโค้ดสีแบบ hexadecimal
<!DOCTYPE html>
<
html
>
<
head
>
<
style
type
=
"text/css"
>
hr
{
width
:
50
%
;
height
:
20
px
;
background-color
:
red
;
margin-right
:
auto
;
margin-left
:
auto
;
margin-top
:
5
px
;
margin-bottom
:
5
px
;
border-width
:
2
px
;
border-color
:
green
;
}
</
style
>
</
head
>
<
body
>
<
h1
>
นี่คือ heading </
h1
>
<
hr
>
<
p1
>
นี่คือย่อหน้าข้อความที่แยกจาก heading ชัดเจน โดยคั่นด้วยเส้นนอน </
p1
>
</
body
>
</
html
>
บทความวิกิฮาวอื่น ๆ ที่่เกี่ยวข้อง
วิธีการ
ดาวน์โหลดวิดีโอจากทุกเว็บไซต์ได้แบบฟรีๆ
วิธีการ
หาละติจูดกับลองจิจูดใน Google Maps
วิธีการ
แก้ปัญหาเข้าบางเว็บไม่ได้
อิโมจิซ่อนความสยิวที่คนใช้แชตกันมากที่สุด
วิธีการ
หาวันที่เผยแพร่ข้อมูลของเว็บไซต์
วิธีการ
บล็อกการเปลี่ยนเส้นทางไปยังหน้าเว็บที่ไม่ต้องการ (Redirect)
วิธีการ
สมัคร Hotmail
วิธีการ
หา IP Address ของเว็บไซต์
วิธีการ
แก้ปัญหาเซิร์ฟเวอร์ DNS ไม่ตอบสนอง
วิธีการ
ดาวน์โหลดคลิป Youtube
วิธีการ
เปลี่ยนประเทศใน YouTube
วิธีการ
สมัครใช้งาน Yahoo! Mail
โฆษณา
ข้อมูลอ้างอิง
เกี่ยวกับวิกิฮาวนี้
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 4,463 ครั้ง
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 4,463 ครั้ง
หมวดหมู่: อินเทอร์เน็ต
มีการเข้าถึงหน้านี้ 4,463 ครั้ง
บทความนี้เป็นประโยชน์กับคุณไหม
โฆษณา
คุกกี้ทำให้วิกิฮาวมีคุณภาพยิ่งขึ้น โดยการใช้เว็บไซต์ของเราต่อ คุณได้ตอบตกลงเห็นด้วยกับ นโยบายคุกกี้
ของเรา
บทความที่เกี่ยวข้อง
วิธีการ
ดาวน์โหลดวิดีโอจากทุกเว็บไซต์ได้แบบฟรีๆ
วิธีการ
หาละติจูดกับลองจิจูดใน Google Maps
วิธีการ
แก้ปัญหาเข้าบางเว็บไม่ได้
อิโมจิซ่อนความสยิวที่คนใช้แชตกันมากที่สุด
บทความฮาว-ทูที่โดดเด่น
อิโมจิซ่อนความสยิวที่คนใช้แชตกันมากที่สุด
จะใช้โปรแกรมดูโปรไฟล์ IG ส่วนตัวโดยไม่ต้องติดตามได้ไหม
ล็อค Facebook บน iPhone, Android หรือคอมพิวเตอร์
กู้คืนบัญชี Instagram เวลาลืมรหัสผ่านแบบง่ายๆ
บทความฮาวทูที่ติดเทรนด์
วิธีการ
เชื่อมต่อ Sheet ต่างๆ ใน Excel เข้าด้วยกัน
วิธีการ
ยกเลิก (unsend) DM ที่ส่งไปใน Twitter
วิธีการ
ค้นหาหมู่บ้านใน Minecraft
วิธีการ
เล่นพูล
วิธีการ
ดูว่าเพื่อนอิจฉาคุณหรือไม่
วิธีการ
บันทึกเอกสารให้อยู่ในรูปแบบไฟล์ข้อความหรือไฟล์.txt
บทความฮาว-ทูที่โดดเด่น
เปิดหน้าต่างที่ซ่อนไว้กลับมาในหน้าจอ Windows
สัญญาณที่บอกว่าถูกบล็อกใน WhatsApp และ 4 วิธีเช็กแบบง่ายๆ
หาที่แฮงเอาต์กับเพื่อนๆ
หาคนใน Tinder
บทความฮาว-ทูที่โดดเด่น
เช็คว่าคนอื่นมี Instagram หลายบัญชีหรือไม่
แต่งตัวมัดใจสามีเวลาอยู่บนเตียง
ดูว่าผู้ชายแอบชอบเราหรือไม่
ถอดรหัสความหมายของอิโมติคอนรูปหัวใจในโซเชียลมีเดีย
บทความฮาว-ทูที่โดดเด่น
ซ่อนว่าเราติดตามใครบน Instagram
ส่งข้อความหยอดให้แฟนหนุ่มเขินหน้าแดง: 30 วิธีเพื่อทำให้แฟนหนุ่มหวั่นไหวผ่านข้อความ
ตอบกลับเวลามีคนทักว่า "เป็นไงบ้าง"
แชทอย่างไรให้ผู้ชายหลง: เทคนิคการส่งข้อความเพื่อดึงดูดให้ผู้ชายเป็นฝ่ายไล่ตามคุณ
บทความฮาว-ทูที่โดดเด่น
ชมเชยงานศิลปะของใครบางคน
ส่งข้อความเพื่อทำให้เขาคิดถึงคุณแทบบ้าคลั่ง: แชทอย่างไรให้เขาหยุดคิดถึงคุณไม่ได้
จะส่งข้อความอะไรถึงแฟนสาวหลังจากทะเลาะกัน
สัญญาณที่บ่งบอกว่าแฟนเก่าอยากกลับมาหาคุณ