WMZ-PORTAL.RU - удаленная работа на дому в сети интернет, заработок в интернете

Работа в интернете, работа на дому. Интернет обучение.

       

HTML по шагам

Вместо введения. За 1 минуту доказываю, что любой может сделать сайт.

Шаг 1. Основные понятия

Чтобы разговаривать на одном языке, а также для лучшего понимания темы, вначале следует обговорить термины, которые будут использоваться в тексте. Этот шаг при желании можно пропустить, а затем вернуться к нему еще раз, если вы встречаете слово, которое вам не понятно.

Шаг 2. Создание HTML-документа

Поскольку HTML-файл является обычным текстовым документом, то для написания кода HTML и создания веб-страницы подойдет любой текстовый редактор, например «Блокнот» (Notepad), который входит в комплект Windows. Тем не менее, все манипуляции с HTML будем производить в HTML-редакторе Nvu.

Шаг 3. Особенности HTML

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

Шаг 4. Структура HTML-кода

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

Шаг 5. Теги HTML

Чтобы браузер понимал, что имеет дело не с простым текстом, а с особым элементом, который задает его форматирование, и применяются теги. Теги являются основой HTML и берутся в угловые скобки.

Шаг 6. Работа с текстом

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

Шаг 7. Ссылки

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

Шаг 8. Якоря

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

Шаг 9. Изображения

Для встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.

Шаг 10. Списки

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

Шаг 11. Таблицы

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

CSS по шагам

Шаг 1. Что такое CSS

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

Шаг 2. Подключение CSS

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

Шаг 3. Типы носителей

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

Шаг 4. Базовый синтаксис

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

Шаг 5. Селекторы тегов

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

Шаг 6. Классы

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

Шаг 7. Идентификаторы

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.

Шаг 8. Комментарии

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

Шаг 9. Контекстные селекторы

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

Шаг 10. Соседние селекторы

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

Шаг 11. Дочерние селекторы

Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. При записи такие селекторы разделяются между собой символом ">" (больше) и стиль применяется ко второму селектору, но только в том случае, если он является дочерним для первого селектора.

Шаг 12. Селекторы атрибутов

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

Шаг 13. Универсальный селектор

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

Шаг 14. Группирование

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

Шаг 15. Наследование

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

Шаг 16. Псевдоклассы

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

Шаг 17. Псевдоэлементы

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

Шаг 18. Правила создания стиля

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

HTML по шагам

Любой может сделать сайт.
Шаг 1. Основные понятия
Шаг 2. Создание HTML-документа
Шаг 3. Особенности HTML
Шаг 4. Структура HTML-кода
Шаг 5. Теги HTML
Шаг 6. Работа с текстом
Шаг 7. Ссылки
Шаг 8. Якоря
Шаг 9. Изображения
Шаг 10. Списки
Шаг 11. Таблицы

CSS по шагам

Шаг 1. Что такое CSS
Шаг 2. Подключение CSS
Шаг 3. Типы носителей
Шаг 4. Базовый синтаксис
Шаг 5. Селекторы тегов
Шаг 6. Классы
Шаг 7. Идентификаторы
Шаг 8. Комментарии
Шаг 9. Контекстные селекторы
Шаг 10. Соседние селекторы
Шаг 11. Дочерние селекторы
Шаг 12. Селекторы атрибутов
Шаг 13. Универсальный селектор
Шаг 14. Группирование
Шаг 15. Наследование
Шаг 16. Псевдоклассы
Шаг 17. Псевдоэлементы
Шаг 18. Правила создания стиля