HTML is a tag language.
Tag (descriptor) - special code inserted into the text to format elements of an HTML document. This is the basic coding element adopted in the HTML standard. The tag is enclosed in angle brackets. For example, a paragraph tag is
And the tag horizontal line - .
There are two types of tags: containers and single tags.
Container. This is a descriptor pair consisting of a start (or opening) and an end (or closing) tag. The start tag has the form , where TAG is the name of the actual HTML tag. The end tag looks like . Containers are designed to store some information, such as text or other HTML tags. Therefore, between the start and end tags, the contents of the container are enclosed. For example, an element that is formatted text is enclosed between AND tags.
Empty handle. It differs from a container in that it does not contain any information. It only has a start tag. An empty handle usually performs a separate task unrelated to specific text. For example, a tag creates a horizontal line.
HTML document element- These are the start and end tags of the container along with the content enclosed between them. An element can be an image, a piece of text, a form, a table, a list, a link, a text field, a button, and even the title of the document or its main part (body).
Comment: HTML language is not case sensitive. Tags can be typed in both capital and lowercase letters, i.e. the command is equivalent to the or command. Not all tags are supported by all browsers. If the browser does not support the tag, it simply ignores it.
The most important of the HTML tags is the tag of the same name. It must always open the document, just as the tag must be on its last line. These tags mean that the lines between them represent a single HTML document. This is important because the document itself is a plain ASCII text file. Without these tags, a browser or other viewer is unable to identify the document format and interpret it correctly.
The document title is not mandatory element, but a well-written headline can be quite helpful. The purpose of the document header is to provide information to the program that interprets the document. Elements inside HEAD section(except for the title of the document recorded in the TITLE section) are not visible on the screen. The elements contained within the HEAD section of a document are needed to:
Give the document a title
Define relationships between multiple documents
Instruct the browser to create a search form
Define a method for sending special messages specific browser or other viewing program
The HEAD section opens with the tag. Typically this tag comes immediately after the . The closing tag indicates the end of this section. Between the mentioned tags are the remaining tags of the document header section.
The TITLE section is the only required element of the document title and serves to give the document a title. It is usually shown in the title bar of the browser window. The contents of the TITLE section should not be confused with the document file name. It represents text string, completely independent of the file name and location. The file name is strictly defined operating system the computer on which it is stored.
The document name is written between the tags and and is a text string. You shouldn't put it in quotes if you don't want them to appear on the screen either. In most cases, the TITLE section is no more than one line.
In principle, the name can be of any length and contain any characters, except for some reserved ones. In practice, it is better to limit yourself to one line, keeping in mind that the name appears in the title bar of the browser window. You should also remember what remains of the document title when you minimize the browser window. Therefore, you should try to place the most important words at the beginning of the title.
Although there has been a trend toward more “active” content on the WWW, most readers are still interested in text part pages. Therefore, regardless of whether it is written new text or the old one is converted, the process of working on the body of the document takes a considerable amount of time.
Before you start filling the document with content, it makes sense to create its “frame”. An HTML document must contain some required elements, without which it will not be interpreted correctly. An example of a simple template is shown in the listing.
This is an example document
Enter body text here
The template opens with the tag
, which, as we already know, is necessary for every HTML document. The next tag is the beginning of the document title. The title contains a TITLE element that enters the title of the document, in our case “This is an example document”. The title is closed with the tag. Next comes the tag, after which the text (body) of the document is placed. A tag means the end of the body, and a tag means the end of the entire document. BODY may contain a large number of attributes. All of them are important because they determine the overall appearance of the document. These attributes are shown in the table.Purpose |
|
| ALINK | defines the color of the currently active link |
| BACKGROUND | points to the URL of the image that is used as the background |
| BGCOLOR | defines the background color of the document |
| BGPROPERTIES | if set to FIXED , background image doesn't scroll |
| LEFTMARGIN | Sets the left margin border in pixels |
| LINK | Specifies the color of a link that has not yet been viewed |
| TEXT | Defines the text color |
| TOPMARGIN | Sets the top margin border in pixels |
| VLINK | Specifies the color of an already viewed link |
Let's take a closer look at these attributes.
Determining the colors of the document's constituent parts is the first step to creating it. If this is not done, default colors are used. They are determined by the viewer program settings.
There are no rules for a well-balanced palette. You just need to remember that in order for readers to be able to read the text without experiencing inconvenience, try to maintain a high contrast between the text and the background and avoid the proximity of areas with similar colors.
HTML colors are specified by hexadecimal numbers. The color system is based on three primary colors - red, blue and green. For each color it is specified hexadecimal value ranging from 00 to FF, corresponding to the range 0-255 in decimal. These values are then combined into a single number, preceded by a # symbol. For simplicity, HTML 3.2 defines 16 standard colors, which along with their hexadecimal codes are given in the table below.| Color | Code |
| Black | #000000 |
| Magoop (dark burgundy) | #800000 |
| Green | #008000 |
| Olive | #808000 |
| Navy (dark blue) | #000080 |
| Purple | #800080 |
| Teal | #008080 |
| Gray | #808080 |
| Silver | #С0С0С0 |
| Red | #FF0000 |
| Lime (lime) | #00FF00 |
| Yellow | #FFFF00 |
| Blue | #0000FF |
| Fuchsia (fuchsia) | #FF00FF |
| Aqua | #00FFFF |
| White | #FFFFFF |
The VLINK attribute is used to display links that have already been viewed. As a rule, they are colored more dark shade the same color as not
viewed links. ALINK specifies the color of the currently active link. This is a relatively new attribute, usually used for viewing multi-frame documents.Alone popular ways to decorate an HTML page is to place background graphics on it, visible under the main text (attribute
BACKGROUND ). This technique helps to emphasize the integrity of the document. on the contrary, divide it into logical parts.Most background images are small in size, but their copies, like wallpaper, fill the entire viewer window. Various textured (patterned) images are especially popular: bricks, marble, all kinds of fabrics. Basically, they serve to simply fill voids in the document. More thoughtful pages have backgrounds that match the content.
Attributes
LEFTMARGIN and TOPMARGIN are used to set the distance between the left and top edges of the text and the corresponding edges of the browser window. The location of other text edges is not adjustable. This is done to ensure that the page can be viewed by any browser. It is impossible to know in advance what the document reader's window size is. LEFTMARGIN sets the distance between the left edge of the browser window, measured in pixels. Most often, this attribute is used when the author wants to have a margin on the left that is free of text and has a different pattern or color from the rest of the background image. TOPMARGIN is used to set the distance between the top edge of the text and the top edge of the browser window. It is typically used when the top of the background image is important and it is desired to be left open. HTML documents can include comments that will not be visible to the reader. They must begin with the tag . Everything contained within these tags remains invisible when viewing the page. ADDRESS is one of the most important elements of HTML. It serves to identify the author of the document and (optionally) to indicate the author's address. Copyright information is also usually placed here. This element is located either at the beginning or at the very end of the document. ADDRESS consists of text placed between the and tags. The text enclosed between these tags is usually shown in italics in the browser window.I will try to conduct the newsletter according to the principle “from simple to complex.” I will conduct it in exactly this format so that a person who would like to learn the basics of website building can immediately, after the release of the newsletter, put into practice the material presented.
But I would like to immediately make a reservation that, in particular, the HTML language is a very extensive language that is constantly evolving. And therefore, in order to master this language in high level You should study the basics (i.e. my newsletter issues) thoroughly. And at the same time practice.
As we learn the basics of HTML, we'll refer to CSS styles. This means we will also study CSS. But that's a little later. We will also be turning to javascript for help.
For today's introductory lesson, we'll start by learning about the structure of an HTML document and the basic HTML tags.
Go…
Every HTML document begins with the line:
XHTML
|
IN general case this line tells the browser that opens our page what standards it should rely on.
The tag is very diverse, and its modification determines how the content will be displayed on your page.
However, if you skillfully arrange all the elements and blocks on the page and apply the style, then everything will work equally well in all browsers with the desired .
But while we don’t know what blocks are, what styles are, and how to apply this “abrucadabra,” I consider it necessary to return to a detailed consideration when we already know how to do something and can really evaluate its work.
In the meantime, let's move down the page.
By the way, why did I start looking at the HTML document from the top of the page?
Because the browser loads the page and “reads the code” from top to bottom, left to right. (However, just like we read books).
Perhaps the word tag is not entirely clear?
Generally speaking, a tag is an instruction that tells the browser what to this place document needs to be done.
We use tags to create our pages. All tags are enclosed in so-called “corners” ( ). And a closing one (with a slash). For example, thumbnail. Specifies that the text between the opening and closing strong tags will be bold.
I hope it’s clear what a tag is.
I suggest you type something with your own hands.
So let's get started.
Launch notepad or wordpad in OC WINOWS. Let's type the following lines:
XHTML
Browser window title
Browser window title
|
Let's save the file under some name, for example start.html. Now let's figure out what they wrote.
Between the tags is information that is not displayed on the page.
For example, the tag, by the way, does not require a closing tag; it can indicate the encoding (charset=windows-1251) or information about the author (name="author" content="Full name"), or words for search engine, the tag will force the browser to automatically go to the site mysite.ru after 30 seconds (example).
The tag defines the text in the title bar of the browser window. (Closing tag).
The tag may also contain javascript scripts or vbscript enclosed in tags.... .
And the styles enclosed in tags... .
We'll probably finish with this tag.
This is, in fact, the body of the document; everything that we see on the page is located here. The tag has a set of parameters that we will look at, but it is not recommended to use them.
bgcolor - sets the background color of the document. ( )
background - points to the URL of the image - the background of the document.
text - sets the document text color.
link - sets the color of hyperlinks.
vlink= - sets the color of hyperlinks you have already visited using a value.
alink= - Sets the color of hyperlinks when clicked.
bgproperties=fixed - the background image will not scroll. Those. the text will move when PageDown is pressed, but the background will not.
This parameter only supported Internet Explorer.
These parameters can be combined, for example, on this page it is used:
XHTML
|
Let's type this line in our previous example.
XHTML
The encoding itself is not directly displayed on the web page, but it still plays a big role. If it is not set explicitly, errors may occur when opening in different browsers, and reading may not be possible.
— from the point of view of volume, we can say that this block includes the most information, because it is in it that the body of the page is formed. This is exactly what will be displayed on the screen.
Rice. 1. This is a typical example required tags, which form the structure of the document.
- - very important paired title tags that are displayed on a web page. As a rule, h1 contains the title of an article or other publication, h2 contains subheadings, h3 contains subheadings of subheadings, etc. A large document might actually need all of these tags.
The title is rendered as a block element and has padding at the top and bottom. It is recommended to break large texts into many subheadings, because this way the reader’s perception of the material improves. The header also has important function in terms of optimizing the site according to the requirements search engines. Keyword in the header and subheadings improves page relevancy.
— forms a paragraph (paragraph) of text. Also very important element. It’s unlikely that anyone would want to read a continuous text that is not divided into paragraphs in any way, right?
The paragraph also has small indents. IN visual editors Content management systems can place this tag automatically whenever you make two line breaks.
Perhaps the most basic tags that are responsible for the structure were described above. Every web page has them. But how is a tag formed and what does it include?
Structure html tagLet's immediately understand it with an example.
Heading
Here you can see that we didn’t just write . You can add additional attributes to any tag. They are written in the opening part of the element.
First, the name of the attribute itself is written, and then its value is set. In this example, the line class = “title” will bind the title style class to our title, so that we can access this element in css through it.
Between the paired tags we wrote down what will be directly displayed on the screen. After this, you should close the tag. Forgetting to do this can lead to interesting errors. For example, all the text on a page can be turned into a heading. IN single tags you can't write free text, you can only set certain attributes in them.
Hello, dear blog readers! Today we will talk about the structuring of text on web pages, the features of its display and consider how to break the text into separate logical fragments: headings, paragraphs, lists.
There are many tags for working with text in html, but first we need to talk about some features of displaying text in the browser. First, any number of spaces, tabs, and line breaks in a row appears as a single space. Those. Positioning text using spaces and tabs will not work.
For example, these lines on a web page will be displayed the same despite their different spellings:
Welcome to our site!
Good
welcome to our website!
Welcome
to our
website!
The exception is the tag, within which all spaces and hyphens are displayed as is.
Secondly, the text takes up the width of the browser window. If a long line of text is wider than the browser window, line breaks will be automatically inserted at spaces or hyphens. If there are no spaces or hyphens in the line, and the line does not fit the width of the window, then the browser will display horizontal stripe scroll.
Now let's move on to consider structural elements text in html markup.
Paragraphs in HTMLTypically, blocks of text are separated by paragraphs. This makes it easier to read large chunks of text. The HTML language for creating a paragraph contains paired tag
. The syntax for creating paragraphs is as follows:
This is the first paragraph.
And this is the second paragraph
Paragraphs on an HTML page are separated by small indentations from the previous and subsequent elements. Tag
Also a block element. What's happened block elements I wrote in the article "". Let me remind you that block elements are characterized by the fact that they occupy the entire available width of the HTML page, the height of the element is determined by its content, and it always starts on a new line.
Let's look at an example of using paragraphs on a web page. Let's open text editor, type the HTML code and save it with the html extension:
Website about cars.
Website about cars.
Car classification
Passenger car;
Cargo;
SUV;
Buggy;
Pickup;
Sports;
Racing.
When opening this file it will look something like this:
For now, our page contains only paragraphs.
To align text in a paragraph tag
Supports align attribute. It can take one of four values:
- left — align text to the left;
- center — align text to the center;
- right — align text to the right;
- justify - width alignment, i.e. align text simultaneously to the right and left. To do this, the browser places spaces between words.
By default, the align attribute is left. An example of using the align attribute:
This text is in a paragraph on html page will be left aligned!
This text will appear in the center of the page in the browser!
This text will be right aligned!
And the browser will align this large piece of text in width, i.e. simultaneously on the right and left edge! To do this, the web browser will insert additional spaces between the words and the paragraph will take on a neat appearance that is easy to read!
And this is how it will be displayed in the browser:
Headings are used to highlight sections of text on a web page. There are six levels of headings in html. The most top level is level 1 - tag, and the lowest is level 6, tag. Tags -
