Главная страница

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

     
Истории
 Здесь располагаются все мои истории, которые произошли со мной в жизни.  

Сохраняем (Ctrl+S). Теперь давайте сделаем ссылку в слове «истории» на этот документ. Прописываем к нему путь. Проделываем то же самое, что и с изображениями.

Данная страничка посвящена одной истории. Истории о том, зачем я создал сайт info-line.net
 

Сохраняем. Переходим в браузер и проверяем страничку. Как мы видим, слово «истории» стало ссылкой. Давайте на него нажмем. Мы попали на страницу «Истории».

Какие атрибуты есть у ссылок?

Перейдем в код и поэкспериментируем с атрибутами нашей ссылки. Давайте зададим title (подсказка).

Данная страничка посвящена одной истории. Истории о том, зачем я создал сайт info-line.net
 

Давайте посмотрим, как будет выглядеть ссылка на какой-нибудь сервер, допустим, на другой сайт. Например, возьмем слово «сайт» и в атрибуте href в кавычках пропишем полный путь к сайту.

Сайт прописан. Если нам нужно, чтобы наша ссылка отображалась в новом окне, то мы в атрибуте target прописываем значение _blank. По умолчанию стоит атрибут _self (открыть в текущем окне).

Теперь наша ссылка откроется в новом окне.

На этом интересные свойства тега ссылки заканчиваются. Давайте сохраним документ и проверим его в браузере. Ссылка «сайт» стала отправлять нас на другой сайт. Теперь давайте наведем на слово «истории», и, как мы видим, у нас выскочила всплывающая подсказка «Мои истории из жизни». Прошу заметить, что ссылка сайта открылась в новом окне.

Как задать стили всем ссылкам с помощью HTML?

Как вы заметили, после нажатия на ссылки, они стали посещенными и изменили свой цвет. Давайте зададим стили нашим ссылкам. Это не каскадные таблицы стилей, но эти стили будут задаваться всем ссылкам в документе. Прописываются они в теге . Прописываем цвета: link — “#0000FF”, alink (активная ссылка, то есть цвет ссылки во время нажатия) – “#00FFFF”, vlink (посещенная ссылка) – “#FFFFFF”.

Сохраняем, проверяем в браузере. Как мы видим, все ссылки, так как они были посещенными, стали белого цвета. Давайте изменим им цвет – белый здесь не совсем приятен.

Сохраняем, проверим еще раз. Теперь стало более-менее. При нажатии, цвет ссылки меняется на голубой. Если бы ссылка была не посещенной, то она была бы синего цвета. После посещения она становится розового.

Сделаем слово «изучать» ссылкой. Наш документ теперь будет лежать не в папке history, а в корневой папке нашего сайта site. Жмем кнопку «новый». Сохраняем под именем about.html. Копируем структуру. Изменим подписи.

     
О нас
 Здесь вы можете узнать про нас подробнее.  

Сохраним. Перейдем в файл index.html. Пропишем здесь ссылку.

Ближе к PHP. И изучать эти многостраничные книги мне было так лениво, что каждый раз, когда я их снова видел, я сохранял адрес страницы и переключался на что-нибудь другое.

Сохраним документ (Ctrl+S). Обновляем. Как мы видим, ссылка стала синей. Если мы на нее нажмем, то она станет голубой, и мы попадем на страничку «О нас». После посещения ссылка стала розовой.

Перейдем обратно в код и зададим ссылке цвет, не зависящий от цвета, прописанного в теге . Для этого используется тег , который мы уже прошли. Например, сделаем ссылку черной. Стоит отметить, что тег следует прописывать в ссылке, потому что значение цвета (color) берется максимально близкое к слову. Так как тегу задан цвет из тега , то он находится в самом теге . Если мы пропишем до тега , то цвет, прописанный в теге , не повлияет на слово «изучать» — цвет останется таким, каким и был. По этой причине тег прописывается как можно ближе к слову.

Ближе к PHP. И изучать эти многостраничные книги мне было так лениво, что каждый раз, когда я их снова видел, я сохранял адрес страницы и переключался на что-нибудь другое.

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

Какие сделать ссылку на e-mail (электронную почту)?

Если у вас есть e-mail, то давайте пропишем на него ссылку. Это делается так: пишется mailto:ваша_почта.

Сохраняем. Проверяем. Слово «Олег Зубцов» стало ссылкой. При нажатии на нее выскочит окно сообщения, где вы сможете написать письмо владельцу e-mail’а.

Какие сделать изображение ссылкой?

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

Сохраняем. Проверим. Как вы видите, рамка у нас светится посещенным цветом, при нажатии она становится голубой, а мы попадаем на страницу «О нас».

Могу лишь посоветовать: чтобы избежать изменения цвета рамки изображения — не добавлять рамку изображению, т.е. border установить равный нулю. Обычно так выглядит красивее.

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

Задание будет такое: создать пять страниц, в которых будет по пять ссылок; из этих ссылок будут ссылки на почту (если у вас нет почты, то вы можете просто использовать какой-нибудь тестовый e-mail адрес), а также из всех этих ссылок должна присутствовать хотя бы одна ссылка на другой сайт (в нашем случае такая ссылка вела на мой сайт про то, как создать сайт).

Cпаcибо за внимание. До встречи в следующем видеоуроке, в котором затронем очень интересную тему про создание навигационных карт!

Источник

Advance Computing And Programming

C,C++,JAVA,HTML and CSS Programming,Networking,Windows,Software Solution and Web Designing etc.

HTML Info

HTML or HyperText Markup Language is the main markup language for creating web pages and other information that can be displayed in a web browser.The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

• HTML stands for Hyper Text Markup Language
• HTML is a markup language
• A markup language is a set of markup tags
• The tags describe document content
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages

About the Author

Tushar Bedekar is the founder of this Webpage .He is a student of «Electronics and Communication Engineering» and a part time blogger. He has many blogs and websites. The Aim of this Webpage is to help other people in updating their knowledge about Basic Computing and Programming. Thanks for your appreciation and also thanks to » THE YOUNG DEVELOPERS » Team . You can find him on FACEBOOK and GOOGLE +and LINKEDIN

Источник