7 янв. 2015 г.

HTML: практика

Скопируйте файл test.html и вставьте копию рядом. Название будет, к примеру button-test.html. Впишите в него этот короткий HTML-код:


<button style="color: red">Test</button>
<!-- текст кнопки будет красным -->


Сохраните файл и посмотрите в браузере что получается.

Потом попробуйте поочередно другие свойства стилей: font-size: 30px (размер шрифта) и margin: 30px (внешние отступы). Размеры указываются в пикселях (px). Пикслель — это точка экрана. После каждого изменения сохраняйте файл, а в браузере обновляйте страницу.

Затем напишите в button-test.html все эти стили сразу (когда CSS-свойств несколько, разделяем их точкой с запятой ;):

 <button style="color: red; font-size: 30px; margin: 30px">Test</button>

Стили могут назначаться элементам и другими способами, но через style это выглядит понятнее. В дальнейшем мы будем менять CSS из программы.

Вообще в теги с помощью различных свойств (атрибутов) можно добавлять различные настройки и параметры. Их можно добавлять много и в любых сочетаниях.

Посмотрим это на практике. Создайте новый файл с именем tag-test.html и вставьте в него HTML-код:
<a>Test</a>
Сохраните и посмотрите что получится в браузере. Пока ничего интересного.

Добавьте свойство стилей style=" ":
<a style="color: red; font-size: 30px">Test</a>
Посмотрите в браузере что изменилось.

Добавьте свойство адреса href=" ":
<a href="http://yandex.ru" style="color: red; font-size: 30px">Test</a>
Посмотрите в браузере: добавилось подчеркивание — теперь это не просто красный текст, а ссылка на главную страницу Яндекса.

Теперь добавим к этому элементу свойство onmouseover, пусть при наведении мышкой появится сообщение “123”:
<a href="http://yandex.ru" style="color: red; font-size: 30px" onmouseover="alert('123');">Test</a>

Проверьте, что получилось. Обратите внимание, как использованы двойные и одинарные кавычки, когда одни вложены в другие:
onmouseover="alert('123');"
Если везде вставить только двойные кавычки (или только одинарные), компьютер не сможет понять, какие кавычки к чему относятся и будет ошибка.

Следующий урок >>

4 комментария:

  1. По кавычкам и точке с запятой - понятно. А пробелы имеют какое-то значение? Вот здесь, например:
    <button style="color: red; font-size: 30px;
    Экспериментально поняла, что не имеют значения. Но на всякий случай, уточняю).
    В остальном - все понятно, спасибо).

    ОтветитьУдалить
  2. Когда у меня появилось сообщение "123", я попробовал нажать на "Тest", у меня ничего не вышло. Потом запретил показывать уведомления на этой станице, и снова попробовал нажать на "Test", перешел на яндекс. Это нормально?

    ОтветитьУдалить
    Ответы
    1. Извините за задержку с ответом: все нормально
      1) при наведении курсора на ссылку запускается js-код (alert(123))
      дело в том, что появляющиеся алерты (уведомления, всплывающие окошки) блокируют страницу.
      2) при запрете уведомлений ничего не блокирует страницу и происходит переход по ссылке

      Удалить