Изображения и объект 1 страница

Формы

Подстановки

Атрибуты

Краткие теоретические и учебно-методические материалы по теме практической работы

HTML-файл содержит один тип управляющих конструкций - теги (tags).

тег — единица разметки;

элемент — составная часть документа.

Назначение тегов:

- разделяютисходный неформатированный текст документа на элементы;

- создаютновые элементы, которым ничего не соответствовало в тексте (например, графические вставки или Java-апплеты).

Виды тегов:

- парные, охватывающие какой-то фрагмент текста и/или другие теги,

<парный-тег>текст или другие теги</парный-тег>

Парные теги должны вкладываться друг в друга без пересе­чений, т. е. если в области действия тега А открылся тег В, он должен закрыться до того, как закроется тег А.

<A> <B> </B> </A>

- непарные, стоящие в одиночестве:

<непарный-тег>

Многие теги, как парные, так и непарные, имеют атрибуты, изменяющие и уточняющие действие тега:

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

Регистр букв в идентификаторах тегов и атрибутов (но не в значениях атрибутов) не учитывается. Пары атрибут="значение" распознаются как таковые только внутри угловых скобок тега и отделяются друг от друга пробелами.

Чтобы ввести в документ символы, от­сутствующие на клавиатуре или же имеющие в синтаксисе HTML специальное значение, употребляются подстановки двух видов:

1. мнемонические - имеют вид

& мнемонический код;

например:

&egrave; для ё
&lt; для <

&nbsp; для символа неразрываемого пробела

2. числовые – имеют вид

& # десятичный числовой код;

например:

&#1б0; для символа неразрываемого пробела

Ссылки и привязки

тег А

Любая ссылка в HTML имеет два обязатель­ных элемента:

источник - то изображение или фрагмент, который заключен между <А> и </А> и щелчок по которо­му активизирует ссылку;

пункт назначения - URL-адрес документа, на который ведет ссылка.

Адрес назначения может указывать не только на весь документ в целом, но и на какое-то место (точнее, опять-таки, какой-то элемент) внутри документа, в том числе и внутри самого документа со ссылкой. Для этого пункт назначения должен быть помечен с помощью атрибута name тега А создателем того документа, на который делается ссылка. В свою очередь, в теге А в документе-источнике эта метка приписывается к адресу назначения через символ #.

тег FORM

Формы (forms), или бланки, предназначены для «обратной связи», т.е. отсылки информации от пользователя обратно на сервер. Набор органов управления HTML-бланков соответ­ствует возможностям современных графических операци­онных систем и включает в себя поля для ввода текста (однострочные и многострочные), флажки, переключатели, выпадающие списки, списки с прокруткой и кнопки.

Тег FORM, объединяет группу связанных по смы­слу элементов и указывает адрес той программы на сервере, которой будут посланы введенные пользователем данные из всех элементов формы. HTML-страница может содержать любое количество независимых друг от друга форм, в каждой из которых должна присутствовать «пуско­вая кнопка», отправляющая данные на сервер. Кнопке этой не обязательно быть стандартной интерфейсной кнопкой, в этой же роли может использоваться изображение, а для простых форм, состоящих из одного поля ввода или выпа­дающего списка, посылка данных может активизироваться нажатием Enter в поле ввода или операцией выбора элемента в списке.

Тег IMG

Тег IMG, предназначенный длявставки изображений, относится к тегам, создающим но­вые элементы документа, отсутствовавшие в исходном тексте. Тег этот ссылается на хранящееся в отдельном файле изображение в формате GIF или JPEG; этот графический файл может располагаться там же, где и HTML-файл страницы (в таком случае в атрибуте src достаточно указать имя файла), а может лежать и в дру­гом каталоге и даже на другом сервере (в этом случае нужно указывать полный URL-адрес). Большинство атри­бутов этого тега управляют форматированием изображения, устанавливая его размеры, поля, выравнивание и проч.

Таблицы

Тег TABLE

Тег TABLE чаще используется для визуального форматирования страницы, чем для представления табличного по своей природе материала.

Используются атрибуты height, width, cellspacing, cellpadding, border для форматирования внешнего вида таблицы.

Задания для практического занятия:

1. Определите, с какого тега начинается HTML-код web-страницы, запишите его. Является ли он парным тегом?

2. Запишите все парные и непарные теги, имеющиеся в примере, что они означают.

3. Найдите и запишите все ссылки, имеющиеся в примере, подчеркните путь назначения ссылки.

4.Найдите и запишите 3 примера тегов с атрибутами.

5. Найдите все вставленные в web-страницуизображения.Запишите их код.

6. Имеются ли в коде примера формы? Если есть запишите его код.

7. Имеется ли в коде примера подстановки? Какие? Запишите их все. Что они обозначают?

8. Найдите и запишите коды всех имеющихся таблиц. Подчеркните атрибут border. Что он означает?

9. Имеются ли в коде каскадные таблицы стилей? Запишите их код.

Вариант 1

<html>

<head>

<title>Задания В8</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<link rel="stylesheet" href="images/style.css" type="text/css" />

<style type="text/css">

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #F8F4F1;

}

a:link {

color: #000000;}

a:visited {

color: #111333;

}

</style>

</head>

<body>

<div id="wrap">

<div id="header-top"></div>

<div id="header-main">

<h1 id="logo-text">Учебный центр "Логарифм Плюс"</h1>

<h2 id="logo-slogan">тел. [phone]</h2>

</div>

<div id="nav">

<div id="nav-bar">

<ul>

<li><a href=index.html>Главная</a></li>

<li><a href=about_center.html>О центре</a></li>

<li id="selected"><a href=math.html>Математика</a></li>

<li><a href=phys.html>Физика</a></li>

<li><a href=teacher.html>Преподаватели</a></li>

<li><a href=price.html>Цены</a></li>

<li><a href=visitor.html>Контакты</a></li>

</ul>

</div>

</div>

<div id="content-wrap">

<div id="sidebar">

<h1>Часть II</h1>

<div class="left-box">

<ul class="sidemenu">

<li><a href="pdf_fales/c3.pdf">Задания С3</a></li>

<li><a href="pdf_fales/c2.pdf">Задания С2</a></li>

<li><a href="pdf_fales/c1.doc">Задания С1</a></li>

</ul>

</div>

<h1>Часть I</h1>

<div class="left-box">

<ul class="sidemenu">

<li><a href=B12.html>Задание 12</a></li>

<li><a href=B11.html>Задание 11</a></li>

<li><a href=B10.html>Задание 10</a></li>

<li><a href=B9.html>Задание 9</a></li>

<li><a href=B8.html>Задание 8</a></li>

<li><a href=B7.html>Задание 7</a></li>

<li><a href=B6.html>Задание 6</a></li>

<li><a href=B5.html>Задание 5</a></li>

<li><a href=B4.html>Задание 4</a></li>

<li><a href=B3.html>Задание 3</a></li>

<li><a href=B2.html>Задание 2</a></li>

<li><a href=B1.html>Задание 1</a></li>

</ul>

</div>

</div>

<div id="content">

<h1>ЕГЭ. Математика</h1>

<p><b>Задание В8</b> </p>

<p><b>Пример 1</b> (МИОО-2010). На рисунке изображен график производной функции f(x), определенной на интервале (-11, 11).

Найдите количество точек экстремума функции f(x) на отрезке [-10; 10].</p>

<img src="images/B8.jpg">

<p><b>Решение.</b> Для ответа на вопрос, используем необходимый признак экстемума: если в точке

<img src="images/B8_2.jpg"> функция f(x) достигает экстремума, то ее производная f'(x) в этой точке либо равна 0,

либо не существует. Производная обращается в ноль в точках пересечения с осью Ох.

<br>На отрезке [-10; 10] таких

точек 5.

<br><b>Ответ:</b> 5.

</p>

<p><b>Пример 2</b> (МИОО-2011). Прямая y = 3x + 4 является касательной к графику функции <img src="images/B8_1.jpg">.

Найдите c.</p>

<p><b>Решение.</b> По условию задачи касательной к графику функции является прямая y = 3x + 4.

Угловой коэфициент этой прямой k = f'(x) = 3.

Уравнение касательной к графику функции f(x) в точке (<img src="images/B8_3.jpg">)

имеет вид: <img src="images/B8_4.jpg">.

Найдем производную функции: f'(x) = 6x - 3.

<br>В точке <img src="images/B8_2.jpg"> производная функции должна быть равна 3:

<br>6х - 3 = 3.

<br><img src="images/B8_2.jpg"> = 1.

<br><img src="images/B8_5.jpg"> = 3∙1 + 4 = 7.

<br>Точка касания имеет координаты (3,7), эта точка принадлежит графику заданной фунции <img src="images/B8_1.jpg">.

<br>f(3) = 3∙1 - 3∙1 + c = 7.

<br>c = 7.

<br><b>Ответ:</b> 7

</br></p>

<p> <a href="pdf_fales/b8.doc">МИОО. Прототипы задания В8</a>

</p>

</div>

</div>

<div id="footer">

<div align="center">&copy; 2010. Учебный центр "Логарифм Плюс"</a>

</div>

<p><font color="#FF00FF">Пример:</font></p>

<table width="100%" border="1" bordercolor="#0000ff">

<tr>

<td width="50%" valign="top">

<p><strong>HTML-код:</strong></p><br>

<p><div align="left" style="font-size:8pt">&lt;table border="1" width="200"></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&lt;tr></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&nbsp;&lt;td>&lt;p>Ширина 200 пикселей&lt;/p>&lt;/td></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&lt;/tr></div></p>

<p><div align="left" style="font-size:8pt">&lt;/table></div></p>

<p><div align="left" style="font-size:8pt">&lt;br></div></p>

<p><div align="left" style="font-size:8pt">&lt;table border="1" width="60%"></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&lt;tr></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&nbsp;&lt;td>&lt;p>Ширина 60%&lt;/p>&lt;/td></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&lt;/tr></div></p>

<p><div align="left" style="font-size:8pt">&lt;/table></div></p>

</td>

<td width="50%" valign="top">

<p><strong>Отображение в браузере:</strong></p><br>

<table border="1" width="200">

<tr>

<td><p>Ширина 200 пикселей</p></td>

</tr>

</table>

<br>

<table border="1" width="60%">

<tr>

<td> <form>

<h3> Горизонтальная линия</h3>

Введите тему сообщения:<br /><input name="name" size="30" type="text" />

<hr />

Введите текст самого сообщения:<br /><textarea cols="40" rows="6"></textarea>

<hr />

Укажите почтовый адрес:<br />nic <input name="nic" size="10" type="text" /> <select name="mail"><option value="1">@mail.ru</option><option value="2">@rambler.ru</option><option value="3">@yandex.ru</option><option value="4">@tolpa.net</option><option value="5">@narod.ru</option><option value="6">@anekdotov.net</option></select>

<hr />

Введите пароль:<br /><input name="psw" type="Password" />

<hr />

<input type="Submit" value="Отправить" /> <input type="Reset" value="Сброс" /></form> </td>

</tr>

</table>

</td>

</tr></table>

</body>

</html>

Вариант 2

<html>

<head>

<title>Учебник HTML: таблицы html страницы: задание цвета таблицы, графический фон</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<link rel="stylesheet" href="../style.css" type="text/css">

</head>

<body>

<table cellspacing="0" cellpadding="0" border="0">

<tr>

<td rowspan="2" bgcolor="#F0E1C8" width="150" height="150"><img src="../sova.jpg" alt="Обучение HTML, Excel, Word. Как сделать свой сайт бесплатно" border="0"></td>

<td height="120" valign="middle" align="center">

<table cellspacing="2" cellpadding="2" border="0" width="100%">

<tr>

<td><p><strong>Microsoft Office</strong></p></td>

<td><p><strong>Сайтостроение</strong></p></td>

<td><p><strong>HTML</strong></p></td>

<td><p><strong>Программинг</strong></p></td>

<td><p><strong>Компьютер</strong></p></td>

<td><p><strong>Графика</strong></p></td>

<td><p><strong>Разное</strong></p></td>

</tr>

<tr>

<td valign="top">

&middot; <a href="http://on-line-teaching.com/word/index.html">Основы Word</a><br>

</td>

<td valign="top">

&middot; <a href="http://on-line-teaching.com/site/index.html">Как сделать сайт</a><br>

</td>

<td valign="top">

&middot; <a href="http://on-line-teaching.com/html/index.html">Основы HTML</a><br>

</td>

<td valign="top">

&middot; <a href="http://on-line-teaching.com/php/index.html">Основы PHP</a><br>

</td>

<td valign="top">

&middot; <a href="http://on-line-teaching.com/IBM-computer/index.html">Что внутри ПК</a><br>

&middot; <a href="http://on-line-teaching.com/IBM-PC/index.html">ПК для чайников</a><br>

</td>

<td valign="top">

<!--

&middot; CorelDraw<br>

&middot; Corel Photo-Paint<br>

-->

&middot; <a href="http://on-line-teaching.com/graphika/index.html">Web-графика</a><br>

&middot; <a href="http://on-line-teaching.com/autocad/index.html">САПР: AutoCAD</a><br>

</td>

<td valign="top">

&middot; <a href="http://on-line-teaching.com/art/index.html">Статьи</a><br>

</td>

</tr>

</table>

</td>

</tr>

</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#B8984B">

<tr>

<td width="20%" align="left">

<a href="../index.html"><img src="../images/h_home.gif" alt="Главная страница" width="17" height="17" border="0"></a>

<a href="../sitemap.html"><img src="../images/h_map.gif" alt="Карта сайта" width="17" height="17" border="0"></a>

</td>

<td width="80%">

<p class="nav"><a class="a4" title="На главную страницу" href="../index.html">HTML, Excel, Word, SEO</a>&nbsp;<img src="../img/line6.gif" alt="" width="11" height="10" border="0">&nbsp; <a class="a4" href="index.html">Основы Html</a><img src="../img/line6.gif" alt="" width="11" height="10" border="0">&nbsp; Таблицы html</p>

</td>

</tr>

</table>

<table width="100%" border="1" bordercolor="#897132" align="center" cellpadding="0" cellspacing="0">

<tr>

<td width="18%" valign="top" bgcolor="#DCB464">

<table width="100%" cellpadding="0" cellspacing="0">

<tr><td><h3 align="center">Основы HTML</h3></td></tr>

<tr><td align="center"><a class="a" href="books.html">Книги по HTML</a></td></tr>

<tr><td><img src="../images/blankbutton.jpg" alt="" width="156" height="10" border="0"> </td></tr>

<tr><td><a class="a2" href="../html-tag/index.html">&nbsp;&nbsp;<font color="#000080">Справочник HTML-тегов</font></a></td></tr>

<tr><td><a class="a2" href="../templates/index.html">&nbsp;&nbsp;<font color="#008000">Шаблоны для сайтов</font></a></td></tr>

<tr><td> <form>

<h4>Как будете расплачиваться?</h4>

<table border="1" cellspacing="0" bordercolor="#cceeee">

<tbody>

<tr>

<td><input name="pay" type="radio" value="cahs" />Наличными</td>

</tr>

<tr>

<td><input name="pay" type="radio" value="check" />Чеком</td>

</tr>

<tr>

<td><input name="pay" type="radio" value="debit" />Дебитной картой</td>

</tr>

<tr>

<td><dl><dt> Кредитной карточкой</dt><dd><input name="pay" type="radio" value="mc" />MasterCard</dd><dd><input name="pay" type="radio" value="visa" />Visa</dd><dd><input name="pay" type="radio" value="dick" />Discovery</dd><dd><input name="pay" type="radio" value="ae" />American Express</dd></dl></td>

</tr>

</tbody>

</table>

<p><input type="submit" value="Отправить" /> <input type="Reset" /></p>

</form></td></tr>

<tr><td><img src="../images/blankbutton.jpg" alt="" width="156" height="10" border="0"> </td></tr>

<tr><td>&nbsp;</td></tr>

<tr><td>

<div align="center"><a href="../art/art18.html">

<img src="../img/submit.jpg" alt="Сабмит сайта в каталоги" width="240" height="172" border="0"></a>

</div>

</td></tr>

<tr><td>

<p class="topic2"> Здесь. Разные продукты от Microsoft - <a href="http://www.winblog.ru/win7/" target="_blank" class="a3">Windows 7</a> Server 2008 и другие. Бесплатно. </p>

<hr>

<br>

<!-- on-line-teaching.com разместите на месте показа блока -->

<div id="mix_block_12949321151294933089"></div>

<br>

<!-- on-line-teaching.com разместите на месте показа блока -->

<div id="mix_block_12949321151294932475"></div>

<br>

</td></tr>

</table>

<index></td>

<td width="64%" valign="top">

<br>

<p class="nav"><a class="a5" href="lsn013.html">&laquo;создание таблиц</a>

&nbsp;||&nbsp;

<a class="a5" href="index.html">язык HTML</a>

&nbsp;||&nbsp;

<a class="a5" href="lsn015.html">вид таблиц&raquo;</a></p>

<h1>Таблицы html страницы (ч.2)</h1>

<p><a class="a1" href="#1">Задание цвета элементов таблицы</a></p>

<p><a class="a1" href="#2">Графический фон таблицы</a></p>

<p><a class="a1" href="#3">Выравнивание данных в таблице</a></p>

<p><a class="a1" href="#4">Изменение размеров таблицы</a></p>

<a name="1"></a><h3>Задание цвета элементов таблицы html страницы</h3>

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

<p>Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.</p>

<p><font color="#FF00FF">Пример:</font></p>

<table width="100%" border="1" bordercolor="#0000ff">

<tr>

<td width="50%" valign="top">

<p><strong>HTML-код:</strong></p><br>

<p><div align="left" style="font-size:8pt">&nbsp;&nbsp;&lt;td>1&lt;/td></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&nbsp;&lt;td>2&lt;/td></div></p>

</td>

<td width="50%" valign="top">

<p><strong>Отображение в браузере:</strong></p><br>

<table border="1">

<tr bgcolor="#ff00ff">

<td>1</td>

<td>2</td>

</tr>

<tr bgcolor="#5555ff">

<td>3</td>

<td>4</td>

</tr>

</table>

</td>

</tr></table>

<a name="3"></a><h3>Выравнивание данных в таблице html страницы</h3>

<p>Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.</p>

<p>Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево.</p>

<p>Атрибут VALIGN выравнивает данные по вертикали. По умолчанию информация выравнивается посередине.

Средствами выравнивания можно пользоваться в отдельной ячейке, строке, группе столбцов, группе строк. Самым высоким приоритетом обладает атрибут выравнивания в ячейках таблицы.</p>

<p>Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.</p>

<p><font color="#FF00FF">Пример:</font></p>

<table width="100%" border="1" bordercolor="#0000ff">

<tr>

<td width="50%" valign="top">

<p><strong>HTML-код:</strong></p><br>

<p><div align="left" style="font-size:8pt">&lt;table border="1" cellpadding="5"></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&lt;tr></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&nbsp;&lt;td align="right">1111&lt;br>2222&lt;/td></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&nbsp;&lt;td valign="top" align="center">22222&lt;/td></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&lt;/tr></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&lt;tr></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&nbsp;&lt;td>Нижняя ячейка&lt;/td></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&nbsp;&lt;td>Нижняя ячейка&lt;/td></div></p>

<p><div align="left" style="font-size:8pt">&nbsp;&lt;/tr></div></p>

<p><div align="left" style="font-size:8pt">&lt;/table></div></p>

Дата добавления: 2014-12-24