Архив рубрики: Курсы html

Заметки относятся к курсам HTML и другим курсам направления веб-разработки

Как сделать диаграмму

столбчатая диаграмма

Cтолбчатая диаграмма

Диаграмма — графическое представление данных геометрическими фигурами (отрезками, столбцами, секторами и т.д.), позволяющее быстро сравнить соотношение величин. На HTML создается столбчатая диаграмма горизонтальная или вертикальная. Если использовать SVG-графику, то можно добиться невероятных представления графиков и диаграмм, как в d3.js.
Читать далее

Одностраничное приложение

Кокосовая пальма в океане

Кокосовая пальма в океане

Одностраничное приложение или SPA — single page application  — сайт или веб-приложение, в основе которого находится единственный HTML-документ. Обычно в подобном приложении на HTML-странице подключается JavaScript-фреймворки («каркасы» для разработки) тип AngularJS, BackboneJS, Ember.js и др. Эти фреймворки позволяют отображать на странице разное содержимое, в зависимости от действий пользователей и/или состояния URL страницы. Изменение состояния может происходить при нажатии на ссылки, href которых состоит из фрагмента URL начинающегося с символа «#». Иногда с пары символов «#!», в случае поискового продвижения это сайта (в Яндексе). Читать далее

Тест по HTML

тестирование

Узнайте свои возможности!

Спасибо, что заинтересовались тестированием по HTML:). Чтобы запустить текущий тест по HTML пришлось протестировать четыре плагина для WordPress, основательно повторить документацию по HTML, написать более ста вопросов по HTML, провести два опроса в группах ВК по веб-разработке, провести предварительную проверку теста. Результатом стал текущий тест по HTML. Его основная цель обратить внимание веб-разработчиков на разные моменты работы при верстке HTML-страниц: правила написания элементов, атрибутов, учёт закрывающих тегов, правила вложенности разных элементов. Рекомендуется сдавать тест предварительно познакомившись с HTML (не важно изучали вы его на курсах или самостоятельно по книге). Не стоит пытаться многократно сдавать тест для запоминания конкретных ответов. После прохождения теста показывается результат сдачи (по категориям вопросов) и показываются правильные ответы (большая часть опрошенных выступила за эту возможность). Если после прохождения теста вы получаете низкий процент правильных ответов, вам нужно подучить HTML. Читать далее

Этапы создания сайта

этапы создания сайта

Этапы разработки сайта

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

Что такое XML

О языке разметки XML

XML — расширяемый язык разметки

XMLрасширяемый язык разметки. Язык, в котором список тегов и атрибутов на задается жестко, подобно HTML. Это дает большую гибкость при верстке разметке документа, одновременно обязует продумать используемую структуру ограничиваясь синтаксисом языка. Один из способ применения — создание карты сайта (файл обычно называется sitemap.xml) для более скорого знакомства поисковых систем с вашим сайтом. При создании карты сайта нужно соблюдать структуру XML-документа, описанную на сайте протокола http://www.sitemaps.org. Если открыть сайт и посмотреть описание, мы увидим теги XML—файла, которые создали разработчики протокола: Читать далее

Обтекание в HTML и CSS

HTML обтекание важно при разработке страниц

CSS float позволяет делать HTML меню, размещать блоки, выравнивать изображения

Если вы не очень хорошо понимаете как работает обтекание в HTML и CSS (свойство float), то эта заметка поможет сориентироваться. Свойство CSS float часто применяется для расположения двух и более блоков в одну линию. Верхняя часть этих блоков находится на одном уровне, нижняя — в зависимости от высоты блоков. Сами блоки «плывут» влево (float:left) или вправо (float:right). Есть еще значение none, оно отключает обтекание (работу float) для конкретного элемента с float: none Читать далее

HTML компрессор

HTML компрессор

HTML-страница с меньшим весом быстрей загружается

HTML компрессор — утилита/сервис позволяющий уменьшать объем HTML-страниц за счет удаления лишних пробелов, знаков табуляции, переносов и комментариев. В результате «сжатия» страница меньше весит, а значит чуть быстрей загружается браузеру посетителя. CSS- и JavaScript компрессоры работают по тому же принципу: минимизация размера кода. Но в случае с CSS может использоваться объединение стилей для более лаконичной записи, а в JS тоже самое с переменными. Например, если у вас есть фрагмент CSS: Читать далее

Анимация в CSS

По телевизору идет мультфильм|анимация в CSS

Анимация в CSS оживляет страницу

Анимация в CSS — очень интересная возможность для создания подвижных фрагментов на сайте. Двигать (а также менять цвет, размеры и т.д.) можно при помощи свойств начинающихся на animate-property, где вместо property подставляется одно из слов: name, duration, timing-function, iteration-count, direction, play-state, delay, fill-mode. Но можно записать сокращенный формат animation, описав все внутри. Почти как background. CSS анимация позволяет менять значения свойств, например можно изменить цвет элемента и поменять его расположение. Читать далее

Документация по CSS

документация по CSS,HTML,PHP,JavaScript

Всегда держите документацию по CSS под рукой

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

Читать далее