создание Web –сайта на языке HTML»
Я не знаю большей красоты, чем здоровье.
(Г. Гейне)
Практическая работа №5
Тема: «Интернет: создание Web –сайта на языке HTML»
Цель:
Образовательные
знакомство с элементами и структурой HTML документа;
освоение приемов создания Web-страницы на языке HTML;
научиться выполнять форматирование созданных Web-страниц;
закрепить технологические навыки работы с компьютером;
Развивающие
способствовать развитию познавательного интереса у учащихся;
способствовать развитию творческой активности учащихся;
развивать наглядно-образное мышление, память и умение сравнивать и анализировать;
Воспитательные
воспитывать новые методы деятельности в процессе обучения школьников, предполагающие использование здоровьесберегающих технологий на уроках;
способствовать культурному и интеллектуальному развитию учащихся;
воспитание информационной культуры учащихся, внимательности, аккуратности.
Оборудование: ПК, мультимедийных проектор, экран.
Программное обеспечение: операционная система Windows ХР, браузер Internet Explorer или Mozilla Firefox, стандартное приложение Блокнот, графические изображения.
Ход работы.
Организационный момент.
Приветствие. Здравствуйте ребята! Сегодня у нас не обычный урок. Сегодня мы с вами будем учиться создавать продукт, который является основным элементом, или можно сказать структурным «атомом» сети Интернет. А именно – Web-странички и сайты.
Актуализация знаний.
В наше время разработка сайта является одним из главных атрибутов многих предприятий, которые работают не только в Интернете. Практически все компании, которые занимаются продажами и рекламой товара стремятся к тому, чтобы присутствовать во всемирной паутине.
Грамотно разработанный сайт может стать хорошим методом распространения информации о предприятии.
Так вот знания и навыки по созданию и раскрутке сайтов в ближайшем будущем будут наиболее востребованы в мире. А Интернет дает возможность распространять свою деятельность на всю нашу планету. А это означает, что где бы вы не находились, вы можете быть полезны и зарабатывать. Для этого вам нужен более-менее современный компьютер и Интернет.
Содержательная часть.
Теоретическая часть.
Для проверки домашнего задания, я предлагаю вам пройти тест. Приложение 1
По окончанию тестирования, предлагаю вам подвести итог и снять усталость. Дети встают, листочки с тестовыми заданиями лежат на столе. Учитель называет правильную букву ответа. Тот, кто ответил правильно, поднимает обе руки вверх и тянется к потолку, тот кто ответил не правильно разводит руки в стороны и делает повороты туловища вправо-влево. Сосед по парте, на листике с тестовым заданием, ставит «+», если ответ правильный, и «–», если ответ не верный. Подсчитывает количество баллов. Теперь предлагаю вам сесть за компьютеры и приступить к выполнению практического задания
Практическая часть
Инструктаж по ТБ
Цель работы: освоение приемов создания Web-страниц и Web-сайтов на языке HTML: знакомство с элементами HTML и структурой HTML-документа; управление форматами текста и шрифтами; организация гиперсвязей между документами.
Инструктаж по ТБ
Создание WEB-страницы по предложенному материалу
В папке Женева находится текстовый файл «Женева», в котором дается небольшая информация об этом городе и файл картинки «Женева», с изображением самого города.
Создайте в Блокноте WEB-страницу, содержащую этот текст под названием ЖЕНЕВА
Вставить картинку города, расположив ее посередине перед текстом .
3. Выделите в тексте 3 абзаца:
1-ый абзац – цвет шрифта — красный, размер шрифта = 5
2-ой — цвет шрифта — синий, размер шрифта = 3
3-ий – цвет шрифта — зеленый, размер шрифта = 4
Предполагаемый результат.
Физкультминутка
Снятие зрительного напряжения.
Снятие физического и умственного напряжения. Приложение 2
б) Создание сайта
В папке ГОРОСКОП дан WEB-сайт «ГОРОСКОП» для трех знаков зодиака, состоящий из 4-х WEB-страниц.
Создать гиперссылки:
А) с первой страницы сайта на другие страницы сайта
Б) с каждой страницы сайта на главную.
Предполагаемый результат.
Заключительная часть.
Итак, наш урок-конкурс завершен. Подведем итоги. Вы хорошо подготовились к уроку, показали свои знания и умения. На самом деле вы все сегодня молодцы, потому что научились создавать простейшие Web-страницы и сайты. Знания и умения, которые вы получили на уроке, пригодятся вам в жизни, они являются востребованными в современном обществе.
И в заключении хотелось бы добавить: здоровье нельзя улучшить, его можно только сберечь! Берегите себя!
Оценить работу на уроке.
Домашнее задание. Прочитать §29. Ответить на вопросы письменно стр. 163 (5,6)
Тест: Создание сайта — Информатика 8 класс
Тест: Создание сайта — Информатика 8 классАнглийский язык
Астрономия
Белорусский язык
Биология
География
ИЗО
Информатика
История
Итальянский язык
Краеведение
Литература
Математика
Музыка
Немецкий язык
ОБЖ
Обществознание
Окружающий мир
ОРКСЭ
Русский язык
Технология
Физика
Физкультура
Химия
Черчение
Для учителей
Дошкольникам
VIP — доступ
- Предметы »
- Информатика »
- 8 класс »
- Создание сайта
Создание сайта
Тест предназначен для проверки знаний об основах создания страницы сайта на языке гипертекстовой разметки HTML.
Информатика 8 класс | Автор: Соколова Т. А. | ID: 8785 | Дата: 7.10.2016
Помещать страницу в закладки могут только зарегистрированные пользователи
Зарегистрироваться
HTML (HYPER TEXT MARKUP LANGUAGE) является:
Одним из средств при создании Web-страницСистемой программирования
Графическим редактором
Системой управления базами данных
Вопрос № 2
Инструкция браузеру, указывающая способ отображения текста — это:
ФайлКегль
Программный код
Тэг
Вопрос № 3
Программа для создания Web-страницы с использованием языка HTML:
MS WordPaint
Блокнот
Калькулятор
Вопрос № 4
Web-страница (документ HTML) представляет собой:
Текстовый файл с расширением txt или docТекстовый файл с расширением html или htm
Двоичный файл с расширением com или exe
Графический файл с расширением gif или jpg
Вопрос № 5
Программа для просмотра гипертекстовых страниц называется:
СерверПротокол
HTML
Браузер
Вопрос № 6
Гипертекст — это:
Текст очень большого размераТекст, в котором используется шрифт большого размера
Структурированный текст, где возможны переходы по выделенным меткам
Текст, в который вставлены объекты с большим объемом информации
Вопрос № 7
Какие теги определяют видимую часть страницы сайта?
pbody
html
title
Вопрос № 8
Какие тэги задают размер заголовка?
pmg src=»name»
body
h2
Вопрос № 9
Какие тэги создают абзац в документе?
body
img src=»name»
html
Вопрос № 10
Какие тэги помещают название документа в оглавление программы просмотра web-страниц? Информация, размещенная внутри данного контейнера тегов предназначена для поисковых систем в сети.
bodyhr
title
head
Показать ответы
Получение сертификата
о прохождении теста
Доступно только зарегистрированным пользователям
© TestEdu.ru 2013-2023
E-mail администратора: [email protected]
Что HTML используется для создания?
Для чего используется HTML?
- HTML, что означает Язык гипертекстовой разметки , используется для создания структурированных текстов и создания веб-страниц в Интернете.
- Теги — это специальные коды в документах HTML, которые обозначаются угловыми скобками.
- Каждый документ HTML начинается с тега , а заканчивается тегом .
- Указанная выше веб-страница была полностью создана с помощью HTML и CSS . Структура страницы обеспечивается HTML, а визуальное и звуковое оформление обеспечивается CSS для различных устройств. HTML и CSS являются строительными блоками для создания веб-страниц и веб-приложений.
Синтаксис
Что такое HTML?
- HTML (язык гипертекстовой разметки) — это компьютерный язык, который используется для создания большинства веб-страниц и онлайн-приложений. Язык разметки — это набор символов, сообщающих веб-серверам о стиле и структуре документа, а гипертекст — это часть текста, которая ссылается на другие части текста.
- Он позволяет веб-пользователям использовать компоненты, теги и атрибуты для создания и организации разделов, абзацев и ссылок. Однако HTML не считается языком программирования, поскольку он не может развивать динамические функции.
HTML имеет множество применений, в том числе:
- Разработка веб-сайтов: HTML используется для создания веб-страниц, которые отображаются в Интернете. Код HTML используется разработчиками для определения того, как браузеры отображают элементы веб-страницы, такие как текст, гиперссылки и мультимедийные файлы.
- Интернет-навигация: HTML широко используется для встраивания гиперссылок, чтобы пользователи могли просто перемещаться и вставлять ссылки между похожими страницами и веб-сайтами.
- Веб-документация: HTML похож на Microsoft Word и позволяет упорядочивать и форматировать документы.
Анатомия элемента HTML
Основные компоненты нашего элемента следующие:
Компонент | Описание |
---|---|
Открывающий тег | Он состоит из имени элемента (в данном случае p), заключенного в открывающую и закрывающую угловые скобки. Это указывает, где элемент начинается или начинает действовать. |
Закрывающий тег | Закрывающий тег похож на открывающий, за исключением того, что он содержит косую черту перед именем элемента. Указывает конец элемента. Одна из самых распространенных ошибок новичков — это отсутствие закрывающего тега, что может привести к странным результатам. |
Содержимое | Это содержимое элемента, в нашем случае это просто текст. |
Элемент | Он состоит из открывающего тега, закрывающего тега и содержимого. |
Элементы также могут иметь следующие атрибуты:
Атрибуты — это дополнительные сведения об элементе, которые не должны отображаться в содержимом. Здесь атрибут имя — это класс , а значение атрибута — это имя-человека . Атрибут класса позволяет вам присвоить элементу неуникальный идентификатор, который затем можно использовать для нацеливания на него (и любые другие элементы с тем же значением класса) с информацией о стиле и другой информацией.
В атрибуте всегда должно присутствовать следующее:
- Между ним и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов) должен быть пробел.
- За именем атрибута следует знак равенства.
- Значение атрибута заключено в кавычки, как открытые, так и закрытые.
Примечание. Значения простых атрибутов, которые не содержат ASCII пробелов (или любых символов » ‘ ` = < >), можно не заключать в кавычки, хотя рекомендуется заключать все значения атрибутов в кавычки, чтобы сделать код более последовательным и очистить.
Элементы вложения
Вы также можете вкладывать элементы внутрь других элементов, что называется вложением.Если бы мы хотели сказать, что мое полное имя Шах Хан, мы могли бы окружить слово Shah в элементе , что означает, что фраза должна быть сильно выделена:
Однако вы должны убедиться, что ваши элементы правильно вложены. В предыдущем примере мы сначала открыли элемент
, а затем элемент ; поэтому мы должны сначала закрыть элемент . Следующее утверждение неверно: Некоторые элементы не содержат содержимого, что известно как пустых элементов . Рассмотрим элемент . Он содержит два атрибута, но не имеет закрывающего тега и внутреннего содержимого. Это связано с тем, что элемент изображения не инкапсулирует содержимое, чтобы воздействовать на него. Его функция заключается в том, чтобы встроить изображение в HTML-страницу, где оно появляется. В этом разделе рассматривается, как отдельные элементы объединяются для формирования целой HTML-страницы. Выход … определяет абзац. Все, что упоминается между и Пустые элементы
Базовая веб-страница, написанная на HTML
Описание каждого тега
Тег Описание s браузер версии HTML, в которой написан документ. В файле HTML это объявление появляется в первой строке. … Этот элемент включает весь материал на странице и иногда называется корневым элементом. . .. Элемент вставляется между тегами и и является контейнером для метаданных (информации о данных). Метаданные — это информация о HTML-документе. Метаданные не отображаются. Метаданные часто определяют заголовок документа, набор символов, стили, скрипты и другую метаинформацию. Элемент charset указывает кодировку символов документа HTML. Спецификация HTML5 поощряет веб-разработчиков использовать набор символов UTF-8, который содержит почти все знаки и символы мира! Тег … Тело документа определяется тегом. Элемент включает в себя все содержимое HTML-документа, включая заголовки, абзацы, графику, гиперссылки, таблицы, списки и т. д. Это тег разделения, который используется в HTML для создания разделов контента на веб-странице, например (текст, изображения, верхний и нижний колонтитулы, панель навигации). , и т. д.). Тег div чаще всего используется в веб-разработке, поскольку он позволяет нам разделять данные на веб-страницах и создавать отдельные разделы для определенных данных или функций. … Тег определяет гиперссылку, которая используется для соединения двух страниц. Атрибут href является наиболее важным атрибутом элемента , который указывает место назначения ссылки. Тег …
,…
,…
Элемент заголовка подразумевает все изменения шрифта, разрывы абзаца до и после заголовка и любые пробелы, необходимые для отображения заголовка. h2, h3, h4, h5, h5 и h6 — компоненты заголовка, где h2 — самый высокий (или самый важный) уровень, а h6 — самый низкий.
Приложения HTML
Разработка веб-страниц HTML используется для создания веб-страниц, которые отображаются в Интернете. Каждая страница имеет набор тегов HTML, включая гиперссылки, ведущие на другие страницы. Каждая веб-страница, которую мы видим в Интернете, написана в той или иной форме HTML-кода.
Создание веб-документа HTML и его основные концепции с помощью тегов и DOM, то есть объектная модель документа, доминируют при создании документов в Интернете. Теги HTML добавляются до и после предложений, чтобы определить их формат и расположение на странице. Заголовок, заголовок и тело — это три раздела веб-документа. Название и любые другие значимые ключевые слова включаются в заголовок документа. Заголовок браузера можно просмотреть, а основной раздел веб-сайта — это основная часть веб-сайта, доступная зрителю. Все три сегмента разработаны и сгенерированы с использованием элементов HTML. Каждый раздел имеет свой собственный набор тегов, которые отображаются специально для поддержки концепций заголовка, заголовка и основной части в цикле.
Интернет-навигация Это одно из самых важных и революционных применений HTML. Эта навигация стала возможной благодаря использованию идеи гипертекста. По сути, это текст, который ссылается на другие веб-сайты или текст, и когда пользователь нажимает на него, пользователь перенаправляется на указанный текст или веб-сайт. HTML широко используется для встраивания гиперссылок на онлайн-страницы. Пользователи могут просто перемещаться между веб-страницами и веб-сайтами, размещенными на разных серверах.
Режущая кромка HTML5 с его стандартами и API используется для внедрения некоторых из самых последних тенденций в индустрии создания веб-сайтов. Например, библиотеки Polyfill одинаково хорошо поддерживаются устаревшими браузерами. Modernizr — это пакет JavaScript, который может обнаруживать характеристики, позволяющие разработчику динамически загружать библиотеки полифиллов по мере необходимости.
Адаптивные изображения на веб-страницах HTML используется для создания веб-страниц с адаптивными изображениями, которые отображаются в Интернете. Запросы в HTML-приложениях можно настроить на использование адаптивных изображений на самом базовом уровне. Разработчик может полностью контролировать то, как пользователь отображает изображение, комбинируя атрибут srcset элемента img в HTML с элементами изображения. Элемент img теперь может загружать несколько видов изображений разного размера. Элемент изображения упрощает определение правил; мы можем объявить элемент img с источником по умолчанию, а затем указать источник для каждого условия.
Хранилище на стороне клиента Раньше пользователь не мог сохранять данные браузера, которые сохранялись бы между сеансами. Для выполнения этого требования можно использовать либо серверную инфраструктуру, либо пользовательские файлы cookie. Хранилище на стороне клиента возможно с HTML5 благодаря localStorage и IndexDB. Каждая из этих двух стратегий имеет собственный набор стандартов и характеристик. localStorage предоставляет хранилище хеш-таблиц на основе строк. Его API прост, разработчики имеют доступ к операциям setItem, getItem и removeItem. С другой стороны, IndexDB — это более обширное и превосходное хранилище данных на стороне клиента. База данных IndexDB может быть расширена с разрешения пользователя.
Использование автономных возможностей После того как данные сохранены в браузере, разработчик может придумать способ, чтобы программа продолжала работать, даже когда пользователь отключен. HTML5 имеет механизм кэширования приложений, который определяет, как браузер обрабатывает офлайн-ситуации. Кэш приложения, отвечающий за работу в автономном режиме, состоит из нескольких компонентов, таких как методы API для создания обновления, чтения файла манифеста и событий. Разработчик может использовать атрибут HTML5, чтобы определить, находится ли приложение в сети. В файле манифеста кэша приложения веб-сайта разработчик также может указать, какой браузер обрабатывает ресурсы для автономного использования. На автономные ресурсы также можно ссылаться в файле манифеста.
Поддержка ввода данных с HTML Стандарт HTML5 и набор API могут помочь при вводе данных. Поскольку новые стандарты HTML5 внедряются в браузеры, разработчики могут просто добавлять теги к тегу, указывая обязательные поля, содержимое, формат данных и т. д. HTML5 принес несколько новых технологий, обеспечивающих работу экранной клавиатуры, проверки и других возможностей ввода данных. , что позволяет конечным пользователям более эффективно вводить данные.
Использование для разработки игр До появления HTML5 разработка игр ограничивалась Flash и Silverlight. Поскольку браузеры поддерживают новые спецификации HTML5, такие как CSS3, и сверхбыстрый движок JavaScript, обеспечивающий новый богатый опыт, HTML5 может сделать реальностью разработку игр, которая раньше была прерогативой Flash и Silverlight.
Использование собственных API для расширения веб-сайта HTML5 представляет ряд новых возможностей и инструментов, которые ранее были невообразимы. Множество новых API-интерфейсов для файловых систем, геолокации, перетаскивания, обработки событий, клиентского хранилища и т. д. делают использование HTML5 проще, чем когда-либо прежде. Другие API, такие как полноэкранный режим, видимость и захват мультимедиа, можно использовать для улучшения работы приложения.
Заключение
- HTML (язык гипертекстовой разметки) используется для организации, структурирования и отображения контента на веб-странице.
- HTML — это язык разметки. Языки разметки не совпадают с языками программирования .