ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
ร่วมเขียน โดย
ทีมงานวิกิฮาว
X
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว
จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้
บทความนี้ถูกเข้าชม 4,293 ครั้ง
บทความวิกิฮาวนี้จะแนะนำวิธีการสร้างเส้นนอนใน 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
วิธีการ
เว้นวรรคห่างๆ ใน HTML
อิโมจิซ่อนความสยิวที่คนใช้แชตกันมากที่สุด
วิธีการ
แก้ปัญหาเข้าบางเว็บไม่ได้
วิธีการ
เขียนเว็บเพจง่ายๆ ด้วย HTML
รู้ความหมายของอีโมจิรูปหัวใจสีดำ
วิธีการ
ดูว่าใครแชร์โพสต์ของคุณบนเฟซบุ๊ก
วิธีการ
เชื่อมต่ออินเทอร์เน็ตในคอมพิวเตอร์ Windows
วิธีการ
เช็คตำแหน่งปัจจุบันใน Google Maps
รู้ความหมายของอีโมจิหน้ากลับหัว
วิธีการ
แก้ปัญหาเซิร์ฟเวอร์ DNS ไม่ตอบสนอง
วิธีการ
หา IP Address ของเว็บไซต์
โฆษณา
ข้อมูลอ้างอิง
เกี่ยวกับวิกิฮาวนี้
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 4,293 ครั้ง
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 4,293 ครั้ง
หมวดหมู่: อินเทอร์เน็ต
มีการเข้าถึงหน้านี้ 4,293 ครั้ง
บทความนี้เป็นประโยชน์กับคุณไหม
โฆษณา
คุกกี้ทำให้วิกิฮาวมีคุณภาพยิ่งขึ้น โดยการใช้เว็บไซต์ของเราต่อ คุณได้ตอบตกลงเห็นด้วยกับ นโยบายคุกกี้
ของเรา
บทความที่เกี่ยวข้อง
วิธีการ
ดาวน์โหลดวิดีโอจากทุกเว็บไซต์ได้แบบฟรีๆ
วิธีการ
หาวันที่เผยแพร่ข้อมูลของเว็บไซต์
วิธีการ
หาละติจูดกับลองจิจูดใน Google Maps
วิธีการ
เว้นวรรคห่างๆ ใน HTML