It would seem, why might four methods be needed? After all, almost every person uses one method to which he is accustomed. For example, I pressed Shift and the dash key several times, and that's how a horizontal line turned out.
But what if this results in a dotted line, but you need a solid one?
- Most likely, the Shift key on the keyboard is faulty. Here are some other ways to help.
Perhaps the most familiar way to make a line in Word is to use a couple of keys on the keyboard.
I Thin, thick, double, dotted line using the keyboard
Below is a drawing of a keyboard with an English layout, but without a Russian layout, but this does not matter, because we are only interested in three keys: Shift, dash and Enter.
Rice. 1. Three keys on the keyboard: Shift, dash and Enter for a continuous horizontal line in Word
With these three keys, you can draw a continuous horizontal line in Word: dashed or solid, thin or thick, long or short.
1) When you press the “-” (dash) key several times in the Word editor, we get a dotted line of any length.
To do thin long line for the entire width of the page:
- We find the “dash” key on the keyboard (to the right of the “zero” key, in the green frame in Fig. 1).
- From a new (!) Line in Word, press this key several times: -
- And then press the "Enter" () key. Several printed dashes will suddenly turn into a continuous horizontal thin line across the entire width of the page.
2) When you press Shift and "-" (dash) at the same time, NOT a dash is printed, but an underscore _________. Thus, you can make a continuous line of arbitrary length anywhere in the document.
Rice. 2. Thin and thick horizontal line in Word
Now we print thick horizontal line across the entire width of the page:
- Again we find the same dash key, as well as the Shift key (left or right, as you like). Press Shift, hold and don't let go.
- And now, from a new (!) line, click on the dash several times (for example, 3-4 times) (while not releasing Shift): ___. Release Shift.
- Now press the Enter key. You will see a thick horizontal solid line.
Horizontal thin, thick, dotted and double line in Word using keyboard
II Line in Word using a table
A horizontal line can be obtained by using a table of one cell (1x1), in which only the top or bottom border is colored (will be visible), and the other three sides of the table have unpainted borders (they will be invisible).
We put the cursor in the place where the line should be. In the top menu of Word, click:
- Insert (1 in Fig. 3),
- Table (2 in Fig. 3),
- One cell (3 in Fig. 3).
Rice. 3. How to insert a 1x1 table in Word (from one cell)
The result is a table of one large cell (1x1):
It remains in the 1x1 table on three sides to remove the borders. For this
- go to the "Home" tab (1 in Fig. 4),
- next next to "Font" we find "Paragraph" and borders (2 in Fig. 4),
- remove all borders by clicking "No border" (3 in Fig. 4),
- select "Upper border" or "Lower border" (4 in Fig. 4).
Rice. 4. How to remove border selection in a Word table (make borders invisible)
I show this clearly in the video (at the end of the article).
By the way, in Fig. 3 shows that there is an easier way. You can put the cursor at the beginning of the line in Word and click "Horizontal Line" (5 in Fig. 4):
III Line in Word by drawing
Insert (1 in Fig. 5) - Shapes (2 in Fig. 5) is another way to get a horizontal line in Word.
To make the line strictly horizontal, hold down the Shift key and draw the line at the same time.
Rice. 5. How to draw a line in Word
IV Line in Word using the on-screen keyboard
For Windows 10, you can also find the on-screen keyboard by typing "on-screen keyboard" into the Search bar.
Rice. 6. On-screen keyboard
We will create a horizontal line in the same way as in the first version with a regular keyboard. On the on-screen keyboard, you need three buttons: dash, Shift and Enter.
1 Dash and Enter
From a new line in Word, click on the dash several times (1 in Fig. 6) and press Enter. You will get a thin horizontal line.
2 Shift, dash and Enter
From a new line in Word, click first Shift (2 in Fig. 6), then Dash (1 in Fig. 6). Get an underline. So repeat 2 more times, and then press Enter. As a result, we will see a thick horizontal line.
When creating an HTML page, styling plays an essential role. Especially when we are talking about various symbols and decorations: these little things help make the “language” of your page more accessible and clear, and also significantly change its perception and appearance in general. One of the most important design elements is the horizontal line, and next we will learn in more detail how to work with it and how to make a horizontal line in html.
What is a horizontal line and why is it needed
The horizontal line in html is a page design element that performs a number of functions:
- decorative. Helps to add attractiveness to the page.
- Dividing. Contributes to the effective separation of information of different meanings.
- Emphasizing or emphasizing. It will draw the attention of page visitors to the necessary and most important information.
It is the horizontal line that is considered the most accessible way to implement a number of functions. It is very simple to create, and outwardly it looks very profitable. By simple changes to the html code, you can control:
- length;
- width;
- color characteristics;
- alignment on one or the other edge.
It is worth noting that the horizontal line refers to block elements. This means that it occupies a new line on the page, and the text following it will go below.
Creating a horizontal line in HTML
You can set a line using a simple tag - hr in triangular brackets. It is short for "Horisontal Rule" and sets the classic external parameters. It differs from many others in that it does not need a closing tag and is able to exist independently. You can change the external characteristics of an element using additional values in the tag:
- Length. If you do not want the length of the line to cover the entire page, then you can set the desired size in pixels or percentages. This is done with the help of an additional word "width" in the tag and a numerical indicator of the length specified after the "=" sign in quotation marks.
It looks like this. For example, if we need a length of 100 pixels, we set the following tag: hr width="100"
- alignment. Alignment is possible on the left or right edges, and also in the center. This property only takes effect if you have already set the width parameter, as a page-wide line cannot be aligned. For alignment, we set an additional attribute in the "align" tag and add a direction to it: center - for the center, left - for the left and right - for the right alignment.
The finished tag in this case will look like this. For example, if we need to set the center alignment for a horizontal line 150 pixels long, then the finished tag will look like this: hr align="center" width="150".
Note that "align", the metric for alignment, is set to 1, even though the attribute is dependent on the width metric.
- Width. Optionally, you can also specify a width, creating a bold or thin underline. This criterion does not depend on anything and can be used as an independent one without specifying the length or alignment. For this, we use the size attribute on the tag and a numeric value equal to the desired width in pixels. The number is specified in quotes after the size attribute and the "=" symbol.
Thus, if we want to create a line with a width of 15 pixels, we need to create the following tag: hr size="15".
- Color. It is also set as an independent indicator. To change it, the color attribute is used in combination with the name of the color in the form of a code or in English. The color is specified in quotation marks after the "=" symbol.
Thus, the tag for the standard white line can be written in two ways: hr color="#FFFFFF" or hr color="white"
Black color can be created using code #000000.
- Put away shadow. If you need an element that does not contain a shadow, then the noshade attribute should be used in the tag. It can be used alone or in combination with other elements. The tag for the standard line using it will look like this: hr noshade
Create a horizontal line with video
And if you want to get information in a more visual format, then refer to the following video, which describes in detail the possibilities of working with a horizontal line.
Having determined the required dimensions of the horizontal line, you can arrange the pages of the site in such a way that the information is structured and visually well-formed. This makes it easier for visitors to perceive the information presented and to distinguish your site from others.
A task
Make a horizontal line on the page.
Solution
Horizontal lines are good for separating one block of text from another. Small text with horizontal lines above and below draws more of the reader's attention than normal text.
With a tag
you can draw a horizontal line, the appearance of which depends on the attributes used, as well as the browser. The tag refers to block elements, so the line always starts on a new line, and after it, all elements are displayed on the next line. With many tag attributes
the line created through this tag is easy to manage. If you also connect the power of styles, then adding a line to a document turns into a simple task.
Default line
displayed in gray and with a volume effect. This type of line does not always fit the site design, so the desire of developers to change the color and other parameters of the line through styles is understandable. However, browsers have ambiguous approaches to this issue, because of which you will have to use several style properties at once. In particular, older versions of Internet Explorer use the color property for line color, while other browsers use background-color . But that's not all, be sure to specify the line thickness (height property) other than zero and remove the frame around the line by setting the border property to none. Putting all the properties together for the hr selector, we get a universal solution for popular browsers (example 1).
Example 1. Horizontal line
HTML5 CSS 2.1 IE Cr Op Sa Fx
Text string
The result of this example is shown in Fig. one.
Rice. 1. Colored horizontal line
To emphasize some of the most important elements of the site, it would not hurt to use all kinds of CSS styles and properties provided for this. Of course, you can not particularly bother with the text and highlight it, for example, in bold or italics, change the background or make a frame around the text. But not always one of the presented methods is suitable. Let's say you have a text that needs to be separated due to the specifics of its semantic load. This is where HTML and CSS properties come in.
How to make a line in text using CSS
In order to achieve our goal, we need to turn to style.css file, by writing in it the corresponding property border. This will cause a line to appear above, below, or on a certain side of the text. In turn, there are several properties responsible for displaying the line, namely:
- border top– a horizontal line located above the text;
- border-right- a vertical line located to the right of the text;
- border-bottom– a horizontal line located under the text;
- border-left is the vertical line on the left.
How to make a line in html
Using CSS properties, you can set all the necessary values by editing the HTML code. To do this, go to the administrative part of the site. Select one of the published materials, switch the text editor to the HTML code editing mode and add CSS properties. A sample can be seen below.
By writing these properties, will you be able to emphasize the importance of the material being presented, paragraph or heading?
Brief explanation of commands
- width– line length;
- solid- solid line;
- dotted- dotted line.
For a deeper understanding of styles, I recommend reading this.
You need to understand that in the process of making changes to the site code, the properties that determine the type of line, its thickness and color are listed with a space.
This method has several advantages:
An extensive range of possibilities with which you can make almost any line.
Ease of making all the necessary changes directly to the HTML code. This greatly simplifies the task for inexperienced site builders.
How to make a straight horizontal line with an HTML tag
The first thing I would like to draw your attention to is that this tag, despite all the subtleties and principles of html, does not have a closing tag. It can be used anywhere in the html code, between tags
and.Tag Attributes
- width- is responsible for the length of the line. It can be specified both as a percentage and as pixels.
- size– line thickness. Specified in pixels.
- color– defines the color of the line.
- align– attribute responsible for line alignment. In turn, the team applies to him.
Basically, horizontal lines are used to decorate the HTML pages of a site, giving them a more attractive look. But they can also visually delimit the information of neighboring sections, adding convenience to readers when studying it. In general, draw horizontal lines where you need to, that's all.
How to draw a horizontal line?
There is a special tag for drawing horizontal lines in HTML.
. And he is block tag, that is, it creates line breaks before and after itself, so the line is always obtained on a separate line. Accordingly, it can only be specified inside tags that can contain block elements, for example or
. But himself
cannot have content because it simply does not have a closing tag, i.e. it is empty .An example of drawing horizontal lines in HTML
Draw horizontal lines
Paragraph.
Paragraph.
Paragraph.
Result in browser
Paragraph.
Paragraph.
Paragraph.
As you can see, the lines are very thin, nondescript and drawn to the full width available, so now we will learn how to change them to make them look more attractive.
How to change color, thickness and width of horizontal lines?
In older versions of HTML, the tag
there were special attributes with which you could change the color, thickness and width of horizontal lines. These are color , size and width , respectively. But in newer versions, they've been deprecated in favor of Cascading Style Sheets (CSS), so, you guessed it, we'll be using our favorite style attribute again. The general syntax is:
style="background:color" >- color of the line (or rather its background).
style="height:size" >- line thickness.
style="width:size" >- line width.
style= "background:color; height:size; width:size"> - and you can specify all the parameters at once, just do not forget about the semicolon (;).A color can be specified by its name in English or by the color's HEX code preceded by a pound sign (#). Well, you already know about it from the lesson on change text and background color.
But let's talk about resizing in more detail. As you remember from tutorial on changing fonts, there are about ten units in CSS, but line width can only be specified in pixels (px) and percentages (%), and thickness generally only in pixels. If you put other units of measure, then this will not be an error, but browsers will simply ignore them.
If you specify dimensions in pixels, then the thickness and width of the line will depend on the resolution of the monitor on which your site is being viewed (the higher the screen resolution, the thinner and narrower the line).
As I said, only the line width can be specified as a percentage. Percentage sizes always depend on and are calculated based on the size of the parent element-container, inside which the tag is located
. In this case, the dimensions of the parent are taken as 100%. For example, if we place the tag
style="width:50%"> inside the element, then no matter how we resize the browser window or monitor resolution, the line width will always be half the width of the block.An example of changing the color, thickness and width of horizontal lines.
Change the color, thickness and width of the horizontal lines.
Result in browser
Changing the Position of Horizontal Lines
When you change the width of a horizontal line, you can clearly see that browsers always center it. If you want to change its position then just use inside
align attribute with the following values:
- center- the line is centered (default value).
- left- pressed to the left edge.
- right- pressed to the right edge.
An example of aligning horizontal lines.
Change the position of the horizontal lines.
Result in browser
How to remove the border around the line?
Look at the very first example of this tutorial. What color do you think these lines are? And here's the wrong one. They are transparent, as are any page elements that do not have a background color specified! Don't believe? Then look at the example where we changed the color of the lines. At the very first one, we did not set the color, but only increased its size, and isn't this line transparent? So that!
Now I'll explain. By default, browsers draw around border lines, which create a 3D effect. So, when we do not increase the thickness of horizontal lines, browsers show us only these frames, since the thickness of the line itself is 0px.
To remove the border around the line, which often only spoils the appearance, we will apply the style attribute again. And it is written like this:
Homework.
- Create article, section, and subsection headings. Position them all in the center.
- Set the entire page to Arial and headings to Courier.
- Let the font size for the entire page be 85% of the browser's default size. And the headlines have 145%, 125% and 110%, respectively, of the font size on the page.
- Write a paragraph under the first heading, a long quote under the second, and a poem under the third. And let the poem be centered on the page.
- Highlight three words in the quote in bold.
- Under the heading of the article, draw a three-pixel-thick red horizontal line across the full width of the page.
- At the top and bottom of the poem, draw lines one pixel thick in black. Let the width of the top line be approximately equal to the width of the verse, and the bottom line - half as much.
- Remove unnecessary frames from the lines.
