Create a horizontal line in HTML (with images)

Table of contents:

Create a horizontal line in HTML (with images)
Create a horizontal line in HTML (with images)
Anonim

This wikiHow teaches you how to create a horizontal line in HTML. A horizontal line can be used to separate content on your website. The code for creating a rule is quite simple. You can add in-line code in HTML 4.01 to shape your line. In HTML5 you use CSS to shape your line.

Steps

Method 1 of 2: HTML 4.01

658928 1 1

Step 1. Open or create a new HTML document

HTML documents can be edited with a text editor such as Notepad. You can also use a code editor, such as Adobe Dreamweaver. Use the following steps to open an HTML document in the program of your choice:

  • Open Notepad or a text editor/code editor of your choice.
  • Click on the menu File.
  • click on To open.
  • Choose an HTML file.
  • click on To open.
658928 2 1

Step 2. Select the point where you want to insert the line

Scroll down to the line above which you want to insert the line, then click the far left side of the line to place the cursor directly in front of the start of the line.

658928 3 1

Step 3. Create an empty space

Press ↵ Enter twice to move down the text above which you want to enter the line, and move the cursor to the empty space.

658928 4 1

Step 4. Add the "" tag

Type in the space before the beginning of the line. The tag makes a horizontal line across the entire page.

658928 5 1

Step 5. Move the line for the 'hr' tag to a new line

Press ↵ Enter to do this. At this point, the tag should be on its own line.

658928 6 1

Step 6. Add attributes to the horizontal line (optional)

You can add attributes to a horizontal line, such as length, width, color, and alignment. Use the following codes after 'hr' in the code brackets. You can add more than one attribute by separating them with a space.

  • Type to change the thickness of the line. Replace # with the thickness (eg size="10").
  • Type to change the width of the line. Replace # with the width in pixels, or the percentage of the page width (eg, or).
  • Type to change the color of the line. Replace # with the name of the color or a hexadecimal code (e.g. color="red" or color="#FF0000")
  • Type to align the line. Replace # with "right", "left" or "center" (eg).
658928 7 1

Step 7. Save your HTML file

If you want to save a text file as an HTML document, you must replace the file extension (.txt or.docx) with '.html'. Follow these steps to save your HTML document:

  • Click on the menu File.
  • click on Save as.
  • Type a name for the file, next to "'File name'".
  • Type.html at the end of the file name.
  • click on Save.
658928 8 1

Step 8. Test your HTML

If you want to test your HTML file, right click on the file and select Open with. Then select a web browser. A solid line should appear where you placed the 'HR' tag. The HTML code looks something like this:

     
    
    
    

    This is a cup

    This is paragraph text separated from the heading by a line.

Method 2 of 2: CSS/HTML5

658928 9 1

Step 1. Open or create a new HTML document

HTML documents can be edited with a text editor such as Notepad. You can also use a code editor, such as Adobe Dreamweaver. Follow these steps to open an HTML document in the program of your choice:

  • Open Notepad, or another text editor/code editor of your choice.
  • Click on the menu File.
  • click on To open.
  • Choose an HTML file.
  • click on To open
658928 10 1

Step 2. Add a heading to your HTML document

If your HTML document doesn't already have a headline, use the following steps to add a headline. The headline comes after the "" tag, and before the "" tag.

  • Type at the top of the document.
  • Press ↵ Enter twice to add two new lines.
  • Type to close the headline.
658928 11 1

Step #3. Type in the header

The formatting tag comes between the two header tags. This will give you a place to enter CSS code to format your HTML.

  • You can also use an external style sheet. Read "How to Add a CSS File to HTML" to learn more about linking an external CSS file to your HTML file.
658928 12 1

Step 4. Type hr {

This is the CSS tag for formatting your horizontal line. Place it after the style tag in the head section, or in your external CSS file.

658928 13 1

Step 5. Add CSS styles to your "" tag

You place this after the tag "hr {". There are many ways to format a horizontal line. Following are a few examples.

  • Type width: ##px; to set the width. Replace ## with the width of the line in number of pixels. You can also specify a percentage (%) instead of pixels (px).
  • Type height: ##px; to indicate the thickness of the line. Replace ## with the number of pixels you want the line to be thick.
  • Type background-color: ##; to indicate the color of the line. Replace ## with the name of the color, or with a hash (#) followed by a hexadecimal color code.
  • Type margin-right: ##px; to indicate the number of pixels from the right. Replace ## with the number of pixels or "auto". Type "auto" to align or center the line to the left.
  • Type margin-left: ##px; to indicate the number of pixels from the left edge. Replace ## with the number of pixels or "auto". Type "auto" to right-align or center the line.
  • Type margin-top: ##px; to specify a top margin for the line. Replace ## with the line thickness in pixels.
  • Margin bottom type: ##px; to specify a bottom margin for the line. Replace ## with the line thickness in pixels.
  • Type border-width: ##px; to create a border around the line (optional). Replace ## with the border's thickness in pixels.
  • Type border-color: ##; to specify the color of the border around the line (optional). Replace ## with the name of the color, or a hash (#) followed by a hexadecimal color code.
658928 14 1

Step 6. Type } after the style settings

This will close the style settings for the tag.

658928 15 1

Step 7. Type anywhere in the body of your HTML document

This will add a horizontal line to your HTML document. Your CSS style settings apply when you use the tag in your HTML. Your code should now look something like this:

        
    
    
    

    This is a cup

    This is paragraph text separated by a horizontal line

Popular by topic