Диаграмма — графическое представление данных геометрическими фигурами (отрезками, столбцами, секторами и т.д.), позволяющее быстро сравнить соотношение величин. На HTML создается столбчатая диаграмма горизонтальная или вертикальная. Если использовать SVG-графику, то можно добиться невероятных представления графиков и диаграмм, как в d3.js.
Читать далее Как сделать диаграмму
Рубрика: Курсы html
Заметки относятся к курсам HTML и другим курсам направления веб-разработки
Одностраничное приложение
Одностраничное приложение или SPA — single page application — сайт или веб-приложение, в основе которого находится единственный HTML-документ. Обычно в подобном приложении на HTML-странице подключается JavaScript-фреймворки («каркасы» для разработки) тип AngularJS, BackboneJS, Ember.js и др. Эти фреймворки позволяют отображать на странице разное содержимое, в зависимости от действий пользователей и/или состояния URL страницы. Изменение состояния может происходить при нажатии на ссылки, href которых состоит из фрагмента URL начинающегося с символа «#». Иногда с пары символов «#!», в случае поискового продвижения это сайта (в Яндексе). Читать далее Одностраничное приложение
Тест по HTML
Спасибо, что заинтересовались тестированием по HTML:). Чтобы запустить текущий тест по HTML пришлось протестировать четыре плагина для WordPress, основательно повторить документацию по HTML, написать более ста вопросов по HTML, провести два опроса в группах ВК по веб-разработке, провести предварительную проверку теста. Результатом стал текущий тест по HTML. Его основная цель обратить внимание веб-разработчиков на разные моменты работы при верстке HTML-страниц: правила написания элементов, атрибутов, учёт закрывающих тегов, правила вложенности разных элементов. Рекомендуется сдавать тест предварительно познакомившись с HTML (не важно изучали вы его на курсах или самостоятельно по книге). Не стоит пытаться многократно сдавать тест для запоминания конкретных ответов. После прохождения теста показывается результат сдачи (по категориям вопросов) и показываются правильные ответы (большая часть опрошенных выступила за эту возможность). Если после прохождения теста вы получаете низкий процент правильных ответов, вам нужно подучить HTML. Читать далее Тест по HTML
Этапы создания сайта
Начиная знакомство с разработкой страниц и впервые услышав о языке разметки, некоторые начинающие разработчики кидаются верстать фрагменты страницы и заправлять их CSS-классами. Но в тот же момент появляются вопросы о том, что еще понадобиться для создания сайта, какой язык поможет реализовать конкретную функцию сайта, проще нанять разработчика или изучить технологию самостоятельно (в прочем на последний вопрос в заметке отвечать не будем). И так, основные этапы создания сайта: Читать далее Этапы создания сайта
Что такое XML
XML — расширяемый язык разметки. Язык, в котором список тегов и атрибутов на задается жестко, подобно HTML. Это дает большую гибкость при верстке разметке документа, одновременно обязует продумать используемую структуру ограничиваясь синтаксисом языка. Один из способ применения — создание карты сайта (файл обычно называется sitemap.xml) для более скорого знакомства поисковых систем с вашим сайтом. При создании карты сайта нужно соблюдать структуру XML-документа, описанную на сайте протокола http://www.sitemaps.org. Если открыть сайт и посмотреть описание, мы увидим теги XML—файла, которые создали разработчики протокола: Читать далее Что такое XML
Обтекание в HTML и CSS
Если вы не очень хорошо понимаете как работает обтекание в HTML и CSS (свойство float), то эта заметка поможет сориентироваться. Свойство CSS float часто применяется для расположения двух и более блоков в одну линию. Верхняя часть этих блоков находится на одном уровне, нижняя — в зависимости от высоты блоков. Сами блоки «плывут» влево (float:left) или вправо (float:right). Есть еще значение none, оно отключает обтекание (работу float) для конкретного элемента с float: none Читать далее Обтекание в HTML и CSS
HTML компрессор
HTML компрессор — утилита/сервис позволяющий уменьшать объем HTML-страниц за счет удаления лишних пробелов, знаков табуляции, переносов и комментариев. В результате «сжатия» страница меньше весит, а значит чуть быстрей загружается браузеру посетителя. CSS- и JavaScript компрессоры работают по тому же принципу: минимизация размера кода. Но в случае с CSS может использоваться объединение стилей для более лаконичной записи, а в JS тоже самое с переменными. Например, если у вас есть фрагмент CSS: Читать далее HTML компрессор
Анимация в CSS
Анимация в CSS — очень интересная возможность для создания подвижных фрагментов на сайте. Двигать (а также менять цвет, размеры и т.д.) можно при помощи свойств начинающихся на animate-property, где вместо property подставляется одно из слов: name, duration, timing-function, iteration-count, direction, play-state, delay, fill-mode. Но можно записать сокращенный формат animation, описав все внутри. Почти как background. CSS анимация позволяет менять значения свойств, например можно изменить цвет элемента и поменять его расположение. Читать далее Анимация в CSS
Документация по CSS
Когда начинаем изучать HTML , документацию найти достаточно просто. А спецификация CSS разбита на модули. Один модуль — документ с самостоятельным описанием. Посвящены они работе с цветом фона элементов и бордюрами/рамками, шрифтом, медиа-запросами и т.д. Общий список модулей можно найти на странице текущей работы над CSS. Там же предлагается посетить страницу со списком CSS-свойств и быстрым переходом от свойства к странице спецификации нужного модуля.