Что такое якорь в HTML? Спецсимволы. Редакторы

Информация в этом видеоуроке содержит ответы на следующие вопросы:

  • Что такое якоря
  • Что за тег pre
  • Что такое спецсимволы HTML
  • Какие бывают редакторы
  • Что изучать после HTML

Скачать материалы
Скачать 16 видеоурок по HTML Размер: 11.51 MB, скачали: 384 раз.
Скачать исходники к 16 видеоуроку по HTML Размер: 40.04 kB, скачали: 216 раз.
Таблица спецсимволов HTML
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Добро пожаловать в последний урок из видеокурса по HTML. В нем мы разберем все то, что пропустили по ходу прохождения курса: узнаем, что такое якоря, разберемся с тегом <pre>, ознакомимся со спецсимволами и, напоследок, рассмотрим самые известные редакторы для верстки сайтов, а также я дам советы по дальнейшему изучению (то, есть советы о том, что следует изучать после курса по HTML чтобы двигаться в правильном направлении). Давайте приступим. Что такое якоря? Это ссылки на внутренности нашего документа. Перейдем на рабочий стол, зайдем в папку Site, откроем файл index.html через notepad. Помните, мы делали навигационную карту? Давайте теперь создадим ссылкив этой навигационной карте якорем. Ссылки могут указываться  как на якоря других документов, так и на якоря документов других сайтов. Якоря прописываются так: #ссылка.

 <area shape="rect" coords="70,43,270,121" href="#s1" alt="Якорь 1">
 <area shape="rect" coords="476,37,556,243" href="#s2" alt="Якорь 2">
 <area shape="circle" coords="147,199,61" href="#s3" target="_blank">
 <area shape="poly" coords="270,160,351,174,434,160,417,203, 433,248,351,236,270,250,287,204" href="#s4" target="_blank" title "О нас">
 

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

 <area shape="circle" coords="147,199,61" href="about.html#s3">
 

Но нам это не нужно. Давайте теперь укажем наш якорь, то есть то, на что он будет ссылаться. Это делается с помощью атрибута id.

 <p align="left"><i id="s1">Данная страничка посвящена одной <a href="history/history.html" title="Мои истории из жизни">истории</a>. Истории о том, зачем я создал сайт <b>info-line.net</b></i></p>

Укажем второй якорь.

 <br>Ближе к <b id="s2">PHP</b>... И <a href="about.html" target="_blank" title="О нас"><font color="#000000">изучать</font></a>
 

Теперь создадим тег <pre>. Текст, зафиксированный в тегах <pre></pre> отображается моноширным шрифтом, а также отображаются все пробелы, которые стоят в этих тегах. То есть, если мы поставим три пробела, то они все отобразятся. Тегу прописываем также атрибут id.

 <br><pre id="s3">Я работал   на фрилансе</pre>
 

Четвертым якорем у нас будет, например, тег <p>. Пропишем ему атрибут id.

 <p id="s4">Я решил создать сайт про то, чему сам долго и упорно трудился, тому, как
 создать свой сайт в этом большом и наверняка всем известном пространстве.
 

Вместо атрибута id можно использовать атрибут name, но я предпочитаю использовать id.

Давайте сохраним и проверим, что у нас получилось. Открываем файл index.html и попробуем понажимать на карту нашего сайта. Сначала на прямоугольник. Как мы видим, ссылка пошла на якорь #s1. Он был установлен на строку «Данная страничка посвящена одной истории. Истории о том, зачем я создал сайт info-line.net». Теперь нажмем на кружок. Якорь здесь — «Я работал   на фрилансе». Как мы видим, пробелы отобразились. Нажмем на наш второй прямоугольник. Это второй якорь. И, наконец, четвертый якорь — якорь «О нас». Нажав на него, мы перешли на абзац «Я решил создать сайт про то...».

Нам желательно убрать атрибут target="_blank" чтобы якоря не открывались в новых окнах. Это мы сейчас и сделаем.

 <area shape="rect" coords="70,43,270,121" href="#s1" alt="Якорь 1">
 <area shape="rect" coords="476,37,556,243" href="#s2" alt="Якорь 2">
 <area shape="circle" coords="147,199,61" href="#s3" >
 <area shape="poly" coords="270,160,351,174,434,160,417,203, 433,248,351,236,270,250,287,204" href="#s4">
 

Сохраним. Закроем все ненужные окна.

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

Перейдем в код. Давайте поставим перед словом «спасибо» значок копирайта. Спецсимволов очень много. Чтобы их узнать, вы можете перейти на таблицу специальных символов на нашем сайте info-line.net рубрика — «HTML», подрубрика — «дополнительно», таблица специальных символов HTML. Давайте посмотрим знак копирайта. Как мы видим, код этого знака — «&#169». Копируем его, переходим в код и вставляем.

 <u>&#169; Спасибо за внимание! C Уважением, <a href="mailto:test@test.com">Олег Зубцов</a>.</u>
 

Сохраним, проверим, что у нас получилось. Мы видим значок копирайта.

На этом мы заканчиваем наш курс по HTML. Поздравляю вас с его прослушиванием! Вы уже  научились создавать простые статичные сайты. Я вам желаю успехов в последующем изучении!

Теперь я дам несколько советов по визуальным текстовым редакторам. Самый известный из них — notepad, в котором мы и работали. Есть еще и визуальные редакторы, но для удобства работы с ними нужно иметь представление хотя бы о языке разметки HTML. Самые известные визуальные редакторы — Microsoft Front Page и Adobe DreamWeaver. Из них я бы вам посоветовал второй, но стоит он порядка 200-300$.

Обязательно посмотрите бонусные видеоуроки к курсу по HTML. В них тонны полезной информации!

  1. Таблица специальных символов HTML
  2. Что такое валидность и XHTML. В чем отличия XHTML и HTML?
  3. Обзор HTML 5. Что нового?

А после их просмотра, можете переходить на наш сайт info-line.net и приступать к изучению каскадных таблиц стилей CSS, потому что они играют важную роль и облегчают работу сайтостроителя. Уроки появляются на сайте два раза в неделю. Они совершенно бесплатны, и вы можете подписаться на них прямо сейчас. Чуть позже мы будем выкладывать уроки по PHP, JAVAScript, Photoshop для сайтостроителей и др. Спасибо за внимание, с вами был Олег Зубцов. До встречи в следующем курсе по CSS!

Подпишись на info-line:

Получать новые уроки на e-mail:

4 комментария на “Что такое якорь в HTML? Спецсимволы. Редакторы”

  1. Tilek 3 февраля 2012 в 17:41 #

    Супер, спасибо вам большое. Все подробно и понятно рассказано. *THUMBS UP*

  2. Оксана 9 августа 2013 в 22:15 #

    здравствуйте Олег. у меня что совсем беда с вашими страницами —

    Таблицы

    Табличная верстка сайта

    Формы

    Фреймы

    кроме видео ничего не показывает ни текстового описания ни скриншотов ни комментов. пишет error. это у меня такая беда или на сервере?

    • Олег Зубцов 11 августа 2013 в 19:50 #

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

Оставить ответ