HTML

HTML

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

Здравствуйте! Сегодня я хочу рассказать о том как сделать анимацию в SVG. Итак, мы уже многое знаем об SVG. Мы можем рисовать какие-то объекты в SVG, стилизовать их и писать текст, но есть ещё одна классная вещь - анимация. Вот о том, как анимировать SVG объекты, мы и поговорим в этой статье.

<svg>
  <rect x="0" y="0" width="150" height="150" fill="#0f0">
   <animate attributeName="width" from="0" to="150" dur="5s" />
  </rect>
</svg> 

Просмотреть  пример

Для анимации служит тег animate. Атрибут attributeName принимает название того атрибута, который мы будем анимировать, from и to, собственно, начальное и конечное значение, а в dur мы указываем сколько секунд будет длиться анимация.

Здравствуйте! Продолжаем изучать svg и сегодня мы узнаем, как стилизовать svg объекты с помощью CSS.

Стилизовать svg объекты через css мы можем так же, как и html элементы, но есть некоторые исключения. Например, чтобы задать фоновый цвет, используется свойство fill, а рамка задаётся с помощью свойства stroke. Все свойства вы можете посмотреть на сайте консорциума w3.org.

Как стилизовать SVG

Поздравляю всех с Новым Годом! А сегодня я пишу первую статью из серии, в которой мы узнаем, что такое SVG и как его использовать.

SVG(Scalable Vector Graphic) - это язык для описания двумерной графики, основанный на XML. Данная технология постепенно набирает обороты, а связано это вот с чем:

  • При изменении масштаба svg фигуры всегда перерисовываются, благодаря чему вы всегда будете видеть гладкое и красивое изображение без пикселизации
  • Браузеру не нужно запрашивать картинку у сервера, т.к. он сам её рисует, следовательно, производительность повышается
  • Можно стилизовать объекты с помощью CSS, как обычные html элементы, или с помощью JavaScript
  • Можно редактировать или анимировать с помощью CSS и JavaScript
  • Меньший размер

Что такое SVG

 

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

В вебе эта зависимость проявляется по-другому. Даже в этой среде нам нужно осуществлять коммуникацию с другими людьми, сообщая, что какое-то событие произошло в определенный момент времени, в определенную дату или относительно другого установленного времени. До появления HTML5 в нашем распоряжении не было элемента для семантической разметки даты или времени. За последние годы другие решения, наиболее известные из них – Microformats и Microdata – попытались восполнить отсутствие подобного элемента для определенных ситуаций (дата рождения, публикация книги и т.д.). В данной статье я собираюсь рассмотреть HTML5 элемент time, который помогает решить только что обозначенную проблему.

До появления стандарта HTML5 вся разметка страниц осуществлялась в основном за счет элементов <div>, которым присваивали классы class или идентификаторы id для структурирования и наглядности разметки. С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое. Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому.

Мета-теги располагаются в заголовке html-страницы, между тегами <head> и </head>, и никак не отображаются браузером (за исключением содержимого тега «title»). Тем не менее, мета-теги для сайта играют очень важную роль. Их добавление и оптимизация могут существенно помочь сайту в его жизни.

Элементы <span> и <div> используются для структурирования документа, часто совместно с атрибутами class и id. В этом уроке мы подробно рассмотрим, как использовать <span> и <div>, поскольку эти элементы HTML имеют важнейшее значение в CSS.

Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

Формы дают возможность пользователям вводить информацию. Вам наверно, не раз встречались всевозможные тесты, опросы, голосования. Для того, чтобы все это сделать на своих web-страницах и нужны формы. Здесь следует заметить, что html-формы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет (это все-таки язык разметки, а не программирования). Для обработки информации используются такие языки, как javascript, php и другие.

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

Страница 1 из 2