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

  1. 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. 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. 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. 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. 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. 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. 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

  1. 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. 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. 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. 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. 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. 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. 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. 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 wikiHow có liên quan

Căn giữa văn bản trên HTMLCăn giữa văn bản trên HTML
Tắt McAfeeTắt McAfee
Khởi chạy tập tin Python bằng Windows Command PromptKhởi chạy tập tin Python bằng Windows Command Prompt
Chèn chữ trong Adobe Premiere
Chỉnh kích thước artboard trong Adobe IllustratorChỉnh kích thước artboard trong Adobe Illustrator
Chèn ảnh vào Excel sao cho tự động vừa với các ôChèn ảnh vào Excel sao cho tự động vừa với các ô
Tạo ra áo trong RobloxTạo ra áo trong Roblox
Hàm clrscr() là gì trong ngôn ngữ lập trình C?Hàm clrscr() là gì trong ngôn ngữ lập trình C và cách xóa bảng điều khiển và màn hình trong C
Viết mã giảViết mã giả
Lồng một ảnh vào trong ảnh khác trên PhotoshopLồng một ảnh vào trong ảnh khác trên Photoshop
In nhiều trang một mặt trong Adobe ReaderIn nhiều trang một mặt trong Adobe Reader
Thêm hiệu ứng trong suốt trong PhotoshopThêm hiệu ứng trong suốt trong Photoshop
Quảng cáo

Về bài wikiHow này

Nhân viên của wikiHow
Cùng viết bởi:
Người viết bài của wikiHow
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 wikiHow 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 20.934 lần.
Chuyên mục: Phần mềm
Trang này đã được đọc 20.934 lần.

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

Quảng cáo