В сегодняшней статье мы рассмотрим самый простой способ создания сайта. Сразу хочу сказать, что данный способ является очень примитивным и сегодня никто не создает сайты подобным образом, потому что для этого существуют специальные программы и сервисы.
Но, если нам необходимо создать веб страницу, то этот способ имеет право на существование.
Для того, чтобы создать простой сайт нам понадобится программа «Блокнот», которая есть в каждом компьютере.
Нажимаем в левом нижнем углу на кнопку «Пуск» и выбираем «Все программы». Находим «Блокнот» и открываем двойным щелчком левой кнопки мыши.
Давайте что-нибудь напечатаем.
Например: Ура! Я сделала свой сайт!
Называем файл «index.html»,выбираем «все файлы» и сохраняем на рабочем столе.
После сохранения появится вот такой значок.
Если мы откроем этот файл, то в браузере увидим веб страницу, которую мы создали.
Чтобы отредактировать нашу запись правой кнопкой мыши щелкаем по значку и в контекстном меню выбираем «Открыть с помощью» —>«Блокнот».
После того, как будут внесены изменения, не забываем сохранять файл. Открыв файл в браузере мы увидим изменения.
Чтобы сайт был виден всем в интернете, надо его загрузить на хостинг.
Таким образом, можно сделать простейший веб ресурс.
Чтобы приукрасить сайт картинками и гиперссылками, а также добавить красок, изменить размер шрифта, добавить таблицу и т.п., придется применить язык HTML, который будет понимать браузер.
Именно поэтому мы и сохраняли наш файл с расширением.html.
Теги для создания сайта на html в блокноте
Для начала неплохо бы узнать, что представляет из себя страница веб сайта.
Это текстовый документ, написанный на языке гипертекстовой разметки (html).
Чтобы понимать, что это такое следует ознакомиться с общими терминами.
HTML – это способ разметки документа, который одинаково интерпретируется различными браузерами в удобной и понятной для пользователя форме. В основе языка лежат определенные структурные элементы – теги. С их помощью и оформляется html – документ.
Часто применяемые
Теги бывают:
- парные
, , т.е. открывающиеся
, и закрывающиеся теги
, . Закрывающийся тег – дескриптор со знаком слеша (/); - непарные .
Основные виды и назначение тегов
- — данный элемент указывает браузеру, как следует интерпретировать документ. Не является обязательным элементом, но рекомендуется его использовать, чтобы избежать проблем, которые могут возникнуть при отображении страницы.
- — это тег, с которого начинается и им же заканчивается любой веб документ.
- < head > </head > — внутри данного тега располагается важная информация (метаданные, заголовок страницы, ссылки на стили оформления, а так же скрипты).
— еще один парный тег, который располагается внутри предыдущего. Он служит для определения заголовка веб страницы, который будет отображаться в браузере. - Тег следует за . Именно внутри > будет содержаться вся та информация, которую пользователь увидит в браузере.
- — служит для оформления гиперссылок (). Это один из важнейших элементов языка html.
- — с помощью него оформляются текстовые абзацы.
- — служит для выделения текста полужирным шрифтом.
,
,
,
,
,
— тоже являются парными тегами, например:
. С их помощью текст можно разбить на подзаголовки различных уровней, что позволяет определить их важность по отношению к всему документу.- Тег в отличие от предыдущих — непарный. Применяется для обозначения перехода на новую строку в документе.
На самом деле, тегов существует намного больше, но перечисленных вполне достаточно для того, чтобы создать через блокнот простую страницу сайта.
На основании выше изложенного созданная нами страница на языке html, примет следующий вид:
Таким образом, создать сайт в html в блокноте достаточно просто.
Видео: «Как сделать сайт за 15 минут»
Чтобы сделать страницу более привлекательной понадобится не только , но и изучить CSS.
- 4.3 out of 5 based on 13 votes
Это в том случае если файл razdel.html лежит в одной папке с файлом index.html. Если же он лежит например в папке pages, то адрес будет выглядеть так:
Весь код файла index.html будет выглядеть так:
Можете открыть файл index.html в вашем браузере и перейти по ссылке, в результате откроется новая страница. Как вы заметили, в данном случае страница открылась в текущем окне. Можно сделать так чтобы при нажатии на ссылку новая страница открывалась в новом окне для этого в открывающий тег нужно добавить атрибут target="_blank" Это будет выглядеть следующим образом:
Кроме их существуют еще и внутренние ссылки. Внутренние ссылки предназначены для навигации в пределах одного открытого документа. Это может пригодиться, если Вы, например, решили создать какой-то один большой документ, а вверху его поместить содержание. Или вам просто нужно быстро направить посетителя, к какой либо части вашей страницы.
Предположим, нам нужно сделать такую ссылку, нажав на которую, посетитель будет попадать в верхнюю часть данной страницы. Для этого первое слово или словосочетание на данной странице необходимо заключить в тег первое слово. Где в кавычках необходимо указать какое либо название.
К примеру, для той страницы где вы сейчас находитесь, можно сделать так:
Этим мы определили якорь т. е. место куда будет попадать пользователь при нажатии на нашу ссылку. Теперь в том месте, где это нужно, необходимо указать саму ссылку. Делается это так:
Заметьте что здесь в кавычках перед словом verh обязательно должен быть знак решетка #. Чтобы посмотреть, как это работает, можете нажать на следующую ссылку: .
Ссылаться можно не только на файлы с расширением html но и на файлы с другими расширениями. Для этого в адресе ссылки необходимо прописывать соответствующее имя файла и расширение. Например, html ссылка на файл архива будет выглядеть так:
Можете попробовать скопировать какой либо архив или музыкальный файл в папку с файлами, созданными ранее и дать на них ссылку. В этом случае при переходе по ссылке браузер предложит вам открыть или сохранить файл. Атрибут target="_blank" так же можно применять к данным ссылкам.
Теперь рассмотрим, какие бывают виды ссылок. Различают следующие виды ссылок абсолютные и относительные. Абсолютные ссылки это ссылки, в которых указан полный адрес документа. Такие ссылки используются для связи с внешними ресурсами сети. Пример такой ссылки:
http:// - самый распространенный протокол, при помощи его обеспечивается доступ к веб-страницам, ссылка выглядит так:
mailto: - протокол доступа к электронной почте. Его необходимо использовать, если вы хотите дать ссылку на электронную почту. Код ссылки записывается следующим образом:
Кроме этих протоколов есть еще протокол ftp://, при помощи которого, осуществляется передача файлов по FTP с помощью программы FTP-клиента. А также протокол file:// - используется для указания ссылки на страницу расположенную на локальном компьютере.
Вам при создании веб страниц в основном придется иметь дело с первыми двумя протоколами. И последнее что нам осталось рассмотреть, в рамках данного урока, это как делать ссылку из изображения. На самом деле все очень просто. Вместо текста заключенного в теги нужно вставить адрес изображения. Как вставлять изображение мы рассматривали в уроке Как вставлять картинки и производить их позиционирование в html .
Сохраните изображение, которое вы видите слева в ту папку, где лежат файлы, которые мы создавали ранее. Теперь мы сделаем это изображение ссылкой. Для этого в нашем файле index.html нужно прописать следующее:
Бродя по интернету вы могли видеть такой эффект когда при нажатии на ссылку в виде небольшого изображения загружается другое большое изображение. Для того чтобы сделать такой эффект необходимо в качестве адреса в ссылке указать адрес большого изображения.
Гиперссылки придуманы для того, чтобы связывать документы в сети между собой и если у вас сайт состоит не из одной страницы, а из нескольких, то связать их между собой можно только создав гиперссылки. Давайте разберемся непосредственно на примере как это выглядит.
Создание простой гиперссылки
Перейти на другую страницу
Открытие ссылки в новой странице
Существует еще один интересный атрибут который вам может пригодится:
Перейти на другую страницу
Атрибут target со значением _blank открывает ссылку в новом окне, это часто применяется, если вы не хотите чтобы человек потерял ваши страницу и при этом получил необходимую ему информацию просто в новой вкладке или окне.
Ссылки изображения
Результат в браузере:
По сути здесь все просто, я поместил тег изображения между открытием и закрытием тега гиперссылки , но я опять таки не просто вставил два изображения, к одному я присвоил класс img в котором обнулил рамку вокруг изображения, так как когда оно становится гиперссылкой она появляется, но не во всех браузерах, например IE вы увидите, а в Google Chrome нет.
Подчеркивание в ссылках
Перейти на другую страницу
Перейти на другую страницу
Для наглядности я привел два варианта решения данной проблемы, присвоил селектору классов, и прописывая данный класс вы будете убирать ненужное подчеркивание в конкретных местах. Второй вариант решения проблемы убрать подчеркивание со всех ссылок в теге <а>, что конечно редко вызывает необходимость, но все же знания не бывают лишними.
Ссылки внутри документа
Не редко когда документ достаточно длинный и в начале страницы делают небольшое меню с ссылками на подразделы этой страницы. Данные ссылки называются ссылками внутри документа, а реализуется все это достаточно просто. Для начала в документе расставляются якоря, это метки, они ставятся в документе там куда необходимо будет переместить при нажатии на внутреннюю ссылку, как правило это заголовки разделов, выглядит метка так:
И последнее, что нам необходимо знать о гиперссылках, это ссылки на электронные почтовые ящики, реализуется очень просто, достаточно добавит в атрибут href запись вида mailto: и адрес почтового ящика:
На этом я заканчиваю урок «Создание гиперссылок в html», как вы могли заметить у нас здесь не обошлось и без CSS, в общем материал достаточно несложный, я думаю для вас все будет просто и понятно, будут вопросы пишите.
Дата публикации:2014-04-23
Гиперссылка - основной элемент гипертекста, отличительная черта HTML-документов, связывающая веб-страницы и другие файлы между собой. У многих людей слово «Ссылка» небезосновательно ассоциируется со словом «Интернет».
Простые ссылки
В языке HTML для создания ссылок используется тег и его атрибуты.
Пойдём от простого к сложному и для начала научимся добавлять в HTML-документ элементарные ссылки. Нам понадобятся следующие элементы языка:
href - атрибут тега , значением которого и будет адрес ссылки. Ссылаетесь ли вы на сайт, веб-страницу или файл - не важно, отличаться будет только значение этого атрибута.
Теперь рассмотрим строку HTML-кода:
Теперь рассмотрим каждый элемент строки.
- это тег, отвечающий за создание ссылки.
- закрывающий тег.
Между символами > и < расположен текст Ссылка. Его будет видеть открывший страницу пользователь, на него он будет щёлкать, чтобы перейти по заданному в ней адресу.
Например, внизу HTML-документа вы хотите разместить ссылку «Вверх», которая будет вести к его началу - заголовку «Начало страницы». Для этого вам нужно поставить в начале страницы якорь, а внизу страницы - ссылку на него.
Пусть якорь будет называться begin. Тогда в тег, к содержимому которого будет вести ссылка, нужно добавить атрибут id со значением begin .
Начало страницы
Якорь установлен, и теперь остаётся только добавить ведущую на него ссылку. В нашем случае она будет выглядеть так:
Обратите внимание: перед названием якоря стоит решётка - это отличительная черта внутренних ссылок.
Графические ссылки
С появлением HTML 5 тег превратился в контейнер, способный вмещать в себя блочные элементы, так что ссылкой теперь может быть не только текст или картинка, но даже таблица, список или целая страница.
Ссылки на e-mail и Skype
Для удобства посетителей сайта на странице можно не просто указывать свои контактные данные, но и делать их активными, чтобы при щелчке на адрес e-mail у пользователя сразу открывался почтовый клиент, а при щелчке на логин Skype программа сразу же запрашивала разрешение на звонок.
Ссылки можно поделить на две категории:
ссылки на внешние ресурсы
— создаются с помощью тега и используются для расширения возможностей текущего документа при обработке браузером;
гиперссылки
— ссылки на другие ресурсы, которые пользователь может посетить или загрузить.
Как сделать гиперссылки на сайте
1. Структура ссылки
Гиперссылки создаются с помощью парного тега . Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.
Обязательным параметром тега является атрибут href , который задает URl-адрес веб-страницы.
указатель ссылкиСсылка состоит из двух частей — указателя и адресной части . Указатель ссылки представляет собой фрагмент текста или изображение, видимые для пользователя. Адресная часть ссылки пользователю не видна, она представляет собой адрес ресурса, к которому необходимо перейти.
Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:
Метод доступа://имя сервера:порт/путь
Метод доступа , или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:
file обеспечивает чтение файла с локального диска:
File:/gallery/pictures/summer.html
http предоставляет доступ к веб-странице по протоколу HTTP:
Http://site.ru/
https - специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS)
Https://site.ru/
ftp осуществляет запрос к FTP-серверу на получение файла:
Ftp://pgu/directory/library
mailto запускает сеанс почтовой связи с указанным адресатом и хостом:
Mailto: [email protected]
Имя сервера описывает полное имя машины в сети, например, site.ru . Если имя сервера не указано, то ссылка считается локальной, т.е. она относится к той же машине, на которой находится HTML-документ, содержащий ссылку.
Номер порта ТСР
, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:
21 — FTP
23 — Telnet
70 — Gopher
80 — HTTP
Путь содержит имя папки, в которой находится файл.
2. Абсолютный и относительный путь
Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный.
Рис. 1. Пример структуры папок
2.1. Абсолютный путь
Абсолютный путь
указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:
1) протокол, например, http (опционально);
2) домен (доменное имя или IP-адрес компьютера);
3) папка (имя папки, указывающей путь к файлу);
4) файл (имя файла).
Существует два вида записи абсолютного пути — с указанием протокола и без него:
Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Если файл находится в корневой папке, то путь к файлу будет следующим:
Http://site.ru/index.html
При отсутствии имени файла будет загружаться веб-страница, которая задана по умолчанию в настройках веб-сервера (так называемый индексный файл).
Http://site.ru/
Обычно в качестве индексного файла выступает документ с именем index.html . Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.
2.2. Относительный путь
Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http:// , он выполняет поиск указанного документа на том же сервере.
Относительный путь содержит следующие компоненты:
1) папка (имя папки, указывающей путь к файлу);
2) файл (имя файла).
Путь для относительных ссылок имеет три специальных обозначения:
/ указывает на корневую директорию и говорит о том, что нужно начать путь от корневого каталога документов и идти вниз до следующей папки
./ указывает на текущую папку
../ подняться на одну папку (директорию) выше
Главное отличие относительного пути от абсолютного в том, что относительный путь не содержит имени корневой папки и родительских папок, что делает адрес короче, и в случае переезда с одного домена на другой не нужно прописывать новый абсолютный адрес. Но если сторонний ресурс будет ссылаться например, на ваши изображения с относительными адресами, то они не будут отображаться на другом сайте.
3. Якоря
Якоря , или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи тега с разницей в том, что атрибут href содержит имя указателя — так называемый якорь , а не URl-адрес. Перед именем указателя всегда ставится знак # .
