Обучаемся.com

Руководство по компьютеру, работа с Windows, разработка и продвижение сайтов…

Автор:

Внешние объекты в html, Занятие 10

Сегодня мы поговорим с вами о возможности вставлять в html документ внешние элементы такие, как флеш, аудио и видео, а также научимся задавать нашему браузеру favicon, это такое маленькое изображение рядом с title во вкладке браузера.

Вставка флеш элемента в html

Для вставки внешних элементов существует парный тег object, он говорит браузеру, вот в этом месте будет такой-то документ с такими-то атрибутами и значениями.

<object type=“application/x-shockwave-flash”
data=“film.swf”
width=“300” height=“200”>
<param name=“quality” value=“high” />
<param name=“scale” value=“exactfit” />
</object>

Это простой пример вставки флеш ролика, но вы заметили много непонятных вам тегов и атрибутов, давайте обо всем по порядку. Подробнее >>

Автор:

Псевдоклассы и псевдоэлементы, практическая верстка, Занятие 9

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

Видео пояснение псевдокласс и псевдоэлемент

Подробнее >>

Автор:

Создание веб форм, Занятие 8

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

Первый элемент, парный тег, который указывает браузеру на дальнейшее использование форм и пишется он вот так:

<form>
Элементы формы
</form>

Это основной элемент имеющий один обязательный атрибут и несколько не обязательных. Обязательным атрибутом есть:

  • action=“http://site.ru/handler/” (обязательный)
  • method=“GET”
  • enctype=“application/x-www-form-urlencoded”
  • target=“_blank”

В атрибуте action указываем, куда отправляются данные с нашей формы, другими словами указываем адрес обработчика. Атрибут method указывает каким методом можно отправить форму, их есть два get и post. От методов зависит то, где будут передаваться данные. Атрибут enctype говорит, что за данные отправляются. Ну и target, который говорит, что после отправленной формы откроется новое какое-то окно. Подробнее >>

Автор:

Применение js на простом примере, Занятие 7/2

Как я и говорил в первой части седьмого занятия, мы подключим с вами нашему документу javascript и с его помощью сделаем примитивное слайдшоу. Расписывать весь процесс у меня ушло бы очень много времени и с целью его экономии, а также доступности повторения я записал видео ролик, где все подробно разъяснил и показал на примере.

Этапы правильного использования js у себя в документе

  1. Внимательно просмотреть код оригинала/примера с которым будем работать
  2. Разобраться, что подключается в служебном теге head
  3. Посмотреть стили, не потеряются ли пути заданные там
  4. Переносить все с примера с пониманием для чего оно нужно
  5. Проверять себя на каждом этапе переноса и сохранения кода
  6. Убедиться, что все работает и наслаждаться своими способностями

Подробнее >>

Автор:

Свойства box-sizing, visibility, hidden, Занятие 7/1

Хочу еще обратить ваше внимание на такие моменты, которые возникают при работе с margin или padding при работе с вложенными элементами. Итак разберем две ситуации, когда вложенные элементы имеют width: auto и 100%.

Если ширина вложенного элемента задана auto (значение по умолчанию), тогда при заданном margin либо padding сожмется сам вложенный элемент на размер заданные этими свойствами. Но если ширина задана 100%, то произойдет выползание области элемента за родителя, а это весьма неприятная ситуация.Ширина элемента и отступы

Из-за такой особенности было внедрено еще одно свойство box-sizing: border-box | content-box (значение по умолчанию). Подробнее >>

Автор:

Работа с элементами margin, padding, border, Занятие 6

Мы уже знаем, что страница html документа состоит с элементов. Каждый элемент имеет в себе какое-то содержание. Каждый элемент имеет свою границу, по умолчанию эта граница не видимая для пользователя. Также элементы могут иметь внутренний отступ и внешний.

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

Границы элементов

Разберем значение границы области любого с элементов на странице, которое задается свойством border и должно в себе содержать три значения:

  • величина — px или %
  • тип — none | solid | dotted | dashed | double | groove | ridge | inset | outset
  • цвет — любой цвет

Все это записывается одной строкой вот такого вида border: 1px solid black; здесь мы указали рамку вокруг элемента в 1 пиксель, задали ей тип сплошной линии и черный цвет. Подробнее >>

Автор:

Верстка простого сайта на практике, Занятие 5

Сегодня мы вместо обычного обучения новых элементов и свойств html верстки, попробуем с вами вместе сверстать простой макет страницы сайта. Я посмотрел в сети примеры psd макетов и нашел один очень простой и как раз для нашего уровня знаний. Вот его скриншот, а наша задача сверстать все в html и css.Шаблон сайта для верстки Подробнее >>