Россия, Омск
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Была в сети 06.09.2025 09:26
Брух Таисия Викторовна
Учитель информатики
43 года
46 458
442 
Местоположение
Специализация
Содержание и оформление. Стили. Таблицы
Категория:
Информатика
25.11.2023 12:50
Просмотр содержимого документа
«Содержание и оформление. Стили. Таблицы»
21-22 урок, 11 класс – теория
Учитель: Брух Т.В.
Дата:________
Тема урока: «Содержание и оформление. Стили. Таблицы»
Цель урока: Научиться использовать HTML-теги при разработке web-страниц.
Задачи:
Развивающие: способствовать развитию познавательного интереса, творческой активности обучающихся.
Образовательные: приобрести начальные навыки создания простейших Internet-документов; научиться выполнять форматирование созданных Web-страниц; научить использовать коды и теги при создании веб - страниц в текстовом редакторе Блокнот
Воспитательные: формировать элементы научного мировоззрения, воспитать информационную культуру учащихся.
Ход урока:
1. Организационный момент
2. Проверка домашнего задания
Проверочная работа веб-страницы
Ответы
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 2 | 2 | 3 | 1 | 2 | 3 | 3 | 2 | 1 | 3 |
11.
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 9 | 6 | 10 | 12 | 11 | 15 | 1 | 5 | 13 | 14 | 8 | 4 | 7 | 2 | 3 |
3. Изучение нового материала
Презентация
Теги бывают двух типов — одиночные и парные (контейнеры). Большинство тегов языка HTML являются парными, т.е. открывающему тегу соответствует закрывающий тег. По правилам HTML закрывающий тег выглядит так же как открывающий, но с символом / перед именем тега. Для некоторых парных тегов завершающие теги можно опускать. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок.
После имени тега могут следовать в произвольном порядке атрибуты. Значения атрибутов записываются в кавычках.
Если какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было.
Форматирование текста
| | Задает абзац. Браузер использует не красную, а пустую строку для отделения одного абзаца от другого или абзаца от других элементов документа. По умолчанию абзац выравнивается по левому краю. Для изменения способа выравнивания применяется атрибут align со значениями left (по левому краю), right (по правому краю), center (по центру), justify (по ширине). Текст абзаца Между словами всегда помещается ровно по одному пробелу независимо от того, сколько пробелов записано в HTML-программе. Перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда был сделан переход на новую строку в HTML-программе. |
|
| Принудительный разрыв строки. |
| | Горизонтальная линия, которая может быть использована в качестве ограничителя абзацев. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Ее расположение, толщина, длина, цвет (в формате RGB или название на английском языке) задаются атрибутами. Этот тег создает горизонтальную линию зеленого цвета шириной в 10 пикселей, занимающую половину ширины экрана и расположенную справа. |
| | Полужирное начертание. |
| | Курсивное начертание. |
| | Добавляет подчеркивание к тексту. |
| | Определяет параметры форматирования символов. Тег должен содержать хотя бы один из атрибутов: size, color, face, где size – размер (от 1 до 7), color – цвет, который может быть задан текстовым значением (black, red, olive, silver) или шестнадцатеричным кодом (#000000, #FF0000, #808000, #C0C0C0 Пример: Этот тег задает размер шрифта, зеленый цвет шрифта, гарнитуру Arial. |
|
| Атрбут text определяет цвет текста страницы.
|
Списки
| Маркированный список создается с помощью тега Закрывающий тег обязателен. | Пример:
Вид маркера списка задается с помощью атрибута type тега
| ||
| Нумерованный список создается при помощи тега Закрывающий тег обязателен. | Пример:
| ||
| Определяемый список создается при помощи тега , задающего для строк текста отступы без каких-либо номеров или меток. Он содержит элементы двух типов: определяемые термины (тег ) и определения (тег ). Обычно определяемые термины и определения чередуются. Определения отображаются на экране с отступом от левого края. Закрывающий тег обязателен. | Пример:
| ||
| Многоуровневый список | Пример:
|
Изображения
Для размещения на веб-странице изображений используется тег . Допустимые форматы изображений: GIF, JPEG PNG.
Закрывающий тег не требуется.
Схема" width="300" height="200"
hspace="10" vspace="15" align="right" border="2"
Атрибуты тега
| src | Задает адрес графического файла, который будет отображаться на веб-странице. В качестве значения принимается полный или относительный путь к файлу. | ||||||||||
| alt | Альтернативный текст для изображения. Если браузер не находит картинки в указанном месте или пользователь отключил отображение картинок, то вместо изображения на странице будет показан альтернативный текст. Некоторые браузеры, в частности, Internet Explorer отображают альтернативный текст в виде всплывающей подсказки. Не все браузеры отображают альтернативный текст в виде всплывающей подсказки, поэтому для ее создания используйте атрибут title. | ||||||||||
| height и width | Высота и ширина изображения соответственно. В примере изображению задана ширина 100px. Обратите внимание, что в атрибуте width после цифры нет px. Высоту в процентах обычно не задают. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег img. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Если задать только один из размеров, ширину или высоту, то вторую размерность браузер вычислит самостоятельно исходя из пропорций изображения. Если же задать и ширину, и высоту для картинки, то браузер может нарушить пропорции исходного изображения. Если атрибуты не заданы, картинка рисуется в естественных размерах. | ||||||||||
| hspace и vspace | Величина горизонтального и вертикального отступа от изображения до окружающей информации. Задается в пикселях. | ||||||||||
| align | Задает способ выравнивания изображения и обтекания его текстом. Возможные значения:
| ||||||||||
| border | Задает рамку вокруг изображения толщиной в n пикселей. |
Использование изображения в качестве фона страницы.
Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика.
Гипертекстовые ссылки
Гипертекстовая ссылка задается с помощью парного тега . В качестве значения атрибута href используется URL адрес документа, на который указывает ссылка.
Microsoft
Картинка как ссылка. Чтобы заставить работать картинку как гиперссылку, достаточно вложить тег IMG внутрь тега A:
Для размещения на веб-странице таблиц используется парный тег cellpadding Расстояние между содержимым ячейки и рамкой. cellspacing Расстояние между ячейками таблицы. bgcolor Цвет фона таблицы. background Фоновая картинка. width Ширина таблицы. Ширина задается в пикселях или процентах. Если ширина содержимого превышает указанную ширину таблицы, атрибут будет проигнорирован. align Задает способ выравнивания таблицы. Возможные значения: center выравнивание по центру left выравнивание по левому краю right выравнивание по правому краю border Задает толщину рамки в пикселях. bordercolor Цвет линий рамки. Атрибуты тега bgcolor Цвет фона строки. align Задает способ выравнивания по горизонтали. Возможные значения: center, left, right, justify. valign Задает способ выравнивания по вертикали. Возможные значения: top вертикальное выравнивание по верхнему краю строки middle вертикальное выравнивание по середине строки bottom вертикальное выравнивание по нижнему краю строки baseline вертикальное выравнивание по базовой линии, при этом происходит привязка содержимого ячеек к одной линии Теги rowspan Объединение ячеек по строке. colspan Объединение ячеек по столбцу. bgcolor Цвет фона ячейки. background Фоновая картинка. align Задает способ выравнивания по горизонтали. Возможные значения: center, left, right, justify. valign Задает способ выравнивания по вертикали. Возможные значения: top, middle, bottom, baseline. width Ширина ячейки. Ширина задается в пикселях или процентах. Парный тег предназначен для создания заголовка к таблице и может размещаться только внутри контейнера Типы таблиц стилей Стиль браузера — это стандартная таблица стилей, используемая браузером. Если никакие правила стиля не объявлены, применяются эти стандартные стили. Стиль пользователя — пользователь может написать свою таблицу стилей и переопределить любые стили, созданные вами, изменив настройки браузера. Такой подход используется редко, но может оказаться полезным для людей с ограниченными возможностями, например с плохим зрением. В данном случае пользователь создаст стили с высококонтрастными шрифтами больших размеров, которые переопределят ваши стили. Стиль автора — стиль, который добавляет к документу его разработчик. Способы добавления стилей Встроенный стиль — стиль, который определяется непосредственно в теге и применяется с использованием атрибута style. Такой подход полезен для стилей, единовременно применяемых к одному элементу, однако он не считается идеальным. Текст Внедренный стиль — этот стиль управляет представлением одного документа и размещается внутри тега-контейнера style в разделе документа head. ..... body {color: red;} Связанный стиль — это отдельный файл с расширением .css, в котором размещаются все CSS-правила (но без тегов языка HTML). Любой HTML-файл, к которому нужно применить стили, описанные в этой таблице, можно связать с ней, используя тег link в разделе документа head. ..... Импортированный стиль — этот тип похож на связанные стили, однако позволяет импортировать стили в связанную таблицу стилей или непосредственно в документ. Он полезен для реализации обходных путей и для управления множеством документов. Импортированный стиль (как и связанный) представляет собой код, записанный в отдельном файле с расширением .css. Импортировать содержимое CSS-файла можно в связанную таблицу стилей или непосредственно в html-документ с помощью правила, которое указывается в начале связанной таблицы стилей или блока html-документа соответственно. @import url("style.css"); Каскад Каскад определяет способ применения правил, в случае с типами таблиц стилей: Пользовательский стиль переопределяет все остальные стили. Встроенный стиль превосходит внедренный, связанный и импортированный стили. Внедренный стиль имеет преимущественное значение перед связанным и импортированным стилями. Связанные и импортированные стили рассматриваются, как равные по значимости, и применяются везде, где не были применены другие типы таблиц стилей. Стиль браузера используется только в том случае, когда для данного элемента не было предоставлено ни одного стиля. Например, в связанной таблице стилей (файле my_style.css) содержатся правила: первое определяет цвет абзаца — зеленый, второе задает цвет заголовка — желтый: p {color: green;} h1 {color: yellow;} В html-документе используются три таблицы стилей: связанная, внедренная и встроенная. Во внедренном стиле определен красный цвет абзаца, а во встроенном (встроенная таблица применяется к первому абзацу) — синий. p {color: red;} Связанный стиль Встроенный стиль. Внедренный стиль.
Свидетельство об участии
БЕСПЛАТНО!
(закрывающий тег обязателен). HTML-таблица состоит из строк, каждая из которых задается парным тегом
(закрывающий тег не требуется.). Каждая табличная строка состоит из ячеек, которые последовательно описываются парными тегами (обычная ячейка) и (или) (ячейка-заголовок), для которых закрывающие теги не требуются. Содержимое обычной ячейки по умолчанию горизонтально выравнивается по левому краю, а ячейки-заголовка — по центру. Кроме того, текст в ячейке-заголовке выделяется полужирным шрифтом.
Атрибуты тега :
позволяют установить свойства одновременно для всех ячеек строки:
и имеют следующие атрибуты:
, причем сразу после открывающего тега. Закрывающий тег обязателен. Расположение заголовка определяется значение атрибута align: top (над таблицей), bottom (под таблицей).
Вебинар для учителей
Полезное для учителя
