Как соединить страницы в HTML

Как соединить страницы в HTML

<!DOCTYPE html>

Как вы уже знаете, каждый HTML-документ начинается с тега <html>, данное объяснение было для новичков. На самом деле, каждый HTML-документ, должен начинаться со строки <!DOCTYPE html>, а уже под ним ставится тег <html>. Строка <!DOCTYPE html> даёт понять браузеру, что язык HTML используемый в документе, ориентирован на последнюю, пятую версию языка, т.е. на HTML5.

Конечный HTML-документ, например файла index.html, в итоге должен выглядеть следующим образом:

<!DOCTYPE html> <html> <head> <title>Страница о снежном барсе</title> <style> h1 { color: green; font-family: Arial; } p { color: blue; font-size: 19px; width: 60%; } </style> </head> <body> <h1>Снежный барс</h1> <img src=»irbis.jpg»> <p> Снежный барс (ирбис, ак барс) — крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Достигая вместе с хвостом длины 200-230 см, весит до 55 кг. Окраска меха светлая дымчато-серая с кольцеобразными и сплошными тёмными пятнами.</p> <p> Охотится снежный барс в основном на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется примерно около 10 тысяч особей. По состоянию на 2013 год охота на ирбисов запрещена.</p> <a href=»index.html»>Снежный барс</a> <a href=»polyarnyi-volk.html»>Полярный волк</a> <a href=»polyarnaya-sova.html»>Полярная сова</a> </body> </html>

Всегда добавляйте строку <!DOCTYPE html>, в начале каждого HTML-документа.

Регистрация домена и хостинг

Итак, у вас в папке Мой сайт хранятся три HTML-файла:
index.html
polarnayi-volk.html
polarnaya-sova.html

и три фотографии:
irbis.jpg
polyarnyi-volk.jpg
polyarnaya-sova.jpg

Для того чтобы разместить всё это в интернете, нужно сначала зарегистрировать себе имя сайта (домен), наиболее качественная компания по регистрации доменов, на данный момент это Вебнеймс:
webnames.ru — компания регистрации доменов. Обычно чтобы зарегистрировать домен в зоне .RU, нужно платить около 100 рублей, в первый в год и около 500р в последующие года (оплата производится 1 раз в год).

После регистрации имени сайта, нужно купить себе хостинг, наиболее качественная компания на данный момент это Бегет:
Beget.ru — компания предоставляющая хостинг для сайтов. В компании Бегет, можно разместить сайт бесплатно или платно от 100 до 385 рублей в месяц. Разместить сайт бесплатно!

Хостинг — это размещение сайта в интернете.

Когда вы разместите сайт в интернете, то при наборе имени сайта, например gabdrahimov.ru, первым откроется файл index.html Это своего рода главная страница сайта, с которой посетитель начинает путешествие по вашему ресурсу.

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

В принципе на этом введение в создание сайтов закончено, вам осталось лишь прочитать последний урок, начального цикла учебника HTML.

Читать далее: Заключение учебника по HTML

Вам понравились уроки? Поддержите проект «Учебники для вебмастера»!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: HTML, Статья Метки: html, создание сайта, учебник html Статья создана: 15 Окт 2014 Статья обновлена: 7 Фев 2016

Соединяем html-страницы между собой


Главная → Делаем сайт — первые шаги → Урок 4. Соединяем html-страницы между собой Итак, у нас есть три html-страницы, которые нужно связать между собой. В HTML для этого используются теги <a> </a>. Все, что вы поместите внутрь этих тегов (текст или картинку) станет ссылкой. Это значит, что после нажатия на то, что вы указали в тегах <a> </a> произойдет переход. Куда? На страницу, которая указана в атрибуте href.
Шаг 1.
Рассмотрим наш блок меню:

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

Нам необходимо, чтобы при нажатии на слово «главная» открывалась страница index.html, при клике по «шаблоны» — html-страница pattern.html, а при клике по «контакты» — html-страница contact.html. Внесем соответствующие изменения в эту часть кода: Обратите внимание, наши ссылки стали синего цвета — это цвет ссылок по умолчанию. Но мы же помещали их в теги <font> </font>? Это тот самый случай, когда порядок вложенности тегов играет большую роль. Чтобы ссылки снова стали белыми, следует теги <font> </font> поместить в теги <a> </a>, и сделать это придется у всех трех ссылок.

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

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

Здесь следует подробнее остановиться на способах задания адреса html-страницы в атрибуте href. Все наши страницы находятся в одной папке, т.е. имеют один уровень. Поэтому мы просто указали имя html-страницы.
Если же html-страница будет находиться в другой папке, то необходимо будет указать путь к ней от данной html-страницы. Например, если в нашей папке site лежат страницы index.html и pattern.html, а страницу kontact.html мы поместили бы в папку kon, то указывая путь со страницы index.html на страницу kontact.html, мы написали бы следующее: <a href=»kon/kontact.html»> (все папки указываются через / ).
Если вы захотите сделать ссылку на html-страницу, которая не лежит на вашем сайте, то придется указать ее абсолютный адрес, например,
<a href=»http://www.mysite.ru/kon/kontact.html»>
Шаг 2.
Нам осталось на разных html-страницах разместить разный контент.
Пусть на нашей главной странице будут размещены фотографии шаблонов с их краткими характеристиками, на странице pattern. html — будут просто фотографии шаблонов, а на странице kontact.html — адрес нашей электронной почты.
Начнем со страницы index.html. Откройте ее в блокноте.
Найдите в коде страницы ту часть кода, которая отвечает за контент. Сейчас там написано следующее:

Здесь — контент

Так как у нас здесь будут фотографии шаблонов и их описания, то удобнее всего поместить фотографии в одном столбце, а описания в другом. Для примера, возьмем два шаблона, а значит, наша таблица будет состоять из 2 строк и 2 столбцов (вы можете сделать сколько угодно). Итак, изменим эту часть следующим образом:

Здесь фото Здесь описание
Здесь фото Здесь описание

Теперь в первый столбец вставим фото шаблонов, а во второй — их описания. Для вставки фотографий в HTML существует тег <img>, он одиночный, т.е. его не нужно закрывать. Для того, чтобы указать какую именно картинку вставить у этого тега есть параметр src, в качестве значения которого указывается путь к картинке.

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

Страница index.html готова. Займемся страницей pattern.html. На ней мы решили просто разместить фотографии шаблонов.
Откройте ее в блокноте и вместо слов «Здесь — контент» вставьте заголовок, картинки и какой-нибудь текст, а чтобы все расположилось по центру в тег <td> добавьте атрибут align=»center»

Наши контакты

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

Пишите нам по адресу:

admin@mysite.ru

Оставьте тот, который больше понравится (с тегами <address> </address>или без них).
Вот собственно и все. Пощелкайте по ссылкам и убедитесь, что все работает. Аналогичным образом вы можете сделать сколько угодно html-страниц и наполнить их разнообразным контентом. Рабочий пример можно посмотреть .
Шаг 3.
Наверно, у вас возникло два вопроса:
1. Откуда брать картинки для сайта (все эти шапки и меню)?
Для этого ознакомьтесь с разделами графика для web, и уроки Photoshop
2. Что дальше?
Поэкспериментируйте с тегами и их атрибутами, которые вы узнали из этих уроков. Конечно, это лишь основы HTML, но для начала этого достаточно.
Далее, включайте на свои страницы и другие теги (их полный перечень с описанием и примерами приведен в разделе Уроки html). Экспериментируйте, пока не освоитесь в мире HTML. Затем подключайте другие технологии — CSS, Java script, PHP и т.д.
На этом четвертый урок закончен. В следующем уроке вы научитесь размещать свой сайт в интернете.
Предыдущий урок Вернуться в раздел Следующий урок  Если этот сайт оказался вам полезен, вы можете помочь в его развитии, поставив одну из этих ссылок на свой сайт.

Код кнопки:
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.

Пошаговое создание 2-ой страницы сайта

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

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

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

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

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

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

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

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

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

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

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

<title>Ссылки на полезные ресурсы Интернета.</title>

<body topmargin=»0″>

<table width =900 height=600 cellpadding=0 cellspacing=0>

<td colspan=»2″ width=900 height=162><img src=»shapka.jpg»></td>

<td width=205 height=387 background=»menu.jpg» valign=»top»>Меню сайта</td>

<td width=695 height=387 background=»kontent.jpg» valign=»top»>

Здесь будут ссылки на полезные ресурсы Интрента

<br> <br>

<a href=»http://mm-business.ru»>Работа через Интернет</a>

<td colspan=»2″ width=900 height=51><img src=»niz.jpg»></td>

Вторая страница пошагового создания сайта выглядит так > 2 страница сайта.

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

Обратите внимание на то, что обе эти ссылки должны быть и на index.html и на page2.html, причем в одном и том же месте.

Это необходимо, так как меню является общим для всего сайта.

Вносим изменения в страницу index.html и получаем код:

<title>Сайт об Интернете. Полезные ссылки и другая информация.</title>

<body topmargin=»0″>

<table width =900 height=600 cellpadding=0 cellspacing=0>

<td colspan=»2″ width=900 height=162><img src=»shapka.jpg»></td>

<td width=205 height=387 background=»menu.jpg» valign=»top»>Меню сайта

<br> <br>

<a href=»index.html»>Главная</a>

<br> <br>

<a href=»page2.html»>Ссылки</a>

<td width=695 height=387 background=»kontent.jpg» valign=»top»>Область под контент</td>

<td colspan=»2″ width=900 height=51><img src=»niz.jpg»></td>

Все. Сайт готов и он выгляди так > результат пошагового создания сайта.

Остановимся на важных моментах. Обратите внимание на добавление тегов <br>, он нужен для переноса на другую строчку.

Обе страницы и графика должны находиться в одной папке. Главная страница должна называться index.html

Содержание ячейки меню должно быть одинаково на обеих страницах.

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

Сайт получился не очень крутым, но и его уже можно разместить в Интернете.

А что дальше?

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

Обединить несколько html в один файл. как?

Вы не в том разделе написали данный вопрос.
Если такое и делать, а с описанного выходит, что файлы хранятся у вас, а не грузятся в браузере, то только в скрипте каком то, который может отрабатывать на клиенте (речь идет не о браузере).
Скрипт у себя на компе натравливать на папку с контентом ну или скормить архив.
В процессе обхода всех файлов(может даже и заданного формата) с папки/папок/архивов, вытаскивать контент с body и экспортировать в нужном формате в нужный файл или на нужный скрипт.
Можно попробовать на баш скрипт набросать, вот только не помню в синтаксисе, что в отношении поиска контента по файлах, есть ли такое. Так же можно пытаться писать скрипт на руби, пхп или еще каком то языке программирования. Хотя допустим если пропустить через ноджс, то можно и на яваскрипте написать.
Хотя допустим, если файлы не хранятся у пользователя, а есть набор ссылок, то тогда можно уже рассматривать написание чисто на яваскрипте (при условии, что можно куда то запостить результат). Сделать массив ссылок, обходя которые по очереди открывать новое окно, вытаскивать с него контент, сохранять в объекте, а потом это все куда то отправить… Замечу, что именно отправить, т.к. яваскрипт не способен по ограничениям безопасности работать с файлами у пользователя. Он может только в локальные хранилища, что то пытаться сохранять и то только в фф/хроме. Хотя ИЕ раньше имел уязвимость(презентованную как фишку браузера), позволяющую создать у пользователя файл, открыть файл, создать к нему поток данных, записать поток в файле, закрыть файл но в были выпущены фиксы, которые прекращали возможность создания потоков данных к файлам и последующую запись.
А вообще изначально для таких целей (когда мне надо было вытаскивать чать контента с разных сайтов периодично), написал в хром расширение, которое научил работать с множеством ссылок и обновлять инфу. Но как только большая часть функционала была накидана и работала (оставалось только добавить запуск по таймеру или открытию определенной вкладки, а не только по кнопке, ну а так же правила выборки для других ресурсов), как похожую штуку написали на пхп да и заняло меньше кода оно, чем на жс расширением, поставлено в крон и жило своей жизнью до поры до времени…


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *