Как создать вторую страницу в html

Как создать вторую страницу в html

Создаём сайт из трёх HTML-страниц

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

Закиньте в папку Мой сайт , все файлы которые у нас уже есть, а именно два HTML-файла:
index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,

и две фотографии:
irbis.jpg
polyarnyi-volk.jpg

Сделаем третью страницу, она будет посвящена полярной сове.

Данные третьей страницы

Создайте в папке Мой сайт HTML-файл:
polyarnaya-sova.html

Название страницы , сделайте:
Страница о полярной сове

Статья состоящая из двух абзацев

В итоге, вы должны получить следующую страницу.

Соединяем ссылками страницы сайта

На данный момент у нас есть три HTML-файла, в которых находятся статьи описывающие различных северных животных:

index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,
polyarnaya-sova.html — Статья о полярной сове .

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

Пришло время создать вторую страницу сайта и объединить их ссылками, но для начала обсудим один важный момент.

Вы создали первую страницу сайта html код, которой указан выше. Эта страница должна иметь название index.html то есть весть код в блокноте нужно сохранит под именем index.html.

Если у вас другое название — переименуйте. И следите за тем, чтобы страница не называлась index.html.txt.

Вот такое правило. Главная страница сайта обязательно должна иметь название index с расширением .html или .php — это расширение динамической страницы написанной на языке программирования PHP, но об этом будет рассказано потом.

Читайте также:  Замок который можно открыть любым ключом

Могут быть и другие расширения, например .htm, но главная страница должна носить имя index.

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

Итак, у нас две одинаковых страницы с разными именами: index.html и page2.html

Займемся редактированием page2.html.

Откройте ее при помощи блокнота и внесите изменения. Допустим, на ней будут размещаться ссылки на разные ресурсы.

Значит, нам нужно изменить название страницы в тегах и написать другой контент, например ссылку на сайт mm-business.ru

Следуйте пошаговому созданию сайта. Получает следующий html код:

Итак, у нас есть три html-страницы, которые нужно связать между собой. В HTML для этого используются теги . Все, что вы поместите внутрь этих тегов (текст или картинку) станет ссылкой. Это значит, что после нажатия на то, что вы указали в тегах произойдет переход. Куда? На страницу, которая указана в атрибуте href.

Рассмотрим наш блок меню:

главная ||шаблоны || контакты

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

Здесь следует подробнее остановиться на способах задания адреса html-страницы в атрибуте href. Все наши страницы находятся в одной папке, т.е. имеют один уровень. Поэтому мы просто указали имя html-страницы.

Если же html-страница будет находиться в другой папке, то необходимо будет указать путь к ней от данной html-страницы. Например, если в нашей папке site лежат страницы index.html и pattern.html, а страницу kontact.html мы поместили бы в папку kon, то указывая путь со страницы index.html на страницу kontact.html, мы написали бы следующее: (все папки указываются через / ).

Читайте также:  Vid 1871 pid 7670

Если вы захотите сделать ссылку на html-страницу, которая не лежит на вашем сайте, то придется указать ее абсолютный адрес, например,

Нам осталось на разных html-страницах разместить разный контент.

Пусть на нашей главной странице будут размещены фотографии шаблонов с их краткими характеристиками, на странице pattern. html — будут просто фотографии шаблонов, а на странице kontact.html — адрес нашей электронной почты.

Начнем со страницы index.html. Откройте ее в блокноте.

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

Здесь — контент
Здесь фото Здесь описание Здесь фото Здесь описание
Перед вами уникальный трёх-колоночный шаблон на бизнес тематику выполненный в строгом и продуманном стиле в слиянии белого и серого цветов. В правой части страницы располагается удобное двух-колоночное главное меню. В данной теме имеется возможность размещения видео роликов и рекламы 120х600pix. Для вас представлена трёх-колоночная тема, выполненная в слиянии чёрной и жёлтой гаммы цветов, дизайн шаблона, выполненный в спокойных и неярких цветах не раздражает глаз. В правой части блога вы увидите двух-колоночное главное меню, в теме также присутствует календарь.

Страница index.html готова. Займемся страницей pattern.html. На ней мы решили просто разместить фотографии шаблонов.

Откройте ее в блокноте и вместо слов "Здесь — контент" вставьте заголовок, картинки и какой-нибудь текст, а чтобы все расположилось по центру в тег добавьте атрибут align="center"

Здесь собраны все шаблоны сайтов.

обозначают абзац (т.е. текст отделенный от остальных элементов отступами сверху и снизу).

Наконец, на странице kontact.html укажем наш e-mail. Сделаем это двумя равноправными способами:

Пишите нам по адресу: admin@mysite.ru

Пишите нам по адресу: admin@mysite.ru

Читайте также:  Textfree web регистрация на русском

Вот собственно и все. Пощелкайте по ссылкам и убедитесь, что все работает. Аналогичным образом вы можете сделать сколько угодно html-страниц и наполнить их разнообразным контентом. Рабочий пример можно посмотреть здесь.

Наверно, у вас возникло два вопроса:

1. Откуда брать картинки для сайта (все эти шапки и меню)?

Для этого ознакомьтесь с разделами графика для web, и уроки Photoshop

Поэкспериментируйте с тегами и их атрибутами, которые вы узнали из этих уроков. Конечно, это лишь основы HTML, но для начала этого достаточно.

Далее, включайте на свои страницы и другие теги (их полный перечень с описанием и примерами приведен в разделе Уроки html). Экспериментируйте, пока не освоитесь в мире HTML. Затем подключайте другие технологии — CSS, Java script, PHP и т.д.

На этом четвертый урок закончен. В следующем уроке вы научитесь размещать свой сайт в интернете.

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

Ссылка на основную публикацию
Как сделать кроссворд в ворде 2010
Пользоваться файлами, созданными в MS Office, можно как угодно: открыть документ Ворд онлайн, составить в Экселе квартальный отчёт или в...
Как поставить старую версию скайпа
Программа Skype, как и любой другой активно развивающийся софт, постоянно обновляется. Однако не всегда новые версии выглядят и работают лучше...
Как поставить фотографию на контакт в андроид
На любом смартфоне реализована возможность установки изображения на телефонный контакт. Оно будет отображаться при поступлении входящих звонков от этого контакта...
Как сделать местный разрез
Основным назначением видов является определение формы внешних поверхностей предмета. Выявление на видах формы внутренних поверхностей при помощи штриховых линий не...
Adblock detector