Подписка
Email
Fb
RSS
Twitter
Email

Курс html (видео уроки) Часть3

Уроки html

Приветствую всех на сайте DenWeb.Ru. В этом уроке мы продолжим изучать HTML. Вы так же можете ознакомиться с первым и вторым уроками курса HTML.

Тема же сегодняшнего урока — это добавление изображений и ссылок.

Часть1

Часть2

Часть3

Сначала хочу сказать пару слов о линиях. Горизонтальная линия отделяет
разделы документа друг от друга. С ее помощью вы даете читателю понять, что один раздел закончился и начался другой. Для вставки линий применяется тег <hr />.

Тег <hr /> имеет следующие основные атрибуты:

  • size — отвечает за размер линии (<hr size="11" />);
  • align — этот атрибут вам уже знаком, он нужен для выравнивания элемента на странице (<hr align="right" />);
  • width — задает ширину линии, можно выразить в пикселях или в % (<hr width="25%" />);
  • noshade — этот атрибут отменяет трехмерное отображение линии, которое будет в браузерах по умолчанию (<hr noshade="noshade" />);
  • color — задает цвет линии;

Пример:

<!--Эта линия будет в трехмерном виде:-->


Добавление изображений

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

Наиболее часто используемые форматы — это GIF, PNG и JPEG. Для того, чтобы добавить картинку на страницу иcпользуется тег <img> и обязательный атрибут src:

logo

  • src — путь к графическому файлу (о том, как правильно его указать поговорим чуть позже);
  • width — ширина изображения;
  • height — высота изображения;
  • alt — альтернативный текст (показывается вместо картинки, если у пользователя отключено отображение изображений);
  • vspace — вертикальный отступ от изображения до окружающего контента;
  • hspace — горизонтальный отступ от изображения до окружающего контента;
  • align — выравнивание(это я надеюсь вы уже запомнили);
  • border — рамка;

И еще, изображение — это строчный элемент, поэтому оно должно быть всегда вложено внутрь блочного элемента.

Ссылки

До данного момента мы работали только с одним изолированным html документом. Пришло время связать несколько документов гиперссылками.

Ссылка, говоря простым языком, это область документа, при щелчке мышью на которой, пользователь переходит к другой области документа или вовсе к другому документу.

Ссылки бывают абсолютные и относительные. Абсолютные подразумевают указания абсолютного URL, то есть полного адреса ресурса
в сети. Например: http://denweb.ru/verstka/png-prozrachnost-v-ie6.html . Относительные ссылки ведут отсчет от корня сайта или текущего документа.

Если в начале адреса стоит слеш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://denweb.ru, значит, написав путь к изображению как /images/logo.jpg, мы, тем самым говорим серверу, что показать следует файл http://denweb.ru/images/logo.jpg.

Двоеточие со слешем ../ в начале адреса говорит о том, что нужно подняться из данной папки на один уровень вверх. Допустим документ лежит по адресу http://denweb.ru/articles/part2.html, тогда если изображению указан адреc ../images/logo.jpg, то это значит, что оно имеет абсолютный адрес http://denweb.ru/images/logo.jpg.

Если адрес указан так: images/logo.jpg или просто logo.jpg, то папка в первом случае или изображение во втором находятся на одном уровне (в одной директории).

Таким же образом задаются адреса у картинок в атрибуте src.

Уроки html

Сама ссылка задается тегом <a href="URL">Текст ссылки</a>.

У тега <a> может быть атрибут target, который определяет в каком окне открывать документ при переходе по ссылке. Если его нужно открыть в этом же окне, то атрибуту target задается значение _self. Его можно не писать, так как оно задано по умолчанию. Если же нужно открыть документ в новом окне, то используется значение _blank.

Для добавления к ссылке всплывающей подсказки нужно использовать атрибут title.

Пример ссылки:

 <a title="Почитать про HTML" href=" http://denweb.ru/category/html " target="_blank"> Статьи по HTML </a>

Вместо текста ссылкой может быть и изображение:

 <a href=" http://denweb.ru/category/html " target="_blank"><img src="images/img.png" alt="" /> </a>

Можно использовать с тегом <a> атрибут id для создания в документе идентификаторов фрагментов. Для это фрагменту, на который ведет ссылка, прописываем атрибут id с каким-либо уникальным значением. А вместо URL пишем знак # и придуманный уникальный идентификатор. Например, тегу <h2> присвоим идентификатор с именем part1, тогда получим код: <h2 id="part1">Заголовок</h2>, а ссылка на него: <a href="#part1">Часть1</a>.

Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо URL указывается mailto:адрес электронной почты. Например:

<a href="mailto:ivanivanov@mail.ru?subject=Тема сообщения ">Наша почта</a>

Следует помнить, что ссылка — строчный элемент и должна заключаться в блочный, а так же блочный элемент не может содержаться внутри ссылки.

Вы можете оставить комментарий.

69 комментариев к записи “Курс html (видео уроки) Часть3”

  1. Cellad:

    у меня возникло проблема с рисунком у меня не отображается рисунок если ставлять ссылку на него ссылка работает но рисунок не показывается:( и ещё если отключит показывать рисунки то запис место рисунки тож не появляется(

  2. admin:

    Здесь только может быть неправильно указан путь к изображению, либо название неправильно задали или расширение.

  3. Cellad:

    Спосибо помогло и очен :))

  4. Сергей:

    Очень полезная и нужная инфа!!!Спасибо.

  5. Владимир:

    Возникла проблема с отправкой почты:

    В строке адреса, адрес пишется «mailto:ivanivanov@mail.ru» естественно при отправке письма пишет ошибка адреса.

    Так же при попытке написать тему сообщения, тема вставляется в адресную строку с нарушением кодировки, то есть текст не читабелен. Пытался отправить через яндекс почту.

    P.S. естественно адрес стоял для проверки реальный.

    • В строке адреса все должно нормально выводиться, проверьте код.

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

  6. Владимр:

    Да не раз проверил. Проверил через htmlбук, проверил через соответствия стандарта. Ошибок нет. Ну так думаю что это связано с яндекс или браузером (опера11.01). Пока ещё не пробовал другой браузер.

  7. Богдан:

    А можно поставить изображение по центру страницы, чтобы было можно писать с правой и левой стороны? Когда да, то с помощью которого тега?

  8. EAGLE:

    Помогите плиз!!!Админ помоги — я создал саит на ucoz.ru , там html система не так ка у тебя в видео !! , короче я не знаю как картинку вставит через html (((а именно ка прописать к неи путь , ведь на видео на видео мы создавали html на компе ,а тут он в интернете . Ответь плиз !!

  9. Большое вам спасибо за уроки html. Я по вашим урокам готовлюсь к школьной олимпиаде по информатеке(создание сайтов).

  10. DenWeb, я не понимаю одну вещь:Допустим, в моих документах в папке «Урок 3» в файле «Урок 3.html» я хочу создать ссылку на «Урок 2.html», который находится в моих документах в папке «Урок 2». Как мне создать подобную ссылку?

  11. Получится так:<a href="../Урок2/Урок2.html"></a>

  12. Спасибо, все получилось как хотел

  13. Спасибо за Ваш труд. Очень полезен новичкам.У меня вопрос, можно ли сделать так чтоб текст был на одной линии с горизонтальной линией?(если можно с примером кода)

    • Опять же, много разных способов приходит на ум — все зависит от того, что должно получиться, какой окружающий код.

      Можно допустим так:
      <p>Спорт <hr style="margin: −26px 0 0 50px; width: 150px;" /></p> 
      width: 150px — длина линии;
      -26px — поднимаем ее вверх;
      50px — отступ слева, равен ширине текста (в данном случае слово «Спорт»).

  14. Алекс:

    Здравствуйте уважаемый!Подскажите в чём ошибка. Делаю в точности как вы объясняете но, отступления от фотографии с текстом не происходит. Имедж, размер и всё остальное получется, а вот именно отступ от текста НЕТ.  <p>  <a href="http://www.veronikastringquartet.com/idhit.html"> <img src="Photo.JPG" align="left" width="50px" height="120px" border="1px" hspace="20px" vspace="20px"> </a>  после этой ссылки идёт текст и закрываю параграф </p> 

    • Код в принципе правильный. Можете скинуть ссылку на страницу, если она на сервере — посмотрю.

      Еще хочу сказать, что в принципе таким методом сегодня уже не делается форматирование страницы. Для этого используется CSS. Можете посмотреть видео уроки CSS.

  15. Алекс:

    Страница не на сервере. Я на самом начальном этапе, изучаю ВАШИ CSS уроки, привыкаю к терминалогии. Излогаете ВЫ отлично и очень доходчиво. Спасибо ОГРОМНОЕ. За формат CSS, даже если понятен принцып, без прохождения html не имеет смысла. Считаю очень полезным проходить всё поступенно, иначе ,  как я подозреваю, позже может получиться такая каша в голове, что придёться вернуться к исходникам. Вот как сейчас к примеру, код прописан правельно, как ВЫ говорите, а не встаёт на нужное место...Как думаете, что ещё может быть???

  16. Алекс:

    Отправил!!!  Заранее спасибо!

  17. Энрики:

    Скажите пожалуйста почему у меня вместо нормальной фотографии показывается какой-то маленький значок размером в пол сантиметра?

  18. Энрики:

    все равно не получается(

  19. Энрики:

    <p> <img src=".qq.jpeg"/>

    </p>  Это правильно я сделал?

    • Что за точка вначале названия файла? Использовать желательно только  латинские символы, знак «тире» и «_».  

      Если файл изображения находится в той же папке, что и html файл, то просто прописывайте в src имя файла и расширение — будет все работать.

  20. Энрики:

    всё равно не получается =( 

  21. Энрики:

    не получается, вобшем забейте)

  22. Энрики:

    у меня получилось)я вот так написал <p> <img src="http://img-fotki.yandex.ru/get/1/akachurin1.d/0_beb8_f192ac44_XL"> </p>

  23. Энрики:

    а можете ещё кое-сто подсказать, я что-то нажал вроде  у меня в notepad++ убралась подсветка, а как её вернуть?

  24. Энрики:

    Уже разобрался)

  25. Олег:

    Здравствуйте.Подскажите пожалуйста есть такое свойство в CSS чтобы при на видений курсора на изображений оно менялось?(для сайта надо) Заранее спасибо!

  26. Антон:

    Отличный урок)

  27. sarmail:

    Подскажите пожалуйста две вещи:1. Пытаюсь использовать Ваш код <p><img src="image.jpg" align="right" ></p>Но почему-то с помощью align удается задать расположение лишь по left и по right. Никак не получается задать align параметр center — картинка не центрируется, остается слева. Так и должно быть? У Вас про это ничего не сказано.2. В интернете нашел-таки как отцентровать картинку. Два совершенно разных кода. Но итог одинаковый, правда в первом случае текст снизу и сверху вплотную прилегает и отступы приходится задавать вручную с помощью <br/>, во втором — отступы получаются автоматически.Вот первый код:

    <div

     align="center">

     

    <img src="image.jpg" >

    </div>Вот второй код:

    <p

    style="text-align:

    center">

      <img

    src="image.jpg"  >

    </p>Собственно вопрос: какой из этих вариантов лучше использовать?

    • Второй вариант правильнее, но не лучший. Там используется css. Работать с внешним видом нужно при помощи css (курс есть на сайте). Когда освоите css — все станет просто и понятно.

  28. nike:

    Отличный сайт админу респект!Тут ошибочка не tsrget a target:"У тега <a> может быть атрибут target, который определяет в каком окне открывать документ при переходе по ссылке. Если его нужно открыть в этом же окне, то атрибуту tsrget задается значение _self. Его можно не писать, так как оно задано по умолчанию. Если же нужно открыть документ в новом окне, то используется значение _blank."

  29. ильдар:

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

  30. nomadsad:

    Спасибо за уроки!Просто, доступно, понятно, с примерами.

  31. Никита:

    ден скажи а можно видео дабовлять также как и изображение?

    • Для добавления видео проще использовать сторонние сервисы типа Youtube. Там можно сгенерировать код и просто вставить его на сайт.

  32. Василий:

    Привет.У меня не получается сделать ссылку. Тег ссылки href не подсвечивается красным цветомПример: Для начала работы с <a> href="блаблабла" партнерскими программами</a> нужны совсем небольшие вложения. Спасибо

  33. Василий:

    все, сам разобрался. href нужно было писать до значка >. <a href="блаблабла">

  34. Никита:

    Ден у меня к тебе 2 вопроса.1:я пытаюсь добавить изображение.всё делаю правильно.указываю имя изображения , тип но в место фото высвечивается маленький квадрат. внутри него либо какието кубики либо красный крест. что делать? 2 вопрос: я добавляю ссылку.эта ссылка ведёт на ваш сайт.я назвал ссылку denweb.ru.затем сматрю результат......ссылка не поевляется. поевляестся только название ссылки а ссылка не действут.что делать?

    • Если бы делали все правильно — все бы работало) Где-то ошибка — проверяйте внимательнее. Скорее всего неправильно указан путь к изображению.

      • Никита:

        Ден у меня такаяже штука как у 

        Энрики. я разобрался! перед названием изображения надо поставить< img=".../имя изображение.тип"/>

  35. Алексей:

    Здравствуйте ДэнВеб, ваш сайт супер! Все понятно и ясно, особенно удивляет что вся информация предоставлена бесплатно! Огромное спасибо вам!

  36. Анатолий:

    Когда делаю фотографию с рамкой ссылкой, рамка становится фиолетового цвета. Как сделать ее опять черной?

  37. Анна:

    Огромное спасибо! Четко, понятно еще и бесплатно!

  38. Ильдар:

    Привет DenWeb очень нравится твой сайт, а если сайт готов как его в итернет запустить?

  39. Виктор:

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

  40. Никита:

    а как сделать ссылку отправки письма на эту же страницу(получится как чат)?

  41. Никита:

    я по практиковался в добавлении ссылок и почему то когда я делаю ссылку на туже страницу( как вы показали в видео),у меня пишет что ошибка:не подключено к интернету(хотя у меня всё подключено) подскажите в чём же моя ошибка!

  42. il878:

    Помогите пожалуйста! Я  создаю черновик на  локальной сети. При надписях на русском языке отображаются непонятные символы(( Что делать?

  43. Дима:

    Поражаюсь, все получается и сайт уже виден ) По началу думал что без js нельзя ничего подобного создать...ошибался ) Видео курсы — зачет! + инфа под ними нужная, помогает в навигации, когда пробуешь писать сайт с нуля...Спасибо! Пошел к след.урокам )

  44. Кирилл:

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

  45. Дмирий:

    Прежде всего, огромное спасибо за титанический труд в виде

    этих уроков!!!

    Такой вопрос…

    Мне не понятен первый пример под видео, а конкретно, почему выравнивание

    посередине, хотя нет  тега, который

    указывает их положение или это по умолчанию браузер решает?.

    И зачем там </p>? Или это опечатка?

    Спасибо за данный ресурс и желаю успеха во всем!)

  46. Илья:

    Очень классно всё описано, понятно и доступно даже новичку!Спасибо большое за данный курс!

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика