Создание сайтов
<<  Web-студия «Звезда» Web-квест как форма организации работы учащихся по предмету  >>
Разработка Web-сайтов с использованием языка разметки гипертекста НТМL
Разработка Web-сайтов с использованием языка разметки гипертекста НТМL
Содержание:
Содержание:
_
_
_
_
_
_
Разработка заготовка
Разработка заготовка
_
_
_
_
_
_
_
_
Раскрывающиеся списки
Раскрывающиеся списки
_
_
Картинки из презентации «Разработка Web-сайтов с использованием языка разметки гипертекста НТМL» к уроку информатики на тему «Создание сайтов»

Автор: School101. Чтобы познакомиться с картинкой полного размера, нажмите на её эскиз. Чтобы можно было использовать все картинки для урока информатики, скачайте бесплатно презентацию «Разработка Web-сайтов с использованием языка разметки гипертекста НТМL.ppt» со всеми картинками в zip-архиве размером 2527 КБ.

Разработка Web-сайтов с использованием языка разметки гипертекста НТМL

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

Разработка Web-сайтов с использованием языка разметки гипертекста НТМL

другие презентации на тему «Разработка Web-сайтов с использованием языка разметки гипертекста НТМL»

«Гипертекст на уроке» - Вы используете ЭИ для выполнения домашнего задания? Использование гипертекста на уроках помогает. Вы пользуетесь компьютером при подготовке домашнего задания? К. Э. Циолковского. Опрос учащихся. Проведение урока-семинара, урока-конференции, игры. Образовательный комплекс: «1С: Школа. Гипертекст как средство развития познавательной активности учащихся на уроках химии.

«Технологии Web 2.0» - Может быть платным или бесплатным. Использование технологий web 2.0. в корпоративном обучении. Корпоративное обучение 2009. Средства Web 2.0 для обучения. Технологии Web 2.0 для обучения. 3 версии еLearning по Тони Кареру http://elearningtech.blogspot.com/. 3 версии еLearning по Тони Кареру. Буду рада ответить на Ваши вопросы!

«Разработка сайтов» - 6. Кто Ваши конкуренты? 5 вопросов-бонусов. — А сколько стоит автомобиль? Зачем Вам нужен сайт? В каком состоянии находятся информационные материалы, которыми мы будем наполнять сайт? Какие сайты Вам нравятся? А сколько надо? 5 важных советов. Где территориально находятся Ваши Клиенты? (География реализации товаров/услуг).

«Web 2.0» - Почему для вашей компании наступило времяweb 2.0? «Желтофиоль». Краткий обзор концепции Web 2.0. Преимущества сервисов Web 2.0. Сообщество само вытесняет неактуальные материалы. Примеры зарубежных проектов Web 2.0. На территории Рунета пока только появляются первые «ласточки». Примеры российских проектов Web 2.0.

«Web-сайты web-страницы» - Структура сайта. Web-сервер – серверы Интернета, реализующие WWW-технологию. Web-сайт состоит из web-страниц, объединенных гиперссылками. Браузер – программа для просмотра Web-сайтов. Публикация во Всемирной паутине реализуется в форме Web-сайтов. Web-страница – документ, реализованный по технологии WWW.

«Создание сайтов» - Отличительная особенность — отсутствие количественной методики исследования. Работы, выполненные в этом жанре, часто грешат отсутствием научного подхода. Сравнение исследовательской и проектной работ. План: 1. World Wide Web. Экспериментальная работа описывают научный эксперимент, имеющий известный результат.

Создание сайтов

38 презентаций о создании сайтов
Урок

Информатика

130 тем
Картинки
900igr.net > Презентации по информатике > Создание сайтов > Разработка Web-сайтов с использованием языка разметки гипертекста НТМL