Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ – Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² поиск?

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ — ЯндСкс.Π’ΠΈΠΊΠΈ. ΠŸΠΎΠΌΠΎΡ‰ΡŒ

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Ρ€Π΅ΠΆΠΈΠΌ рСдактирования (ΠŸΡ€Π°Π²ΠΊΠ°).

  2. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° страницу.
    1. НаТмитС Π·Π½Π°Ρ‡ΠΎΠΊ Π² ΠΏΠ°Π½Π΅Π»ΠΈ слСва.

    2. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ».

    3. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» ΠΈΠ»ΠΈ Ρ„Π°ΠΉΠ»Ρ‹.

    4. Бписок всСх Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² Π±ΡƒΠ΄Π΅Ρ‚ доступСн Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π² ΠΏΠ°Π½Π΅Π»ΠΈ слСва.

    Π‘ΠΎΠ²Π΅Ρ‚. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½Π° страницС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°, просто скопируйтС ссылку Π½Π° источник изобраТСния ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ ΠΊ ΡˆΠ°Π³Ρƒ 4. Π—Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° страницу Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ.
  3. Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ ссылку Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.
    1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ список Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² ().

    2. НавСдитС курсор Π½Π° Ρ„Π°ΠΉΠ» ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ .

    3. Надпись Бсылка Π½Π° Ρ„Π°ΠΉΠ» скопирована ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ссылка Π½Π° Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» скопирована Π² Π±ΡƒΡ„Π΅Ρ€ ΠΎΠ±ΠΌΠ΅Π½Π°. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π΅ Π² тСкст страницы.

  4. Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ссылку Π² тСкст страницы. ПослС сохранСния страницы ссылка прСобразуСтся Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

  5. ΠŸΡ€ΠΈ нСобходимости Π·Π°Π΄Π°ΠΉΡ‚Π΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния Π² пиксСлях:

    [ΡˆΠΈΡ€ΠΈΠ½Π°]Ρ…[высота]:[адрСс изобраТСния] 

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚
100x40:http://img.yandex.net/i/logo95x37x8.png

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ссылкой Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ страницу:

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚
((Бсылканастраницу http://img.yandex.net/i/logo95x37x8.png))

yandex.ru

ДобавляСм изобраТСния Π½Π° WEB-страницу, Π° Π΅Ρ‰Π΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ! : WEBCodius

ЗдравствуйтС ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ Π±Π»ΠΎΠ³Π°! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ всС ΠΎ Ρ‚ΠΎΠΌ ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° html страницу. Π£ вас Π΅ΡΡ‚ΡŒ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½Π° ΡΠ²ΠΎΡŽΒ ΡΡ‚Ρ€Π°Π½ΠΈΡ‡ΠΊΡƒ ΠΈΠ»ΠΈ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½Π° свой сайт Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ? ВсС это Π»Π΅Π³ΠΊΠΎ.Β ΠŸΡ€ΠΎΡ‡ΠΈΡ‚Π°Π² ΡΡ‚ΡƒΒ ΡΡ‚Π°Ρ‚ΡŒΡŽ, вы смоТСтС Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ трудностСй Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° свои html страницы.  Для этого ΠΌΡ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ‚Π΅Π³Π΅ <img>Β  ΠΈ Π΅Π³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Ρ…, ΠΊΡ€Π°Ρ‚ΠΊΠΎ рассмотрим Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ графичСских Ρ„Π°ΠΉΠ»ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ gif, jpeg ΠΈ png, Π° Ρ‚Π°ΠΊΠΆΠ΅ посмотрим Π½ΠΎΠ²Ρ‹Π΅ возмоТности HTML5, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‚ вставку Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ Π½Π° сайт.

Из-Π·Π° Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎ графичСскиС Π΄Π°Π½Π½Ρ‹Π΅ ΠΈ тСкст html Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΒ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅, для ΠΈΡ… отобраТСния Π½Π° сайтС примСняСтся Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, Π½Π΅ΠΆΠ΅Π»ΠΈ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами html-страниц. ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго, графичСскиС изобраТСния, Π΄Π° ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ хранятся Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»Π°Ρ…. А для ΠΈΡ… внСдрСния Π² web-страницу ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ содСрТат ссылки Π½Π° эти ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹. Π’ частности Ρ‚Π°ΠΊΠΈΠΌ Ρ‚Π΅Π³ΠΎΠΌ являСтся

Ρ‚Π΅Π³ <img>. ВстрСтив Ρ‚Π°ΠΊΠΎΠΉ Ρ‚Π΅Π³ с адрСсом, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ сначала Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ Ρƒ Web-сСрвСра ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Ρ„Π°ΠΉΠ» с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π°ΡƒΠ΄ΠΈΠΎ- ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎΡ€ΠΎΠ»ΠΈΠΊΠΎΠΌ, Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π°Ρ‚Π΅ΠΌΒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π΅Π³ΠΎ Π½Π° Web-страницС.

ВсС графичСскиС изобраТСния ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π»ΡŽΠ±Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хранятся Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΎΡ‚ web-страницы Ρ„Π°ΠΉΠ»Π°Ρ… Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π²Π½Π΅Π΄Ρ€Π΅Π½Π½Ρ‹ΠΌΠΈ элСмСнтами страницы.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ <img>, стоит Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎ графичСских Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ….

Π€ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ графичСских ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

БущСствуСт мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… графичСских Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ², Π½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ лишь нСсколько. Рассмотрим Ρ‚Ρ€ΠΈ ΠΈΠ· Π½ΠΈΡ….

1.

Π€ΠΎΡ€ΠΌΠ°Ρ‚ JPEG (Joint Photographic Experts Group). Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ популярный Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, примСняСмый для хранСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ 24-Π±ΠΈΡ‚ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΈ сохраняСт всС ΠΏΠΎΠ»ΡƒΡ‚ΠΎΠ½Π° Π² фотографиях Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½Ρ‹ΠΌΠΈ.Β  Но jpeg Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ ΠΈ искаТаСт ΠΌΠ΅Π»ΠΊΠΈΠ΅ Π΄Π΅Ρ‚Π°Π»ΠΈ ΠΈ тСкст Π² изобраТСниях. JPEG ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² основном для хранСния Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ. Π€Π°ΠΉΠ»Ρ‹ этого Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ jpg, jpe, jpeg.

2. Π€ΠΎΡ€ΠΌΠ°Ρ‚ GIF (Graphics Interchange Format). Π“Π»Π°Π²Π½ΠΎΠ΅ достоинство этого Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ сразу нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅. Π­Ρ‚ΠΎ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ†Π΅Π»Ρ‹ΠΉ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ€ΠΎΠ»ΠΈΠΊΠΈ. Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ. Π“Π»Π°Π²Π½Ρ‹ΠΉ нСдостаток это ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° всСго лишь 256-Ρ†Π²Π΅Ρ‚ΠΎΠ², Ρ‡Ρ‚ΠΎ Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ годится для хранСния Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ. GIF Π² основном ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для хранСния Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ², Π±Π°Π½Π½Π΅Ρ€ΠΎΠ², изобраТСния с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌΠΈ участками ΠΈ содСрТащих тСкст. Π€Π°ΠΉΠ»Ρ‹ этого Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ gif.

3. Π€ΠΎΡ€ΠΌΠ°Ρ‚ PNG (Portable Network Graphics). Π­Ρ‚ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π±Ρ‹Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ ΠΊΠ°ΠΊ Π·Π°ΠΌΠ΅Π½Π° ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ΅ΠΌΡƒ GIF, Π° Ρ‚Π°ΠΊΠΆΠ΅, Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ стСпСни, JPEG. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, Π½ΠΎ Π½Π΅ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ. Π”Π°Π½Π½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ png.

ΠŸΡ€ΠΈ создании сайтов ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ изобраТСния Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ JPEGΒ ΠΈΠ»ΠΈ GIF, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ PNG. Π“Π»Π°Π²Π½ΠΎΠ΅ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² ΠΊΠ°ΠΊΠΈΡ… случаях какой Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Если ΠΊΡ€Π°Ρ‚ΠΊΠΎ, Ρ‚ΠΎ:

Вставка ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π² html страницы

Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ всС Ρ‚Π°ΠΊΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-страницу? Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ позволяСт ΠΎΠ΄ΠΈΠ½Π°Ρ€Π½Ρ‹ΠΉ Ρ‚Π΅Π³Β <img>. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ‚ΠΎΠΌ мСстС Π²Π΅Π±-страницы, Π³Π΄Π΅ встрСтит Ρ‚Π΅Π³ <img>.

Код вставки ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² html страницу ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Π°ΠΊΠΎΠΉ Π²ΠΈΠ΄:

<img src=»image.jpg»>

Π”Π°Π½Π½Ρ‹ΠΉ html-ΠΊΠΎΠ΄ помСстит Π½Π° Π²Π΅Π±-страницу ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, хранящССся Π² Ρ„Π°ΠΉΠ»Π΅ image.jpg, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ находится Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΈ Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅ с Π²Π΅Π±-страницСй. Как Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ адрСс ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ указываСтся Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ src. Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ html-Ρ‚Π΅Π³Π° я ΡƒΠΆΠ΅ рассказывал. Π’Π°ΠΊ Π²ΠΎΡ‚, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ src ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ слуТит для указания адрСса Ρ„Π°ΠΉΠ»Π° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

Π‘Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° src Ρ‚Π΅Π³ img Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ смысла.

ΠŸΡ€ΠΈΠ²Π΅Π΄Ρƒ Π΅Ρ‰Π΅ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² указания адрСса Ρ„Π°ΠΉΠ»Π° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ:

<img src=»/images/image.jpg»>Β β€” этот html-ΠΊΠΎΠ΄ вставит Π½Π° страницу ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ image.jpg, которая хранится Π² ΠΏΠ°ΠΏΠΊΠ΅ images, располоТСнной Π² ΠΊΠΎΡ€Π½Π΅ Π²Π΅Π±-сайта.

Π’ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ src ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎΒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ссылки Π½Π° изобраТСния. Π’Π°ΠΊ ΠΊΠ°ΠΊ изобраТСния хранятся Π² сСти вмСстС с html-страницами, поэтому Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π΅ΡΡ‚ΡŒ свой собствСнный url-адрСс. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ src ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ url-адрСс изобраТСния. НапримСр:

<img src=»http://mysite.ru/images/image.jpg»>

Π”Π°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ вставит Π½Π° страницу ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с сайта mysite.ru. URL-aΠ΄pec ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ примСняСтся, Ссли Π²Ρ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, находящССся Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ сайтС. Для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ хранящихся Π½Π° вашСм сайтС Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ссылки.

Π’Π΅Π³ <img> являСтся строчным элСмСнтом, поэтому Π΅Π³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΡŒ Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²Π½ΡƒΡ‚Ρ€ΡŒ Ρ‚Π΅Π³Π° <p>Β β€” Π°Π±Π·Π°Ρ†:

<p><img src=»/images/image.jpg»></p>

Π”Π°Π²Π°ΠΉΡ‚Π΅ попрактикуСмся ΠΈ вставим Π½Π° Π½Π°ΡˆΡƒ страницу ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… статСй ΠΎΠ± html ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π― создам рядом с html-Ρ„Π°ΠΉΠ»ΠΎΠΌ своСй страницы ΠΏΠ°ΠΏΠΊΡƒ Β«imagesΒ» ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Ρƒ Ρ‚ΡƒΠ΄Π° Ρ„Π°ΠΉΠ» с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ Β«bmw.jpgΒ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ выглядит Ρ‚Π°ΠΊ:

Π’ΠΎΠ³Π΄Π°Β html-ΠΊΠΎΠ΄ страницы со вставлСнной ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ:

<!doctype html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Π‘Π°ΠΉΡ‚ ΠΎΠ± автомобилях.</title>
</head>
<body>
<h2>Π‘Π°ΠΉΡ‚ ΠΎΠ± автомобилях.</h2>
<p><img src=»/images/bmw.jpg»></p>
<p>Π”ΠΎΠ±Ρ€ΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° наш Π°Π²Ρ‚ΠΎΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ сайт. Π—Π΄Π΅ΡΡŒ Π’Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΠΌΠ½ΠΎΠ³ΠΎ интСрСсных ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… статСй ΠΎΠ± автомобилях, ΠΎΠ± ΠΈΡ… тСхничСских характСристиках ΠΈ особСнностях.</p>
<p>Научным языком <strong>Π°Π²Ρ‚ΠΎΠΌΠΎΠ±ΠΈΠ»ΡŒ</strong> это:</p>
<p><em>ΠœΠ΅Ρ…Π°Π½ΠΈΡ‡Π΅ΡΠΊΠΎΠ΅ ΠΌΠΎΡ‚ΠΎΡ€Π½ΠΎΠ΅ Π±Π΅Π·Ρ€Π΅Π»ΡŒΡΠΎΠ²ΠΎΠ΅ Π΄ΠΎΡ€ΠΎΠΆΠ½ΠΎΠ΅ транспортноС срСдство ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ с 4 колёсами</em>.</p>

<hr>
<h3>ΠšΠ»Π°ΡΡΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ Π°Π²Ρ‚ΠΎΠΌΠΎΠ±ΠΈΠ»Π΅ΠΉ</h3>
<p>Автомобили Π±Ρ‹Π²Π°ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Ρ‚ΠΈΠΏΠΎΠ²:</p>
<ul>
<li>Π›Π΅Π³ΠΊΠΎΠ²ΠΎΠΉ;</li>
<li>Π“Ρ€ΡƒΠ·ΠΎΠ²ΠΎΠΉ;</li>
<li>Π’Π½Π΅Π΄ΠΎΡ€ΠΎΠΆΠ½ΠΈΠΊ;</li>
<li>Π‘Π°Π³Π³ΠΈ;</li>
<li>Пикап;</li>
<li>Π‘ΠΏΠΎΡ€Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ;</li>
<li>Π“ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ.</li>
</ul>
<p>ВсС ΠΏΡ€Π°Π²Π° Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Ρ‹. &copy; 2010 Π³ΠΎΠ΄.<br>Π‘Π°ΠΉΡ‚ ΠΎΠ± автомобилях.</p>
</body>
</html>

И смотрим Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ отобраТСния Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:

Как ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Π½ΠΈΡ‡Π΅Π³ΠΎ слоТного Π² Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π²Π΅Π±-страницах Π½Π΅Ρ‚. Π”Π°Π»Π΅Π΅ рассмотрим нСсколько Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π°ΠΆΠ½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Ρ‚Π΅Π³Π° <img>.

Атрибут altΒ β€” ΠΊΠ°ΠΊ запасной Π²Π°Ρ€ΠΈΠ°Π½Ρ‚

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ„Π°ΠΉΠ»Ρ‹ с изобраТСниями хранятся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ Π²Π΅Π±-страниц, Ρ‚ΠΎ для ΠΈΡ… получСния Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ приходится Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ запросы. А Ρ‡Ρ‚ΠΎ Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° страницС Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΊ сСти малСнькая, Ρ‚ΠΎΠ³Π΄Π° Π½Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² потрСбуСтся Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ врСмя. А Π΅Ρ‰Π΅ Ρ…ΡƒΠΆΠ΅ Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ ΡƒΠ΄Π°Π»Π΅Π½ΠΎ с сСрвСра Π±Π΅Π· вашСго Π²Π΅Π΄ΠΎΠΌΠ°.

Π’ этих случаях сама Π²Π΅Π±-страница Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π°, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ вмСсто ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π±Π΅Π»Ρ‹Π΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΈ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎ прСдставляСт ΠΈΠ· сСбя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ примСняСтся

Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ alt. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° указываСтся Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ тСкст Π·Π°ΠΌΠ΅Π½Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² пустом ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ΅ ΠΏΠΎΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ загрузится:

<p><img src=»image.gif» alt=»Π·Π΄Π΅ΡΡŒ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°»></p>

Π˜Β ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ это выглядит:

Π—Π°Π΄Π°Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ

Β ΠžΡΡ‚Π°Π»ΠΎΡΡŒ Π΅Ρ‰Π΅ ΠΏΠ°Ρ€Ρƒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Ρ‚Π΅Π³Π° img, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Π°ΠΌ слСдуСт Π·Π½Π°Ρ‚ΡŒ. Π­Ρ‚ΠΎ ΠΏΠ°Ρ€Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² width ΠΈ height. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния:

<p><img src=»image.jpg» width=»300″></p>

Π’ ΠΎΠ±ΠΎΠΈΡ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Ρ… указываСтся Ρ€Π°Π·ΠΌΠ΅Ρ€ Π² пиксСлях. Атрибут width ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΊΠ°ΠΊΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ height ΠΊΠ°ΠΊΠΎΠΉ высоты. Π­Ρ‚ΠΈ Π΄Π²Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ вмСстС ΠΈ ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. НапримСр, Ссли Π²Ρ‹ ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ width, Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ΄Π±Π΅Ρ€Π΅Ρ‚ высоту автоматичСски ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ Π² случаС использования Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° height. Π’ случаС Ссли Π²Ρ‹ Π½Π΅ ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ эти Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ вовсС, Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ автоматичСски ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния ΠΏΠ΅Ρ€Π΅Π΄ Π²Ρ‹Π²ΠΎΠ΄ΠΎΠΌ Π΅Π³ΠΎ Π½Π° экран. Π‘Ρ‚ΠΎΠΈΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ускорит Ρ€Π°Π±ΠΎΡ‚Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΡ€ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ страницы.

На этом ΠΎ вставкС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° страницы ΠΏΠΎΠΊΠ° всС, Π΄Π°Π»Π΅Π΅ рассмотрим ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π°ΡƒΠ΄ΠΈΠΎ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° сайт…

ВставляСм Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎΒ  с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML 5

Π’ Π½ΠΎΠ²ΠΎΠΉ спСцификации html5 появилось нСсколько Π½ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ°. Π­Ρ‚ΠΎ ΠΏΡ€Π΅ΠΆΠ΄Π΅ всСго касаСтся Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ.

Для вставки Π°ΡƒΠ΄ΠΈΠΎ HTML5 прСдоставляСт ΠΏΠ°Ρ€Π½Ρ‹ΠΉ Ρ‚Π΅Π³ <AUDIO>. АдрСс Ρ„Π°ΠΉΠ»Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ хранится Π°ΡƒΠ΄ΠΈΠΎΡ€ΠΎΠ»ΠΈΠΊ, указываСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΠΎΠ³ΠΎ Π½Π°ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° src:

<audio src=»sound.wav»></audio>

Π’Π΅Π³ <audio> создаСт Π½Π° страницС Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ воспроизводит Π°ΡƒΠ΄ΠΈΠΎΡ€ΠΎΠ»ΠΈΠΊ. Π§Ρ‚ΠΎ Π±Ρ‹ ΠΎΠ½ это сдСлал, Π² Ρ‚Π΅Π³Π΅ <audio> Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ особый Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Β  autoplay. ΠžΡΠΎΠ±Ρ‹ΠΉ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ значСния. Достаточно ΠΎΠ΄Π½ΠΎΠ³ΠΎ присутствия этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Π² Ρ‚Π΅Π³Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π½Π°Ρ‡Π°Π» Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π°ΡƒΠ΄ΠΈΠΎΡ€ΠΎΠ»ΠΈΠΊ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ отобраТаСтся Π½Π° web-страницС. Но Ссли Π² Ρ‚Π΅Π³Π΅ <audio> ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π±Π΅Π· значСния controls, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Β Π²Ρ‹Π²Π΅Π΄Π΅Ρ‚ Π² Ρ‚ΠΎΠΌ мСстС Π²Π΅Π±-страницы, Π³Π΄Π΅ проставлСн Ρ‚Π΅Π³ <audio>, элСмСнты управлСния воспроизвСдСниСм Π°ΡƒΠ΄ΠΈΠΎΡ€ΠΎΠ»ΠΈΠΊΠ°. Они Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΊΠ½ΠΎΠΏΠΊΡƒ запуска ΠΈ приостановки воспроизвСдСния, ΡˆΠΊΠ°Π»Ρƒ воспроизвСдСния ΠΈ рСгулятор громкости:

<audio autoplay controls src=»sound.wav»></audio>

Для вставки Π²ΠΈΠ΄Π΅ΠΎΡ€ΠΎΠ»ΠΈΠΊΠ° Π½Π° Π²Π΅Π±-страницу ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ ΠΏΠ°Ρ€Π½Ρ‹ΠΉ Ρ‚Π΅Π³ <video>.Β  Π‘ этим Ρ‚Π΅Π³ΠΎΠΌ всС Ρ‚ΠΎΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ ΠΈ с Ρ‚Π΅Π³ΠΎΠΌ <audio>Β β€” адрСс Π²ΠΈΠ΄Π΅ΠΎΡ„Π°ΠΉΠ»Π° указываСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° src, Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² autoplay ΠΈ controls ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ автовоспроизвСдСниС Ρ€ΠΎΠ»ΠΈΠΊΠ° ΠΈ вывСсти элСмСнты управлСния воспроизвСдСния Π²ΠΈΠ΄Π΅ΠΎΡ€ΠΎΠ»ΠΈΠΊΠ°.

Π‘ΠΎΠ»ΡŒΡˆΠ΅ Ρ€Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΎ вставкС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ° Π½Π° html страницы особо Π½Π΅Ρ‡Π΅Π³ΠΎ. НадСюсь Π½Π° вопрос «Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² html страницу?Β» я Π²Π°ΠΌ ΠΎΡ‚Π²Π΅Ρ‚ΠΈΠ». поэтому просто ΠΏΠΎΠ΄Π²Π΅Π΄Ρƒ ΠΈΡ‚ΠΎΠ³ΠΈ :

Если Ρ‡Ρ‚ΠΎ Π½Π΅ понятно, ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΠΉΡ‚Π΅ Π² коммСнтариях ΠΈ Π½Π΅ Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° обновлСния ΠΌΠΎΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π°. Π”ΠΎ встрСчи Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… постах!

webcodius.ru

Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² html ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ изобраТСния ΠΈΠ»ΠΈ Ρ„ΠΎΡ‚ΠΎ Π² HTML Π½Π΅ Π²Ρ‹Π·ΠΎΠ²Π΅Ρ‚ Ρƒ вас особых Ρ…Π»ΠΎΠΏΠΎΡ‚ благодаря этой ΡΡ‚Π°Ρ‚ΡŒΠ΅, Π² Π½Π΅ΠΉ ΠΌΡ‹ рассмотрим Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ вставку ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² HTML. НапримСр, Π΅Ρ‰Π΅ ΠΌΡ‹ научимся Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Π—Π°Ρ‡Π΅ΠΌ? ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ β€” нашС всС! Π‘ Π½ΠΈΠΌΠΈ ΡΡ‚Π°Ρ‚ΡŒΠΈ выглядят Π»ΡƒΡ‡ΡˆΠ΅, ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅, качСствСннСС, вСсСлСС.

Π’Π΅Π³ <img> для вставки ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

Π˜Ρ‚Π°ΠΊ, для размСщСния изобраТСния Π½Π° Π²Π΅Π±-страницС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³ <img>, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π΅ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ src ΠΈ alt. Src ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π³Π΄Π΅ Π»Π΅ΠΆΠΈΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, Π° alt это Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΈΠ΄ΠΈΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π² случаС Ссли Ρƒ Π½Π΅Π³ΠΎ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π²ΠΎ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ»ΠΈ Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ загруТаСтся.

Для XHTML

<img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»Ρ‚Скст для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ» />

Для HTML4, HTML5

<img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»Ρ‚Скст для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ» />

Π‘Π΅Ρ€Π΅ΠΌ ΠΈ Π½Π΅Π΄ΠΎΠ»Π³ΠΎ думая вставляСм ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² html. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π£Ρ‡Ρ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π³ <img> это строчный элСмСнт. Π—Π½Π°Ρ‡ΠΈΡ‚, ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ XHTML/строгий HTML4, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта (<p>, <div>)

<img src=»/images/image.jpg» alt=»» />

Π’ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… случаях (HTML4, HTML5) это Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, примСняСмыС ΠΊ изобраТСниям Π² HTML

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ нСбольшиС манипуляции с изобраТСниями, Π² HTML ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ. НапримСр:

width – ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ
height – высота ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

Π’ΠΎΠΎΠ±Ρ‰Π΅, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ автоматичСский опрСдСляСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ с высотой ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅, подгоняя ΠΏΠΎΠ΄ Π±Π»ΠΎΠΊ, Ссли ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° большС. Если мы выставляСм ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² %, Ρ‚ΠΎ ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Ссли выставляСм Π² пиксСлях Ρ‚ΠΎ отобраТаСтся просто Π² пиксСлях. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹ΡˆΠ΅ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅. НапримСр:

<img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»» />

ΠŸΡ€ΠΈ нСсоотвСтствии ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Ρ…, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ. Если Π²Ρ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‰ΠΈΠ΅ΡΡ ΠΎΡ‚ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»Π°, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΊΠ°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. НапримСр:

<img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»» />

Для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ссли лСнь Π²Ρ‹ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΠΈ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅), ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ. ΠšΡΡ‚Π°Ρ‚ΠΈ, Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ Β«20pxΒ», ΠΌΠΎΠΆΠ½ΠΎ просто Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Β«20Β». ИдСм дальшС, Π½Π° ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ alt.

alt – Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст (ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС изобраТСния)

НСсмотря Π½Π° Ρ‚ΠΎ Ρ‡Ρ‚ΠΎ эра ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° ΠΏΡ€ΠΎΡˆΠ»Π° ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚, ΠΏΠΎ этому Ρ‚Π΅Π³Ρƒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ поисковыС систСмы ранТируя Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Π² поискС ΠΏΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ, Π° Ρ‚Π°ΠΊΠΆΠ΅ опрСдСляя Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΡƒ Π²Π΅Π±-страницы. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° alt Π½Π΅ показываСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΊΠΎΠΉ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ HTML-ΠΊΠΎΠ΄Π°:

<img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ сайта blogwork.ru» />

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

title – Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‡ΠΈΠ²Π°Π΅Ρ‚ΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ ΠΌΡ‹ΡˆΠΊΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² поисковой ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ HTML-ΠΊΠΎΠ΄Π°:

<img title=»Π’ставляСм Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ» src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»» />

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ это vspace, hspace ΠΈ border.

vspace – этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π·Π°Π΄Π°Π΅Ρ‚ отступ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ тСкстом Π²ΠΎΠΊΡ€ΡƒΠ³ (Π² пиксСлях)

hspace – этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π·Π°Π΄Π°Π΅Ρ‚ отступ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ тСкстом Π²ΠΎΠΊΡ€ΡƒΠ³ (Π² пиксСлях)

border – этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π·Π°Π΄Π°Π΅Ρ‚ Ρ€Π°ΠΌΠΊΡƒ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ (Π² пиксСлях)

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ HTML-ΠΊΠΎΠ΄Π°:

<img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»» border=»10″ hspace=»20″ vspace=»5″ />

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

align – (right, left, middle) этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈΠ· ΠΊΡ€Π°Π΅Π², Π»ΠΈΠ±ΠΎ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ

Код:

<img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»» align=»right» />

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Β 

Β 

Β 

Помимо этого ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ style, Ссли Π²Π°ΠΌ Ρ‚Π°ΠΊ хочСтся:

<img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»» />

Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ получится:

Π‘Π°ΠΉΡ‚Ρ‹ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΡ€ΠΈΡΠ²Π°ΠΈΠ²Π°ΡŽΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ классы Π² эстСтичСских цСлях, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈΠΌΠ΅Π»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ обрамлСния (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ°ΠΊΠΈΠ΅-Π½ΠΈΠ±ΡƒΠ΄ΡŒ красивыС border). Π’ .css Ρ„Π°ΠΉΠ»Π΅ задаСтся ΠΎΠ±Ρ‰ΠΈΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ для ΠΎΠ΄Π½ΠΎΠ³ΠΎ класса, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, pic. Π—Π°Ρ‚Π΅ΠΌ ΠΎΠ½ указываСтся Π² HTML:

<img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»» />

На этом базовая Ρ‡Π°ΡΡ‚ΡŒ Ρ‚Π΅ΠΎΡ€ΠΈΠΈ Π·Π°ΠΊΠΎΠ½Ρ‡Π΅Π½Π°, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ возмоТностям.

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:

Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Ρ‡ΡƒΠΆΠΎΠ³ΠΎ сайта

МоТно Π»ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с Ρ‡ΡƒΠΆΠΎΠ³ΠΎ сайта? МоТно. Π­Ρ‚ΠΎ называСтся Ρ…ΠΎΡ‚Π»ΠΈΠ½ΠΊ (hotlink). НС всС вСбмастСра это Π»ΡŽΠ±ΡΡ‚ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° подгруТаСтся с Ρ‡ΡƒΠΆΠΎΠ³ΠΎ хостинга ΠΈ Ссли ΠΌΡ‹ всС Π½Π°Ρ‡Π½Π΅ΠΌ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ с Ρ‡ΡƒΠΆΠΎΠ³ΠΎ хостинга, Π° ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ слабым ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹ΠΌ для этого (ΠΊΠ°ΠΊ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сайты-хостинги ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ) Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ‡Π°Π»ΡŒ. Но Π’ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅ Π½Π΅ Ρ‚Π°ΠΊΠΎΠΉ. Π’ΠΎΡ‚ смотритС, Π·Π°Ρ…ΠΎΠΆΡƒ Π² Ρ‡ΡƒΠΆΠΈΠ΅ сохранСнныС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π’ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅ ΠΈ Π²ΡΡ‚Π°Π²Π»ΡΡŽ Π² html прямо Π½Π° этой страницС:

Как я это сдСлал? ΠžΡ‡Π΅Π½ΡŒ просто:

<img src=»https://pp.vk.me//c617119/v617119771/dd85/LB_9JqlQtoU.jpg» alt=»» />

По ΠΏΠΎΠ²ΠΎΠ΄Ρƒ Ρ…ΠΎΡ‚Π»ΠΈΠ½ΠΊΠΈΠ½Π³Π°. Π•Ρ‰Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ с хостинга ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ вСбмастСров ΠΏΡ€Π΅ΠΏΡΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Ρ…ΠΎΡ‚Π»ΠΈΠ½ΠΊΡƒ, фотохостинги стрСмятся Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° этом. А Π·Π½Π°Ρ‡ΠΈΡ‚ ΠΊΠΎΠ΄Π° для вставки изобраТСния Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π°Π½ ΠΊΠΎΠ΄, Π²Π΅Π΄ΡƒΡ‰ΠΈΠΉ Π½Π° HTML-страницу, ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π΅ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ°. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π² ΠΎΠ±Π°!

Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π½Π° Π²Π΅Π±-страницС

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ это ΠΎΡ‡Π΅Π½ΡŒ просто β€” достаточно ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ <img> Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° ячСйки <td>

<table border=»0″ cellspacing=»0″ cellpadding=»0″>
<tbody>
<tr>
<td><img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»» /></td>
<td><img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»» /></td>
</tr>
<tr>
<td><img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»» /></td>
<td><img src=»https://blogwork.ru//wp-content/themes/newstheme/images/blogwork.jpg» alt=»» /></td>
</tr>
</tbody>
</table>

А Π²ΠΎΡ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, сдСлав Π΅Π΅ Π² качСствС Ρ„ΠΎΠ½Π° html страницы

Для этого Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒΒ Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π΅ background Ρ‚Π΅Π³Π° body ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠΌ страницы (ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΏΡ€ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ):

<body bgcolor=»#000000″ background=»http://…/background.jpg»></body>

Π’ качСствС страховки ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ bgcolor.

Бонус β€” ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ показываСтся ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, Ссли Π²Ρ‹ «всС ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Π»ΠΈΒ»?

Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ расскаТу ΠΎ нюансС, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ я сталкивался Π»ΠΈΡ‡Π½ΠΎ. НазываСтся ΠΎΠ½ нСсоотвСтствиС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Ρ„Π°ΠΉΠ»Π°.

Π‘Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ хостинг ΠΈΠ»ΠΈ Π΄Π²ΠΈΠΆΠΎΠΊ сайта Π½Π΅ Π²ΠΈΠ΄ΠΈΡ‚ Ρ€Π°Π·Π½ΠΈΡ†Ρ‹ Π² рСгистрС ΠΌΠ΅ΠΆΠ΄Ρƒ html-kartinka.png ΠΈ html-kartinka.PNG. А, Π±Ρ‹Π²Π°Π΅Ρ‚ Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Π½ΠΈΡ†Π° Π΅ΡΡ‚ΡŒ ΠΈ поэтому ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Π³Π° Π½Π΅ загруТаСтся. Π•Ρ‰Π΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° сам Ρ„Π°ΠΉΠ», вСдь ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ html-kartinka.jpg, Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈ html-kartinka.jpeg. Π’Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½Π΅Π΅!

Бидишь ΠΏΠΎΠ΄ Π²Π΅Ρ‡Π΅Ρ€ Π³ΠΎΠ»ΠΎΠ²Ρƒ ломаСшь, Π° Ρ‚Π°ΠΌ всС Π»Π΅Π³ΠΊΠΎ. И ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ просто, β€” достаточно Π·Π°Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° хостинг:

blogwork.ru

Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML, Ρ‚Π΅Π³ img ΠΈ Π΅Π³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

ЗдравствуйтС, ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ сайта Uspei.com. БСгодня ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Π±ΠΎΠ»Π΅Π΅ интСрСсной Ρ‚Π΅ΠΌΠ΅, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ вставка ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ наш Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ быстро Π·Π°Π³Ρ€ΡƒΠΆΠ°Π» ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π» страницу с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠžΠŸΠ’Π˜ΠœΠ˜Π—Π˜Π ΠžΠ’ΠΠΠΠžΠ• ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (ΠΎ Ρ‚ΠΎΠΌ для Ρ‡Π΅Π³ΠΎ ΠΈ ΠΊΠ°ΠΊ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚ΡƒΡ‚). Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π±Ρ‹ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ΅ Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΠΎ ссылкС ΠΈ сохранитС эту ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, Π½Π°ΠΆΠ°Π² ΠΏΡ€Π°Π²ΠΎΠΉ клавишСй ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±Ρ€Π°Π² «Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ».

К оглавлСнию ↑

Π’Π΅Π³ <img> ΠΈ располоТСниС ΠΏΠ°ΠΏΠΊΠΈ с изобраТСниями

Для хранСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΡ‹ Π² нашСй ΠΏΠ°ΠΏΠΊΠ΅ HTML создадим Π΅Ρ‰Π΅ ΠΎΠ΄Π½Ρƒ ΠΏΠ°ΠΏΠΊΡƒ «Images», ΠΈ помСстим ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ‚ΡƒΠ΄Π°.

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π°ΡˆΡƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠ΅ΠΆΠ΄Ρƒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π°Π±Π·Π°Ρ†Π΅ΠΌ. Для этого Π² ΠΊΠΎΠ΄Π΅ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ наш Ρ‚Π΅Π³ <img>. Π­Ρ‚ΠΎ сокращСниС ΠΎΡ‚ английского слова image – ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ это ΠΎΠ΄ΠΈΠ½Π°Ρ€Π½Ρ‹ΠΉ Ρ‚Π΅Π³.

Π‘Π°ΠΌ Ρ‚Π΅Π³ <img> Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π½ΠΈΡ‡Π΅Π³ΠΎ особо Π½Π΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ для Ρ‚Π΅Π³Π°. Π‘Π°ΠΌΡ‹ΠΉ Π³Π»Π°Π²Π½Ρ‹ΠΉ ΠΈΠ· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² – это Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ src – источник. ΠœΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ источник нашСй ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Π’ нашСм случаС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° находится Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΠ°ΠΏΠΊΠΈ images ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠ°ΠΏΠΊΠΈ HTML. Π’.Π΅. Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ наша ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° alarm.jpg находится Π² ΠΏΠ°ΠΏΠΊΠ΅ images. И Π²ΠΎΡ‚ ΠΊΠ°ΠΊ это выглядит.

<img src="images/alarm.jpg">

ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΡƒΠΊΠ°Π·Π°Π½ΠΈΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° для Ρ‚Π΅Π³Π° <img>, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΡ€ΠΈ встрСчС с Π΄Π°Π½Π½Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, Π·Π°ΠΉΠ΄Π΅Ρ‚ Π² ΠΏΠ°ΠΏΠΊΡƒ images ΠΈ Π²ΠΎΠ·ΡŒΠΌΠ΅Ρ‚ Ρ„Π°ΠΉΠ» – ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ alarm.jpg.

Но это Π΅Ρ‰Π΅ Π½Π΅ всС. Π–Π΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΅Ρ‰Π΅ ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ с высотой Π΄Π°Π½Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ‚ΠΎΡ‡Π½ΠΎ Π·Π½Π°Ρ‚ΡŒ, сколько мСста отвСсти ΠΏΠΎΠ΄ это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈ вся Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ быстрСС ΠΈ самоС Π³Π»Π°Π²Π½ΠΎΠ΅ Π±Π΅Π· смСщСний Π±Π»ΠΎΠΊΠΎΠ².

К оглавлСнию ↑

Атрибуты ΡˆΠΈΡ€ΠΈΠ½Ρ‹ width ΠΈ высоты height

Если ΠΆΠ΅ ΠΌΡ‹ Π½Π΅ ΡƒΠΊΠ°ΠΆΠ΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, Π½ΠΎ это Π·Π°ΠΉΠΌΠ΅Ρ‚ Ρƒ Π½Π΅Π³ΠΎ Ρ‡ΡƒΡ‚ΡŒΒ Π±ΠΎΠ»ΡŒΡˆΠ΅ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π΅ΠΌΡƒ придСтся сначала Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС этого ΠΎΠ½ смоТСт ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, сколько мСста Π΅ΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ. Если ΠΆΠ΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ для изобраТСния ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ, Ρ‚ΠΎ это Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ упростит Π·Π°Π΄Π°Ρ‡Ρƒ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Π² ΠΊΠΎΠ΄Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ согласно ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΏΠΎ Π½Π΅ΠΉ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡƒΠ½ΠΊΡ‚ мСню «Бвойства». Π”Π°Π»Π΅Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Β«ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΒ».

Как Π²ΠΈΠ΄Π½ΠΎ, ΡˆΠΈΡ€ΠΈΠ½Π° Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ 307 пиксСлСй, Π° высота – 450 пиксСлСй. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π² ΠΊΠΎΠ΄Π΅:

<img src="images/alarm.jpg">
К оглавлСнию ↑

Атрибут alt для Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ подписи

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ‚Π΅Π³Π° <img>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ изобраТСния – это alt. Он ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Ρ‚Π΅Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚, Ρƒ ΠΊΠΎΠ³ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ. Π’.Π΅. Ссли ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹, вмСсто нашСй ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚ Ρ‚ΠΎ слово ΠΈΠ»ΠΈ словосочСтаниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° alt. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, поисковыС систСмы ΠΏΡ€ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ цСнности вашСго сайта ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π½Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Β alt Ρƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, поэтому Π΅Π³ΠΎ постановка ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Π°.

<img src="images/alarm.jpg" width = "307" alt="Π‘ΡƒΠ΄ΠΈΠ»ΡŒΠ½ΠΈΠΊ">

Π­Ρ‚ΠΈ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° для Ρ‚Π΅Π³Π° <img>Β ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π½Π° страницу ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ. Π•Ρ‰Π΅ Ρ€Π°Π· ΡƒΠΊΠ°ΠΆΡƒ эти Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°: источник, ΡˆΠΈΡ€ΠΈΠ½Π°, высота ΠΈ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст.

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅:

Рисунок Ρƒ нас появился ΠΈΠΌΠ΅Π½Π½ΠΎ Π² Ρ‚ΠΎΠΌ мСстС, Π³Π΄Π΅ ΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Π». Но Ссли Π²Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ, хотя ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Ρƒ нас всСго 307 пиксСлСй Π² ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΡ‚Π²ΠΎΠ΄ΠΈΡ‚ Π΅ΠΉ всю строку ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ. ΠžΡ‡Π΅Π½ΡŒ часто Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ Π·Π°Π΄Π°Ρ‡Π° ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст послС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π» Π΅Π΅, Ρ‚.Π΅. встал Π½Π° ΠΎΠ΄Π½ΠΎΠΉ строкС с Π½Π΅ΠΉ. Вакая Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ сущСствуСт. РСализуСтся ΠΎΠ½Π° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π·Π½Π°ΠΊΠΎΠΌΠΎΠ³ΠΎ Π½Π°ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° align – Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅.

К оглавлСнию ↑

Атрибут align для выравнивания изобраТСния

Π”Π°Π½Π½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ для нашСго Ρ‚Π΅Π³Π° <img>. Для этой ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ (right), Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΡƒΠΉΠ΄Π΅Ρ‚ Π² ΠΏΡ€Π°Π²ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ экрана, ΠΈ тСкст Π΅Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ слСва. Или ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ (left) – Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΡƒΠΉΠ΄Π΅Ρ‚ Π² Π»Π΅Π²ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ экрана, ΠΈ тСкст Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ Π΅Π΅ справа. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ для нашСго Ρ‚Π΅Π³Π° <img>.

<img src="images/alarm.jpg" width = "307" alt="Π‘ΡƒΠ΄ΠΈΠ»ΡŒΠ½ΠΈΠΊ" align="left">

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

Π’ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ тСкст ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с ΠΏΡ€Π°Π²ΠΎΠΉ стороны, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄Π°Π»ΠΈ для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π° ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ.

<img src="images/alarm.jpg" width = "307" alt="Π‘ΡƒΠ΄ΠΈΠ»ΡŒΠ½ΠΈΠΊ" align="right">

К оглавлСнию ↑

Атрибут title для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки

И Π½Π°ΠΊΠΎΠ½Π΅Ρ† Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых Π²Π°ΠΆΠ½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² — «title» — ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ‚ подсказку для изобраТСния ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΠΌΡ‹ΡˆΠΊΠΎΠΉ.

<img src="images/alarm.jpg" width = "307" alt="Π‘ΡƒΠ΄ΠΈΠ»ΡŒΠ½ΠΈΠΊ" align="right" title="Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ старого Π±ΡƒΠ΄ΠΈΠ»ΡŒΠ½ΠΈΠΊΠ° ">

Π”ΠΎ встрСчи! УспСвайтС всё ΠΈ всСгда Π½Π° страницах Π±Π»ΠΎΠ³Π° Uspei.com

Π’Π²ΠΈΡ‚Π½ΡƒΡ‚ΡŒ

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ

ΠŸΠ»ΡŽΡΠ°Π½ΡƒΡ‚ΡŒ

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ

ΠšΠ»Π°ΡΡΠ½ΡƒΡ‚ΡŒ

Π›ΠΈΠ½ΠΊΠ°Π½ΡƒΡ‚ΡŒ

Π—Π°ΠΏΠΈΠ½ΠΈΡ‚ΡŒ

Π‘ΡƒΠ΄Ρƒ Π±Π»Π°Π³ΠΎΠ΄Π°Ρ€Π΅Π½, Ссли ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ Π½ΠΎΠ²ΠΎΡΡ‚ΡŒΡŽ Π² соцсСтях

uspei.com

Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² HTML. Π£Ρ€ΠΎΠΊ — 7 (для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…).

ВсСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚!!! По этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ Π½Π°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² HTML Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. Π­Ρ‚ΠΎ вовсС Π½Π΅ слоТно. Но Π²Π½Π°Ρ‡Π°Π»Π΅ я Π±Ρ‹ Ρ…ΠΎΡ‚Π΅Π» Π²Π°ΠΌ Π΄Π°Ρ‚ΡŒ нСсколько Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π½Π° Π²Π΅Π±-страницС.

Π‘ΠΎΠ²Π΅Ρ‚: ΠΊΠΎΠ³Π΄Π° Π±ΡƒΠ΄Π΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° Π²Π΅Π±-страницу, Π½Π΅ ΡƒΠ²Π»Π΅ΠΊΠ°ΠΉΡ‚Π΅ΡΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ это ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ читатСля ΠΎΡ‚ самого Π²Π°ΠΆΠ½ΠΎΠ³ΠΎ — тСкста. Π›ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π±Π΅Π· Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
Π‘Ρ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Π²Π΅Π±-страничках ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Ρ‚ΡƒΡ‚, Π° Π²Π·ΡΡ‚ΡŒ красивыС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ здСсь.

ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΠΌ.

Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² html?
Π’Π°ΠΊ, ΠΊΠ°ΠΊ я Π³ΠΎΠ²ΠΎΡ€ΠΈΠ» — здСсь слоТного Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅Ρ‚, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ этот html ΠΊΠΎΠ΄.

<img src=»kartinka.jpg»>

kartinka — это Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ
jpg — это Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ gif, png, bmp.

Если ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π° Π² ΠΏΠ°ΠΏΠΊΠ΅Β images, Ρ‚ΠΎΠ³Π΄Π° ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ:

<img src=»Β images/kartinka.jpg»>

images — Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ°ΠΏΠΊΠΈ, Π³Π΄Π΅ Π»Π΅ΠΆΠΈΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° «kartinka.jpg».

Если ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π»Π΅ΠΆΠΈΡ‚ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ сайтС, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ:

<img src=»https://www.bloggood.ru/images/kartinka.jpg»>

https://www.bloggood.ru — это адрСс сайта.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² html</title>
</head>
<body>
<img src="kartinka.jpg">
</body>
</html>

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Β html ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ссылкой?

Для этого просто Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΌΠ΅ΠΆΠ΄Ρƒ ссылочным элСмСнтом:

<a href=»Π°Π΄Ρ€Π΅Ρ ссылки»><img src=»kartinka.jpg»></a>

Атрибуты для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ

ALIGN — этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для обтСкания ΠΈΠ»ΠΈ выравнивания ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.
left —Β Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, тСкст Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ справа.
right —Β Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, тСкст ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ слСва.

<img src=»kartinka.png» align=»right»>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ

HSPACE — отступы ΠΎΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈΒ (Π² пиксСлях).
VSPACE — отступы ΠΎΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ (Π² пиксСлях).

<img src=»kartinka.png» align=»right» hspace=»15″ vspace=»15″>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

отступы ΠΎΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

HEIGHT — высота изобраТСния (пиксСлях).
WIDTHΒ — ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния Β (пиксСлях).

<img src=»kartinka.png» align=»right» hspace=»15″ vspace=»15″>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

высота ΠΈ ΡˆΠΈΡ€Π΅Π½Π° изобраТСния

TITLE это Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ, Ссли навСсти Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ курсор ΠΌΡ‹ΡˆΠΊΠΈ.

<img src=»kartinka.png» align=»right» hspace=»15″ vspace=»15″Β width=»100″ Β title=»Π’сСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚ — bloggood_ru!!! «>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

BORDER — этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ€Π°ΠΌΠΊΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Π Π°ΠΌΠΊΠΈ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π² Ρ‚Π°ΠΊΠΈΡ… случаях, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ сдСлаСтС ссылкой. Если ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½ΡƒΠ»Π΅Π²ΠΎΠ΅Β Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Β BORDER , Ρ€Π°ΠΌΠΊΠ° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚.

<a href=»Π°Π΄Ρ€Π΅Ρ ссылки»><img src=»kartinka.png» border=»0″></a>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

А Ссли ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ border Π½Π° 5:

<a href=»Π°Π΄Ρ€Π΅Ρ ссылки»><img src=»kartinka.png» border=»5″></a>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ„ΠΎΠ½ΠΎΠΌ?

Π›ΡŽΠ±ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠΌ. Для этого Π² Ρ‚Π΅Π³Π΅Β bodyΒ ΠΏΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Β background.

<bodyΒ background=»Π²Π°Ρˆ_Ρ„ΠΎΠ½.jpg»>

На ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΡ‡Π½ΠΎΠΌ Ρ„ΠΎΠ½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ тСкст.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ссылку-ΡΠΊΠΎΡ€ΡŒ Π² html</title>
</head>
<body background="kartinka.jpg">

<p>тСкст</p>
<p>тСкст</p>

</body>
</html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊ Ρ„ΠΎΠ½

На этой Π½ΠΎΡ‚Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΈ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ «ΠšΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² HTML», Π½ΠΎ знаю, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… интСрСсуСт вопрос, Π° ΠΊΠ°ΠΊ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.
Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ,Β Π²Π°ΠΌ достаточно ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ фокус:

<center>
<img src=»kartinka.jpg»>
</center>

Π’ΠΎΡ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎ всС. ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ ΡƒΡ€ΠΎΠΊΡƒ.

ΠŸΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΡΡ пост? Помоги Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎΠ± этой ΡΡ‚Π°Ρ‚ΡŒΠ΅, ΠΊΠ»ΠΈΠΊΠ½ΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй ↓↓↓

ПослСдниС новости ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ:

ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Ρ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

bloggood.ru

Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² HTML β€” Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²Π΅Π±-страницу

Π—Π° вставку ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π² HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Ρ‚Π΅Π³ <img> ΠΈ Π΅Π³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, Π³Π»Π°Π²Π½Ρ‹ΠΌ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ src, Π·Π°Π΄Π°ΡŽΡ‰ΠΈΠΉ адрСс изобраТСния. Он являСтся ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ссли Π½Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Π³Π΄Π΅ Π²Π·ΡΡ‚ΡŒ рисунок, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ смоТСт ΡƒΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π½Π° страницу.

ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠΉ случай вставки ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ (ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ называСтся image.png ΠΈ находится Π² Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚):

<img src=”image.png”>

РаньшС Ρƒ Ρ‚Π΅Π³Π° <img> Π±Ρ‹Π» Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ β€” alt, Π½ΠΎ с ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΎΠΌ HTML 5 ΠΎΠ½ Π±Ρ‹Π» ΠΏΠ΅Ρ€Π΅Π²Π΅Π΄Ρ‘Π½ Π² разряд ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ…. alt устанавливаСт тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚ вмСсто ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Ссли ΠΎΠ½Π° Π²Π΄Ρ€ΡƒΠ³ Π½Π΅ загрузится. Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽΡ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ‚ΠΎΡ€Ρ‹, ΠΏΠΎΡ‚ΠΎΠΌΡƒ ΠΊΠ°ΠΊ считаСтся, Ρ‡Ρ‚ΠΎ это ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ сказываСтся Π½Π° ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ Π² поисковиках.

Если Π½Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², Ρ‚ΠΎ ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π²Π΅Π΄Π΅Π½ΠΎ Π² ΠΏΠΎΠ»Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€, Π° Π½ΡƒΠΆΠ½ΠΎ это Π±Ρ‹Π²Π°Π΅Ρ‚ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ всСгда. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ рисунку ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² width (ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ) ΠΈ height (опрСдСляСт высоту). Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π»ΠΈΠ±ΠΎ Π² пиксСлях, Π»ΠΈΠ±ΠΎ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ…. Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ случаС ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ ΠΎΠ±ΠΎΠ·Ρ€Π΅Π²Π°Ρ‚Π΅Π»ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π°Π±Π·Π°Ρ†Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ вставлСна ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°).

Допустим, Π½Π°ΠΌ трСбуСтся Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π° страницу ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ image.png с Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ тСкстом Β«ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°Β», ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 420 ΠΈ Π΄Π»ΠΈΠ½ΠΎΠΉ 280 пиксСлСй. Код Π² Ρ‚Π°ΠΊΠΎΠΌ случаС Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ:

<img src="image.png" alt="ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°">

Навигационная ΠΊΠ°Ρ€Ρ‚Π°

О Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ссылкой, ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅. Однако HTML позволяСт Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π½Π΅ ΠΎΠ΄Π½Ρƒ ссылку, Π° сразу нСсколько. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, щёлкая Π½Π° Ρ€Π°Π·Π½Ρ‹Π΅ мСста ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎ Ρ€Π°Π·Π½Ρ‹ΠΌ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-адрСсам. Π­Ρ‚Ρƒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для создания эффСктного мСню, ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… тСстов ΠΈΠ»ΠΈ наглядных графичСских ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ.

Для создания ΠΊΠ°Ρ€Ρ‚Ρ‹ изобраТСния (ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ называСтся описанная Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ) понадобятся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ‚Π΅Π³ΠΈ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹:

  • <map> β€” ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ описываСтся ΠΊΠ°Ρ€Ρ‚Π° изобраТСния.
  • <area> β€” Ρ‚Π΅Π³ Π²Π½ΡƒΡ‚Ρ€ΠΈ <map>, ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΎΠ΄Π½Ρƒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. На сколько Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… областСй планируСтся Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ элСмСнтов <area> ΠΈ придётся ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ. Бвязка <map><area> Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ связки <ol><li> ΠΈ <ul><li>, ΡΠΎΠ·Π΄Π°ΡŽΡ‰ΠΈΠ΅ списки.
  • shape β€” Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ‚Π΅Π³Π° <area>, Π·Π°Π΄Π°ΡŽΡ‰ΠΈΠΉ Ρ„ΠΎΡ€ΠΌΡƒ ссылки. Активная ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°, ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° ΠΈΠ»ΠΈ ΠΊΡ€ΡƒΠ³Π°.
  • cords β€” ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ области Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚. Π’Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ Ρ‚Π΅Π³Ρƒ <area>. Для ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΠΈ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡƒΠ³Π»ΠΎΠ², для ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° β€” ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π²Π΅Ρ€ΡˆΠΈΠ½, опрСдСляя ΠΊΡ€ΡƒΠ³, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π΅Π³ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π° ΠΈ радиус.
  • usemap β€” Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ‚Π΅Π³Π° img, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ связываСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΊΠ°Ρ€Ρ‚ΠΎΠΉ. Благодаря Π΅ΠΌΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ <map> описана ΠΊΠ°Ρ€Ρ‚Π° ΠΈΠΌΠ΅Π½Π½ΠΎ этого рисунка.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠ°Ρ€Ρ‚Ρ‹ изобраТСния

Π§Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΎ понятно, ΠΊΠ°ΠΊ всСм Π²Ρ‹ΡˆΠ΅ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½Π½Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ, ΠΏΡ€ΠΈΠ²Π΅Π΄Ρƒ элСмСнтарный ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π•ΡΡ‚ΡŒ рисунок map.jpg. Π•Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° Π΄Π²Π΅ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ области. Π©Π΅Π»Ρ‡ΠΎΠΊ Π½Π° Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части (Π·Π΅Π»Ρ‘Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚) ΠΎΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ сайт «Одноклассники», ниТняя ΠΆΠ΅ Ρ‡Π°ΡΡ‚ΡŒ (синий Ρ†Π²Π΅Ρ‚) Π±ΡƒΠ΄Π΅Ρ‚ вСсти Π½Π° Β«Π’ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅Β». Бсылки Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π² Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅. Для создания ΠΊΠ°Ρ€Ρ‚Ρ‹ выполняСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ шаги.

1. ВставляСм ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° страницу ΠΈ привязываСм Π΅Π³ΠΎ ΠΊ Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΉ ΠΊΠ°Ρ€Ρ‚Π΅ (ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ social), для Ρ‡Π΅Π³ΠΎ пишСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

<img src="map.jpg" alt="ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ°Ρ ΠΊΠ°Ρ€Ρ‚Π°" usemap="#social">

2. ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅ΠΌ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠ΅ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ области ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ΠΈΠΌ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² Paint, Photoshop ΠΈΠ»ΠΈ любом Π΄Ρ€ΡƒΠ³ΠΎΠΌ графичСском Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅. Π’ нашСм случаС всё элСмСнтарно: ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΈ Ρ€Π°Π²Π½Ρ‹ ΠΈ ΠΏΠΎ высотС (114 пиксСлСй) ΠΈ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ (384 пиксСля).

3. НачинаСм ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚Ρƒ: ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Ρ‚Π΅Π³ΠΈ прописываСм Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ name Π΅Ρ‘ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ свойства usemap самой ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ:

4. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³ΠΎΠ² area опрСдСляСм Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ области:

<area shape="rect" coords="0,0,384,114" href="http://ok.ru" alt="Одноклассники" target="_blank">
<area shape="rect" coords="0,114,384,228" href="http://vk.com" alt="Π’ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅" target="_blank">

5. Π—Π°ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ ΠΊΠ°Ρ€Ρ‚Ρƒ:

Π˜Ρ‚ΠΎΠ³ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚Ρ‹ стала ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, Ρ‰Π΅Π»Ρ‡ΠΎΠΊ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… частях ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Π΅Π΄Ρ‘Ρ‚ ΠΊ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΡŽ Ρ€Π°Π·Π½Ρ‹Ρ… ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй, ΠΈ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠΉ HTMLΠΊΠΎΠ΄:

<!DOCTYPE html>
<html>
<head>
    <title>Навигационная ΠΊΠ°Ρ€Ρ‚Π°</title>
</head>
<body>
<img src="map.jpg" alt="ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ°Ρ ΠΊΠ°Ρ€Ρ‚Π°" usemap="#social">
<map name="social">
<area shape="rect" coords="0,0,384,114" href="http://ok.ru" alt="Одноклассники" target="_blank">
<area shape="rect" coords="0,114,384,228" href="http://vk.com" alt="Π’ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅" target="_blank">
</body>
</html>

НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π±Ρ‹Π» рассмотрСн самый простой случай, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, ΠΎΠ½ наглядно дСмонстрируСт ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ создания Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚. Π”Π°Π»ΡŒΡˆΠ΅ β€” Π΄Π΅Π»ΠΎ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ ΠΈ опрСдСлСния ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚, с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния HTML Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ услоТняСтся.

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ссылки:

www.seostop.ru

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² ЯндСкс ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ

Май 13th, 2018 Π›ΡŽΠ±ΠΎΠ²ΡŒ Π—ΡƒΠ±Π°Ρ€Π΅Π²Π°

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ!

ΠŸΠ°Ρ€Ρƒ Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· статСй ΠΏΡ€ΠΎ ЯндСкс Диск Π² коммСнтариях ΠΌΠ½Π΅ Π·Π°Π΄Π°Π»ΠΈ вопрос: ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ Π½Π° ЯндСксС.

Π­Ρ‚Π° Ρ‚Π΅ΠΌΠ° показалась ΠΌΠ½Π΅ интСрСсной, поэтому сСгодня Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ Π΄Π°Π½Π½Ρ‹ΠΉ вопрос.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² ЯндСкс ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ

ЯндСкс ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ β€” это Π½Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° вашСм дискС. Π­Ρ‚ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ мСсто.

Π’Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ Π°Π»ΡŒΠ±ΠΎΠΌΡ‹ Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅ (доступныС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π°ΠΌ) ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΡ‡Ρ‚Π° ЯндСкс (инструкция ΠΏΠΎ созданию ΠΏΠΎΡ‡Ρ‚Ρ‹).

Π—Π°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ Π² ЯндСкс, Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ Π½Π° Β«ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈΒ».

Π‘Π½Π°Ρ‡Π°Π»Π° ΠΈΠ΄Π΅Ρ‚ надпись «Моя Π»Π΅Π½Ρ‚Π°Β»: здСсь Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² свою ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ, ΠΈ Π² Π˜Π·Π±Ρ€Π°Π½Π½ΠΎΠ΅ (Π·Π½Π°Ρ‡ΠΎΠΊ сСрдСчка).

Нас интСрСсуСт ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° «Мои ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈΒ». И Π΄Π°Π»Π΅Π΅ Π½Π°ΠΆΠΈΠΌΠ°ΠΉΡ‚Π΅ Π»ΠΈΠ±ΠΎ Π½Π° плюсик, Π»ΠΈΠ±ΠΎ Π½Π° надпись «Новая коллСкция) β€” ΠΈΡ‚ΠΎΠ³ ΠΎΠ΄ΠΈΠ½.

Π’Π°ΠΌ откроСтся ΠΎΠΊΠ½ΠΎ, ΠΊΡƒΠ΄Π° Π½ΡƒΠΆΠ½ΠΎ Π²ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, описаниС, ΡƒΡΡ‚Π°Π²ΠΈΡ‚ΡŒ настройки приватности ΠΈ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ Π½Π΅Ρ‚ списком ΠΆΠ΅Π»Π°Π½ΠΈΠΉ. НаТмитС Β«Π“ΠΎΡ‚ΠΎΠ²ΠΎΒ».

Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° я создала ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ с ΠΌΠΎΠΈΠΌΠΈ ТСланиями для ΠΏΠΎΠΊΡƒΠΏΠΊΠΈ.

ПослС этого ваша коллСкция Π±ΡƒΠ΄Π΅Ρ‚ сохранСна. Π― Π΅Π΅ сдСлала Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΎΠΉ (доступной Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ½Π΅) β€” поэтому Π²ΠΎΠ·Π»Π΅ Π½Π΅Π΅ Π·Π°ΠΌΠΎΡ‡Π΅ΠΊ.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ сколько ΡƒΠ³ΠΎΠ΄Π½ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ (ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ). Для этого ΠΆΠΌΠΈΡ‚Π΅ Β«Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒΒ».

Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ Π½ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Ρ„ΠΎΡ‚ΠΎ ΠΈΠ· ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° ΠΈΠ»ΠΈ с ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°.

МоТно просто Π²Π±ΠΈΡ‚ΡŒ запрос ΠΈ Π²Π°ΠΌ Π²Ρ‹Π΄Π°Π΄ΡƒΡ‚ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈΠ· поиска.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ сСбС Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° плюсик (появляСтся ΠΏΡ€ΠΈ Π½Π°Π²ΠΎΠ΄Π΅ ΠΌΡ‹ΡˆΠΊΠΎΠΉ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ).

Π’Ρ‹Π±Ρ€Π°Π»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π΄Π°Π»Π΅Π΅ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ для сохранСния ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒΒ».

Π’Π°ΠΊ ΠΊΠ°ΠΊ я Π² настройках ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΠ»Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ТСланиями, Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΠ»Π°ΡΡŒ надпись Β«1 ΠΆΠ΅Π»Π°Π½ΠΈΠ΅Β».

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, откроСтся фотография. Π—Π΄Π΅ΡΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΈ описаниС, Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ «исполнСнноС ΠΆΠ΅Π»Π°Π½ΠΈΠ΅Β».

Π’Π½ΠΈΠ·Ρƒ справа Π½Π° страничкС Π²Π°ΠΌ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ°Ρ‚ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для удобства использования.

Π’ ЯндСкс ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ Π΅ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ€Π°Π·Π΄Π΅Π»ΡŽ мСню, смотритС ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ Π½ΠΈΠΆΠ΅.

Если ΠΏΡ€ΠΈ создании ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ Π²Ρ‹ сдСлаСтС Π΅Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΉ, Ρ‚ΠΎΠ³Π΄Π° ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ.

ΠŸΠΎΡΠ²ΡΡ‚ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ подСлится Π² ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтях, ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ подписчики.

А сСгодня, это всС.

Π― надСюсь, Ρ‡Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π»Π΅Π³ΠΊΠΎ смоТСтС ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свои ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ.

Бпасибо всСм Π·Π° ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ связь. Π’Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ ΠΊ любой ΡΡ‚Π°Ρ‚ΡŒΠ΅, ΠΈΠ»ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ свой вопрос. И, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ Π·Π°ΠΌΠ΅Ρ‚ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ написана ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для вас.

Π‘ ΡƒΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π›ΡŽΠ±ΠΎΠ²ΡŒ Π—ΡƒΠ±Π°Ρ€Π΅Π²Π°


Π”ΠΎΡ€ΠΎΠ³ΠΈΠ΅ гости! Если Π²Π°ΠΌ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΠ»Π°ΡΡŒ информация Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° Π»ΡŽΠ±ΡƒΡŽ ΠΈΠ· ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй. Π­Ρ‚ΠΎ вашС Π»ΡƒΡ‡ΡˆΠ΅Π΅ «спасибо».


Untitled Document

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ записи ΠΈ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ. Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ссылок Π·Π°ΠΏΡ€Π΅Ρ‰Π΅Π½ΠΎ.

lubovzubareva.ru

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *

АвторскоС ΠΏΡ€Π°Π²ΠΎ © 2024 Es picture - ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ
top