. Сделано это для поисковых роботов, чтобы они лучше распознавали код страниц и отделяли основной контент от вспомогательных элементов.
С использованием новых тегов пустой шаблон HTML5 может выглядеть так:
Меню навигации
Контент - основное содержимое страницы.
Упрощение написания DOCTYPE
Вспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:
Теперь же запись минимальна, проще, наверное некуда:
Похожие упрощения произошли и с остальными тегами, так что переход на стандарт HTML5 существенно облегчает написание.
Необязательные теги в HTML5
Новый стандарт принес много послаблений верстальщикам. В частности, использование элементов HTML, HEAD и BODY уже не является обязательным для разметки HTML5. Если их нет, то браузер все равно считает, что они существуют. По сути из обязательных в HTML5 остался только
.
Трактовка русского языка как основного языка HTML документа
Тег определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.
В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».
Давайте обратим внимание на некоторые темы WordPress, сделанные специально для социальных сетей.
1. Mingle – Multi-Purpose WordPress Theme
Если вы создаёте свою социальную сеть с помощью BuddyPress, вам необходима Mingle с её функциями и дизайном. Разработанная элитной командой Parallelus, Mingle специально сделана для платформы BuddyPress и имеет большое количество замечательных функций.
Особенности данной темы:
редактор контактных полей генератор сайдбаров поддержка HTML5 + CSS3 SEO-дружественный код блоги портфолио слайд-шоу шорткоды множество других особенностей.
2. Salutation Responsive WordPress + BuddyPress Theme
После выхода Salutation можно смело сказать, что Parallelus прекрасно понимает, что требуется для создания хорошего дизайна. Прежде всего стоит отметить, что Salutation является 100% отзывчивым продуктом – ваша социальная сеть будет отлично работать на различных мобильных устройствах с любым размером экрана.
Кроме того, Salutation имеет некоторые интересные функции:
слайдер Revolution возможность перетаскивания drag and drop неограниченный выбор цветов всплывающие поля входа лёгкие настройки блоги виджеты интуитивно понятная админка генератор сайдбаров портфолио совместимость с BuddyPress шорткоды многое другое.
3. Woffice – Intranet/Extranet WordPress Theme
Данная тема имеет множество возможностей, широкий набор функций, среди которых можно упомянуть высокие стандарты кодирования, регулярные обновления и отличную поддержку. Вы можете использовать Woffice для создания социальных сетей, внутренних и внешних сетей или сообществ для школ, рабочих мест, бизнеса и государственных органов.
Особенности данной темы:
поддержка функций BuddyPress менеджер файлов иконки чат и обмен сообщениями форумы шрифты Google отзывчивый дизайн демо версия документация видео-уроки календарь шорткоды bbPress поддержка WMPL чистый код неограниченное число сайдбаров пользовательские виджеты страницы входа пользователей интернет-магазин.
4. Serpent – Responsive Social Network Theme
Эта тема имеет такие широкие возможности, что, вероятно, некоторые из них вам никогда не понадобятся. Serpent – единственная в своём роде тема WordPress, которая может поднять ваш сайт на новый уровень. С ней просто невозможно что-то сделать неправильно.
Разработчики данной темы – респектабельная команда Cosmothemes.
Основные характеристики темы:
Цена включает в себя будущие обновления и 6-месячную поддержку.
5. UnitedCommunity – BuddyPress Theme
UnitedCommunity – многофункциональная тема WordPress для социальных сетей от респектабельной команды Diabolique. Это новая тема, вышедшая 2 сентября 2015 года.
Её примечательные особенности:
эффектный, уникальный и отзывчивый дизайн более 40 внутренних страниц виджеты на главной странице простота установки и настройки совместимость с WooCommerce пользовательские виджеты всплывающие уведомления поддержка WPML шрифты Google выпадающие меню многое другое.
6. Klein – A Nitty Gritty Community Theme
Если вы ищете идеальную тему WordPress для своей социальной сети, обратите внимание на Klein. Она предоставляет пользователям возможность работы с полнофункциональной социальной сетью, имеет широкий спектр возможностей.
Ваши пользователи могут отправлять неограниченное количество сообщений, делиться событиями, добавлять контакты, обсуждать идеи на форумах и создавать красивые профили пользователей. Вы сможете воспользоваться совместимостью Klein с WooCommerce и продавать товары участникам вашей сети. Кроме того, Klein поддерживает WordPress 4.4, bbPress и BuddyPress, что даёт вам возможность превратить ваш сайт WordPress в популярную социальную сеть.
Другие функции включают в себя:
визуальный редактор пользовательские цвета слайдер Revolution совместимость с WPML отзывчивый дизайн интуитивно понятная панель администратора SEO-дружественный код 6 разных шапок + макеты поддержка социальных медиа 1000+ значков шрифтов уведомления множество других функций.
Для того, чтобы создать с помощью WordPress мощную социальную сеть, надо подумать не только о выборе плагина и темы. Вам ещё нужно будет позаботиться о выборе качественного хостинга , а также о продвижении сайта в поисковых системах . Что касается работы с плагинами, попробуйте сначала разные варианты, а потом уже сделайте окончательный выбор.
Примечание
Создание социальной сети на базе WordPress – процесс несложный. Всё, что вам нужно, это бизнес-план, плагин для создания социальных сетей и совместимая тема. Помните, вы можете выбрать любую тему и настроить её по своему вкусу, но темы для социальных сетей позволят вам сэкономить время, предлагая множество опций.
Идея организовать интернет площадку для объединения людей с общими интересами, чтобы впоследствии получить хороший трафик и внедрить систему платной подписки, привлекает многих. Для реализации этой цели в короткие сроки подойдет социальная сеть, построенная на WordPress шаблоне, совместимом с плагинами BuddyPress и bbPress. Именно они обеспечивают полный функционал соцсети: создание профилей, обмен сообщениями, добавление в друзья, общение на форуме, совместная работа над файлами и другие опции.
10 шаблонов для сайта социальной сети на WordPress + BuddyPress 1. Sweet Date Шаблон для соцсети, предлагающий 2 демо для сайта знакомств и 1 для сайта поиска попутчиков. Сайт на Sweet Date может использовать систему платной подписки и контроль доступа к контенту. Полностью отзывчивый дизайн темы гарантирует, что, открывая сайт на любом устройстве, посетитель получает одинаковый пользовательский опыт.
2. Thrive Шаблон для интранет и интернет сообществ. Он является универсальной платформой, объединившей в себе функционал социальной сети, форума, систем обмена сообщениями, организации мероприятий, управления проектами и обмена файлами, e-commerce и e-learning (при покупке плагина Learndash).
3. Buddy Тема, разработанная под Buddypress и bbPress, помогает создать соцсеть с современным дизайном. Buddy использует отзывчивую Retina Ready верстку и библиотеку иконочных шрифтов Font Awesome. Шаблон позволяет легко добавить на сайт такие виджеты, как: «Новые/популярные/активные пользователи», «Новые/популярные группы», «Календарь», «Последние темы на форуме», «Статистика», «Пользователи онлайн».
4. Socialize Шаблон по максимуму использует возможности Buddypress, благодаря чему является хорошей основой под сообщество или соцсеть. Socialize полностью изменил дизайн bbPress, внешне приблизив его к классическому стилю форума. Чтобы веб-мастер мог добиться нужного вида отображения контента, в шаблон включено 4 варианта раскладки для главной страницы, 9 — для категорий, 6 — для постов.
5. Klein Инновационная тема, предназначенная для работы с BuddyPress и bbPress, выполненная с особым вниманием к деталям. Подойдет тем, кому требуется интернет-сообщество или социальная сеть, работающие на WordPress. Идеальна для сайтов с большим количеством зарегистрированных пользователей. Подключив к участникам сообщества.
6. KLEO KLEO заслужила звание самой продающейся BuddyPress темы текущего года, потому что она действительно оправдывает ожидания. Шаблон предлагает простой с выверенными второстепенными элементами. Тема использует встроенный поиск, который не включен ни в один другой шаблон, и позволяет избежать установки специальных плагинов, что благоприятно сказывается на скорости работы сайта.
7. Monstroid2 Универсальный темплейт, последователь легендарной темы Monstroid, полностью переписанный с нуля. Благодаря совместимости с плагином BuddyPress шаблон позволяет веб-мастерам без лишних усилий сделать сайт социальная сеть или тематическое онлайн сообщество. В шаблоне предусмотрено 7 настраиваемых стилей для хедера, имеется поддержка мега меню. Покупатель может использовать картинки из демо на своем сайте.
Первая по популярности WordPress тема для интранет/экстранет сообществ. Woffice может быть под корпоративные и правительственные интранет/экстранет сети, обычные интернет сообщества и социальные сети, школьную или другую частную соцсеть.
Итак, уважаемые начинающие веб-мастера, мы познакомились с основами HTML.
Теперь давайте, применив эти знания, быстренько сделаем себе небольшой сайт и выложим его в интернет.
Правда полноценный ресурс, с применением одного лишь html, сделать затруднительно, но вот сайт-визитку из нескольких страничек, вполне возможно.
Если у кого-то именно он и является целью, и нет желания изучать другие языки программирования, то эта статья для них.
Короче, в самописном исполнении, без использования CMS, проще уже ничего не существует.
А для тех кому требуется что-то по круче, в конце статьи есть ссылки на статьи с кодом блочного шаблона, с использованием CSS, и кодом динамического сайта с использованием PHP.
Сайт на чистом html сделаем прямо на этой странице, так сказать — сайт в сайте, вполне рабочий и готовый к заполнению контентом.
Разделим весь процесс на три части.
1. Создание директории сайта на своём компьютере.
2. Создание сайта.
3. Перевод сайта с нашего компа на хостинг, то есть в интернет.
Создание директории сайта на своём компьютере
Первый пункт самый простой. О том как создать директорию очень наглядно показано в статье (все ссылки с этой страницы открываются в отдельном окне, чтоб не потеряться).
А что, и в какую папку положить, я подробно покажу после кода главной страницы, чтоб уже было с чем идти в директорию.
Затем приступим ко второму пункту, самому творческому.
Создание шаблона сайта
Для создания шаблона потребуется редактор, в который нужно будет вставить приведённый ниже код.
Это может быть как простой виндовский Блокнот, так и любой другой текстовый редактор.
За основу шаблона возьмём многослойную таблицу HTML. Раньше, до появления CSS все сайты писались таблицами, теперь же более популярной стала блочная вёрстка.
Но и до сих пор, табличная структура не устарела и с успехом применяется.
Например инвестиционная CMS H-script со сложнейшим функционалом, целиком свёрстана на основе таблиц.
Итак, вот такой сайт, с минимальным оформлением.
Как в дальнейшем оформлять таблицы, очень подробно показано в статье .
Название сайта (организации)
Описание сайта
Главная
Здравствуйте уважаемые будущие веб-мастера! Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно, а до этого умел только входить в интернет.
Почему я решил его сделать? За те 3 месяца, пока разбирался в сайтостроении и создавал этот ресурс обнаружилось, что авторы руководств по созданию сайтов считают многие нюансы само собой разумеющимися и не обращают на них внимания.
А мне, учитывая возраст и отсутствие опыта, было не просто понять как раз эти нюансы, они отнимали больше всего времени.
Меню
Общая информация
Текст общей информации
Название сайта
<
!--Создаём таблицу контейнер, которой задаём следующее
оформление:
border="1" - рамка вокруг контейнера. Увеличив число, можно увеличить толщину рамки.
align="center" - размещаем контейнер по центру экрана.
rules="rows" - убираем двойную рамку.
style="width:60%;" - добавляем стилевое свойства, делающее
контейнер и весь сайт "резиновым".
Сделать полноценный адаптивный дизайн, этим способом невозможно.--
>
border
="1
" align
="center
" rules
="rows
" style
="width:60%;
">
<!--Создаём строку--
>
<!--Создаём ячейку строки--
>