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

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

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

Получите профессию

Бухгалтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Инструктор по туризму

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

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

    1 слайд

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

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

    2 слайд

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

  • 

Компьютер


Компьютер и ПО

    3 слайд

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

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

    4 слайд

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

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

    5 слайд

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

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

    6 слайд

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


  • Компьютер и ПОHa этом сайте вы сможете получить различную информацию о...

    7 слайд

    <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 слайд

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

    10 слайд

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

  • Вставка изображений в Web-страницыНа Web-страницы можно помещать изображения...

    11 слайд

    Вставка изображений в 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">

  • 8.

    13 слайд

    8.

  • 14 слайд

  • Гиперссылки на Web-страницахГиперссылки. Гиперссылки, размещенные на Web-стр...

    15 слайд

    Гиперссылки на Web-страницах

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

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

    16 слайд

    Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок "рука". Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке.
    Гиперссылки могут содержать адреса не только Web-страниц, но и файлов других типов. Активизация таких гиперссылок будет приводить:

    к просмотру изображения в браузере:
    <А HREF="picture.jpg">Изображение</A>

    к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла:
    <А HREF="sound.wav">Звук</A>

    к сохранению файла на локальном компьютере с использованием встроенного в браузер менеджера загрузки файлов:
    <А HREF="Apxив.ziр">Скачать файл</А>

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

    17 слайд

    Панель навигации по сайту
    Создадим папку сайта "Компьютер" и добавим в сайт пустые страницы "Программы", "Словарь", "Комплектующие" и "Анкета". Сохраним их в файлах с именами 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>

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

    20 слайд

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

  • Списки на Web-страницахНумерованные списки. Нумерованный список располагаетс...

    21 слайд

    Списки на 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>

  •  учитель


METHOD=&quot;POST&quot;
ENNCTYPE=&quot;text/plain&quot;&gt;

    23 слайд

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

Получите профессию

Копирайтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Краткое описание документа:

Пошаговая разработка сайта с помощью языка разметки гипертекста HTML по учебнику Н. Д. Угриновича. Тема урока: Web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. Предмет: Информатика. Класс: 8 Ключевые слова: Web- страница, Web- сайт, тег, язык HTML, сервер. Оборудование: компьютерный класс, локальная сеть, Интернет, проектор, экран. Тип урока: изучения новых знаний. Формы работы: фронтальная, коллективная, индивидуальная на компьютере. Цель урока: познакомить учащихся с языком разметки гипертекста HTML, структурой Web-страницы и форматированием текста на Web-странице; начать разработку Web-страницы. Задачи: Организация деятельности учащихся по изучению новой темы; Ознакомление учащихся с понятием сайта, структурой web- страницы, основными тегами; Способствование развитию памяти, внимания, мышления. Ход урока: Организационный момент. Приветствие учащихся. Проверка готовности к уроку. Изучение нового материала. Тема нашего сегодняшнего урока: «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 не различает большие и малые буквы, так что тэги , и эквивалентны. Большинство тэгов спарены: за открывающим тэгом следует соответствующий ему закрывающий тэг, а между ними содержится текст или другие тэги.

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 625 838 материалов в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

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

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 17.06.2020 104
    • PPTX 666.8 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Ефремчева Светлана Федоровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Ефремчева Светлана Федоровна
    Ефремчева Светлана Федоровна
    • На сайте: 3 года и 3 месяца
    • Подписчики: 0
    • Всего просмотров: 81128
    • Всего материалов: 220

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Интернет-маркетолог

Интернет-маркетолог

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Информационные системы и технологии: теория и методика преподавания в профессиональном образовании

Преподаватель информационных систем и технологий

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе

Курс повышения квалификации

Особенности подготовки к сдаче ЕГЭ по информатике и ИКТ в условиях реализации ФГОС СОО

36 ч. — 180 ч.

от 1700 руб. от 850 руб.
Подать заявку О курсе
  • Сейчас обучается 107 человек из 40 регионов

Курс профессиональной переподготовки

Педагогическая деятельность по проектированию и реализации образовательного процесса в общеобразовательных организациях (предмет "Математика и информатика")

Учитель математики и информатики

300 ч. — 1200 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 35 человек из 16 регионов

Мини-курс

Фитнес: теория и практика

5 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Цифровые валюты и правовое регулирование

4 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Психология общения: эффективное общение и решение конфликтов

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 481 человек из 67 регионов