Россия, с.Завьялово ,Алтайский край
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Была в сети 30.11.2022 20:04
Мамаева Галина Арсентьевна
учитель математики и информатики
6 910
5 419 
Местоположение
Специализация
Практическая работа "Основы HTML"
Категория:
Информатика
28.10.2022 13:49
Учебник:
Информатика (базовый уровень) ООО «БИНОМ. Лаборатория знаний» Угринович Н.Д. 11 класс 2018. - 271 с.
Просмотр содержимого документа
«Практическая работа "Основы HTML"»
Практическая работа 5.3
Занятие № 1. Создание HTML-документа
Знакомство со структурой HTML-документа.
HTML-документ заключается в теги HTML и HTML.
Между этими тегами два блока:
- блок заголовка HEAD HEAD - содержит описание параметров, используемых при отображении документов, но не отображающихся в окне обозревателя. Например:
TITLE Название страницы TITLE .
- тело документа BODY BODY - содержит текст, предназначенный для отображения обозревателем, и теги, указывающие на способ форматирования текста, определяющие графическое оформление, задающие параметры гиперссылок.
Задание:
а) создать HTML-документ:
HTML
HEAD
TITLE Название страницы TITLE
HEAD
BODY
Пример страницы
BODY
HTML
б) Сохранить документ в файле с именем index.html в своей папке.
в) Просмотреть HTML-документ в обозревателе .
Логическое форматирование.
а) Оформление заголовков:
Hn Hn n - целое число от 1 до 6, определяет уровень заголовка (1 - высокий уровень, 6 - низкий уровень). При оформлении заголовков можно использовать атрибут выравнивания -
Hn align=left Hn - выравнивание по левому краю
Hn align=center Hn - выравнивание по центру
Hn align=right Hn - выравнивание по правому краю
б) Оформление параграфа (абзаца):
P P или с выравниванием P align=...... P
в) Перевод на новую строку:
BR
Задание:
а) внести изменения в файл index.html так, чтобы на экране обозревателя были отображены образцы 6 уровней заголовков, три абзаца, выровненные тремя способами, четверостишие, оформленное с помощью тега перевода на новую строку.
б) Сохранить новый документ в файле с именем index1.html в рабочей папке.
в) Просмотреть HTML-документ в обозревателе .
Текст для создания документа
Самуил Маршак(заголовок в 6 уровнях)
(Апрель! Апрель!
На дворе звенит капель.
По полям бегут ручьи,
На дорогах лужи.)- по левому краю
(Скоро выйдут муравьи
После зимней стужи.
Пробирается медведь) – по центру
(Сквозь густой валежник.
Стали птицы песни петь
И расцвел подснежник.)- по правому краю
Практическая работа 5.3
Занятие № 2. Физическое форматирование (форматирование шрифта) а)strong strong (B B) полужирное начертание
emem ( I I) курсивное начертание
U U подчеркнутый шрифт
FONT size=число color=цвет face= «тип шрифта» FONT - задание параметров шрифта.
атрибут size – размер шрифта, целое число от 1 до 7, по умолчанию 3
атрибут color – цвет шрифта, название цвета по-английски или 16-ричный код (например: #FF00FF)
атрибут face – название типа шрифта
Атрибуты можно использовать в любом сочетании.
Горизонтальный разделитель:
HR size=число width=число color=цвет - горизонтальная линия, разделяющая части документа, можно использовать без атрибутов или с атрибутами в любом сочетании,
size – толщина линии в пикселях,
width – ширина линии в пикселях,
color – цвет линии (название или код цвета).
Задание:
а) создать HTML-документ в котором будут заданы параметры форматирования текста
б) Сохранить документ в файле с именем 2.html в рабочей папке
практическая работа 5.3.
в) Просмотреть HTML-документ в обозревателе Internet Explorer.
Пример текста:
В
окзал и Bell-vue
У
пристани, на берегу моря, устроен с 1849 года красивый вокзал, где желающие могут иметь удобное помещение в особых комнатах. Отдельные комнаты можно иметь и в строении Bell-vue на берегу моря, вблизи вокзала. Вид на море с балконов Bell-vue вполне
оправдывает это название.
В продолжение летнего сезона в вокзале и Bell-vue помещается кафе-ресторан. В обширной, светлой зале вокзала устраиваются петергофскими жителями летом балы, в саду вокзала играет оркестр.
Текст с перечислением – список. Выделяют два основных вида списков – маркированный и нумерованный. Маркированный список используют, если порядок перечисления не важен, нумерованный – если порядок перечисления важен.
а) Оформление маркированного списка:
| UL | атрибут type – вид маркера (вводится в теге UL) |
б) Оформление нумерованного списка:
| OL | атрибут type – вид нумерации (вводится в теге OL) |
Атрибуты записываются в открывающиеся теги UL или OL.
Задание:
а) оформить HTML-документ содержащий 6 списков (расположить друг под другом):
| Дни недели: | Времена года: | Летние месяцы: |
| Понедельник Вторник Среда Четверг Пятница Суббота Воскресенье | Зима Весна Лето Осень
| Июнь Июль Август |
| Виды информации, воспринимаемой человеком: | Виды информации, воспринимаемой компьютером: | Виды компьютерных сетей: |
| Зрительная Слуховая Осязательная Обонятельная Вкусовая | Числовая Символьная Графическая Звуковая Видео | Локальные Корпоративные Региональные Глобальные |
.
Практическая работа 5.3
В практическом HTML-программировании таблицы совершенно незаменимы для создания левых и правых полей страницы, выравнивания элементов на экране, многоколонной верстки, наложения картинок друг на друга, для отображения на экране табличного материала. Таблица представляет собой прямоугольник, расчерченный на клетки, образующие столбцы и строки.
Таблица задается командой TABLE…TABLE . Внутри этих тегов задаются строки командами TR…TR, внутри строк задаются ячейки командами TD…TD. Таким образом, по строкам задается вся структура таблицы:
| | |||||||||||||||||||||||||
Атрибуты для тегов
| : border=число - толщина линии bordercolor= цвет - цвет линии bgcolor=цвет - цвет заливки фона Атрибут width=число (или %) – ширина таблицы или ячейки в пикселях Задание:
б) Сохранить документ в файле с именем 4.html в рабочей папке. Браузеры «понимают» три графических формата – gif, jpg, png. Формат gif. Картинки в этом формате поддерживают 256 цветов. Этот формат имеет дополнительные возможности: Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик (нарисовать отдельные кадры, настроить время задержки и последовательность показа, «зациклить» кино или показывать кадры только один раз). Когда анимация готова, она записывается на диск как обычный gif-файл. В HTML нет различия в выводе на экран простого gif-файла или анимационного. Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательно. Прозрачный цвет задается в редакторе (GIF-редактор или FOTOSHOP) при записи файла на диск. Формат jpg. Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества. Но это отражается на увеличении объема файлов. Графические файлы желательно хранить в отдельной папке. Оформление фона: Вставка рисунков: Задание: а) Создать папку для рисунков Image; б) Скопировать в папку Image файлы с понравившимися рисунками и фонами; в) Создать html-документ следующего содержания: оформить фон страницы; в ячейки, помеченные *, вставить рисунки, указав размеры рисунка; в ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки.
д) Просмотреть результат в обозревателе Internet Explorer. Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО! Полезное для учителя
  |
