Главная / Информатика / Презентация на тему "Разработка сайта с помощью языка разметки гипертекста HTML" (8 класс)

Презентация на тему "Разработка сайта с помощью языка разметки гипертекста HTML" (8 класс)

Разработка сайта с помощью языка разметки гипертекста HTML
1 урок Создать папку «Сайт» Открыть папку и создать в ней документ с помощью ...
  Компьютер   Компьютер и ПО
4. Сохранить документ следующим образом: 5. ФАЙЛ	 Сохранить как		имя файла/ ...
Вид страницы в блокноте Вид Web-страницы в браузере Вид Web-страницы
Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного ...
Компьютер и ПО    Ha этом сайте вы сможете получить различную информацию о ...
Компьютер     Все о компьютере    На сайте вы сможете получить различную ин...
Вид web-страницы в браузере
Вставка изображений в Web-страницы На Web-страницы можно помещать изображения...
Если файл находится в другой папке на данном локальном компьютере, то значени...
8.
Гиперссылки на Web-страницах Гиперссылки. Гиперссылки, размещенные на Web-стр...
Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем с...
Панель навигации по сайту Создадим папку сайта "Компьютер" и добавим в сайт п...
На домашней странице сайта разместим указатели гиперссылок на каждую страницу...
Гиперссылка на адрес электронной почты Полезно на домашней странице сайта соз...
Вид web-страницы в блокноте
Списки на Web-страницах Нумерованные списки. Нумерованный список располагаетс...
Маркированные списки. Маркированный список располагается внутри контейнера ,...
  учитель   METHOD="POST" ENNCTYPE="text/plain">
1 из 23

Описание презентации по отдельным слайдам:

№ слайда 1 Разработка сайта с помощью языка разметки гипертекста HTML
Описание слайда:

Разработка сайта с помощью языка разметки гипертекста HTML

№ слайда 2 1 урок Создать папку «Сайт» Открыть папку и создать в ней документ с помощью тек
Описание слайда:

1 урок Создать папку «Сайт» Открыть папку и создать в ней документ с помощью текстового редактора «Блокнот» с именем «1.txt» Открыть документ и ввести теги, определяющие структуру Web-страницы:

№ слайда 3   Компьютер   Компьютер и ПО
Описание слайда:

<html> <head> <title>Компьютер</title> </head> <body> Компьютер и ПО </body> </html>

№ слайда 4 4. Сохранить документ следующим образом: 5. ФАЙЛ	 Сохранить как		имя файла/ ind
Описание слайда:

4. Сохранить документ следующим образом: 5. ФАЙЛ Сохранить как имя файла/ index.html тип файла /все файлы 6. Открыть и просмотреть получившуюся Web-страницу в браузере

№ слайда 5 Вид страницы в блокноте Вид Web-страницы в браузере Вид Web-страницы
Описание слайда:

Вид страницы в блокноте Вид Web-страницы в браузере Вид Web-страницы

№ слайда 6 Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цве
Описание слайда:

Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов можно задать различные параметры форматирования текста. 7. Открыть файл «1.txt» для редактирования

№ слайда 7 Компьютер и ПО    Ha этом сайте вы сможете получить различную информацию о ком
Описание слайда:

<FONT COLOR="blue"> <Н1 ALIGN="center"> Компьютер и ПО </Н1> </FONT> <HR> <Р ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</Р>  <Р ALIGN="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</Р>

№ слайда 8 Компьютер     Все о компьютере    На сайте вы сможете получить различную инфор
Описание слайда:

<html> <head> <title>Компьютер</title> </head> <body> <font color="blue"> <h1 align="center"> Все о компьютере </h1> </FONT> <hr> <p align="left">На сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</Р> <p align="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету</p> </body> </html> Вид web-страницы в блокноте

№ слайда 9
Описание слайда:

№ слайда 10 Вид web-страницы в браузере
Описание слайда:

Вид web-страницы в браузере

№ слайда 11 Вставка изображений в Web-страницы На Web-страницы можно помещать изображения, х
Описание слайда:

Вставка изображений в Web-страницы На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG. Вставка изображений. Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например: <IMG SRC="computer.gif''>

№ слайда 12 Если файл находится в другой папке на данном локальном компьютере, то значением
Описание слайда:

Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например: <IMG SRC="C:\computer\computer.gif"> Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа). На домашней странице сайта "Компьютер" логично разместить изображение компьютера. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид (рис. 6.28): <IMG SRC="computer.gif" ALIGN="right">

№ слайда 13 8.
Описание слайда:

8.

№ слайда 14
Описание слайда:

№ слайда 15 Гиперссылки на Web-страницах Гиперссылки. Гиперссылки, размещенные на Web-страни
Описание слайда:

Гиперссылки на Web-страницах Гиперссылки. Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки. Гиперссылка создается с помощью универсального тэга <А> и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница: <А HREF="Адрес">Указатель ссылки</А> Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например: <А HREF="f ilename.htm">Указатель ссылки</А> Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например: <А HREF="http://www.server.ru/Web-сайт/ filename. htm">Указатель ссылки</А>

№ слайда 16 Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссыл
Описание слайда:

Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок "рука". Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке. Гиперссылки могут содержать адреса не только Web-страниц, но и файлов других типов. Активизация таких гиперссылок будет приводить: к просмотру изображения в браузере: <А HREF="picture.jpg">Изображение</A> к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла: <А HREF="sound.wav">Звук</A> к сохранению файла на локальном компьютере с использованием встроенного в браузер менеджера загрузки файлов: <А HREF="Apxив.ziр">Скачать файл</А>

№ слайда 17 Панель навигации по сайту Создадим папку сайта &quot;Компьютер&quot; и добавим в сайт пуст
Описание слайда:

Панель навигации по сайту Создадим папку сайта "Компьютер" и добавим в сайт пустые страницы "Программы", "Словарь", "Комплектующие" и "Анкета". Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие "пустые" страницы должны иметь заголовки, но могут пока не иметь содержания: <HTML> <HEAD> <ТITLЕ>Заголовок страницы</ТITLЕ> </HEAD> <BODY> </BODY> </HTML>

№ слайда 18 На домашней странице сайта разместим указатели гиперссылок на каждую страницу са
Описание слайда:

На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход. Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации. Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации: <Р ALIGN="center"> [<А HREF="software . htm">Программы</A>]    [<A HREF="glossary.htm">Словарь</A>]    [<A HREF="hardware.htm">Комплектующие</А>]   [<A HREF="anketa.htm">Aнкетa</A>]  </P>

№ слайда 19 Гиперссылка на адрес электронной почты Полезно на домашней странице сайта создат
Описание слайда:

Гиперссылка на адрес электронной почты Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты  с указанием протокола (mailto:)и вставить ее в контейнер <ADDRESS></ADDRESS>,  «href» написать адрес электронной почты с указанием протокола (mailto:который задает стиль абзаца, принятый для указания адреса, например: <ADDRESS> <А HREF="mailto:username@server.ru">E-mail: username@server.ru</A> </ADDRESS>

№ слайда 20 Вид web-страницы в блокноте
Описание слайда:

Вид web-страницы в блокноте

№ слайда 21 Списки на Web-страницах Нумерованные списки. Нумерованный список располагается в
Описание слайда:

Списки на Web-страницах Нумерованные списки. Нумерованный список располагается внутри контейнера <OL></OL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и ДР.: <OL> < LI >Системные программы < LI >Прикладные программы < LI >Системы программирования </OL>

№ слайда 22 Маркированные списки. Маркированный список располагается внутри контейнера , а
Описание слайда:

Маркированные списки. Маркированный список располагается внутри контейнера <UL></UL>, а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность): <UL TYPE="square"> < LI >текстовые редакторы; < LI >графические редакторы; < LI >электронные таблицы; < LI >системы управления базами- данных. </UL>

№ слайда 23   учитель   METHOD=&quot;POST&quot; ENNCTYPE=&quot;text/plain&quot;&gt;
Описание слайда:

<INPUT TYPE="radio" NAME="group" VALUE="учитель"> учитель <BR> <FORM ACTION=MAILO:”username@server.ru”> METHOD="POST" ENNCTYPE="text/plain"> <INPUT TYPE="submit" VALUE="Отправить"> </body> </html>

Презентация на тему "Разработка сайта с помощью языка разметки гипертекста HTML" (8 класс)
  • Информатика
Описание:

Пошаговая разработка сайта с помощью языка разметки гипертекста HTML по учебнику Н. Д. Угриновича.

Тема урока: Web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице.

Предмет: Информатика.

Класс: 8

Ключевые слова: Web- страница, Web- сайт, тег, язык HTML, сервер.

Оборудование: компьютерный класс,  локальная сеть, Интернет, проектор, экран.

Тип урока: изучения  новых знаний. 

Формы работы: фронтальная, коллективная, индивидуальная на компьютере.

Цель урока: познакомить учащихся с языком разметки гипертекста HTML, структурой Web-страницы и форматированием текста на Web-странице;  начать разработку Web-страницы.

Задачи:

  1. Организация деятельности учащихся по изучению новой темы;
  2. Ознакомление  учащихся  с понятием сайта, структурой web- страницы, основными тегами;
  3. Способствование развитию  памяти, внимания, мышления.

Ход урока:

  1. Организационный момент.

Приветствие учащихся. Проверка готовности к уроку.

  1. Изучение нового материала.

   Тема нашего сегодняшнего урока: «Web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице». Основные моменты и определения учащиеся записывают в тетрадях.

Итак, что же такое Web-сайт и Web-страница?

Собрание страниц, объединенных некоторой общей тематикой и помещенных, как правило, на одном компьютере, называют Web-узлом или сайтом. Узлы Web подобны книгам, а Web-страницы - страницам этих книг. Компьютеры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сайтов, называются серверами. На одном сервере может размещаться множество Web-узлов или сайтов.

Чтобы опубликовать в Интернете страницу, содержащую некоторую информацию, используется специально разработанный для этого язык HTML.

HTML – HyperText Markup Language (Язык разметки гипертекста) представляет собой довольно простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части – заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.

    Создавать Web-страницы можно с помощью специальных программ-редакторов, автоматически генерирующих код HTML, работа с которыми не требует знания языка разметки.

Документ в окне с кодом HTML - это текстовый документ специального формата. Все файлы этого формата имеют расширение .html или .htm. В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например , , . Такие элементы разметки называются тэгами. Тэги бывают одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов:

•       левой угловой скобки <;

•       необязательного символа слэш /, который означает, что тэг является конечным тэгом, закрывающим некоторую структуру, например, . В этом смысле можно читать символ / как конец некоторого элемента разметки, например, строки или абзаца;

•       имени тэга, например, html;

•       необязательных атрибутов. Тэг может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например, align="center";

•       правой угловой скобки >.

Таким образом, открывающий тэг , стоящий вначале документа HTML и означающий его начало, состоит из имени html и двух угловых скобок < >, а тэг , находящийся в конце Web-документа, кроме указанных элементов содержит также символ слэш /, означающий закрывающий тэг и указывающий на конец документа.

В тэгах могут использоваться только символы латинского алфавита, а в значениях атрибутов - любые символы. Если в качестве значений атрибута используются, например, символы кириллицы, то они должны быть заключены в кавычки, например name="Раздел 1".

Язык HTML не различает большие и малые буквы, так что тэги ,  и  эквивалентны.

 

Большинство тэгов спарены: за открывающим тэгом следует соответствующий ему закрывающий тэг, а между ними содержится текст или другие тэги.

Автор Индиенкова Асия Салаватовна
Дата добавления 16.12.2014
Раздел Информатика
Подраздел Презентации
Просмотров 1657
Номер материала 7277
Скачать свидетельство о публикации

Оставьте свой комментарий:

Введите символы, которые изображены на картинке:

Получить новый код
* Обязательные для заполнения.


Комментарии:

↓ Показать еще коментарии ↓