How to draw a line in html. How to make a line using HTML and CSS. Blocks in line using a framework
It would seem, why might you need four methods? 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 a horizontal line.
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. Other methods will come to the rescue here.
3.
4.
5.
Perhaps the most common way to make a line in Word is to use a couple of keys on the keyboard.
I Thin, thick, double, dashed line by keyboard
Below is a drawing of a keyboard with an English, but without Russian layout, but it does not matter, because we are only interested in three keys: Shift, dash and Enter.
Figure: 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: dotted 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 a long line across the full width of the page:
- We find on the keyboard the "dash" key (to the right of the "zero" key, in the green frame in Fig. 1).
- With 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 Shift and "-" (dash) are pressed simultaneously, NOT a dash is printed, but an underline _________. Thus, you can make a continuous line of arbitrary length anywhere in the document.
Figure: 2. Thin and thick horizontal line in Word
Now we print thick a horizontal line to fill the entire page width:
- 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 with a new (!) Line several times (for example, 3-4 times) press on the dash (while not releasing Shift): ___. Release Shift.
- Now press the Enter key. You will see a thick horizontal solid line.
Let's summarize some results in the form of a table:
(Click to enlarge) Lines in Word using the keyboard
II Line in Word using a table
A horizontal line can be obtained by using a table of one cell (1 × 1), in which only the upper or lower border is colored (will be visible), and the other three sides of the table have uncolored borders (they will be invisible).
We place 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).
Figure: 3. How to insert a 1x1 table in Word (from one cell)
The result will be a table of one large cell (1x1):
It remains to remove the borders from three sides in the 1x1 table. For this
- go to the "Home" tab (1 in Fig. 4),
- then 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).
Figure: 4. How to remove the selection of borders in the 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 keep the line strictly horizontal, hold down the Shift key and draw the line at the same time.
Figure: 5. How to draw a line in Word
IV Line in Word using the on-screen keyboard
To find the on-screen keyboard, in Search, enter the phrase "on-screen keyboard", more for Windows 7, and for Windows 8.
For Windows 10, you can also find the onscreen keyboard by typing “onscreen keyboard” in the Search bar.
Figure: 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 onscreen keyboard, you need three buttons: dash, Shift and Enter.
1 Dash and Enter
From a new line in Word, click several times on the dash (1 in Fig. 6) and press Enter. This will create a thin horizontal line.
2 Shift, Dash and Enter
From a new line in Word, first click Shift (2 in Fig. 6), then Dash (1 in Fig. 6). The result is an underline. So we will repeat 2 more times, and then press Enter. As a result, we will see a thick horizontal line.
When creating an HTML page, layout plays an essential role. Especially when we are talking about various symbols and decorative design: these little things help to make the "language" of your page more accessible and clear, moreover, they significantly change its perception and appearance in general. One of the most important elements for design is a horizontal line, and further 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 what is it for
A horizontal line in html is a page decoration element that performs a number of functions:
- Decorative... Helps add attractiveness to the page.
- Dividing... Promotes effective separation of information of different meanings.
- Emphasizing or underlining... Draws the attention of page guests to the necessary and most important information.
It is the horizontal line that is considered the most affordable way to implement a number of functions. It is very simple to create it, but outwardly it looks very profitable. By simple changes to the html-code, you can adjust:
- length;
- width;
- color characteristics;
- alignment to one or the other edge.
Note 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.
Create a horizontal line in HTML
You can set a line using a simple tag - hr in triangle brackets. It is short for "Horisontal Rule" and sets the classic external parameters. It differs from many others in that it does not need an end tag and is able to exist on its own. You can change the external characteristics of an element using additional values \u200b\u200bin the tag:
- Length... If you do not want the length of the line to extend over the entire page, then you can set the desired size in pixels or percent. This is done using the additional word "width" in the tag and the numeric length indicator specified after the "\u003d" sign in quotes.
It looks like this. For example, if we want a length of 100 pixels, we would set a tag like this: hr width \u003d "100"
- Alignment... Alignment is possible on the left or right edges, and also in the center. This feature is only valid if you have already specified the width parameter, since a full-page line cannot be aligned. To align, set an additional attribute in the "align" tag and add a direction to it: center - for center, left - for left and right - for right alignment.
The finished tag will then look like this. For example, if we need to set the center alignment for a horizontal line with a length of 150 pixels, then the finished tag will look like this: hr align \u003d "center" width \u003d "150".
Note that "align", the measure for alignment, is put in position 1, even though the attribute is dependent on the length measure width.
- Width... Optionally, you can also specify the width, creating a bold or thin underline. This criterion does not depend on anything and can be used independently without specifying the length or alignment. For it, we use the size attribute in the tag and a numeric value equal to the desired width in pixels. The number is indicated in quotes after the size attribute and the "\u003d" symbol.
Thus, if we need to create a line 15 pixels wide, we need to create the following tag: hr size \u003d "15".
- Colour... It is also set as an independent indicator. To change it, use the color attribute in combination with the color name in the form of a code or in English. The color is indicated in quotes after the "\u003d" symbol.
Thus, the tag for a standard white line can be written in two ways: hr color \u003d "#FFFFFF" or hr color \u003d "white"
Black can be created using code # 000000.
- Remove 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. A tag for a standard line using it will look like this: hr noshade
Create a horizontal line using video
And if you want to get information in a more visual format, then refer to the next video, which describes in detail the possibilities of working with a horizontal line.
Having determined the necessary dimensions of the horizontal line, you can design the site pages in such a way that the information is structured and visually competently framed. This helps visitors to more easily perceive the information presented and make your site stand out from others.
Hello! Today I will tell you how to make a horizontal line using html.
In fact, the need to make a horizontal line occurs quite often, for example, when you need to separate one part of the text from another.
Horizontal and vertical lines with css
This can be done using css. To do this, I enclose the required area of \u200b\u200btext in a block using the div tag, and then in the style.css file or directly in the html code, we write properties for this block for the top or bottom border using border-top and border-bottom. Here's an example:
In this case, I set the styling with css directly from the html code, and made the top border a solid line and the bottom one a dashed line.
This is how it will look on the page:
Horizontal line using css.
This method has its advantages:
- A wide range of settings that allow you to set almost any type of line;
- You can create both horizontal and vertical lines. In order to make vertical lines, you need to change border-top to border-left and border-bottom to border-right.
The disadvantages include the relative bulkiness of the code.
However, as it turned out, you can also insert a horizontal line into the text using html. At the same time, it is not even necessary to go into css. To do this, use the tag
.
Horizontal line using html tag
The first feature of this tag is that it does not have a matching end tag. It can be used anywhere in the html code between tags
and.This tag has the following attributes:
- Width - determines the length of our horizontal line in pixels or percent;
- Color - defines the line color;
- Align - sets the alignment of the line to the right - right, to the left - left, to the center - center;
- Size - line width in pixels.
Here is an example html code.
Basically, horizontal lines are used to decorate the HTML pages of the site, giving them a more attractive look. But they can also visually delimit information from neighboring sections, adding convenience to readers when studying it. In general, draw horizontal lines where you need it, that's all.
How do I draw a horizontal line?
There is a special tag for drawing horizontal lines in HTML
... Moreover, 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 myself
cannot have content, since it simply does not have an end tag, that is, it is empty.An example of drawing horizontal lines in HTML
Draw horizontal lines
Paragraph.
Paragraph.
Paragraph.
Result in the browser
Paragraph.
Paragraph.
Paragraph.
As you can see, the lines are very thin, nondescript and drawn to the full available width, so now we will learn how to change them to make them look more attractive.
How do I change the color, thickness and width of horizontal lines?
In older versions of HTML, the tag
there were special attributes with which it was possible to change the color, thickness and width of horizontal lines. These are color, size and width, respectively. But in newer versions they have been ditched 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 \u003d "background: color"\u003e - line color (or rather its background).
style \u003d "height: size"\u003e - line thickness.
style \u003d "width: size"\u003e - line width.
style \u003d "background: color; height: size; width: size"> - but 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 HEX-code of the color, preceded by a hash (#). Well, you already know about this from the lesson on changing the color of the text and background.
But we will talk about resizing in more detail. Do you remember from tutorial on changing fonts, there are about ten units in CSS, but line width can be specified only in pixels (px) and percentages (%), and thickness generally only in pixels. If you supply other units of measurement, 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 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 container element inside which the tag is located
... In this case, the size of the parent is taken as 100%. For example, if we place the tag
style \u003d "width: 50%"\u003e inside element, then no matter how we resize the browser window or the 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 the browser
Changing the position of horizontal lines
When you change the width of a horizontal line, it becomes clearly visible that browsers always place it in the center. 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 - is pressed against the left edge.
- right - pressed against the right edge.
An example of aligning horizontal lines.
Change the position of the horizontal lines.
Result in the browser
How do I remove the border around the line?
Take a look at the very first example of this tutorial. What color do you think these lines have? And that's wrong. They are transparent, like any page elements that do not have a background color! Don't believe me? Then take a look at an example where we changed the color of the lines. For the very first one, we did not set the color, but only increased its size and is this line not transparent? So that!
I'll explain now. By default, browsers draw borders around lines, which create a three-dimensional effect. So, when we do not increase the thickness of the 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 reapply the style attribute. And it is written like this:
Homework.
- Create article, section, and subsection headings. Center them all.
- Set the entire page to Arial and Courier for headers.
- Let the font size for the entire page be 85% of the default browser size. And titles 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 bold in your quote.
- Under the heading of the article, draw a three-pixel red horizontal line across the full width of the page.
- At the top and bottom of the poem, draw one pixel black lines. 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.
Greetings to all readers. Periodically, the wizards are faced with the problem of how to make a horizontal or vertical line using HTML or using CSS. This is what I will tell you today.
Lines in CSS
There are several ways to draw lines. One such way is using CSS. More precisely, with the help of Border. Let's take an example.
And here's what the result will be.
Horizontal and vertical line using css.
Lines in CSS can be drawn using the Border statement. If you just want a rectangle with a fixed border width, you can simply use this operator and set a value to it. For example border: 5px solid # 000000; will mean that the borders of the block are 5 pixels wide in black.
However, if you need to set not all boundaries, but only some, then you need to write down exactly which boundaries are needed, and what value each of them will have. These are the operators:
- border-top - sets the value of the top border
- border-bottom - sets the value of the bottom border
- border-left - Sets the value of the left border
- border-right - Sets the value of the right border.
Vertical and horizontal line in HTML
You can also create lines in HTML itself. To do this, you can use the hr tag.
In this case, a horizontal line will be drawn, one pixel high and full width.
But this tag, you can set some values.
- Width - sets the value of the line width.
- Color - sets the line color.
- Align - sets the alignment to the left, center, right
- Size - sets the line width in pixels.
With the hr tag, you can also set a vertical line. But in this case, you will have to resort to styles again.
In this case, a vertical line will be drawn one hundred pixels high, one pixel thick, and indented five pixels.
Conclusion.
Well, now you know how you can set a vertical and horizontal line. Lines can be set both on regular sites using HTML, and set on a site that uses a CMS, for example, WordPress, but in this case, you will need to switch to HTML mode.
Well, if you have any more questions, ask them in the comments.