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

Đồng tác giả: Nhân viên của wikiHow

wikiHow hôm nay sẽ hướng dẫn bạn cách chèn đường ngang trong HTML. Đường ngang có thể được sử dụng để phân cách nội dung trên website. Mã để tạo đường thẳng tương đối đơn giản. Tuy nhiên, bạn có thể thêm mã nội tuyến để xác định kiểu cho dòng trên HTML 4.01. Trên HTML5, bạn cần sử dụng CSS nhằm định kiểu cho dòng.[1]

Phương pháp 1 trong 2:
Bằng HTML 4.01

  1. 1
    Mở hoặc tạo tài liệu HTML mới. Tài liệu HTML có thể được chỉnh sửa bằng trình soạn thảo văn bản, chẳng hạn như Notepad. Bạn cũng có thể sử dụng trình soạn mã, ví dụ như Adobe Dreamweaver. Tiến hành những bước sau để mở tài liệu HTML bằng chương trình hoặc lựa chọn của bạn:
    • Mở Notepad hoặc trình soạn thảo văn bản/mã mà bạn chọn.
    • Nhấp vào trình đơn File (Tập tin).
    • 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 dòng. Cuộn xuống cho đến dòng phía trên vị trí mà bạn muốn chèn dòng, sau đó nhấp vào bên trái dòng để đặt con trỏ chuột ngay phía trước nơi bắt đầu dòng.
  3. 3
    Tạo khoảng trống. Nhấn Enter hai lần để dời văn bản sẽ nằm bên dưới dòng mà bạn định chèn xuống dưới, sau đó đưa con trỏ chuột lên khoảng trống.
  4. 4
    Thêm thẻ "<hr>". Nhập <hr> vào khoảng trống trước vị trí bắt đầu dòng. Thẻ <hr> dùng để tạo đường cắt ngang toàn bộ trang.
  5. 5
    Chuyển dòng phía trước thẻ "hr" sang dòng mới bằng cách nhấn Enter. Lúc này, thẻ <hr> sẽ nằm trên dòng của chính nó.
  6. 6
    Thêm thuộc tính cho đường ngang (tùy chọn). Bạn có thể thêm thuộc tính cho dòng ngang, chẳng hạn như chiều dài, rộng, màu sắc và căn chỉnh. Hãy sử dụng những mã dưới đây theo sau thẻ "hr" trong dấu ngoặc mã. Bạn có thể thêm nhiều thuộc tính trong một dấu ngoặc bằng cách phân định bằng khoảng cách.[2]
    • Nhập <hr size="#"> để thay đổi độ dày của dòng. Thay dấu # bằng thông số độ dày (ví dụ: size="10").
    • Nhập <hr width="#"> để thay đổi độ rộng của dòng. Thay dấu # bằng số pixel hoặc phần trăm của độ rộng trang (ví dụ: width="200" hoặc width="75%").
    • Nhập <hr color="#"> để thay đổi màu sắc của dòng. Thay dấu # bằng tên hoặc mã thập lục phân của màu (ví dụ: color="red" hoặc color="#FF0000")
    • Nhập <hr align="#"> để căn chỉnh dòng. Thay dấu # bằng "right" (sang phải), "left" (sang trái) hoặc "center" (giữa). Ví dụ: <hr width="50%" align="center">).
  7. 7
    Lưu tập tin HTML. Để lưu tập tin văn bản thành tài liệu HTML, bạn cần thay phần mở rộng tập tin (.txt, .docx) bằng ".html". Tiến hành theo những bước sau để lưu tài liệu HTML:
    • Nhấp vào trình đơn File.
    • Nhấp vào Save As (Lưu thành).
    • Nhập tên cho tập tin vào cạnh tiêu đề "File name".
    • Nhập .html vào cuối tên tập tin.
    • Nhấp vào Save.
  8. 8
    Kiểm tra thử tập tin HTML. Để kiểm tra tập tin HTML, hãy nhấp phải vào tập tin và chọn Open with (Mở với), sau đó chọn trình duyệt web. Một đường liền nét sẽ hiện ra tại nơi mà bạn đặt thẻ "hr". Mã HTML sẽ tương tự như sau:[3]
      <!DOCTYPE html>
      <html>
      <body>
      
      <h1>Đây là tiêu đề</h1>
      
      <hr size="6" width="50%" align="left" color="green">
      
      <p1>Đây là đoạn văn bản đã được phân cách với tiêu đề bằng đường ngang.</p1>
      
      </body>
      </html>
      
    Advertisement

Phương pháp 2 trong 2:
Bằng CSS/HTML5

  1. 1
    Mở hoặc tạo tài liệu HTML mới. Tài liệu HTML có thể được chỉnh sửa bằng trình soạn thảo văn bản, chẳng hạn như Notepad. Bạn cũng có thể sử dụng trình soạn mã, ví dụ như Adobe Dreamweaver. Tiến hành những bước sau để mở tài liệu HTML bằng chương trình hoặc lựa chọn của bạn:
    • Mở Notepad hoặc trình soạn thảo văn bản/mã mà bạn chọn.
    • Nhấp vào trình đơn File.
    • Nhấp vào Open.
    • Chọn tập tin HTML.
    • Nhấp Open
  2. 2
    Thêm phần đầu cho tài liệu HTML. Nếu tài liệu HTML chưa có phần đầu, hãy tiến hành những bước sau để thêm. Phần đầu sẽ theo sau thẻ "<html>" và nằm trước thẻ "<body>" tag.
    • Nhập <head> vào đầu tài liệu.
    • Nhấn Enter hai lần để thêm hai dòng mới.
    • Nhập </head> để đóng phần đầu.
  3. 3
    Nhập <style type="text/css"> vào phần đầu. Thẻ kiểu nằm giữa hai thẻ xác định phần đầu. Như vậy bạn sẽ có chỗ chèn mã CSS nhằm xác định kiểu cho tài liệu HTML.
    • Hoặc bạn có thể sử dụng CSS ngoại tuyến. Xem thêm trên mạng để biết cách liên kết tập tin CSS ngoại tuyến vào tập tin HTML.
  4. 4
    Nhập hr {. Đây là thẻ CSS dùng để xác định kiểu cho đường ngang. Hãy thêm thẻ này sau thẻ định kiểu trong phần đầu, hoặc vào tập tin CSS ngoại tuyến.
  5. 5
    Thêm kiểu CSS cho thẻ "<hr>". Những kiểu này theo sau thẻ "hr {". Có nhiều cách để bạn định kiểu cho đường ngang. Sau đây là một số ví dụ:
    • Nhập width: ##px; để xác định độ rộng dòng. Thay ## bằng số pixel chiều rộng của đường thẳng. Bạn cũng có thể sử dụng 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 dòng.
    • Nhập background-color: ##; để xác định màu cho đường ngang. Thay ## bằng tên màu hoặc dấu thăng (#) và theo sau là mã màu thập lục phân.
    • Nhập margin-right: ##px;để thiết lập số pixel tính từ cạnh phải. Thay ## bằng số, pixel hoặc "auto". Nhập "auto" để căn chỉnh dòng về bên trái hoặc chính giữa.
    • Nhập margin-left: ##px; để thiết lập số pixel tính từ cạnh trái. Thay ## bằng số, pixel hoặc "auto". Nhập "auto" để căn chỉnh dòng về bên phải hoặc giữa.
    • Nhập margin-top: ##px; để đặt lề trên cho dòng. Thay ## bằng số hoặc pixel độ dày của lề trên.
    • Nhập margin-bottom: ##px; để đặt lề trên cho dòng. Thay ## bằng số hoặc pixel độ dày của lề dưới.
    • Nhập border-width: ##px; để tạo đường viền quanh dòng (tùy chọn). Thay ## bằng số hoặc pixel độ dày của đường viền.
    • Nhập border-color: ##; để thiết lập màu cho đường viền (tùy chọn). Thay ## bằng tên màu, hoặc dấu thăng (#) và theo sau là mã màu thập lục phân.
  6. 6
    Nhập } vào sau thiết lập kiểu nhằm đóng thiết lập kiểu cho thẻ <hr>.
  7. 7
    Nhập <hr> vào bất cứ đâu trong phần thân của tài liệu HTML. Mã này sẽ thêm đường ngang vào tài liệu HTML. Thiết lập kiểu CSS sẽ áp dụng bất kỳ lúc nào khi bạn sử dụng thẻ <hr> trong tài liệu HTML. [4] Bây giờ mã của bạn sẽ tương tự 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à tiêu đề</h1>
      
      <hr>
      
      <p1>Đây là đoạn văn bản đã được phân cách với tiêu đề bằng đường ngang</p1>
      
      </body>
      </html>
      
    Advertisement

Về bài wikiHow này

Đồng tác giả:
Biên tập viên 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.

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

Không
Advertisement