Верстка сайта html5: Вёрстка страницы сайта с помощью блоков

Видео курс HTML 5, CSS и созданию сайтов. Введение в HTML5

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

Здравствуйте, Я рад приветствовать Вас на курсе, который посвящен разработке приложений на HTML 5 и CSS3. Это базовый курс. Что бы успешно усвоить материал данного курса, вы должны знать основы HTML верстки и иметь базовые навыки работы с JavaScript кодом. Тема урока: введение в HTML5. Мы сегодня с вами разберем кратко историю развития спецификации, увидим основные возможности, так же мы разберем семантическую разметку, это новые элементы, которые применяются при делении структуры документа и так же рассмотрим несколько особенностей, о которых вы должны знать создавая новый документ используя HTML 5. Что такое HTML я думаю уже знают все, даже те кто не имеют отношения к веб программированию.

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

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

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

Язык HTML был разработан вначале 90-х годов британским ученым Бернардсом Ли, он так же является автором многих других веб-стандартов и веб-технологий, например протокол HTTP.

Его биографию, историю созданий некоторых приложений вы можете посмотреть на Википедии.

Язик HTML 5, если посмотреть на историю, достаточно быстро начал развиваться. С 1995 – 1997 год, вышло 3 версии. В 1999 году вышел HTML версии 4.1 и на этом этапе развитие HTML затихло.

Я думаю вы все знаете организацию World Wide Web Consortium, которая занимается стандартизацией веб технологий. В 2004 году несколько крупных производителей браузеров собрали группу и под ее руководством было положено развитие новой спецификации HTML5. К 2008 году консорциум переподключился к развитию этой спецификации и со временем от разработки XML и XHTML второго стандарта отказались. Акцент был сделан на HTML5 спецификацию. В 2008 году появилась первая версия и на данный момент HTML5 все так же остается в разработке. На текущий момент спецификация еще не завершена. Завершение разработки планируется в 2014 году. Всю историю разработки вы можете посмотреть на Википедии или на сайте самой группы разработчиков. Давайте перейдем к следующему слайду и посмотрим идеологию, которой придерживается компания разрабатывающая HTML5 спецификацию. Первый пункт это

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

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

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

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

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

Первый пункт: Canvas – элемент для использования растровых изображений в документе.

Передача сообщений между документами – 2 разных документа могут наладить между собой общение.

Geolocation API – возможность, встроенная в браузер, которая дает информацию об текущем расположении пользователя.

MathMl – набор элементов для отображения сложных формул.

Microdata – элемент для добавления специальных данных. Можно добавить элементы для читания поисковиками.

WebSocket – протокол для создания приложений реального времени. Можно сделать приложение, в котором серверная сторона может обратится к клиентской. Например: чат.

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

Веб-хранилища – дополнительные возможности сохранять данные на стороне клиента.

Web SQL Database – возможность использование базы данных в коде. База будет собой представлять текстовый файл.

Web Workers – инструмент для создания отдельных веб приложений.

XMLHttpRequest Level 2 – инструмент для написания Ajax сайта.

Теперь давайте перейдем в Visual Studio и начнем разбирать примеры по текущему уроку. Конечно вы можете использовать не только Visual Studio, но и любой другой текстовый редактор, которым вам удобно пользоваться. Если вы будете пользоваться Visual Studio, чтобы открыть файлы к текущему уроку, воспользуйтесь меню file – open – web site, найдите текущий урок и откройте его в студии. В Solution Explorer у вас загрузится контент урока, в каждом уроке у вас есть презентация и файл с описанием, в котором находятся домашние задания и рекомендации по прохождению текущего урока. Начнем мы урок с примеров показывающих новую структуру работы HTML документа. Открываем первый пример и смотрим как мы можем определить, что текущий документ является документом написанным на HTML 5. В обычных HTML документах, на первой строчке у нас всегда находилась строка doctypes с достаточно сложным и непонятным содержимым. Мало кто из вас на память знает, что нужно писать. Обычно все полагаются на возможности текстового редактора в котором вы разрабатываете свою страницу. В зависимости от этой строки, у нас браузеры будут определять какой версией HTML разметки мы пользовались и в зависимости от этого браузер будет делать какие то отметки при визуализации документа. Я думаю, вы легко сможете найти в интернете описание всем возможным доктайпам, сейчас мы не будем разбирать это. Так как курс предназначен для изучения HTML5. Поэтому постарайтесь самостоятельно найти описание doctype, если вам интересна данная тема. Строка 6-я, вместо того, чтобы использовать doctype старый, в HTML5 doctype сильно упростили и если вы собираетесь создать HTML5 документ, вам достаточно сделать doctype с атрибутом HTML. Эта строчка будет указывать, что текущий документ написан с помощью HTML5 спецификации. Теперь вы можете полагаться не на инструмент, которым разрабатываете страницу, а самостоятельно определить doctype. Следующее упрощение относиться к определение кодировки, которая используется на странице. Кодировка в большинстве случаев возвращается самим сервером, когда браузер скачивает HTML, в заголовках с ответом сервера, иногда находится кодировка, которой браузер должен пользоваться для отображения самой страницы. Но если кодировка не предоставлена, в таком случае мы можем использовать специальные элементы разметки, которые скажут браузерам, какую кодировку следует использовать. Для того, чтобы указать кодировку в предыдущих версиях HTML, нам нужно было использовать элемент meta в head. Вот такая строка указывала бы, что текущий документ использует кодировку UTF8. Сейчас, для того чтобы определить кодировку в HTML5 нам достаточно атрибут и использовать элемент. Вот таким вот способом определяется кодировка в HTML5. Следующее изменение и упрощение относится к подключения java script кода и css файлов. Если посмотреть на 12 строчку, мы подключаем css, в 13 строчке мы используем script, где указываем путь к подключенному элемент кода. Вот выглядит подключение сценариев и стилей в HTML5. Если сравнить это с HTML4, то по сути отличия заключаются только в 1-м атрибуте type, для каждого типа содержимого, которое возвращается со стороны сервера или отправляет на сервер есть такая строчка, которая определяет формат данных. Сейчас эти атрибуты необязательны для сценариев определения стилей на странице, достаточно просто определить те атрибуты, которые указывают на сценарий или стиль. Большинство браузеров не требуют атрибута type, даже старые версии будут корректно работать со стилем или скриптом, если вы этот атрибут не предоставили. Вот первые 3 файла, мы увидели самые простые элементы страницы, с которыми мы сталкиваемся постоянно. В следующих примерах мы пройдемся по некоторым новым атрибутам, которые можно использовать непосредственно в теле документа. Пример номер 4, элемент mark. С помощью этого элемента мы можем определить текст в документе, который должен быть помеченным, так как будто мы производили поиск и ключевую фразу, которую мы искали, нам нужно выделить. Элемент mark в большинстве браузерах он будет использовать дополнительные стили. Этот элемент мы можем стилизовать и определить как именно контент может отображаться пользователю. Давайте посмотрим этот пример, запустим его в браузере. Мы можем нажать на комбинацию ctrl f5, visual studio запустит браузер, который установлен в ToolBar visual studio и в браузере мы увидим, что 2 элемента, которые были помещены в mark. Следующий пример, это элемент abbr, использующийся для указания аббревиатуры в коде. 8-я строчка, определяем элемент abbr и в него помещаем текст, который является аббревиатурой, также в title мы определяем расшифровку аббревиатуры или какую то подсказку, которая будет показываться пользователю, если навести мышку на текст, у нас появляется title, в котором выводится сообщение, заложенное в атрибут. Это тоже один из элементов, который появился в HTML5.

Следующие возможности, которые касаются ссылок. Если вы создаете HTML5 документ, в браузере который поддерживает HTML5, если вы создаете ссылку и в эту ссылку помещаете несколько HTML элементов, вот например у нас сейчас ссылка, которая ведет на сайт и в этой ссылке у нас находится элемент h2 и картинка. Если мы сейчас запустим этот пример, то мы увидим, что элемент h2 и изображение будут кликабельны и каждый с элементов будет представлять отдельную ссылку. Но между ними пространство не является ссылкой, хотя все это помещено в один тег /А. Если мы хотим сделать такое же в HTML4, то нам придется использовать 2 отдельные ссылки, иначе это все будет единой ссылкой, если мы будем использовать оба элемента в одной ссылке /А.

Следующий пример, пример использования элемента details. К сожалению этот элемент на данный момент работает только в google chome. Посмотрите, что у нас сейчас находится внутри страницы. Строка 13-я, у нас есть элемент details, ниже элемент summary, где определяется текст привязанный к details, а дальше контент, который мы хотим поместить в блок details. Я думаю вы все видели элементы управления, которые принято называть аккордеонами, которые разворачиваются при клике и сворачиваются при повторном клике. Вот, по сути, с помощью элемента details, без подключения внешних плагинов, мы можем использовать некоторое подобие аккордеона на своей странице. Сейчас, если мы запустим этот пример в visual studio, которая запускает его в FireFox, на данный момент. При запуске приложения у нас отображается обычная HTML разметка. Все, что находилось внутри элемента details, оно отображается как обычный HTML текст, но мы переключимся на google chrome, то увидим, что у нас отображается стрелочка, которая определяет текст, который мы заложили в элемент summary, если мы кликаем по стрелочке, то разворачивается контент, который был помещен в элемент details. Кликаем повторно, контент сворачивается. В других браузерах, данная функция еще не реализована. Следующий пример – order list. В этом примере мы разберем элемент /оl, который вы все использовали на своих сайтах, естественно этот элемент не является частью HTML5 спецификации, он появился достаточно давно, но в HTML5 спецификации появляются атрибуты, которые мы можем использовать в данном тэге. Если мы посмотрим в начало нашего документа. В строке /оl, определяем в нем 3 элемента и на 12-й строчке указываем, что /оl должен начинаться с символа 3. По умолчанию /оl нам рисует список, который пронумерован, если мы не укажем старт = 3 тогда HTML будет первым пунктом, java script вторым, jquery третьим. Если мы запустим пример, первый список, 3..4..5, благодаря атрибуту start, Если посмотреть на следующий список /оl с атрибутом reversed, это означает, что при отображении в браузере все элементы, которые находятся в документе будут происходить в противоположном направлении. Вот вы видите в хроме, как отобразился этот документ. Если мы будем использовать /ul с атрибутом reversed, то это никак не повлияет на отображение списка. Вы видите как в хроме отобразились данные. Никакого обратного вывода не получилось. И последний блок кода в этом документе, это /оl, в котором каждый лист item использует атрибут value. С помощью атрибута мы можем явно указать какой индекс будет использоваться возле одного элемента списка. Обратите внимание как данные отобразились в хроме. Строка 39, здесь у нас пункт с индексом 1, потом 40-я строчка пункт с индексом 1.

Следующий пример, это атрибут Contenteditable, если вы создаете элемент разметки и добавляете к этому элементу атрибут Contenteditable, это значит что содержимое элемента может быть отредактировано пользователем. Элемент article мы с вами разберем в следующих примерах. Этот элемент никаких дополнительных возможностей для HTML разметки текущей страницы не добавляет. Но вы видите, что article использует атрибут Contenteditable, это значит, что если мы запустим этот пример, и поставим курсор внутри данного элемента, то мы сможем производить редактирование. Вот допустим в конце я могу написать сообщение Hello World или удалить текст внутри данного блога. Естественно, сейчас изменения, которые я произвел, они происходят только локально, на стороне сервера ничего не меняется. Другие пользователи эти изменения не увидят. Если вы хотите, чтобы данные, которые вы сейчас вносили, сохранились на сервер. Необходимо добавить java script код, который будет собирать изменения с элемента article и производить изменения Ajax-ом, например, и отправлять их на сервер.

Следующий пример, в котором указаны, по сути мы должны его просто запустить и посмотреть на те элементы разметки, которые уже устарели, которые мы не должны использовать, если делаем верстку с использованием HTML5. Элементы которые мы не должны использовать это:

basefont,

big, который позволяет делать текст больших размеров,

center, который позволяет центрировать элемент,

font для указания шрифта,

plaintext для отображения чистого текста, определения, что блок документа содержит в себе содержимое текстового типа,

s и stike для того чтобы указать, что блок текста должен быть перечеркнутым

tt, эдля определения того, что текст должен быть моножирным шрифтом

u, для того чтобы сделать подчеркнутым элемент.

От этих элементов в HTML5 спецификации мы отказываемся и использовать не должны. Так же у нас есть ряд атрибутов, которые тоже устарели в HTML5 спецификации. Это атрибут

Align для выравнивания текста внутри блока,

Background для задания фона,

Bgcolor, так же для задания фона,

Border, для задания цвета фона,

Атрибут cellpadding, cellspacing, height, align, width. По сути эти атрибуты мы должны заменять css стилями, от них мы должны отказаться, но я думаю, что большинство из вас не пользовались этими элементами, а использовали уже css правила, для того что бы оформить документ. Посмотрите на эти элементы, запомните их и постарайтесь не применять.

В следующем примере мы разберем использование очень полезной библиотеки для HTML5 сайта, библиотеки modernizer. Эта библиотека используется, что бы определить возможности текущего браузера, который скачал HTML страницу. Библиотеку вы можете бесплатно скачать по указанному вначале файла сайту. Давайте сейчас перейдем по этому адресу и посмотрим, что из себя представляет эта библиотека, как вы можете ее получить. Modernizer это java script библиотека, которая распостраняется бесплатно. На сайте вы можете найти документацию, дополнительные ресурсы, последние новости по разработке библиотеки, ну и естественно можете ее скачать. Вы видите 2 кнопки: development и production, у вас есть возможность собрать необходимые себе функции и скачать эту библиотеку в несжатом виде. Если вы собираетесь использовать библиотеку у себя на продакшн сайте, то естественно вы должны воспользоваться кнопкой и скачать библиотеку, которая будет минимизирована, В исходно коде будут удалены все комментарии, все переносы в новую строчку, лишние пробелы и локальные переменные, их имена будут переименованы в максимально короткие времена. Это делается для того, чтобы библиотека весила минимум и как можно быстрее скачивалась клиентами. Если вы кликаете, например по кнопке development, видите, как выглядит страница скачивания. Вы указываете, какие именно функции вам необходимо поместить в библиотеку и нажимая на кнопку download, вы скачиваете выбранный набор функционала в виде единой библиотеки. Если же вы собираетесь работать с продакшн версией, то в таком случае нажимаете кнопку production, выбираете только необходимые себе функции. Обратите внимание, что на пред идущем слайде все галочки были проставлены для development версии. Давайте посмотрим как выглядит наш пример с использование библиотеки. Вот она скопирована в наш проект. Если мы откроем ее, это продакшн версия, невозможно разобрать тот код, который здесь находится, у нас все превратилось в линейную строчку и все элементы у нас превратились в АСDE, библиотека была минимизирована и были удалены все лишние имена. Вот эту библиотеку мы скопировали к себе в проект и в приложении, которое мы сейчас разбираем, строка 10-я, библиотека подключена с помощью элемента script. Что мы делаем в самом теле документа. Библиотека предоставляет нам глобальный обьект. У которого есть много различных свойств, если мы хотим проверить наличие в браузере canvas, мы проверяем modernizer canvas, если это свойство с значением true, мы видим, что браузер поддерживает canvas, если false, браузер не поддерживает. Строка 19, мы узнаем, поддерживает ли браузер воспроизведение видео вот в таком формате. 23 строчка – проверка геолокации. 27 – проверка возможности использовать input с типом color. Для чего нужна вот такая проверка. Когда вы на своих страницах используете различные фичи HTML5, которые еще не всеми браузерами поддерживаются, вы можете сделать проверку. Получается, что modernizer, это важная библиотека, которая позволяет делать приложения, корректно работающие как в современных браузерах и браузерах, которые не поддерживают возможности HTML5. Давайте запустим в хроме. Если переключимся на фаерфокс, увидим, что он поддерживает то же самое, но элемент color он не воспроизводит. Следующий пример использования, покажет нам как загрузить, в зависимости от наличия поддержки, загрузить документ, необходимый для имитации какого ни будь функционала. Посмотрите на 15 строку, мы вызываем функцию load и в качестве параметра передаем java script объект. Этот блок проверяет знает ли modernizer о свойстве placeholder для input. Если мы загрузим пример, фаерфокс поддерживает, поэтому выводиться yep, если загрузим браузер, который не поддерживает placeholder, увидим другое сообщение. По сути все браузеры поддерживают атрибут placeholder. Теперь давайте разберем следующий пример, в котором показаны 2 HTML валидатора, позволяющие проверить, насколько ваша разметка соответствует стандартам. Если мы запустим этот пример, то вы видите, в браузере у нас есть 2 ссылки, которые ведут на стандартный валидатор консорциума и валидатор, разработанный посторонними разработчиками. Если вы перейдете по ссылке, то сможете на главной странице этого валидатора указать адрес сайта, который вы собираетесь проверить, либо файл, в котором находится исходный код для проверки, либо указать непосредственно контент, вставив его в текстбокс. Возьмем какой-нибудь сайт. Нажмем проверить его, и увидим перечень тех ошибок, которые не соответствуют стандартам на странице Google, точно так же вы можете проверить свои собственные страницы и постараться избавится от ошибок, которые вводит валидатор. Если взять следующий валидатор, он тоже очень похожий, вы можете взять текст либо выбрать файл, либо указать адрес и проверить содержимое документа.

14-й пример показывает использование элемента time, вы можете в тело документа использовать данные о времени. Вы можете добавлять значения определяющие время и дату. Вы видите в строке 18 у нас есть текст опубликован и элемент, который будет указывать, когда именно элемент был опубликован в текущий документ. Если мы семантически выделить внутри документа, что по смыслу, данный контекст является временем, для того что бы поисковики могли понимать, где у нас обычный текст, а где текст, который определяется наличием даты/времени. Это нужно для поисковой оптимизации, для того что бы определить, что данный блок текста является временем. Так же мы можем стилизовать этот элемент. На 11 строке мы создали стиль, который меняет фон. И видите? как у нас отображаются даты. Следующий элемент показывает использование атрибута hidden, с помощью него вы можете указать, что элемент не должен отображаться пользователю. По сути это эквивалент использования сss стилей, когда мы в css указываем видимость элемента. В 11-й строке мы определяем атрибут hidden и при загрузке элемента, текст не отображается.

16-й пример показывает использование контекстного меню. Контекстное меню будет у нас работать только в фаерфоксе. Пока еще не все браузеры поддерживают данную возможность. Мы запускаем текущий пример, у нас в браузере появляется изображение, если мы правой кнопкой кликаем по нему, то в стандартном окне появляется 2 пункта меню. Можно повернуть на 90 градусов по часовой стрелке или против. Если мы кликаем по пункту меню, происходит вращение, происходят изменения. Давайте посмотрим на 38-ю строку, где реализована наша картинка. Для того что бы к картинке привязать контекстное меню, используем атрибут контекст меню и указываем имя элемента на данной странице, которая представляет контекстное меню. Мы указали edit, а на 40 строчке у нас есть элемент id edit. Строка 41 и 43 определяет элементы этого меню. Закончив разбор этих примеров, мы рассмотрели основные изменения, касающиеся важных элементов документа, указывание доктайпа, указывание кодировки, так же мы посмотрели несколько новых атрибутов, которые появились в HTML5, обсудили какие атрибуты устарели, посмотрели какие есть инструменты библиотеки modernizer и разобрали использование контекстного меню и использование валидаторов. Перед тем как перейти к примеру, в котором мы изучим с вами семантическую разметку, в котором разберем те новые теги, которые вы должны использовать делая верстку страниц. Давайте мы рассмотрим ресурсы, которые будут полезными для разработки HTML5 сайтов. В фаерфоксе я подготовил уже перечень вкладок, которые вы должны будете себе записать и пользоваться, изучать материал под средством этих сайтов. В презентации есть ссылки на несколько из этих сайтов. Самый первый сайт это Caniuse, с его помощью вы можете проверить поддержку либо HTML5 либо CSS в современных браузерах. Мы хотим проверить, можно ли использовать, например canvas, вводим в поисковой строке, и сайт отображает нам информацию о том в каких браузерах и на каком этапе находится сейчас поддержка канваса. В правом верхнем углу вы видите общее описание того, насколько элемент сейчас поддерживается в общем браузерами. Так же вы можете увидеть список всех браузеров которые поддерживают или не поддерживают canvas. Здесь есть дополнительные ресурсы, на которых вы можете почитать подробнее о канвасе. Вы можете здесь встретить статьи или ссылки на документацию, поэтому обращайтесь к этому сайту, когда вы сталкиваетесь с проблемами использования какой то функции HTML5. Второй сайт, который будет полезный, это html5test.com. Заходя на этот сайт с помощью браузера, вы увидите то, как браузер поддерживает HTML5 спецификацию. Те цифры, которые выводятся на главной странице, это очки которые набрал браузер в соответствии с поддержкой функций HTML5. Откроем эту вкладку, например в хроме, и видим что хроме намного лучше поддерживает HTML5 спецификацию. У хрома очкой 463, у фаерфокса 410. Так же на этом сайте что является полезным, вы видите что поддерживается, а что не поддерживается. Вот допустим фаерфокс поддерживает элемент видео, поддерживает некоторые кодеки, mpeg4 они не поддерживает. Другие кодеки он поддерживает. Вы можете просмотреть информацию о том, что поддерживается, что не поддерживается в конкретных браузерах и так же вы можете перейти по документации, посмотреть описание по каждому пункту. Большинство здесь элементов ссылаются на w3c консорциум, либо на другие ресурсы. Вы можете детально узнать о том, как использовать ту или иную функцию HTML5. Эти 2 сайта нужны для того, чтобы проверить насколько та функция, которую вы используете поддерживается на данный момент, можно ли ее добавить на сайт или лучше найти какой нибудь другой вариант. Если открыть следующую вкладку, html5rock.com. Этот сайт содержит в себе много полезных статей, Если вы откроете главную странице сайта, вы увидите, что все статьи разбиты на блоки. То что относиться к использованию web storage, написанию оффлайн приложений, использования семантическою разметки новых элементов. Заходите на этот сайт, посмотрите этот сайт. Просмотрите какие здесь есть статьи, я думаю что много с этого сайта вам будет интересно и будет полезным. И последний ресурс, рускоязычный, это htmlbook.ru, он тоже может вам пригодится при изучении HTML5. На этом сайте есть отдельно глава, с переведенной книгой к HTML5, рекомендую книгу эту читать по мере прослушивания курса. Она достаточно на простом языке написана, вы можете заходить на этот сайт и смотреть статьи, которые безплатны. И так же можете проверять поддержку тех или иных элементов в браузере и смотреть документацию или краткое описание того, для чего нужен тот или иной элемент. Вот допустим элемент, который мы вначале урока смотрели, abbr. Мы вводим его в поиске и переходим на страницу, на которой идет описание этого элемента. Где он поддерживается, в каких браузерах и в какой спецификации он появился. Слева отображается перечень атрибутов, которые вы можете использовать вместе с этим элементом. Идет краткое описание, пример кода и комментарии пользователей, обсуждающих то, как этот элемент правильно использовать на своем сайте. Вот такие ресурсы, которые, я думаю вам пригодятся по мере разработке, по мере изучения HTML5.

И теперь у нас остается рассмотреть вторую часть первого урока. Вторая часть посвящена семантической разметке HTML5. Перед тем, как мы перейдем к примерам самого кода, давайте рассмотрим презентацию, и перейдем к 7-му слайду, где у нас перечислены новые семантические элементы, которые появились в HTML5, для определения структуры документа. Видите какие у нас есть элементы. Если обратить внимание на первые элементы, я думаю многие и вас при создании сайта, создавали шапку сайта в виде div, этому диву давали id и присваивали класс. Почему появились такие названия элементов, потому что поисковые системы анализируя разметку большинства сайтов, определили что названия для элементов сайта, обычно задаются вот такими тегами. Для того, чтобы разметка имела какую то смысловую нагрузку, в HTML5 внесли несколько дополнительных элементов, которые образом не влияют на отображения страницы, зато они добавляют смысловую нагрузку для самой страницы. У каждого элемента есть особый смысл, который скорее всего будет важен поисковику. Разработчику, пользователю абсолютно все равно, как у вас будет сделана шапка или как у вас будет сделана навигация. Вы навигацию можете сделать обычным div и положить в блок с навигацией кучу ссылок, а можете сделать навигацию с помощью элемента nav. Если поисковик начнет анализировать разметку вашей страницы, он поймет что на странице есть блок с навигацией, будет какое то другое значение придавать блоку разметки. Будет понимать где находятся ссылки, ведущие на разные страницы текущего сайта. Вот мы сейчас с вами разберем семантическую разметку, разберем как сайт выглядит на HTML5 и HTML4, проведем сравнительный анализ. Открываем visual studio, что бы нам удобнее было сравнивать 2 сайта, я сейчас закрою все вкладки кроме странички index.html и открою index index_html4.html. Чтобы было больше пространства, я сворачиваю solution explorer. Смотрите какая есть возможность в visual studio. Если я захвачу вкладку и потяну ее за пределы панельки со вкладками, то вкладка оторвется, если наведу ее на вот этот аддон, то я смогу вкладку захватить и разместить его в 2 панельки. Теперь мы можем просматривать в левой части, то как выглядит HTML5 страница, в правой части, то как выглядит HTML4 страница. Для начала давайте запустим пример, что бы мы имели представление, как выглядит документ. Видите, шапка сайта. У нас есть на странице несколько статей. Первая статья – заголовок, контент статьи. Вторая статья и ее контент, футер сайта. Здесь у нас идет навигация по сайту. Идет выноска, справа какой то блок с текстом. Сейчас мы сделаем сравнительный анализ, о том как эта страница сверстана в HTML5 и как она сверстана HTML4. Первая строчка в HTML5, видите какой мы указали доктайп и какой доктайп длинный в HTML4. Далее, как мы указывали кодировку, вот кодировка указана в HTML4 вот она указана в HTML5. В теле документа, на 10 строчке мы делаем шапку документа, если сравнить HTML4 документ мы задаем div class = header. Вы видите, что содержимое одинаковое, но если мы запустим сайт, то увидим что header у нас стилизован. Есть фон, цвет шрифта. Если посмотреть в solution explorer, у нас есть еще 2 css файла. Если вы создаете свой сайт и собираетесь использовать HTML5 верстку, то используйте соответствующую семантическую разметку, что бы четко определить для поисковика, с каких частей состоит сайт и какие элементы на вашем сайте присутствуют. И в завершении этого примера, рекомендую вам посетить сайт, который мы уже разбирали сегодня. Зайти на htmlbook.ru. Если вы перейдете на пункт сайта посвященный HTML5, то вы увидите что в статьях есть статьи посвященные верстке. Здесь последовательно определено, как вы должны последовательно, используя новые элементы и разметку, как вы должны правильно эту разметку при создании сайта. Вы видите пошаговое руководство, как создается сайт в HTML5. Рекомендую статью посмотреть, почитать для того что бы увидеть все тонкости того, как создается HTML5 страница. В xps файлах к текущему уроку вы найдете материалы и домашнее задание, которое обязательно постарайтесь выполнить. На этом мы заканчиваем введение в HTML5, спасибо за внимание. До новых встреч.

Верстка сайта с нуля. Верстка портфолио. Часть 3

Вы здесь: Главная — HTML — HTML 5 — Верстка сайта с нуля. Верстка портфолио. Часть 3

Продолжаем уроки по верстке сайта с нуля. На первом уроке мы верстали шапку сайта. На втором уроке — блок с большой картинкой. На этом уроке мы будем верстать галерею из анимированных иконок.

Выше галереи находится заголовок и текст, помещенные в контейнер.

<div>
<h3>Портфолио></h3>
<p>Много сплю и ем, но я гарантирую, что вы полюбите меня таким, какой я есть.</p>
</div>


со следующими стилевыми свойствами:

.container-well {   position: relative;
  -webkit-transition: all 1s ease; /*плавный переход между экшенами Chrome/Safari */
  -moz-transition: all 1s ease;/*переход между экшенами Firefox */
  -o-transition: all 1s ease; /*медленный переход между экшенами Opera */
  transition: all 1s ease;
}
.container-well h3{   color:#4d4d4d; /*цвет заголовка */
  font-size: 2em; /*размер заголовка */
  padding-bottom: 0.5em; /*поля под заголовком */
  text-align: center; /*выравнивание заголовка по центру */
}
. container-well p{   color:#444444; /*цвет текста */
  font-size: 1em; /*размер шрифта */
  padding-bottom: 1em; /*поле под абзацем */

  text-align: center; /*выравнивание текста по центру */
}

Под контейнером расположено меню, которое по умолчанию должно быть вертикальным:

<ul>
<li><span>Питание</span></li>
<li><span>Уход</span></li>
<li><span>Выгул</span></li>
<li><span>Здоровье/Страховка</span></li>
</ul>


Однако в макете дизайнер нарисовал горизонтальное меню, а не вертикальное, с помощью float, поставим ему свойство left и это переопределит выстраивание списков по горизонтали.

#valantin {
  width: 60%; /* ширина контейнера для всего блока меню */
  list-style: none; /* немаркированные списки */
  margin: 2% auto;
  padding: 0;
}
#valantin li {
  float:left;
  margin-left: 17px;
}
#valantin li span {
  background:#d0a5a5;
  padding: 15px 30px; /* поля обрамляющие текст */
  text-decoration: none; /* нет подчеркивания у названий меню */
  color: #fff; /*цвет текста меню */
  text-transform:uppercase; /*трансформация букв текста в заглавные */
  font-weight: 600; /*жирность текста */
  cursor: pointer; /*вид курсора */
}
#valantin li span:hover
{
  background:#a97b7b; /*фон при наведении меняет цвет */
}
#valantin li span. active {
  background:#a97b7b; /*цвет активного фона */
}


Наконец-то мы подошли к верстке анимированных иконок. При наведении курсора на иконку, появляется маленькая иконка лупы, текст, а так же меняется вид самой иконки.

Как это работает, вы можете увидеть на jsfiddle.

Ниже я приведу фрагмент кода только для одной иконки.

<div>
 <div data-cat="logo">
  <div>
   <a href="#">
    <ul>
    <li>
    <div>
    <div>
    <img src="web/images/zoom-white.png"/>
    <h4>Позирую</h4>
    <p><a href="#">перед камерой</a></p>
    </div>
    </div>
    </li>
    </ul>
   </a>
  </div>
 </div>
</div>


Далее стилевое оформление:

#portfoliolist . portfolio {
  -webkit-box-sizing: border-box; /* контейнер для галереи с иконками */
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  width: 19%;
  margin: 0% 3%;
  display: none;
  float: left;
}
.portfolio-wrapper {
  overflow:hidden;
  position: relative;
  cursor:pointer;
}
.portfolio img {
  max-width:100%;
  position: relative; /* позиционирование картинки с лупой */
  opacity: 5;
  transition: all 300ms;
  -webkit-transition: all 300ms;

  -moz-transition: all 300ms;
}

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

<div>
<img src="web/images/zoom-white. png"/>
<h4>Позирую</h4>
<p><a href="#">перед камерой</a></p>
</div>


В стилях для класса ch-info, прописываем нулевую прозрачность, то есть делаем содержимое блока с данным классом – полностью невидимым.

.ch-info {
  opacity: 0; /* Полная прозрачность элемента */
}


Зато при наведении курсора на иконку невидимые элементы становятся видимыми и имеют те свойства, которые указаны в коде для псевдокласса :hover.

Посмотреть код целиком и проверить как работает данный эффект можно на jsfiddle

Продолжение следует..

• Создано 26.10.2017 12:12:02
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

HTML редактор онлайн — Be1.ru

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

Для чего IT-шники используют HTML редактор?

Как известно, без использования гипертекстового языка разметки сайтов не сможет обойтись ни один современный ресурс, а длина кода для одной страницы может достигнуть нескольких тысяч строк. В классическом варианте оптимальным способом написания кода разметки является обычный блокнот. Пользователю он представляется в чистом виде, куда основные теги должны быть вписаны “ручками”. Это требует колоссальных затрат времени, к тому же не исключается риск совершить чисто механическую опечатку. Лайфхаком для облегчения труда веб-разработчики активно используют HTML редактор, в котором уже предусмотрена возможность автоматической правки элементов, но главное – можно вводить символы не вручную, а используя для этих целей уже прописанные программные коды.

 

Практичный редактор HTML кода достаточно простой для освоения потенциальными пользователями и может без проблем предложить оптимальное решение вопроса с версткой веб-страниц даже неопытному пользователю.

 

Преимущества HTML редактора максимальны!

 

• Позволяет правильно прописывать кодировку элементов, не боясь пропустить нужный символ, закрыть скобки, допустить опечатку или ошибку. Достаточно только найти на странице инструментов нужный элемент, нажать на него — и все данные будут оперативно прописаны, можно даже не проверять содержимое.
• Скорость написания кода существенно увеличивается благодаря тому, что используется полуавтоматическое программное обеспечение, пользователь может рассчитывать на получение достаточно высокой экономии времени на выполнение конкретных действий. Следовательно, код составляется значительно быстрее.
• Доступен онлайн без предустановки на ПК. Редактор позволит без проблем работать в любой точке планеты, обеспечить сохранение данных в автоматическом режиме, гарантирует максимальное удобство исполнителю.
• Бесплатность существенно сэкономит время и средства потенциального клиента, даст ему неограниченное поле для деятельности и не даст возможности допустить многих ошибок в работе. Не будет необходимости выплачивать большие суммы за использование программного обеспечения.

 

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

 

Как выучить HTML и CSS с нуля: сайты с бесплатными уроками для изучения HTML

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

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

Что такое HTML и CSS и зачем нужно их знать?

HTML – это язык разметки, который указывает браузерам (Google Chrome, Яндекс.Браузер и другим подобным программам), где и какие элементы выводить на странице сайта. Например, где находится заголовок, основной текст, ссылки на другие страницы, меню, списки, таблицы и так далее.

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

С чего начать самостоятельное изучение HTML?

Язык разметки HTML состоит из тегов. Условно теги – это элементы, которые указывают браузеру, что должно выводиться на странице. Например, есть теги, которые обозначают вставку картинки или фотографии, видео, таблицы. Есть теги, которые обозначают начало и завершение абзаца.

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

Чтобы самостоятельно выучить язык HTML, необходимо:

• Изучить основные теги, которые размечают заголовки (h2-h6), текст и его деление на абзацы, формируют нумерованные и ненумерованные списки (p, br, ul, ol, li), выставляют ссылки (a), изображения и другие объекты (img, object), выделяют фрагменты жирным или курсивом (strong, b, i), размечают таблицы (table, tr, td), вставляют формы (form, input, textarea, select, option), структурные теги (div, span), а также – основные теги (html, head, title, body). Кажется, что команд очень много, но на самом деле их можно выучить самостоятельно за 2-3 дня.
• Выучить атрибуты для популярных тегов. Не обязательно знать все атрибуты наизусть. Есть бесплатные справочники, в которых можно искать эту информацию во время работы.
• Изучить структуру HTML-кода, чтобы понять, как создаются страницы сайтов.
• Прочитать о табличной верстке – это устаревший вид верстки, который на современных сайтах не используется. Однако вам нужно знать, что это такое, чтобы не теряться, если придется работать с версткой старого сайта.
• Научиться блочной верстке при помощи дивов (div). Это современный тип верстки, который нужно хорошо знать.
• Прочитать про валидную верстку. Есть организация, которая определяет стандарты HTML. Она называется W3C. Валидной называется верстка, которая полностью отвечает стандартам W3C. На практике их часто нарушают и не каждая верстка может быть валидной. Но в любом случае про этот стандарт нужно знать.

• Разные браузеры по-разному обрабатывают некоторые теги и иные команды. Если вы решили самостоятельно изучать HTML, обязательно прочитайте, что такое кроссбраузерная верстка и как ее делать.

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

Как выучить CSS с нуля?

Осваивать CSS рекомендуется после того, как вы изучили основы языка HTML. Вот что нужно узнать о каскадных таблицах стилей:

1. Основы синтаксиса: основные селекторы, их свойства и значения. На словах кажется сложно, но на деле – просто. Например, в CSS вы можете задать оформление заголовка, указав, какой у него должен быть шрифт, размер шрифта, отступы от других элементов на странице, цвет и другие параметры. Чтобы знать CSS, вам нужно изучить, какие параметры вы можете задавать у разных элементов на страницах.
2. Изучить, как при помощи CSS задавать позиционирование разных элементов на странице.
3. Узнать, что такое псевдоклассы и комбинаторы.

4. Изучить адаптивную верстку, когда макет страницы подстраивается под размеры экрана пользователя.

Дополнительно рекомендуется выучить:

1. Препроцессоры.
2. Фреймворки, особенно Bootstrap. Фреймворк – это готовое решение, на базе которого можно быстро создать верстку нового сайта.
3. Управление преобразованием, переходами и анимацией.

4. Как правильно создавать структуру кода, чтобы его можно было поддерживать.

На каких сайтах можно освоить HTML и CSS?

Ниже представлены бесплатные сайты и справочники, которыми можно пользоваться при самостоятельном изучении HTML и CSS с нуля.

Адрес сайта	Описание сайта
htmlbase.ru	Позиционируется, как самый современный справочник по HTML и CSS. На сайте собрано описание всех тегов и атрибутов, свойств таблиц стилей, а также примеров кода и результатов их выполнения (что будет выводиться в браузере).
CSS-live.ru	На сайте собрана теория и практика по использованию CSS, трюки, хитрости и готовые решения. Сайт можно рекомендовать как новичкам, так и верстальщикам с опытом.
html5book	На сайте находятся бесплатные уроки по HTML5 и CSS, а также справочник CSS. Уроки хорошо структурированы и сопровождаются множеством примеров.
html5css.ru	На сайте есть справочник тегов, а также бесплатные уроки по верстке страниц. Имеется демо-редактор, в котором можно добавлять различные команды и смотреть, как браузер их воспринимает и что поменяется на странице пользователя.
htmlbook.ru	Один из самых популярных справочников по HTML и CSS. На сайте есть Самоучитель, а также Практикум, которые помогают ускорить обучение и сделать его проще.
ИТ Шеф	Здесь собрана коллекция статей, уроков и примеров по верстке. Также есть уроки по Bootstrap.
Самоучитель по HTML и CSS	Простой и понятный самоучитель, который подойдет для самостоятельного изучения HTML 5 и CSS с нуля.
Code.mu	Бесплатный онлайн-справочник. Будет полезен новичкам, которые хотят изучить основы верстки.
Coding-space.ru	Онлайн-учебник по HTML и CSS. Много примеров. Подходит новичкам.
Тесты на Webreference	Помогают проверить свои знания по верстке и выявить пробелы. На сайте есть руководства и справочники по HTML и CSS для самостоятельного изучения.
Ruseller.com	На сайте собрано множество материалов для сайтостроителей и верстальщиков. Можно найти интересные решения для создания разных эффектов, готовые скрипты и многое другое.
Бесплатный курс по основам HTML	На курсе изучаются основные теги. Помогает получить представление о верстке и значительно упрощает обучение HTML на старте. Проходит онлайн, можно записываться из любого города.
W3.org	Сайт консорциума W3C, на котором можно посмотреть актуальные стандарты языка разметки, а также проверить валидность своего кода в специальном Валидаторе.

Как быстро выучить HTML и CSS с нуля?

1. Больше практики. Изучили новые теги – сразу попробуйте сверстать текст с ними. Это поможет вам освоить материал быстрее. Для верстки страниц не нужно скачивать специальные программы или редакторы. Достаточно сохранить страницу из браузера на компьютере и менять у нее код, просматривая, что вы получили после добавления новых тегов.
2. Быстро выучить язык HTML и CSS самостоятельно помогают бесплатные онлайн-задачники. В них собраны различные задачи по верстке разного уровня сложности. Выполняйте практику и быстрее осваивайте новые теги. Примеры задачников: Практика на WebReference (позволяет решать задачи онлайн и сразу проверять результаты), Практикум на Htmlbook.
3. Пройдите курсы. Под руководством опытных наставников быстрее и легче учиться. Есть, кому задать вопросы и получить помощь. Например, на курсе по веб-верстке в Skillbox вы освоите HTML, CSS, Flexbox, фреймворк Bootstrap, научитесь работать с Git и выполните дипломный проект.
4. Не сдавайтесь, если что-то кажется вам сложным. Ищите информацию в разных источниках. Бывает, что на одном сайте что-то написано непонятно, а на другом – все ясно и просто.

5. Не переживайте, если что-то не получается. Главное – не бросать начатое, тогда все обязательно получится.

Что делать дальше, освоив HTML и CSS?

Когда вы изучите язык разметки и таблицы стилей, советую учить JavaScript. Это язык программирования, который позволяет создавать различные интерактивные элементы на странице, а также использовать технологию AJAX. С ее помощью можно обновлять части страниц без перезагрузки, что значительно ускоряет взаимодействие с сайтом. Пример реализации AJAX – бесконечная загрузка новой информации в ленте новостей.

Зная разметку и JavaScript, вы сможете стать начинающим Frontend-разработчиком и получить высокооплачиваемую работу в веб-студии или выполнять заказы на фрилансе.

Как быстро освоить JavaScript, мы постараемся рассказать в следующих статьях.

Читайте также:

Рекомендуем

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

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

Книги по Веб-дизайну, CSS, HTML

---

Также смотрите разделы связанные с разделом Книги по Веб-дизайну, CSS, HTML, создание сайтов и верстка:

• Обучение информатике, презентации по информатике
• Книги, задачники и учебники по информатике
• Книги и учебники по программированию
• Обучение пользованию Интернет
• Полезные сайты, ссылки, утилиты, программы
• Уроки и советы по PHP, HTML, CSS, JavaScript, Java, JSP, Servlet
• Уроки и советы по CSS
• Обучение компьютерным программам
• Решебники и ГДЗ по Информатике
• ГИА, экзаменационные билеты по Информатике
• Словари по информатике и компьютерам
• ЕГЭ по информатике
• Все книги по информатике

---

Ниже Вы можете бесплатно скачать электронные книги и учебники и читать статьи и уроки к разделу Книги по Веб-дизайну, CSS, HTML верстка, разметка Web-страниц, каскадные таблицы стилей:

• HTML5, CSS3 и JavaScript. Исчерпывающее руководство, Роббинс Дж., 2014
• Zend Framework 2.0 разработка веб-приложений, Шасанкар K., 2014
• Большая книга CSS3, Макфарланд Д., 2014
• Веб-дизайн, Книга идей веб-разработчика, Макнейл П., 2014

• HTML5, рецепты программирования, Шмитт К., Симпсон К., 2012
• Веб-дизайн, Идеи, секреты, советы, Макнейл П., 2012
• Зарабатывай в Интернете, Кнопка Бабло, Бабаев А., Евдокимов Н., Штарев А., 2012

• CorelDRAW ХЗ, Учебный курс, Миронов Д.Ф., 2006
• HTML — Популярный самоучитель — Чиртик А.А.
• HTML — Просто как дважды два — Рева О.Н.
• HTML, Популярный самоучитель, Чиртик А.А., 2006
• Высший пилотаж в Photoshop CS2, Клосковски М., 2006
• Построй свой супер-сайт за 21 день — Морозова О.М.
• Построй свой супер-сайт за 21 день, Морозова О.М., 2006
• Создание Web-страниц и Web-сайтов — Самоучитель — Печников В.Н.

Описание раздела «Книги по Веб-дизайну, CSS, HTML»

   В данном разделе к вашему вниманию предоставлены Книги по Веб-дизайну, CSS, HTML верстка, разметка Web-страниц, каскадные таблицы стилей. Вы мечтаете стать Web дизайнером, хотите разрабатывать интересные Web порталы, но не знаете как? Тогда скачивайте книги с нашего сайта бесплатно и без регистрации.

     У нас собраны книги самых популярных авторов: Musciano С., Kennedy B., Едомский Ю.Е., Niederst J.R., Борисенко А.А., Молли Э., Айзекс С., Ашманов И., Иванов А., Новичков Д.Ю., Сатин Д.К., Костин А.Н., Мейер Э., Дубаков М., Вилдермьюс Ш., Чанг Т., Кларк Ш., Гурвиц М., Вильямсон Х., Исагулиев К., Уотролл Э., Гербер Н., Смит С., Ошман М., Болдуин Д., Макдоналд Д., Петере К., Стир Д., Уильямс Э., Барбер К., Ньюкирк П. и другие.

     В книгах написано все о программах для Веб дизайнера: Adobe ColdFusion Enterprise 8.0, Adobe Contribute, Adobe Dreamweaver, Adobe Fireworks, Adobe Flash Professional, Adobe Photoshop, Microsoft Expression Web и другие.

     Если вы планируете стать веб-дизaйнерoм, то Фoтoшoп будет oснoвнoй графической прoгрaммoй, с кoтoрoй вам предстоит иметь дело. Далее вы изучите html. Если html знaете — тo css выучите зa пaру-трoйку дней. Так же обязательно пользуйтесь Macromedia Dreamweaver.

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

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

 

Как создать макет страницы HTML5 и CSS3 с абсолютным позиционированием

2. Веб-дизайн и разработка
3. HTML5 и CSS3
4. Как создать макет страницы HTML5 и CSS3 с абсолютным позиционированием

By Andy Harris

You может использовать абсолютное позиционирование для создания макета страницы HTML5 и CSS3. Этот процесс предполагает некоторые компромиссы. Вы можете лучше контролировать свою страницу с помощью абсолютного позиционирования (по сравнению с плавающими методами), но абсолютный макет требует большего планирования и большего внимания к деталям.

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

Обзор абсолютной компоновки

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

1. Распланировать участок.

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

2. Укажите габаритный размер.

   Этот конкретный тип макета имеет фиксированный размер. Создайте блок div, содержащий все остальные элементы, и укажите размер этого блока (на данный момент в фиксированных единицах, обычно в пикселях или em).

3. Создайте HTML.

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

4. Создайте таблицу стилей CSS.

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

5. Определите каждый элемент.

   Легче увидеть, что происходит, если присвоить каждому элементу рамку разного цвета.

6. Сделайте каждый элемент абсолютно позиционированным.

   Установить позицию: absolute в CSS для каждого элемента в макете.

7. Укажите размер каждого элемента.

   Установите высоту и ширину каждого элемента в соответствии с диаграммой. (Вы, , сделали диаграмму , верно?)

8. Определите положение каждого элемента.

   Используйте атрибуты left и top, чтобы определить положение каждого элемента в макете.

9. Настройте свой макет.

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

Как писать HTML

Код HTML довольно простой:

 

 
 
 
 <ссылка rel = "таблица стилей"
   type = "текст / css"
   href = "absLayout.css" />
 
 
 

  

   
 Макет с абсолютным позиционированием 
 
  
  

  
  

  
 
 
 

HTML-файл вызывает внешнюю таблицу стилей с именем absLayout.css.

Добавить CSS

Код CSS немного длинноват, но не слишком сложен:

 / * absLayout.css * /
#все {
 граница: сплошной черный 1px;
 ширина: 800 пикселей;
 высота: 600 пикселей;
 позиция: абсолютная;
 слева: 0px;
 верх: 0px;
}
#голова {
 граница: сплошной зеленый 1px;
 позиция: абсолютная;
 ширина: 800 пикселей;
 высота: 100 пикселей;
 верх: 0px;
 слева: 0px;
 выравнивание текста: центр;
}
#menu {
 граница: сплошной красный 1px;
 позиция: абсолютная;
 ширина: 140 пикселей;
 высота: 500 пикселей;
 верх: 100 пикселей;
 слева: 0px;
 отступ слева: 5 пикселей;
 отступ справа: 5 пикселей;
}
#content {
 граница: 1 пиксель сплошного синего цвета;
 позиция: абсолютная;
 ширина: 645 пикселей;
 высота: 500 пикселей;
 верх: 100 пикселей;
 слева: 150 пикселей;
 отступ слева: 5 пикселей;
} 

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

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

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

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

• Абсолютное позиционирование менее адаптируемо. При использовании этого метода вы в значительной степени привязаны к определенной ширине и высоте экрана. У вас возникнут проблемы с адаптацией к планшетам и мобильным телефонам.

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

Об авторе книги

Энди Харрис сам учился программированию, потому что это было весело. Сегодня он преподает информатику, разработку игр и веб-программирование на университетском уровне; консультант по технологиям в штате Индиана; помог людям с ограниченными возможностями создавать собственные компании по веб-разработке; и работает с семьями, которые хотят обучать работе с компьютером дома.

Параметры редактора макета HTML5

Имена выходных файлов для поисковых систем	Включите, если вы хотите, чтобы имена ссылок, оптимизированные для SEO, основывались на названиях тем в вашем выводе, а не на уникальных идентификаторах. Ссылка также останется постоянной, если название темы останется прежним (название темы не имеет значения). Вы можете изменить название темы без изменения имени файла, которое создается в выводе. Это полезно, если вам нужно сохранить существующий URL-адрес для страницы. Чтобы изменить имя темы, но сохранить существующее имя файла, добавьте атрибут xinfo: outname в элемент раздела раздела тема. Задайте значение xinfo: outname равным имени файла (а не полному пути URL) и не включайте расширение файла .html. Если раньше заголовок был «Введение в ACME», автоматически создаваемое имя выходного файла было бы «Introduction-to-acme.html». Если вы теперь измените заголовок на «Введение в ACME», это изменит имя выходного файла на «introduction-acme.html». Затем вы можете добавить xinfo: outname с значение «Introduction-to-acme» (без расширения), чтобы сохранить предыдущее имя выходного файла.
Используйте короткую и плоскую структуру URL-адресов для выходных файлов	Если у вас активированы оптимизированные для SEO имена выходных файлов, выходные пути по умолчанию будут иметь структуру вложенных папок. Включение этой опции вместо этого создаст плоскую структуру URL-адресов, генерируя более короткие пути URL-адресов. (Всегда включается автоматически, если ниже выбрана загрузка Ajax) По умолчанию: отключено
Использовать имена выходных файлов, составленные из идентификатора и имени SEO	Когда включена плоская структура URL или загрузка Ajax, имя выходного файла основано на заголовке .Если вы включите этот параметр, имя выходного файла будет представлять собой комбинацию идентификатора темы и заголовка, например «123-my-topic.html». По умолчанию: отключено
Разрешить зарезервированные символы в именах выходных файлов	Некоторые символы, такие как запятые и точки с запятой, классифицируются как «зарезервированные» символы.Используйте этот параметр, чтобы указать, можно ли использовать зарезервированные символы в именах выходных файлов. Установите для него значение Enabled, чтобы разрешить зарезервированные символы, или Disabled, чтобы предотвратить их использование. По умолчанию: отключено
Удобные для чтения идентификаторы фрагментов (хэш-ссылки)	Включите эту функцию, если вы хотите, чтобы ссылки на подразделы использовали понятные для чтения имена вместо уникальных имен идентификаторов (UUID).Например, www.acme.com/docs/introduction.html#getting-started. Обратите внимание, что вам также необходимо включить функцию SEO-удобных имен выходных файлов. Отключите эту функцию, если вы хотите, чтобы выходные данные использовали уникальные имена идентификаторов. По умолчанию: отключено Чтобы узнать больше, см. Удобные для чтения URL-адреса для подразделов.
Сохранить устаревшие привязки при использовании удобных для чтения идентификаторов фрагментов	Включите эту функцию, если вы используете удобные для чтения хеш-ссылки и хотите поддерживать: Существующие ссылки на подразделы, в которых используется UUID подраздела, а не новый удобный для чтения URL-адрес Новые ссылки на подразделы, в которых используются новые удобные для чтения URL. Отключите эту функцию, если вы используете удобные для чтения хеш-ссылки и не хотите поддерживать существующие ссылки, использующие UUID. Если есть ссылки, использующие UUID, они больше не будут работать. По умолчанию: отключено Чтобы узнать больше, см. Удобные для чтения URL-адреса для подразделов.
Префикс портала множественных публикаций	Включите этот параметр, если вы: и Когда этот параметр включен, имена выходных данных для вложенных публикаций уникальны, поскольку Paligo добавляет идентификатор публикации к имени выходного файла. Отключите этот параметр, если два описанных нами пункта не применимы к вашему контенту. По умолчанию: отключено
Использовать имя ресурса вместо заголовка для файла вывода HTML	Используется для управления тем, использует ли Paligo имя темы (имя ресурса) или имя заголовка при создании имени выходного файла для тем.Установите значение Enabled, чтобы использовать название темы, или Disabled, чтобы использовать заголовок. Обратите внимание, что этот параметр применяется ко всем темам. Если вы хотите, чтобы только определенные темы использовали имя темы, вы можете вместо этого присвоить этим темам атрибут xinfo: outname. Затем установите в качестве значения атрибута название темы. По умолчанию: отключено
Сохраните буквенный регистр заголовка для имени выходного файла HTML	Используйте этот параметр, чтобы указать, все ли имена выходов должны быть строчными или могут содержать буквы верхнего регистра.По умолчанию в именах выходных файлов используются только строчные буквы, например my-topic.html. Установите значение «Отключено» только для нижнего регистра или «Включено», чтобы разрешить использование букв в верхнем регистре. Мы рекомендуем устанавливать для этого параметра значение Включено только в том случае, если у вас есть конкретная причина для использования заглавных букв. По умолчанию: отключено
Содержимое загрузки Ajax	Если этот параметр включен, содержимое HTML будет динамически загружаться для каждой страницы, что делает переключение страниц очень быстрым. Обратите внимание, что вы должны опубликовать вывод на сервере, чтобы это работало. По умолчанию: отключено.
Включить локальную контекстно-зависимую справку	Нет необходимости включать это, чтобы получить контекстно-зависимую справку.По умолчанию он включен, но по умолчанию требуется, чтобы контент был опубликован на веб-сервере, что является наиболее распространенным. Если, однако, у вас есть требование, чтобы контекстная зависимость работала в локальном пакете справки без веб-сервера, вы можете включить эту опцию. По умолчанию: отключено
Пользовательские метатеги	Введите здесь глобальные настраиваемые метатеги в виде пар «ключ-значение» (имя / содержание). Например, чтобы добавить тег noindex, чтобы исключить веб-сайт из индексации поисковой системой, вы должны ввести robots: noindex, follow; В конце каждой пары «ключ-значение» ставьте точку с запятой. Примечание Только для глобальных тегов. Конкретные метатеги можно добавить прямо в вашу тему. Мета-теги ключевых слов могут быть добавлены через элемент набора ключевых слов с элементами ключевого слова в ваших темах.И мета-теги описания могут быть добавлены с помощью элемента abstract (внутри элемента info после заголовка ). Если вы используете аннотацию для вывода мета-тегов описания, вы также можете добавить собственный CSS, чтобы не отображать его, если вы не хотите, чтобы этот аннотация отображалась также на самой странице содержимого. Используйте фильтрацию по выходному формату , если вы не хотите появляются в другом выводе, таком как PDF. По умолчанию: отключено
Создать заглавную тему для повторно используемых публикаций	Если вы повторно используете публикации в другой публикации, вы можете выбрать, следует ли рассматривать эту публикацию как тему верхнего уровня или следует повторно использовать только ее дочерние темы.
Создавать тему для повторно используемых публикаций, только если нет темы верхнего уровня	Если этот параметр включен, вы можете смешивать повторно используемые публикации, в некоторых из которых есть тема верхнего уровня (в этом случае для публикации не будет создана тема заголовка), вместе с публикациями, не имеющими темы верхнего уровня (в этом случае Для публикации будет создана титульная тема). По умолчанию: отключено
Формат вывода	Обычно не требуется, но при желании к выходным данным будет применен HTML Tidy для обеспечения строгого формата XHTML.
Копировать ссылку привязки при нажатии	Если этот параметр включен, значок ссылки отображается при наведении курсора на заголовок в середине страницы.Щелчок по нему копирует ссылку привязки в буфер обмена для удобного обмена разделом. По умолчанию: отключено
Обновить URL-адрес при прокрутке	При включении URL-адрес в поле адреса браузера будет обновляться по мере прокрутки страницы вниз до подразделов.Это упрощает копирование URL-адреса для любой части контента и повышает удобство использования. Обычно это хорошая идея, и по умолчанию она отключена только для обратной совместимости. По умолчанию: отключено.
Название компании	Будет использоваться для маркировки авторских прав, если добавлено, e.g в выходных данных Справочного центра.
Год авторских прав	Добавляйте это значение только в том случае, если вы не хотите, чтобы текущий год использовался автоматически, что является значением по умолчанию. Обратите внимание, что если у вас есть элемент авторского права внутри публикации, он переопределит это.
Дата последнего изменения	Если вы добавите здесь формат даты, дата последнего изменения для каждой темы будет выводиться в нижнем колонтитуле страницы. Например, «m / d / Y» (без кавычек) для «25.03.2018», «Y-m-d» для «2018-03-25» или «F j, Y» для «25 марта 2018». Оставьте пустым, чтобы исключить дату.
Сегодняшняя дата публикации	Если вы добавите в публикацию пустой элемент pubdate и добавите здесь формат даты, сегодняшняя дата будет добавлена ​​к вашему выводу в файле index-en.html (или эквиваленте для других языков). Например, «m / d / Y» (без кавычек) для «25.03.2018», «Y-m-d» для «2018-03-25» или «F j, Y» для «25 марта 2018». Оставьте пустым, чтобы исключить дату.
Неутвержденные переводы с цветной маркировкой	Если исходный язык изменился с момента последнего перевода, вы можете указать это синим цветом в выходных данных (для черновой публикации).

HTML-макеты

---

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

---

Лондон
Париж
Токио

Лондон - столица Англии. Это самый густонаселенный город Соединенного Королевства, с пригородами более 13 миллионов жителей.

Лондон, расположенный на берегу Темзы, на протяжении двух тысячелетий был крупным поселением. его история восходит к его основанию римлянами, которые назвали его Londinium.

Авторские права © W3Schools.com

---

HTML-макет с использованием элементов

	Элемент часто используется в качестве инструмента компоновки, поскольку его легко разместить с помощью CSS.

В этом примере используются четыре элемента