HTML и CSS для начинающих

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

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

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

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

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

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

Таблицы по-прежнему играют важную роль на веб-страницах. Однако это относится только к представлению данных. Кстати, когда еще не было CSS или браузеры еще не поддерживали его, таблицы служили совершенно другой цели: с их помощью создавали макеты. Для этого в ячейках таблиц размещали отдельные элементы страницы. Такие таблицы-монстры для макета теперь, к счастью, принадлежат прошлому благодаря CSS. Сегодня таблицы в веб-дизайне используются исключительно для того, для чего они и предназначены: для наглядного представления данных.

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

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

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

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

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

Чтобы сразу же предвосхитить: Особенно в HTML5 формы сделали огромный прыжок к преодолению. Благодаря множеству новых типов полей можно создавать очень интересные формы. Эти новые возможности, конечно, вам еще предстоит изучить. Однако начнем это видео-обучение с необходимого инструмента, необходимого для определения форм. Сначала идет речь о создании однострочных полей ввода. Вы увидите, как их определять, как можно предварительно заполнять и устанавливать на незаполненные. Вы также узнаете определение полей для ввода пароля. Ведь это тип поля, который можно использовать время от времени.

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

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

Видео-обучение в прошлом видео подготовило вас к вступлению в мир форм HTML5. Однако это еще не предел. На самом деле в HTML5 в этой области есть намного больше возможностей.

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

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

HTML5 вводит множество новых элементов структуризации. Какие именно это основные элементы, было показано в предыдущем видео-курсе. Теперь речь идет о том, как использовать эти элементы на практике. Эти элементы обеспечивают семантическую структуризацию документов. В этом видео-курсе вы в первую очередь узнаете о двух элементах: article и section. Они обеспечивают основную структуру HTML-документов. В конце этого видео также будет еще один взгляд на различия между div, article и section.

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

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

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

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

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

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

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

В предыдущем видео-обучении были представлены некоторые селекторы. Разумеется, в CSS есть еще много других селекторов.

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

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

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

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

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

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

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

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

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

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

В предыдущем видео-обучении уже кратко упоминался так называемый принцип плавающих элементов. Тема настолько сложна, что здесь еще раз более детально рассмотрим этот floating. Фактически, это является ключевым концептом в CSS. Только понимая эту тематику, можно действительно создавать веб-сайты.

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

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

В следующих видео-тренингах я покажу вам, как пошагово реализовать макет веб-сайта. Для этого существует множество различных подходов. Часто макеты создаются в программе Photoshop. Затем отдельные элементы страницы вырезаются и снова объединяются с помощью CSS и HTML в одном веб-сайте. Точно так же это делается и здесь. Однако вместо Photoshop я использую бесплатно доступный GIMP. Описанные шаги также могут быть воспроизведены в Photoshop.

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

Вы создали макет. Теперь переходим к его практической реализации. В этом видеоуроке мы вместе создадим основу HTML веб-страницы.

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

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

Обычно следует предоставить посетителям возможность связаться. В простом случае можно оставить номер телефона и/или адрес электронной почты. Можно сделать так, но это не очень удобно для посетителей. Поэтому в этом видео-курсе мы создадим форму, через которую посетители могут легко связаться с нами. И, конечно же, мы воспользуемся возможностями, которые предоставляют нам HTML5 и CSS3.

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

На данный момент вы, безусловно, вложили много времени и работы в разработку вашего веб-сайта. Начиная с концепции, дизайна макета и заканчивая его реализацией в HTML и CSS. Пора представить ваш сайт миру. Именно об этом идет речь в этом видео-обучении. Я покажу вам, как разместить веб-сайт онлайн. Сначала вы узнаете, как выбрать правильного провайдера и подходящий пакет веб-пространства. Затем данные будут загружены на сервер с помощью популярной программы FileZilla. И после этого ваш сайт действительно будет онлайн.

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

Показаны:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5-Boilerplate - это мощный шаблон для веб-сайтов на HTML5 и CSS3; он делает HTML5 максимально совместимым с разными браузерами и содержит несколько отличных шаблонов кода в области JavaScript, CSS3 и, конечно же, HTML.

В этом видео-обучении я хочу представить вам эти функции. Сейчас нет лучшего шаблона для начала работы с HTML5 и CSS3.

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

Сюда входят:
html5css3box.com
kuler.adobe.com (теперь https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com