bài đăng này chỉ 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 những đ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à 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”.
những bước
Phương pháp số 1 dùng CSS/HTML5
1Mở 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 những 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.2Thê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 những 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.3Nhậ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ể dùng trang tạo kiểu bên ngoài cho HTML.4Nhậ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. 5Thê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 những 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 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 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-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.6Nhập } sau thiết lập kiểu. Thao tác này đóng thiết lập kiểu cho thẻ <hr>. 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 những yếu tố HTML cần được tạo kiểu với CSS.8Nhậ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 dùng thẻ <hr> trong HTML.9Lư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 những 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.10Kiể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><styletype=”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>
Phương pháp số 2 dùng HTML 4.01
1Mở 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 những 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.2Chọ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Ấ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. 4Di 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 dùng những 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. 5Nhậ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Ấ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. 7Thê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 những 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.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”>)8Lư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 những 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.9Kiể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><body><h1>Đây là đề mục</h1><hrsize=”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>
