Мой первый сайт

Сайт визитка

Многостраничный сайт содержит более одной страницы. Многостраничные сайты на чистом html+css называют сайтами-визитками. В которых несколько страниц: главная, портфолио, цены, контакты и тому подобное.

Рассмотрим простой пример многостраничного сайта-визитки.

Для начала нам нужно придумать макет (шаблон) сайта и чтобы он был адаптивным, то есть хорошо смотрелся как на мониторе, так и на смартфоне.

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

В корневой папке создадим папку assets и поместим туда файлы logo.png и style.css.

Загаловок сайта

style.css

/* для блока — шапка */
header text-align: left; /* Выравнивание внутреннего контента по левому краю */
width: 95%; /* Ширина блока и общая ширина*/
height: 90px; /* Высота блока */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
background: #eeeeff; /* Цвет фона */
>
/* для контейнера */
#container width: 97%;/* Ширина слоя или ширина макета+20px */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
>
/* для блока — меню */
aside width: 27%; /* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
padding: 5px; /* Внутренние поля вокруг содержимого */
background: #dddddd; /* Цвет фона */
right: 0px; /* Координата от правого края окна */
top: 0px; /* Координата от верхнего края окна */
>
/* для блока — контент */
article < /* Правая колонка*/
width: 70%;/* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
padding: 10px; /* Внутренние поля вокруг содержимого */
background: #eeeeee; /* Цвет фона */
>
/* для блока — подвал */
footer width:95%; /* Ширина слоя */
clear:left; /* возвращаем блочность и располагаем слой слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
background:#aaa;
color:#fff;
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
>
@media screen and (max-width: 768px) aside, article, footer, header, #container margin-left:0px;
margin-top:0px;
width:100%;
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
>
aside padding: 10px;
>
>

Это папка будет служить для хранения различных ресурсов.

В корневой папке создадим файлы index.html и page.html и вставим туда код.

«assets/style.css»/>

main
Блок где располагается содержимое страницы.

aside
Тут располагается меню на другие страницы сайта.

Источник

How To Create A Multi Page Website In HTML

One is a single-page website (not to be confused with a SPA) that has all its content in a single HTML web page or an HTML document.

The other type is a website that has multiple pages (multiple HTML documents). Each HTML web page has different content in it. They might or might not share the common stylings, including the header and the footer elements.

Benefits Of Multi-Page Website

A website that has limited content to display to the end users may use the benefits of a single-page website. But there are so many reasons why we see a lot of multi-page websites on the internet.

• A multi-page website segregates content on the website better. Rather than adding all the content for the website on a single page using headings, a multi-page website is able to better manage and showcase content on different pages based on the context.
• A multi-page website offers better user flow and user experience. Users use the top navigation to navigate between web pages of a website. The navigation menu makes it clear that such and such content is at such and such page.
• A multi-page website is search engine friendly. When you have a lot of content that differs in context between them, it’s a great idea to have a multi-page website. Not only users would be able to better understand the contents of the website, but also search engine bots that crawl your website are able to better segregate the contents based on the web pages.

Creating A Multi-Page Website In HTML

Now that we know the benefits of a multi-page website, let’s make a simple one in HTML.

Step 1 — Creating our first HTML page

Open a code editor like Visual Studio Code, Sublime Text or Notepad++. If you don’t have any of the text editors, open a notepad.

Then create a basic HTML structure like the one below (I will provide the source code at the end of the blog)

Save this notepad file in your preferred folder location and save it as index.html

Now, we will change the title and create a header for this web page

Step 2: Creating Two More Web Pages

Similar to how we created the home page, we will create two more web pages. The contact page and the about page. Our folder now looks like this.

Step 3 — Linking Multiple Website Pages Together In HTML

It’s now time to link the multiple pages that we have created on our website.

We will create a navigation menu that will link all of the pages together.

We will first change the code in our index.html page to the below:

And we will copy this nav element to the other pages as well (about.html and contact.html)

Step 4 — Running Our Multi-Page Website

Now, go back to your folder where you have saved all your files.

Right click on the index.html file and open this file with the preferred browser.

Result

This will open your multi-page website in the browser.

Use the navigation on the top to navigate between pages. This is how you can make multi-page websites easily.

Change the content of the web pages to the content that you want to add to your website.

Multi-Page Website In HTML — Source Code

Источник

Как связать страницы в Html при написании многостраничного сайта?

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

Доброго времени суток. Сделайте меню.

Статичные HTML-страницы

Если Вы используете статичный HTML, просто составьте список страниц и сделайте конструкцию, подобную этой:

Здесь, думаю, можно ненадолго остановиться. Тег ul — маркированный список:

a — ссылка. Атрибут href — куда она ведёт. Также могут быть target (как открыть: _self — в родительском окне, _blank — в новом окне и так далее, title (текст для всплывающей подсказки). Внутри тега — выводимый текст.

Своя собственная CMS

Если Вы используете свою собственную CMS с БД MySQL, создайте в базе данных таблицу menu(`itemid` PRIMARY, `text`, `title`, `url`). Столбцы:

• itemid — уникальный id пункта меню, его порядковый номер
• text — название (что писать на кнопке)
• title — текст всплывающей подсказки
• url — ссылка, на которую ведёт пункт меню

В php-файл с функциями вставьте такой код (рассчитывается, что подключение к БД уже установлено):

$query = mysql_query(«SELECT * FROM `menu`», $DB);

$qrows = mysql_num_rows($quer­ y);

В нужном месте выведите меню:

Какая-нибудь система управления контентом

Если же Вы используете какую-либо CMS, читайте хелпы и документацию. Я, ничего о ней не зная, помочь, увы, не смогу.

Вернёмся в эпоху статического HTML.

Насколько я понимаю, требуется добавить к одной-единственной странице ещё несколько страниц. А базой данных там и не пахнет. Следовательно, можно обойтись прямой адресацией. То есть придумать для каждой новой страницы понятное хотя бы вам имя (у основной оно наверняка стандартное — index.html) и прописать в каждой из них ссылки на остальные. С помощью тега :

Где «вид ссылки» — это текст, коли вы желаете видеть текст, либо тег , который покажет картинку, которую и нужно будет нажать для перехода по ссылке.

Фактически у вас появится список всех ссылок на все заготовленные страницы. Можно копипастить этот блок, удаляя ту ссылку, что ведёт на эту самую страницу, которая отображается. Как вы решите оформить этот блок, простым ненумерованным списком, как в примере danil­asar, строкой-меню (на самом деле — таблицей с невидимым бордюром и заданным размером ячеек) или ещё как, и где в вёрстке (у вас же единый дизайн всего сайта, да?) подготовите для него место — дело десятое.

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

Источник

Вкладки (страницы) на одной странице на html/css с помощью :target

Рассмотрим один из вариантов создания нескольких страниц или вкладок (в том числе вложенных) на html и css без скриптов, списков и таблиц, на одной html странице. Только дивы, только хардкор. Подходит для небольших портфолио и элементов интерфейса. Не будьте буратинами используя это везде подряд.
Суть:

Современные браузеры загружают содержимое только если блок виден, поэтому костыли для загрузки контента (картинок) отменяются.
Коротко: ссылка на блок делает его видимым, при том что по-умолчанию они невидимы (поэтому обратно display:none когда выделяем другие); сделать невидимым первый блок если выделен _не он_, так как по-умолчанию он виден. Собственно, это всё. Теперь реализация.

HTML. Разделим блок на 3 страницы и один на 3 вкладки, для наглядности:

   
 #one #two #three 
 
#one #two #three 
 
#one #two #three 
 

Перейдём к разметке, здесь всё внезапно очень просто (но не очевидно) и валидно, никаких нестандартных изощрений:

div < display: none; >/* Делаем блок по-умолчанию невидимым */ div:target < display: block; >/* Выделенный блок видим */ /* Теперь магия, т.е. регулярные выражения, для удобства */ div[id*=t]:target ~ #one < /* Для всех блоков, содержащих "t" в идентификаторе, делаем #one невидимым */ display: none; >/* Обошлись одной буквой конкретно в этом случае, иначе придётся просто прописывать "tab" для всех вкладок сразу и отдельно для каждого не-#one */ div[id*=tab]:target ~ #three < /* На последок, для всех вкладок делаем третью страницу видимой */ display: none; >

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

Источник