- Курс-практикум «Педагогический драйв: от выгорания к горению»
- «Формирование основ финансовой грамотности дошкольников в соответствии с ФГОС ДО»
- «Патриотическое воспитание в детском саду»
- «Федеральная образовательная программа начального общего образования»
- «Труд (технология): специфика предмета в условиях реализации ФГОС НОО»
- «ФАООП УО, ФАОП НОО и ФАОП ООО для обучающихся с ОВЗ: специфика организации образовательного процесса по ФГОС»
Свидетельство о регистрации
СМИ: ЭЛ № ФС 77-58841
от 28.07.2014
- Бесплатное свидетельство – подтверждайте авторство без лишних затрат.
- Доверие профессионалов – нас выбирают тысячи педагогов и экспертов.
- Подходит для аттестации – дополнительные баллы и документальное подтверждение вашей работы.
в СМИ
профессиональную
деятельность
Конспект урока по теме «Основы языка HTML и Web-дизайна». Информатика. 8 класс
747
0
Гулина Наталия Степановна
МОУ «Средняя школа № 1» г. Кимры Тверской области
Учитель информатики
Основы HTML и Web-дизайна
Урок информатики в 8 классе
Тип урока: урок изучения нового материала.
Цель урока:познакомиться и научиться создавать простейшийHTML-документ.
Что такое HTML?
Всемирная паутина соткана из Web-страниц, которые создаются с помощью так называемого языка разметки гипертекстаHTML (HyperTextMarkupLanguage).HTML не является языком программирования.HTML — язык разметки документа. При разработке HTML-документа выполняется разметка текстового документа, которая служит для указания формы представления информации, содержащейся в документе.
Специальные программы просмотра HTML-документов, которые называются браузерами, служат для интерпретации файлов, размеченных по правилам языка HTML, форматирования их в виде Web-страниц и отображения их содержимого на экране компьютера. Существует большое количество программ-браузеров — MicrosoftInternetExplorer,Opera,MozillaFirefox,GoogleChrome.
Символы, которые управляют отображением текста и при этом сами не отображаются на экране, в языке HTML называются тэгами (от английского слова tag — ярлык, признак).
Все тэги языкаHTML выделяются символами-ограничителями (< и >), между которыми записывается идентификатор (имя) тэга и его параметры. Единственным исключением из этого правила являются тэги комментария (<!-- и --!>) . Названия тэгов, а также их параметров можно записывать на любом регистре.
Большинство тэговHTML используется попарно, т. е. Для определенного тэга, назовем егооткрывающим, в документе имеется соответствующийзакрывающий тэг. По правилам HTML закрывающий тэг записывается так же, как и открывающий, но с символом / (прямой слэш) перед именем тэга. Единственным принципиальным различием парных тэгов является то, что закрывающие тэги не использую параметры.
Тэги, которые нуждаются в соответствующих завершающих тэгах, называются тэгами-контейнерами. Все, что записано между соответствующим открывающим и закрывающим тэгом, называется содержимым тэга-контейнера.
Ряд тэгов не нуждается в завершающих тэгах. Например, тэг вставки изображений <IMG>, принудительного перевода строки <BR>.
Существуют общие правила интерпретации тэгов браузерами. В отличие от языков программирования, в которых ошибочные операторы приводят к выдаче соответствующих сообщений на этапе компиляции программы и требуют правки, в HTML не принято реагировать на неверную запись тэгов. Неверно записанный тэг или его параметр просто игнорируется браузером.
Структура документа
Первым тэгом, с которого следует начинать описание документов HTML, является тэг < HTML>. Он должен всегда начинать описание документа, а завершать описание документа должен тэг < /HTML>. Эти тэги обозначают, что находящиеся между ними строки представляют единыйHTML-документ. Без этих тэгов браузер не в состоянии идентифицировать формат документа и правильно его интерпретировать. Большинство современных браузеров могут опознать документ и не содержащих тэгов < HTML > и </ HTML >, все же их употребление крайне желательно.
М
ежду парой < HTML > и </ HTML > располагается сам документ. Документ может состоять из двух разделов — раздела заголовка (начинающийся тэгом <HEAD>) и раздела содержательной части документа (начинающийся тэгом <BODY>).
Раздел документаHEAD
Раздел документаHEAD определяет его заголовок и не является обязательным тэгом. Тэги, находящиеся внутри HEAD (кроме названия документа, описываемого с помощью тэга <TITLE>), не отображаются на экране.
Раздел заголовка открывается тэгом <HEAD>, который обычно следует сразу же за тэгом <HTML>. Закрывающий тэг </HEAD> показывает конец этого раздела.
Название документа
Тэг <TITLE> служит для того чтобы дать документу название, которое показывается в заголовке окна браузера. Тэг <TITLE> нельзя путать с названием файла документа и с заголовками внутри документа.
Название документа записывается между тэгами <TITLE> и </TITLE> и представляет собой строку текста (рекомендуется 60 символов).
Раздел документаBODY
В этом разделе документа располагается его содержательная часть. Раздел документа BODY начинается тэгом <BODY> и завершается тэгом </BODY>, между которыми располагается все содержимое данного раздела. Тэг BODY имеет ряд параметров.
Параметр | Назначение |
ALINK | Определяет цвет активной ссылки |
LINK | Определяет цвет еще не просмотренной ссылки |
VLINK | Определяет цвет уже просмотренной ссылки |
BACKGROUND | Указывает на URL-адрес изображения, которое используется в качестве фонового |
BGCOLOR | Определяет цвет фона документа |
TEXT | Определяет цвет текста |
SCROLL | Устанавливает наличие или отсутствие полос прокрутки окна браузера |
Пример задать изображение осень.jpg в качестве фона для web-страницы:
Откройте программу блокнот.
Наберите следующий текст:
<html>
<BODY BACKGROUND= “C:\Мои документы\осень.jpg”>
</html>
В меню Файл выберите команду Сохранить как (выберите свою папку, задайте название файлу: Моя первая страничка.html и нажмите кнопку Сохранить).
Зайдите в свою директорию и запустите созданнуюweb-страницу.
ФорматированиеHTML-документа
Разделение на абзацы
Для разделения на абзацы служит тэг <P> перед началом каждого абзаца и </P> после абзаца (не обязателен). Браузеры отделяют абзацы пустой строкой. Тэг <P> может задаваться с параметром горизонтального выравнивания ALIGN. Возможные значения параметра приведены в таблице.
Значение параметра ALIGN | Действие |
LEFT | Выравнивание текста по левой границе окна браузера |
CENTER | Выравнивание текста по центру окна браузера |
RIGHT | Выравнивание текста по правой границе окна браузера |
JUSTIFY | Выравнивание текста по ширине окна браузера |
С
оздайтеhtml-документ и расположите текст следующим образом:
Откройте блокнот.
Введите текст:
<html>
<body bgcolor=lightblue>
<p align=left>
Меня зовут Карабасик-Барабасик.
</p>
<p align=center>
Я живу в г. Кимры
</p>
<p align=right>
и учусь в школе № 55.
</p>
</body>
</html>
Сохраните созданнуюweb-страничку.
Перевод строки
При отображении текстовых документов место переноса строки в пределах абзаца определяется автоматически в зависимости от размера шрифта и размера окна просмотра. Перенос строки осуществляется только по символам-разделителям слов, например — пробелам. Иногда требуется задать принудительный перевод строки, для этого используется тэг <BR> (не имеет закрывающего). В отличие от тэга абзаца при использовании тэга <BR> не будет образовываться пустая строка.
Тэги форматирования текста
Тэг <B> отображает текст полужирным шрифтом.
Тэг <I> отображает текст курсивом.
Тэг <U> отображает текст подчеркнутым.
Тэг <STRIKE> и <S> отображает текст, перечеркнутый горизонтальной линией.
Тэг <BIG> отображает текст шрифтом большего размера.
Тэг <SMALL> отображает текст шрифтом меньшего размера
Тэг <SUB> сдвигает текст ниже уровня строки и выводит его шрифтом меньшего размера. Удобно использовать для математических индексов.
Тэг <SUP> сдвигает текст выше уровня строки и выводит его шрифтом меньшего размера. Удобно использовать для задания степеней в математике.
Тэг <BLINK> отображает мигающий текст.
Пример:
<i> Текст курсивом </i>
<i><u> Текст подчеркнутым курсивом </u></i>
<b><i> Полужирный наклонный текст </i></u>
Тэг <FONT>
Тэг <FONT> задает параметры шрифта. Имеет следующие параметры:
Параметр | Назначение |
FACE | Указывает тип шрифта |
SIZE | Указывает размер шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра. Принято считать, что размер «нормального» шрифта соответствует значению 3. |
COLOR | Устанавливает цвет шрифта |
Пример:
<FONT FACE= “Arial”, “Verdana” SIZE=4 COLOR =green>Шрифтразмером 4, типшрифта Arial или Verdana </FONT>
<FONT SIZE=-1 COLOR =green> Шрифтразмера 2 зеленогоцвета </FONT>
Зайдите в свою директорию, запустите созданнуюweb-страницу в блокноте, измените текст:
<html>
<body bgcolor=lightblue>
<p align=left>
<font size=5 color=red>
Менязовут <b>Карабасик-Барабасик.</b>
</font>
</p>
<p align=center>
<font size=2 color=green>
Я живу в г. Золотой ключик
</font>
</p>
<p align=right>
<font size=4 color=blue>
иучусьвшколе № 55.
</font>
</p>
</body>
</html>
Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/138890-konspekt-uroka-po-teme-osnovy-jazyka-html-i-w
БЕСПЛАТНО!
Для скачивания материалов с сайта необходимо авторизоваться на сайте (войти под своим логином и паролем)
Если Вы не регистрировались ранее, Вы можете зарегистрироваться.
После авторизации/регистрации на сайте Вы сможете скачивать необходимый в работе материал.
- «Черчение: методика преподавания и современные педагогические технологии обучения»
- «Практическая деятельность социального педагога в контексте реализации ФГОС НОО и ФГОС ООО от 2021 года»
- «Технологии и формы организации работы педагога с родителями обучающихся»
- «Методика преподавания основ безопасности жизнедеятельности»
- «Подготовка к ЕГЭ по русскому языку в условиях реализации ФГОС: содержание экзамена и технологии работы с обучающимися»
- «Профилактика и коррекция девиантного поведения обучающихся в работе социального педагога»
- Управленческая деятельность в организации дополнительного образования детей
- Психология и педагогика дошкольного образования
- Педагогическое образование: теория и методика преподавания мировой художественной культуры
- Профессиональная деятельность музыкального руководителя дошкольной образовательной организации
- Педагогическое образование: тьюторское сопровождение обучающихся
- Тьюторское сопровождение в образовательной организации
Чтобы оставлять комментарии, вам необходимо авторизоваться на сайте. Если у вас еще нет учетной записи на нашем сайте, предлагаем зарегистрироваться. Это займет не более 5 минут.