Laboratory work number 2 Lists are simple and invested. Creating HTML Tables

The goal of the work: with the Location and Testing HTML file. Creating lists. Insert tables and their structure. Page Maketling using tables.

Brief theoretical information

There are three main types of lists in the HTML document: a numbered labeled list of definitions

We can create invested lists using various lists tags or repeating one inside the others. To do this, you just need to place one pair of tags (starting and final)

inside another. Whether elements of the attached list will have the same markers denoting the list item - depends on the browser. Look in detail in the "Entended Lists" section.

Numbered lists

In a numbered list, the browser automatically inserts the numbers of the elements in order. This means that if you delete one or more elements of the numbered list, the other numbers will automatically be recalculated.

The numbered list begins by the starting tag

And ends tag

1. Programming

2. Algorithmization

3. Design

Tag

May have parameters:

where: Type - Type of Counter:

A - Large Latin Letters (A, B, C ...) A - Little Latin Letters (A, B, C ...) I - Large Roman Figures (I, II, III ...) I - Small Roman Figures (I, II, III ...) 1 - ordinary numbers (1,2,3 ...)

sTART \u003d "N" is a total from which the counting begins for example:

15. Programming
16. Algorithmization
17. Design

XV Programming

XVI. Algorithmization

XVII. Design

Marked lists.

For label lists, the browser usually uses markers for marking the list item. Type of Marker, as a rule, configures a browser user.

The label list begins by the starting tag

And ends tag
. Each element of the list begins with tag
1. . For example:

2. Programming
3. Algorithmization
4. Design

Programming

Algorithmization

Design

Tag

May have a parameter:

Tag type

Determines appearance Marker as a default view (DISC), round (Circle) or square (Square). For example:

• Programming
• Algorithmization
• Design

 Programming

 Algorithmization

 Design

Lists of definitions.

< dl>… - Pair Tag - displays lists of definitions.

Design:

Term

Definition of the term

With tag

You can use the Compact attribute to set a more compact location of the list items.

Design:

Term

Definition of the term

Tables in HTML are organized as a set of columns and lines. Cell cells can contain any HTML elements, such as headlines, lists, paragraphs, figures, graphics, and form elements.

Basic Tags Table Table:

...

These are the main tags describing the table. All items of the table must be inside these two tags. By default, the table does not have framing and separators. The framing is added by the Border attribute.

Table row: ...

The number of rows of the table is determined by the number of participated pairs of tags ... Rows can have align attributes and Valign, which describe the visual position of the contents of the rows in the table.

Table cell: ...

Describes a standard table cell. The table cell can only be described inside the table row. Each cell must be numbered by the speaker number for which it is described. If there is no one or more cells in the row for some columns, the browser displays an empty cell. The location of the data in the default cell is defined by the attributes Align \u003d "Left" and Valign \u003d "Middle". This location can be corrected both at the level of the string description and at the level of the cell description.

Any cell of the table can be determined not tags

…and tags … - Table Header (Table Title). TH.

it is a conventional cell, but the text inside these tags will be highlighted in bold and centered.

Signature: ...

This tag describes the name of the table (signature). Tag must be present inside

..., but outside the description of any string or cell. Default It has an align \u003d "top" attribute, but can be explicitly installed in Align \u003d "Bottom". Align.

determines where the table will be applied on top or bottom. The signature is always centered within the framework of the table width.

Basic Attributes Border Table

This attribute is used in TABLE tag. If this attribute is present, the table boundary is drawn for all cells and for the table as a whole. Border can take a numeric value that determines the width of the boundary, for example Border \u003d "3".

knight with barrel September 19, 2012 at 11:16

Errors to avoid when writing HTML code

Everyone who works every day with HTML must be very attentive, as it is not so easy to follow all the HTML rules. This is very important, since the HTML validator finds everything, even minor, flaws, and you get the page code with errors. Today we will try to pay attention to the most common of them. I am confident that the proposed recommendations will be very useful to many, and especially beginners, developers. So welcome under

Wrong nesting HTML tags

It is very important to correctly close everything. HTML Tags. They must close in reverse order Compared with how they were open. Most newbies do not pay due attention. If tags are closed in the wrong order, then you will receive errors in validation, and some styles may not be used. Be careful!

Error

Your text

Calcularly

Your text

Using block elements inside the lower case

All who at least a little used HTML in practice I know that the element can be displayed or as a block or as a string. Block elements including paragraphs and partitions must contain lowercase. This is a logical document strest, so make sure your code corresponds to it.

Popular lowercase elements: , , ,
Popular block elements:

,

…

,

,

,
, ,

Error

Error

Calcularly

According to standard

Incorrect use of lists

OL and UL tags can be used to display the list items in many ways. Also you will get a lot of additional advantages. List tags are very helpful to format information for its correct display. I recommend that you refuse to use quotes when creating lists. Search engines also refer to the use of lists, as it helps to structure information on the page. Use standard tags instead of hacks.

Using styles in code

You probably have already heard that the use of styles in the code is bad. You did not think, why is it so? The reason is that CSS and semantic HTML are conceived precisely for separating content from its design. Such a model provides much greater flexibility and convenience of working with documents.

Error

Your wonderful text

Ignoring Tag Tagov

Tags headers are designed to highlight headers into a separate partition on the page. Standard suggests to use for this tags from

before

. The design and layout of the text in them can be any, but let the document be structured correctly!

Error Your wonderful headline

The text of your article.

Calcularly

Your wonderful headline

The text of your article.

Incorrect use of the Form tag

We all often make a mistake creating forms and tables in HTML. Remember that the table must be created already inside the form!

Error

...

Calcularly
...

Non-use attribute Alt.

When working with images, you must use the Alt attribute. It is necessary, since users will be able to determine what should be at the site of the image, even if a very slow connection is used. This value should describe the essence of the image used. Never use alt \u003d "picture." If the image performs purely decorative functions, then use alt \u003d "*".

Error Calcularly

Wrong tags for highlighting fat or italics

Although and In most cases, it is perfectly coping with their tasks, the use of styles for text design allows you to get much greater flexibility. If the tag should simply emphasize the value of a specific part of the text, then use tags and .

Useless use of row transfer

Tag
It can be used once in a string in order to start the following proposal on the next line. Many use this tag in order to create a distance between the elements. This use does not comply with standards.

The error is the first paragraph.


Continued text. Calcularly

The first paragraph.

Continued text.

Tags: html, errors

Formatting text in HTML - Methods and examples - 4.0 Out of 5 Based on 1 Vote

How to change it to the paragraphs and, we considered in past lessons.

In this lesson, we will look at how the text formatting in HTML can be formatted and what tags exist for this.

First, consider how you can change the type of text using the tag and pair closing it. Taga There are several attributes. Using the Face \u003d "" attribute, you can set the text font. To do this, between the quotes in the attribute Face \u003d "" you need to register the name of the font.

For example: Your text

In this example, the ARIAL font was set and the entire text layered between the tags will be displayed by this font. You can specify not one, but several fonts through the comma, in this case the first fit font will be selected from the list. That is, if for example, the first font in the system of the user who has shortened to your page will not be, then the second font will be selected.

This is written so: Your text

With the choice of font you need to be careful. No need to indicate various exotic fonts. Because they simply may not be on the computer of your visitor. It is best to use standard fonts, such as Arial, Times Roman, Vernada, Tahoma.

Next Tag Attribute This is Size \u003d "". Using this attribute, you can set the font size. For this, between the quotes, you must specify the number from 1 to 7.

For example: Your text

In addition, there is another group of HTML tags used to format text, with their text, you can be highlighted in bold, italics, emphasize or cross.

You can make the text with a tag and pair closing it. The text located between these tags will be fat. In addition, bold text can be done with the tag and pair closing it. To highlight keywords on the page it is better to use the second tag.

For example: Thumbnail

You can make text in italics with tag The text located between these two tags will have a slope to the right.

For example: Text in italics

The underlined text can be done with the tag and pair closing his tag. Under the text placed between these tags, the line will be held.

For example: Underlined text

Crossed text can be created using a tag and pair closing his tag The text enclosed between these tags will be in the center, crossed the line.

For example: Lisked text

The next HTML tag used to format text and steam closing it. The text concluded between these tags will be more relative to the main one.

For example: Big Text

Tag and steam closing it The direct opposite of the tag examined is slightly higher. The text enclosed between these tags will be less in size relative to the main text.

For example: Little text

Well, finally, we still have to consider two more tags it tags that define the upper index, i.e. the text located between these tags will be smaller in size and displayed at the top relative to the main font.

For example: ^Superscript

And tags Determine the lower index. The test, in between these tags prisoner, will be located below the main text.

For example: _{Lower index}

Here's actually with the help of tag data, you can define one or another font style and format text formatting in HTML.

Material prepared by the portal:

Browser	Internet Explorer.			Netscape.			Opera.			Safari.	Mozilla.	Firefox.
Version	5.5	6.0	7.0	6.0	7.0	8.0	7.0	8.0	9.0	1.0	1.7	1.0	2.0
Supported	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes

Description

Tag It is a container to change the font characteristics, such as size, color and headset. Although this tag is still supported by all browsers, it is considered obsolete and it is recommended to refuse to refuse styles.

Syntax

Text

Closing tag

Obligatory.

Parameters

Color sets text color. Face determines the headset of the font. Size sets font size in conventional units.

Example 1. Using a tag










Pthe head of this proposal is written by the Arial font, is highlighted in red and increased in size.





Description of the parameters of the tag

Color Parameter

Description

Sets the color of the text inside the container .

Syntax

...

Arguments

The color value can be set in two ways.

1. By his name

Browsers support some colors according to their name.

2. in hexadecimal value

For setting colors, numbers are used in hexadecimal code. The hexadecimal system, unlike the decimal system, is based, as follows from its name, among the number 16. The numbers will be the following: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c , D, E, F. Figures from 10 to 15 are replaced by Latin letters. The numbers are more than 15 in the hexadecimal system are formed by the combination of two numbers in one. For example, the number 255 in the decimal system corresponds to the number FF in the hexadecimal system. In order not to confuse confusion in the definition of the number system, the grid symbol is set before hexadecimal, for example # 666999. Each of the three colors is red, green and blue - can take values \u200b\u200bfrom 00 to FF. Thus, the designation of the color is divided into three components #rrggbb, where the first two characters mark the red component of the color, two medium - green, and the last two are blue.

Analog CSS.

Default value

The color installed in the default browser.

Parameter Face

Description

The FACE parameter is used to set the font headset used for text. The names of the fonts can be brought several through commas. In this case, if the first specified font is found, the browser will use the following on the list.

Syntax

...

Arguments

Any number of font names separated by commas. Universal font families:
serif - fonts with serifs (antique), type Times;
sans-Serif - chopped fonts (fonts without sneakers or grotesque), a typical representative - Arial;
cURSIVE - CLEAR FONTS;
fantasy - decorative fonts;
monoSpace - Monoshyrched fonts, the width of each symbol in the same family is the same.

Analog CSS.

Default value

The font installed in the default browser.

Size option

Description

The font size in the conventional units from 1 to 7. The average size used by default is received 3. The font size can be specified as an absolute value (for example, Size \u003d "4") and relative (for example, Size \u003d "+ 1", Size \u003d "- 1"). In the latter case, the size varies relative to the base. The font size affects not only the specified Size parameter, but also the choice of the font headset. So, the ARIAL font looks larger than the Times font, and the VERDANA font is slightly more ARIAL font. Take this feature when choosing a font and sizes.

Syntax

...

Arguments

An integer from 1 to 7 or a change in value to a large or smaller side using symbols + and -.

Questions to the test

What is HTML? How many mandatory tags are you known? Between what tags is the name of the document? What pair of tags determines paragraph in the document? The header of the second level, alleviated by the right edge, is set by the tag: how to go to the English. The language tags are recorded on the right, left edges, in the center, in width: the absence in tags header or paragraph of the Align parameter leads to the text alignment by: what unpaired tags you know the horizontal line 50% width, thick 2 pixel, the wrong, blue color is set tag for what is needed In HTML? What 2 types (methods) of text formatting in HTML document are known to you? What tags need to be applied to obtain crushed bold texts? What does a fragment of code that gives a cruising and underlined text looks like: what tags shift the text relative to the main level of the string (long and substitution)? What is the formatting tag belong to Face, Color and Size parameters? What happens if the font specified in the FACE parameter is not installed on the computer? What tags with different appointments are the same (italics) displays text? What porerizes if tag Will it turn out not closed? If you need to display a monoshyrawn text page, you will make it using tags: Interpret the following code fragment:
Cheerful html What is hypertext? Specify the composite parts of any links? For the organization of references from document Index. HTM on document book. HTM, located in the same directory, you need to write a string: What kind of is the usual hyperlink (without styles superimposed on it)? What happens if the file to which you refer is missing? How to refer to the index file. HTM, located at the root, on the Risunki file. HTM, located in the Image folder, which is invested in the SHEDEVR folder? In what cases it is advisable to apply internal links? In order to make an internal link to the section "Edition" (Anchor IZDAN) from the section "Edition" (anchor-izdan): explain the meaning of the following fragment: Conclusion How to make a link to the mailbox ***** @ *** ru What determines the BGCOLOR parameter? What number systems are used to represent colors in HTML? What color is represented by BLUE? What kind of HTML-page has without the presence of the Body Tag Parameters? Mark the correct troop of the Tag Body parameters attributes? What parameter is the color of the viewed link? How many parameters of the Body tag setting the boundaries of the HTML document fields do you know what parameter Body tag allows you to put a document as a background - an image? What tag is given a numbered and marked list? How to change the type of marker on the crumpled square? How to carry out a vertical table cell combining? Horizontally?