Nested rules. Making life more comfortable with sprites
The article is not entirely relevant
In 10.2 and higher, the ability to rename the page with site rules directly in the engine admin panel was added, when directly editing the text of the rules. However, the page with the site rules remains. It exists and is located on any DLE website at http://my_site/rules.html
How to squeeze all the juice out of this address - read on
The site rules page is a system static page. It is processed by the engine and generated in the same way as a regular static page. It’s just impossible to remove it - it’s not provided for by the engine developer. Even if the site rules themselves are disabled for display during registration, then the page with the site rules is always available at http://my_site/rules.html The first search engine that finds it there will start vomiting and spitting on the text and title. It’s no wonder. After all, on all DLE sites it’s the same thing.
When a page with site rules ends up in the site map, it is regarded by the search engine as “junk” and is not included in search index, since the rules of the site are the same almost everywhere. Therefore, the page with site rules in DLE, by default, is prohibited (closed) from search indexing in file ( line Disallow: /rules.html).
The uniqueness of the “Site Rules”My personal opinion about the page with the site rules and its uniqueness is that it is an atavism that distracts the user’s attention during registration. The rules of the site are a rudimentary outgrowth, the uselessness of which has been successfully proven by the organizers of social networks.
No, well, has anyone seen any formidable or special rules when registering on Facebook or Twitter? Or maybe they are on VKontakte and Odnoklassniki? Same thing!
And some website, with a visitor of 1000 uniques -
begins to write its own unique rules for users.
As for me, so best rules on the site is their complete absence.
If the user is normal and adequate, he already understands everything.
It's no secret that blocking pages and directories from search indexing is not a panacea. One way or another, any page of the site will sooner or later be “chewed” by the search engine. For example, take the same Yandex. Its search robots will pump out absolutely everything they can find from the site and only then will they begin to sort and think about whether to return pages to search or not. This is quite obvious, despite Yandex’s touching assurances that it and its robots do not download unnecessary material from the site. Like, if a web page is closed from indexing, then Yandex saves only its address with the mark , or(who will close it how).
Instead of poking around and blocking a “junk” page with site rules from search indexing, it is much better to remake it into some other useful thing and open access to it for search engines - let them calm down. Or, at least just write your behavior on the site and, again, allow search engines to access the page.
Opening site rules for search enginesWe take a bold step and give search engines access to the site rules page. To do this, in our file we find the line Disallow: /rules.html and delete it nafik. It is done! Now, any search robot will be able to officially get into the open “Site Rules” and, of course, say “Fe-e!” and “Be-e!” To prevent this from happening, we rework the “Site Rules” page - insert our own unique text on any topic, pictures and change the name (title) of the page.
Editing the “Site Rules” pageEditing the page with site rules is available in the admin panel of the DLE engine, in the “List of all sections” - “Rules on the site” section. Editing the “Site Rules” page is performed as for any other static page - in the normal operating mode of a visual text editor. Here the problems can only be with writing unique text Yes, a selection of unique pictures. A little higher, there is a special window for entering the title (title) for the page being updated. But, such an innovation appeared in, starting with version 10.2.
To rename the site rules page
in older engine models -
will need to delve into it system files.
(for CMS DLE 10.1 and lower)
Directly renaming the “Site Rules” page itself is done in the adminpanel.lng file, which is located in the language/Russian/adminpanel.lng folder. The adminpanel.lng file is a system file of the DLE engine. To edit it, go to your server (otherwise there is no way).
Open the file adminpanel.lng.
Looking for a string
"rules_edit" => " General rules Online"
We change the words “General rules on the site” to our new name. Let's close. Save. (You can only change the Cyrillic alphabet, which is between the quotes. Otherwise, it will stop working altogether.)
Clear the engine and browser cache. After editing and saving the adminlogs.lng file, you must clear the engine cache and browser cache in order to force the engine to generate a new page with a new name, and the browser to download it. If this does not help and the old name continues to be displayed, you need to go to the admin panel of the engine, edit and resave the “Site Rules” page with some minor sign. For example, put a period in the text (then you can correct everything back). Such bullying and atrocities will definitely clear the brains of the engine and server and force them to generate and display a new name.
Thinking out loud. It feels like dear celsoft is reading this blog. A little later, after this publication, in the admin panel of the engine version of CMS DLE 10.2 it became possible to rename the page with site rules in a normal civilized way, without tedious poking around in the system script files. Many thanks to the developers of CMS DLE for their work and attention to the problems of ordinary people.
Hello, dear readers of the blog site. Today I propose to continue the conversation about which we started in the above article. Even earlier, we got acquainted with what cascading style sheets are, learned what they mean, and much more.
All materials on cascading style sheets that have already been published on this blog can be found in. Today we will first talk about how you can combine and group selectors, and then we will look in detail at the rules that apply to the same element in HTML code(Important, counting selectors and writing rules in the style attribute).
Combinations and Grouping of Selectors in CSSSo, in previous articles we managed to consider 7 types:
Of these seven possible species in CSS language combinations can be made. All combinations that we will make are directly related to (ancestors - descendants, parents - children, brothers - sisters).
The first type of combination is called context selector. It takes into account the relationship of HTML code elements according to the “Ancestor - Descendant” principle:
Individual selectors in a combination are written separated by a space, and it must be read from right to left. That. The CSS rules will only apply to the last one of this combination (the rightmost one), and everything that comes before it only allows us to specify a more precise application (targeting) for our rules (emphasize).
The first example says that all elements B (in bold) that have ancestors Div elements, will be painted in green color.
In the above code, only the underlined fragment will be colored green, because among its ancestors there is a Div, and the second fragment of code, highlighted with the B tags, will remain the color that is selected for it by default, because the Div container is no longer among its ancestors (only P and Body):
Such combinations work in any browser.
The next type of combination will be child selector, which is based on the principles of relationships between code elements of the “Parent - Child” type:
They are written with a separating sign greater than (>):
This entry will be interpreted by the browser as follows: for , the “parent” (closest ancestor) of which is the Div container, will be highlighted in red.
In the example above, only the outlined paragraphs will be colored red because they are enclosed directly in the Div container that is their parent (closest ancestor). If you modify the above example of a child selector to look like this:
Body > p (color:red)
Then only it will be highlighted in red last paragraph, because its parent is the Body tag, and the first two paragraphs will remain in their default color (Body is their parent, but not their parent, which is Div). Child selectors do not work in Ie 6 browser.
How and why selectors are grouped in CSS codeThe last combination is called adjacent selectors and corresponds to the principles of relationships between HTML code elements of the “Sisters - Brothers” type. They can use either “+” or “~” as a separator:
This entry means that the contents of element I (italicized) will be colored red only if its nearest neighbor to the left (top in code) is element B (bold). For example, this condition will be followed in this example:
If you write the adjacent selector in Css code in this form:
H1 ~ p (color:red)
This will mean that all paragraphs (P) that have an adjacent H1 element (heading) located higher in the code will be colored red. This refers specifically to neighboring elements (relationships of the “Sisters - Brothers” type). In the example below, the given selector will be matched by the circled paragraphs:
Combinations of adjacent selectors in the Ie 6 browser are also, unfortunately, not supported. In Ie 6 only the first type of combination is supported, but in Ie 7 and higher all others are supported. In other browsers there should be no problems.
Selectors in Css can also be grouped. For example, if some of them use one or more identical rules, then they can be combined into a group to reduce the amount of Css code.
In the example shown in the screenshot, it is repeated for each header selector (h1-3), which can cause complexity (multiple work) if you want to change the value of this property. Therefore, the second option of a grouped entry looks a little preferable.
Please note that when grouping, selectors are separated by commas. If there are more identical rules, then the code savings will be more noticeable. And those rules that were unique must still be written down individually.
Priorities of CSS properties (with and without important)Now let's think about what style the browser will use if no styles are specified for this Html code element? And for this there is a corresponding specification, where all this is described.
As you can see, the final separation of Html and Css has now occurred. Those. even for pure HTML code, the browser will still use the default properties of style sheets. So, the default properties have the lowest priority.
The properties that the user assigns in his browser settings have higher priority. These styles will be applied to any documents he views in this browser.
True, not all browsers have this feature, but last resort, Ie and Opera have it. Those. If desired, the user will be able to include his own CSS file as a source of style markup.
For example, in Ie, to do this, you need to select “Tools” - “Internet Options” from the top right menu, and then on the first “General” tab click on the bottom “Appearance” button. In the window that opens, you need to check the “Design using a custom style” box and use the “Browse” button to find the CSS style markup file you need on your computer:
Those. the user has the ability to make any site opened in the browser look in accordance with his requirements described in the CSS file. These are called "user styles" and they take precedence over the default styles defined in the specification. But the so-called author's styles will have even greater priority.
That is, if I (the site developer) wanted to use styles other than the default ones in the design of any Html code element (remember, they are described in the specification), then the user own file Css will not be able to interrupt my design.
Will the user be forced to accept this? No. It has the ability to increase the priority of its CSS properties by adding Important to the end of each one. This word is written separated by a space character and preceded by an exclamation mark:
P (color:red !important;)
If the user has the same property with Important in his own style file, which he connected to the browser, then he will see all paragraphs in red. But the author (developer) of the site could also use Important for this property. Who will win then and whose priority will be higher?
We decided that user styles with Important will have a higher priority in any case than author’s styles, whether with Important or without it.
Let's summarize in the form of a list all the information presented regarding the priorities of style properties. The priority will decrease from top to bottom:
Those. without Important, author's styles are more important, and with them, user styles are the most important and priority. Well, now let’s deal with the author’s tables, because what the user does is unknown to us and is shrouded in darkness.
How to increase the priorities of CSS properties in author stylesRight now we are moving on to the issue of cascading tables CSS styles. Let's look at this with an example to make it clearer. Let's say we have a piece of code with following HTML elements (paragraph inside Div container):
Container Contents
Let's first write down the following properties:
P (color:red) .sbox (background:#f0f0f0)
As a result, both the first of them will be applied to the paragraph (since it is formed by the P tag), and the property that specifies Gray background for an element with the “sbox” class, which again this paragraph has:
Now let's add one more property to the second selector (of the class), which will conflict with the first line (they both set , but use different values):
P (color:red) .sbox (background:#f0f0f0;color:blue)
This will cause the paragraph text color to change to blue instead of red.
Why? Because this is exactly the way conflict is resolved when the same HTML element code receives several identical rules at once, but with different values and from different places in the CSS code. In order to determine which rule has higher priority, you need to count its selectors.
In addition, the selectors themselves have a gradation according to priorities. ID has the highest priority. In this example, the text color will be blue precisely because the priority of the Id (#out) will be higher than that of the tag selector (p):
P (color:red) #out (color:blue)
Further down the priority ladder are selectors for classes, pseudo-classes and attributes. IN following example The tag (p) will play again and the color of the paragraph text will be blue, because it competes with the selector of a higher priority (class):
P (color:red) .sbox (color:blue)
Well, the lowest priority (not counting the universal *, which has the lowest weight and does not make any changes to such butting) is the selectors of tags and pseudo-elements.
Div p (color:red) p (color:blue)
What color will the resulting paragraph text be? That's right, it's red, because... This property has more tag selectors (two versus one). Oh how. Those. Ids are considered first. If the winner is not identified, then classes, pseudo-classes and attributes are considered. Well, if nothing was resolved there or no such ones were found, then selectors of tags and pseudo-elements are considered.
But it is quite possible that a winner will not emerge and the selectors of competing classes will have equal priority in total. For example, for our long-suffering paragraph enclosed in a Div container:
Container Contents
It would be quite possible to write a piece of CSS code like this:
Div.box #out(color:red) #in p.sbox(color:blue)
And what color should the paragraph text be? Both combinations describe exactly our paragraph. The first should, as usual, be read from right to left: apply these properties (color: red) to an element with Id #out, which is located somewhere inside (have it among the “ancestors”) of the Div container with the class.box (div.box ). Completely matches our paragraph.
The second combination: apply these properties (color:blue) to a paragraph element with the sbox class (p.sbox), which is inside any element with Id #in. Again, it completely describes our paragraph. Let's count the selectors.
IDs occur once in both combinations, and the same can be said about classes. All that remains is to count the tag selectors, but they are also used the same number of times in both combinations (one). Ambush.
The result is equal priorities for the same property, which has different meanings(text color red or blue). How will the browser solve this dilemma?
The rule will apply here: whoever is last is right. Therefore, in my example, the color of the paragraph text will be blue, because this property (color:blue) is located lower in the code. If these rules are reversed:
#in p.sbox(color:blue) div.box #out(color:red)
As a result, the color of the paragraph text will change to red. Q.E.D. You can add, for example, another tag selector to any combination and we will tip the scales in its favor, even if it is not lower in the code:
Body #in p.sbox(color:blue) div.box #out(color:red)
In this case, the color of the paragraph will change to blue. The universal selector “*” has no effect on the calculation of priorities at all. By the way, just above we looked at a way to increase the priority of CSS rules by adding Important. In our example it might look like this:
P (color:green !important) #in p.sbox(color:blue) div.box #out(color:red)
What color will the paragraph text be in this case? Green, of course. And you don’t even need to count anything, because adding Important to the style property clearly resolves this controversial issue, no matter where it is in the code and no matter how many selectors it has.
But Important is not the only way unconditionally increasing the priority of a property. The second way to improve it could be to use style properties in the Style attribute of the Html element you need.
Those. inside the same long-suffering P tag, add a Style attribute specifying any color:
Container Contents
That's it. Now, regardless of what properties are specified for this element in external file style sheets or inside tags Style HTML code, the paragraph text color will be yellow.
But it won’t be able to beat the properties with Important. Those. in the last example, where we added the rule "p (color:green !important)", the text color will still be green, even though style="color:yellow".
In fact, the priority of the two rules (with Important in the external style sheet file and in the style attribute) is equal, which means we need to proceed to counting the selectors. Can they really be inside the style attribute?
Yes, there cannot be any, which means that the rule written in the style attribute will always lose to the rule with Important only at the expense smaller number selectors (zero will be less than any number).
Well, what then will give the highest priority to the Css property? That's right, it will be written in the style attribute and even with Important:
p (color:green !important) #in p.sbox(color:blue) div.box #out(color:red)
Container Contents
In this case, the color of the paragraph text will be yellow and it will be impossible to interrupt this with anything in the author’s styles. We have found an absolute way to set styles. It can only be interrupted by a user with his own style file and the Important property specified for this.
So, let's try to compile a list of factors that influence the priority of properties in author's styles in descending order:
In fact, the rules in the style attribute are used extremely rarely (imagine how difficult it would be in this case to make changes to the entire site code, and not to separate file CSS).
This attribute is mainly used when you just need to quickly test something. Well, it’s also convenient if you insert your code into someone else’s HTML pages, which have their own styling and which can be inherited by () for your inserted elements.
Why and how to insert your code into other people's pages? We may not need to, but Yandex and Google do this when or on other people’s sites (our sites).
By adding the style attribute to all elements of the ad block code, with the properties specified in it and the added Important, you no longer have to worry about the ad code being changed in any way (although Yandex ads can still be changed using CSS and Important, apparently they did not use this method).
Good luck to you! See you soon on the pages of the blog site
You can watch more videos by going to ");">You might be interested
Tag, class, Id and universal selectors, as well as attribute selectors in modern CSS
Selectors of pseudo-classes and pseudo-elements in CSS (hover, first-child, first-line and others), relationships between Html code tags
List style (type, image, position) - CSS rules to customize the appearance of lists in Html code
What is CSS for, how to connect cascading style sheets to an Html document and the basic syntax of this language
On this moment Most browsers display websites, independently decoding and correcting webmasters’ errors. However, you need to be careful when writing HTML- it is necessary to follow the rules of validity, because correct layout is important for site optimization, and will also help not go crazy for users who open your site in earlier versions of browsers.
UseThe element is located on the first line of any HTML page. It determines the version of markup language that is used on the page. At the moment, it is recommended to use the doctype of the form - it is universal for any version of the language.
Use correct structure documentTags , , should always be present in the code; this makes the page compliant with standards and ensures that it will be displayed correctly.
Wrong
Hello world!
hello world!
Right
Hello world!
hello world!
Define technical page information correctly
Meta tags and styles should be specified in , not somewhere in the body of the page. It is preferable to include scripts at the bottom of the page before the closing tag. Advantage this approach The point is that before the page content is displayed, the browser only loads styles, and it will load scripts last, which allows the user to quickly see the page content.
Wrong
Hello world!
Right
Hello world!
Images must always include an alt attribute. The browser relies on this attribute to provide context for the image. alt attribute should contain text that will be displayed if the picture has not loaded.
Wrong
Right
Don't use styles in HTML markupThis creates pages that take too long to load and are difficult to maintain. Write all styles in a separate CSS document. Try to use the tag and style attribute to a minimum.
Write commentsComment the code, but don't overdo it. Comments that are written concisely and clearly can serve as a great help to other developers, as well as an important reminder for you after some time has passed.
Example:
Page
Give names to css classes in accordance with the content of the block, for example: header - header, footer - footer, menu - menu, content - content. This will make the code much clearer and easier to maintain.
Bad code
- Menu item 1
- Menu item 2
- Menu item 3
Good code
Rules for writing CSSCSS also has rules that you can follow to keep your code simple, easy to read, and well organized.
Reset browser styles to defaultThey can interfere with the styles we actually want to apply. You can download the file for resetting standard browser styles here - reset.css.
Use shorthand properties and valuesBad code
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
Good code
padding: 5px 10px 15px 20px;
Specify selectors and rules on a new lineBad code
Element (display:block;position: relative;padding:5px 10px 15px 20px;)
Good code
Element (
display: block;
position: relative;
padding: 5px 10px 15px 20px;
}
Bad code
padding: 10px 0px;
margin-left: 0%;
Good code
padding: 10px 0;
margin-left: 0;
Separate the main blocks with comments, this will improve the readability of the code.
Example:
/*HEADER*/
header(
}
/*HEADER END*/
/*MAIN*/
main(
}
/*MAIN END*/
/*FOOTER*/
footer (
}
/*FOOTER END*/
These guidelines and rules are just the basics, as HTML and CSS languages are evolving faster and new methods of writing correct code are being developed. By following our recommendations, you will be sure that your code is simple, easy to read and optimized. You will also receive +100 karma and gratitude from the developers who will work on the site after you.
What is HTML
The World Wide Web World Wide The Web (WWW) is made up of Web pages that are created using the so-called hypertext markup language HTML (HyperText Markup Language). Although many people talk about programming in this language, HTML is not a programming language in the traditional sense. HTML is a document markup language. When developing an HTML document, you mark up a text document in the same way that an editor does it with a red pencil. These marks serve to indicate the form in which the information contained in the document is presented.
Special HTML document viewers, often called browsers, are used to interpret files marked up according to rules HTML language, formatting them as Web pages and displaying their contents on the user's computer screen. There are a large number of browser programs developed by various companies, however, today, out of the whole variety of programs, two leading programs clearly stand out - Netscape Communicator and Microsoft Internet Explorer.
Netscape Navigator is developed by Netscape Communications Corporation. Like many software products, there are a number of versions of this program. The latest version of Netscape Communicator at the time of writing was version 4.7. Internet program Explorer is developed by Microsoft. Latest version this program is 5.0.
Other browsers lag far behind in popularity. Several years ago, Netscape's browser occupied a leading place among browsers, with more than two-thirds of users using this particular browser. By releasing your browser, Microsoft company has made great efforts to conquer this part of the market. Often in the media
There have been reports of a war between browsers for users. Now these two browsers are comparable in popularity. The growing popularity of the Microsoft browser is facilitated by the inclusion of the browser in the operating system Windows systems 98, however, ultimately the choice of browser is up to the user.
Modern browsers have extensive capabilities, but the main thing for them is the interpretation of documents marked up according to HTML rules. This book is mainly devoted to the description of these rules. In the first part we will look only at the fundamental principles of constructing HTML documents.
To understand what markup language is, let's remember the good old days when many people worked with text editors like WordStar. In them, to highlight a phrase, for example, in bold, special marks were placed at its beginning and end (/B and /b):
/B This text will be displayed in bold/b
When outputting such text to a printing device (we are not talking about displays yet, in those distant times they either did not exist at all or there were alphanumeric displays that did not allow changing fonts), the symbols / in were forced to use bold font until the characters /b will be encountered.
HTML works exactly the same. If there is a need to highlight text on the screen in bold, then this can be done in a similar way:
This text will appear in bold font
Symbols turn bold on, and symbols turn it off. Such characters that control the display of text and are not themselves displayed on the screen are usually called tags in the HTML language (from the English word tag - label, sign).
All HTML language tags are separated by delimiter characters (< и >), between which the identifier (name) of the tag is written (in our example it is in), and, possibly, its parameters. The only exception to this rule is comment tags with more complex delimiters (). The names of tags, as well as their parameters, can be written in any register. For consistency, most tags in this book are written in capital letters.
Majority HTML tags used in pairs, i.e. for a certain tag, let’s call it opening, the document has a corresponding closing tag. By HTML rules The closing tag is written in the same way as the opening tag, but with a / (forward slash) in front of the tag name. The only fundamental difference between paired tags is that closing tags do not use parameters.
Tags that require corresponding end tags will be called container tags. We will call everything written between the corresponding opening and closing tags the contents of the container tag. Sometimes the end tag can be omitted. For example, for a tag describing data for a table cell
There are a number of tags for which the end tags are omitted by most document authors. An example would be a list item tag
Modern browsers will in many cases format documents correctly if some end tags are omitted, but this practice cannot be recommended.
Some tags don't require end tags at all. Examples include the image insertion tag , forced line feed
, indication of the base font, etc. Often, from the very purpose of the tag, you can guess whether it needs a final one.
There are general rules for how browsers interpret tags. Unlike programming languages, in which erroneous statements lead to the issuance of corresponding messages at the compilation stage of the program and require editing, in HTML it is not customary to react to incorrect tag entries. An incorrectly written tag or its parameter should simply be ignored by the browser. This is a general rule for all browsers, which applies not only to erroneously written tags, but also to tags that are not recognized by this version of the browser. An example would be tags that were proposed and implemented for a particular browser and unknown for another. For example, a container tag that serves to provide alternative information to browsers that do not support frame structures will not be recognized by such browsers. A browser that supports frames, when it encounters a tag, will skip all the information contained in it. And a browser that is not familiar with frames will naturally not understand the tag. However, according to the above rule, this tag will simply be skipped, but all subsequent information will be displayed.
Tags can be written with parameters or attributes (from English, attribute). In this book we will use the term parameter most often. Sets acceptable parameters are individual for each tag. The general rules for writing parameters are as follows. The tag name may be followed by parameters, separated by spaces. The order of the tag parameters is arbitrary. Many parameters require specifying their values, but some parameters have no values or can be written without them, taking default values. If a parameter requires a value, it is indicated after the parameter name using an equal sign. The parameter value can be written in quotes or without them. The only case in which you cannot do without quotes is when there are spaces in the parameter value. In parameter values (as opposed to tag names and parameters themselves), case is sometimes important. Here's an example of a tag entry with parameters:
Parameter |
Purpose |
ALINK |
|
BACKGROUND |
Points to the URL of the image that is used as the background |
BOTTOMARGIN |
Sets the border of the document's bottom margin in pixels. |
BGCOLOR |
Specifies the background color of the document |
BGPROPERTIES |
When set to FIXED, the background image does not scroll |
LEFTMARGIN |
Sets the left margin of the document in pixels. |
LINK |
Specifies the color of a link that has not yet been viewed |
RIGHTMARGIN |
Sets the border of the document's right margin in pixels. |
SCROLL |
Sets the presence or absence of scroll bars in the browser window |
TEXT |
Defines the text color |
TOPMARGIN |
Sets the border of the document's top margin in pixels. |
VLINK |
Specifies the color of an already viewed link |
The use of the BACKGROUND and BGCOLOR parameters, which determine the background of the document, is discussed in detail in.
The BGPROPERTIES parameter, which accepts a single value of FIXED, is supported only by Microsoft Internet Explorer.
The BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN, and TOPMARGIN parameters, which specify the distance in pixels between the edges of the text and the corresponding window edges, as well as the SCROLL parameter, are recognized only by Microsoft Internet Explorer, starting with version 4.0.
The ALINK, LINK, TEXT, and VLINK parameters determine the colors of links and document text.
In HTML, colors are defined by hexadecimal numbers. The color system is based on three primary colors - red, green and blue - and is designated RGB. Each color is given a hexadecimal value ranging from 00 to FF, which corresponds to a range of 0-255 in decimal. These values are then combined into a single number, preceded by a # symbol. For example, the number #800080 represents the color purple. In order not to remember sets of numbers, you can use the names of colors instead, which are given in Appendix P2. Early versions of browsers only recognized the names of 16 standard colors, marked with asterisks in the application. Modern versions of browsers recognize all 140 color names.
Text formatting
This section will look at the possibilities of formatting individual characters in the text of a document.
Block level tags and sequential tags
Some HTML tags that may appear in the BODY section are called block level tags, while others are called inline tags or, otherwise known as text level tags, although this division of tags the levels are to a certain extent arbitrary.
The difference between the levels of HTML tags is that block level tags can contain sequential tags and other block-level tags, while sequential tags contain only data and other sequential tags. Block tags describe larger document structures than sequential tags.
By default, these types of tags are placed differently in the description text: block-level tags start on a new line, while sequential tags do not.
Logical and physical formatting
To format the text of HTML documents, a whole group of tags is provided, which can be divided into logical and physical formatting tags.
Logical formatting tags denote (by their names) the structural types of their text fragments, such as program code (tag), quote (tag), abbreviation (tag), etc. (see descriptions of these and other similar tags in the following section). Using tags and you can, for example, mark individual fragments as highlighted or highly highlighted. Note that we are talking about structural markup, which does not affect the specific screen representation of the fragment by the browser. Therefore, such markup is called logical. Browsers display logical formatted snippets on the screen in a specific way by default. The display type has nothing to do with the fragment's structural type (i.e., the name of the logical formatting tag), but can be easily overridden.
Physical formatting tags determine the format for displaying the text fragment specified in them in the browser window (according to the preferences of the document author). For example, to display a snippet in italics, you can use the italics tag . This and other commonly used physical formatting tags are described later in the “Physical Text Formatting Tags” section of this chapter.
For a long time, there have been debates between developers of HTML documents about the advantages and disadvantages of one or another approach. With the release of the HTML 4.0 specification, this debate ended in favor of the use of logical formatting, as the principle of separating document structure from its presentation was proclaimed. Indeed, only on the basis of logical formatting can one flexibly control the presentation of a document using modern methods (based on style sheets, dynamically changing documents, etc.).
However, physical formatting can currently be used freely. The HTML 4.0 specification deprecated some physical formatting tags, but they are still supported by all browsers. Note that some logical formatting tags, designed to replace individual physical formatting tags, are not recognized by all browsers, which makes their use extremely inconvenient. An example is a logical tag, which is recommended to be used instead of a physical tag.
The tags discussed below relate to text-level tags, that is, they are designed mainly to mark small groups of characters. Some tags can also specify markup at the block level.
Logical text formatting tags
Tag
The tag marks its text as an abbreviation (ABBReviation). Although this tag is included in the HTML 4.0 specification, it is not currently supported by any browser.
Tag
Tag. Just like the tag, it is used to mark abbreviations. It is recommended to use this tag to mark so-called acronyms, i.e. spoken words consisting of abbreviations. The tag may in the future be used for non-visual display of elements, for example, in speech synthesis.
This tag is convenient to use in combination with the TITLE parameter, as the value of which you can specify the full form of the abbreviation. Then visual browsers, when you hover the cursor over text marked with the tag, will display the full name in the form of a tooltip.
Note that the tag is recognized only by the Microsoft Internet Explorer browser. Example:
SPbGITMO - one of the leading technical universities in St. Petersburg
Tag
The tag is used to mark quotes or titles of books and articles, links to other sources, etc. Browsers usually display such text in italics. Example:
Nevskoe Vremya is one of the most popular city newspapers in St. Petersburg
Tag
A tag marks its text as a small piece of program code. Typically displayed in monospace font. This tag should not be confused with the Block-level element tag, which should be used to mark large chunks (listings) of code.
For example:
An example of the simplest operator in the C programming language:
puts("Hello, World!");
There is another difference in the use of tags and In program code, the presence of several consecutive spaces is often important. Their display will only be saved when using the tag.
Tag
The tag marks its text as deleted. This element is useful for marking changes made to a document from version to version. A tag can be used as a text-level element and as a block-level element.
The tag has two optional parameters: CITE and DATETIME. The value of the CITE parameter must be a URL to a document explaining why the fragment was removed.
The DATETIME parameter specifies the deletion date in the format: YYYY-MM-DDThh:mm:ssTZD, which specifies the year, month, day, hours, minutes and seconds of deletion, as well as the time zone (Time Zone). For example:
The latest accepted HTML markup language specification is version 3.2 4.0
Tagged text is usually displayed as strikethrough text. The HTML 4.0 specification gives preference to this tag over the physical formatting tag or the tag, which denotes strikethrough text. However, the tag
Tag
The tag marks its text fragment as a definition (DeFinitioN). For example, this tag can be used to mark a term when it appears in the text for the first time. Example:
Internet Explorer is a popular Web browser
The tag is only supported by Microsoft Internet Explorer. Displayed in italics by default.
Tag
The tag marks its text as an insertion (INSertion). This element is useful for marking changes made to a document from version to version. A tag can be used as a text-level element and as a block-level element.
The tag has two optional parameters: CITE and DATETIME. The value of the CITE parameter must be a URL to a document explaining the details of the additions made.
The DATETIME parameter specifies the date of insertion in the format: YYYY-MM-DDThh:mm:ssTZD, which specifies the year, month, day, hour, minutes and seconds of insertion, as well as the time zone (Time Zone).
Text tagged with is usually displayed as underlined text. The tag is currently only recognized by Microsoft Internet Explorer.
Tag
Tag (EMphasis - highlighting, underlining) is used to highlight important text fragments. Browsers typically display this text in italics. Example:
Example of highlighting individual words of text
.
Tag
The tag marks text as being entered by the user from the keyboard. Typically displayed in monospace font, for example:
To launch a text editor, type: notepad
The use of this tag is preferable to the use of the physical formatting tag.
Tag
The tag marks short quotes in a line of text. Unlike a block-level tag, the display does not separate marked-up text with blank lines. Typically displayed in italics. The tag (unlike ) is currently only recognized by Microsoft Internet Explorer.
The tag has a CITE parameter, the value of which can be the source of the quote.
Tag
The tag marks the text as a sample (SAMPle). A common use of this tag is to mark text output from programs (sample output). It is also used to highlight multiple characters in a monospace font.
The use of this tag is preferable to the use of the physical formatting tag. For example:
As a result of the program's operation, the following will be printed: Hello, World! .
Tag
The tag is usually used to highlight important text fragments. Browsers typically display this text in bold font. Example:
St. Petersburg is located at the easternmost tip of the Gulf of Finland at the mouth of the Neva River< /STRONG>
The use of this tag is preferable to the use of the physical formatting tag. The tag usually marks more important fragments of text than those marked with the tag.
Tag
The tag marks the names of program variables. Typically this text is displayed in italics. Example:
Set the value of variable N
A display of some of the examples given in describing logical text formatting tags is shown in Figure. 1.1. The figure shows how when you hover the mouse over text marked with the tag, a tooltip is displayed.
Rice. 1.1. Text formatting examples
You've probably noticed that some elements give the same result. Moreover, some elements may not change the presentation of a piece of text on the screen in any way. A legitimate question may arise: why was such a variety of formatting elements created?
The answer is in the name of this group of elements. They are designed to place logical emphasis, highlight logical parts and emphasize the essence of statements. Their use is very relevant, since, probably, in the near future the capabilities of browsers will increase, for example, it will become possible to search for citations on the Web, and maybe the next generation of browsers will learn to read documents aloud. In addition, nothing prevents document authors today, using style sheets, from setting the desired display for any of the tags, overriding the default values.
Physical text formatting tags
Here is a description of physical formatting tags. Some of them are not recommended for use by the HTML 4.0 specification for the reasons given above. Some tags have been deprecated by the HTML 4.0 specification, but they continue to be supported by browsers.
Tag
The tag displays text in bold font. In most cases, it is recommended to use a logical formatting tag instead of a tag. For example:
This is a bold font.
Rice. 1.2. Examples of physical text formatting (Netscape browser)
Tag
Tag displays text in italics. For most cases, it is recommended to use the , , or tags instead of this tag, since the latter better reflect the purpose of the selected text. For example:
Selection italics
Tag
The tag displays text in a monospace font. For most cases, it is better to use the , or tags instead of this tag. Example:
This is a monospace font.
Tag
Tag displays text underlined. Canceled tag. It is recommended to use or tags instead. For example:
Example underscores text
Tags and
Tags display text with a horizontal line through it. Canceled tag. The tag should be used instead. For example:
Example of strikethrough text.
Currently, the tag is not supported by all browsers, so for now it is recommended to use it in combination with the tag. Namely, you can put a couple of tags inside a container tag
... .
Tag
The tag displays text in a font larger (than the untagged part of the text) size. Instead of this element, it is better to use heading tags, for example,
Larger font size.
Tag
The tag displays text in a smaller font size. Since there is no tag in HTML that is opposite in effect to the tag, the tag can be used for these purposes. Most browsers support nested tags, but this approach is not recommended. For example:
Smaller font size.
Tag
The tag moves text below the line level and displays it (if possible) in a smaller font size. Convenient to use for mathematical indices. For example:
Example font for subscript.
Tag
The tag moves the text above the line level and displays it (if possible) in a smaller font size. Convenient to use for assigning powers of numbers in mathematics. For example:
Example font for superscript.
Tag
The tag displays blinking text. This tag is not part of the HTML specification and is only supported by the Netscape browser. Experienced developers rarely resort to using this tag, since the presence of blinking characters on the page annoys many users.
Tag
A container tag is analogous to a block level tag. Can be used when you need to mark a piece of text to set its properties, and cannot use any other structural formatting tag.
The Microsoft Internet Explorer browser additionally allows the use of the following tag parameters: DIR, DATAFLD, DATAFORMATAS, DATASRC. A description of the parameters can be found in the second part of the book.
Rice. 1.3. Using nested text formatting tags
Formatting tags can be nested inside each other. In this case, you need to carefully ensure that one container is located entirely in another container. In Fig. Figure 1.3 shows an example of nesting an italic element within a bold element. The following HTML code fragment is used:
This is a bold font.
This italics.
And here is the text bold and italic
Tag
The tag specifies the font parameters. It refers to text-level physical formatting tags.
Assigning font parameters directly in the document text violates the basic idea of separating the content of the document and describing the form of presentation of the document. Therefore, in the HTML 4.0 specification this tag, as well as the tag, are classified as deprecated. Their further use is not recommended.
Despite these dire warnings, it appears that physical formatting can be considered acceptable for the simplest documents. In addition, the easiest way to start learning the basics of formatting is with the rules for directly specifying element formats. A novice developer still has to grow up to style design.
The tag refers to sequential elements and therefore cannot include block level elements, e.g.
Or
Text inside a table cell |
Text after table
The example above overrides the default font size twice. Initially it is 3 (default). Then it is set to 2, then 4. Pay attention to the display of this example (Fig. 1.7). It can be seen that the tag assignment does not work for tables. This is typical for many browsers, although it formally violates the idea of using the tag.
Rice. 1.7. Displaying example WITH TAG (Netscape browser)
Formatting an HTML Document
Dividing into paragraphs
Any text, be it a school essay, a note in a newspaper or a technical description of a device, has a certain structure. The elements of such a structure are headings, subheadings, tables, paragraphs, etc.
One of the first rules for drawing up almost any document is to divide its text into separate paragraphs that express a complete thought. HTML documents are no exception to this rule. When creating documents using text editors, breaking into paragraphs is done by entering a newline character. Most editors implement this when you press the key. In HTML documents, newlines do not create a new paragraph.
HTML assumes that the author of the document knows nothing about the reader's computer. The reader has the right to set any window size and use any of the fonts available to him. This means that where the line hyphen occurs is determined solely by the viewer and the end user's settings. Because line feeds in the original document are ignored, text that looks great in the document's author's editor window may turn into solid, unreadable text in the viewer window.
You can avoid this trouble by using a special paragraph division tag.
Before the beginning of each paragraph of text you should place a tag
Closing tag
not required. Browsers usually separate paragraphs with a blank line.Note
Browsers typically interpret multiple paragraph tags in a row
As one. The same applies to the line feed tag
. Therefore, it is not possible to create multiple empty lines using these tags.
Tag
Can be specified with the horizontal alignment parameter ALIGN. Possible parameter values are given in table. 1.4. The default is left alignment.
Table 1.4. ALIGN parameter values
ALIGN parameter value |
Action |
LEFT |
Align text to the left edge of the browser window |
CENTER |
Align to the center of the browser window |
RIGHT |
Align to the right edge of the browser window |
JUSTIFY |
Justification (on both sides) |
Note that justification (ALIGN = JUSTIFY) has not been supported by browsers for a long time. Many HTML language descriptions specify only three options for alignment parameter values (LEFT, CENTER, and RIGHT). Currently, all popular browsers can perform width alignment. Some problems with creating justified documents are also discussed in Chapter 8.
Note
The lack of justification currently seems surprising. This mode is used very often for printed publications. It is enough to pick up any newspaper or look closely at the paragraphs of this book - they are all aligned in width. However, until recently, justification was not allowed for HTML documents. Just a couple of years ago, no browser had such a mode. Thus, readers who are still using the Netscape browser version 3.x will not be able to see straight lines in the document. You can try to predict what other capabilities browsers will have in the future by comparing the capabilities of powerful text editors and modern browsers. An example of features that have not yet been implemented would be automatic hyphenation, etc.
Line translation
When displaying text documents in a browser, the location of line breaks within a paragraph is determined automatically depending on the size of the fonts and the size of the viewing window. Line breaks can only be carried out using word separator characters (for example, spaces). Sometimes in documents you need to set a forced line feed, which is implemented regardless of the browser settings. This is done using the forced line feed tag.
, which does not have a corresponding closing tag. Enabling a tag
into the document text will ensure that subsequent text is placed at the beginning of a new line. For example, this approach can be used to create list-type structures without using special list markup tags. Or, for example, this tag cannot be used to display poems, etc.
Here is an example of using forced line feed (Fig. 1.8):
Using forced line feed
Over darkened Petrograd
November breathed the autumn chill.
Splashing with a noisy wave
To the edges of your slender fence,
Neva was tossing around like a sick person
Restless in my bed.
A.S. Pushkin. Bronze Horseman
Rice. 1.8. Tag
can be used to force a line feed
Unlike the paragraph tag
When using the tag
an empty string will not be generated.
Using a tag
requires caution - it is possible that the browser has already made a line break one or two words before it encountered your tag
. This happens if the reader's viewer window width is smaller than the same setting of the program with which you tested your document. In this case, it may turn out that only one word remains on a line in the middle of a paragraph, thereby ruining the beauty of the document layout.
Note
When using the tag
To break text around an image or table, you can set the CLEAR parameter to stop text wrapping. You can read about this in chapters 3 and 4.
Tags u
There are situations when you need to perform the opposite operation - disable line feed. There is a container tag for this. Text marked with this tag is guaranteed to be on one line, regardless of its length. If the resulting line extends beyond the browser's viewing window, a horizontal scroll bar will appear.
Note
To ensure the continuity of text located in table cells, there is a special parameter of the NOWRAP tag
By marking up text using the non-breaking line tag, you can get very long lines. To avoid this, you can indicate to the reader's browser the location of a possible line feed, which will be performed only when necessary (the so-called "soft" line feed). This can be done by placing a tag (Word BReak) in the right place in the text, which is the same as the tag
, does not need a closing tag.
Note
The tag is not supported at all by the Netscape browser. The Microsoft Internet Explorer browser recognizes this tag only in text marked with tags.
Headings inside an HTML document
Along with the title of the entire document, a Web page can use headings for individual parts of the document. These headings can have six different levels (sizes) and are pieces of text that stand out on the screen when the browser displays the page.
The tags , , , , and are used to mark up headings. These tags require a corresponding closing tag. Heading number 1 is the largest (top-level heading), and heading number 6 is the smallest. Heading tags are block-level elements, so they cannot be used to mark up individual words of text to increase their size. Heading tags insert a blank line before and after the heading, so no paragraph or line break tags are needed.
Heading tags can be specified with the horizontal alignment parameter ALIGN. Possible values of the parameter are the same as the alignment parameters of the paragraph tag
(see table 1.4).
An example of using headings of different levels with different alignment (Fig. 1.9):
Heading examples
Heading size 1
Heading size 2
Heading size 3
Heading size 4
Heading size 5
Heading size 6
Body of the document
Rice. 1.9. Display headings in different sizes
Horizontal lines
Another method of dividing a document into parts is to draw horizontal lines. They visually emphasize the completeness of a particular area of the page. Nowadays, a raised, pressed line is often used to indicate the “volubility” of a document.
The tag allows you to draw a raised horizontal line in the window of most viewing programs. This tag is not a container, so it does not require a closing tag. A blank line is automatically inserted before and after the line. Tag parameters are presented in table. 1.5.
Table 1.5. Tag options
Example:
This example sets a horizontal line that takes up half the width of the viewport and is positioned in the middle of the window. Note that the alignment options only make sense when the line does not occupy the entire width of the window.
Note
The Netscape browser does not allow the COLOR tag parameter.
Using preformatted text
As you can see in the sections above, special tags should be used to break up text into paragraphs and force a line break. However, there are times when it is necessary to include text in an HTML document that already has formatting done in the traditional way using newlines, the required number of spaces, tab characters, etc. To solve such problems, a special container tag is provided Defining pre-formatted ( n reformatted) text.
The text marked with the tag will be displayed as it looks in a regular text editor. A monospaced font will always be used for display. This will give you more control over the document viewer's output, although at the expense of some flexibility.
One of the options for using this tag is tables built without using special table markup tags. Other important
The application is to display large blocks of program code (Java, C++, etc.) on the screen, preventing the browser from reformatting them.
Text inside a container Can contain text-level formatting except the following: , , , , , , , , . It is not acceptable to include block-level formatting elements, such as heading tags, within preformatted text. The paragraph tag, logically, should also not occur inside preformatted text, but if it does, it will implement a new line transition (without creating an empty one).
Note
The tag has an optional WIDTH parameter, the purpose of which is to tell the browser the maximum length of a line of preformatted text. Depending on this value, the browser could select the desired font and/or indentation to optimally display the preformatted text. The default value has been suggested to be 80. Other recommended values are 40 and 132. Note that for readers with significant computing experience, these numbers speak volumes. In fact, modern browsers ignore the WIDTH parameter.
There are several more tags that solve a similar problem. These include the , AND tags. All three of these tags are marked as deprecated in the HTML 4.0 specification. This means that browsers will no longer support them in future versions. It is recommended to use the tag instead of these tags.
Tag
A container tag is a block-level element that serves to highlight a fragment of a document. The purpose of this selection is to control the parameters of this fragment, which is usually done by assigning styles. Here's an example:
(Document fragment)
In this example, a fragment of an HTML document is framed with tags to set some of its properties. In this case, all text elements of the selected fragment will be displayed in green. An analogue of a text level tag is the element.
Note that it is not advisable to use direct assignment of style properties of a separate fragment, as is done in the example, in accordance with the concept of separating the structure of the document and its presentation. You should use style sheets, which will be discussed in the second part of the book.
Tag
The container tag is designed to horizontally align all elements in the middle of the browser viewport. It is block level and is useful for centering elements such as tables, since they cannot be centered by assignment
ALIGN=CENTER tag