As you know, the main content of Web pages is text. With the rare exception of special gallery sites. Therefore, it is not surprising that HTML has so many different text display controls.
In fact, in order to display a text string in the browser viewing window, you do not need to use any tags: You just need to write the text itself. But when you need to break it up at least into paragraphs, this is where you need to use tags. The fact is that different computer systems use different characters to break up text into paragraphs, and HTML documents should always be displayed as uniformly as possible on a wide variety of computer platforms. That's why we had to introduce tags to designate paragraphs.
At the beginning of each paragraph there is a tag , and at the end, the closing tag . At the same time, the tag naturally has some parameters. These include the general identification parameters already known to us class And id, styling parameter style, which we will look at in the second chapter, and the alignment-parameter align. We should talk about the last parameter in a little more detail.
In HTML, the term "alignment" refers to both the horizontal and vertical positioning of an element. But in the case of paragraphs of text, it makes sense to talk only about horizontal alignment or, as it is also called, “justification”.
Justification allows you to press a paragraph to the left or right edge of the browser viewport, center it, or stretch words so that the text evenly fills the entire width of the space allocated to it. For these purposes the values are used left, right, center And justify, respectively. Let's consider their use using the example of another HTML document.
Listing 1.4
Horizontal alignment a63acev
Paragraph pressed to the left edge
Paragraph pressed to the left edge
Centered Paragraph
Paragraph stretched across width
The result of viewing a file with such code using the Internet Explorer browser is shown in Fig. 1.4. As you can see, the last paragraph, which according to our code should have been stretched in width, is displayed by Internet Explorer in the same way as the first. This case can serve as a clear example of how browsers perceive HTML code differently. In our case, Internet Explorer simply ignored the unknown parameter, using the standard display option.
Rice. 1.4. Browser window showing the result of the file shown in Listing 1.4
Sometimes, in order to further separate one paragraph from another, Web page creators try to use blank paragraphs, that is, there is nothing between the paragraph's start and end tags. According to the specifications, browsers should simply ignore such constructs. Therefore, to separate paragraphs or force a line break within one paragraph, you should use the tag
. This is a directive tag. It simply marks the place where the display needs to be moved to another line. An example of how this tag can be used to achieve both of these goals is shown in the HTML document whose code is shown in Listing 1.5.
Listing 1.5
"http://www.w3.org/TR/html4/strict.dtd">
.
Forced line breaks
The paragraph that we
Forced torn apart
Next paragraph
Paragraph after forced break
And what this file looks like when viewing it using a browser is shown in Fig. 1.5.
Rice. 1.5. Browser window showing the result of the file shown in Listing 1.5
Tag
in addition to the general identification parameters, it also has the parameter clear, which is used to more accurately align text when it wraps around an object, such as a graphic embedded in a Web page. The value of this parameter can be one of four predefined keywords: none, left, right, all.
The value none is the default and indicates that the next line will begin where it would normally begin without this parameter. Meaning left indicates that the next line will begin at the left margin of the text-wrapped object. If you need to use the right margin for these purposes, then you should use the value right. And the meaning all tells the browser that it can use both the left and right margins of the object, as long as the text is displayed as compactly as possible.
Now let's move on to considering the font design of the text. At any point in a paragraph, we can use a tag with a certain set of parameters, which will determine the appearance of the font that will be used to display the text located after this tag. Termination of this tag is carried out using its closing pair .
Tag has the following parameters inherent to it: size, used to indicate the size of the font to be used, color- to set the color of font characters, and face, indicating which font will be used to display text. Let's look at these parameters.
As we just said, the size parameter is used to specify the size of the characters in the font used. The values for this parameter are numbers from one to seven. They indicate a certain relative size of characters. The fact is that in HTML you cannot set the absolute size of characters in points, as we are used to doing in regular office applications. The user will be viewing a Web page on his computer, and we do not know in advance what fonts he may have installed and what sizes are available. Therefore, we can only specify the relative font size, and the user’s browser itself will select the most appropriate size.
We can also specify a change in font size as the value of the size parameter. For example, to increase the font size by one level, use the following construction:
And to reduce the size of characters by two levels, use the following code:
However, to use such structures it is necessary to start from a certain basic size. To set this size, use the tag with the same parameter size. If this tag is not used, then the third level will be used as the base character size. Let's give an example of using these tags.
Listing 1.6.
Symbol size
Character styles
The text is bold or italic
And maybe at the same time bold and italic
Happens emphasized and uncrossed out.
or monospace.
We can increase and decrease the size of characters.
As you can see from the example, we can combine different styles with each other. But you should be careful in the order in which you place the tags. Opening and closing tags must both nest within other tags that were previously applied. An example of this can be seen in the tenth line of the listing. And what this HTML document looks like when viewed using a browser is shown in Fig. 1.7.
We looked at the ways in which various text display parameters are set. However, HTML provides a few basic ways to display text that don't need to be specified with a whole bunch of tags. They have their own tags, that is, certain categories of text are defined that are displayed in a predefined way. All of these categories are most often used in the scientific and computer industries. Let's list them.
- A term is highlighted in the text using a pair of tags and .
- "Enhanced" highlighting, designed to further attract attention, is created using a tag and its closing twin.
- Using and tags, it is indicated that the text located between them is a quotation.
- The definition of a certain term is highlighted using tags and .
- A pair of tags is used to highlight source code in any programming language.
- Text information output by the program is formatted using AND tags.
- Text entered by the user is indicated by and tags. P Variables in the source code of programs are designated using a pair of tags and .
- Tags and highlight abbreviations.
- And established letter combinations that are not abbreviations, i.e. acronyms, are highlighted with tags and .
However, it is not enough to know the names of the tags; you also need to clearly understand how exactly they format the text. And here you can’t do without an example.
Rice. 1.7. Browser window showing the result of the file shown in Listing 1.7
Listing 1.8
Standard Display Options
This is normal text
This is a selection. And More noticeable highlighting
This is a quote and this is a definition.
We can write program code, text, by the user,
output text and non-variables
This is how abbreviations are displayed. And so - acronyms.
The result of displaying such an HTML document is shown in Fig. 1.8.
Rice. 1.8. Browser window showing the result of the file shown in Listing 1.8
Very often there is a need to place text on a Web page that has been prepared in advance using some text editor that has already independently formatted the text. In this case, the format of the text, its hyphens and placement directly depend on the length of the line in characters that was set in this text editor. If text is placed on a Web page using conventional means, this formatting will naturally be broken. Therefore, a custom tag was introduced for these pre-formatted snippets. This tag has a width parameter, the value of which is the length of the line in characters. Naturally, it is advisable to force the exact font that was used when formatting the text before using this tag. So, to insert pre-formatted text, we can use the following code snippet:
text.
In this example, we specify that the text should be displayed based on the assumption that the line is sixty characters long. However, in pre-formatted text, the rules for “collapsing spaces” also do not apply. The fact is that when the browser encounters several consecutive spaces in the plain text of a Web page, it collapses them into one space. But pre-formatted text does not undergo such a transformation, which allows it to preserve its formatting, which in the simplest text editors is carried out using whitespace characters. In HTML, by the way, the tab character is also considered a space character.
It should also be noted that HTML provides the ability to use tags to display upper quotation marks, which are usually used to highlight direct speech and some quotations. Quotes are provided with a tag with its ending twin . And to frame direct speech, tags and are usually used. At the same time, the tag has the cite parameter, the value of which is the network address, also called URL, of the Internet resource on which the quoted text was originally located. And together with the tag, the lang parameter is usually used, the value of which is the code designation of the language, according to the punctuation rules of which the limiting quotes are placed. It's no secret that different languages use different quotation marks.
The problem of transfers should also be mentioned. Typically, Web page creators don't even think about this problem, and browsers don't deal with word wrapping. If a word does not fit on a line, it is simply moved to another line. But this is not the only correct way to display text. A situation may well arise when you need to display text using word hyphenation. HTML provides two types of hyphens - explicit and so-called "soft". Explicit hyphenation is created using the en dash character, usually replaced by numeric text substitutions "-". However, explicit hyphenation is inconvenient because when the browser window is resized, the length of the line may change, but the hyphenation mark will still remain visible. Even if it is in the middle of the line. Therefore, they often use “soft” transfers. They are created using the text substitution "-". In this case, soft hyphen symbols are not visible in the text, and only in the case when any word into which these symbols were inserted does not fit entirely in the line, it is hyphenated, broken down into syllables, according to the inserted “soft” hyphens. And only one of the soft hyphenation symbols in this word becomes visible.
HTML also allows you to display superscripts and subscripts using its tags. A pair of and tags is used to create a superscript, and a subscript must be surrounded by and tags. Let's look at an example of using these tags.
Listing 1.9
Bepx and subscripts
Water is H20
Ratio of mass and energy - E = mc2
How exactly the browser displays indexes is shown in Fig. 1.9.
Rice. 1.9. Browser window showing the result of the file shown in Listing 1.9
Text design also includes horizontal lines, which often separate significant parts of the text content of Web pages. A line is inserted into the text of an HTML document using the tag. The tag has several parameters that allow you to fine-tune the appearance of the horizontal line.
The align parameter allows you to specify the horizontal alignment of the line. The parameter can have one of three preset values: left, right and center, which push the horizontal line to the left or right edge of the viewport, or center it, respectively. The default value is center. If the tag includes the noshade parameter, then the displayed horizontal line will not have a shadow. And the last width parameter allows you to set the length of the horizontal line. The default value is "100%". And the line height in pixels is set using the size parameter. Let's look at the use of all these parameters using an example.
Listing 1.10
This is a normal line displayed by default
This is a shortened line pressed to the left
This is a shortened line located in the center
This is a shortened line pressed to the right
This is a thick line without a shadow
What such an HTML document looks like when viewed using a browser is shown in Fig. 1.10.
And here, perhaps, we can finish our consideration of the text formatting capabilities inherent in HTML.
Rice. 1.10. Browser window showing the result of the file shown in Listing 1.10
This article does not pretend to be a full-fledged reference book on html tags, but if you are interested in the topic, then I suggest you understand the meaning of most of the tags we need to highlight text.
Most often, the text on the page is highlighted in bold or italics. For this there are special tags and (highlighted in bold), as well as (in italics). All of them are paired, that is, the necessary words must be placed between the opening and closing tags. It would seem, why did they come up with two tags for the same action?
In fact, in html they perform not only a design role, but also a semantic one. So, the b tag simply makes the tag bold without giving it more meaning, but strong, in addition to simple highlighting, also gives the words special importance. Therefore, this tag should not highlight half the text, but should be used wisely.
CSS also has properties that have the same effect as the tags listed. For example, the font-weight: bold property makes the text bold, and the font-style: italic property makes it italic.
Underlining and striking out textThere are also tags for underlining and striking through. underlines words and crosses them out. To achieve the same effect via css, use the text-decoration property. It has several meanings:
Underline – underline from below;
Overline – underline at the top;
Line-through - strikethrough;
And yet, for this property, you can specify several values separated by a space. In fact, you could even give him all three types of underscores, but I don’t see the point in that.
HTML 5 introduced another tag - mark, which allows you to simply highlight text. By default it is highlighted in yellow, although via css you can easily override this and create a custom highlight that matches your site's design.
Displaying text in superscript and subscriptWe figured it out a little, but what if you need to write a formula or something else where you need to display some numbers or letters in the upper or lower index. Of course, html provides us with the necessary tools for this. The sub tag displays the font as a subscript and the sup tag as a superscript. This can also be done via css. To do this, you need to write the required text:
vertical-align: sub | super
vertical - align : sub | super |
Font-size: font size slightly smaller than regular text
How to style text using CSS?If you need to style a font using css, then you need to somehow access it using a selector. It’s one thing if you need to highlight an entire paragraph or link, then you have a selector, but what if you need to highlight one word somewhere in the middle of the article? There is a wonderful paired span tag for this, which does not affect the appearance of its content in any way and does not give it any meaning.
Accordingly, we enclose the fragment you need for design in a span, bind an arbitrary style class to it and write styles without any problems!
Output text preserving spaces.In html there is a pre tag, which allows you to display information as written in a text editor. This can be useful if you are writing a poem or need to add a few spaces. You can also control text formatting through CSS. There is a white-space property for this. Its meanings:
Nowrap – words are displayed on one line without hyphens. If they do not fit into the line, horizontal scrolling will appear.
Pre – acts similarly to the pre tag
Pre-wrap - similar to the previous value, but automatically wraps the text on a new line when it no longer fits (perhaps the best value)
Text alignmentWe've already covered some HTML tags for text, but it's also worth mentioning alignment. It is set not by tags, but through the text-align CSS property:
Right – on the right edge.
Left - to the left.
Center – in the center (for example, for headings)
Justify – in width. This value means that the words in the line will be stretched to take up the entire width of the line.
Text color and backgroundAgain, this can no longer be set using html tags, but it can be done via css. We again come to the conclusion that using tags to edit html text is not very convenient. For the color of the text itself, there is a color property that has many meanings. The color can be specified either using keywords (orange, black, red) or by explicitly specifying the color mode: color: rgb(130, 100, 12). The background is set in exactly the same way, but only using the background property.
Text size and fontThe Font-size property specifies the font size, and the font-family property allows you to select the font itself or its family. For example.
HTML tags are the basis of the HTML language. Tags are used to delimit the beginning and end of elements in markup.
Each HTML document consists of a tree of HTML elements and text. Each HTML element is identified by a start (opening) and ending (closing) tag. The opening and closing tags contain the name of the tag.
All HTML elements are divided into five types:
- empty elements - , ,
, , , ,, ,
Used to store additional information about the page. This information is used by browsers to process the page, and by search engines to index it. There can be several tags in a block, since depending on the attributes used they carry different information. Indicator of measurement in a given range. A section of a document containing navigation links for the site. Defines a section that does not support scripting. Container for embedding multimedia (e.g. audio, video, Java applets, ActiveX, PDF and Flash). You can also insert another web page into the current HTML document. The tag is used to pass the parameters of the plugin. Ordered numbered list. Numbering can be numeric or alphabetical. A container with a title for a group of elements. Specifies an option/option to select from the , or , drop-down list. Field for displaying the result of a calculation calculated using the script. Paragraphs in the text. Defines parameters for plugins embedded using the element. A container element containing one element and zero or more elements. By itself it does not display anything. Allows the browser to select the most appropriate image.
Outputs text without formatting, preserving spaces and text breaks. Can be used to display computer code, email messages, etc. An indicator of the completion of a task of any kind. Defines a short quotation. Container for East Asian symbols and their decoding. Defines its nested text as the base component of the annotation. Adds a brief description above or below the characters contained in the element, displayed in a smaller font. Marks embedded text as additional annotation. Displays alternative text if the browser does not support the element. Displays text that is not current with a strikethrough. Used to display text representing the result of program code or script execution, as well as system messages. Displayed in monospace font. Used to define a client-side script (usually JavaScript). Contains either script text or points to an external script file using the src attribute. Defines a logical area (section) of a page, usually with a header. A control element that allows you to select values from a proposed set. Variant values are placed in . Displays text in a smaller font size. Specifies the location and type of alternative media resources for the , , . Container for inline elements. Can be used to format passages of text, such as highlighting individual words with color. Places emphasis in the text, highlighting it in bold. Includes embeddable style sheets. Specifies subscript writing of symbols, for example, element index in chemical formulas. Creates a visible title for the tag. Displayed with a filled triangle, clicking on it allows you to view the title details. Specifies the superscript spelling of characters. Tag for creating a table. Defines the body of the table. Creates a table cell. Used to declare HTML code fragments that can be cloned and inserted into a document by a script. The content of a tag is not a child of it. Creates large text input fields. Defines the table footer. Creates a table cell title. Defines the table title. Defines date/time. The title of an HTML document that appears at the top of the browser's title bar. May also appear in search results, so this should be taken into account when providing a title. Creates a table row. Adds subtitles for elements and . Highlights a passage of text by underlining, without additional emphasis. Creates a bulleted list. Highlights variables from programs by displaying them in italics. Adds video files to the page. Supports 3 video formats: MP4, WebM, Ogg. Indicates to the browser where a long line might break. For ease of use, I grouped the tags into thematic sections, adding display property values for each tag. To go to the table, click on the picture.
Whenever possible, explain your code where necessary.Use comments to explain your code: what it does, what it does, and why the solution you choose is being used.
(This point is optional because there is no point in expecting code to always be well documented. The usefulness of commenting depends on the complexity of the project and may differ for HTML and CSS code.)
Tasks Check off tasks for your to-do list using TODO.Mark tasks using the TODO keyword. Don't use other commonly used formats such as @@ .
Enclose contacts (username or mailing list) in parentheses: TODO(contact) .
Describe the task after a colon, for example: TODO: Task.
Recommended: (# TODO(Ivan Ivanov): Deal with alignment #) Test
Recommended:- cucumbers
- Tomatoes
(It is recommended to use HTML with the text/html content type. Do not use XHTML, as application/xhtml+xml has poor browser support and limits optimization options.)
HTML Validity Use valid HTML whenever possible.Use valid HTML code unless usage does not allow you to achieve the file size required for the desired level of performance.
W3C HTML validator (English) to check the validity of the code.
Validity is an important and measurable quality of code. Writing valid HTML promotes learning of technical requirements and limitations and ensures proper use of HTML.
Not recommended: Check Just check
Semantics Use HTML as it was intended.
Recommended: Check Just a check.Use elements (sometimes incorrectly called “tags”) for their intended purposes: headings for headings, p for paragraphs, a for links, etc.
This makes the code easier to read, edit, and maintain.
Alternative Media Always include alternative media content.Try to provide alternative content for media, such as images, videos, or animations defined using canvas. For pictures, this is a meaningful alternative text (alt), and for video and audio, a transcript of the text and caption, if possible.
Alternative content may help people with disabilities. For example, it is difficult for a person with low vision to understand what is in the picture if @alt is not set for it. Other people may have difficulty understanding what is being said in a video or audio recording.
(If the image's alt is redundant, or it's just being used for decorative purposes in places where CSS can't be used, use an empty alt text alt="" )
Separation of responsibilities Separate structure, design and behavior.Keep structure (markup), appearance (styles), and behavior (scripts) separate and try to keep interactions between them to a minimum.
Make sure that documents and templates contain only HTML, and that HTML only serves to define the structure of the document. Move all the code responsible for design into style files, and the code responsible for behavior into scripts.
Try to reduce their intersections to a minimum by including a minimum number of style files and scripts in your templates.
Separating structure from presentation and behavior helps make code easier to maintain. Changing templates and HTML documents always takes longer than changing style files or scripts.
Not recommended: HTML sucks HTML Sucks
I read about this somewhere before, but now everything is definitely clear: HTML is complete garbage!!1 I can't believe that in order to change the design, you have to redo everything all over again every time.
Recommended: My first CSS-only redesign My new CSS designI read about this before, but finally I did it myself: I use the principle of separation of concerns and do not shove the design into HTML
How cool!
Mnemonic links Do not use mnemonic links.The only exception to this rule is HTML service characters (for example< и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).
Optional Tags Do not use optional tags. (not necessary)To reduce file size and improve code readability, you can omit optional tags. The HTML5 specification has a list of optional tags.
(It may take some time for this approach to become widely used because it is very different from what web developers are typically taught. From a consistency, code, and simplicity standpoint, it is best to omit all optional tags rather than some them).
Not recommended: We waste bytes - we waste money.
Recommended: Bytes are money!So that
"type" attribute Do not specify the type attribute when adding styles and scripts to a document.Do not use the type attribute when connecting styles (except when using something other than CSS) and scripts (except when using something other than JavaScript).
Specifying the type attribute in this case is not necessary because HTML5 uses text/css (English) and text/javascript (English) by default. This will work even in older browsers.
Not recommended:
HTML Formatting RulesFormatting Create a new line for each block, table, or list element and indent each child element.
Recommended:
Not recommended:
Recommended:Regardless of the styles specified for the element (CSS allows you to change the behavior of the element using the display property), wrap each block or table element on a new line.
Also, indent all elements nested within a block or table element.
(If you have trouble with whitespace between list elements, you can put all the li elements on one line. It is recommended that Lint issue a warning instead of an error in this case.
Recommended:- Masha
- Glasha
- Cheburash
Recommended:
CSS Style Rules CSS Validity Use valid CSS code whenever possible.Profit Taxes $ 5.00 $ 4.50 Except in cases where browser-dependent code is required, or validator errors, use valid CSS code.
Use tools like the W3C CSS Validator to validate your code.
Validity is an important and measurable quality of code. Writing valid CSS helps eliminate redundant code and ensures proper use of style sheets...
Class Identifiers and Names Use wildcard or meaningful class names and identifiers.Instead of using codes or describing the appearance of an element, try expressing the meaning of its creation in the name of a class or identifier, or give it a template name...
Wildcard names are simply variant names for elements that have no special purpose or are indistinguishable from their siblings. They are usually needed as “Helpers.”
Using functional or template names reduces the need for unnecessary changes to the document or templates.
Deprecated: /* Deprecated: meaningless */ #yee-1901 () /* Deprecated: description of appearance */ .button-green() .clear()
Identifier and Class Names For identifiers and classes, use names that are as long as necessary but as short as possible.
Recommended: /* Recommended: precise and to the point */ #gallery () #login () .video () /* Recommended: template name */ .aux () .alt ()Try to formulate what exactly this element should do, while being as brief as possible.
This use of classes and identifiers contributes to making the code easier to understand and more efficient.
Type selectors Avoid using class names or identifiers with element type (tag) selectors.Unless absolutely necessary (for example with helper classes), do not use element names with class names or identifiers.
Shortcuts for properties Use shortcuts for properties whenever possible.CSS offers many different shorthand forms (such as font ), which are recommended to be used wherever possible, even if only one of the values is specified.
Using shorthand property notation is useful for greater efficiency and better understanding of your code.
Not recommended: /* Not recommended */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
0 and units Do not specify units for zero values
Recommended: /* Recommended */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;Do not specify units for zero values unless there is a reason to do so.
0 in the whole part of a fraction Do not put “0” in the whole part of fractions.Do not put 0 in the integer part in values between -1 and 1.
Quotes in links Do not use quotes in linksDon't use quotes ("" , "") with url() .
Hexadecimal color names Use three-character hexadecimal notation whenever possible.The three-character hexadecimal notation for colors is shorter and takes up less space.
Prefixes Prefix selectors with prefixes unique to the current application. (not necessary)In large projects, as well as in code that will be used for other projects or on other sites, use prefixes (as namespaces) for identifiers and class names. Use short, unique titles followed by a hyphen.
Using namespaces helps prevent name conflicts and can make your site easier to maintain. For example, when searching and replacing.
Separators in classes and identifiers Separate words in identifiers and class names using a hyphen.Avoid using anything other than a hyphen to connect words and abbreviations in selectors to improve readability and ease of understanding of your code.
Not recommended: /* Not recommended: the words “demo” and “image” are not separated */ .demoimage () /* Not recommended: underscore is used instead of a hyphen */ .error_status ()
Hacks Avoid using browser version information or CSS hacks - try other methods first.
Recommended: /* Recommended */ #video-id().ads-sample()It can be tempting to combat browser differences with CSS filters, hacks, or other workarounds. All of these approaches should only be considered as a last resort if you want an efficient and easily maintainable codebase. Simply put, allowing hacks and browser detection will hurt the project in the long run, as it means the project is taking the path of least resistance. Which makes it easier to use hacks and allows them to be used more and more often, which will result in them being used too often.
CSS Formatting RulesOrdering Ads Sort ads alphabetically.Define declarations in alphabetical order to ensure consistent code that's easy to work with.
When sorting, ignore browser prefixes. Moreover, if several browser prefixes are used for one property, they must also be sorted (for example -moz should be before --webkit)
Indents in blocks. Always indent block content.Always indent any block content, such as rules within rules or declarations, to show hierarchy and make the code easier to understand.
After declarations Place a semicolon after each declaration.Use a semicolon after each declaration for code consistency and to make it easier to add new properties.
After property names Use spaces after colons in declarations.Always use one space after the colon (but not before) in declarations, for order in the code.
Separating selectors and declarations Separate selectors and declarations with a line break.Start each selector or declaration on a new line.
Separating rules Separate rules with line breaks.Always put a line break between rules.
Meta rules CSSGrouping rules Group rules and indicate groups with a comment. (not necessary)Whenever possible, group rules together. Indicate groups with comments and separate them with line breaks.
Conclusion Be consistentIf you're editing code, take a few minutes to understand how it's written. If mathematical operators are separated by spaces, do the same. If comments are surrounded by parentheses or dashes, do the same with your comments.
The idea of this guide is to create a common vocabulary that allows developers to focus on what they want to express, rather than how.
We offer uniform design rules that allow you to write code in the same style, but the code style already used in the project is also important.
If your code is very different from existing code, it can throw off the reader's rhythm and make it difficult to read. Try to avoid this.
Note from the translator I would also like to note that Google primarily focuses on large, high-load projects, where every byte is expensive, so it is worth considering that if they recommend starting each selector on a new line, or using spaces instead of tabs, then this primarily implies , that the code will necessarily be minified and compressed before use on the site.Thanks to everyone who read this far.
Tags:
- css
- html
- styleguides
Introduction
The guide is intended to help beginning web developers and bloggers. The tools offered are HTML tags (HyperText Markup Language, the standard markup language for documents on the Internet) and CSS formatting options (Cascading Style Sheets, a formal language for describing the appearance of a document written using a markup language). CSS formatting options are built into HTML tags using the STYLE attribute.
If this reminder is not enough for you, we recommend using the HTML and CSS reference books.
* The memo is based on materials from alex_inside.
Font formatting
Basic tags for working with text:
A regular paragraph with an indent at the bottom.
* You can use other tags with tags, such as , , etc.
* Inside the tagYou can use attributes to change properties, such as align, style, etc.
Text whose properties can be changed using a style.
A limited area where you can change properties (position, borders, padding, content properties, etc.).
* By default, area boundaries are not visible. There can be several areas on one page at once.Text formatting:
Bold text
Italicize text
Underlined text
Strikethrough text
Small font
Large font
Footnote mark above or index below text
Text with hint
Font sizes:
13 point font
15 point font
Font size 9 pixels
Font size 12 pixels
Font size 15 pixels
Font size 2 (can be from 1 to 7)
Font size 4
Font is 1 size larger than usual
Headings:
Level 1 header
Level 2 header
Level 3 header
Level 4 header
Level 5 Header
Level 6 header
Possible font size options (visual assessment) are available.
Formatting text using fonts:
Comic Sans Ms font
Font Monotype Corsiva
Tahoma, 13 pixels
Possible options for font types (names and visual rating) are available.
Decorating text using color:
Blue text
* The number #0000ff means blue in the RGB palette.Red text
* You can use standard verbal designations for colors: Red, Green, Blue, etc.Blue background
* The background color can also be changed. Note that the style attribute uses CSS syntax.Blue text, gray background
Some predefined colors:
Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuffSome colors in hex code are the intensity of red, green and blue (RR GG BB):
#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEE EE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF
Possible options for the color palette and their codes/names are available.
Text design using shadow/highlight:
The text-shadow property has four parameters: X Y amplitude color .
X - horizontal offset of the shadow/highlight to the text. A positive value is an offset to the right, a negative value is an offset to the left.
Y - vertical offset of the shadow/highlight to the text. A positive value is a downward shift, a negative value is an upward shift.
Amplitude - the higher the value, the greater the degree of blur.
Color - dark colors will give a shadow, light colors will give a “highlight”.Examples of using:
Only a shadow
Tahoma with shadow
Tahoma with outline
Tahoma depressed
Tahoma volumetric
Tahoma neon
Tahoma neon
Tahoma neon
Tahoma, many shadesAligning text and formatting paragraphs
Text alignment:
Align text left
Center text alignment
Centered text
Align text to the right
Align texts on both sides - for texts longer than one line
Option to align texts on both sides using CSS formatting option
Formatting footnotes (comments) with paragraph indentation:
Text quoted in a separate block
which will have a slight indentation on the left.
Formatting paragraphs and areas:
Embedded, wrapping text around other text, right edged text aligned to the left, with a gray border and an 8 px margin from the outside of the border.
ATTENTION! This block is inserted into the text before (!) the word “Hello!”
Hello! In this paragraph, the first sentence will be from the “red” line, i.e. indented. Just like in book printing. True, this is a rare practice on the Internet. Paragraphs should be separated by simply blank spaces.
Preformatted text maintains indentation on the left and between words and sets the indentation you specify with spaces. Warning! The tag does not automatically break the line!
with right alignment.
Text on the right edge in two lines,
with left alignment.
< br clear="all" >Line running to the left.
Line running to the right.
A line running from edge to edge.
Scrolling up
text with useful
information.
Scrolling Down
text with useful
information.
Vertical rewind of large text:
Lorem ipsum dolor sit amet, consectetur adipisicing elite, sed do eiusmod tempor incidentidunt ut labore et dolore magna alicua. Ut enim ad minim veniam, kyus nostrud eksercitatyon ullamko laboris nisi ut aliquip ex ea commodo consecuat. Deuce aute irure dolor in reprehenderit in voluptate velite essay killum dolore eu fugiat nullah pariatur. excepteur sint okkaekat cupidatat non proident, sunt in kulpa kuy officia deserunt mollit anim id est laborum.
Vertical rewind of large text with HTML code:
Text without html, 55 characters wide and 5 lines high.
You can even scroll, cool, right!? But html doesn't work.
But it's better to use the div from the previous example if you just need scrolling...
Leading (line spacing) of text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.Object padding
The boundaries of the areas in the section are made visible (dotted) to assess the indentation.
Top padding area 10 pixels
An area with a left margin of 20 pixels
250px right margin area
An area with a bottom margin of 15 pixels
- One of the list items
- Another such item
- One more point.
* Closing tag not required for use.You can also select different types of lists through the style:
- One of the list items
- Another such item
- One more point.
- One of the list items
- Another such item
- One more point.
List-style-type values for lists:
circle - marker in the form of a circle
disc - marker in the form of a dot
square - marker in the form of a square
decimal - Arabic numbers (1, 2, 3, 4,...)
decimal-leading-zero - Arabic numbers with a leading zero for digits less than ten (01, 02, 03,...)
lower-alpha — lowercase Latin letters (a, b, c, d,…)
upper-alpha - capital Latin letters (A, B, C, D,...)
lower-greek - lowercase Greek letters (α, β, γ, δ,...)
lower-roman — lowercase Roman numerals (i, ii, iii, iv, v,…)
upper-roman - Roman numerals in upper case (I, II, III, IV, V,...)
none—Disables bullets for the list.Images
- example of inserting a picture.
width="200px" > - image width size.height="500px" > - height size of the image.An image with text that pops up when you hover over it:
title="This text will appear when you hover over the image!" alt="And this one in her absence"
>!}The image is on the left, the text flows around the image on the right and has a horizontal indent of 6 pixels from it:
style="float: left; margin:0 6px 6px 0" > textWe write text over the image:
Try not to abuse this option,
because this method often makes it difficult
readability of the text, depending on the picture.
Picture in the selected area, with scrolling:
We specify the displayed width of the outer div container in the width attribute in pixels. For vertical scrolling, specify the height height . The width and height should be less than the picture.Tooltip that appears when you hover over a link: