Презентация "Язык разметки гипертекстовых документов HTML" 8 класс

Рабочий лист по информатике

Файл будет скачан в форматах:

pdf
docx

06.05.2025

СПО

11 класс

Материал разработан автором:

Федорищенко Татьяна Васильевна

преподаватель

Разработок в маркетплейсе: 1

Покупателей: 1

Об авторе

Категория/ученая степень: Высшая категория

Место работы: ГАПОУ «УТОиТ имени Героя России А. В. Рассказы»

Тысячи путей ведут к заблуждению, к истине – только один" Ж.-Ж. Руссо. Процесс получения знаний - сложный процесс. Поиск истины в ходе учебной деятельности проходит через множество заблуждений, которые определены свободой выбора путей, сложностью решаемых проблем, ограниченностью знаний в определенное время, применением старых методов. "Трудно понять, каким другим путем можно прийти к истине и овладеть ею, если не копать и не разыскивать её как золото и срытый клад" Джон Локк "Через сомнения приходим к истине" Марк Туллий Цицерон

Подробнее об авторе

Настоящая методическая разработка опубликована пользователем Федорищенко Татьяна Васильевна. Инфоурок является информационным посредником

Краткое описание методической разработки

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

Файл будет скачан в форматах:

pdf
docx

СПО

11 класс

06.05.2025

Материал разработан автором:

Федорищенко Татьяна Васильевна

преподаватель

Разработок в маркетплейсе: 1

Покупателей: 1

Об авторе

Категория/ученая степень: Высшая категория

Место работы: ГАПОУ «УТОиТ имени Героя России А. В. Рассказы»

Подробнее об авторе

Презентация "Язык разметки гипертекстовых документов HTML" 8 класс

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

Скачать материал "Презентация "Язык разметки гипертекстовых документов HTML" 8 класс"

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

Управление внедорожными автотранспортными средствами категории А-II

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

Математика и информатика: теория и методика преподавания в профессиональном образовании

Преподаватель математики и информатики

500/1000 ч.

699 руб.

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

Сейчас обучается 59 человек из 28 регионов
Этот курс уже прошли 91 человек

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

Компьютерная грамотность для пенсионеров

36 ч. — 180 ч.

699 руб.

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

Этот курс уже прошли 40 человек

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

Теоретические и методологические основы преподавания информатики с учётом требований ФГОС ООО

72 ч. — 180 ч.

699 руб.

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

Сейчас обучается 297 человек из 60 регионов
Этот курс уже прошли 2 183 человека

Смотреть ещё 5 784 курса

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

1 слайд

«Язык разметки гипертекстовых документов HTML »
2 слайд

Введение
Каждый день всемирная паутина поглощает нас все больше и больше. Количество сайтов так же неуклонно растет. Для того, чтобы создать свой сайт необходимо знать язык HTML.
3 слайд

HTML-документ –
это обычный текстовый
документ, содержащий
специальные разметочные указатели (тэги).
HTML-файл имеет расширение
.htm или .html
4 слайд

Что означают эти буквы?(HTML)
Hyper Text Markup Language
Язык гипертекстовой разметки.
5 слайд

Общее представление

Язык HTML был разработан британским учёным
Тимом Бернерсом –Ли.
Приблизительно в 1989—1991 годах.

HTML создавался как язык для обмена научной и технической документацией,
6 слайд

Для чего нужна разметка в HTML ?
Именно язык гипертекстовой разметки HTML, ответственен за появление многих чудесных WEB-страничек, WEB-сайтов, наполненных текстами, картинками, звуками, анимацией, видеоклипами, ссылками…

Именно он определяет:
Содержание.
Внешний вид,
Направленность странички.
7 слайд

Как создать ?
Для создания HTML документов используют текстовые редакторы (например Блокнот), текстовые процессоры (Word), редакторы тегов HTML и визуальные HTML-редакторы. Придерживаясь определённого стандарта и записав в текстовом файле HTML код, сохранив на жёстком диске и изменив расширение на .html или .htm вы получите полноценную web страничку.
8 слайд

В каких средах работаем?
Чтобы написать HTML- код необходимо открыть приложение Блокнот (текстовый редактор)
Сохранить HTML- код так, чтобы страницу можно было просмотреть в Web-браузере:
Файл, Сохранить как (появится диалоговое окно)
Где? В вашей папке сайта My Site
Имя файла? «index.html» Сохранить
9 слайд

Что такое тэги?
Тэг –инструкция браузеру(программа, которая предназначена для просмотра веб-страниц), указывающая способ отображения текста., (специальное слово), написанное на английском языке, заключенное в угловые скобки.

Например: <html>,
10 слайд

ТЭГ
одиночный
парный
(контейнер)
открывающий < >
закрывающий </ >
11 слайд

Тэг всегда заключен в специальные символы < >

Например: <BR>
ПРАВИЛА ЗАПИСИ ТЭГОВ
12 слайд

Основные тэги
пример
13 слайд

Структура документа
Структура простейшего HTML документа выглядит следующим образом:
<html>
<head>
<title> Заголовок страницы </title>
</head>
<body>
14 слайд

Заголовочная часть
<head>
</head>
HTML
<head>
<title>Информатика</title>
</head>
15 слайд

HTML
Текст заключенный между тэгами <title>Информатика</title>, отобразился в строке Имени документа
16 слайд

Основная часть
<body>
<h1>Мы приветствуем Вас!</h1>
</body>
<h1> тэги заголовка первого уровня на
</h1> Web – странице,
в основной части страницы.

HTML
17 слайд

Вот результат сохраненной Web – странички и просмотренной в браузере
HTML
18 слайд

ПРИМЕР HTML-ДОКУМЕНТА
<HTML>
<HEAD>
<ТIТLЕ> Моя первая Интернет-страничка! </TITLE>
</HEAD>
<BODY>
Это моя первая проба сил в Web-дизайне.
Может быть, страничка пока еще получилась
не очень красивой, но ведь она работает!!!
</BODY>
</HTML>
19 слайд

Практическая часть
Создайте свою страничку по примеру приведённому ниже
20 слайд

Редактирование текста

Добавление параграфа «выравниваня»
Пример: «по правому краю», «по левому краю», «по центру»
для того чтобы на странице сайта разбить текст на параграфы, необходимо воспользоваться тегом <p> .
<p align="center">Привет мир!!!</p>по центру:
<p align="left">Привет мир!!!</p>по левому краю:
<p align="right">Привет мир!!!</p>по правому краю

По обоим краям документа :<p align="justify">Привет мир!!! - здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p>
21 слайд

Вот что должно получиться
<html>
<head>
<title>Мой первый сайт </title>
</head>
<body>
<p align="center">Привет мир!!!</p>

<p align="justify">
Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</p>
</body>
</html>
22 слайд

Меняем размер «заголовка» <h>
В наборе тегов html языка имеется шесть типов заголовков:
<h1> Привет мир!!! </h1>
<h2> Привет мир!!! </h2>
<h3> Привет мир!!! </h3>
<h4> Привет мир!!! </h4>
<h5> Привет мир!!! </h5>
<h6> Привет мир!!! </h6>
23 слайд

Тег <font> помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут
size - размер.
ишется и выглядит это так:
<font size="+4">Привет мир!!!</font>
<font size="+2">Привет мир!!!</font>
<font size="+0">Привет мир!!!</font>
<font size="-1">Привет мир!!! </font>
<font size="-2">Привет мир!!!</font>
Меняем размер «шрифта» <font>
24 слайд

Вот что должно получиться
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<center><h2>Привет мир!!!</h2></center>

<p align="justify">
<font size="+1">Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!</font>
</p>
</body>
</html>
25 слайд

Спасибо за внимание!!!

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

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

7 307 273 материала в базе

Найти материалы

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

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

docx

Конспект урока "Числовые данные" 2 класс

13.07.2016
77
1

docx

Конспект урока «Кодирование графической информации» 10 класс

12.07.2016
50
0

docx

Конспект урока "Порядок и хаос: визуализация числовых данных (на примере создания диаграмм и графиков)" 5 класс

12.07.2016
35
0

docx

План-конспект урока «Растровая и векторная графика» 9 класс

12.07.2016
39
0

docx

Конспект урока "Реляционные базы данных" 11 класс

11.07.2016
120
5

docx

Конспект урока "Введение в информатику" 8 класс

11.07.2016
331
1

docx

Конспект урока "Информация"

11.07.2016
34
0

pptx

Презентация "Компьютерные сети и телекоммуникации"

11.07.2016
88
5

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

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

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

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

- 28.07.2015 27
- PPTX 462 кбайт
- Оцените материал:
Настоящий материал опубликован пользователем Крючкова Надежда Валериановна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

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

Крючкова Надежда Валериановна
- На сайте: 2 месяца
- Подписчики: 0
- Всего просмотров: 7536
- Всего материалов: 87