You are viewing the article How to Insert Lines in HTML at Tnhelearning.edu.vn you can quickly access the necessary information in the table of contents of the article below.
This article is co-authored by a team of editors and trained researchers who confirm the accuracy and completeness of the article.
The wikiHow Content Management team carefully monitors the work of editors to ensure that every article is up to a high standard of quality.
This article has been viewed 25,430 times.
This article shows you how to create horizontal lines in HTML and CSS. You can use horizontal lines to separate paragraphs of text or other content on your website. The newest way to add horizontal lines is using CSS and HTML5, but for now you can still use an HTML tag called “HR”. [1] X Research Source
Steps
Using CSS/HTML5
- Open Notepad or your favorite text editor/programming program.
- Click the File menu.
- Click Open .
- Select the HTML file.
- Click Open .
- Type <head> above the text.
- Press Enter twice to add two new lines.
- Type </head> to close the heading.
- Or, you can use an external styling page for the HTML.
- Enter width: ##px; to set the length of the line. Replace ## with the number of pixels the length of the line. You can also use percentage (%) instead of pixels (px).
- Enter height: ##px; to set the thickness of the line. Replace ## with the number of pixels the thickness of the line.
- Enter background-cpor: ##; to color the line. Replace ## with the name of the color, or a pound sign (#) followed by the hexadecimal color code.
- Enter margin-right: ##px; to set the number of pixels from the right edge. Replace ## with the number of pixels or “auto” (automatic). Using “auto” centers the line within the set width. The remaining space is divided equally between the left and right margins.
- Enter margin-left: ##px; to set the number of pixels from the left edge. Replace ## with the number of pixels or “auto”. Using “auto” centers the line within the set width. The remaining space is divided equally between the left and right margins. [2] X Research Source
- Enter margin-top: ##px; to set the top margin for the line. Replace ## with the number of pixels of the margin thickness.
- Enter margin-bottom: ##px; to set the bottom margin of the line. Replace ## with the number of pixels of the margin thickness.
- Enter border-width: ##px; to create a border around the line (optional). Replace ## with the number of pixels of the border thickness.
- Type border-cpor: ##; to make the border color (optional). Replace ## with the name of the color, or the pound sign (#) followed by the hexadecimal color code.
- Click the File menu.
- Click Save As if you created a new HTML file. Click Save to save the existing HTML file.
- Enter a filename in the “File name” field.
- Type “.html” right after the filename.
- Click Save .
<!DOCTYPE html> < html > < head > < style type = "text/css" > hr { width : 50 % ; height : 20 px ; background-cpor : red ; margin-right : auto ; margin-left : auto ; margin-top : 5 px ; margin-bottom : 5 px ; border-width : 2 px ; border-cpor : green ; } </ style > </ head > < body > < h1 > This is the heading </ h1 > < hr > < p1 > This is text separated by a line </ p1 > </ body > </ html >
Using HTML 4.01
- Open Notepad, or your favorite text editor/programmer.
- Click the File menu.
- Click Open .
- Select the HTML file.
- Click Open .
- Type <hr size="#"> to change the thickness of the line. Replace # with the thickness number (such as size=”10″).
- Type <hr width="#"> to change the length of the line. Replace # with the number of pixels or a percentage of the page width (such as width=”200″ or width=”75%”).
- Type <hr cpor="#"> to change the color of the line. Replace # with the color name or hexadecimal code (such as cpor=”red” or cpor=”#FF0000″).
- Type <hr align="#"> to align the line. Replace # with “right” (right), “left” (left), or “center” (center) (such as align="center"> )
- Click the File menu.
- Click Save As if you created a new HTML file. Click Save to save the existing HTML file.
- Enter a filename in the “File name” field.
- Type “.html” right after the filename.
- Click Save .
<!DOCTYPE html> < html > < body > < h1 > This is heading </ h1 > < hr size = "6" width = "50%" align = "left" cpor = "green" > < p1 > Here is a piece of text separated from the heading by a straight line. < / p1 > </body> < / html >
This article is co-authored by a team of editors and trained researchers who confirm the accuracy and completeness of the article.
The wikiHow Content Management team carefully monitors the work of editors to ensure that every article is up to a high standard of quality.
This article has been viewed 25,430 times.
This article shows you how to create horizontal lines in HTML and CSS. You can use horizontal lines to separate paragraphs of text or other content on your website. The newest way to add horizontal lines is using CSS and HTML5, but for now you can still use an HTML tag called “HR”. [1] X Research Source
Thank you for reading this post How to Insert Lines in HTML at Tnhelearning.edu.vn You can comment, see more related articles below and hope to help you with interesting information.
Related Search: