Уроки HTML

Уроки по HTML предназначены для новичков в вебмастеринге. Также для тех, кто ищет в сети интернет различные уроки по html. Возможно вы также являетесь одним из них, и возможно вы станете нашим постоянным посетителем. На освение HTML5 у вас уйдет не очень много времени после чего необходимо практиковаться и переходить к урокам по css и урокам по Javascript

Как создать анимацию SVG

Здравствуйте! Сегодня я хочу рассказать о том как сделать анимацию в SVG. Вы уже многое знаете об 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 и из этой статьи вы узнаете  как стилизовать svg с помощью стилей.

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

как задать стили для svg

 

Читать далее »

Что такое SVG

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

SVG — это  специальный язык для описания 2-ой графики, в основе которого лежит  XML. Эта технология очень быстро набирает обороты, и связано это вот с такими факторами:

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

 

Что такое svg

Читать далее »

Семантические элементы в HTML5.

  Здравствуйте!  В этой статье разговор пойдет о семантических элементах в HTML5. Эти элементы помогают веб-разработчику  разметить страницу на основные части и также поисковику будет легче  распознавать  отдельные части страницы. До  HTML5 в разметке страниц  использовался тег  <div>, которому присваивали классы  или реже  идентификаторы id для структурирования и организации разметки страницы.

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

Семантические элементы HTML5

Читать далее »

Метатеги для сайта

Здравствуйте! В этой статье я расскажу о мета-тегах для сайта. Собственно мета-теги размещаются в верхней части веб-страницы, как правило между тегами <head> и </head>, и браузер их не отображает (кроме тега «title»).  Но нужны мета-теги в  первую очередь  для роботов  поисковых системах (о том что такое seo я писал в этой статье) именно их распознают роботы поисковых систем.

Метатеги для сайта

Читать далее »

Как добавить форму на сайт

Здравствуйте! В этом уроке поговорим о формах и о том как добавить форму на сайт. Формы предназначены для ввода информации пользователями. Это и формы регистрации и различные тесты, опросы и прочие формы.

Для всего этого и предназначены HTML-формы. И сейчас мы рассмотрим как создать форму и  из каких полей состоят HTML-формы. Также следует отметить что HTML позволяет только создать форму а вот обрабатывать данные  формы язык HTML  не умеет для этого используются такие языки как JavaScript( про него читайте здесь), php и др.

как добавить форму на сайт
Читать далее »

Как вставить ссылку на сайт

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

Самое главное, чтобы документ на который ведет ссылка существовал и к нему был открыт доступ иначе ничего не получится.

Как вставить ссылку на сайт
Читать далее »

Как вставить видео на сайт

Здравствуйте!  В этом уроке разберем как вставить видео на сайт.  Существуют 2 способа вставки видео на сайт. Это используя сервис видеохостинга как например ютуб, рутуб и им подобные, а второй используя тег video, который появился в HTML5.
Самый простой  это конечно же первый способ.  Если вы хотите  загрузить видео  с видеосервиса  то вам придется  выполнить 3 пункта:
1.  Сперва надо зарегистрироваться на видеосервисе (Например: Youtube)
2. После регистрации вы сможете  загрузить видео
3. Остается получить код видео и собственно вставить его на свой сайт

как вставить видео на сайт

Читать далее »

Как добавить картинку на сайт

Здравствуйте!  В этом уроке я расскажу о том как добавить картинку на сайт.  Сам процесс добавления изображений на сайт как бы происходит в 2 этапа. Сначала в любом редакторе для работы с изображениями (кстати вот вам уроки по Фотошопу) подготавливается изображение, а затем оно размещается на веб-странице с помощью тега <img>.

При подготовке и размещении изображений вам следует учитывать такие моменты:

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

как добавить картинку на сайт

Читать далее »

Как добавить таблицу на сайт

Здравствуйте! В этой статье рассмотрим как добавить таблицу на сайт.  На заре веба где то в годах 90-х  20 столетия таблицы использовались для верстки сайтов. Надо сказать, что тогда сайты были еще не настолько переполнены различными элементами и были внешне простыми. Поэтому тогда казалось что нет ничего более простого чем  верстка сайтов на основе таблиц.

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

Как добавить таблицу на сайт
Читать далее »

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: