Как писать на html5 и какие у него возможности

Содержание:

Технические моменты
- 4.1. Движок
- 4.2. Конструкторы сайтов
- 4.3. Самостоятельная разработка сайта
- 4.4. Разработка дизайна
- 4.5. Сайт на https (SSL-сертификат)
Шаг 2 – добавляем разметку веб-страницы
Немного о «мутациях» html в html5
uCoz – лучший бесплатный хостинг для сайта + онлайн конструктор
- Возможности бесплатного хостинга uCoz:
- Ограничения бесплатного тарифа:
- Условия для некоммерческих организаций:
Пример структуры документа сайта на html
Семантические элементы
Заголовки
Создание сайта html в блокноте с нуля
Foodure — Готовый шаблон веб-сайта ресторана
Альтернативные методы бесплатного создания сайтов
Onetech – шаблон для создания магазина электроники
Наполняем сайт контентом.
Теги – основа языка HTML
Создание семантики сайта
- Как собрать семантическое ядро
Метаданные html страницы
Причины возникновения
Шаг 3 – работаем со стилями CSS
Po-Portfolio – шаблон для создания сайта-портфолио
Использование сброса CSS
- Кроссбраузерность и тестирование
The декларация
- HTML 4.01 Strict
- HTML 4.01 Transitional
- HTML 4.01 Frameset
Создание шаблона сайта
Работа с таблицами стилей CSS

Технические моменты

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

4.1. Движок

Движок сайта — это программа (скрипт), которая отвечает за функционирование сайта. Фактически является ядром сайта. От него зависит скорость работы сайта, функционал и удобство.

Движков очень много. Каких только не создали уже. Они делятся на платные и бесплатные. Какой лучше использовать — это большая тема для рассуждения. У каждого есть свои плюсы и минусы. Рекомендую прочитать как выбрать движок для сайта, чтобы ориентироваться в этой теме.

Движок сайта зависит от ранее рассмотренных целей. Для каждого вида сайта существуют специализированные движки.

1. Для сайта-визитки и корпоративных сайтов подойдут:
WordPress, Joomla, 1С-Битрикс, UMI.CMS, Wix, uKit, Jimdo

3. Новостной и информационные сайты:
WordPress, Joomla, Drupal

4. Блог
WordPress, DLE

5. Форум
phpBB

4.2. Конструкторы сайтов

Помимо движков сайтов многие выбирают онлайн «конструкторы». Конструктор сайта — это упрощенный инструмент для создания сайта. Этот вариант очень хорошо подойдет для тех, кто заинтересован в краткосрочной перспективе что-то продать или сделать самый простенький сайт визитку.

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

Как я уже сказал, этот вариант хорошо подойдет только в случае, если от сайта не ждать каких-то результатов.

Бесплатные конструкторы сайта:

Подробный обзор каждого сервиса читайте в статье: обзор бесплатных конструкторов сайтов

4.3. Самостоятельная разработка сайта

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

Самостоятельная разработка движка под силу только профессионалам. Новички могут попробовать написать примитивные движки сайта на php. Однако это будет скорее интерес, чем качественный продукт. Чтобы исправить все «косяки» движка необходимы годы отладки (если мы говорим про функциональный сайт).

Для самостоятельной разработки сайта с нуля потребуются много знаний:

PHP-уроки
HTML-уроки и советы
Уроки CSS
Как сделать сайт на PHP

4.4. Разработка дизайна

Следующим этапом создания сайта является — разработка дизайна сайта. Есть несколько вариантов как поступить

Создать самостоятельно. Этот вариант подойдет только для профессионалов. Надо владеть Фотошопом, знаниями HTML и CSS.
Использовать шаблоны
Заказать у фрилансеров (биржи и сайты фриланса)

Чем популярнее движок сайта, который Вы выбрали ранее, тем проще под него найти сделать дизайн. Например, под популярные CMS типо WordPress, Joomla, Drupal есть тысячи бесплатных шаблонов, которые можно использовать прямо сейчас. Вряд ли хватит сил пересмотреть их все.

Конечно, делая серьезные сайты лучше использовать не бесплатные шаблоны, а уникальный дизайн. Это ценится в поисковых машинах. Для этого можно заказать создания дизайна у фрилансеров. Стоимость подобной работы не высока. В среднем чек находится от 3000 до 10000 рублей.

4.5. Сайт на https (SSL-сертификат)

Все новые сайты есть смысл создавать только на протоколе https (защищенный), поскольку это стало важно для SEO-оптимизации. Для того, чтобы сайт был с таким протоколом необходимо приобрести SSL-сертификат

Шаг 2 – добавляем разметку веб-страницы

Биржа kwork.ru: как зарабатывать на продаже своих услуг по 500 рублей и какие возможности она открывает фрилансерам

Теперь приступаем к редактированию файла. Первым делом необходимо добавить -веб-разметку – стандартный кусок кода, позволяющий браузерам распознавать контент, находящийся во внутренних тегах. Просто скопируйте и вставьте его:

<!DOCTYPE html PUBLIC»-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Топовый сайт новичка</title>
</head>
<body>
<h1>Это тег заголовка первого уровня для содержимого страницы</h1>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац и т. д.</p>
</body>
</html>

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

Немного о «мутациях» html в html5

Узнаем днс провайдера: для чего, какие есть возможности

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

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

uCoz – лучший бесплатный хостинг для сайта + онлайн конструктор

Тезисный план: как правильно оформлять, какие приемы использовать, и что в нём писать

uCoz – это самый первый и хорошо известный российский хостинг с конструктором сайтов, работающий с 2005 года. За 0 рублей на uCoz можно создать любой тип сайта: блог, форум, доску объявлений, портал, сайт-визитку, портфолио, лендинг – всё из этого доступно для создания «из коробки», без материальных вложений в хостинг, движок и домен!

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

Возможности бесплатного хостинга uCoz:

К сайту можно подключить свой домен (вроде site.ru – можно купить через Панель управления) или использовать бесплатный поддомен на выбор (*.ucoz.net, *.ucoz.org, *.at.ua и др). А также подключить фришный домен второго уровня (*.tk, *.ml, *.ga, *.cf, *.gq).
Есть полный доступ к коду шаблонов HTML/CSS/JS через встроенный редактор, то есть можно вставить код рекламных систем (Google AdSense и др.), добавить любые баннеры, загрузить свои страницы в формате page.html (используя «Файловый менеджер» или FTP-клиент FileZilla), интегрировать коды внешних сервисов (счетчики статистики Яндекс Метрики/Google Analytics, код кнопок соцсетей, онлайн-консультанты и т.д.) – это ключевая возможность, которая позволяет монетизировать и зарабатывать на своем сайте не потратив ни копейки!
400 Мб места на хостинге, которое увеличивается – чем дольше существует сайт, и чем больше у него пользователей, тем быстрее увеличивается пространство на диске. Это адекватный объем места на сервере, его будет предостаточно для среднестатистического сайта из материалов с картинками, документами для загрузки, таблицами, формами и прочим. Для визитки, личного блога или сайта игрового сообщества этого хватит совершенно точно.
Около 500+ бесплатных и платных готовых шаблонов, разной тематики, адаптивных, доступных через Панель управления, или на сайте uTemplate.pro. Шаблон можно заменить на другой в любой момент. Если есть знания программирования и навыки верстки, то можно загрузить полностью свой шаблон с каким угодно дизайном.
Доступ к ограниченной версии SEO-модуля – можно установить пять 301 редиректов, использовать инструменты «Комплексное продвижение» и «Мониторинг позиций». Также, можно редактировать файл robots.txt, карту сайта sitemap.xml, прописывать мета-теги (title, description) в коде шаблонов.
Отсутствие ограничений на количество публикуемых страниц, материалов, фотографий, файлов (кроме тех, что продиктованы текущим объёмом хранилища), использования доступных модулей, внесений правок в исходный код, интеграций сторонних сервисов.
Сайты на uCoz отлично подходят для продвижения и раскрутки, хорошо воспринимаются и индексируются поисковыми системами Яндекс и Google.
Сайт будет существовать неограниченно долго по времени без удаления, при условии что хотя бы 1 посетитель зайдет на сайт в течении 40 дней.

Ограничения бесплатного тарифа:

На бесплатном сайте будет показываться реклама uCoz. Рекламный баннер будет расположен в верхнем правом углу – это есть «плата» за использование движка без денег.
Объём хранилища в 400 Мб – для начинающих этого места хватит за глаза, но кому-то этого будет недостаточно.

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

Что входит в платные пакеты услуг:

В течение первых 48 часов жизни нового сайта предоставляется скидка 50% на любой премиум-пакет. Для последующих оплат также есть скидки от 10% до 30% в зависимости от выбранного срока – полгода, год, два года. Домен вида site.ru идет в подарок, если подключить на 12 мес тариф «Оптимальный» или «Магазин», для «Максимального» – на 6 мес.

Условия для некоммерческих организаций:

uCoz – оптимальный движок для создания школьных сайтов, детских садов, некоммерческих проектов, больниц, администраций и других типов сайтов государственной бюджетной сферы. uCoz не берёт плату за поддержание деятельности таких сайтов. К таким проектам применяется лояльный подход – бесплатно отключается реклама на сайте.

Пример структуры документа сайта на html

В первой строчке документа прописана версия языка html.

Пропишем данный код в Блокноте и сохраним в формате .html.

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

Я выбрала такой макет: в верхней части сайта – шапка, под ней 4 кнопки, меню – слева и текст – справа.

На языке html таблица определяется тегами <table></table>, а строка в таблице — <tr></tr>, столбцы — <td></td>.

Таблица будет иметь следующий вид:

Где:

8 и 33 — сроки открывают и закрывают таблицу;

14 и 21 — строки открывают и закрывают строку в данной таблице;

15, 16, 17, 18 строки – открывают и закрывают столбец;

22 и 25 строки — открывают и закрывают столбец. При этом атрибут colspan=”1” – количество столбцов, width=”170” и height=”317” – ширина и длина ячейки;

27 и 30 — опять открывают и закрывают столбец. В данном случае атрибут colspan=”3” — ячейка растягивается на 3 столбца. Ее размеры составляют: width=”510” и height=”317”.

Если убрать в 8-ой строке атрибут border=”1”, то таблица станет невидимой, что мы и сделаем.

Семантические элементы

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

Это некоторые из наиболее распространенных семантических элементов HTML:

Элемент <section> может использоваться для определения части веб-сайта с соответствующим контентом.

Элемент <article> может использоваться для определения отдельного элемента контента.

Элемент <header> может использоваться для определения заголовка (в документе, разделе или статье).

Элемент <footer> может использоваться для определения нижнего колонтитула (в документе, разделе или статье).

Элемент <nav> может использоваться для определения контейнера навигационных ссылок.

В этом уроке мы будем использовать семантические элементы.

Однако, это зависит от вас, если вы хотите использовать вместо этих элементов элементы <div>.

Заголовки

В документах я пометил те предложения, которые должны быть заголовками, так что ваша задача будет состоять в том, чтобы эти заголовочки разных уровней в нужных местах проставить и отцентрировать их. Я думаю, что вопросов с этим ни у кого не должно возникнуть, так как не так давно мы проходили заголовки в html. Вставьте заголовки из документа index.docx в index.html, ну и конечно же из других документов ворд вставьте всё в одноименные html-файлы.

Если проблемы все таки возникают, то смотрите на скриншот ниже, как это всё должно выглядеть. Но только смотрите, если у вас что-то не получается.

Итак, всё сделали? На всех страницах? Молодцы! Так держать. Теперь переходим к следующему заданию.

Создание сайта html в блокноте с нуля

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

Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:\site\index.html
Файл c:\site\style.css. Это файл стилей, зачем он нужен станет понятно позже.
Папка c:\site\images. В эту папку нужно поместить все изображения нужные для будущего сайта.
Купить хостинг и домен если нужно сайт выложить в интернете

Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами index.html и style.css. Скачай и распакуй архив в нужную тебе папку.

Так как у нас простая html страничка нам не потребуется установка сервера на нашем компьютере, так как язык разметки понимает любой браузер. Однако если потребуется использование php, то просто браузером уже не обойтись.

Теперь нужно открыть файл index и style в NotePad++

Foodure — Готовый шаблон веб-сайта ресторана

Foodure — это готовый к использованию HTML5 шаблон веб-сайта для кафе и ресторанов быстрого питания. Чистый и сбалансированный макет страниц идеально подходит для представления ваших предложений в изящном и привлекательном стиле.

Все элементы шаблона Foodure на 100% адаптивные, поэтому вы можете быть уверены, что ваши клиенты смогут насладиться содержанием сайта вне зависимости от устройства, которое они используют. Удобное мега-меню остается в фиксированном положении, когда ваш веб-сайт просматривают.

Шаблон Foodure интегрирован с редактором Novi Builder. Это практичное drag-and-drop решение, которое позволяет вам изменять все элементы макета в визуальном режиме без необходимости настройки исходного кода.

Кроме того, в шаблон сайта Foodure включено множество готовых страниц и блоков. Все они настраиваются легко и быстро в режиме drag-and-drop.

Демо Детали

Альтернативные методы бесплатного создания сайтов

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

Weblium;
UKit;
Nethouse;
UMI.

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

WordPress;
Joomla;
InstantCms.

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

Onetech – шаблон для создания магазина электроники

Добротный адаптивный шаблон с ненавязчивым, приятным дизайном. Подходит для создания торговых площадок с большим количеством категорий товаров и сложной структурой. Главная страница изобилует слайдерами с товарами, табами с описаниями, категориями, акциями и прочими приманками для посетителей – всё как по учебнику сделано. Есть поиск по названию категорий и товаров, вишлист, корзина, список категорий, товаров, лента с выбором брендов, регистрация – всё на виду, удобно и чётко реализовано. Помимо магазинной части, в шаблоне есть макеты страниц блога, спецпредложений, описаний брендов, контактов и прочие. Комплект иконок соцаильных сетей, платёжных систем и прочих прилагается. Все переходы в слайдерах и табах сдобрены аккуратными эффектами.

Наполняем сайт контентом.

Структура сайта создана, теперь мы заполним контентом наши 4 страницы. Давайте начнем с audi.html.

1) Начнем мы с написания заголовка страницы. Заголовок прописывается с помощью тега &lth1&gt (6 урок). На фото изображена только рассматриваемая часть кода страницы (1-ая строка &lttr&gt):

2) Теперь мы разместим меню в 1-ой ячейке 2-ой строки. Меню у нас будет состоять из 4 ссылок. Это ссылка на главную страницу (index.html) и 3 ссылки на страницы с марками авто. На фото изображена только рассматриваемая часть кода страницы (1-ая ячейка &lttd&gt 2-ой строки &lttr&gt):

Для того, чтобы меню было расположено в столбик, после каждой ссылки в конце строки мы ставим тег &ltbr&gt отвечающий за перенос строки. Если Вы не поняли каким образом будут работать эти 4 ссылки, то перечитывайте 13 урок.

3) Сейчас мы вставим фотографию во 2-ую ячейку 2-ой строки. Мы редактируем страницу audi.html, соответственно добавляем фото автомобиля ауди. Если Вы забыли, то напомню, наши 4 фотографии лежат в папке image. На фото изображена только рассматриваемая часть кода страницы (2-ая ячейка &lttd&gt 2-ой строки &lttr&gt):

4) Теперь у нас осталась одна не заполненная нижняя строка, в нее мы добавляем текстовое описание марки Audi. Текст который мы будем использовать в описании марок автомобилей, находится по этой . На фото изображена только рассматриваемая часть кода страницы (3-я строка &lttr&gt):

Весь наш текст заключается в тег &ltp&gt. Если забыли, что это за тег, смотрите урок 6.

5) Страница почти готова. Для того чтобы наше творчество стало больше похоже на сайт, давайте зададим цвет фона страницы. Для этого тегу &ltbody&gt мы прописываем атрибут bgcolor и даем значение grey. Цвет фона стал серый. Теперь давайте зададим цвет фона нашей таблицы, для того чтобы она не сливалась с основным серым фоном страницы. Сделаем таблицу белой, для этого тегу &lttable&gt мы прописываем атрибут bgcolor и даем ему значение white. На фото изображена только рассматриваемая часть кода страницы:

Если Вы все сделали верно, то при открытии через браузер, файл audi.html будет выглядеть так:

Теперь аналогичным образом пропишите код для страниц index.html, bmw.html, mercedes.html. На страницах будет меняться заголовок, фотография и . В результате должен получиться сайт из 4-ех страниц.

Если что-то не получилось, Вы можете скачать этот сайт по . Имея правильный вариант, Вы легко разберетесь в своих ошибках.

Вы что-то не поняли из этого урока? Спрашивайте!
— vadimgreb@yandex.ru

Теги – основа языка HTML

Пользуясь простыми примерами кода
HTML, мы словно
конструктор, собрали свой site, однако можем ли мы сделать это самостоятельно?
Чтобы написать веб-страницу с нуля, нужно знать всё о тегах и принципах их
использования. Разберёмся, как создаются
сайты html, опираясь на азы, знакомые каждому профессиональному
веб-программисту. Тегов очень много,
поэтому мы выделим основные:

<html></html> – используются для
открытия и закрытия веб-страницы, давая браузеру понять, что он имеет дело с
веб-документом;
<head></head> – содержит ключевые
данные, касающиеся веб-страницы;
<title></title> – содержит основной
заголовок – описание содержания страницы;
<body></body> – тело страницы, в
котором помещаются все объекты, которые нужно видеть пользователям Интернета,
это могут быть картинки, заголовки, текстовый контент.

Внимание! Надо уже на
этапе создания сайта подумать о его продвижении, так как теги Title и H1 будут
влиять на ранжирование страниц в результатах поисковой выдачи. Чтобы информация на страничках отображалась по центру, а ни как придётся, надо пользоваться тегами

, без которых текст будет располагаться справа

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

Чтобы информация на страничках отображалась по центру, а ни как придётся, надо пользоваться тегами

, без которых текст будет располагаться справаНаверное, вы обратили внимание, что все теги парные, то есть один открывающий, а второй закрывающий. Однако существуют и единичные теги и самый распространённый из них это

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

Создание семантики сайта

Семантическое ядро — это набор ключевых фраз, которые запрашиваю в поисковых системах реальные пользователи. Т.е. это реально работающие запросы, которые могут приносить много трафика.

Как собрать семантическое ядро

Есть несколько вариантов как собрать семантическое ядро. Рассмотрим эти варианты

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

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

Метаданные html страницы

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

Прежде всего, это тег «title», который задает название WEB-страницы. Это название отображается в заголовке окна WEB-браузера. Кроме того содержимое тега «title» используется поисковиками для указания ссылки на данный документ в результатах поиска по ключевым словам. Поэтому старайтесь задавать интересный заголовок, содержащий ключевые слова, чтобы привлечь больше посетителей.

Следующий метатег «meta» сообщает браузеру кодировку нашего документа. В данном случае мы создали нашу web-страницу в кодировке utf-8. Информацию о кодировке мы передали браузеру с помощью атрибута «content» тега «meta».

Очень важно задавать кодировку, чтобы браузер корректно отображал содержимое нашей страницы. Если вы заметили, то тег meta не имеет закрывающего тега

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

Причины возникновения

Ошибка подключения 868 появляется независимо от вида установленной операционной системы. Суть ошибки в том, что портативное устройство не может определить адрес VPN сервера — системы, принимающей подключение при пользовании Интернетом.

Этот сервер через центральный офис просматривает сведения о филиалах. В случае домашней сети основным офисом является провайдер, а филиалом – клиент. При невозможности определить IP-адрес провайдера к нему невозможно подключиться.

Ошибка 868 при подключении к интернету Билайн появляется в результате того, что ПК не имеет сведений по наименованию сервера, к которому необходимо обратиться. Ошибка 868 при подключении VPN устраняется несколькими способами, которые мы рассмотрим далее.

Шаг 3 – работаем со стилями CSS

Допустим, вы добавили какой-то текст в параграфы, теперь нужно придать им стилистику – выбрать шрифты, фон, отступы, ширину области страницы и т. д. Это может выглядеть вот так:

body {
background: #F2F2F2;
max-width: 900px;
margin: 10px auto;
padding: 30px;
}
h1{
color: #4C4C4C;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #BEBEBE;
}
p{
font:italic;
}

В примере вы видите цвет фона (background) и значение этого атрибута (#F2F2F2), ширину страницы (900 пикселей), отступы, цвет заголовка, отступы от основного текста и границ страницы (padding и margin), а также цветную границу нижней части сайта в 2 пикселя (border-bottom). Вся страница в сборе с разметкой, контентом и стилями будет выглядеть так:

<!DOCTYPE html PUBLIC»-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Топовый сайт новичка</title>
<style>
body {
background: #F2F2F2;
max-width: 900px;
margin: 10px auto;
padding: 30px;
}
h1{
color: #4C4C4C;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #BEBEBE;
}
p{
font:italic;
}
</style>
</head>
<body>
<h1>Это тег заголовка первого уровня для содержимого страницы</h1>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац и т. д.</p>
</body>
</html>

Как видите, свойства CSS мы добавили между тегами <style></style>. После завершения всех операций сохраните результат. Теперь, если вы попытаетесь открыть полученную страницу, то она автоматически запустится в браузере. Поздравляем, вы создали свой первый простенький сайт в блокноте.

Po-Portfolio – шаблон для создания сайта-портфолио

Простой для восприятия адаптивный HTML-шаблон, всю главную страницу которого занимает галерея с крупными миниатюрами. Весь акцент направлен на размещаемые фотографии – читать и смотреть здесь нечего, посетитель сразу же знакомится со снимками и получает первое впечатление. Под текстовую часть отведены разделы блога и «About». Меню стильное, не совсем обычное, по умолчание находится в свёрнутом виде

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

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

Использование сброса CSS

Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.

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

Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера, его сброс CSS адаптирован для включения новых элементов HTML5.

Если вы чувствуете себя немного авантюристом, есть также Normalize.css, созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.

Кроссбраузерность и тестирование

Как упоминалось ранее, разные браузеры отображают элементы по-своему

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

Какие браузеры вы хотите поддерживать и в какой степени — это решение вы должны будете сделать на основе того, что лучше для вашего сайта.

Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить

The декларация

HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:

<!DOCTYPE html>

Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).

В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.

HTML 4.01 Strict

Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

В версии HTML5 есть только один doctype и определяется он следующим образом:

<!DOCTYPE html>

Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.

По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.

При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.

Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).

Создание шаблона сайта

Чтобы создать шаблон сайта потребуется программа Adobe Photoshop.

Открываем программу и создаем новый документ «Файл» — «Новый».

Указываем ширину, высоту, разрешение, цветовой режим, фон.

Прописываем все так, как показано здесь:

Откроется пустой документ. Теперь надо сделать подобно тому, как в документе html. Разбиваем его на ячейки таблицы, используя направляющие.

Для отображения линейки, включаем ее «Просмотр» — «Линейки» и прямо с линейки вытаскиваем направляющие и создаем шаблон, как на рисунке:

Продолжим делать сайт в html. Теперь надо разметить меню сайта, шапку, кнопочки и т.д.

Создадим новый слой, для чего берем инструмент «Прямоугольная область». Выделяем шапку сайта и, зажав клавиши Alt + Backspace, закрашиваем шапку. Затем нажимая Ctrl + T один раз, зажав клавишу ALT, уменьшаем шапку.

Должно получиться что-то на подобие:

Похожим образом, делаем и другие области сайта. Можно изменить цвет, сделать рамку у блоков, добавить тень, наложить градиент. Для этого выделяем слой с зажатой клавишей Ctrl и используем функции Photoshop.

Выбираем необходимую функцию, например: обводка. Указываем ее размер в пикселях и цвет.

Подобным образом создаем другие элементы на сайте.

На кнопочках прописываем названия, можно прописать и в html, а можно сразу сделать графичные кнопочки. Выбираем инструмент «Текст» и на кнопках делаем надписи. Например: Главная, Услуги, Контакты и т.п.

Добавляем картинку в шапку сайта и простым перетаскиванием картинки, размещаем ее в верхнем блоке сайта. Изменить размер картинки можно с помощью Ctrl + T.

В итоге получим готовый шаблон сайта:

Разрежем шаблон на части и сохраним все в отдельной папке в нужном формате.

Берем инструмент «раскройка» и выделим каждую область сайта.

Все сохраняем. Идем в меню, выбираем «Файл» —> «Сохранить для Web». Сохраняем в формате .jpeg или .png.

В итоге: на рабочем столе – папка с готовыми блоками будущего сайта. Перенесем эти файлы в нашу папку с сайтом.

Работа с таблицами стилей CSS

Нами ранее была сформирована таблица стилей CSS, но вот что-либо добавить туда, мы пока не удосужились. Начнём с написания для сайта такого кода HTML:

* {
box-sizing:border-box;
}
.main {
width:1170px;
margin:0 auto;
border: 5px solid black;
}

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

ширина контейнера;
отображение по центру;
добавление рамок чёрного цвета с каждой из сторон.

Теперь можно с помощью HTML задать внешний вид
ключевых структурных блоков:

.menu {
margin:0 0 40px 0;
padding:0px;
}
.menu li {
display:inline-block;
width:auto;
padding:7px 15px;
}
.footer {
background-color:#f4f4f4;
}

Принцип работы заключается в
обращении к существующим элементам, у каждого из которых есть персональный
идентификатор или класс. У тега класс прописывается в свойстве class=”myname” и в CSS файле записывается .myname, а идентификатор
по аналогии id=”myname2″
и #myname2.

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

ширина;
высота;
правило float: left – прижатие компонента к
левой стороне родительского компонента.

Внимание! Идентичное свойство задаётся разделу с контентом,
прижимающемуся с той же стороны, но после колонки. После этого пишем блок
«Подвал», который по умолчанию не
высокий и имеет свойство clear, препятствующее наезду на разделы «Контент»
и «Боковая колонка», считающиеся
плавающими

«Подвал» теперь будет видеть эти блоки и всегда размещаться под
ними, но при условии, что ему будет задана команда clear: both

После этого пишем блок
«Подвал», который по умолчанию не
высокий и имеет свойство clear, препятствующее наезду на разделы «Контент»
и «Боковая колонка», считающиеся
плавающими. «Подвал» теперь будет видеть эти блоки и всегда размещаться под
ними, но при условии, что ему будет задана команда clear: both.

Фон прописывается контейнеру по классу .content и
задаётся сразу для всего сайта.
Отдельно задаётся для каждого из блоков, для
подвала, шапки, контента и т.д.

Рекомендую дать сайт общий цвет, воспользовавшись одним кодом:

.main {backgroun-color:#f9f9f9;}

В видео уроке я немного дописал таблицу стилей и вот что получилось.

Архивархив с готовым сайтом на HTML