Соединяем html-страницы между собой
Итак, у нас есть три html-страницы, которые нужно связать между собой. В HTML для этого используются теги <a> </a>. Все, что вы поместите внутрь этих тегов (текст или картинку) станет ссылкой. Это значит, что после нажатия на то, что вы указали в тегах <a> </a> произойдет переход. Куда? На страницу, которая указана в атрибуте href.
Рассмотрим наш блок меню:
Поменяйте код на вышеприведенный во всех трех 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»>
Нам осталось на разных html-страницах разместить разный контент.
Пусть на нашей главной странице будут размещены фотографии шаблонов с их краткими характеристиками, на странице pattern. html — будут просто фотографии шаблонов, а на странице kontact.html — адрес нашей электронной почты.
Начнем со страницы index.html. Откройте ее в блокноте.
Найдите в коде страницы ту часть кода, которая отвечает за контент. Сейчас там написано следующее:
Страница index.html готова. Займемся страницей pattern.html. На ней мы решили просто разместить фотографии шаблонов.
Откройте ее в блокноте и вместо слов «Здесь — контент» вставьте заголовок, картинки и какой-нибудь текст, а чтобы все расположилось по центру в тег <td> добавьте атрибут align=»center»
Шаблоны
Здесь собраны все шаблоны сайтов.
Теги <p></p> обозначают абзац (т.е. текст отделенный от остальных элементов отступами сверху и снизу).
Наконец, на странице kontact.html укажем наш e-mail. Сделаем это двумя равноправными способами:
Наши контакты
Пишите нам по адресу: admin@mysite.ru
Пишите нам по адресу: admin@mysite.ru
Оставьте тот, который больше понравится (с тегами <address> </address>или без них).
Вот собственно и все. Пощелкайте по ссылкам и убедитесь, что все работает. Аналогичным образом вы можете сделать сколько угодно html-страниц и наполнить их разнообразным контентом. Рабочий пример можно посмотреть здесь.
Наверно, у вас возникло два вопроса:
1. Откуда брать картинки для сайта (все эти шапки и меню)?
Для этого ознакомьтесь с разделами графика для web, и уроки Photoshop
Поэкспериментируйте с тегами и их атрибутами, которые вы узнали из этих уроков. Конечно, это лишь основы HTML, но для начала этого достаточно.
Далее, включайте на свои страницы и другие теги (их полный перечень с описанием и примерами приведен в разделе Уроки html). Экспериментируйте, пока не освоитесь в мире HTML. Затем подключайте другие технологии — CSS, Java script, PHP и т.д.
На этом четвертый урок закончен. В следующем уроке вы научитесь размещать свой сайт в интернете.
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
Multi-Page HTML Sites
This will be a simple introduction into building multi-page HTML sites. Eventually once you get the hang of us you can then learn more advanced ways to create multi-page sites later on.
Creating Multiple Pages
A basic HTML site, as created in Intro, is structured something like this:
- A project directory called my-sample-project. It contains:
A README.md file.
An index.html homepage.
A css subdirectory with a custom styles.css stylesheet.
This example site has only one page: index.html. But not all sites are single-page. In fact, many traditional sites offer multiple areas users can navigate between.
Multi-Page Project Structure
So if we want this website to contain multiple pages, in addition to the index.html homepage we want the “About” and “Contact” pages too. So how would we add these pages? by creating two corresponding HTML files:
You will see that the index.html remains in the top-level of the directory, and the additional HTML files are in an html subdirectory. This is because the browser looks for an index.html in the main directory, so it knows what to load first.
Each of the new files will looks similar to HTML files we’ve create before with standard boilerplate <html>, <head>, and <body> tags containing whatever page-specific content we want.
Linking Between Pages
Now that we finally have a “About” and “Contact” pages set up, we need a way to access those other pages from the homepage. Thankfully, we can do this with a simple <a> tag.
To create a link navigating from index.html (homepage) to the contact.html (contact page), for example we use the following code:
This is similar to <a> links created in into, but with a file path internal to our project instead of an external online URL. When clicked, this link will display the contents of our contact.html file.
To add other navigational links to other pages within our project directory like for example the “About” page, we will still follow the same process:
Styling Multi-Page HTML Sites
To style multiple pages in a site, each HTML file needs a stylesheet linked. In a smaller project, we’d create one central stylesheet and it link in the <head> of each HTML document like so:
Index.html file
contact.html file
about.html file
You will notice that the file path to the stylesheet in index.html is different than it is in the other html files, because the index.html resides in the top-level of the directory, and contact.html and about.html resides in an html subdirectory. So their file paths to the stylesheet are preceded with “..” to exit out of the html directory before entering into the css directory.
And of course as projects increase in size, and/if when pages have their own dedicated styles that apply only to them, we can also create a dedicated stylesheet for specific pages, like this:
Here, styles.css would contain universal styles for all pages, whereas about.css and contact.css contain styles applicable only to contact.html and about.html pages, respectively. These dedicated stylesheets could then be linked in relevant HTML files, after the universal stylesheet:
contact.html
about.html
This is just the surface for now, there are other ways of sustainably separating styles in to multiple modular stylesheets. Stay Tuned!!
Вкладки (страницы) на одной странице на html/css с помощью :target
Рассмотрим один из вариантов создания нескольких страниц или вкладок (в том числе вложенных) на html и css без скриптов, списков и таблиц, на одной html странице. Только дивы, только хардкор. Подходит для небольших портфолио и элементов интерфейса. Не будьте буратинами используя это везде подряд.
Суть:
Современные браузеры загружают содержимое только если блок виден, поэтому костыли для загрузки контента (картинок) отменяются.
Коротко: ссылка на блок делает его видимым, при том что по-умолчанию они невидимы (поэтому обратно display:none когда выделяем другие); сделать невидимым первый блок если выделен _не он_, так как по-умолчанию он виден. Собственно, это всё. Теперь реализация.
HTML. Разделим блок на 3 страницы и один на 3 вкладки, для наглядности:
Перейдём к разметке, здесь всё внезапно очень просто (но не очевидно) и валидно, никаких нестандартных изощрений:
Реализовать подобное можно разными способами, но по-моему это самый логичный — без извращений в виде представления ссылок кнопками, списками, скриптами и прочей ересью, ссылка это ссылка, а блок это блок.
Как правильно соединить страницы?
Все начинающие вебмастера кучами сначала создают страницы и даже не думают их соединить между собой. А потом только вспоминают, что их еще нужно правильно соединить. Как говорится, поднять то подняли, а разбудить забыли. Многие, конечно же, не знают, как правильно использовать ссылки для перехода на другую страницу. А так же они не в курсе того, что страницы бывают разных уровней.
Давайте разберемся со всеми этими непонятками.
Сначала разберем последовательность страниц. Как правило, все начинается с главной страницы. А потом идут разделы главной страницы, а потом все остальные. Получается у нас вот что:
Вперед: главная —раздел—страница.
Назад: страница—раздел—главная.
Где: главная-1 уровень(морда), раздел-2 уровень, страница-3 уровень.
1 уровень – это тяжелые страницы, а чем тяжелее страница, тем больше у него вес.
2 уровень – это страницы со средним весом.
3 уровень – это страницы с легким весом, следовательно, у них веса меньше, чем у главной страницы и его раздела.
Чем дальше страница находиться от главной, тем меньше статистический вес страницы. Поэтому, старайтесь, чтоб все страницы находились на расстоянии не больше трех кликов от главной.
Вот такую последовательность страниц нужно учесть и соблюдать при сайтостроении.
С этим вопросом разобрались, осталось их соединить ссылками между собой.
Как же нам соединить их ссылками, спросите. Все просто.
Допустим, что URL вашей главной страницы http://www.glavnaya.html , а раздел главной страницы http://www.glavnaya/razdel/index.html , следовательно, страница третьего уровня будет http://www.glavnaya/razdel/stranica/index.html
Чтобы соединить их между собой используем тег <a href=«ссылка»>описание ссылки</a>