Контрольная 1. Основные тэги Базовые тэги, теги форматирования теста, таблицы, гиперссылки
Задание. Написать код странички, прописать метатеги согласно заданию. 2
Основные разделы html страницы <html> <head> </head> <body> </html> 3 Раздел для управляющих инструкций Тело странички, отображаемое браузером
Прописываем в разделе заголовка страницы (между <head> и </head>) метаинструкции <meta … /> и задаем название страницы <title></title> отображающееся в консоли браузера <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="статистика, аналитика, статистика туризма, статьи о путешествиях" /> <meta name="description" content="статистическая и аналитическая информация по туризму в России и Европе" /> <title>Контрольная гр. 930401</title> </head> <body> </html> 4
<title>Контрольная гр. 930401</title> 5
Заполняем тело странички (в разделе между <body> и </body>). Сначала пишем заголовок первого уровня h 1. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="статистика, аналитика, статистика туризма, статьи о путешествиях" /> <meta name="description" content="статистическая и аналитическая информация по туризму в России и Европе" /> <title>Контрольная гр. 930401</title> </head> <body> <h 1>Вариант № 1738</h 1> </body> </html> 6
<h 1>Вариант № 1738</h 1> 7
Задаем заголовку выравнивание по центру с помощью атрибута align и малиновый цвет #FF 00 FF с помощью атрибута style с описанием color. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="статистика, аналитика, статистика туризма, статьи о путешествиях" /> <meta name="description" content="статистическая и аналитическая информация по туризму в России и Европе" /> <title>Контрольная гр. 930401</title> </head> <body> <h 1 align="center" style="color: #FF 00 FF">Вариант № 1738</h 1> </body> </html> 8
<h 1 align="center" style="color: #FF 00 FF">Вариант № 1738</h 1> 9
Вставляем абзац (тэг p) текста после заголовка. Задаем ему выравнивание по ширине (значение justify атрибута align). Чтобы четыре слова в абзаце были жирными заключаем их в тэг <strong> </strong> <body> <h 1 align="center" style="color: #FF 00 FF">Вариант № 1738</h 1> <p align="justify">текст текст <strong> текст</strong> текст текст текст текст текст текст </p> </body> 10
<p align="justify">текст текст <strong> текст</strong> текст текст текст текст текст текст </p> 11
Начинаем построчно (тэг строки <tr></tr>) создавать таблицу (<table> </table>). Сначала пишем шапку, используя для ячеек тэги <th></th>. <body> <h 1 align="center" style="color: #FF 00 FF">Вариант № 1738</h 1> <p align="justify">текст текст <strong>текст текст</strong> текст текст текст текст текст текст </p> <table оставить место> <tr><th>Шапка 1</th><th>Шапка 2</th><th>Шапка 3</th></tr> </table> </body> 12
13
Задаем границу таблицы с помощью атрибута border толщиной в 1 пиксель и дописываем еще 3 строчки с обычными ячейками <td></td> текст текст текст </p> <table border="1"> <tr><th>Шапка 1</th><th>Шапка 2</th><th>Шапка 3</th></tr> <tr><td>ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td></tr> <tr><td>ячейка 4</td><td>ячейка 5</td><td>ячейка 6</td></tr> <tr><td>ячейка 7</td><td>ячейка 8</td><td>ячейка 9</td></tr> </table> 14
15
Добавляем абзац с выравниванием по правому краю (align="right"). Чтобы два слова текст были курсивом заключаем их в тег <em> </em> <tr><td>ячейка 7</td><td>ячейка 8</td><td>ячейка 9</td></tr> </table> <p align="right">текст <em>текст </em> текст текст текст текст текст текст текст текст </p> 16
<p align="right">текст <em>текст </em> текст текст текст текст текст текст текст текст </p> 17
Создаем гиперссылку с помощью тега <a>. Указываем обязательный атрибут href имя ресурса на который ссылаемся. Между меткой открытия контейнера <a> и закрытия </a> указываем, что у нас будет отображаться в браузере. Ссылка строчный элемент, поэтому заключаем ее в блочный элемент, например, абзац <p>. текст </p> <p><a href="page. html">ссылка на станицу page. html</a> </p> 18
19
Цвет гиперссылки можно задать с помощью атрибутов тега <body>. link – цвет еще ни разу не выбранной гиперссылки, vlink – цвет гиперссылки по которой уже переходили , alink – цвет во время нажатия на ссылку. Код <body link="#009900"> <h 1 align="center" style="color: #FF 00 FF">Вариант № 1738</h 1> <p align="justify">текст ……………. . текст текст текст</p> <p><a href="page. html">ссылка на станицу page. html</a> </p> 20 Как будет отображаться
Создаем нумерованный список (тэг <ol>). Между меткой открытия контейнера <ol> и закрытия </ol> указываем, элементы списка в контейнерах <li> </li>. <p><a href="page. html">ссылка на станицу page. html</a> </p> <ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> <li>элемент 4</li> </ol> 21
22
По умолчанию нумерованный список в большинстве браузеров отображается под арабскими цифрами. Если нам нужен другой тип нумерации, то его необходимо задать с помощью атрибута type. Код Как будет отображаться <ol type="a"> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> <li>элемент 4</li> </ol> a. элемент 1 b. элемент 2 c. элемент 3 d. элемент 4 23
Код Как будет отображаться <ol type= "A"> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> <li>элемент 4</li> </ol> A. B. C. D. 24 элемент 1 элемент 2 элемент 3 элемент 4
Код <ol type="I"> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> <li>элемент 4</li> </ol> 25 Как будет отображаться I. III. IV. элемент 1 элемент 2 элемент 3 элемент 4
Код <ol type="i"> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> <li>элемент 4</li> </ol> 26 Как будет отображаться i. iii. iv. элемент 1 элемент 2 элемент 3 элемент 4
Если нам надо чтобы нумерация списка начиналась не с первого элемента, то задаем с помощью атрибута start начало нумерации. Начало нумерации независимо от типа нумерации списка (1, A, a, I, i) задается арабской цифрой. Код <ol type="i" start ="4" > <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> <li>элемент 4</li> </ol> 27 Как будет отображаться iv. v. vii. элемент 1 элемент 2 элемент 3 элемент 4
Маркированный список задается с помощью тэга <ul>. Тип маркера, можно задать с помощью атрибута type. Тип может быть кружками circle, дисками disc, закрашенными квадратиками square. Код Как будет отображаться <ul type="disc"> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> <li>элемент 4</li> </ul> • элемент 1 • элемент 2 • элемент 3 • элемент 4 28
Не забываем закрыть теги </body> </html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="статистика, аналитика, статистика туризма, статьи о путешествиях" /> <meta name="description" content="статистическая и аналитическая информация по туризму в России и Европе" /> <title>Контрольная гр. 930401</title> </head> <body link="#009900"> <h 1 align="center" style="color: #FF 00 FF">Вариант № 1738</h 1> ………………………………………………………. <li>элемент 3</li> <li>элемент 4</li> </ul> </body> </html> 29
Для тренировки напишите код представленной странички самостоятельно. 30
Скачать презентацию Контрольная 1 Основные тэги Базовые тэги теги форматирования
Контрольная 1.ppt