Рабочие листы
к вашим урокам
Скачать
1 слайд
Разработка Web-сайтов
с использованием языка разметки гипертекста НТМL
Хайрулина Анастасия Владиславовна,
МОУ СОШ №10, г. Кандалакша, Мурманская обл.
26.12.2020
1
2 слайд
Содержание:
1.Web -страницы и Web – сайты
Для создания Web-страниц
Создание Web-страниц с использованием НТМL-тэгов
Web-сайты. Основные моменты
Размещение в Интернет
Контрольные вопросы
2.Структура Web-страницы
ТЭГИ
Разработка заготовка
Контрольные вопросы
3.Форматирование текста на Web-странице
Шрифт
Выравнивание текста
Абзацы. Горизонтальная линия
Контрольные вопросы
4.Вставка изображений в Web-страницы
Положение рисунка относительно текста
Вставка альтернативного текста
Контрольные вопросы
26.12.2020
2
3 слайд
5.Гиперссылки на Web-страницах
Панель навигации по сайту.
ссылка на адрес электронный почты
Пример
6. Списки на Web-страницах
нумерованные списки
маркированные списки
списки определений
Контрольные вопросы
7. Интерактивные формы на Web-страницах
Форма
Текстовые поля. Текстовые поля.HTML –код
Переключатели. Переключатели. HTML-код
Флажки. Флажки. HTML-код
Раскрывающиеся списки. Раскрывающиеся списки.HTML код
Текстовая область.
Отправка данных из формы.
Контрольные вопросы
Что должно получиться
Основные HTML -тэги
4 слайд
1.Web -страницы и Web - сайты
Web -страницы создаются с использованием языка разметки гипертекстовых документов НТМL (Нуреr Техt Markup Language). В обычный текстовый документ вставляются управляющие символы — НТМL-тэги, которые определяют вид Web-страницы при ее просмотре в браузере.
Основными достоинствами Web-страниц являются:
• малый информационный объем;
• возможность просмотра в различных операционных системах.
26.12.2020
4
5 слайд
Для создания Web-страниц
Для создания Web-страниц используются простейшие текстовые редакторы или специальные программы-HTML –редакторы (HtmlPad FisherMan). В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
26.12.2020
5
6 слайд
Создание Web-страниц с использованием НТМL-тэгов
требует больших усилий, времени и знания синтаксиса языка.
Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG
(от англ. «What You See Is What You Get - Что видишь, то и получишь»).
26.12.2020
6
7 слайд
Web-сайты. Основные моменты
Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме.
26.12.2020
7
Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.
8 слайд
Размещение в Интернет
Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.
Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).
26.12.2020
8
9 слайд
Контрольные вопросы
1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами?
2. Каким образом Web -страницы объединяются в Web-сайты?
26.12.2020
9
10 слайд
2. Структура Web-страницы
НТМL-код страницы помещается внутрь контейнера <НТМL></НТМL>.
Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать.
Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.
Заголовок Web-страницы заключается в контейнер <НЕАD></НЕАD> и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.
26.12.2020
10
11 слайд
Тэги заключаются в угловые скобки и могут быть одиночными или парными.
Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется контейнером).
26.12.2020
11
i
<НЕАD>
</НЕАD>
<НТМL>
</НТМL>
12 слайд
ТЭГИ
Закрывающий тэг содержит прямой слэш (/) перед обозначением.
Название страницы помещается в контейнер <TITLE> </TITLE> и при просмотре отображается в верхней строке окна браузера.
Отображаемое в браузере содержание страницы помещается в контейнер <BODY></BODY>
26.12.2020
12
13 слайд
Разработка заготовка
<HTML>
<HEAD>
<TITLE>Компьютер
</ТIТLЕ>
</HEAD>
<BODY>
Компьютер и ПО
</BODY>
</HTML>
26.12.2020
13
Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html.
14 слайд
Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе,
и имя Web-страницы (например, «Компьютер»), которое высвечивается в верхней строке окна браузера.
Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами
26.12.2020
14
i
15 слайд
Контрольные вопросы
Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно?
Какова логическая структура Web-страницы?
Практическое задание.
Создать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере.
26.12.2020
15
16 слайд
3. Форматирование текста на Web-странице
С помощью тэгов можно задать различные параметры форматирования текста.
Заголовки.
Размеры шрифтов заголовков задаются параметрами тэгов от
<Н1></Н1> (самый крупный)
до <H6></H6> (самый мелкий).
26.12.2020
16
17 слайд
Шрифт.
Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения.
С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта.
Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"),
Атрибут SIZE — размер шрифта (например, SIZE=4).
Атрибут COLOR позволяет задавать цвет шрифта (например, COLOR="blue").
Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением - "#RRGGBB"
26.12.2020
17
18 слайд
Выравнивание текста.
Задать способ выравнивания текста позволяет атрибут ALIGN.
Выравнивание по левой границе задается так: ALIGN="left",
выравнивание по правой границе: ALIGN="right",
выравнивание по центру: ALIGN= "center".
Таким образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:
<FONT COLOR="blue">
<Н1 ALIGN="center">компьютер и П0</Н1>
</FONT>
26.12.2020
18
19 слайд
Горизонтальная линия.
Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга <HR>.
Абзацы.
Разделение текста на абзацы производится с помощью контейнера <р></р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.
26.12.2020
19
20 слайд
Домашняя страница сайта.
На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта «Компьютер» текст, разбитый на абзацы с различным выравниванием:
<Р ALIGN="left">
Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
</Р>
<Р ALIGN="RIGHT">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.
</Р>
26.12.2020
20
21 слайд
<FONT COLOR="blue">
<Н1 ALIGN="center">
Компьютер и ПО
</Н1>
</FONT>
<HR>
<Р ALIGN="left">Ha этом сайте...</Р>
<Р ALIGN ="right"> Терминологический словарь
...</Р>
26.12.2020
21
22 слайд
Контрольные вопросы
Какие тэги (контейнеры) используются для ввода заголовков?
Форматирования шрифта?
Ввода абзацев?
Практическое задание.
Создать Web-страницу «Компьютер» с отформатированным текстом и просмотреть ее в браузере.
26.12.2020
22
23 слайд
4.Вставка изображений в Web-страницы
На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов — GIF, JPEG и PNG.
Вставка изображений.
Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. НАПРИМЕР:
<IMG SRC="computer.gif">
<IMG SRC="C:\computer\computer.gif">
<IMG SRC="http://www.server.ru/computer.gif">
26.12.2020
23
24 слайд
Положение рисунка относительно текста
Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений:
ТОР (верх),
MIDDLE (середина),
BOTTOM (низ),
LEFT (слева)
и RIGHT (справа).
НАПРИМЕР:
<IMG SRC="computer.gif" ALIGN="right">
26.12.2020
24
25 слайд
Вставка альтернативного текста
Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.
Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
<IMG SRC="computer.gif" ALIGN="right» ALT="Компьютер">
26.12.2020
25
26 слайд
Контрольные вопросы
1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?
Практическое задание.
Вставить в Web-страницу «Компьютер» изображение и альтернативный текст и просмотреть ее в браузере.
26.12.2020
26
27 слайд
5. Гиперссылки на Web-страницах
Гиперссылки.
Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.
Гиперссылка создается с помощью универсального тэга <А> и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница:
<А HREF="Адрес">Указатель ссылки</А>
26.12.2020
27
28 слайд
Панель навигации по сайту.
Создадим папку сайта «Компьютер» и добавим в сайт пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета».
Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие «пустые» страницы должны иметь заголовки, но могут пока не иметь содержания:
26.12.2020
28
29 слайд
панель навигации
На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами  . Такое размещение гиперссылок часто называют панелью навигации.
26.12.2020
29
30 слайд
Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:
<Р ALIGN="center">
[<А HREF="software.htm">Программы</A>] & nbsp
[<А HREF="glossary.htm">Словарь</A>]  
[<А HREF="hardware.htm“>Комплектующие</A>]  
[<A HREF="anketa.htm“>Анкетa</A>] </P>
26.12.2020
30
31 слайд
Гиперссылка на адрес электронной почты.
Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер <ADDRESS></ADDRESS>, который задает стиль абзаца, принятый для указания адреса:
<ADDRESS>
<А HREF="mailto:username@server.ru">E-mail:
username@server.ru</A>
</ADDRESS>
26.12.2020
31
32 слайд
Пример
26.12.2020
32
33 слайд
6. Списки на Web-страницах
нумерованные списки,
когда элементы списка идентифицируются с помощью чисел;
маркированные списки,
когда элементы списка идентифицируются с помощью специальных символов (маркеров);
списки определений,
позволяющие составлять перечни определений в так называемой словарной форме.
26.12.2020
33
34 слайд
Нумерованные списки.
Нумерованный список располагается внутри контейнера <OL></OL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации:
арабские цифры (по умолчанию),
"I" (римские цифры),
"а" (строчные буквы)
<OL>
<LI>Системные программы
<LI>Прикладные программы
<LI>Системы программирования </0L>
26.12.2020
34
35 слайд
Маркированные списки.
Маркированный список располагается внутри контейнера <UL></UL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка:
"disc" (диск),
"square" (квадрат)
или "circle" (окружность):
<UL TYPE="square">
<LI>текстовые редакторы;
<LI>графические редакторы;
<LI>электронные таблицы;
<LI>системы управления базами данных.
</UL>
36 слайд
Список определений.
Список определений располагается внутри контейнера <DL>/<DL>. Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами <DT> и определений, которые следуют за одинарными тэгами <DD>.
Web-страницу «Словарь» мы представим в виде словаря компьютерных терминов
<DL>
<DТ>Процессор
<DD>Центральное устройство компьютера,
производящее обработку информации в двоичном коде.
<DТ>Оперативная память
<DD>Устройство, в котором хранятся программы и данные.
</DL>
37 слайд
Контрольные вопросы
Какие тэги используются для создания нумерованных списков? Маркированных списков?
Практическое задание.
Создать Web-страницу «Программы» с нумерованным списком и вложенным маркированным списком.
Создать Web-страницу «Словарь» со списком терминов.
38 слайд
39 слайд
7. Интерактивные формы на Web-страницах
Для того чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения его администраторам, на страницах сайта размещают интерактивные формы. Формы включают в себя элементы управления различных типов:
текстовые поля,
раскрывающиеся списки,
флажки,
переключатели,
текстовые области и т. д.
40 слайд
Форма
Вся форма заключается в контейнер <F0RM></F0RM>.
В первую очередь выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.
41 слайд
Текстовые поля.
Для получения этих данных разместим в форме два однострочных текстовых поля для ввода информации.
Текстовые поля создаются с помощью тэга <INPUT> со значением атрибута TYPE="text".
Атрибут NAME является обязательным и служит для идентификации полученной информации.
Значением атрибута SIZE является число, задающее длину поля ввода в символах.
42 слайд
Текстовые поля.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>
43 слайд
Переключатели.
Далее необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга <INPUT> со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим значения "учащийся", "студент" и "учитель". Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки».
Вставим в HTML-код группу переключателей, в которой строки разделяются с помощью тэга перевода строки <BR>
44 слайд
Переключатели. HTML-код
Укажите, к какой группе пользователей вы
себя относите:
<BR>
<INPUT TYPE="radio" NAME="group"
VALUE="учащийся">учащийся
<BR>
<INPUT TYPE="radio" NAME="group"
VALUE="студент">студент
<BR>
<INPUT TYPE="radio" NAME="group"
VALUЕ="учитель">учитель
<BR>
45 слайд
Флажки.
Далее, из предложенного перечня можно выбрать одновременно несколько вариантов, пометив их флажками.
Флажки создаются в тэге <INPUT> со значением атрибута TYPE="checkbox". Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Например, NAME="box1", NAME="box2" и т. д.
Еще одним обязательным атрибутом является VALUE, которому присвоим значения "WWW", "e-mail" и "FTP". Значение атрибута VALUE должно быть уникальным для каждого флажка.
Вставим в HTML-код группу флажков, в которой строки разделяются с помощью тэга перевода строки <BR> :
46 слайд
Флажки. 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>
47 слайд
Раскрывающиеся списки.
Для реализации раскрывающегося списка используется контейнер <SELECT></SELECT>, в котором каждый элемент списка определяется тэгом <0PTI0N>.
B переключателях, флажках и списках выбранный по умолчанию элемент задается с помощью атрибутаSELECTED.
48 слайд
Раскрывающиеся списки.HTML код
<BR>
Какой браузер вы используете
наиболее часто:
<SELECT NAMЕ="Браузер">
<OPTION SELECTED>Internet Explorer
<OPTION>Netscape Navigator
<OPTION>Opera
<OPTION>Mozilla
</SELECT>
49 слайд
Текстовая область.
В такое поле можно ввести достаточно длинный текст.
Создается текстовая область с помощью тэга <TEXTAREA> с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS — число столбцов области.
Вставим в HTML-код текстовую область :
Какую еще информацию вы хотели бы видеть
на сайте?
<BR>
<TEXTAREA NAME="Ваши предложения"
ROWS=4 COLS=30>
</TEXTAREA>
50 слайд
Отправка данных из формы.
Отправка введенной в форму информации осуществляется с помощью щелчка по кнопке.
Кнопка создается с помощью тэга <INPUT>. Атрибуту TYPE необходимо присвоить значение "submit", а атрибуту VALUE, который задает надпись на кнопке, присвоить значение "Отправить"
<INPUT TYPE=" submit" VALUЕ="Отправить">
51 слайд
Щелчком по кнопке Отправить можно отправить данные из формы на определенный адрес электронной почты. Для этого атрибуту ACTION контейнера <FORM> надо присвоить значение адреса электронной почты. Кроме того, в атрибутах METOD и ENCTYPE необходимо указать метод и форму передачи данных:
<FORM ACTION="mailto:username@server.ru" METHOD="POST" ENCTYPE="text/plain">
После открытия в браузере Web-страницы «Анкета» и внесения данных в поля формы необходимо щелкнуть по кнопке Отправить. Данные будут отправлены по указанному адресу электронной почты.
52 слайд
Контрольные вопросы:
Какие тэги используются для создания на форме текстовых полей? Переключателей? Флажков? Раскрывающихся списков? Текстовых областей?
Какие значения необходимо присвоить атрибутам тэга <FORM> для отправки введенной в форму информации
Практическое задание:
Создать страницу «Анкета», содержащую форму для ввода данных
53 слайд
54 слайд
Сайт
Рабочие листы
к вашим урокам
Скачать
6 656 407 материалов в базе
Настоящий материал опубликован пользователем Ильясова Ирина Юрьевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс повышения квалификации
72/180 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
3 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.