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

Hack GmailHack Gmail
Tắt McAfeeTắt McAfee
Chụp màn hình trên máy tính DellChụp màn hình trên máy tính Dell
Căn giữa văn bản trên HTMLCăn giữa văn bản trên HTML
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
Lật ảnh trên Adobe PhotoshopLật ảnh trên Adobe Photoshop
Khôi phục hình ảnh đã xóaKhôi phục hình ảnh đã xóa
Lưu Tập tinLưu Tập tin
Tạo ra áo trong RobloxTạo ra áo trong Roblox
Thêm hiệu ứng trong suốt trong PhotoshopThêm hiệu ứng trong suốt trong Photoshop
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ỉnh kích thước artboard trong Adobe IllustratorChỉnh kích thước artboard trong Adobe Illustrator
Tạo bảng trong Adobe IllustratorTạo bảng trong Adobe Illustrator
In nhiều trang một mặt trong Adobe ReaderIn nhiều trang một mặt trong Adobe Reader
Quảng cáo

Về bài wikiHow này

Travis Boylls
Cùng viết bởi:
Tác giả & Biên tập viên viết về công nghệ
Bài viết này đã được cùng viết bởi Travis Boylls. Travis Boylls là tác giả và biên tập viên làm việc cho wikiHow. Travis có kinh nghiệm viết các bài liên quan đến công nghệ, cung cấp dịch vụ khách hàng phần mềm và thiết kế đồ họa. Anh có chuyên môn về các hệ điều hành Windows, macOS, Android, iOS và Linux. Anh học thiết kế đồ họa tại Đại học Cộng đồng Pikes Peak. Bài viết này đã được xem 11.605 lần.
Chuyên mục: Phần mềm
Trang này đã được đọc 11.605 lần.

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

Quảng cáo