Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
ПЛАН-КОНСПЕКТ УРОКА
Основы языка разметки гипертекста
(Структурные теги и теги форматирования)
1. | ФИО (полностью) | |
2. | Место работы | МОУ СОШ 80 |
3. | Должность | Учитель информатики |
4. | Предмет | Информатика |
5. | Класс | 10 |
6. | Тема и номер урока в теме | Структурные теги и теги форматирования в языке HTML, первый урок – учимся создавать сайт и работать с сайтом школы shkola80.ru (дополнительные уроки могут проводиться за счет резервных часов в рабочей программе) |
7. | Базовый учебник | ИНФОРМАТИКА И ИКТ. 10 класс. 2011. Глава 2. Параграф 2.13. Практическая работа 2.11 |
8. Цель урока:
9. Задачи:
- изучение языка разметки гипертекста
- создание странички на сервере сайта школы
- правильное и законное размещение Интернете, авторские права
10. Теория и практика на компьютере
11. Работа за компьютером в Интернет с сайтом школы shkola80.ru
12. Необходимое техническое оборудование
13. Структура и ход урока
Таблица 1.
СТРУКТУРА И ХОД УРОКА
№ | Этап урока | Название используемых ЭОР (с указанием порядкового номера из Таблицы 2) | Деятельность учителя (с указанием действий с ЭОР, например, демонстрация) | Деятельность ученика | Время (в мин.) |
1 | 2 | 3 | 5 | 6 | 7 |
Структурные теги HTML | Бином. Лаборатория знаний. №1 | Использование Интерактивной доски и Интернет | Изучение нового материала. Материал объясняет учитель. | 25 | |
Теги форматирования текста | Бином. Лаборатория знаний. №1 | Использование Интерактивной доски и Интернет | Написание программы в редакторе Блокнот, сохранение в формате HTML и запуск программы в Internet Explorer. | 15 |
Приложение к плану-конспекту урока
Материалы дистанционного и дополнительного обучения учеников на сайте *****
Цель и задачи урока: научить учеников работать в Интернет с сайтом школы *****
Тип урока : демонстрация
Формы работы учащихся : работа на компьютере в классе
Необходимое техническое оборудование: компьютер, подключенный к Интернет
Структуру и ход урока:
1. Структурные теги HTML
Ход урока: Голова страницы>>Тело страницы>>Фон страницы>>Текст на странице
1. Теги форматирования текста
Ход урока: Голова>> Теги структурного форматирования>> Теги оформления текста>> Тег <font> и его параметры>> P. S. Почему не стоит создавать заголовки тегами оформления?
Тема урока: “Основные теги HTML”
Язык гипертекстовой разметки HTML состоит из тегов, представляющих собой его основные компоненты. Здесь вы сможете познакомиться с этими компонентами. Не со всеми конечно, а только с самыми основными тегами HTML — теми, без которых не обходится создание ни одной веб-страницы в мире. Речь идет о структурных тегах — именно их здесь и рассмотрим, но вначале классифицируем их. Они делятся на следующие группы:
- Структурные теги Теги форматирования
Структурные теги HTML
Структурные теги представляют собой такие основные теги HTML, которые определяют структуру любой веб-страницы. Они задают ее начало и конец; показывают, где находятся голова и туловище страницы. Прежде чем знакомиться с дальнейшей информацией, взгляните на изображение справа (кликабельно).
Оно поможет вам лучше понять и визуально представить структуру типовой веб-страницы. А теперь первый структурный тег.
<html> — корневой тег документа HTML — </HTML>
Тип этого тега – контейнерный. Открывающий тег <html> ставится в самом начале документа, а закрывающий
</html> – в конце.
Внутри контейнера <html>.....</html> содержатся все остальные теги документа. Именно поэтому тег и называют корневым (вы ведь знаете, что такое корневая папка?).
Контейнерный тег можно сравнить с папкой операционной системы. В каждую такую папку могут быть вложены другие папки, а в них, в свою очередь – еще папки, и. т.д.
У открывающего тега <html> при необходимости могут быть следующие параметры:
lang — определяет язык документа
title — определяет всплывающую подсказку для всей страницы
Голова страницы
<head> — головной тег html-страницы, внутри которого располагаются мета-теги, тег <title> и другие теги, помогающие браузеру в обработке страницы
Тип тега – контейнерный. Это первый из двух глобальных контейнеров, расположенных внутри конструкции <html>.....</html>
<title> — контейнерный тег, позволяющий задать наименование веб-страницы
Заглавие, которое создает этот тег, отображается в строке заголовка окна браузера.
В первом приближении код веб-страницы выглядит следующим образом:
<html>
<head>
<title>Моя страница</title>
</head>
</html>
Тег <title> выполняет несколько функций, одна из которых – сообщить посетителю, о чем страница. Благодаря тексту заголовка пользователь может понять, что это за сайт и как называется текущая страница. Если посетитель будет сворачивать окна, то заголовки отобразятся на панели задач – по ним проще сориентироваться, где какая страница.
При сохранении веб-страницы, имя сохраненного файла будет совпадать с названием заголовка. При сохранении в закладки ситуация аналогична.
Еще одна важная функция тега <title> – продвижение страницы в поисковиках. Поисковые системы выводят заголовки в поисковую выдачу, а, кроме того, оценивают по ним релевантность.
Завершая разговор о контейнере тега <head>, можно сказать, что название тега соответствует его функциям. Контейнер тега <head> действительно является своего рода головой для веб страницы.
Теперь поговорим про туловище.
Тело страницы
<body> — тег, внутри которого пишется весь код, отвечающий за внешний вид страницы
Тип тега – контейнерный. Это второй из двух глобальных контейнеров, расположенных внутри конструкции <html>.....</html>
.
Во втором приближении код любой веб-страницы выглядит так:
<html>
<head>
<title>Моя страница</title>
</head>
<body>
Здесь размещаются все теги, отвечающие за внешний вид страницы.
</body>
</html>
Обратите внимание, что теперь у страницы появилась как голова, так и туловище. Это значит, что она стала выглядеть абсолютно полноценно.
У тега <body> есть несколько параметров, позволяющих поменять фон на странице, цвет текста, а также задать отступы от границ окна.
Фон страницы
bgcolor — параметр тега <body>, позволяющий настроить цвет фона веб-страницы.
Например, чтобы сделать цвет фона светло-желтым, нужно записать следующий фрагмент кода:
<html>
<head>
<title>Светло-желтый фон</title>
</head>
<body bgcolor="lightyellow">
Страница со светло-желтым фоном
</body>
</html>
Параметр bgcolor устанавливает одноцветный фон на странице. Но в качестве фона может быть использована и повторяющаяся картинка, или так называемая текстура. Для этого служит следующий параметр:
background — параметр тега <body>, позволяющий установить текстурное изображение в качестве фона веб-страницы.
В следующем примере в качестве текстуры выбрано изображение, которое вы видите справа –
.
<html>
<head>
<title>Применение текстурного фона</title>
</head>
<body background="wood. jpg">
Страница с текстурой в качестве фона.
</body>
</html>
Учтите: чтобы браузер смог найти изображение-источник, оно должно быть расположено в одной папке с html-файлом, для которого устанавливается текстура. В противном случае необходимо прописывать полный адрес изображения источника.
Текст на странице
text—параметр тега <body>, позволяющий поменять цвет шрифта, используемого на странице по умолчанию.
Например, коричневый шрифт можно задать следующим образом:
<html>
<head>
<title>Коричневый шрифт</title>
</head>
<body text="brown">
Страница с коричневым шрифтом
</body>
</html>
А для того, чтобы разместить зеленый шрифт на синем фоне, достаточно прописать у тега <body> одновременно два параметра - параметр фона и параметр текста:
<html>
<head>
<title>Коричневый шрифт на светло-желтом фоне</title>
</head>
<body bgcolor="lightyellow" text="brown">
Страница с коричневым шрифтом на светло-желтом фоне
</body>
</html>
В последнем примере можно было написать сначала параметр text, а затем параметр bgcolor - очередность записи не имеет никакого значения.
Отступы от границ окна
Отступ на странице – это пустое пространство от края окна браузера до содержимого страницы. Это пространство не может быть занято никакими элементами – оно всегда остается пустым.
За отступы на странице в HTML отвечают следующие параметры тега <body>:
bottommargin — определяет отступ от нижнего края браузера до содержимого страницы
leftmargin — определяет отступ от левого края окна браузера до содержимого страницы
topmargin — определяет отступ от верхнего края окна браузера до содержимого страницы
Модифицируем предыдущий пример, добавив на страницу левый отступ в 50 пикселей и верхний – в 150 пикселей:
Пример:
<html>
<head>
<title>Отступы на странице</title>
</head>
<body bgcolor="lightyellow" text="brown" leftmargin="50" topmargin="150">
Страница с коричневым шрифтом на светло-желтом фоне и отступами
</body>
</html>
На этом все о структурных тегах. Следующие из основных тегов HTML позволяют работать с текстом. С их помощью вы сможете форматировать текст на странице также, как вы делаете это в обычном текстовом редакторе.
Теги форматирования текста
Давайте проанализируем, каким образом посетитель получает информацию со страницы. В общем, для этого существует множество различных элементов, которые вы можете разместить на своем сайте. Это изображения, видео, флэш-анимация и. т.д. Но как бы бурно не развивался Интернет, текст до сих пор остается главным источником распространения и получения информации в сети. В этой статье вы познакомитесь с тегами форматирования текста – одними из важнейших в html, и в то же время – одними из самых простых тегов.
Скопируйте любой кусок текста, состоящий из нескольких абзацев, и вставьте его в контейнер тега <body>. Получиться у вас должно примерно так:
<html>
<head>
<title>Кусок текста</title>
</head>
<body>
Здесь будет размещен скопированный текст.
</body>
</html>
Как вы сможете заметить, форматирование текста теряется — даже абзацы не разделяются, а идут подряд. В тех местах, где была нажата клавиша Enter и должен был произойти перенос строки, ничего подобного не случилось. Для того, чтобы восстановить форматирование или задать его с нуля, нужно применять теги форматирования текста. И первые два из них — это тег новой строки и тег абзаца, которые относятся к тегам так называемого структурного форматирования
Теги структурного форматирования
<BR> — одиночный тег структурного форматирования, осуществляющий перенос последующего текста на новую строку.
Тег ставится в том месте, где требуется осуществить перенос. Это легко увидеть на следующем примере:
Пример:
Буря мглою небо кроет,<br>
Вихри снежные крутя.<br>
То, как зверь, она завоет,<br>
То заплачет, как дитя.<br><br>
То по кровле обветшалой<br>
Вдруг соломой зашумит,<br>
То, как путник запоздалый,<br>
К нам в окошко застучит.
<P> — контейнерный тег структурного форматирования, создающий новый абзац — </P>
.
При этом абзацем считается текст, ограниченный от последующего содержимого пустой строкой.
Основное различие между тегами <br> и <p> как раз и заключается в наличии/отсутствии пустой строки снизу текста.
Но есть и еще одно существенное отличие: у тега <br> не бывает никаких параметров, а тег <p>, обладает параметром, позволяющим выровнять текст в абзаце.
align — параметр, позволяющий задавать выравнивание текста по ширине, по центру, по левому или правому краю.
Возможные значения этого параметра:
- left — выравнивание по левому краю center — выравнивание по центру right — выравнивание по правому краю justify — выравнивание по ширине
Например, если записать:
<p align="right">Размещаемый текст</p>
то выравниваться текст будет по правому краю.
Поэкспериментируйте с этими двумя тегами на своей страничке.
Не забывайте, что тег <br> — одиночный и не требует закрытия, а <p> — тег контейнерный и закрытия требует.
Любой текст требует заголовка. Заголовок — это квинтэссенция текста, он объединяет все сказанное в нем воедино, выражая суть написанного. В html существуют теги не только для создания заголовка (заголовка первого уровня), но также и для подзаголовка (заголовка 2-го уровня), под-подзаголовка (заголовка 3-го уровня)...под-под-под-под-подзаголовка (заголовка 6-го уровня). Однако на практике для простых текстов применяются заголовки не выше третьего уровня. Тем не менее, вот все теги для создания заголовка и подзаголовков:
- <H1> — заголовок первого уровня <H2> — заголовок второго уровня <H3> — заголовок третьего уровня <H4> — заголовок четвертого уровня <H5> — заголовок пятого уровня <H6> — заголовок шестого уровня
Название каждого из этих тегов состоит из двух частей: h — сокращения от английского слова header (заголовок); и номера уровня заголовка. Каждый последующий уровень имеет меньший размер шрифта по сравнению с предыдущим. Все шесть тегов являются контейнерными, а значит требуют закрытия. Сам текст заголовка (подзаголовка) помещается внутрь контейнера.
Для горизонтального выравнивания заголовков на странице используется параметр align.
В следующем примере объединено использование заголовков и абзацев
Пример:
<h1 align="center">Пишущая машинка</h1>
<p>Печатные или пишущие машинки повсеместно применялись в 19-20 веках. В середине прошлого столетия практически ни один офис не обходился без этих устройств. </p>
<p>Но в начале 2000-х годов осталось считанное количество компаний, занимающихся их производством: в 2011 году закрылся последний завод по производству печатных машинок.</p>
<h2 align="center">История печатных машинок</h2>
<h3 align="left">Изобретение</h3>
<p>В 1714 году Генри Милл получил патент на создание пишущей машинки. Но это не вызвало серьезных изменений. Только спустя 100 лет у людей появляется интерес к машинам, которые «сами пишут». В 1868 году появилась первая популярная печатная машинка «Ремингтон №1».</p>
<h3 align="left">Выход из обихода</h3>
<p>В настоящее время устройства вроде пишущих машинок стали неактуальными, вследствие повсеместного распространения компьютеров. </p>
<p>Сегодня порой дешевле купить ноутбук, чем пишущую машинку. Кроме того, по качеству печати принтеры намного превосходят печатные машинки.</p>
Создайте страничку с таким кодом и посмотрите, что у вас получилось. Результат должен быть абсолютно таким же как и в примере выше. Если у вас большое разрешение экрана, и каждый абзац примера помещается в одну строку, можете немного уменьшить размеры окна браузера для наглядности.
Теги оформления текста
Вообще, все теги форматирования текста, которых на самом деле не очень много, условно делятся на теги структурного форматирования и теги оформления текста. С первыми из означенных вы только что познакомились. Это теги, которые позволяют создать структуру текста – определить его заголовки, абзацы и. т.д. Теперь перейдем к тегам оформления. К ним относятся те, которые позволяют придать тексту жирность, курсивность, подчеркивание, поменять гарнитуру, цвет и размер шрифта.
В любом серьезном текстовом редакторе текст можно сделать и жирным и курсивным и подчеркнутым; также можно комбинировать перечисленные свойства. Все это доступно и в HTML. Для этого в нем существуют следующие теги оформления текста:
<B>—контейнерный тег, придающий жирность тексту, заключенному в контейнер — </B>
<U> — контейнерный тег, позволяющий подчеркнуть текст, заключенный в контейнер — </U>
<I> — контейнерный тег, превращающий в курсив текст, заключенный в контейнер — </I>
Теги <b>, <i>, <u> применяются в HTML чаще всего. Чтобы их быстрее запомнить, предлагаю вам чаще писать на форумах...Взгляните на картинку ниже:
Рис.1 формирование текста в сообщении на сайте *****
Кнопки B, I, U воздействуют на текст точно также, как и одноименные с ними теги...
Для тегов <i> и <b>, которые относятся к группе так называемых тегов физического форматирования существуют соответствующие аналоги, относящиеся к тегам логического форматирования. Для тега <i> логическим аналогом является тег <em>. А для тега <b> подобным аналогом выступает тег <strong>. Визуально действие этих пар аналогичных тегов неотличимо. Но разница между логическими и физическими тегами все же есть. Физическими тегами текст обычно выделяют для посетителей. А вот логические теги применяются в тех случаях, когда нужно акцентировать внимание поисковика на том или ином слове (фразе). Такой прием очень сильно помогает при раскрутке. Выделяя тегами логического форматирования ключевые слова, вы даете понять поисковой машине, что перед ней именно "ключевики". И когда пользователь наберет в строке поиска фразу, близкую к вашим "ключам", поисковик предложит вашу страничку, как один из результатов поиска.
Но вернемся к тегам физического оформления текста, и рассмотрим неcколько небольших примеров. Начнем с простого. Итак, чтобы создать жирный текст, нужен следующий фрагмент кода:
<b>Жирный текст</b>
Аналогично создается курсив и подчеркивание. А теперь допустим, вы хотите создать курсивный подчеркнутый текст. Для этого нужно записать такой фрагмент кода:
<i><u>Курсивный подчеркнутый текст</u></i>
Создавая такие матрешкоподобные конструкции, когда один контейнер вложен в другой, следите за целостностью контейнеров: тег, который был открыт первым, должен закрываться последним; тег, открытый вторым, закрывается предпоследним (вторым с конца) и. т.д.
Теперь создадим жирный курсивный текст:
<b><i>Жирный курсивный текст</i></b>
И, напоследок, соорудим конструкцию из трех вложенных контейнеров — создадим жирный курсивный подчеркнутый текст:
<b><i><u>Жирный курсивный подчеркнутый текст</u></i></b>
Обязательно проверьте работоспособность всех этих примеров самостоятельно. А затем перейдем к главному из тегов оформления текста:
Тег <font> и его параметры
<FONT> — контейнерный тег оформления текста, предназначенный для изменения размера, цвета и гарнитуры текста, помещенного в контейнер — </FONT>
Тег выполняет свои функции за счет параметров, каждый из которых отвечает за одно из вышеперечисленных свойств текста. При отсутствии параметров тег не производит никакого воздействия на текст.
Итак, вот параметры, позволяющие манипулировать свойствами текста с помощью тега <font>:
size — параметр, позволяющий поменять размер текста, заключенного в контейнер тега.
Может принимать значения от 1 до 7 условных единиц. По умолчанию равен трем. Чем выше значение, тем, соответственно, больше размер шрифта. Это абсолютные значения. Есть еще относительные (от -6 до +6), позволяющие увеличить(+) или уменьшить(-) размер шрифта по сравнению с основным. Изменение размера в этом случае происходит на указанное количество единиц.
color — параметр, позволяющий поменять цвет текста, заключенного в контейнер.
face — параметр, позволяющий поменять гарнитуру текста, заключенного в контейнер.
Например, можно задать гарнитуру Arial или Times New Roman, а также любые другие шрифты, установленные на компьютер пользователя. Именно здесь зарыта собака, не позволяющая выбирать вебмастеру любой шрифт, который взбредет ему в голову. Дело в том, что есть очень малораспространенные шрифты, которые могут отсутствовать на компьютере посетителя сайта. В этом случае заданный шрифт будет заменен на ближайший из списка имеющихся на компьютере шрифтов. Причем, во многих случаях это может привести к нарушению целостного, гармоничного облика страницы. Во избежание таких ситуаций, не выбирайте экзотических шрифтов, используя вместо этого только самые распространенные. Вот они:
- Arial Times New Roman Verdana Courier Helvetica Georgia Sans-serif
Последнее в списке — даже не шрифт, а целое семейство шрифтов без засечек. Шрифтов наподобие Arial, Verdana и Helvetica. Если задать это семейство — браузер посетителя выберет с его компьютера первый попавшийся в списке шрифт без засечек. Т. е. сначала он попробует найти Arial, а если не получится, будет искать следующий шрифт без засечек.
А теперь небольшой пример по тегу <font>:
<font face="Arial" size="7" color="#ff0000">Самый большой шрифт</font>
Загрузите этот код в браузер — в контейнер тега <body>, и посмотрите, что у вас получится. Это самый большой шрифт для html (size="7") типа "Arial" (face="Arial") красного цвета (color="#ff0000").
Еще один пример. Скажем, вам нужен курсивный текст размером в 4 условные единицы, c гарнитурой Times New Roman, зеленого цвета. Первым делом создадим такой шрифт без курсива:
<font size="4" color="green" face="Times New Roman">Шрифт-четверка, зеленого цвета, Times New Roman</font>
Теперь добавляем к шрифту курсивности, заключив полученный код в контейнер тега <i>:
<i><font size="4" color="green" face="Times New Roman">Шрифт-четверка, зеленого цвета, Times New Roman</font></i>
Можно было сделать и наоборот: сначала создать курсивность текста, а затем получившийся код заключить в контейнер тега <font> с нужными свойствами. В данном случае порядок, в котором контейнеры вкладываются друг в друга не играет никакой роли.
P. S. Почему не стоит создавать заголовки тегами оформления?
Вообще говоря, заголовок можно создать и выровнять без использования тегов <h1>...<h6>, применяя вместо этого теги оформления текста. Например, так:
<p align="center"><b><font size="6" face="Times New Roman" color="black">Заголовок первого уровня</font></b></p>
Сравните это с тем, что получается при использовании тега <h1>. Результат в обоих случаях одинаков. Закономерный вопрос: для чего нужны теги <h1>...<h6>, если заголовки можно создавать без их применения?
Дело в том, что теги заголовков относятся к группе структурных. Они не только оформляют текст заголовка нужным образом, но и размечают структуру текста.
Правильная структура нужна не только вам для облегчения чтения собственного кода, но и поисковым системам, которые всегда анализируют структуру текста и учитывают ее при построении поисковой выдачи. Текст, размеченный тегами <h1>...<h6> имеет больше шансов на попадание в первую десятку результатов поиска. Кроме того, поисковики придают большое значение ключевым словам, расположенным в этих тегах, и это тоже учитывается при составлении страницы поисковой выдачи.
Поэтому, отказавшись от структурных тегов в пользу тегов оформления текста, вы значительно усложните раскрутку страницы. А это лишние проблемы, которые вам не нужны. Вот основная причина, по которой не стоит создавать заголовки так, как это показано в примере выше.
P. S.
Я проанализирую посещаемость данной страницы остальными учениками нашей школы и, если статья окажется востребованой, добавлю еще материалы по HTML и DHTML (и это будут теги таблиц, теги изображений, теги гиперссылок, метатеги и на закуску DHTML)
Приведенных примеров вполне достаточно для оформления красочных сообщений на нашем сайте. Успехов, дорогие ученики! Илья Александрович – учитель МОУ СОШ 80 г. Ижевска.
Таблица 2.
ПЕРЕЧЕНЬ ИСПОЛЬЗУЕМЫХ НА ДАННОМ УРОКЕ ЭОР
№ | Название ресурса | Тип, вид ресурса | Форма предъявления информации (иллюстрация, презентация, видеофрагменты, тест, модель и т. д.) | Гиперссылка на ресурс, обеспечивающий доступ к ЭОР |
1 | Бином. Лаборатория знаний | Образовательный | Проектор, доска, интерактивная доска, компьютер ученика, компьютер учителя | http://www. ***** |
