<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Ссылки и изображения в HTML

Ссылки и изображения в HTML

В этой статье я расскажу Вам о добавлении изображений и ссылок на Вашу HTML-страницу.

Я думаю, что Вы ни разу не встречали ни одной страницы в Интернете, на которой не было ни одного изображения или ссылки. Поэтому материал данной статьи весьма важен, в то же время он очень прост, благодаря чему его сможет освоить даже школьник.

Первое, что мы сделаем - это добавим HTML ссылку на нашу страницу.

Для этого напишем в теге <body> такой код:

<a target = "_self" href = "index.html" title = "Ссылка">Ссылка на эту страницу</a>

Тег HTML <a> означает начало ссылки. У этого тега есть различные атрибуты. Давайте начнём с "target".

Атрибут "target" может принимать три значения (их чуть больше, но они слишком редко применяются, поэтому не буду их даже упоминать): "_self", "_new", "_blank". Вообще говоря, результат этих атрибутов у разных браузеров зачастую происходит по-разному, поэтому я скажу, что означает каждое значение атрибута "target" лишь в теории, а не на практике.

Значение "_self" означает, что страница откроется в этом же окне.

Значение "_new" означает, что страница откроется в новом окне (некоторые браузеры открывают не новое окно, а создают новую вкладку в браузере).

Значение "_blank" означает, что страница будет открыта в новой вкладке.

Я настоятельно рекомендую Вам испробовать все значения этого атрибута в различных браузерах, чтобы окончательно понять, что каждое из них означает.

Следующий атрибут "href" означает путь к странице. Так как нам пока ссылаться не на что, то приходится сослаться на ту же страницу. Что касается формы записи, то здесь бывают абсолютные и относительные пути.

Абсолютный путь задаёт полный путь к файлу, например, так: "http://mysite.ru/images/image1.gif". А относительный путь указывают путь относительно каталога, в котором находится текущий файл. Например, наш файл "index.html" лежит в корне сервера, а мы пишем: "href = 'images/image1.gif'". Это означает то же самое, что и если бы мы написали: "http://mysite.ru/images/image1.gif". Это, что касается абсолютных и относительных путей.

Надеюсь, что с атрибутом "href" всё стало понятно. Разумеется, ссылаться можно не только на HTML-страницы, но и на любые файлы, будь то картинки, будь то фильмы, будь то музыка, будь то архивы, будь то ещё всё, что угодно.

Последний атрибут - это "title". Здесь всё совсем просто. Этот атрибут задаёт текст, который будет виден при наведении мышки на ссылку.

С атрибутами тега <a> покончено. Что касается того, что внутри тега, то здесь только Ваша фантазия. В большинстве случаев - это обычный текст, как, например, у нас. Очень часто делают картинку внутри тега <a>, тогда эта ссылка будет в виде картинки.

Тег </a> означает конец гиперссылки.

Также можно задавать цвет ссылок. Опять же будет работать или нет - зависит от браузера. Но всё-таки, давайте я Вас с этим познакомлю. Добавим в тег <body> три атрибута : "link", "vlink" и "alink". Каждый из этих трёх атрибутов может принимать значение какого-либо цвета. Атрибут "link" означает цвет непосещённой ссылки. Соответственно, "vlink" указывает цвет посещённой ссылки. И, наконец, атрибут "alink" указывает цвет ссылки в момент непосредственного нажатия. Как видите, здесь тоже ничего сложного нет.

Теперь добавим изображения, но прежде, чем это делать. Сразу после добавления HTML-ссылки ставим тег "<br>". Этот тег также является одиночным, и он означает переход на новую строку. Напишем в теге <body> такой код:

<img src = "image1.gif" alt = "Картинка" width = "100" height = "100">

Тег <img> означает, что мы хотим добавить здесь изображение. Этот тег, как видно, является одиночным, то есть у него нет закрывающего тега. Атрибуты тега также очень и очень простые.

Атрибут "src" указывает путь к картинке. Опять же можно указывать, как абсолютный путь, так и относительный путь, в зависимости от ситуации.

Атрибут "alt" указывает текст, который описывает картинку. Этот же текст будет показываться в случае, если картинка по каким-либо причинам будет не найдена, либо у пользователя в браузере отключён показ картинок. Очень желательно этот атрибут ставить, так как это помогает оптимизации сайта (впрочем, это уже раскрутка сайта, а не его создание).

Атрибуты "width" и "height" указывают ширину и высоту картинки соответственно. Если их не указывать, то картинка будет иметь такой размер, какой имеет исходник.

Советую потренироваться, выводя различные изображения, только предварительно разместите файлы картинок вместе с "index.html". Например, создайте в этом же каталоге папку "images" и размещайте туда изображения. А в атрибуте "src" пишите значение "images/Имя файла картинки".

Таким образом, код Вашей страницы должен быть примерно таким:

<html>
<head>
</head>
<body text = "green" bgcolor = "yellow" link = "green" vlink = "red" alink = "blue">
  <h1>Заголовок 1-го уровня</h1>
  <a target = "_new" href = "index.html" title = "Ссылка">Ссылка на эту страницу</a>
  <br>
  <img src = "Водяные лилии.jpg" alt = "Картинка" width = "100" height = "100">
</body>
</html>

Вот и вся наука. Как видите, ничего сложного нет, как и всё в базовых знаниях по HTML и базовых знаниях по созданию сайта.

До встречи в следующей статье.

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (149):

Alim_(I) Alim_(I) 30.04.2011 21:28:03

Как думаете, вот щас я гдето 90% языка HTML знаю. Эти 10% не обязательно знать? Мне можно приступать к CSS? Или надо абсолютно весь язык HTML знать? Можете подсказать?

Ответить

Admin Admin 30.04.2011 22:01:21

Этого более чем достаточно для начала. Впоследствии с практикой наберётесь опыта.

Ответить

Alim_(I) Alim_(I) 01.05.2011 08:01:00

Спасибо за ответ.

Ответить

fatey fatey 06.12.2011 18:32:31

Добрый вечер! Не понимаю что не так? Сделал всё как вы написали, но картинки нет (квадратик с разорванной страничкой в верхнем углу). Всё проверил-всё правильно, как вы написали. Создал папку-обозвал images, скинул туда фотку-обозвал 7 получилось <img scr = "images/7.jpg" alt = "Картинка" width = "100" height = "100"> Не выходит. Что я не так делаю?

Ответить

Admin Admin 06.12.2011 19:44:39

Всё-таки не так, как у меня. У меня в статье атрибут называется src, а у Вас он почему-то называется scr.

Ответить

fatey fatey 06.12.2011 19:57:40

I'm sorry. Слона, и не заметил. Раз 7 проверял, так и не увидел. Большое вам спасибо. Буду внимательнее.

Ответить

crashone277 crashone277 01.01.2012 16:56:27

Я тут хотел спросить... Как добавить музыку на сайт. Если это статья уже есть дайте ссылку пожалуйста!

Ответить

Admin Admin 01.01.2012 17:14:46

Вот статья про это: http://myrusakov.ru/html-add-audio.html

Ответить

crashone277 crashone277 01.01.2012 20:30:30

Большое спасибо)

Ответить

naruto naruto 15.01.2012 06:04:34

у мя тож не получается добавить картинку я вот написал код <img src = "images/7.jpg" alt = "Картинка" width = "100" height = "100">

Ответить

Admin Admin 15.01.2012 13:06:46

Код абсолютно верный, соответственно, ошибка на 99.9% в том, что неправильно указан путь. Картинки images/7.jpg не существует.

Ответить

naruto naruto 15.01.2012 14:27:45

я правильно указал путь а картинка не появляется

Ответить

Admin Admin 15.01.2012 14:38:17

Возможно, картинка имеет на самом деле формат bmp, а не jpg. Либо в браузере отключён показ изображений. Всё это 0.1%, а 99.9% по-прежнему неверно указан путь. Других вариантов я уже просто не вижу.

Ответить

Skyline Skyline 18.01.2012 04:47:35

Здравствуйте Михаил.Прохожу ваш видео-курc и столкнулся с такой проблемой.6й урок-сделал Шапку сайта успешно,далее файл png нужно розместит по центру <p aling = 'center'> (код не валидный)нормально работает,картинка по центру.Как только меняю его на(код валидный)<p style = "text-aling: center;"> файл png снова в угол перемещаеться.7урок-Заголовок и картинку по центру в блоке уже <div style = "text-align: centr;"> тоже не выходит сделать.С левой стороны екрана заголовок+картинка так и остались.Винда седьмая установлена.В чом может быть проблема?

Ответить

Admin Admin 18.01.2012 12:07:46

Не text-aling, а text-align.

Ответить

Skyline Skyline 18.01.2012 14:40:45

Спасибо большое все работает!Приступаем к следующему уроку:)

Ответить

Tao Tao 13.04.2012 16:39:15

Здравствуйте, подскажите как сделать чтобы ссылка меняла цвет при наведении мышки на ссылку.

Ответить

Admin Admin 13.04.2012 16:40:50

Через CSS: a:hover {color: red;}

Ответить

Tao Tao 13.04.2012 16:48:04

Я до этого еще не дошел )))

Ответить

kan2170 kan2170 26.04.2012 22:08:52

"создайте в этом же каталоге папку "images" и размещайте туда изображения. А в атрибуте "src" пишите значение "images/Имя файла картинки". Скажите, как создать такую папку ?

Ответить

Admin Admin 26.04.2012 22:14:45

Как обычную папку в Windows.

Ответить

kan2170 kan2170 27.04.2012 14:20:09

Сделал. <img src = "images/kan.jpg" alt = "Картинка" widh = "110" height = "110"> Почему-то не открывается картинка.

Ответить

Admin Admin 27.04.2012 14:21:32

Значит, путь images/kan.jpg указан неверно. Его надо указывать, не скопировав у меня, а подумать немного, почему должно быть так, а не по-другому.

Ответить

Adrenalin Adrenalin 21.05.2012 23:06:17

Я хочю поставить на свой сайт счетчик ливеинтернет после знака копирайт, а не перед. Как яндекс среагирует?

Ответить

Admin Admin 22.05.2012 00:05:13

Никакого значения это не имеет.

Ответить

Vlasta Vlasta 28.10.2012 16:01:52

Михаил, доброе время суток. У меня тоже с картинкой не получается, прочитала комментарии ответа не нашла. "создайте в этом же каталоге папку "images" и размещайте туда изображения - в каком каталоге? Файл index.html живет по адресу C:\Users\Дима\Documents

Ответить

Admin Admin 28.10.2012 18:41:36

index.html и этот каталог должны находиться в корне локального сервера, в папке www.

Ответить

Vlasta Vlasta 28.10.2012 19:21:59

Спасибо. Картинка появилась. Очень помогла ваша статья: почему не видно картинки ( 4 ошибки)?

Ответить

pefon pefon 25.05.2012 08:09:44

Извините если не в тему. А как сделать например так чтобы при наведении мышкой на название какого-либо предмета всплывала картинка?

Ответить

Admin Admin 25.05.2012 09:27:55

http://myrusakov.ru/out-image-link.html

Ответить

pefon pefon 25.05.2012 11:31:14

Спасибо за подсказку! Наверное мой вопрос покажется глупым, извините! А что лучше применить в этом случае html или java script?

Ответить

Admin Admin 25.05.2012 17:50:04

И то, и другое.

Ответить

YaroslavPPOR YaroslavPPOR 22.08.2012 10:22:48

Начинал изучать сайты на ru.html.net . Там мне тоже понравилась понятность материала, но у вас лучше собран материал, в удобной последовательностей и без ничего лишнего.

Ответить

Adrenalin Adrenalin 29.09.2012 20:00:23

Михаил! Такой вопрос. Я нашел человечька, который хочет разместить свой баннер на моем сайте ( aktpoisk.ru ). Но у меня статический сайт без движка и я не знаю как это сделать (разместить баннер)! Помоги.

Ответить

Admin Admin 30.09.2012 09:24:44

Если баннер всего один и тоже статический, то просто вставляете его код в нужное место страницы, где Вы его хотели бы видеть.

Ответить

GoTo GoTo 03.10.2012 02:12:16

Сайт с "подарком". Вылетает окно с трояном.

Ответить

Adrenalin Adrenalin 10.10.2012 21:25:04

Михаил! Как сделать ссылку из своего сайта на свою страницу В Контакие так, чтобы поисковые системы их не видели или не учитывали как полноценную ссылку (не прямая ссылка)? Знаю только для Яндекса: <noindex> и для Гугла вспомню! А как же быть с остальными? Нужен пример этой ссылки!

Ответить

Admin Admin 11.10.2012 18:35:18

rel=“nofollow” внутри <a> для гугла.

Ответить

Adrenalin Adrenalin 12.10.2012 18:30:10

А есть другие способы? Нужно скрыть от всех поисковых систем! Может так, как В Контакте скрываются миллионы ссылок на стене и т. д. К стате, а как это делается? Они же там не прямые? Если можно, то дай несколько примеров.

Ответить

Adrenalin Adrenalin 12.10.2012 19:00:57

У тебя на сайте вот так: <a rel="external" href = 'http://vk.com/myrusakov'>, а не: rel=“nofollow”. Почему? И еще: <div id = 'vkontakte'>, что это значит?

Ответить

Admin Admin 12.10.2012 20:44:58

Других способов нет, да и не все поисковые системы могут работать с существующими. rel="external" никакого отношения к SEO не имеет. Это валидное открытие ссылки в новом окне. А второе, это же просто контейнер.

Ответить

chufack chufack 18.10.2012 15:49:29

Здравствуйте,Михаил!Не пойму, почему не получается вставить картинку из компа: <img src = 'href = 'image\Медуза.jpg'" alt = "Картинка" width = "696" height = "545">. Объясните,плиз.Спасибо.

Ответить

chufack chufack 18.10.2012 16:38:00

Вот, посмотрите, что получилось.Картинка открывается не так, как я хотел. <html> <head> </head> <body text = "red" bgcolor = "orange" link ="green" vlink = "blue"> <h1>СВЕТОФОР</h1> <a target == "_new" href = "C:\Users\Public\Pictures\Sample Pictures" title = "Ссылка">C:\Users\Public\Pictures\Sample Pictures</a> <br> <img scr = "file:///C:/Users/Public/Pictures/Sample%20Pictures/Jellyfish.jpg" alt = "Медуза" width = "100" height = "100"> </body> </html>

Ответить

chufack chufack 18.10.2012 17:29:31

Ха-ха.Отвечать не надо, я сам все догнал. Но все равно спасибо.

Ответить

djon1959 djon1959 17.11.2012 11:08:00

Здравствуйте. Прохожу ваш видео-курс сейчас по HTML, прохожу урок, где надо вставлять картинку с ТНТ, а картинку не найду. Их нет и надо самому искать или я не там ищу? Вроде все просмотрел. А если нет, то где скачать, хотел сделать все как у вас, чтоб если что-то не получалось, то с вами и сверяться, т.к. если свое начнешь что-то делать, то начнешь просто путаться.

Ответить

Admin Admin 17.11.2012 11:10:24

Картинок там нет, скачать можете любую из Google.Картинки. Просто введите ТНТ и в результатах Вы её найдёте. Либо можете написать мне на e-mail: myrusakov@gmail.com, и я Вам вышлю все картинки из курса.

Ответить

nickolay nickolay 09.01.2013 01:16:59

Вы пишете следующее: Абсолютный путь задаёт полный путь к файлу, например, так: "http://mysite.ru/images/image1.gif". А относительный путь указывают путь относительно каталога, в котором находится текущий файл. Например, наш файл "index.html" лежит в корне сервера, а мы пишем: "href = 'images/image1.gif'". Это означает то же самое, что и если бы мы написали: "http://mysite.ru/images/image1.gif". Может все-таки "http://адрес корня/images/image1.gif"? или я что-то не догоняю?)

Ответить

Admin Admin 09.01.2013 09:58:36

Да, в данном случае http://mysite.ru/images/image1.gif и images/image1.gif будет одно и то же.

Ответить

Анянас Анянас 22.01.2013 21:52:16

а как тут пользоваться этим редактором?

Ответить

Admin Admin 23.01.2013 10:12:59

Каким редактором?

Ответить

Анянас Анянас 24.01.2013 22:18:00

просто все кто знают этот сайт говорят что это редактор

Ответить

Admin Admin 25.01.2013 09:51:02

Нет никакого редактора.

Ответить

gaikin13 gaikin13 12.02.2013 00:02:28

а вот вопрос, у себя на ПК картинки встают на сайт, а когда его(сайт) разместишь в интернете,то картинок там не будет, ведь они на ПК! а как делать что бы они(картинки) были встроены в сайт? я только начал изучать создание сайтов, этот вопрос видимо относится и к видео, и к аудио...

Ответить

Admin Admin 12.02.2013 09:17:42

Загрузить картинки на сайт.

Ответить

gaikin13 gaikin13 12.02.2013 11:14:13

Как их загрузить на сайт?Это уже после того как сайт в интернете разместить? можно по подробнее. если это есть в ваших уроках, то дайте пожалуйста ссылку!

Ответить

Admin Admin 20.02.2013 22:47:14

Просто скопировать их в отдельную папку на сайте.

Ответить

Spartak_Belarus Spartak_Belarus 20.02.2013 17:54:40

Почему не работает ссылка на локальный файл? (д/з урока 7 по html) ---набраная в ручную--- href="file:///E:/Обучение/Курс/lessons/Lesson3_1_7/Lesson3_1_7.html" ---она же, скопированная из браузера:---- href="file:///E:/%D0%9E%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5/%D0%9A%D1%83%D1%80%D1%81/lessons/Lesson3_1_7/Lesson3_1_7.html"

Ответить

Admin Admin 20.02.2013 22:48:17

В Windows не прямые слэши, а обратные. То есть не E:/, а E:\

Ответить

Spartak_Belarus Spartak_Belarus 21.02.2013 13:14:21

браузер понимает ссылку с любыми слешами и запускает урок без проблем но когда локальная ссылка в HTML содержит кириллицу <a href="file:///E:\Обучение\Курс\lessons\Lesson3_1_7\Lesson3_1_7.html" target="_blank"><img src="images/spartak_en.jpg"></a> , то браузер не запускает ее, хотя и показывает ее во всплывающей подсказке в стандартном виде, независимо от слешей и вида кириллицы Может быть Denwer не понимает? (я в нем для utf-8 отдельно прописывал "AddDefaultCharset utf-8")

Ответить

Admin Admin 21.02.2013 21:16:25

Попробуйте без Denwer, просто откройте html-страницу в браузере и перейдите по ссылке.

Ответить

Spartak_Belarus Spartak_Belarus 22.02.2013 10:33:59

спасибо, без Denwer все работает. Вопросы по Денверу (апачу) буду задавать на соответствующих форумах

Ответить

Adrenalin Adrenalin 21.02.2013 23:44:39

Привет! Как создать не прямую ссылку? Например такую, как в том же самом ВКонтакте (на стене, в группах...). Такую, чтобы по ней не перетекал ПР Гугла и ТИЦ Яндекса. <noindex> и rel="nofollow" мне не подходят! Это не то. Меня интересуют ссылки как на форумах (http://...). Они же не губят сайт, когда пользователи их ну просто штампуют пачками. Как их создавать? Я слышал о каких-то ВВ-ссылках. Это они?

Ответить

Admin Admin 22.02.2013 10:06:53

Нет таких ссылок, никогда не было и не будет. Это ссылки - обычные редиректы. Например, такая ссылка: http://mysite.ru/r.php?l=http://google.ru - может сделать редирект на http://google.ru. Это просто как пример.

Ответить

Adrenalin Adrenalin 22.02.2013 12:02:28

Ясно. Благодарю! 1. По таким ссылкам (как в примере) могут переходить поисковые роботы? Как они на них реагируют? А ТИЦ и ПР перетекают? 2. Совсем другой вопрос: Как создать ссылку <<Назад (без перезагрузки страницы!)?

Ответить

Admin Admin 22.02.2013 20:12:04

1. Могут, как реагируют - никто не знает. Что перетекает, а что нет - никто не скажет. Это знают только разработчики поисковых систем. 2. Невозможно ответить на данный вопрос. Миллиард ответов на миллиард структур сайта.

Ответить

Adrenalin Adrenalin 23.02.2013 01:25:14

2. Ситуация такая: пользователь нажимает на кнопку "Отправить коммент" и попадает на страницу-обработчик. Там я ему выдам ошибку - вернитесь НАЗАД и заполните все поля. Как ему вернуть то, что он уже написал? Стрелка <<Назад в браузере - это то, что мне нужно, но на моих страницах.

Ответить

Admin Admin 23.02.2013 10:22:05

Сохранить все данные в сессию, а потом вывести содержимое из сессии в форму.

Ответить

dok12 dok12 01.03.2013 21:15:21

начал изучать html хочу спросить надо вот каждый тег заучивать т.е все что вы сдесь пишите учить ??? например это начало 2-го урока <a target = "_self" href = "index.html" title = "Ссылка">Ссылка на эту страницу</a>

Ответить

Admin Admin 01.03.2013 21:22:52

Заучивать ничего не надо, надо применять, а они сами запомнятся.

Ответить

dok12 dok12 03.03.2013 13:16:58

Спасибо за ответ

Ответить

dok12 dok12 03.03.2013 15:29:45

Ещё один вопрос .Надо начиная с 1 урока все последующие действия добавлять к нему ну т.е в 1-ом уроке html создал и web-страницу и к ней добавлять из последующих уроков или начиная с этого <html> <head> </head> <body> </body> </html> в каждом уроке

Ответить

Admin Admin 03.03.2013 21:16:48

Да.

Ответить

ficusoid ficusoid 05.03.2013 12:07:51

при переходе по ссылке браузер выдает "Веб-страница не найдена", исходный html файл также назвал index.html, уже час сижу и не могу разобратся где ошибка. <a target="_self" href="index.html" title="Ссылка">Ссылка на эту страницу</a> Заранее спасибо.

Ответить

Admin Admin 05.03.2013 21:36:30

Ссылка расположена в index.html?

Ответить

ficusoid ficusoid 06.03.2013 17:47:34

да <a target="_self" href="index.html" title="Ссылка">Ссылка на эту страницу</a> расположена в файле под названием index.html

Ответить

ficusoid ficusoid 06.03.2013 20:57:23

По Вашему обучающему курсу такая же проблема, ссылки на другие html страницы работают,а ссылка на саму себя - нет.

Ответить

Admin Admin 06.03.2013 23:23:10

Кажется начинаю понимать, в каком смысле не работает? Если Вы хотите открыть ту же самую страницу и увидеть при этом другой контент, то чудес не бывает. Вы кликаете по ссылки и, если всё правильно, то ничего произойти не должно, страница только лишь быстро обновится.

Ответить

ficusoid ficusoid 07.03.2013 14:02:21

в том то и дело, что при переходе на саму себя она не обновляется, браузер пишет, что страница не найдена.

Ответить

Admin Admin 07.03.2013 21:24:31

Зайдите на страницу, на которой находится ссылка и скопируйте сюда адрес. После этого перейдите по ссылке и скопируйте сюда же второй адрес, на который происходит переход.

Ответить

ficusoid ficusoid 07.03.2013 22:43:52

file:///D:/Documents%20and%20Settings/%D0%94%D0%B8%D0%BC%D0%B0/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/index.html.html file:///D:/Documents%20and%20Settings/%D0%94%D0%B8%D0%BC%D0%B0/%D0%A0%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9%20%D1%81%D1%82%D0%BE%D0%BB/index.html

Ответить

ficusoid ficusoid 07.03.2013 22:45:45

все я понял. Спасибо.

Ответить

ficusoid ficusoid 10.03.2013 02:24:16

Михаил, опять у меня к Вам схожий вопрос по ссылкам на другой документ, только он из области CSS. Есть таблица стилей st.css в этом файле я задаю стили боксам для index.html, и есть таблица стилей typography.css где я задаю стили заголовкам параграфам для index.html. В таблице стилей st.css я сделал ссылку на typography.css, она выглядит так: @import url ("typography.css"); но она не работает, то есть те стили которые я прописал в этом файле не применяются к index.html. Стили прописанные в st.css для index.html работают. Собственно вопрос: что я сделал не так? Заранее спасибо за ответ. П.С Пути,валидность в порядке.

Ответить

Admin Admin 10.03.2013 11:33:08

Пропишите 2 тега <link> для 2-х разных стилей.

Ответить

@spr@m @spr@m 11.03.2013 01:15:20

Доброй ночи. Добавила ссылку, которая открывается в новой вкладке. Все нормально работает, но код не валиден /there is no attribute "target"/. Подскажите, пожалуйста, для стандарта XHTML 1.1 чем можно заменить этот атрибут?

Ответить

Admin Admin 11.03.2013 09:16:19

Ничем, поэтому единственный выход сделать это через JS.

Ответить

AlexMetal01 AlexMetal01 16.03.2013 22:19:38

Добрый вечер! Не понимаю что не так? Сделал всё как вы написали, но картинки нет (квадратик с разорванной страничкой в верхнем углу). Всё проверил-всё правильно, как вы написали. Создал папку-обозвал images, скинул туда фотку-обозвал 1 получилось<img srс = "images/1.jpg" alt = "Картинка" width = "100" height = "200">

Ответить

Admin Admin 17.03.2013 12:11:22

http://myrusakov.ru/html-img-nowork.html

Ответить

Reborn Reborn 22.03.2013 19:41:46

У меня почему то не загружает картинки вот то что у меня введено <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251" /> <title>REBORNUA</title> </head> <body text = "green" bgcolor = "yellow" link = "green" vlink = "red" alink = "blue"> <br> <img src = "images/rebornnew.jpg alt = "Шапка" width = "10%" height = "50%"> <h1>REBORN_UA</h1> <ul> <li>Главная</li> <li>Видео с моим участием)</li> <li>Моменты с игр</li> <li>Скриншоты</li> <li>Мои новости</li> </ul> <h3>Сайт REBORN_UA</h3> <img scr = "images/rebornsteam.jpg" alt = "rebornsteam" /> </body> </html>

Ответить

Admin Admin 22.03.2013 19:58:10

http://myrusakov.ru/html-img-nowork.html

Ответить

AlexMetal01 AlexMetal01 04.04.2013 20:10:12

Михаил, я все проверил, но все равно картинка не показана.

Ответить

Admin Admin 04.04.2013 20:56:59

http://myrusakov.ru/html-img-nowork.html

Ответить

miss-a miss-a 21.04.2013 22:33:47

"index.html и этот каталог должны находиться в корне локального сервера, в папке www." не могу понять где локальный сервер чтоб разместить там каталог и изображения. А то у меня index.html на диске D. Спасибо!

Ответить

Admin Admin 22.04.2013 09:50:17

Можно и на диске D, главное, чтобы index.html и каталог находились в одной директории.

Ответить

Lysko72@mail.ru Lysko72@mail.ru 25.05.2013 16:16:10

Подскажите какая ошибка в коде которую распознал валидатор: <button title = "Перейти на сайт Одноклассники"><a href = "http://www.odnoklassniki.ru"><img src = "images/odn.jpg" alt = "Одноклассники"/></a></button>

Ответить

Admin Admin 25.05.2013 16:47:04

Внутри button не может быть тега <a>.

Ответить

Lysko72@mail.ru Lysko72@mail.ru 25.05.2013 17:40:25

Тогда правильно так: <a title = "Перейти на сайт Одноклассники" href = "http://www.odnoklassniki.ru"><img src = "images/odn.jpg" alt = "Одноклассники"/></a>

Ответить

pavell pavell 05.06.2013 22:32:06

Здравствуйте! я немного не понял об относительных и абсолютных путях. Например надо вставить картинку на сайт и путь у неё такой:C:\Documents and Settings\Admin\Рабочий стол это какой путь? если можно более подробнее об относительных и абсолютных путях. Локальный сервер у меня не установлен и картинка и сайт на рабочем столое

Ответить

Admin Admin 05.06.2013 23:26:45

Данный путь абсолютный. Ещё об относительных и абсолютных путях я писал тут: http://myrusakov.ru/html-img-nowork.html

Ответить

pavell pavell 08.06.2013 20:09:45

Большое спасибо!!!

Ответить

Сложеникин Сложеникин 19.06.2013 02:33:50

Михаил, здравствуйте. можно ли задать размер изображения в относительных единицах(%)?

Ответить

Admin Admin 19.06.2013 18:19:29

Можно, например, так: width="50%"

Ответить

zhigajloe@mail.ru zhigajloe@mail.ru 30.06.2013 09:11:04

Спасибо за статью! Жигайло

Ответить

alik alik 18.07.2013 13:29:13

Уважаемый Михаил изучаю ваш бесплатные уроки по HTML валидатор выдаёт ошибки Линия 9, колонка 7 : спецификация атрибута должно начинаться с имени или имя маркера <Текст " зеленых "BGCOLOR =" желтые "ссылка =" зеленый "VLINK =" красный "Alink =" синий "/> ✉ Имя атрибута (и некоторых значениях атрибутов) должны начинаться с одного из ограниченного набора символов. Эта ошибка обычно означает, что вы не удалось добавить закрывающей кавычки на предыдущее значение атрибута (поэтому значение атрибута выглядит как начало нового атрибута) или использовали атрибут, который не определен (как правило, опечатка в общий признак имя). Ошибка Линия 9, колонка 7 : элемент "Текст" неопределенная <Текст " зеленых "BGCOLOR =" желтые "ссылка =" зеленый "VLINK =" красный "Alink =" синий "/> ✉ Вы использовали элемент, названный выше в документ, но документ типа вы используете не определяет элемент с таким именем. Эта ошибка часто является причиной: неправильное использование "строгих" тип документа с документом, который использует фреймы (например, вы должны использовать "Frameset" тип документа, чтобы получить "<frameset>" элемента), с помощью собственностью поставщика программных расширений, таких как "<spacer>" или "<marquee>" (это, как правило, закрепляются с помощью CSS, чтобы достичь желаемого эффекта вместо этого). с использованием верхнего регистра теги в XHTML (в XHTML атрибуты и элементы должны быть в нижнем регистре).не как не пойму где ошибка и в основном ошибки с в XHTML (<>,/,=,"")не пойму в чём ошибка вроде пешу как у вас что не так подскажите если можно заранее благодарен СПАСИБО!!!

Ответить

Admin Admin 18.07.2013 14:47:45

Чтобы не было проблем с валидностью, надо все цвета задавать исключительно в CSS.

Ответить

alik alik 18.07.2013 16:00:56

Я до CSSне дошол изучаю пока HTML а вообще ошибки выдаёт связанные с (<>,"",=,/)я не пойму что там делать вроди и удолял символ но он показывает следующий символ ошибку (например: <IMG SRC = "images1.gif" / я (17). JPG "ширина =" 1020 PX "высота =" 100 пикселей "шапка ...(здесь выделяет Я)

Ответить

Admin Admin 18.07.2013 18:09:48

Не надо писать заглавные символы. Посмотрите этот курс по HTML: http://srs.myrusakov.ru/html

Ответить

Andrey57 Andrey57 19.10.2013 22:59:42

Я не могу понять как правильно написать путь к картинке вот он C:\images\сама картинка путь пишу относительный ни черта не получается как мне правильно написать путь к картинке

Ответить

Admin Admin 20.10.2013 12:18:00

http://myrusakov.ru/html-img-nowork.html

Ответить

harwed harwed 30.11.2013 00:02:04

здрасте!скажите пожалуста а как сделать фоновое изображение из картинки!!все методы перепробовал и не получилось у меня!!подскажите плизз

Ответить

alexandrdante alexandrdante 30.11.2013 00:46:58

Ляпун,какие все свойства? используйте свойство css:background-image: url(fon.jpg); как-то так

Ответить

harwed harwed 30.11.2013 07:23:24

я так делал уже!не получается!изображение фоном не становится!если я вас понел-то это должно быть в css?то я прописывал полный путь,а это background-image: url(wap/fon.jpg); и открываю html и он белый ну и естественно что fon,jpg и сам html и его style.css в одной папке!!если не тяжело вам пришлите пример мне как это делать!!т.е полный скрипт !!плииизз

Ответить

alexandrdante alexandrdante 30.11.2013 16:11:42

простите,какой скрипт?емли Вы не знаете основ,то посмотрите курсы по CSS и HTML

Ответить

harwed harwed 30.11.2013 20:22:53

решено уже!написал-4 страницы статичного сайта!скоро буду осваивать динамичный--спасибо ваши курсы смотрю постоянно если вам не тяжело--добавте в коменты что бы фото и видео можно было приложить!!

Ответить

alexandrdante alexandrdante 30.11.2013 20:32:01

Это уже к Михаилу. Отправлю ему. Ну,вот видите,стоило просто внимательнее быть

Ответить

harwed harwed 02.12.2013 09:10:30

А такой вопрос!почему у меня файл php который лежит в директории www в test.local который я писал смотря на урок Михаила и точно всё как он писал и даже создавал в миадмине так же как и он -отображается при запуске php как txt но в браузере?ccылки которые вы даёте мне -я так и делал как в них и даже купил курсы Михаила-но так не получается при отправке mySQL запроса и и экране появляется то что я писал в index.php как txt

Ответить

tikkiwiki tikkiwiki 02.12.2013 10:23:31

Здравствуйте, Ляпун. Обращайтесь в службу поддержки.

Ответить

m773ma@gmail.com m773ma@gmail.com 29.12.2013 01:21:26

Здравствуйте! Вопрос такой - как "прижать" объект (в моём случае картинка) к краям окна браузера вплотную? Код простой: <body> <img src="images/IMG_0984.jpg" alt="Картинка" width="100%" height="100%" /> </body> и CSS body {margin:0px;} в этом случае картинка прижимается ко всем краям, кроме нижнего, там остаётся отступ в 4px, а Chrome и Firefox оставляют почему-то ещё 1px справа.

Ответить

m773ma@gmail.com m773ma@gmail.com 29.12.2013 01:27:30

А Safari ещё и сплющивает картинку, так же оставляя 4pх снизу

Ответить

alexandrdante alexandrdante 29.12.2013 01:38:13

border:0px solid #000; добавьте.и паддинги тоже на ноль.должно помочь

Ответить

m773ma@gmail.com m773ma@gmail.com 29.12.2013 11:52:24

Не помогло, даже так сделал: * {margin:0px; border:0px solid #000; padding:0px; bottom:0px; }

Ответить

Амперсанд Амперсанд 18.01.2014 23:24:43

Здравствуйте, Михаил! Хотелось бы узнать что-нибудь на тему карт-изображений. Заранее спасибо!!!!

Ответить

Амперсанд Амперсанд 19.01.2014 07:53:31

Ещё раз здравствуйте, Михаил ! Планируете ли Вы создание учебников по jQuery, HDOM, AJAX ?

Ответить

alexandrdante alexandrdante 19.01.2014 08:58:50

Уважаемый Дмитрий,на эту тему есть видеокурс =)

Ответить

Амперсанд Амперсанд 19.01.2014 10:24:49

Спасибо за подсказку.

Ответить

Domich Domich 19.01.2014 12:53:25

Михаил, поясните мне, пожалуйста, почему у меня абсолютный путь к картинке не работает,а относительный - работает?

Ответить

alexandrdante alexandrdante 19.01.2014 13:28:16

а как вы прописываете абсолютный?

Ответить

Domich Domich 19.01.2014 20:54:29

<body text = "red" bgcolor= "black" link = "green" vlink = "red" alink = "blue"> <h1>Заголовок 1-го уровня</h1> <a target = "_self" href= "index.html " title = "My Site">Link to my site</a> <br> <img src="oZBXRBGNyWY.jpg" alt= "Link to my site" width = "450" height = "450"> </body> Точно так же прописываю и абсолютный

Ответить

pavell pavell 12.03.2014 20:54:56

А что если изображение не вставляется. В место этого рамка а по средине лист(но не надорваный а целый). Код вроде правильно написан <img src ="shapkaa.jpg" width="701px" height ="90px" style="margin-left: 150px;">

Ответить

tikkiwiki tikkiwiki 27.03.2014 11:31:21

Павел, означает, что путь не верный к изображению.

Ответить

renat52488 renat52488 27.05.2014 00:15:16

Уважаемый Михаил. Мне кажется вы забыли про атрибут title в теге img который выводит информацию о картинке при наведении на неё. Честно говоря я могу и ошибаться.

Ответить

Che777 Che777 25.06.2014 15:11:39

Здравствуйте! <body text="yellow" bgcolor="blue" link="green" vlink="yellow" alink="white">, но все равно цвет не посещенной ссылки желтый..Почему? И еще когда указываешь абсолютный путь к картинке <img src="file:///X:/home/mysite.local/www/lib/images/CheGuevara.jpg" alt="Картиночка" width="210" height="250"> , все норм, изображение открывается, а когда относительный <img src="lib/images/CheGuevara.jpg" alt="Картиночка" width="210" height="250">не открывается..

Ответить

Дмитрий Тормосин Дмитрий Тормосин 29.06.2014 22:27:36

Подскажите пошаговый алгоритм создания карт-изображений

Ответить

Дмитрий Тормосин Дмитрий Тормосин 14.08.2014 18:44:50

Будет ли валидным данный код <html> <body> <a href="http://myrusakov.ru" link="black" vlink="yellow" alink="magenta" target="_blank">Онлайн учебник Русакова</a> </body> </html>

Ответить

tikkiwiki tikkiwiki 14.08.2014 18:54:42

Проверьте на валидность сами, существует ресурс.

Ответить

Дмитрий Тормосин Дмитрий Тормосин 24.08.2014 08:47:04

У меня вопрос на тему создания внутренних ссылок подскажите четкий синтаксис создания закладок, а затем и ссылок

Ответить

Che777 Che777 25.08.2014 20:03:47

Здравствуйте! Вопрос такой, почему в теге <a> c атрибутом alt нет описания картинки, уже не в первом уроке пробую, а все не получается.. Вот примеры написания кода: <img src="images/logo.jpg" alt="Логотип ТНТ" /> : <img src="images/ernesto-che-guevara.gif" alt="По прозвищу Че" width="200" height="200" />. Заранее благодарю!!

Ответить

Дмитрий Тормосин Дмитрий Тормосин 31.08.2014 09:30:53

Михаил, расскажите значения атрибутов rel и rev тега a

Ответить

xp85hapov xp85hapov 16.09.2014 21:28:29

Вечер добрый! У меня такой вопрос: в чем принципиальное отличие между сайтами знакомств и соц сетями и остальными сайтами? Какие обязательные элементы необходимо продумать, чтобы приниматься за создание подобных сайтов?

Ответить

alexandrdante alexandrdante 17.09.2014 08:07:47

нет отличий. сайт знакомства - тоже разновидность соц.сети

Ответить

xp85hapov xp85hapov 17.09.2014 18:50:48

Я имел ввиду их отличие от остальных, а не друг от друга...

Ответить

OlgaNovikova OlgaNovikova 09.02.2015 16:56:48

Михаил, здравствуйте! Подскажите, пожалуйста, уже вроде бы все перепробовала и перепроверила!!! Учусь по вашему видео уроку html. Сейчас пытаюсь разместить картинку на сайте, но никак не выходит. Вместо картинки слова "Шапка сайта" и все. Так выглядит код: <img src = "images/logo.jpg" width= "100%" alt= "Шапка сайта" />. Путь указан правильно, картинка лежит на месте, в папке, название у нее такое же (logo.jpg), в браузере (фаерфокс) все настройки правильные. В чем в итоге загвоздка никак не пойму(((((

Ответить

OlgaNovikova OlgaNovikova 09.02.2015 17:05:22

Я конечно понимаю, что тут очень много идентичных проблем, но, уже очень долго намаевшись, и, перепробовав все возможные и описанные варианты, пришлось обратиться. Надеюсь на ответ!!! Заранее благодарна!

Ответить

tikkiwiki tikkiwiki 12.02.2015 10:15:00

OlgaNovikova, не может быть такого, что все правильно, а оно " гадство такое, не работает" Напишите в службу поддержки, я Вам помогу.

Ответить

Brok Brok 06.04.2015 22:41:46

"разместите файлы картинок вместе с "index.html". Например, создайте в этом же каталоге папку "images" и размещайте туда изображения." не могу понять о каком каталоге идет речь и где надо создавать папку images на виндовс или в браузере?

Ответить

Tony G Tony G 01.07.2015 15:48:56

Михаил прошу прошение за такой вопрос и за мой русский язык но у меня есть проблема я всё сделал так как вы обяснили на первом уроке но у меня по чемуто он не выдаёт текст на русском а показана всякая билиберда например заголовок 1-РіРѕ СѓСЂРѕРІРЅСЏ вот такоё бред как это можно исправить блогодарен за рание

Ответить

Paha Paha 26.07.2015 12:18:15

Михаил доброго дня. Подскажите пожалуйста как все таки правильно работать с атрибутами : "link", "vlink" и "alink". Как не пробовал их прописывать не могу добиться результата. Приведите пожалуйста пример как правильно и куда их прописывать. Заранее благодарен.

Ответить

bessopan82 bessopan82 20.02.2016 01:42:53

Здравствуйте. Была проблема с картинкой. У меня картинка .jpeg, я так и писал в src, и ее не было видно. Перепробовал все, пока не написал в src .jpg. Тогда картинка появилась.

Ответить

P_Sh P_Sh 22.04.2016 17:28:25

Здравствуйте! http://prntscr.com/avgnxf результат такой http://prntscr.com/avgog8

Ответить

Dave Dave 02.10.2016 11:02:42

Не отображается описание,вот код: <img src = "http://www.dsogaming.com/wp-content/uploads/2016/03/GTA5-2016-03-10-17-29-18-672x372.jpg" alt = "Фотореалистично" width = "1280" height = "720">

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.