Уроки 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 и др.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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