- Курс-практикум «Педагогический драйв: от выгорания к горению»
- «Труд (технология): специфика предмета в условиях реализации ФГОС НОО»
- «ФАООП УО, ФАОП НОО и ФАОП ООО для обучающихся с ОВЗ: специфика организации образовательного процесса по ФГОС»
- «Специфика работы с детьми-мигрантами дошкольного возраста»
- «Учебный курс «Вероятность и статистика»: содержание и специфика преподавания в условиях реализации ФГОС ООО и ФГОС СОО»
- «Центр «Точка роста»: создание современного образовательного пространства в общеобразовательной организации»
Свидетельство о регистрации
СМИ: ЭЛ № ФС 77-58841
от 28.07.2014
- Бесплатное свидетельство – подтверждайте авторство без лишних затрат.
- Доверие профессионалов – нас выбирают тысячи педагогов и экспертов.
- Подходит для аттестации – дополнительные баллы и документальное подтверждение вашей работы.
в СМИ
профессиональную
деятельность
Изучение языка разметки HTML на занятиях информатики (статья)
879
0
ДЕПАРТАМЕНТ ОБРАЗОВАНИЯ И НАУКИ КЕМЕРОВСКОЙ ОБЛАСТИ
Государственное образовательное учреждение среднего профессионального образования
Кемеровский профессионально-технический техникум
Изучение языка разметки HTML на занятиях информатики (статья)
подготовила преподаватель информатики
Ловинская Лариса Владимировна
г. Кемерово
2014
Преподаватели информатики всегда выделяют несколько часов в своем учебном плане изучению языка HTML – средства для формирования гипертекстовых документов. Молодым специалистам может показаться сложным процесс рассмотрения данной темы. На самом деле, дать основное представление о языке разметки HTML обучающимся можно за 1-2 занятия. В данной статье предлагается опыт преподавания темы в процессе изучения дисциплины «Информатика и ИКТ».
Язык разметки гипертекста был разработан для подготовки информации и сохранения ее в виде WWW-документов (страниц, сайтов). Основное назначение языка состоит в представлении текстовой, графической, видео- и аудиоинформации в виде, обеспечивающем минимальный объем передаваемой в сеть информации. Гипертекстовые ссылки встроены в текст документа и хранятся как его часть. Благодаря этому языку можно не только формировать гипертекстовые документы, но и осуществлять связь текста и изображения с другими документами.
Для создания Web-страниц существует множество разнообразных HTML-редакторов высокого уровня, которые не требует знаний языка разметки. Но также для подготовки информации и составления HTML-кода в учебных целях можно применять простые текстовые редакторы типа Блокнот.
Рассматривать работу с языком разметки HTML желательно с использованием проектора. Начать следует с теоретического изложения материала. Основные понятия темы обучающиеся могут записывать в рабочую тетрадь.
HTML – язык разметки гипертекстовых документов.
Гипертекстовый документ – это документ, содержащий ссылки на другие документы.
Гиперссылка – выделенный объект, связанный с другими документами и реагирующий на щелчок мыши.
Браузер – программа просмотра гипертекстовых документов.
Как любой язык программирования, HTML имеет свою грамматику и правила записи. Прописать код языка разметки можно в текстовом редакторе Блокнот. После составления текста программы в текстовом редакторе его необходимо сохранить в формате HTML. Отображение документа производится не при его создании, а лишь после того, как он будет загружен в WWW-браузер.
Вид и местоположение объектов в таком документе определяется тэгами.
Тэги – элементы разметки, указывающие способ отображения объектов документа в браузере.
Тэги обозначаются скобками < >. Текст, который не входит в такие скобки, будет виден при просмотре готовой страницы.
Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры. Большая часть тэгов образует контейнер, состоящий из открывающегося и закрывающегося тэгов - < > </>. Тэги можно печатать как заглавными, так и строчными буквами.
Документ HTML всегда начинается с тега <HTML> и заканчивается закрывающим тегом</HTML>. Внутри документа выделяются два основных раздела: раздел заголовков и тело документа, идущие друг за другом. Заголовок страницы помещается в контейнер<head></head>. Заголовок содержит название страницы, которое помещается в контейнер<title></title> и при просмотре отображается в верхней строке окна браузера.
Основное содержание размещается в теле документа, которое ограничивается парным тегом<BODY></BODY>. Правильный документ HTML, содержащий все теги, определяющие структуру, имеет вид:
<HTML>
<HEAD>
<TITLE> Заголовок документа </TITLE >
</HEAD>
<BODY>
Текст документа
</BODY>
</HTML>
Далее следует рассмотреть создание простейшейWeb-страницы на примере пошагового изменения программы и обновления кода в браузере. Только таким образом обучающиеся смогут легко запомнить алгоритм действий. В ходе объяснения параллельно рассматриваются основные тэги языка разметки, допустим с помощью плакатов или открытием отдельных файлов, заранее заготовленных преподавателем.
Чтобы объяснить, как создается документ, откроем программу Блокнот. Наберем в окне редактора вышеизложенный код с небольшими изменениями. В тексте кода будет использоваться тэг перевода строки <BR>, что обозначает абзац, перевод текста на другую строку. Тэг абзаца <P> тоже переводит текст на новую строку, и добавляет еще одну пустую строку, что зрительно выделяет абзацы.
<HTML>
<HEAD>
<TITLE> Проба </TITLE >
</HEAD>
<BODY>
Моя первая страница.
<P>
Здравствуйте!
<BR>
Добро пожаловать!
</BODY>
</HTML>
Сохраним созданный документ под именем index.htmв созданной для работы папке. Программу Блокнот можно закрыть. В самой же папке должен отобразиться документ в видеWeb-страницы.
Откроем созданный файл при помощи браузера и просмотрим его. Название Web-страницы (Проба) отразилось в верхней строке браузера, а текст документа выглядит следующим образом:
Закроем браузер. Чтобы внести изменения в созданный документ, достаточно открыть его через контекстное меню командойОткрыть с помощью/Блокнот.
Выделим текст различным начертанием и изменим размер шрифта в первой строке. Для этого используются тэги форматирования символов и тэги заголовков.
Тэги форматирования символов:
Результат:
Тэги заголовков:
Результат:
Изменим код страницы:
<HTML>
<HEAD>
<TITLE> Проба </TITLE >
</HEAD>
<BODY>
<H3>Моя первая страница. </H3>
<P>
<B>Здравствуйте! </B>
<BR>
<I>Добро пожаловать! </I>
</BODY>
</HTML>
Сохраним изменения в Блокноте и закроем его. Просмотрим результат в браузере.
Если нужно выделить большой фрагмент текста, или только одно слово в строке, но без переноса строки, то тэг заголовка при этом не поможет. В таких случаях используется тэг <font></font>:
<fontsize="+4"> текст </font>,
<font size="+3"> текст </font>,
<font size="+2"> текст </font>,
<font size="+1"> текст </font>,
<font size="+0"> текст </font>,
<font size="-1"> текст </font>,
<font size="-2"> текст </font>.
Параметрsize задает размер шрифта, но, в отличие от заголовков, текст не выделяется жирным шрифтом.
Изменим код страницы:
<HTML>
<HEAD>
<TITLE> Проба </TITLE >
</HEAD>
<BODY>
<H3>Моя первая страница. </H3>
<P>
<B>Здравствуйте! </B>
<BR>
<fontsize="+2"><I>Добро пожаловать! </I></font>
</BODY>
</HTML>
Сохраним изменения в Блокноте и закроем его. Просмотрим результат в браузере.
Обычно на этом месте обучающиеся сами захотят попробовать создать Web-страничку, поэтому следует перейти от теоретической части занятия к практической работе за компьютером.
Для работы следует заранее подготовить инструкционные карты с готовым HTML-кодом и пошаговым добавлением нового материала: как прописать цвет текста и цвет фона, как вставить изображение и т.п. Здесь все зависит от творчества преподавателя. Наши обучающиеся уже на втором занятии самостоятельно создают следующие работы:
Таким образом, преподавать данную тему можно легко и просто. Обучающиеся всегда с интересом выполняют практические задания по созданию Web-страниц. Со стороны преподавателей бывает достаточно только объяснить основные понятия и алгоритм работы.
Список использованной литературы
Михеева, Е.В. Информатика [Текст]: учебник для средн. професс. образования / Е.В. Михеева, О.И. Титова. М.: Изд. центр «Академия», 2011. – 352 с. [Рекомендовано Мин образования и науки РФ]
Угринович, Н.Д. Информатика и ИКТ [Текст]: учебник / Н.Д. Угринович. М.: БИНОМ. Лаборатория знаний, 2013. – 184 с.: ил. – [Допущено Мин образования РФ]
Чубарова, Е.Г. Создание Web-сайтов с помощью HTML-разметки [Текст]: учебная программа для предпрофильной подготовки / Е.Г. Чубарова. Кемерово: Изд-во КРИПКиПРО, 2005. С. 14-35.
Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/83827-izuchenie-jazyka-razmetki-html-na-zanjatijah-
БЕСПЛАТНО!
Для скачивания материалов с сайта необходимо авторизоваться на сайте (войти под своим логином и паролем)
Если Вы не регистрировались ранее, Вы можете зарегистрироваться.
После авторизации/регистрации на сайте Вы сможете скачивать необходимый в работе материал.
- «Преподавание русского языка и литературы по ФГОС ООО и ФГОС СОО: содержание, методы и технологии»
- «Содержание и организация работы методиста ДОУ в соответствии с ФГОС ДО»
- «Создание единого образовательного пространства: федеральная образовательная программа начального общего образования (ФОП НОО)»
- «Подготовка обучающихся к ЕГЭ 2025 по физике в условиях реализации ФГОС»
- «Социальная работа с детьми-сиротами и оставшимися без попечения родителей»
- «Социальное обслуживание граждан пожилого возраста»
- Педагогика и методика преподавания физической культуры
- Педагогика и методика преподавания биологии
- Методы и технологии преподавания английского языка в образовательной организации
- Менеджмент в образовании
- Основы менеджмента в образовательной организации
- Методист дошкольной образовательной организации. Педагогика и методика дошкольного образования
Чтобы оставлять комментарии, вам необходимо авторизоваться на сайте. Если у вас еще нет учетной записи на нашем сайте, предлагаем зарегистрироваться. Это займет не более 5 минут.