Д/з по информатике для 10 класса
advertisement
Струкова Наталья Федоровна, учитель математики и информатики высшей квалификационной категории. МБОУ «СОШ №13», г. Златоуст, Челябинская обл. Структура WEB-страницы Большая часть тегов образует контейнер, состоящий из открывающего и закрывающего тегов. Теги можно набирать заглавными буквами, так и строчными. Структурные элементы Название контейнера WEB-страница <HTML>…</HTML> Заголовок страницы <HEAD></HEAD> Название страницы <TITLE></TITLE> Содержание WEBстраницы <BODY></BODY> Практическое задание 1 1. Запустить текстовый редактор Блокнот 2. Ввести HTML код страницы. <HTML> <HEAD> <TITLE>Первое знакомство с тегами HTML</TITLE> </HEAD> <BODY> …………………. </BODY> </HTML> 3. Ввести команду [Файл - сохранить]. Файлу присвоить имя index.htm 4. Запустить браузер и открыть созданный файл . В заголовке окна браузера высвечивается название Web страницы. Заголовки <center><H1>Заголовок первого уровня</H1></center> (заголовок располагается по центру) <H2>Заголовок первого уровня</H2> <H3>Заголовок первого уровня</H3> <H4>Заголовок первого уровня</H4> <H5>Заголовок первого уровня</H5> <H6>Заголовок первого уровня</H6> В браузер! Форматирование шрифта <HR>Горизонтальная разделительная линия Обычный текст <B>Жирный</B> <I>Курсив</I> <U>Подчеркнутый</U> <TT>Равноширинный</TT> <EM>Выделение</EM> <STRONG>Усиленное выделение</STRONG> В браузер! СПИСКИ Списки бывают нумерованные и ненумерованные, а также списки определений. Нумерованный список <OL> <LI>Первый элемент списка <LI>Второй элемент списка <LI>Третий элемент списка </OL> СПИСКИ Списки бывают нумерованные и ненумерованные, а также списки определений. Маркированный список <UL> <LI>Первый элемент списка <LI>Второй элемент списка <LI>Третий элемент списка </UL> СПИСКИ Списки бывают нумерованные и ненумерованные, а также списки определений. Список определений <DL> <DT>Термин 1</DT> <DD>Пояснение к термину1</DD> <DT>Термин 2</DT> <DD>Пояснение к термину 2</DD> <DT>Термин 3</DT> <DD>Пояснение к термину 3</DD> </DL> В браузер! Абзацы в WEB страницах Как программируются абзацы на HTML. Как они выглядят? Как правило браузер использует не красную, а пустую строку для отделения одного абзаца от другого или абзаца от других элементов документа. <P> Задается абзац тегами <P> и </P>, между которыми помещается текст. Фактически работа тега <P> сводится к выводу перед текстовым фрагментом пустой строки. <P> А вот парный тег </P> игнорируется браузером, поэтому его можно и не писать! В браузер! Фон на WEB страницах По желанию вы на вашей странице можете задать фон разного цвета. Но этим увлекаться не следует, так как, во-первых, это утяжеляет страницу, во-вторых, с ней тяжело работать. Первый способ: поместить в контейнер <BODY> следующий тег <BODY bgcolor=#f5e2ed> Оттенки нескольких цветов Цвет КОД цвета розовый #f5e2ed зеленый #caf4ae голубой #bcdbef кремовый #f4dfae В браузер! Вставка графических объектов в WEB страницу 1. В папке, где содержится ваша WEB страница, необходимо создать папку pic (picture-рисунок в переводе с английского) . В ней будут находиться рисунки, которые вы будете размещать на своем сайте. 2. На странице необходимо прописать соответствующий тег: <IMG src=“pic/имя графического файла с расширением” ширина рисунка (width), высота рисунка (height), рамка и ее размер (border=1), alt=“визуальная ссылка”, title = “заголовок”> Пример:(так он будет выглядеть в блокноте) <IMG src=“pic/log.jpg” width=171 height=170 border=1 alt=“логотип” title=“логотип”> В браузер! Гиперссылки на WEB страницах Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки. Гиперссылка создается с помощью универсального тэга <А> и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница: Пример: <А HREF=“http://nstrukova.gixx.ru”>Перейти на другую страницу</А> В браузер! Панель навигации на сайте На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход. Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами &nbsp. Такое размещение гиперссылок часто называют панелью навигации. [<А [<А [<А [<A HREF=“index1.htm">Первая</A>] & nbsp; HREF=“index2.htm">Вторая</A>] &nbsp; HREF=“index3.htm“>Третья</A>] &nbsp; HREF=“abzac.htm“>Абзац</A>] </P> Гиперссылка на адрес электронной почты Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер <ADDRESS></ADDRESS>, который задает стиль абзаца, принятый для указания адреса: <ADDRESS> <А HREF="mailto:username@server.ru">E-mail: username@server.ru</A> </ADDRESS> Форма • Вся форма заключается в контейнер <F0RM></F0RM>. • В первую очередь выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта. Текстовые поля Для получения этих данных разместим в форме два однострочных текстовых поля для ввода информации. Текстовые поля создаются с помощью тэга <INPUT> со значением атрибута TYPE="text". Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах. Текстовые поля. HTML - код Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки <BR> <FORM> Пожалуйста, введите ваше имя: <BR> <INPUT TYPE="text" NАМЕ="ФИ0" SIZE=30> <BR> E-mail: <BR> <INPUT TYPE="text" NAME="e-mail" SIZE=30> <BR> </FORM> Переключатели Далее необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга <INPUT> со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group". Еще одним обязательным атрибутом является VALUE, которому присвоим значения "учащийся", "студент" и "учитель". Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки». Вставим в HTML-код группу переключателей, в которой строки разделяются с помощью тэга перевода строки <BR> Переключатели. HTML - код Укажите, к какой группе пользователей вы себя относите: <BR> <INPUT TYPE="radio" NAME="group" VALUE="учащийся">учащийся <BR> <INPUT TYPE="radio" NAME="group" VALUE="студент">студент <BR> <INPUT TYPE="radio" NAME="group" VALUЕ="учитель">учитель <BR> Флажки Далее, из предложенного перечня можно выбрать одновременно несколько вариантов, пометив их флажками. Флажки создаются в тэге <INPUT> со значением атрибута TYPE="checkbox". Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Например, NAME="box1", NAME="box2" и т. д. Еще одним обязательным атрибутом является VALUE, которому присвоим значения "WWW", "email" и "FTP". Значение атрибута VALUE должно быть уникальным для каждого флажка. Вставим в HTML-код группу флажков, в которой строки разделяются с помощью тэга перевода строки <BR> : Флажки. HTML - код Какие из сервисов Интернета вы используете наиболее часто: <BR> <INPUT TYPE="checkbox" NAME="box1" VALUE="WWW">WWW <BR> <INPUT TYPE="checkbox" NAME="box2" VALUE="e-mail">e-mail <BR> <INPUT TYPE="checkbox" NAME="box3" VALUE="FTP">FTP <BR> Раскрывающиеся списки Для реализации раскрывающегося списка используется контейнер <SELECT></SELECT>, в котором каждый элемент списка определяется тэгом <0PTI0N>. B переключателях, флажках и списках выбранный по умолчанию элемент задается с помощью атрибутаSELECTED. Создание таблицы <table border=1> <tr> <td>Первая</td> <td>Вторая</td> <td>Третья</td> </tr> <tr> <td>Первая</td> <td>Вторая</td> <td>Третья</td> </tr> </table>
