Как сделать несколько страниц в html в одном документе

Можно ли в одном html файле создать несколько веб-страниц?

Доброго времени суток!
Подскажите, можно ли в одном html файле создать несколько веб-страниц . То есть на одной странице странице есть ссылка на другую страницу. Можно ли создать вторую страницу в том же файле , что и первую? Если — да, то какой синтаксис при этом необходим?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

В одном файле несколько страниц
И снова мои нелепые вопросы по поводу PHP. Допустим у меня есть PHP файл с формами для отправки.

Несколько страниц в одном файле
Недавно смотрел сайт Европы Плюс и обратил внимание на адреса страниц: .

Можно ли объединить ссылки в html в одном файле?
Здравствуйте! Возник такой глупый :stop: вопрос, можно ли объединить ссылки в один файл. Т.е. HTML.

Как создать гиперссылку в html для несколько страниц сразу
Здравствуйте, скажите, пожалуйста, как создать гиперссылку на картинку в html для несколько страниц.

dev — investigator

2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696

Fatmarmelad, если я вас правильно понял, то что вы хотите, лучше сделать якорями(лучше чем гов..кодить кучей iframe-ов). Вот простой пример:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

 html lang="en"> head> meta charset="utf-8" /> link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" integrity="sha256-sxzrkOPuwljiVGWbxViPJ14ZewXLJHFJDn0bv+5hsDY=" crossorigin="anonymous" /> style> html,body .header .menu li a:link,a:visited,a:hover, a:active .menu li a .menu li a:hover .content div .content div:nth-child(1) .content div:nth-child(2) .content div:nth-child(3) /style> /head> body> div class="header"> ul class="menu"> li>a href="#one">Один/a>/li> li>a href="#two">Два/a>/li> li>a href="#three">Три/a>/li> /ul> /div> div class="content"> div>a name="one">br>/a>p>Контент первой страницы/p>/div> div>a name="two">br>/a>p>Контент второй страницы/p>/div> div>a name="three">br>/a>p>Контент третьей страницы/p>/div> /div> /body> /html>

Создаём свой первый сайт на HTML

Урок №9
Создаём свой сайт из трёх страниц

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

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

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

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

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

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

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

 h1 < color: green; font-family: Arial; >p

Заголовок статьи :
Полярная сова

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

Полярная сова (белая сова) птица из семейства совиных. Самая крупная птица, из отряда совиных, в тундре. Голова у белой совы круглая, глаза жёлтые, длина тела достигает 70 см, масса 3 кг, размах крыльев 165 см. Ареал распространения - территория тундры: Евразия, Северная Америка, Гренландия. Полярная сова обитает обычно в открытой местности, в лесах встречается редко. Питается в основном, мелкими грызунами: леммингами, в год может съесть более 1600 леммингов. Также в рацион совы входят зайцы, мелкие хищники, птицы, рыба и даже падаль.

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

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

На данный момент у нас есть три HTML-файла, в которых находятся статьи описывающие различных северных животных:
index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,
polyarnaya-sova.html — Статья о полярной сове .

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

Снежный барс Полярный волк Полярная сова

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

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

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

    h1 < color: green; font-family: Arial; >p 
Снежный барс
  
Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Достигая вместе с хвостом длины 200-230 см, весит до 55 кг. Окраска меха светлая дымчато-серая с кольцеобразными и сплошными тёмными пятнами.
 
Охотится снежный барс в основном на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется примерно около 10 тысяч особей. По состоянию на 2013 год охота на ирбисов запрещена.
 Снежный барс Полярный волк Полярная сова  

Всегда добавляйте строку , в начале каждого 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 страницу. Подробное руководство

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

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

Введение в HTML

HTML – это язык гипертекстовой разметки:

• Гипертекст – это текст, в который включена ссылка.
• Язык разметки определяет расположение информации макета в документе.

HTML определяет структуру веб-страницы. Он помогает браузеру, чтобы правильно отображать веб-страницу. Документ HTML бывают, как простыми, так и комплексными для больших возможностей.
Браузеры получают HTML документы из веб-сервера и отображают их, как веб-страницы. Браузер распознает HTML коды, чтобы сменить макет страницы, добавить изображения, ссылки и медиа файлы на веб страницы.
HTML – это исходный язык разметки для сети. Однако, он используется, чтобы создать статичные веб страницы без интерактивности и анимации. HTML5, последняя версия HTML, добавляет улучшенную поддержку для добавления таких медиа файлов, как видео и аудио.

HTML5

HTML5 – это улучшенная версия, с помощью которой можно пользоваться большими возможностями. Если вы привыкли к прошлым версиям, и не хотите пользоваться этой, то вы наверняка не знаете, что теперь HTML может определять, каким образом выглядят видео, изображения и текст на экране браузера.
HTML5 является пятым выпуском HTML. Синтаксис HTML5 согласован с основным синтаксисом HTML4 и XHTML1. Но в чем же различия? HTML5 осуществляет поддержку видео и аудио. HTML5 стал одним из мощных инструментов для дизайна веб-страницы. В HTML5 потоковая передача мультимедиа возможна без использования сторонних плагинов, таких как Flash. Среди прочего, HTML5 поддерживает хранение информации на стороне клиента. Пользователь может пользоваться этой функцией offline для поддержки веб-приложений.

Сеть и HTML

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

Среди подкатегорий, HTML5 используют 82.9% всех сайтов, которые используют HTML.

Как создать HTML страницу

Создание HTML страницы -это очень простая процедура. Будучи абсолютным новичком в этой области, вы быстро научитесь кодировать простую HTML страницу. Но для начала нужно выучить основы. Без них вы не сможете приступить к созданию.
HTML кодирование при помощи текстового редактора HTML – это текстовый документ, поэтому написав простой текст, можно вручную создавать веб страницу. Выберите текстовый редактор, которых сейчас несметное количество в интернете, и примените тот, который подходит для HTML. Самые широко используемые на сегодняшний день — это Dreamweaver и Sublime Text. Но зачем платить больше, если можно пользоваться и бесплатным редакторам, такими как Notepad++ для Windows и Text Wrangler для Mac. Не останавливайте свой выбор на Notepad, так как он не обладает хорошими техническими характеристиками, хоть им и пользуются достаточно часто. В черный список редакторов также записан и Word Processors, поскольку он добавляют дополнительный и ненужный код в HTML документы.
Выбирайте себе подходящий редактор, ну а мы на примере покажем, как пользоваться Notepad++.

Создание и редактирование HTML

Создание любого документа начинается с «Файл»> «Создать», и HTML-документ не стал исключением, поэтому открываем новый документ в Notepad ++. Внесите изменения в документ и сохраните.

Сохранение HTML документа

HTML документ представляет собой документ с htm or .html расширением. Может вы замечали, что есть такие редакторы, в которых заложена функция “сохранить как HTML документ”. Для сохранения HTML документов в сети вам следует использовать строчные буквы в названиях. Дефисы и тире должны заменять любые пустые пространства.

Формат HTML страницы

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

Элементы HTML

Элементы определяют структуру и содержание веб страницы. Элементы обозначены угловыми скобками вокруг имени элемента. Содержание, которое не находится между “< >” будет отображено на веб-странице. Любой элемент выглядит примерно следующим образом:

Теги

Элемент в угловых скобках формирует теги (<tag>). Теги невозможно увидеть на экране, но они помогают браузеру понимать, что нужно отобразить. Открывающий тег отмечает начало элемента, в то время как закрывающий тег означает конец.
Пример:
Открывающий тег: <div>
Закрывающий тег: </div>
Содержание между открывающим и закрывающим тегом – это содержание элемента.
Теги можно использовать двумя способами:

Использование тегов в парах

Теги, которые образуются в парах содержат открывающий и закрывающий тег. Вот так они выглядят:

Здесь представлен открывающий тег (<paragraph>) и закрывающий (</paragraph>) для указания на конец абзаца. Это означает, что все, что находится между этих двух тегов – это абзац.

Одиночный тег

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

Закрытие /(слеш) также не обязателен. Это тоже самое как в случае <image>.
Однако, во избежание путаницы с открывающим тегом, неплохо добавить / (слеш) в конце.

Атрибуты

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

HTML тег выше имеет атрибут “lang” с элементом “en-US”.

Структура HTML документа

У каждого HTML документа есть основная структура, определяемая следующими элементами:

• Определение типа документа: объявление типа документа определяет используемую версию HTML. Этот тег размещен в начале документа.
• HTML: пара тегов HTML содержит начало и конец HTML документа.
• Раздел заголовка: Этот раздел содержит общую информацию для страницы и обычно достаточно кратко. Содержание этого элемента не показывается на странице. Заголовок включает заголовок тега, который определяет название документа, отображенное в строке заголовка браузера. Заголовок может включать в себя метаданные и ссылки на внешние файлы.
• Основной раздел: этот главная часть страницы. Ее содержание изображено в браузере.
• Кодировка: Этот тег указывает кодировку, используемую в документе HTML. Кодировка решает, каким образом файл сохраняется и как будут отображаться специальные символы. Общепринятым значением для этого тега является UTF-8, который позволяет правильно отображать почти все символы языка.

Этапы создания HTML страницы

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

Этап 1: В первой строке HTML-кода, который будет добавлен, элемент DOCTYPE указан как «html». Это указывает на использование последней версии HTML.

Этап 2: Затем мы добавляем начальные и конечные теги для html документа.
Переключаем язык на английский (en).

Этап 3: На следующем этапе мы добавляем тег Header с тегом Title и детали кодировки.

Этап 4: После этого идет тег основного текста, который содержит действительный HTML код.

Этап 5: Теперь мы закончили с пустым HTML документом. Начинаем работу с добавления текста, который будет отображаться на экране. Мы добавляем тег заголовка <h1> и абзацный тег <p>. Они определяют первый уровень заголовка и абзац ниже.

Мы сохраняем основы HTML страницы в выбранную папку.

Просмотр HTML страницы

Для просмотра страницы, открываем браузер. Кликните на сохраненный документ 2 раза.
Открытая страница должна показывать:

• Заголовок “Привет мир”;
• Заголовок первого уровня “Привет мир”;
• Абзац с текстом “Простая HTML страница”.

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

Усовершенствованное форматирование текста

HTML предоставляет конкретные элементы форматирования текста.
Уровни заголовка могут быть определены тегами <h1></h1> to <h6></h6> для заголовков 6 уровня. Абзацные теги <p></p> служат для обозначения начала нового абзаца. Браузер обычно отображает вывод в виде двух возвратов каретки, добавляя одну пустую строку между двумя абзацами. Элементы форматирования используются для отображения специальных типов текста. Текст может быть отформатирован с такими элементами, как:

• полужирное начертание;
• наклонный шрифт;
• подчеркнутый шрифт;
• шрифт.

Полный список этих тегов можно просмотреть по ссылке.

Добавление ссылок

Возможность создания гиперссылки предоставляется использованием <a></a> тега.
Ниже представлен процесс добавления URL адреса веб страницы с использованием атрибута гиперссылки.

Добавление картинок

Тег <img> – это одиночный тег, не требующий закрывающего тега. Вы можете указать атрибуты изображения для добавления информации. Атрибут src служит для определения местоположения изображения. Атрибут style достаточно многофункциональный, включает ширину и высоту изображения в пикселях. Атрибут alt предоставляет краткое описание изображения. Его использование актуально при невозможности загрузки изображения. Этот атрибут на сегодняшний день служит одним из основных требований, поскольку он необходим для программ чтения с экрана для слепых посетителей.

Добавление заголовка

Тег <HEADER> – это новый тег в HTML5 и определяет самый верхний элемент веб-страницы. Заголовки обычно содержат фирменный знак, контактную информацию, ссылки навигации и др. Таких элементов, как <header> может быть несколько в одном документе.

Развитые концепции в HTML

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

Проверка HTML

Проверка HTML используется для анализа ошибок в коде HTML. Если ваша веб-страница не загружается, вы можете использовать проверку для обнаружения причины проблемы.
Проверка также делает подсказки по коду, который не соответствует последнему стандарту HTML. Неверный HTML не сделает сайт непригодным для использования. Это может вызвать проблемы с загрузкой или несоответствие в выводе в разных браузерах.
Многие услуги проверки являются бесплатными, также как W3C, могут быть легко использованы.

Добавление расширенных тегов

Естественно, HTML-тегов и атрибутов в разы больше, чем мы вам показали. Два хороших ресурса для обучения — это w3schools и HTML Dog, которые имеют больше материалов и полный список тегов.
Вы также можете использовать опцию «Просмотр исходного кода» в браузере, чтобы просмотреть код хорошо разработанных веб-сайтов и изучить новые методы.

Загрузка сайта

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

Добавление CSS и JavaScript

Программа CSS поможет вам улучшить внешний вид вашего сайта. В перечень функций программы входят добавление цвета, шрифтов и изменение расположения элементов. Связав CSS-таблицу стилей с HTML-страницей, вы можете изменить стиль всего текста в теге.
JavaScript — это популярный язык программирования, который можно использовать для добавления дополнительных функций на HTML-страницы. Команды JavaScript вставляются между тегами <script> </ script>. Их можно использовать для добавления интерактивных кнопок, выполнения математических расчетов и т.д.

Автоматическое создание HTML-страницы и веб-сайтов

Если вы новичок, то в целом вам может быть нелегко, но это не значит, что HTML сложен в обучении. Например, для создания эффективного веб-сайта без потери времени веб-дизайнеры используют TemplateToaster, – это программа, которую вы можете использовать, будучи начинающим дизайнером. Вы можете использовать его для создания сайтов популярных CMS, таких как WordPress, Joomla, Magento, Drupal и Prestashop.

Если вас заинтересовала данная тема и вы не знаете с чего начать, обратитесь к нам, мы будем рады вам помочь.

Как сделать из нескольких HTML файлов одну страницу?

Главный вопрос:
Здравствуйте, я продолжаю изучать JavaScript и сейчас решил научится делать табы, у меня такой вопрос, можно ли отдельно сделать блоки с информацией, подключить их как обычный CSS или JS файл, но в нужном для меня месте?

1. Придётся ли к каждому такому блоку делать свои CSS стили в отдельном файле
   или после подключения на них будут работать общие стили?
2. Нужно ли в каждом таком новом файле делать стандартную HTML структуру
   или это не обязательно?

• Вопрос задан более трёх лет назад
• 776 просмотров

1 комментарий

Простой 1 комментарий

Если тебе нужен именно js way, посредством vue/react, тебе нужны компоненты, гугли компоненты vue/react, но это способ работает на клиенте и требует предварительной сборки на сервере. Если именно из html на сервере, то помещаешь в документе маску по типу <> и перед тем, как отдать клиенту, читаешь контент из файла, в котором контент для хеадера и заменяешь маску. Когда поймешь как это работает, можно не изобретать велосипеды и взять готовый пакет, например handlebars либо другой шаблонизатор.

Решения вопроса 2

В вёрстке делаешь блок-обёртку для контента (c контентом естественно) => по клику на кнопку делаешь блок видимым
Стили подключаешь к html файлу (странице) => если тебе удобно работать с одним файлом, то работаешь с одним
В любом случае, потом следует свои css/scss/sass собрать в один и минифицировать (для этого можно использовать планировшик задач типа gulp)

Ответ написан более трёх лет назад
Нравится 1 2 комментария

Айнур Ярулин @squadbrodyaga Автор вопроса

не, мне нужно именно чтобы были разные файлы, например, чтобы не делать постоянно
новый header на каждой новой странице, а просто подключить его с помощью отдельного файла.
Я знаю, что это как-то можно сделать через PHP, но до этого языка я еще не добрался.

squadbrodyaga, ну логичным решением будет и правда использовать пыху, которая будет из templat’ов что-то собирать, ниже пример контроллера для понимая

. class Page extends CI_Controller < public function index() smrt->display('header.tpl'); $this->smrt->display('menu.tpl'); $this->smrt->display('main-page.tpl'); $this->smrt->display('footer.tpl'); > > .