Получите доступ к огромной базе учебных материалов на каждый урок с возможностью удалённого управления...

СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Выбрать материалы

Скидки до 50 % на комплекты
только до

Готовые ключевые этапы урока всегда будут у вас под рукой

Организационный момент

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

Была в сети 21.04.2024 12:34

Брух Таисия Викторовна

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

42 года

31 053

592

Подписчики

Подписки

Местоположение

Россия, Омск

Специализация

Информатика

Обо мне Блог Файлы Тесты Галерея Активность Награды

Содержание и оформление. Стили. Таблицы

Категория: Информатика

25.11.2023 12:50

Учебник: Информатика. 11 класс. Углубленный уровень. В 2 ч. Поляков К.Ю., Еремин Е.А. М.: 2013 — Ч.1 - 240с., Ч.2 - 304с.

Тема урока: «Содержание и оформление. Стили. Таблицы»

Цель урока: Научиться использовать 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 закрывающий тег выглядит так же как открывающий, но с символом / перед именем тега. Для некоторых парных тегов завершающие теги можно опускать. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок.

После имени тега могут следовать в произвольном порядке атрибуты. Значения атрибутов записываются в кавычках.

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

Форматирование текста

<P> Закрывающий тег не обязателен.	Задает абзац. Браузер использует не красную, а пустую строку для отделения одного абзаца от другого или абзаца от других элементов документа. По умолчанию абзац выравнивается по левому краю. Для изменения способа выравнивания применяется атрибут align со значениями left (по левому краю), right (по правому краю), center (по центру), justify (по ширине). Пример: <P align="center">Текст абзаца Между словами всегда помещается ровно по одному пробелу независимо от того, сколько пробелов записано в HTML-программе. Перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда был сделан переход на новую строку в HTML-программе.
<BR> Закрывающий тег не требуется.	Принудительный разрыв строки.
<HR> Закрывающий тег не требуется.	Горизонтальная линия, которая может быть использована в качестве ограничителя абзацев. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Ее расположение, толщина, длина, цвет (в формате RGB или название на английском языке) задаются атрибутами. Пример: <HR color="#00FF00" size="10" width="50%" align="right"> Этот тег создает горизонтальную линию зеленого цвета шириной в 10 пикселей, занимающую половину ширины экрана и расположенную справа.
<B> Закрывающий тег обязателен.	Полужирное начертание.
<I> Закрывающий тег обязателен.	Курсивное начертание.
<U> Закрывающий тег обязателен.	Добавляет подчеркивание к тексту.
<FONT> Закрывающий тег обязателен.	Определяет параметры форматирования символов. Тег должен содержать хотя бы один из атрибутов: size, color, face, где size – размер (от 1 до 7), color – цвет, который может быть задан текстовым значением (black, red, olive, silver) или шестнадцатеричным кодом (#000000, #FF0000, #808000, #C0C0C0 Пример: <FONT size="4" color="green" face="arial"> Этот тег задает размер шрифта, зеленый цвет шрифта, гарнитуру Arial.
<BODY text="цвет">	Атрбут text определяет цвет текста страницы. Пример: <BODY text="#909090">

Просмотр содержимого документа
«Содержание и оформление. Стили. Таблицы»

21-22 урок, 11 класс – теория

Учитель: Брух Т.В.

Дата:________

Тема урока: «Содержание и оформление. Стили. Таблицы»

Цель урока: Научиться использовать HTML-теги при разработке 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. Изучение нового материала

Презентация

Форматирование текста

Закрывающий тег не обязателен.	Задает абзац. Браузер использует не красную, а пустую строку для отделения одного абзаца от другого или абзаца от других элементов документа. По умолчанию абзац выравнивается по левому краю. Для изменения способа выравнивания применяется атрибут 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 тега

disc

circle

square

...

Нумерованный список создается при помощи тега

.

Закрывающий тег

обязателен.

Пример:

Первый пункт

Второй пункт

Третий пункт

Первый пункт
Второй пункт
Третий пункт

Определяемый список создается при помощи тега , задающего для строк текста отступы без каких-либо номеров или меток. Он содержит элементы двух типов: определяемые термины (тег ) и определения (тег ). Обычно определяемые термины и определения чередуются. Определения отображаются на экране с отступом от левого края.

Закрывающий тег обязателен.

Пример:

Термин 1

Определение 1

Термин 2

Определение 2

Термин 1

Определение 1

Термин 2

Определение 2

Многоуровневый список

Пример:

Первый
1. Первый в первом
2. Второй в первом

Второй

Первый
1. Первый в первом
2. Второй в первом
Второй

Изображения

Для размещения на веб-странице изображений используется тег . Допустимые форматы изображений: 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

Задает способ выравнивания изображения и обтекания его текстом.

Возможные значения:

top	вертикальное выравнивание по верхнему краю
middle	вертикальное выравнивание по центру
bottom	вертикальное выравнивание по нижнему краю
left	горизонтальное выравнивание по левому краю
right	горизонтальное выравнивание по правому краю

border

Задает рамку вокруг изображения толщиной в n пикселей.

Использование изображения в качестве фона страницы.

Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика.

Гипертекстовые ссылки

Гипертекстовая ссылка задается с помощью парного тега . В качестве значения атрибута href используется URL адрес документа, на который указывает ссылка.

Microsoft

Картинка как ссылка. Чтобы заставить работать картинку как гиперссылку, достаточно вложить тег IMG внутрь тега A:

Таблицы

Для размещения на веб-странице таблиц используется парный тег

(закрывающий тег обязателен). HTML-таблица состоит из строк, каждая из которых задается парным тегом (закрывающий тег не требуется.). Каждая табличная строка состоит из ячеек, которые последовательно описываются парными тегами позволяют установить свойства одновременно для всех ячеек строки:

(обычная ячейка) и (или)

(ячейка-заголовок), для которых закрывающие теги не требуются. Содержимое обычной ячейки по умолчанию горизонтально выравнивается по левому краю, а ячейки-заголовка — по центру. Кроме того, текст в ячейке-заголовке выделяется полужирным шрифтом.
Атрибуты тега :

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	Ширина ячейки. Ширина задается в пикселях или процентах.

Парный тег предназначен для создания заголовка к таблице и может размещаться только внутри контейнера

, причем сразу после открывающего тега. Закрывающий тег обязателен. Расположение заголовка определяется значение атрибута align: top (над таблицей), bottom (под таблицей).

Типы таблиц стилей

Стиль браузера — это стандартная таблица стилей, используемая браузером. Если никакие правила стиля не объявлены, применяются эти стандартные стили.
Стиль пользователя — пользователь может написать свою таблицу стилей и переопределить любые стили, созданные вами, изменив настройки браузера. Такой подход используется редко, но может оказаться полезным для людей с ограниченными возможностями, например с плохим зрением. В данном случае пользователь создаст стили с высококонтрастными шрифтами больших размеров, которые переопределят ваши стили.
Стиль автора — стиль, который добавляет к документу его разработчик.

Способы добавления стилей

Встроенный стиль — стиль, который определяется непосредственно в теге и применяется с использованием атрибута 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;}

Связанный стиль

Встроенный стиль.

Внедренный стиль.