Каркас страницы html5: Каркас страницы html. Создаём файл

Каркасы для адаптивных HTML5 шаблонов/сайтов

1) Если Вы заметили, то я также использую строку с добавлением CSS файла «normalize.css»

<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">

Рекомендую это строку удалить, если не будете использовать эти стили. Хотя, настоятельно рекомендую использовать «normalize.css».

2) Если Вы хотите настроить иконку для сайта, то рекомендую использовать этот сервис RealFaviconGenerator — он поможет настроить иконку для Android, Windows 8 и IOS. Рекомендую. Сам использую.

3) Используйте также «CSS Reset» — выберите тот, который подойдет для Вас. Зачем? Чтобы сбросить основные стили браузера, и настроить их специально на Ваше усмотрение.

Для адаптивного HTML5 сайта:

версия 1.2

<!DOCTYPE HTML>
<!--============================================================
*   Design: ...
*   Copyright (c) 2015: . ..
=============================================================-->
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- для адаптивного дизайна -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- информация о сайте -->
<title>Впишите заголовок сайта</title>
<meta name="description" content="Описание сайта">
<meta name="keywords" content="Ключевые слова сайта">
<meta name="author" content="SergeyChunkevich.com">
<!-- иконка для сайта -->
<link rel="shortcut icon" href="favicon.ico">
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- Это для старого осла, чтобы он понял HTML5 теги -->
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--===== ШАПКА САЙТА =====-->
<div role="banner">
    <header>
        <!-- логотип -->
        <a href="#">Логотип</a>
        <!-- меню -->
        <nav role="navigation">
            <ul>
                <li><a href="#">Страница 1</a></li>
                <li><a href="#">Страница 2</a></li>
                <li><a href="#">Страница 3</a></li>
            </ul>
        </nav>
    </header>
</div>
<!--===== КОНТЕНТ =====-->
<div>
    <main role="main">
        <!-- блок 1 | .
.. --> <section> <header> <h2></h2> </header> <article> <h4></h4> <p></p> </article> </section> <!-- блок 2 | ... --> <section> ... </section> </main> </div> <!--===== ПОДВАЛ САЙТА =====--> <div role="contentinfo"> <footer> <p></p> <small>Copyright &copy; <time datetime="2015">2015</time></small> </footer> </div> </body> </html>

Базовый CSS файл:

@charset "utf-8";
/*=====================================================
* Название проекта
    Автор: ...
    Copyright (c) 2015 ...
=====================================================*/
/* БАЗОВЫЕ НАСТРОЙКИ
-----------------------------------------------------*/
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
}
body {
    background: ;
}
/* ШАПКА САЙТА
-----------------------------------------------------*/
#header-container {
}
    #header-container header {
    }
    #header-container .
logo { } #header-container nav { } #header-container ul { } #header-container li { } #header-container li a { } #header-container li a:hover { } /* КОНТЕНТ -----------------------------------------------------*/ #main-container { } #main-container main { } #main-container section { } #main-container section header { } /* ПОДВАЛ САЙТА -----------------------------------------------------*/ #footer-container { } #footer-container footer { } #footer-container p { } #footer-container small { } /* МОБ. НАСТРОЙКИ -----------------------------------------------------*/ @media only screen and (max-width: 479px) { } @media only screen and (min-width: 480px) { } @media only screen and (min-width: 768px) { } @media only screen and (min-width: 1024px) { } @media only screen and (min-width: 1140px) { }

Поделиться или сохранить:

Курс HTML5 и CSS3 Базовый

  • Продвинутый уровень
  • Наставник: Нет
  • Сертификат: Нет
  • Формат: Online
  • Рассрочка: Нет
  • Язык: Русский
  • Осталось мест: Неограничено

HTML5 и CSS3 — это современные фундаментальные технологии, которыми должен обладать каждый веб-разработчик. С помощью языка гипертекстовой разметки HTML создается разметка (каркас) каждой интернет-страницы. Затем язык стилей CSS преображает сайт и придает ему привлекательный и эффектный внешний вид.

Программа обучения

  • Знакомство с курсом HTML5&CSS3

  • Введение в HTML5

  • HTML5 формы. Теги video и audio.

  • Микроданные и геолокация

  • Canvas

  • WebStorage, WebWorkers, Offline Applications

  • Введение в CSS3

  • Web Fonts и стили для текста

  • Псевдоклассы и градиенты

  • Трансформации и анимация

  • LESS и адаптивный дизайн

Знания и навыки, которые приобретете

  • Понимать спецификации HTML5 и CSS3

  • Владеть основами синтаксиса и семантики, передовыми методами разметки

  • Работать с формами, аудио и видео элементами

  • Работать с микроданными, пользовательскими данными и геолокацией

  • Создавать растровые рисунки при помощи JavaScript

  • Пользоваться кроссбраузерными свойствами CSS3

  • Работать с CSS-анимацией и преобразовывать содержимое

  • Создавать адаптивные веб-страницы

Тэги

  • Рекомендуем
  • Платно
  • Базовый
  • IT

Преподаватели

jquery — Альтернатива для фреймов в html5 с использованием iframes

спросил

Изменено 4 года, 8 месяцев назад

Просмотрено 138 тысяч раз

Я новичок в HTML5, провел небольшое исследование и обнаружил, что использование устарело, и из того, что я прочитал не являются. Так может ли кто-нибудь помочь мне, я хочу получить тот же результат, что и в показанном примере, но при использовании или другой замены , который не устарел в HTLM5?

 
    <кадр источник="меню.html">
    <кадр src="events.html">

 
  • jquery
  • html
  • iframe
  • набор фреймов

5

Фреймы устарели, потому что они вызывали проблемы с навигацией по URL-адресу и гиперссылками, потому что URL-адрес просто указывал на страницу индекса (с набором фреймов), и не было возможности указать, что находится в каждом из окон фрейма. Сегодня веб-страницы часто генерируются серверными технологиями, такими как PHP, ASP.NET, Ruby и т. д. Таким образом, вместо использования фреймов страницы можно просто создать, объединив шаблон с таким содержимым:

Файл шаблона

 
<голова>
{вставьте переменную скрипта для заголовка

<тело>
  <дел>
   {элементы меню вставлены сюда скриптом на стороне сервера}
  
<дел> {основной контент, вставленный сюда скриптом на стороне сервера}

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

Но если вы действительно хотите, чтобы часть вашей веб-страницы была отдельным «окном», в которое вы можете загружать другие веб-страницы, которые не обязательно расположены на вашем собственном сервере, вам придется использовать iframe.

Вы можете подражать вашему примеру так:

Пример кадров

 
<голова>
  Тест кадров
  <стиль>
   .меню {
      плыть налево;
      ширина: 20%;
      высота:80%;
    }
    .основное содержание {
      плыть налево;
      ширина: 75%;
      высота:80%;
    }
  

<тело>
  
  


 

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

0

HTML 5 поддерживает iframe. Было добавлено несколько интересных атрибутов, таких как «песочница» и «srcdoc».

http://www.w3schools.com/html5/tag_iframe.asp

или вы можете использовать

 

Это резервный код !

3

Хотя я согласен со всеми остальными, если вы все равно твердо настроены на использование фреймов, вы можете просто сделать index.html в XHTML, а затем сделать содержимое фреймов в HTML5.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Фреймы в HTML5

спросил

Изменено 8 лет, 11 месяцев назад

Просмотрено 2к раз

Моя девушка делает сайт для своего экзамена.

Она совсем не разбирается в HTML! (И я нет). Но чтобы облегчить ей задачу, я посоветовал ей использовать фреймы. Это легко и управляемо.

Но проблема в том, что сайт должен соответствовать стандарту HMTL5. Это требование. Я не думаю, что фреймы делают это, потому что они устарели. Я прав или не прав?

Итак.. Что делать? Он должен быть максимально простым. Я не думаю, что другие решения, которые я мог бы найти, это то, что она может сделать сама 🙁 Есть идеи?

(Извините, если мой английский отстой 🙂 )

  • html
  • кадры
  • набор фреймов

4

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

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

Если вы пытаетесь использовать фреймы для извлечения

или