Тема урока: «Содержание и оформление. Стили. Таблицы» Цель урока: Научиться использовать 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 определяет цвет текста страницы. Пример:

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

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

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

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

<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">

Списки

Маркированный список создается с помощью тега <UL>. Каждому элементу списка должен предшествовать тег представления элемента списка <LI>.

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

Пример:

<ul>

<li>Первый пункт</li>

<li>Второй пункт</li>

<li>Третий пункт</li>

</ul>

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

Вид маркера списка задается с помощью атрибута type тега <UL>, который может принимать значения: disc (круг), circle (окружность) и square (квадрат).

Нумерованный список создается при помощи тега <OL>. Каждому элементу списка должен предшествовать тег представления элемента списка <LI>.

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

Пример:

<ol>

<li>Первый пункт</li>

<li>Второй пункт</li>

<li>Третий пункт</li>

</ol>

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

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

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

Пример:

<dl>

<dt>Термин 1</dt>

<dd>Определение 1</dd>

<dt>Термин 2</dt>

<dd>Определение 2</dd>

</dl>

Термин 1

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

Термин 2

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

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

Пример:

<ol>

<li>Первый

<ol>

<li>Первый в первом</li>

<li>Второй в первом</li>

</ol>

</li>

<li>Второй</li>

</ol>

Первый

Первый в первом
Второй в первом

Второй

Изображения

Для размещения на веб-странице изображений используется тег <IMG>. Допустимые форматы изображений: GIF, JPEG PNG.

Закрывающий тег не требуется.

<IMG src="D:/images/1.jpg" alt="Схема" width="300" height="200"

hspace="10" vspace="15" align="right" border="2">

Атрибуты тега <IMG>

src

Задает адрес графического файла, который будет отображаться на веб-странице. В качестве значения принимается полный или относительный путь к файлу.

alt

Альтернативный текст для изображения.

Если браузер не находит картинки в указанном месте или пользователь отключил отображение картинок, то вместо изображения на странице будет показан альтернативный текст. Некоторые браузеры, в частности, Internet Explorer отображают альтернативный текст в виде всплывающей подсказки. Не все браузеры отображают альтернативный текст в виде всплывающей подсказки, поэтому для ее создания используйте атрибут title.

height и width

Высота и ширина изображения соответственно.
Высота и ширина задаются в пикселях или процентах.

В примере изображению задана ширина 100px. Обратите внимание, что в атрибуте width после цифры нет px.

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

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным.

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

hspace и vspace

Величина горизонтального и вертикального отступа от изображения до окружающей информации. Задается в пикселях.

align

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

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

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

border

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

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

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

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

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

<A rel="nofollow" href="http://www.microsoft.com">Microsoft</A>

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

Таблицы

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

cellpadding

Расстояние между содержимым ячейки и рамкой.

cellspacing

Расстояние между ячейками таблицы.

bgcolor

Цвет фона таблицы.

background

Фоновая картинка.

width

Ширина таблицы.

Ширина задается в пикселях или процентах. Если ширина содержимого превышает указанную ширину таблицы, атрибут будет проигнорирован.

align

Задает способ выравнивания таблицы.

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

center	выравнивание по центру
left	выравнивание по левому краю
right	выравнивание по правому краю

border

Задает толщину рамки в пикселях.

bordercolor

Цвет линий рамки.

Атрибуты тега <TR> позволяют установить свойства одновременно для всех ячеек строки:

bgcolor

Цвет фона строки.

align

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

Возможные значения: center, left, right, justify.

valign

Задает способ выравнивания по вертикали.

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

top	вертикальное выравнивание по верхнему краю строки
middle	вертикальное выравнивание по середине строки
bottom	вертикальное выравнивание по нижнему краю строки
baseline	вертикальное выравнивание по базовой линии, при этом происходит привязка содержимого ячеек к одной линии

Теги <TD> и <TH> имеют следующие атрибуты:

rowspan	Объединение ячеек по строке.
colspan	Объединение ячеек по столбцу.
bgcolor	Цвет фона ячейки.
background	Фоновая картинка.
align	Задает способ выравнивания по горизонтали. Возможные значения: center, left, right, justify.
valign	Задает способ выравнивания по вертикали. Возможные значения: top, middle, bottom, baseline.
width	Ширина ячейки. Ширина задается в пикселях или процентах.

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

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

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

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

Встроенный стиль — стиль, который определяется непосредственно в теге и применяется с использованием атрибута style. Такой подход полезен для стилей, единовременно применяемых к одному элементу, однако он не считается идеальным.

<p style="font-size: 21px; color: green;">Текст</p>

Внедренный стиль — этот стиль управляет представлением одного документа и размещается внутри тега-контейнера style в разделе документа head.

<head>

.....

<style>

body {color: red;}

</style>

</head>

Связанный стиль — это отдельный файл с расширением .css, в котором размещаются все CSS-правила (но без тегов языка HTML). Любой HTML-файл, к которому нужно применить стили, описанные в этой таблице, можно связать с ней, используя тег link в разделе документа head.

<head>

.....

</head>

Импортированный стиль — этот тип похож на связанные стили, однако позволяет импортировать стили в связанную таблицу стилей или непосредственно в документ. Он полезен для реализации обходных путей и для управления множеством документов. Импортированный стиль (как и связанный) представляет собой код, записанный в отдельном файле с расширением .css. Импортировать содержимое CSS-файла можно в связанную таблицу стилей или непосредственно в html-документ с помощью правила, которое указывается в начале связанной таблицы стилей или блока <style> html-документа соответственно.

@import url("style.css");

Каскад

Каскад определяет способ применения правил, в случае с типами таблиц стилей:

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

Например, в связанной таблице стилей (файле my_style.css) содержатся правила: первое определяет цвет абзаца — зеленый, второе задает цвет заголовка — желтый:

p {color: green;}

h1 {color: yellow;}

В html-документе используются три таблицы стилей: связанная, внедренная и встроенная. Во внедренном стиле определен красный цвет абзаца, а во встроенном (встроенная таблица применяется к первому абзацу) — синий.

<!DOCTYPE html>

<HTML>

<HEAD>

<STYLE>

p {color: red;}

</STYLE>

</HEAD>

<BODY>

<H1>Связанный стиль</H1>

<P style="color: blue">Встроенный стиль.

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

</BODY>

</HTML>

Работа с цветом и изображениями

Способы указания цвета

Значения цветов можно указать в стандартной шестнадцатеричной модели RGB (Red-Green-Blue). #хххххх — здесь вместо каждого символа х должна стоять шестнадцатеричная цифра (от 0 до f). Например, код #000000 означает, что яркость каждой составляющей равна 0 — следовательно, это черный цвет. Соответственно, белый цвет получается, если все составляющие будут максимальны: #ffffff.
Стандартное имя цвета, например: color: green; background-color: yellow. Этот способ устарел и не рекомендуется еще и потому, что большинство «стандартных» цветов не входят в безопасную палитру.
Сокращенный шестнадцатеричный код: например, вместо #33сс99 можно написать просто #3с9, а вместо #999999 — просто #999.
Десятичный код в модели RGB, например: color: rgb(255,0,0). Здесь в каждой позиции может находиться целое число от 0 до 255.

Стилизация текста

Семейства шрифтов

В языке CSS существует пять общих семейств шрифтов:

Serif — шрифты с засечками (например, Times New Roman). Считается, что шрифты этой категории подходят для печати, а также для заголовков текста, представленного в электронном виде.
Sans-serif — шрифты без засечек (например, Arial). Считается, что шрифты этой категории являются лучшим выбором для текста элемента body, отображаемого на экране, кроме текста маленького размера или курсива.
Monospace — моноширинные шрифты, шрифты, все буквы которых имеют одинаковую ширину (например, Courier). Обычно они используются для описания примеров программного кода.
Fantasy — декоративные шрифты (например, Western). Вид шрифтов необычный, поэтому их полезно использовать для заголовков или небольших областей текста, но они не совсем подходят для текста элемента body, поскольку украшения затрудняют чтение текста.
Cursive — рукописные шрифты (например, Lucida Handwriting). Как и в случае с фантастическими шрифтами, в языке CSS рукописные шрифты применяются редко.

Рассмотрим еще один вид селекторов — селектор псевдоэлемента. Эти селекторы присоединяются к элементу, который вы желаете стилизовать. Применим селекторы псевдоэлементов для стилизации первой буквы (буквицы) и первой строки текста.

p:first-letter {font-style:italic; color: #999}

p:first-line {font-weight:bold; color: #F00}

Эффекты ссылок

Существуют стандартные для всех браузеров состояния ссылок, управлять которыми можно с помощью селекторов псевдоклассов. Для стилей ссылок доступны следующие селекторы:

:link — упралвяет состоянием ссылки до ее активации.
:visited — управляет состоянием, в которое переходит ссылка после ее активации.
:hover — управляет состоянием, когда указатель мыши наведен на ссылку.
:active — управляет состоянием, возникающим при щелчке на ссылке для ее активации.

При этом важен порядок следования псевдоклассов — :visited указывается до :hover, иначе посещённые ссылки не будут изменять свой цвет при наведении на них курсора.

Рассмотрим на примере:

a:link {color: blue;}

a:visited {color: purple;}

a:hover {color: fuchsia;}

a:active {color: red;}

Результат работы данного кода: ссылка

Поля, границы, отступы

Блочные и строчные элементы

Элементы HTML-страницы обычно делятся на блочные и строчные.

Блочные элементы можно представлять как прямоугольные области на странице. Они имеют следующие особенности:

До и после блочного элемента существует перенос строки.
Блочным элементам можно задавать ширину, высоту, поля и отступы.
Занимают всё доступное пространство по горизонтали.

Блочные элементы: абзацы <p>, заголовки от <h1> до <h6>, списки <ul>, <ol> и другие.
Элемент <div> является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили.

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

До и после строчного элемента отсутствуют переносы строки.
Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя.
Можно задавать только горизонтальные отступы и поля.

Строчные элементы: ссылки <a>, выделенные слова <em>, важные слова <strong> и другие.
Универсальный строчный элемент <span> предназначен для выделения отдельных строк, символов или других строчных элементов для дальнейшего изменения их оформления с помощью стилей.

Блочные элементы могут содержать блочные или строчные элементы. Строчные элементы могут содержать только другие строчные элементы (за исключением элемента <a>).

Тип элемента можно изменять с помощью свойства display. С его помощью, например, можно сделать абзацы и заголовки строчными, а элементы span блочными. Свойство display:block обозначает блочный элемент, а display:inline — строчный.

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

Область, занимаемая блочным элементом, складывается из его ширины и высоты содержания, внутренних и внешних отступов, ширины рамок .

Поля (margin)

Границы (border)

Стилизация границ включает в себя стилизацию толщины, цвета и типа линии.

Отступы (padding)

Отступы позволяют стилизовать промежуток между содержимым и его границей.

4. Подведение итогов.

5. Домашнее задание

теория

Скачано с www.znanio.ru

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

Этот тег создает горизонтальную линию зеленого цвета шириной в 10 пикселей, занимающую половину ширины экрана и расположенную справа

Первый <ol> <li>Первый в первом</li> <li>Второй в первом</li> </ol> </li> <li>Второй</li> </ol>

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

Объединение ячеек по строке

Встроенный стиль превосходит внедренный, связанный и импортированный стили

Monospace — моноширинные шрифты, шрифты, все буквы которых имеют одинаковую ширину (например,

Поля (margin) Границы (border)

Материалы на данной страницы взяты из открытых истончиков либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.

25.11.2023