Инструкция

Гипертекстовые ссылки предназначены для того, чтобы связывать текст, изображение или другие элементы страниц с другими гипертекстовыми документами. Все элементы страницы сайта, включая ссылки, создаются браузером, который получает подробные инструкции из присылаемого ему сервером кода страницы. Это код на языке HTML (HyperText Markup Language - «язык разметки гипертекста») состоит из «тегов», которые описывают тип, внешний вид и расположение всех элементов веб-страницы. Стандартная гиперссылка создается браузером, когда он встречает в коде страницы, например, такой тег:Текстовая ссылкаЗдесь - открывающий тег ссылки, - закрывающий. Открывающий тег может содержать дополнительную информацию - «атрибуты». В этой простой ссылке атрибут href содержит адрес страницы или документа, запрос на который будет отправлен, если посетитель щелкнет по ссылке. Иногда не обязательно указывать полный адрес - если запрашиваемый документ лежит на сервере в этой же папке (или вложенной в нее), то достаточно указать только его имя или путь к вложенной папке. Такие называются «относительными», их следует, к примеру, так:Текстовая ссылкаПри переходе по этой ссылке будет загружен документ moreText.html из этой же папки. А абсолютные адреса ссылок начинаются с указания протокола, например:Текстовая ссылкаЗдесь "http" (HyperText Transfer Protocol - «протокол передачи гипертекста») это обычный адрес документа в сети. А если указать протокол "mailto", то гиперссылка будет запускать вашу почтовую программу, вместо перехода на :email-ссылкаВ ссылках на файлы, лежащие на ФТП-сервере указывают, соответственно, протокол FTP (File Transfer Protocol - «протокол передачи файлов»):Ссылка на архив

Другой атрибут гиперссылки, который указывает, в которое окно следует загружать этот новый документ, как "target". Если в атрибут href вы можете вписать любой правильный адрес, то target может иметь всего четыре значения:_self - страница надо загружать в это же самое окно или фрейм. «Фреймами» называют одну часть разделенного на несколько частей окна;_parent - если текущая страница сама была загружена из другого окна (или фрейма), то у нее есть «родительское» окно. А значение _parent требует, чтобы страница, на которую указывает ссылка, загружена была в это родительское окно;_top – новую страницу нужно загружать в это же окно. Если это окно разделено на фреймы, то при загрузке они будут уничтожены, а новая страница будет единственным фреймом в этом окне;_blank – для перехода по ссылке будет открыто отдельное окно;Например:
Ссылка откроется в новом окне

Существует возможность делать гиперссылку для перехода не на другую страницу, а на какой-то заданный участок этого же документа. Чтобы указать в html-коде документа такой «пункт назначения» используют ссылку-якорь:А ссылка, прокручивающая документ до этого якоря выглядит так:Ссылка на первый якорь страницыМожно ссылаться на якоря не только в этом документе, но и в других:Якорь в другой страницеКонечно в html-коде другого документа должна существовать такая ссылка-якорь с атрибутом name="Якорь1".

Гиперссылкой может служить не только текст, но и другие элементы страниц - например, картинки. Самый простой тег, рисующий картинку, выглядит так:А чтобы картинка стала гиперссылкой, ее следует заключить между открывающим и закрывающим тегами ссылки:

В этом уроке мы научимся делать гиперссылки. Без них невозможен ни один полноценный сайт. Гиперссылка- это ссылка, при нажатии на которую браузер переводит нас на другую страницу в сети, или на другой сайт, или на определенное место в документе, в общем, туда, куда мы назначим. Для этого урока нужно проделать определенную подготовительную работу: создайте новую страницу с названием third_page.html .

Создайте на странице такой список:

• Главная страница
• Первая страница
• Вторая страница

Код выглядит так:

• Главная страница
• Вторая страница
• Третья страница

Теперь мы из этого списка сделаем меню, каждая строка которого ведет на другую страницу. Это можно сделать с помощью гиперссылок. Тег гиперссылки выглядит так:

Здесь внутри тега элемента списка (

Код будет выглядеть так:

Откройте страницу в браузере, пощелкайте по ссылкам, посмотрите, как работают переходы на страницы. Если у вас ссылки не открываются, то выполните следующие действия:

• Проверьте, чтобы все файлы (index.html , second_page.html) находились в одной папке со страницей third_page.html
• Удалите куки в браузере
• Перезагрузите браузер, потом перезагрузите страницу third_page.html

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

Создайте новую страницу под названием: third_page.html . Создайте список подобный тому, который мы описывали при работе в блокноте.

Для создания гиперссылок в Dreamweaver используется окно Link (цифра1). Выделите текст: Главная страница. Во вкладке Files (цифра 2) нажмите левой кнопкой на файле index.html (цифра 3) и не отпуская кнопки перетащите в поле Link. У вас в поле дизайна выделенный текст должен поменяться: цвет шрифта станет синим и появится нижнее подчеркивание. Вот мы и создали нашу первую гиперссылку.

Выделите текст «Третья страница». В поле Link введите: http://www.mail.ru/

Посмотрите страницу в браузере.

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

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

Но, если нам необходимо создать веб страницу, то этот способ имеет право на существование.

Для того, чтобы создать простой сайт нам понадобится программа «Блокнот», которая есть в каждом компьютере.

Нажимаем в левом нижнем углу на кнопку «Пуск» и выбираем «Все программы». Находим «Блокнот» и открываем двойным щелчком левой кнопки мыши.

Давайте что-нибудь напечатаем.

Например: Ура! Я сделала свой сайт!

Называем файл «index.html»,выбираем «все файлы» и сохраняем на рабочем столе.

После сохранения появится вот такой значок.

Если мы откроем этот файл, то в браузере увидим веб страницу, которую мы создали.

Чтобы отредактировать нашу запись правой кнопкой мыши щелкаем по значку и в контекстном меню выбираем «Открыть с помощью» —>«Блокнот».

После того, как будут внесены изменения, не забываем сохранять файл. Открыв файл в браузере мы увидим изменения.

Чтобы сайт был виден всем в интернете, надо его загрузить на хостинг.

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

Чтобы приукрасить сайт картинками и гиперссылками, а также добавить красок, изменить размер шрифта, добавить таблицу и т.п., придется применить язык HTML, который будет понимать браузер.

Именно поэтому мы и сохраняли наш файл с расширением.html.

Теги для создания сайта на html в блокноте

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

Это текстовый документ, написанный на языке гипертекстовой разметки (html).

Чтобы понимать, что это такое следует ознакомиться с общими терминами.

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

Часто применяемые

Теги бывают:

• парные , , т.е. открывающиеся , и закрывающиеся теги , . Закрывающийся тег – дескриптор со знаком слеша (/);
• непарные .

Основные виды и назначение тегов

• — данный элемент указывает браузеру, как следует интерпретировать документ. Не является обязательным элементом, но рекомендуется его использовать, чтобы избежать проблем, которые могут возникнуть при отображении страницы.
• — это тег, с которого начинается и им же заканчивается любой веб документ.
• < head > </head > — внутри данного тега располагается важная информация (метаданные, заголовок страницы, ссылки на стили оформления, а так же скрипты).
• — еще один парный тег, который располагается внутри предыдущего. Он служит для определения заголовка веб страницы, который будет отображаться в браузере.
• Тег следует за . Именно внутри > будет содержаться вся та информация, которую пользователь увидит в браузере.
• — служит для оформления гиперссылок (). Это один из важнейших элементов языка html.
• — с помощью него оформляются текстовые абзацы.
• — служит для выделения текста полужирным шрифтом.

• ,

  ,

  ,

  ,

  ,

  — тоже являются парными тегами, например:

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

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

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