Cách để Chèn đường thẳng trong HTML

Tải về bản PDF
Tải về bản PDF

Bài viết này hướng dẫn bạn cách tạo đường kẻ ngang trong HTML và CSS. Bạn có thể dùng đường kẻ ngang để ngăn cách các đoạn văn bản hoặc nội dung khác trên website. Cách thêm đường kẻ ngang mới nhất là sử dụng CSS và HTML5, nhưng hiện tại bạn vẫn có thể dùng thẻ HTML được gọi là "HR".[1]

Phương pháp 1
Phương pháp 1 của 2:

Sử dụng CSS/HTML5

Tải về bản PDF
  1. How.com.vn Tiếng Việt: Step 1 Mở hoặc tạo văn bản HTML mới.
    Bạn có thể chỉnh sửa văn bản HTML bằng chương trình soạn thảo văn bản như Notepad hoặc chương trình lập trình như Adobe Dreamweaver. Hãy thực hiện các bước sau để mở văn bản HTML trong chương trình mà bạn thích:
    • Mở Notepad hoặc chương trình soạn thảo văn bản/lập trình mà bạn thích.
    • Nhấp vào trình đơn File (Tệp).
    • Nhấp vào Open (Mở).
    • Chọn tập tin HTML.
    • Nhấp vào Open.
  2. 2
    Thêm đề mục vào văn bản HTML. Nếu văn bản HTML chưa có đề mục, bạn cần thực hiện các bước sau để thêm đề mục. Đề mục được nhập giữa thẻ "<html>" và "<body>".
    • Nhập <head> ở phía trên văn bản.
    • Ấn Enter hai lần để thêm hai dòng mới.
    • Nhập </head> để đóng đề mục.
  3. Step 3 Nhập <style type="text/css"> trong đề mục.
    Thẻ tạo kiểu cần được đặt giữa hai thẻ đề mục. Đây là thao tác cho phép bạn nhập mã CSS để tạo kiểu cho HTML.
    • Hoặc, bạn có thể sử dụng trang tạo kiểu bên ngoài cho HTML.
  4. How.com.vn Tiếng Việt: Step 4 Nhập hr {.
    Đây là thẻ CSS được dùng để tạo kiểu cho đường kẻ ngang. Hãy thêm thẻ này sau thẻ tạo kiểu trong đề mục, hoặc trong tập tin CSS ngoài.
  5. Step 5 Thêm kiểu CSS cho thẻ "<hr>".
    Phần tạo kiểu cần được nhập sau thẻ "hr {". Bạn có thể tạo kiểu cho đường thẳng theo nhiều cách. Hãy tham khảo các ví dụ sau đây.
    • Nhập width: ##px; để thiết lập độ dài của đường thẳng. Thay ## bằng số pixel độ dài của đường thẳng. Bạn cũng có thể dùng tỉ lệ phần trăm (%) thay cho pixel (px).
    • Nhập height: ##px; để thiết lập độ dày của đường thẳng. Thay ## bằng số pixel độ dày của đường thẳng.
    • Nhập background-color: ##; để tạo màu sắc cho đường thẳng. Thay ## bằng tên của màu, hoặc một dấu thăng (#) theo sau đó là mã màu thập lục phân.
    • Nhập margin-right: ##px; để thiết lập số pixel từ mép phải. Thay ## bằng số pixel hoặc "auto" (tự động). Việc sử dụng "auto" căn giữa cho đường thẳng trong độ rộng đã thiết lập. Khoảng trống còn lại được chia đều giữa lề trái và lề phải.
    • Nhập margin-left: ##px; để thiết lập số pixel từ mép trái. Thay ## bằng số pixel hoặc "auto". Việc sử dụng "auto" căn giữa cho đường thẳng trong độ rộng đã thiết lập. Khoảng trống còn lại được chia đều giữa lề trái và lề phải.[2]
    • Nhập margin-top: ##px; để thiết lập lề trên cho đường thẳng. Thay ## bằng số pixel độ dày của lề.
    • Nhập margin-bottom: ##px; để thiết lập lề dưới của cho đường thẳng. Thay ## bằng số pixel độ dày của lề.
    • Nhập border-width: ##px; để tạo đường viền quanh đường thẳng (tùy chọn). Thay ## bằng số pixel đồ dày của đường viền.
    • Nhập border-color: ##; để tạo màu đường viền (tùy chọn). Thay ## bằng tên của màu, hoặc dấu thăng (#) theo sau đó là mã màu thập lục phân.
  6. How.com.vn Tiếng Việt: Step 6 Nhập } sau thiết lập kiểu.
    Thao tác này đóng thiết lập kiểu cho thẻ <hr>.
  7. 7
    Ấn ↵ Enter và nhập </style>. Đây là thao tác tạo dòng mới và thêm thẻ đóng phần tạo kiểu của HTML. Thẻ "</style>" được nhập sau khi bạn đã thêm các yếu tố HTML cần được tạo kiểu với CSS.
  8. 8
    Nhập <hr> vào bất kỳ đâu trong phần thân của văn bản HTML. Phần thân của thẻ HTML là khu vực ở giữa thẻ "<body>" và "</body>". Đây là thao tác thêm đường kẻ ngang vào văn bản HTML. Thiết lập kiểu CSS sẽ được áp dụng bất kỳ khi nào bạn sử dụng thẻ <hr> trong HTML.
  9. How.com.vn Tiếng Việt: Step 9 Lưu tập tin HTML.
    Để lưu tập tin văn bản thành định dạng HTML, bạn cần thay phần mở rộng của tập tin (.txt, .docx) thành ".html". Hãy thực hiện các bước sau để lưu tập tin văn bản HTML:
    • Nhấp vào trình đơn File.
    • Nhấp vào Save As (Lưu dưới dạng) nếu bạn tạo tập tin HTML mới. Nhấp vào Save (Lưu) để lưu tập tin HTML có sẵn.
    • Nhập tên tập tin vào trường "File name" (Tên tập tin).
    • Nhập ".html" ngay sau tên tập tin.
    • Nhấp vào Save.
  10. How.com.vn Tiếng Việt: Step 10 Kiểm tra tập tin HTML.
    Để thực hiện việc này, bạn cần nhấp phải vào tập tin và chọn Open with (Mở bằng), rồi chọn trình duyệt web. Bạn sẽ thấy một đường thẳng hiển thị tại nơi bạn đặt thẻ "hr". Mã lệnh HTML của bạn trông giống như sau:
      <!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>Đây là đề mục</h1><hr><p1>Đây là đoạn văn bản được chia cách bởi đường thẳng</p1></body></html>
    Quảng cáo
Phương pháp 2
Phương pháp 2 của 2:

Sử dụng HTML 4.01

Tải về bản PDF
  1. How.com.vn Tiếng Việt: Step 1 Mở hoặc tạo văn bản HTML mới.
    Bạn có thể chỉnh sửa văn bản HTML bằng chương trình soạn thảo văn bản như Notepad hoặc chương trình lập trình như Adobe Dreamweaver. Hãy thực hiện các bước sau để mở văn bản HTML trong chương trình mà bạn thích:
    • Mở Notepad, hoặc chương trình soạn thảo văn bản/lập trình yêu thích của bạn.
    • Nhấp vào trình đơn File (Tệp).
    • Nhấp vào Open (Mở).
    • Chọn tập tin HTML.
    • Nhấp vào Open.
  2. How.com.vn Tiếng Việt: Step 2 Chọn vị trí mà bạn muốn chèn đường thẳng.
    Kéo thanh cuộn xuống đến khi bạn tìm thấy khoảng trống phía trên phần cần chèn đường thẳng, rồi nhấp vào phần ngoài cùng bên trái của dòng để đặt con trỏ ngay phía trước điểm bắt đầu dòng.
  3. How.com.vn Tiếng Việt: Step 3 Ấn ↵ Enter hai lần để tạo một dòng trống.
    Thao tác này làm đoạn văn bản di chuyển xuống dưới.
  4. 4
    Di chuyển con trỏ trở về vị trí mà bạn muốn chèn đường thẳng. Chỉ cần nhấp, hoặc sử dụng các phím mũi tên trên bàn phím để di chuyển con trỏ về vị trí mà bạn muốn đặt đường thẳng.
  5. How.com.vn Tiếng Việt: Step 5 Nhập <hr> vào khoảng trống phía trước nơi bắt đầu dòng.
    Thẻ "<hr>" có chức năng tạo đường kẻ ngang trên trang.
  6. Step 6 Ấn ↵ Enter để đặt "<hr>" trên dòng riêng.
    Lúc này, thẻ <hr> cần được đặt trên dòng riêng và không có mã lệnh khác ở bên trái hoặc bên phải.
  7. How.com.vn Tiếng Việt: Step 7 Thêm thuộc tính cho đường kẻ ngang (tùy chọn).
    Bạn có thể thêm thuộc tính cho đường kẻ ngang, chẳng hạn như độ dài, độ rộng, màu sắc và căn lề. Hãy thêm các mã sau đây ngay sau "hr" trong ngoặc mã. Bạn có thể thêm nhiều thuộc tính vào ngoặc bằng cách dùng khoảng trắng để phân cách chúng.[3]
    • Nhập <hr size="#"> để thay đổi độ dày của đường thẳng. Thay # bằng số độ dày (chẳng hạn như size="10").
    • Nhập <hr width="#"> để thay đổi độ dài của đường thẳng. Thay # bằng số pixel hoặc tỉ lệ phần trăm của độ rộng trang (chẳng hạn như width="200" hoặc width="75%").
    • Nhập <hr color="#"> để thay đổi màu sắc của đường thẳng. Thay # bằng tên màu sắc hoặc mã thập lục phân (chẳng hạn như color="red" hoặc color="#FF0000").
    • Nhập <hr align="#"> để căn lề cho đường thẳng. Thay # bằng "right" (phải), "left" (trái), hoặc "center" (giữa) (chẳng hạn như align="center">)
  8. How.com.vn Tiếng Việt: Step 8 Lưu tập tin HTML.
    Để lưu tập tin văn bản thành định dạng HTML, bạn cần thay phần mở rộng của tập tin (.txt, .docx) thành ".html". Hãy thực hiện các bước sau để lưu tập tin văn bản HTML:
    • Nhấp vào trình đơn File.
    • Nhấp vào Save As (Lưu dưới dạng) nếu bạn tạo tập tin HTML mới. Nhấp vào Save (Lưu) để lưu tập tin HTML có sẵn.
    • Nhập tên tập tin vào trường "File name" (Tên tập tin).
    • Nhập ".html" ngay sau tên tập tin.
    • Nhấp vào Save.
  9. How.com.vn Tiếng Việt: Step 9 Kiểm tra tập tin HTML.
    Để thực hiện việc này, bạn cần nhấp phải vào tập tin và chọn Open with (Mở bằng), rồi chọn trình duyệt web. Bạn sẽ thấy một đường thẳng hiển thị tại nơi bạn đặt thẻ "hr". Mã lệnh HTML của bạn trông giống như sau:[4]
      <!DOCTYPE html><html><body><h1>Đây là đề mục</h1><hr size="6" width="50%" align="left" color="green"><p1>Đây là đoạn văn bản được ngăn cách với đề mục bằng một đường thẳng.</p1></body></html>
    Quảng cáo

Bài viết How.com.vn có liên quan

How.com.vn Tiếng Việt: Chèn ảnh vào Excel sao cho tự động vừa với các ô
Cách để
Chèn ảnh vào Excel sao cho tự động vừa với các ô
How.com.vn Tiếng Việt: Căn giữa văn bản trên HTML
Cách để
Căn giữa văn bản trên HTML
How.com.vn Tiếng Việt: Tắt McAfee
Cách để
Tắt McAfee
How.com.vn Tiếng Việt: Khởi chạy tập tin Python bằng Windows Command Prompt
Cách để
Khởi chạy tập tin Python bằng Windows Command Prompt
How.com.vn Tiếng Việt: Viết mã giả
Cách để
Viết mã giả
How.com.vn Tiếng Việt: Trải nghiệm Bumble Premium miễn phí
Cách để
Trải nghiệm Bumble Premium miễn phí
How.com.vn Tiếng Việt: Chỉnh kích thước artboard trong Adobe Illustrator
Cách để
Chỉnh kích thước artboard trong Adobe Illustrator
How.com.vn Tiếng Việt: Tạo ra áo trong Roblox
Cách để
Tạo ra áo trong Roblox
How.com.vn Tiếng Việt: Chèn ảnh trong InDesign
Cách để
Chèn ảnh trong InDesign
How.com.vn Tiếng Việt: Mở tập tin EXE trên Macbook
Cách để
Mở tập tin EXE trên Macbook
How.com.vn Tiếng Việt: Mở tập tin DLL
Cách để
Mở tập tin DLL
How.com.vn Tiếng Việt: Khởi chạy tập tin EXE bằng Command Prompt
Cách để
Khởi chạy tập tin EXE bằng Command Prompt
Quảng cáo

Tham khảo

  1. ↑ https://www.w3schools.com/tags/tag_hr.asp
  2. ↑ https://www.w3schools.com/css/css_margin.asp#:~:targetText=The%20auto%20Value,the%20left%20and%20right%20margins.
  3. ↑ http://www.myhtmltutorials.com/line.html
  4. ↑ https://www.w3schools.com/TAGS/tag_hr.asp

Về bài How.com.vn này

How.com.vn Tiếng Việt: Nhân viên của How.com.vn
Cùng viết bởi:
Nhân viên của How.com.vn
Người viết bài của How.com.vn
Bài viết này có đồng tác giả là đội ngũ biên tập viên và các nhà nghiên cứu đã qua đào tạo, những người xác nhận tính chính xác và toàn diện của bài viết.

Nhóm Quản lý Nội dung của How.com.vn luôn cẩn trọng giám sát công việc của các biên tập viên để đảm bảo rằng mọi bài viết đều đạt tiêu chuẩn chất lượng cao. Bài viết này đã được xem 29.333 lần.
Chuyên mục: Phần mềm
Ngôn ngữ khác
Trang này đã được đọc 29.333 lần.

Bài viết này đã giúp ích cho bạn?

⚠️ Disclaimer:

Content from Wiki How Tiếng Việt language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.

Notices:
  • - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
  • - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
  • - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
  • - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.

Quảng cáo