Открытие ссылки в новой странице

Существует еще один интересный атрибут который вам может пригодится:

Перейти на другую страницу

Атрибут target со значением _blank открывает ссылку в новом окне, это часто применяется, если вы не хотите чтобы человек потерял ваши страницу и при этом получил необходимую ему информацию просто в новой вкладке или окне.

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

Результат в браузере:

Подчеркивание в ссылках

Перейти на другую страницу
Перейти на другую страницу

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

Ссылки внутри документа

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

И последнее, что нам необходимо знать о гиперссылках, это ссылки на электронные почтовые ящики, реализуется очень просто, достаточно добавит в атрибут href запись вида mailto: и адрес почтового ящика:

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

Дата публикации:2014-04-23

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).

Пример 1. Использование абсолютных ссылок

Поисковая система Яндекс

Примеры относительных адресов

/
/demo/ Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.

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

../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.

manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога (пример 2).

Пример 2. Использование относительных ссылок

Посмотрите на мою фотографию!

Как сделать такое же фото?

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

Одна страница у нас уже есть, создадим еще одну: index.html - это стандартное название главной страницы сайта. Если вы всерьез собираетесь делать сайт, то полезно набирать код вручную. А для ленивых и практичных: открываем предыдущую учебную html-страницу в Блокноте и задаем имя: index.html (Файл - Сохранить как).

Не забываем про тип файла и кодировку - UTF-8 (см. первый урок о создании html-страницы в Блокноте). Затем открываем файл index.html в Блокноте, редактируем его, чтобы получилось следующее:

Для тех, у кого хромает компьютерная грамотность: двойной клик левой кнопкой мыши по файлу .html откроет его в основном браузере. Чтобы открыть его в другом браузере нужно сделать по нему клик правой кнопкой мыши, выбрать в меню пункт «Открыть с помощью» - и выбрать название браузера. Там же можно выбрать Блокнот или другой редактор - для редактирования файла.

Теперь посмотрим, что у нас получилось, в браузере. Салатовый цвет фона всей страницы задан атрибутом bgcolor тега Body:

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

Чтобы задать цвет отдельных элементов, таких как абзац P или заголовки допускается применять универсальный атрибут style, пример:

...

К ак вставить изображения

Поместите любые изображения в ту же папку, где находятся две учебные html-страницы. Саму папку можно назвать, ну скажем Site1. Измените названия файлов изображений на img1, img2, img3, как на скриншоте. Либо измените в нашем коде эти названия на названия ваших изображений, а если нужно, то поменяйте и расширения (формат файлов). У меня это картинки 3D человечков, в формате.jpg:

Вы наверно слышали выражение «Корневой каталог сайта» - это директория (папка), где расположены все файлы сайта. В нем могут располагаться другие папки: с изображениями, с файлами скриптов, с отдельными разделами сайта. Чтобы потом не путаться в куче файлов с разными расширениями, уместно создать, например, отдельную папку для изображений. А для больших сайтов - несколько папок изображений для разных его разделов.

Если ваши изображения поместить в отдельную папку, например, с названием «papka», то путь к ней (значение обязательного атрибута scr) будет выглядеть так: . Если ваши изображения не отображаются в браузере, то причин всего две: указан неправильный путь к файлу или опечатка. Вы уже заметили, что элемент Img не имеет закрывающего тега. Разберем другие примененные атрибуты тега Img.

Во втором изображении img2.jpg: атрибут alt - в качестве значения используется текст, который виден, если браузер, по каким-либо причинам, не смог отобразить изображение. Рекомендуется использовать атрибут alt, прописывая в нем ключевые слова . Третье изображение помещено в тег P, а его расположение справа от текста абзаца определено значением «right» атрибута align, служащего для выравнивания картинки.

Стоит, еще отметить, что кроме формата jpg в веб-графике применяются форматы gif и png. Желательно научиться оптимизировать изображения для веб и пользоваться программой Photoshop. Оптимизированные, более «легкие по весу» изображения, меньше тормозят загрузку страниц в браузере.

Кстати, вы видите отступы (разное количество пробелов) в начале каждой строки кода - их делать не обязательно. Это делается для зрительного удобства, чтобы вебмастеру было проще редактировать документ в будущем. Но если не делать много пропусков, не оставлять пустых строк - html-страница будет меньше по размеру.

С сылки: как связать html-страницы в сайт

Ссылки (гиперссылки) - тег A с атрибутом href, значение которого - путь к файлу (URL), я поместил в элементы списка Li, что мы и наблюдаем в скриншоте (2-ом) страницы из браузера. Здесь три вида ссылок: первая ссылается на сайт, где вы сейчас находитесь. Если нажать на нее при наличии интернет-соединения, то вы попадете на главную страницу моего сайта. Если добавить в URL: «/index.html» - результат будет тот же.

Вторая ссылка, как пример, ведет на несуществующую страницу spravochnik.html, находящуюся в папке «papka» моего сайта. У этих двух ссылок указаны полные пути к документам, на который они ссылаются. У третьей гиперссылки указан относительный путь. Для того чтобы она работала необходимо наличие страницы index.html в одной папке со страницей, где эта ссылка размещена. В данном случае, она ссылается на эту же страницу (на саму себя).

Т.е. ссылки, ведущие на страницы других сайтов, могут быть только с указанием полного URL. А ссылки на внутренние страницы этого же сайта могут иметь, как полный, так и относительный адрес. Об атрибутах: значение атрибута title (не путать с тегом) - текст, который всплывает при наведении курсора на элемент, см. на 2-ом скриншоте. Title - универсальный атрибут, его можно использовать для тех же изображений. Атрибут target со значением «blank» открывает страницу в новой вкладке браузера.

Теперь свяжем наши две учебные странички в единый сайт. Добавим на обе страницы, сразу за тегом Body две такие строчки (здесь 8-ая и 9-ая) - две гиперссылки:

Первая ссылка ведет на сегодняшнюю index-страницу, другая на вторую учебную (у меня это - formatirovanie_teksta.html, у вас может быть любое другое название). По сути, мы создали сайт из двух страниц, а эти ссылки - это меню сайта. Три неразрывных пробела, между ссылками, мною добавлены для создания отступа, чтобы раздвинуть ссылки. Покликайте по ссылкам в браузере.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теги бывают:

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

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