Порядок атрибутов в тегах

HTML

Форматирующие теги.

Откройте файл karkas.html (папка HTML) в Блокноте и сохраните его под именем index.html. При сохранении обязательно укажите кодировку utf-8 –универсальная кодировка.

Откройте файл ege.docx и скопируйте текст. Вставьте его в файл index.html между тегами <body></body>

Сохраните и посмотрите что получилось.

Тег <p>

Первый тег, который изучим <p> - позволяет задать абзац.

Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

<p>Текст</p>

Задание.

Вставьте тег <p> перед и после каждого абзаца.

Сохраните и посмотрите на результат.

Теперь каждый параграф стоит отдельно.

Теги <h1>…..</h6>

HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,...,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

<h1>Заголовок первого уровня</h1>

……………………………………

<h6>Заголовок шестого уровня</h6>

Расставьте заголовки (закрывающий тег обязателен) и посмотрите, что получилось.

Списки

1. Упорядоченный список – нумерованный список

Тег <ol> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>.

<ol> <li>элемент нумерованного списка</li> <li>элемент нумерованного списка</li></ol>

Атрибуты:

type - Устанавливает вид маркера списка.

start -Задаёт число, с которого будет начинаться нумерованный список.

Задание 1. Оформите первый список в виде нумерованного по образцу:

<ol> <li>Зайди на официальный сайт ЕГЭ — www.ege.ru</li> <li>Проверь свои знания по демонстрационным заданиям ЕГЭ</li> <li>Готовься к экзамену либо с 9 до 12 утра, либо с 15 до 18</li> </ol>

Маркированный список.

Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>.

<ul>

<li>элемент маркированного списка</li>

</ul>

Атрибут:

type - Устанавливает вид маркера списка.

Задание 2. Оформите второй список в виде маркированного по образцу:

<ul> <li>Чтобы отдача на экзамене была 100%-ной - снижай интенсивность подготовки</li> <li>Не пей алкоголь и энергетические напитки! Иначе головная боль и несобранность на экзамене будут тебе обеспечены.</li> <li>Выполняй упражнения аутогенной тренировки и дыхательной гимнастики! </li> <li>Постарайся больше времени проводить на свежем воздухе.</li> </ul>

Список определений

<dl><dt><dd>

<dl>

<dt>Термин 1</dt>

<dd>Определение термина 1</dd>

<dt>Термин 2</dt>

<dd>Определение термина 2</dd>

</dl>

Задание 3. Оформите третий список в виде списка определений по образцу:

<dl> <dt>Единый государственный экзамен</dt> <dd>Централизованно проводимый в РФ экзамен в средних учебных заведениях — школах, лицеях и гимназиях. Служит одновременно выпускным экзаменом из школы и вступительным экзаменом в вузы и ссузы.</dd> <dt>Государственная (итоговая) аттестация</dt> <dd>Основной обязательный вид экзамена в 9 классе средней школы в России. Служит для контроля знаний, полученных учащимися за 9 лет, а также для приёма в 10 класс или в учреждения среднего профессионального образования (колледжи и техникумы).</dd> </dl>

Задание 4. Сделать фон страницы. Для этого вставить в тег

Сохраните и посмотрите в браузере.

Атрибуты тега

У тега могут быть свойства, называемые атрибутами, дающие дополнительные возможности форматирования текста. Они записываются в виде пары имя-значение, причем нечисловое значение заключается в кавычки.

Порядок атрибутов в тегах

Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет.

Пример: <h1 align="center">

align - выравнивание, значения: left, center, right, justify (по ширине) Задание 1. Выровняйте все заголовки <h1>….<h5> по центру, по левому, по правому краю и по ширине с помощью атрибута align.

Задание 2. Для нумерованных списков примените различные виды нумерации.

1) Укажите тегу <ol> атрибут start="0" <ol start=”0”>….</ol>

2) Укажите тегу <ol> атрибут start="8" <ol start =”8”> ….</ol>

3) reversed - Нумерация в списке становится по убыванию (3,2,1).

Пример:

...

</ol>

4) Укажите тегу <ol> атрибут start="I" <ol type =”I”> ….</ol>

5) Укажите тегу <ol> атрибут start="I" <ol type =”A”> ….</ol>

6) Укажите тегу <ul> атрибут type="circle", затем type="square" и type="disc"

Пример:

……

</ul>

Посмотрите как поменялись маркеры.

Изображения

<img>

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.

Атрибуты

align Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.

alt Альтернативный текст для изображения.

border Толщина рамки вокруг изображения.

width Ширина изображения.

height Высота изображения.

hspace Горизонтальный отступ от изображения до окружающего контента. vspace Вертикальный отступ от изображения до окружающего контента.

src Путь к графическому файлу.

Задание 1. Вставьте 3 изображения.

Фото хранятся в папке photos под названием ege1.jpg, ege2.jpg, river.jpg.

Чтобы правильно определить размеры картинок, необходимо выделить картинку - контекстное меню – свойства – подробно - размеры в пикселях.

1) Расположить картинку ege1.jpg по центру, указать размеры картинки

2) Расположить картинку ege2.jpg справа от текста, сделать ее активной, т.е. сделать на картинку гиперссылку на предложенный сайт и задать параметры – горизонтальный и вертикальный отступы. Добавить рамку толщиной 8.

Пример:

</a>

3) Расположить картинку river.jpg слева (left) от текста, сделать ее активной на любой сайт, указать размеры картинки и задать параметры – горизонтальный и вертикальный отступы. Добавить рамку толщиной 0.

Посмотреть в браузере.

Ссылки

<a>

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. Устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Атрибуты

href Задает адрес документа, на который следует перейти.

target Имя окна или фрейма, куда браузер будет загружать документ.

title Добавляет всплывающую подсказку к тексту ссылки.

Ссылка на сайт

Вставьте ссылку на сайт www.ege.ru

Ссылка будет открываться в новом окне и при наведении мыши на ссылку будет появляться всплывающая подсказка.

Задание 1. Вставьте 3 ссылки на различные сайты.

Ссылка на документ

Наберите в конце текста абзац

<p Скачать эту статью в формате docx.

Вставим ссылку на документ, который хранится в папке files:

<p><a href="files/ege.docx">Скачать эту статью в формате docx.</a>

Задание 2. В папке files находится файл tab bezopas.docx.

Скачайте этот файл в формате docx.

Ссылка внутри документа

Наберите далее

<p> Перейти к началу статьи

В заголовке <h1> укажем идентификатор header1 следующим образом:

Затем пропишем ссылку:

<p><a href="#header1">Перейти к началу статьи</a>

В браузере при нажатии на ссылку будет осуществляться переход в начало страницы, на заголовок 1.

Задание 3. В заголовке <h2> укажите идентификатор header2 и пропишите ссылку на заголовок 2.

Соответственно сделайте в заголовке 3.

Порядок атрибутов в тегах

Поиск по сайту