Tip 1: How to set an indent

Tip 1: How to set an indent


Most often for specifying sizes indents in HTML-pages use features of language CSS(Cascading Style Sheets - "Cascading Style Sheets"). Although in the HTML language itself, there are several "rudimentary" remnants, which in some cases allow indentation. Below are the options that are used most often, but in addition to them there are still many different kinds of tricks that allow you to specify indentation for non-standard markup of HTML documents.



How to specify an indent


You will need



  • Basic knowledge of HTML and CSS


Instructions


1


Identify the page element that followscount off indent. For example, if the text is placed inside the <div> ... </ div> tag (block), then the parent element for this text is this block and count indent from the borders of the block. And if the text (or image) is not inside any block (div, li, etc.) or lowercase (span, p, etc.) elements, then its parent will be the body of the document (body tag). Determining the parent element for the text is necessary because it is up to him to specify style descriptions that indent. We will assume that the text is placed inside the div block: <div> Sample text </ div>


2


Use the margin property of CSS toSpecify external indents, that is, the distance from the element's boundaries to the neighboring elements, and also to the boundaries of the parent element. This distance can be set separately for an indent on each side: margin-top - from above, margin-right - to the right, margin-bottom - from below, margin-left - to the left. For the example above, the css-code can look like this: div {margin-top: 10px; margin-right: 15px; margin-bottom: 40px; margin-left: 70px;} Here, "div" is a selector that indicates that this style should be applied to all div tags in the document code. The CSS syntax allows you to combine all four lines into one: div {margin: 10px 15px 40px 70px; } Values indents you should always specify in this order: first, top, then right, bottom and left. If the indents are the same on all sides, then you just need to specify the value once: div {margin: 70px;} In addition, you can set the floating outer indent horizontally (that is, left and right) . This can be very useful when you need to set a block of the specified width exactly in the center of the browser window. The browser automatically determines what should be the indentation from both sides if you write such CSS-instruction: div {margin: 0 auto;}


3


Use the padding property to setinternal indents, that is, the distance from the element's boundaries to any elements placed inside it, including text. The syntax for writing this property is exactly the same as for the margin property: div {padding-top: 10px; padding-right: 15px; padding-bottom: 40px; padding-left: 70px;} Ordiv {padding: 10px 15px 40px 70px;}


4


Use the text-indent property to specify an extra indent for the first line of each paragraph of the text. For example: div {text-indent: 80px;}


5


Use the hspace and vspace attributes of the HTML tagimg, to set, respectively, the horizontal and vertical distance from the picture to the outer elements. For example, here: <img src = "/ images / pic.gif" hspace = "10" vspace = "15" />


6


Use the cellpadding attribute of the table tag, ifYou need to specify an offset from the cell borders in the table to their contents. And the cellspacing attribute specifies the space between the cells in the table. For example: <table cellpadding = "10" cellspacing = "15"> <tr> <td> 1 </ td> <td> 2 </ td> </ tr> </ table>



Tip 2: How to set the background


In order to embellish your site on the Internet, you can make changes to its design. The change of design implies any action, beginning with a change background main page until the site template is completely redrawn. If you decide to change the background of your site, then the following instructions will help in resolving this issue.



Set a background


You will need



  • Editing the css file.


Instructions


1


For the most part, the site design code isin the style.css file. But each template can be different from the previous one, so the design code can be located in another file, but also with the extension css. To specify the color background your site, you must enter or replace alreadyExisting value for the following expression: / * white background * / body {background-color: #FFFFFF;} / * white background of the title, black font color * / h1 {color: # 000000; background-color: #FFFFFF;}


2


In order to insert a picture in the form background on your site, you must enter or replaceExisting value for the following expression: body {background-color: # 000000; background-image: url ("Image-1.jpg");} It is worth noting that in this case, you must specify a link to the image file that will be in the same folder as the css file.


3


If you want to tint a small picture orimage of a small size, then use the command background-repeat. In order to correctly use this command, there are several refinements to this command: background-repeat: repeat-x - repeat the picture in the x-axis; background-repeat: repeat-y - repeat the picture in the y-axis; background-repeat: repeat - repeat the picture on two axes at once; background-repeat: no-repeat - no repetition of the picture; background-attachment: scroll - scrolling the picture together with the page; background-attachment: fixed - the picture can not be scrolled. Using the syntax of this command, you can show its work in the examples: background-position: 30px 40px - the picture is 30 pixels lower and 40 right pixels from the left edge. background-position: 60% 35% - the left margin is 60%, and the top margin is 25%.




Tip 3: How to make bulleted lists


For full work with a text editorMicrosoft Word needs to have basic knowledge: the ability to form fields, specify the required format, and also structure the document according to the specified parameters, which is the design of the bulleted list.



Making a list is one of the ways to format text


Instructions


1


If after a set of ordinary paragraphs you needcreate a bulleted list or turn already typed lines into it, then click on the taskbar at the top of the open window, click the Format button, then select the List command from the drop-down menu. If the menu appears in the abbreviated form, it is expanded by clicking on the circle icon with a double arrow from the bottom. The finished text, divided into lines and subject to formatting, is highlighted by pressing and holding the left mouse button on the rug before performing this action.


2


In the opened small window it is necessary to choose the firsttab with the appropriate name, and then click on the sample list with the required marker: bold dot, square, tick. Next, click the "Ok" button and customize the format to the required manually, or perform this operation using a new window that appears after clicking on the "Edit" command. It allows not only to change the icon of the list by finding another one in a more extensive list, but also to set a different font size of the symbol, and even completely change it to an arbitrary drawing, which can be useful when making congratulations and other colorful documents. Inserting a picture instead of the usual characters is done through the "Import" button.


3


Separate function is to clarify the situationmarker - if you skip this option, the list form may not match the specified parameters. A marker's indent is the distance between it and the left margin of the document, a kind of red line. You can set it to 0 cm or move it slightly away from the border of the rest of the text. "Tabulation" in the column "Position text" means the location of the first word in a row relative to the marker. The value in this cell can not be less than in the previous one denoting the indent of the character. If they coincide, then the text closely adjoins the numbered list. Text indentation denotes the location of the following lines in a single paragraph, they can have the same appearance as the rest of the text, or somewhat move away from the left margin.


4


Users who prefer not to workthrough menus and dialog boxes, you can use the corresponding icon in the format bar. Pressing it in place of the cursor or selected lines get a numbered list, which is formatted using tabs and the position of the text on the upper ruler. Moving the black corner of the tab stops the first word of the first line, the top triangle - the location of the marker, and the lower triangle on the platform - the rest of the intrapersonal text.