Вариант
1
1.
Web-страница (документ HTML) представляет собой:
a. Текстовый
файл с расширением txt или doc
b. Текстовый
файл с расширением htm или html
c. Двоичный
файл с расширением com или exe
d. Графический
файл с расширением gif или jpg
2.
Для вставки изображения в документ HTML
используется команда:
a. <img
src=»ris.jpg»>
b. <body
background=»ris.jpg»>
c. <a
rel=»nofollow ugc» target=»_blank» href=»ris.jpg»>
d. <input=»ris.jpg»>
3.
Гипертекст — это:
a. Текст
очень большого размера
b. Текст, в
котором используется шрифт большого размера
c. Структурированный
текст, где возможны переходы по выделенным меткам
d. Текст, в
который вставлены объекты с большим объемом информации
4.
Чему равно по умолчанию значение параметра SIZE тега <FONT>?
a.
6
b.
3
c.
4
d.
5
5.
Каким тегом объявляется web-страница?
a.
<html> </html>
b.
<head> </head>
c.
<title> </title>
d.
<body> </body>.
6.
Какой код для пустой web-страницы правильный?
a.
<html> <head> <title> </head>
<body> </body> </html>
b.
<html> <head> <title> </title>
</head> <body> </body> </html>
c.
<html> <head> <title> <body>
</body> </html>
d.
<html> <head> <title> </title>
</head> <body> </body>
7.
Каким тегом задается вставка гиперссылки на
web-страницу?
a.
<font color=»…»> </font>
b.
<img src=»…»>
c.
<a rel=»nofollow ugc» target=»_blank» href=»…»> </a>
d.
<a name=»…»></a>
8. Инструкция браузеру, указывающая способ отображения текста:
a. Программный
код
b. Тэг
c. Файл
d. Гиперссылка
9. Программа для просмотра гипертекстовых страниц называется:
a. Сервер
b. Протокол
c. HTML
d. Браузер
10.
Какие тэги задают размер заголовка?
a. <p></p>
b. <img src=”name”>
c. <body></body>
d.
<h1></h1>
11. Назовите атрибут обязательный для тега <img>:
a.
src
b.
with
c.
title
d.
href
12. Тег <I> позволяет задать:
a.
курсив
b.
подчеркнутый шрифт
c.
моноширинный шрифт
d.
полужирный шрифт
13. Заполните фразу: PHP (от англ. _______________) это _________ язык
программирования, основанный на технологии _________
a. «PHP:
Hypertext Preprocessor», «скриптовый язык«, «Zend»
b. «PHP:
Hypertext Preprocessor», «скриптовый язык«, «PHP»
c. «Personal
Hypertext Processor», «скриптовый язык«, «Zend»
d. «Personal
Hypertext Processor», «скриптовый язык«, «PHP»
14. Почему в PHP файлах не рекомендуется ставить «?>»
закрывающийся тег?
a.
Для того чтобы предотвратить случайное
включение пробелов или переносов на новую строку
b.
Подобная рекомендация улучшает читабельность
c.
Это важный аспект безопасности
d.
Не рекомендуется? Не, это не правда
15. Что
будет выведено в результате выполнения следующего кода?
a.
Hello Certification!!!
b.
Возникнет ошибка
c.
Hello PHP Certification!!!
d.
HelloPHP Certification!!!
e.
Hello Certification!!!
16. Дан
программный код. Что будет выведено
после запуска скрипта?
a.
024
b.
24
c.
13
d.
013
17. Есть массив $arr. Как вывести все элементы массива $arr?
a.
print_r($arr);
b. print $arr;
c. echo
$arr;
d.
это возможно сделать только через цикл.
18. Следующий
фрагмент кода создает список:
<ul>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ul>
Что верно о
созданном списке ?
a. будет
создан неупорядоченный список
b. будет
создан упорядоченный список
c. каждый
элемент списка будет начинаться с номера по порядку
d. каждый
элемент списка будет начинаться с маркера
19. Что
выведет следующий код?
$arr = array(1,3,5);
$count = count($arr);
if ($count = 0) {
echo «Массив пуст.»;
} else {
echo «Массив состоит из $count элементов.»;
}
a. Массив
состоит из 3 элементов.
b. Массив
пуст.
c. Массив состоит из 0 элементов.
20. Что
такое сложный запрос MySQL?
a.
это
запрос, в котором участвует одна таблица базы данных
b.
это
один запрос к нескольким таблицам
c.
это
база данных сайта
d.
это
обращение к базе данных
21. Что
делает данный фрагмент кода?
if ($a < $b) {echo
‘OK’;}
a. если $a
меньше чем $b выводит «OK»
b. если $a
меньше или равно $b выводит «OK»
c. если $a
больше чем $b выводит «OK»
d. если $a
больше или равно $b выводит «OK»
22. Горизонтальная
линия шириной 50%, толщиной 2 пикселя, нерельефная, синего цвета обозначается
a. <hr size=2
width=50% color=blue>
b. <hr size=50%
width=2 color=blue noshade>
c. <hr size=2
width=50% color=blue noshade>
d. <hr size=50%
width=2 color=blue > строкой
23.
Выберите четверку правильно написанных
параметров выравнивания:
a. justyfy,centre,right,left
b. center,left,riht,justify
c. right,centre,justify,left
d. left,center,justify,right
24. Какого
вида URL адреса применяемых в гиперссылки не
существует
a. Относительного
b. Абсолютного
c. Полного
25. Тег
который рисует линии
a. <TH>…</TH>
b. <Href>…</Href>
c. <HR>…</HR>
26. Каким
тегом определяется нумерованный список
a. <OL>…</OL>
b. <LI>…</LI>
c. <UL>…</UL>
Вариант
2
1.
Для просмотра Web-страниц в Интернете используются
программы:
a. MicroSoft Word или Word Pad
b. MicroSoft Access или MicroSoft Works
c. Internet Explorer или Opera (Google
Chrome)
d. HTMLPad или Front Page
2.
Гиперссылка задается тегом:
a. <font
color=»file.htm»>
b. <img
src=»http://www.chat.ru»>
c. <a
rel=»nofollow ugc» target=»_blank» href=»file.htm»>текст</a>
d. <embed=»http://www.da.ru»>
3.
Для создания Web-страниц используются
программы:
a. DreamWeaver и MicroSoft Word
b. Turbo Pascal и QBasic
c. Visual Basic и ACDSee
d. ScanDisk и Defrag
4.
Запишите атрибут, обязательный для тега <IMG>: _______________
5.
Каким тегом объявляется заголовок
web-страницы?
a. <html>
</html>
b. <head>
</head>
c. <title>
</title>
d. <body>
</body>
6.
В каком коде абзац «Системы
счисления» выровнен по центру
a. <body>
<h3 align = «center»> Системы счисления </h3>
</body>
b. <body> <р align =
«center»> Системы счисления </р>
</body>
c. <body>
<font align = «center»> Системы счисления </font>
</body>
7.
Каким тегом задается цвет текста на web-странице?
a. <font
color=»…»> </font>
b. <img
src=»…»>
c. <a
rel=»nofollow ugc» target=»_blank» href=»…»> </a>
d. <a
name=»…»></a>
8.
Программа для создания Web-страницы с использованием языка HTML:
a. MS Word
b. Paint
c. Калькулятор
d. Блокнот
9.
Какие тэги указывают браузеру, что это HTML документ?
a. <body></body>
b.
<title></title>
c.
<p></p>
d.
<html></html>
10. Тег <B> позволяет задать:
a.
курсив
b.
подчеркнутый
шрифт
c.
моноширинный
шрифт
d.
полужирный
шрифт
11. Параметр формы <method> определяет:
a. протокол HTTP
b. имя окна
или фрейма, куда обработчик будет загружать результат
c. имя формы
d. адрес
программы или документа, который обрабатывает данные формы
12. Назовите параметр тега <A>, который
определяет в каком окне будет открыт документ:
a. rev
b. rel
c. href
d. targer
13. Что будет выведено на экран в результате выполнения следующего кода?
a. echo
‘Какой-то текст’;
b. Какой-то
текст
c. Ничего не
выведется
d. Возникнет
ошибка
14. Что будет выведено в результате выполнения следующего кода?
a. 33
b. 22
c. 11
d. 22 = 11 =
33
e. Возникнет
«Parse error»
]
15. В чём разница между echo и print?
a. print
можно использовать как часть выражения, а echo нет
b. echo можно
использовать как часть выражения, а print нет
c. Между
этими функциями нет никакой разницы
16. Что будет, если запустить такой скрипт:
a.
ошибка,
поскольку null в PHP нет.
b.
true
c.
false
d.
ошибка
поскольку null нельзя
сравнить с 0
17. Имеется следующее описание HTML-формы:
<form action=»»>
…
</form>
По какому URL
будут отправлены данные, введенные в форме?
a. данный
фрагмент HTML-кода не валиден, так как атрибут action содержит пустое значение
b. данные
формы будут отправлены по URL, с которого
загружена страница с формой
c. данные
формы не будут отправлены никуда, так как атрибут action содержит пустое
значение
d. данные
формы будут отправлены на корневую (http://доменное-имя/) страницу сайта
18. Содержимое одного и того же HTML-документа отображается одинаково во
всех браузерах.
a. да
b. нет
19. Какой результат выполнения следующего кода?
$a = 10;
if($a > 5 OR < 15)
echo «true»;
else
echo «false»;
a. true
b. false
c. ничего не
будет выведено
d. возникнет синтаксическая
ошибка
20. Что делает функция include в php?
a. включает и
выполняет указанный файл
b. записывает
данные в файл
c. подключает
файл как новую страницу
21. Какая из функций осуществляет подключение к СУБД MySQL:
a.
connect()
b.
db_connect()
c.
mysql_bd_connect()
d.
mysql_connect()
22. Какие команды способны изменить цвет фона документа?
a. <HTML>
… </HTML> ;
b. <BODY>
… </BODY>;
c. <FONT>
… </FONT>;
d. <BIG> …
</BIG>;
23. Каким тегом определяется маркированный список
a. <OL>…</OL>
b. <DL>…</DL>
c. <UL>…</UL>
24. Раздел заголовка содержит
a.
Информация
содержимого документа
b.
Служебную
информацию не считающимся содержанием документа
c.
Информация,
которая содержится в окне браузера
25. С какой конструкции начинаются и заканчиваются все теги
a.
‘…’
b.
<…>
c.
[…]
26. С помощью какого тега определяется строка таблицы
a. <TR>…</TR>
b. <BR>…</BR>
c. <TH>…</TH>
Вариант
3
1.
Тег — это:
a. Специальная
команда, записанная в угловых скобках
b. Текст, в
котором используются спецсимволы
c. Указатель
на другой файл или объект
d. Фрагмент
программы, включённой в состав Web-страницы
2.
Гиперссылки на Web — странице могут
обеспечить переход…
a. только в
пределах данной web – страницы
b. только на
web — страницы данного сервера
c.
на
любую web — страницу данного региона
d.
на
любую web — страницу любого сервера Интернет
3.
Каким тегом определяется абзац текста?
a. <br>
b. <div>
c.
<p>
d. <textarea>
4.
Какой тег используется для организации списков?
a.
<tr>
b.
<hr>
c.
<ol>
d.
<th>
5.
В какой тег заключается основное содержание
web-страницы?
a.
<html>
</html>
b.
<head>
</head>
c.
<title>
</title>
d.
<body>
</body>
6.
Какой html -код
задает вывод текста в две строки
a. <p>
Информационные <br>
технологии </br></p>
b. <p>
<br> Информационные технологии </br></p>
c. <p>
Информационные <br> технологии </p>
7.
HTML (HYPER TEXT MARKUP LANGUAGE) является:
a.
Одним из средств при создании Web-страниц
b.
Системой
программирования
c.
Графическим редактором
d.
Системой управления
базами данных
8.
Способ организации информации на Web-сервере
называется:
a.
Файлом
b.
Гиперссылкой
c.
Web-сайтом
d.
Мультимедиа
9.
Какие тэги помещают название документа в оглавление
программы просмотра web-страниц?
a.
<title></title>
b. <body></body>
c. <h1></h1>
d. <img src=”name”>
10. Какие теги перечисленные ниже определяют блочные элементы:
a.
<p>
b.
<a>
c.
<span>
d.
<div>
11. Тег <U> позволяет задать:
a. курсив
b. подчеркнутый
шрифт
c. моноширинный
шрифт
d. полужирный
шрифт
12. Назовите параметр, обязательный для тега <form>:
a. targer
b. erctype
c. method
d. action
13. Какой из перечисленных тегов непригоден для открытия и закрытия PHP
блока?
a. <?
?>
b. <?=
?>
c. <!
!>
d. <?php
?>
14. Что будет выведено в результате выполнения следующего кода?
a. AB D
b. ABCD
c. ABC D
d. AC D
e. Возникнет
ошибка
15. Какая разница между равенством и эквивалентностью?
a. Знак
эквивалентности используется только для строк, а знак равенства применим для
всех типов
b. Знак
равенства проверяет лишь значения операндов, а знак эквивалентности значения и
их типы.
c. Знак
эквивалентности проверяет лишь значения операндов, а знак равенства значения и
их типы.
d. Никакой
разницы нет
16.
Каков результат выполнения у данного
скрипта:
a. Переменная
$x = 5
b. Переменная
5 = 5
c. Переменная
x = 5
d. Ошибка,
поскольку строки с переменными должны быть в одинарных кавычках
17. Выберите список исправлений, которые необходимо применить, чтобы иметь
возможность на сервере обработать все данные, отправленные следующей формой:
<form>
<input name=’nick’/>
<input type=’file’ name=’avatar’/>
<input type=’submit’/>
</form>
a. задать
значение атрибута value для <input type=’submit’/>
b. указать
значение атрибута url в теге <form>
c. задать
значение атрибута action в теге <form>
d. добавить
атрибут enctype в тег <form>
e. добавить
атрибут method в тег <form>
18. Какие тэги не обязательны в html документе в соответствии со
спецификацией?
a. <html>
…</html>
b. <head>…</head>
c. <body>…</body>
d. <style>…</style>
e. <script>…</script>
19. Какие из следующих пар операторов не являются противоположными?
a. +, —
b. ==, !=
c. <<,
>>
d. &=, |=
20. Что такое контент сайта?
a. это
оформление сайта
b. это статьи
на сайте
c. это вся
текстовая и графическая информация на сайте
21. Сколько байт займет строка «Привет» записанная в поле с типом
VARCHAR(10)
a. 10
b. 5
c. 6
d. 7
22. Какая из трёх программ задаёт вывод текста в две строки:
|
|
Программа 2 |
Программа 3 |
|
<P> </P> |
<P> Иван </P> |
<P> Иван <BR> |
a. первая
b. вторая
c. третья
d. все
23. … — это особое деление страницы на раздельные области просмотра.
a. Фрейм
b. Форма
c. Тег
24. Каким тегом создаётся таблица
a.
<TAB>…</TAB>
b.
<TITLE>…</TITLE>
c.
<TABLE>…</TABLE>
25. Сколько уровней заголовков содержит HTML
документ
a. 3
b. 6
c. 5
26. С помощью какого тега определяется ячейка таблицы
a. <TR>…</TR>
b. <TD>…</TD>
c. <TH>…</TH>
Вариант
4
1.
Тег <BODY> — это:
a. Идентификатор
заголовка окна просмотра
b. Идентификатор
заголовка документа HTML
c. Идентификатор
перевода строки
d. Идентификатор
HTML-команд документа для просмотра
2.
Ссылка на адрес электронной почты задается
тегом:
a. kompas@email.ru
b. <a
rel=»nofollow ugc» target=»_blank» href=»mailto:svetlana@narod.ru»>текст</a>
c. <a
rel=»nofollow ugc» target=»_blank» href=»marina@mail.ru»>текст</a>
d. <piter@mailru.com>
3.
Какие теги из перечисленных ниже определяют
элементы-контейнеры?
a.
<a>
b.
<br>
c.
<div>
d.
<img>
4. Значение какого адреса может принять параметр HREF
тега <A>?
a.
IP адрес
b.
Закладки (якорь с указанным именем)
c.
электронной почты (с префиксом mailto:)
d.
имя файла
5.
В какой тег заключается название
web-страницы?
a. <html>
</html>
b. <head>
</head>
c. <title>
</title>
d. <body>
</body>
6.
Каким тегом задается вставка изображения на
web-страницу?
a. <font
color=»…»> </font>
b. <img
src=»…»>
c. <a
rel=»nofollow ugc» target=»_blank» href=»…»> </a>
d. <a name=»…»></a>
7.
Каким тегом задается метка на web-странице?
a. <font color=»…»>
</font>
b. <img
src=»…»>
c. <a
rel=»nofollow ugc» target=»_blank» href=»…»> </a>
d. <a
name=»…»></a>
8.
Тэг — это:
a.
Инструкция браузеру, указывающая способ отображения
текста
b. Текст, в котором используются спецсимволы
c. Указатель на другой файл или объект
d. Фрагмент программы, включённой в состав
Web-страницы
9.
Какие теги определяют видимую часть документа?
a.
<body></body>
b. <p></p>
c. <html></html>
d. <title></title>
10. Назовите параметр тега <BODY> , с помощью
которого задается фоновое изображение для страницы:
a. bgcolor
b. alink
c. bgproperties
d. background
11. Тег <FT> позволяет задать:
a. курсив
b. подчеркнутый
шрифт
c. моноширинный
шрифт
d. полужирный
шрифт
12. Тег разрыва строки:
a. <TR>
b. <PR>
c. <BR>
13. Стандартный тег для открытия и закрытия PHP блока?
a. <?
?>
b. <?=
?>
c. <!
!>
d. <?php
?>
14. Что будет выведено в результате выполнения следующего кода?
a. A
b. B
c. C
d. Возникнет
ошибка
15. Есть строка: $str = «123456». Как из этой строки получить
подстроку «5»?
a. $str[4];
b. $str[5];
c. $str[6];
d. $str[];
16. Что выведет данный скрипт:
a. 111
b. 000
c. 123
d. 333
17. Что верно о HTML-теге <marquee> ? (выберете несколько вариантов)
a. тег не
поддерживается ни одним из браузеров
b. тег не поддерживается
всеми браузерами
c. тег задает
текст нижней части окна (status bar)
d. тег
создает бегущую строку
18. Выберите правильные варианты создания строковой переменной со значением
«text»
a. var s = ‘text’;
b. var s =
«t» . «ext»;
c. var s =
«text»;
d. var s = text;
e. var s = new
String(‘text’);
19. Укажите все корректные типы данных в PHP.
a.
varchar
b.
char
c.
float
d.
complex
20. Где в основном применяется ActionScript?
a. в анимации
b. в работе с
базой MySQL
c. для защиты
форм от спама
21. Выберите верную тройку непарных тэгов:
a. <h1>,<nobr>,<hr>
b. <hr>,<b>,<nabr>
c. <br>,<nabr>,<hr>
d. <nobr>,<b>,<hr>
22.
Какие команды способны изменить цвет шрифта
документа?
a.
<HTML> … </HTML> ;
b. <BODY> … </BODY>;
c. <FONT> … </FONT>;
d.
<P> … </P>;
e.
<BIG> … </BIG>;
23. … — это набор связанных между собой близких по смыслу Web – страниц.
a. Web –
приложение
b. Web – сайт
c. CGI –
сценарий
24. … — это элемент, который предназначен для организации интерактивного
режима работы с пользователем.
a. Форма
b. Фрейм
c. Тег
25.
Какой тег не входит в элемент таблицы
a. <TR>…</TR>
b. <TT>…</TT>
c. <TD>…</TD>
26. Каким тегом определяется список определений
a.
<OL>
b.
<DL>
c.
<UL>
Язык разметки гипертекста HTML
Сегодня я познакомлю Вас с языком разметки гипертекста HTML ( HyperText Markup Language) . Если Вы хотите стать Web — дизайнером, то вы непременно должны знать этот язык.
Язык HTML состоит из специальных разметочных указателей, иногда их называют флаги разметки , а также команды или коды языка HTML , но чаще их называют теги (от английского слова tag ) .
Тег – это инструкция браузеру, указывающая способ отображения текста.
Браузер – это программа, служащая для просмотра Web -документов (страниц в Internet ).
Существует много программ-браузеров.
Каждая из них предоставляет разные возможности при работе с
Web -документами.
Наиболее известные и конкурирующие браузеры – Netscape Navigator и Microsoft Internet Explorer .
Каким бы браузером не отображался Web -документ, всегда можно увидеть описывающие его теги.
Сделать это очень легко : достаточно открыть любую Web -страницу и в Строке меню выбрать
Вид →Просмотр HTML -кода
Тогда страница будет выглядеть следующим образом:
Тег всегда начинается и заканчивается угловыми скобками “ ” .
Прописные и строчные буквы при написании тегов не различаются.
=
=
ТЕГИ
НЕПАРНЫЕ
ПАРНЫЕ
Парный тег влияет на текст с того места, где употреблён, до того места, где указан признак окончания его действия, а им служит тот же самый тег, только начинающийся с символа слэш «/»
Структурные теги
Указывает браузеру, что далее следует HTML -файл. Тег обрамляет документ – весь текст должен находиться внутри этого тега.
Голова HTML -файла, состоящая из нескольких частей, основной из которых является заголовок окна.
Тег окна заголовка. Пишется внутри тега HEAD .
Тело HTML -файла. Внутри тега пишется то, что будет доступно в области просмотра браузера. Тег может иметь несколько параметров, описывающих цвет фона окна просмотра, рисунок в нём, цвет текста и т.п.
Структура HTML -файла
заголовок окна
…
…
…
Задание
На Рабочем столе в папке СТИХИ открыть файл КОЗЛЕНОК .txt
/ HTML » width=»640″
Сделаем Web -страницу, содержащую это стихотворение
Стих
/ TITLE
/ HTML
Переименуем полученный текстовой файл, присвоив ему расширение html
Сохраним нашу Web -страницу в текстовом формате
Получаем Web -страницу
Откроем полученный Web -сайт
Браузер Internet Explorer вывел наше стихотворение без переходов на новую строку. Хотелось бы показать стихотворение по-человечески.
Для указания перехода на новую строку используется непарный тег . Данный тег ставится в месте перехода на новую строку.
Чтобы внести данный тег в текст HTML- файла нужно в Строке меню выбрать
Вид→Просмотр HTML -кода
После внесения изменений HTML -файл будет выглядеть следующим образом:
Сохраняем с внесёнными изменениями
Закрываем полученный документ
Снова открываем наш Web -сайт.
Чтобы увидеть внесённые изменения, страницу нужно обновить.
ОБНОВЛЕНИЕ
II способ
На Панели инструментов
нажать
I способ
В Строке меню выбрать
Вид →Обновить
Теперь наша Web -страница выглядит лучше
Добавим на страницу цветной фон. Для этого в теге допишем атрибут bgcolor с указанием цвета.
Например:
bgcolor=pink
Не забудьте сохранить файл и обновить страницу
Вот наша Web -страница
Сделаем текст стихотворения цветным. Для этого в теге допишем атрибут text с указанием цвета.
Например:
text=blue
Не забудьте сохранить файл и обновить страницу
Наша Web -страница преобразилась
Сделаем заголовок стихотворения и имя автора крупнее. Для этого воспользуемся парным тегом .
Не забудьте сохранить файл и обновить страницу
Теперь наша Web -страница выглядит лучше
Добавим на нашу Web -страницу картинку. Нам понадобится непарный тег с атрибутом src , после которого указывается полное название картинки.
Например:
Вставьте на созданную нами Web -страницу картинку с изображением козлёнка. Картинка с козлёнком называется 248 .gif
Не забудьте сохранить файл и обновить страницу
Создадим на нашей Web -странице бегущую строку. Движущийся элемент должен находиться внутри парного тега .
Например:
Задание Сделайте бегущей строкой название стихотворения и изображение козлёнка
Не забудьте сохранить файл и обновить страницу
Задание
Представьте себя Web -дизайнерами и создайте свои сайты со стихами Агнии Барто.
Тексты стихотворений и картинки вы можете найти в папке ЗАДАНИЕ.
Источник: https://infourok.ru/material.html?mid=77989
Цели и задачи урока:
Познакомить с новыми понятиями языка HTML;
Сформировать навыки и умения создания простейших WEB-страниц;
Развивать познавательный интерес к предмету и логическое мышление.
Тип урока: комбинированный
Методы обучения: словесный — рассказ с элементами беседы и практики.
Оборудование: мультимедийная установка, программа презентаций Microsoft Office PowerPoint 2010, браузер Internet Explorer 8.0, раздаточный материал.
План урока:
Организационный момент (1 мин)
Актуализация опорных знаний (3 мин)
Объяснение нового материала (20 мин)
Закрепление нового материала путём выполнения практического задания (10 мин)
Проведение теста (5 мин)
Итоги урока. Проверка теста. Вопросы учеников (5 мин)
Домашнее задание (1 мин.)
Ход урока:
Организационный момент.
Приветствие учащихся. Проверка присутствующих.
Актуализация опорных знаний.
Определите понятие «Интернет»? (Глобальная компьютерная сеть, в которой локальные, региональные и корпоративные сети соединены между собой многочисленными каналами передачи информации.)
Для чего предназначен модем? (Устройство, преобразующее цифровой сигнал компьютера в аналоговый телефонный сигнал и обратно)
Какие функции выполняет сетевой адаптер? (Специальное аппаратное средство для эффективного взаимодействия персональных компьютеров в сети)
Что обозначает понятие Домен? (Часть адреса, определяющая адрес компьютера в сети)
Скорость передачи данных – это? (Количество битов информации, передаваемых через модем в единицу времени)
Объяснение нового материала
Систематизация понятий
WWW –всемирная паутина
WEB-сервер;WEB-страница, WEB-сайт; гипертекст; браузеры
Язык разметки гипертекста HTML;
Команды (теги), определяющие структуру WEB-документа.
Команды (теги) форматирования текста.
Во многом развитие компьютерной сети Интернет связано с развитием популярной службы WWW. (слайд 2) Всеми́рная паути́на (англ. World Wide Web или WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютера, подключенных к Интернету.
Для создания Web-страниц используют язык разметки гипертекстов HTML (HyperText Markup Language).(слайд 3) Всемирную паутину образуют сотни миллионов веб-серверов. Web-сервер — компьютер в сети Интернет, хранящий Web- страницы и соответствующее программное обеспечение для работы с ними.
Большинство ресурсов всемирной паутины основаны на технологии гипертекста. (слайд 4)
Гипертекст – электронный документ, который содержит в себе ссылки на другие документы. Гипертекстовые документы, размещаемые во Всемирной паутине, называются веб-страницами. Несколько веб-страниц, объединённых общей темой, дизайном, а также связанных между собой ссылками и обычно находящихся на одном и том же веб-сервере, называются веб-сайтом. (слайд 5,6) Для загрузки и просмотра веб-страниц используются специальные программы — браузеры (англ. browser). (слайд 7)
Основным понятием языка HTML является тег. ТЕГ— инструкция браузеру, указывающая способ отображения информации. (слайд 
Атрибут-компонент тега, содержащий указания о том, как браузер должен воспринять и обработать тег.(слайд 9) Теги могут быть парные и одиночные. Парные делятся на открывающие и закрывающие теги. Контейнеры— это парные теги, содержащие открывающий и закрывающий тег. (слайд 10)
Структурные теги HTML
Тег
Этот тег помещают в начало и конец документа, сообщая браузеру, что весь документ составлен на HTML.
Тег определяет заголовок, то есть часть документа, которая содержит информацию о документе. Тег не имеет собственных атрибутов, он используется в качестве контейнера для других тегов заголовка, таких как
Теги форматирования текста
— цвет текста
— цвет основного текста
-цвет фона
— цвет основного текста и цвет фона (слайд 12)
— размер шрифта
текст — гарнитура (тип шрифта) (слайд 13)
— выравнивание текста (center, left, right) (по умолчанию по левому краю)
— выравнивание по ширине
Таблицы
— таблица
— строчка таблицы
— столбец (ячейка) таблицы (слайд 17)
Вставка картинки
— вставка картинки
вставка картинки с указанием пути. (слайд 18)
Гиперссылки
Link — цвет ссылки
Alink — цвет активной ссылки (нажатой)
Vlink — цвет уже посещенной ссылки (слайд 19)
Ссылка на почтовый ящик
Замечание: ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д.)
У каждого учащегося имеется таблица с основными тегами html (приложение 2).
Закрепление нового материала путём выполнения практического задания.
(слайд 20)
Создайте папку SITE. Откройте текстовый редактор Блокнот и наберите текст, представленный ниже.
Это моя первая WEB- страница
Введите команду [Файл — Сохранить]. Файлу Web-страницы присвоить имя index.html (Файл сохранить в папке SITE)Запустить браузер и открыть созданный файл командой [Файл — Открыть]. В заголовке окна браузера высветится название Web-страницы Первое знакомство с тэгами HTML Для переключения между режимом просмотра WEB-страницы в браузере и текстом HTML-файла используйте меню Вид ð Просмотр HTML-кода.
Весь материал — в архиве.
Основы языка разметки гипертекста HTML
(HTML) Hyper Text Markup Language – язык разметки гипертекстовых документов.
Web-страницы можно создать с помощью языка HTML.
Web-страницы могут быть созданы с помощью:
— обычного текстового редактора;
— редактора, способного сохранять в формате HTML;
— специализированного редактора;
— специализированной системы.
Главные управляющие символы — HTML-теги, которые заключаются в угловые скобки .
Тег – инструкция браузеру, которая указывает способ отображения информации.
Теги могут быть одиночными и парными. Парные тег содержит открывающий и закрывающий теги (контейнер).
Например, код Web-страницы помещается внутрь контейнера
HTML… HTML и состоит из 2-х частей: заголовка и содержания.
Теги могут записываться как прописными, так и строчными буквами.
Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.
Например:
Моё имя – Таня
Структура Web-страницы
html
head
title
Название Web-страницы
title
head
body атрибуты
На этой странице можно разместить
любую интересную информацию (Интернет).
body
html
Первая часть НЕВИДИМАЯ отделяется парным тегом head, а вторая часть ВИДИМАЯ отделяется парным тегом body.
Мы видим, что главным элементом HTML является ТЭГ!
Именно с помощью тегов мы выделяем какую-то часть текста и показываем как должно отображаться!
Создание Web-страницы
-
Создать личную папку под своей фамилией. В ней создать папку HTML.
-
В этой паке создать ПКМ текстовый документ и сохранить его, как шаблон.txt.
-
Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты.
-
Сохранить файл под именем index.html в личной папке.
Для редактирования файла index.html необходимо выполнить следующие действия:
Атрибуты фона Web-страницы
body bgcolor=#FFF8DC Атрибут цвета Web-страницы
Атрибут вставки фонового рисунка Web-страницы
body background=»Nature_02.jpg”
Теги и атрибуты форматирования текста на Web-странице
h1…h1 до h6…h6 тег размера шрифта заголовков
font…font тег форматирования шрифта
face=“Arial” атрибут задания гарнитуры шрифта
size=4 атрибут задания размера шрифта
color=“Red” атрибут задания цвета шрифта
align=“left” атрибут задания выравнивания текста
(left–влево, right–вправо, center–по центру, justify-по ширине)
hr тег для создания горизонтальной линии
p…p контейнер для разделения текста на абзацы
Тег и атрибут вставки изображений на Web-странице
img src=“computer.gif” (src – (сорс) источник)
Теги и атрибуты гиперссылки на Web-странице
a href=“Адрес” Указатель a тег с атрибутом для создания гиперссылки
address…address контейнер для создания гиперссылки на
адрес электронной почты
Гиперссылки
-
Для связывания Web- страниц используют гиперссылки.
-
Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.
-
Гипертекст — это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.
Контрольные вопросы
-
Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно?
-
Какова логическая структура Web-страницы?
-
Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта?
-
Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?
Вы можете оставить комментарии к вопросам, которые Вам не понятны, я объясню вам ответ
Ссылки в помощь для подготовки:
1. Тэг — это:
Инструкция браузеру, указывающая способ отображения текста
-Текст, в котором используются спецсимволы
-Указатель на другой файл или объект
-Фрагмент программы, включённой в состав Web-страницы
2. Какие тэги указывают браузеру, что это HTML документ?
-<body></body>
-<title></title>
-<p></p>
-<html></html>
3. Инструкция браузеру, указывающая способ отображения текста
-Программный код
-Тэг
-Файл
-Кегль
4. Программа для создания Web-страницы с использованием языка HTML:
-MS Word
-Paint
-Калькулятор
-Блокнот
5. Web-страница (документ HTML) представляет собой
-Текстовый файл с расширением txt или doc
-Текстовый файл с расширением htm или html
-Двоичный файл с расширением com или exe
-Графический файл с расширением gif или jpg
6. Программа для просмотра гипертекстовых страниц называется
-Сервер
-Протокол
-HTML
-Браузер
7. Способ организации информации на Web-сервере называется:
-Файлом
-Гиперссылкой
-Web-сайтом
-Мультимедиа
8. Гипертекст — это:
-Текст очень большого размера
-Текст, в котором используется шрифт большого размера
-Структурированный текст, где возможны переходы по выделенным меткам
-Текст, в который вставлены объекты с большим объемом информации
9. Гиперссылки на Web-странице могут обеспечить переход
-только в пределах данной web-страницы
-только на web-страницы данного сервера
-на любую web-страницу данного региона
-на любую web-страницу любого сервера Интернет
10. С помощью какого языка создаются веб страницы
-языка разметки гипертекста HTML
-языка программирования
-Pascal
-Quanta Plus
— язык программирования Basiс
-язык скриптов Java
11. Для создания веб страниц используются:
— простой текстовый редактор Блокнот
-графический редактор
— текстовый редактор
-электронные таблицы
12. Как называются команды языка HTML
— тэги
-операторы
-атрибуты
-слова
13. Какие визуальные веб редакторы вам известны
-Блокнот
-Ms WORD
-Quanta Plus
14. Тэги могут записываться как прописными, так и строчными буквами
-да
-нет
15. Какая пара тэгов называется контейнером?
-парные тэги
-одинаргын теги
16. Какой символ содержит парный тег
-символ слэш /
-символ скобка
— символ !
-символ точка
17. Внутри какого контейнера размещается код страницы
-<HTML> </HTML>
-<BODY> </BODY>
-<HEAD> </HEAD>
-<TITLE> </TITLE>
18. Внутри какого контейнера размещается название страницы
-<HTML> </HTML>
-<BODY> </BODY>
-<HEAD> </HEAD>
-<TITLE> </TITLE>
19. Внутри какого контейнера размещается отображаемое в браузере содержание страницы
-<HTML> </HTML>
-<BODY> </BODY>
-<HEAD> </HEAD>
-<TITLE> </TITLE>
20. Какой тег (контейнер) используется для изменения размера шрифта заголовка
-<H1> </H1>
-<P> </P>
-<BR>
-<HR> </HR>
21. Какой тег (контейнер) используется для разделения текста на абзацы
-<H1> </H1>
-<P> </P>
-<BR>
-<HR> </HR>
22. Какой тег используется для отображения горизонтальной черты на веб страницах
-<H1> </H1>
-<P> </P>
-<BR>
-<HR> </HR>
23. Какой тег используется для отображения горизонтальной черты на веб страницах
-<H1> </H1>
-<P> </P>
-<BR>
-<HR> </HR>
24. Какой тег используется для перевода текста на новую строку
-<H1> </H1>
-<P> </P>
-<BR>
-<HR> </HR>
25. Какой атрибут используется для выравнивания текста
-Align
-width
-size
-color
26) Самый крупный шрифт для заголовков
задаётся парой тегов:
а) <N2></N2> б) <H13></H13>
в) <H1></H1> г) <H6></H6>
27) Что указывает атрибут SRC?
а) путь к
файлу б) размер шрифта
в) количество
символов г) ничего
28) Какой тэг используется для создания списка терминов?
а) <DL><DL> б) <DL></DL>
в)
<DD></DD> г) <DT>
29)
Что произойдёт при щелчке
мышью по указателю гиперссылки?
а) обновление
страницы б) закрытие браузера
в) ничего г) переход по адресу
гиперссылки
30)
Для чего нужна
альтернативная вставка текста?
а) для вывода текста
вместо рисунка б) для перехода на другой Web-сайт
в) для загрузки
изображения г) для вставки видео
31)
Чтобы вывести рисунок по
центру Web-страницы
необходимо использовать команду —
а)
CENTER б)BOTTOOM
в)
MIDDLE г)TOP
32) Дополните определения:
А) Размер
шрифта текста задаётся атрибутом…
Б) Атрибут …
позволяет задавать цвет шрифта.
В) Задать
способ выравнивание текста позволяет атрибут …
Г) Гиперссылки,
размещённые на Web-странице,
позволяют загружать в браузер…
Д) Создание web-страниц с использованием HTML-кода требует знание …
Е) Web-сайт – это …
Ж) Нумерованный
список располагается внутри контейнера …
З)
Маркированный список располагается внутри контейнера …
И) RGB-формат – это…
К) Для
реализации раскрывающего списка используется контейнер …
Л) Контейнер <ADDRESS></ADDRESS>
используется для создания … на Web-страница
33. Какие
тэги создают абзац в документе?
а)
<p></p>
б) <body></body>
в) <img
src=”name”>
г) <html></html>
34. Какие
тэги задают размер заголовка?
а)
<p></p>
б) <h1></h1>
в)
<body></body>
г) <img src=”name”>
35. Строка
<FONT SIZE=»5“ COLOR=»#00FFFF” > задаёт
-
а)
страницу размера 5, цвет фона страницы
б)
шрифт текста размера 5, цвет шрифта -
в)
заголовок размера 5, его цвет