Теги и атрибуты HTML

2

Posted by Виктория Павловна Дончик | Posted in Web-дизайн, Web-разработки, Интернет | Posted on 13-02-2015

Метки:

Теги и атрибуты HTMLУрок 2. Теги и атрибуты HTML

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

Прежде, чем разбирать атрибуты тегов, давайте ответим на вопросы: «Что такое HTML-теги? Как записываются HTML-теги? Какие HTML-теги бывают?»

  • HTML-теги – это метки, которые мы используем, чтобы показать браузеру, как отобразить данные на веб-страничке.
  • При записи теги обрамляем угловыми скобками, например <html>.
  • Теги бывают парные, например, <html> и </html>. Между парными тегам нужно размещать данные веб-страницы.
  • Есть теги одиночные, например, <br>. Одиночные теги текста не содержат.

В каком регистре писать теги? Как правильно <br> или <Br> или <BR>? HTML язык регистронезависимый, т.е. браузерам все равно в каком регистре написаны теги. Корректно писать все теги в нижнем регистре.

Чтобы расширить возможности форматирования, многие из тегов имеют атрибуты. Например,

  • <p align="center"> Весна идет … </p> Текст «Весна идет» будет расположен по центру, т.к. для тега абзаца <p> задан атрибут align="center".

Есть теги, которые нужно использовать только с атрибутами, например

  • <img src= "1.jpg">, иначе браузер не отобразит картинку.

Общий синтаксис тега с атрибутами такой:

<имя-тега атрибут1="значение1" атрибут2="значение2" ...>

 

Предлагаю ознакомиться с видеоматериалом "Теги и атрибуты" и выполнить Практикум:


Практикум.

Задание 1. Создать html-страничку pr2_fio_poet1.html. Написать стихотворение. Применить разные блочные теги форматирования.

Задание 2. Создать html-страничку pr2_fio_poet2.html. Написать стихотворение. Применить разные теги форматирования строчными элементами.

Задание 3. Найти в Интернете рецепт. Сделать скрин. Создать веб-страницу pr2_fio_recept.html по найденному примеру. Обязатльно использовать на html-странице картинку, текст, ненумерованный список, горизонтальную линию, заголовки разного уровня.

Повторим материал занятия "Теги и атрибуты HTML":

  • Перечислите и прокомментируйте теги верхнего уровня.
  • Как в html-документе сделать заголовок?
  • Сколько уровней заголовка определено в html?
  • Какие блочные элементы знаете?
  • Для чего служат строчные элементы?
  • Сравнить теги <p> и <br>
  • Сравнить блочные и строчные элементы.

 

Ответы на вопросы записать в конспект. Отчет по практикуму разместить в GD.

 

Кстати,

  •  При работе с тегами и атрибутами рекомендую использовать онлайн справочник http://htmlbook.ru/
  •  Потренироваться в использовании тегов и атрибутов можно на сайте: https://htmlacademy.ru

 

Кстати, на первом уроке "Введение в HTML" мы узнали что такое HTML, какая версия HTML используется сегодня и какую структуру имеют html-документы.

Следующий урок будет по спискам. Заходите и изучайте "Списки в HTML".

 

 

Comments (2)

очень хорошие у вас уроки, доступно в применении, будем пользоваться, спасибо!

Спасибо, Елена. Пользуйтесь на здоровье!
Виктория Павловна Дончик Как конвертировать презентацию в PDF-формат?My Profile

Write a comment