Язык разметки гипертекста html 9 класс

Урок информатики «Язык разметки гипертекста HTML» (9 класс)

Цель урока : сформировать у учащихся умения и навыки работы в среде HTML путем создания Web – страницы, адаптировать ребёнка к компьютерной среде.

• обеспечить прочное и сознательное овладение учащимися знаний, полученных на предыдущих уроках (устроительство таблиц, необходимость таблиц, физическая и логическая ячейка, заливка, оформление);

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

· создание условий для развития коммуникативных компетенций: умение использовать информацию для творческой работы;

· формирование устойчивого интереса учащихся к предмету.

Методы: проектная деятельность, индивидуальные формы работы.

Программное обеспечение : Блокнот, фотографии, готовая презентация в программе Po w erPoint, операционная система Windows XP , USB – порты, дисководы, проектор, экран.

Пояснение: Все примеры использованы из программ учеников, презентация составлена на основе готовых работ учеников.

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

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

Перед ребятами ставится цель: создать на уроке Web – страницу, которая будет являться визиткой класса. Для этого понадобятся знания учащихся по созданию таблиц в HTML и фотографии, которые ученики принесли на урок.

Учитель: — Вы должны проявить свое творчество для создания визитки. Можно брать за основу примеры, о которых я буду говорить, но как будет выглядеть ваша страничка — все зависит от вашего желания и умения.

Детям предлагается посмотреть на экран, где они видят образец визитки. (слайд 1)

2. Творческая работа.

а) Детям предлагается начать свою работу с набора программы, которая позволяет построить таблицу, состоящую из 3 строк и 3 столбцов. (слайд 2)

Обязательно обратить внимание на то, что по желанию можно изменить количество строк и столбцов.

Ученики набирают программу в блокноте. Программа должна иметь примерно следующий вид.

Источник

HTML

Подсоединение компьютера к глобальной сети Интернет часто осуществляется посредством телефонной сети. К сожалению, скорость передачи информации по телефонной сети весьма невелика. Поэтому в Интернете для уменьшения количества символов, передаваемых за единицу времени(то есть, трафика) пересылают не сам документ, а его описание на особом языке. Программа для просмотра веб-страниц – браузер сама воспроизводит документ на основе полученного описания. Для описания электронных документов существует особый язык – HTML. Получив описание, написанное на этом языке, браузер воссоздает исходный документ, формируя текст и расставляя иллюстрации в нужных местах.
HTML (HyperText Markup Language, то есть язык разметки гипертекста) –это язык Всемирной паутины. Каждый раз, открывая ту или иную веб-страницу, мы на самом деле открываем документ, написанный на языке HTML. Все веб-документы отформатированы с помощью языка HTML. Для перехода с одной страницы такого документа на другую предусмотрены гиперссылки, созданные посредством языка HTML. Размещенные на веб- страницах цветные иллюстрации, всевозможные формы для заполнения и бегущая строка видны опять-таки благодаря языку HTML.
Гипертекст – это текст со ссылками на другие документы. Чем отличается гипертекст от обычного текста? Вспомните энциклопедический словарь. В статье словаря, раскрывающей какое-либо понятие, некоторые слова выделены курсивом: это означает, что в данном словаре имеются статьи, посвященные этим словам – эти статьи можно найти и прочитать в той же книге. Такое указание на слово является ссылкой. Ссылка дает возможность получения дополнительной информации о слове или группе слов. Гипертекст тоже организован именно так.
Термин “гипертекст” впервые использовал в 1969 году Тед Нельсон. С информацией, написанной на языке гипертекста, можно работать только на компьютере.
Техника чтения обычного текста такова: прочитав страницу, переходишь к следующей. В технологии гипертекста последовательность чтения может быть произвольной, так как с помощью гиперссылки можно моментально перейти на любую страницу. Ссылки обычно выделяются в тексте цветом либо подчеркиванием. Такие ссылки называются гиперссылками, или гиперсвязями.
Объектом гиперссылки может стать отдельное слово, целое предложение или графический объект. При наведении указателя мыши на гиперссылку он меняет форму.
Посредством гиперссылок гипертекст может связывать друг с другом множество различных документов. Текстовые файлы, созданные при помощи HTML, имеют расширение .html или .htm. Их называют HTML-файлами.
Гиперссылка – это выделенный объект, связанный с другими объектами и реагирующий на щелчок мыши.

Теги

С точки зрения языка HTML, гипертекст – это текст с кодами разметки.
Обычно вместо термина “код разметки” применяют термин “тег”.
Теги – это команды, определяющие правила отображения текста в браузере.
Тег всегда начинается открывающей угловой скобкой (<) и завершается закрывающей угловой скобкой (>). При написании тегов прописные и строчные буквы не учитываются, то есть, например, , и – это один и тот же тег.
Познакомимся с несколькими наиболее важными тегами, указывающие на то, что документ является именно HTML-документом, тегами заголовков, а также тегами, делящими документ на логические части.
Различные веб-браузеры отражают один и тот же HTML-документ не одинаково: наблюдаются различия в шрифтах, цвете, размере и т.д. При сохранении HTML-файла очень важно использовать расширение .html или .htm Это позволяет с легкостью определить тип документа. Такой документ веб-браузер легко распознает и открывает не как обычный текст, а как веб-страницу. Поэтому HTML-документ следует рассматривать как логический, а не как физический документ. Другими словами, вид документа может изменяться в зависимости от читающей его программы и от класса компьютера.

Тег

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

Источник

Презентация «Язык гипертекстовой разметки HTML» 9 класс

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

Подписи к слайдам:

Язык гипертекстовой разметки HTML Подготовил учитель информатике Пажитнев Максим Викторович Основные понятия

• Тег (языки разметки) — элемент языка разметки гипертекста (например, XML, HTML).
• HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки
• Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки документов во Всемирной паутине.

Основные разделы документа HTML.

• — начало страницы
• -оформление заголовка страницы
• заголовок, автор
• — текст и основная часть страницы

Работа с текстом

• ваш заголовок

• ваш текст

  — создание абзаца ALIGN=“left” – выравнивание текста по левой стороне ALIGN=“right” – выравнивание текста по правой стороне ALIGN=“center” – выравнивание текста по центру ALIGN=“justify” — выравнивание текста по ширине
• … — не позволяет разрывать текст на строке
• — прерывание текста, перенос на следующую строку
• .. — жирный
• .. — курсив
• .. — подчеркивание
• .. — перечеркивание

Изменение шрифта и цвета шрифта

• цвет шрифта
• FACE=»Times New Roman“ изменение шрифта
• SIZE=“1” – размер шрифта от 1 до 7 Мороз и солнце; день чудесный!
  Еще ты дремлешь, друг прелестный –
  Пора, красавица, проснись;
  Открой сомкнуты негой взоры

Изменение цвета шрифта …

• aqua ##00FFFF
• black ##000000
• blue ##0000FF
• fuchsia ##FF00FF
• gray ##808080
• green ##008000
• lime ##00FF00
• maroon ##800000
• navy ##000080
• olive ##808000
• purple ##800080
• red ##FF0000
• silver ##C0C0C0
• teal ##008080
• white ##FFFFFF
• yellow ##FFFF00

Изменение цвета страницы

• ………………………………………..

Тег и атрибут вставки изображений на Web-странице

• , где xxx.jpg название файла изображения.
• Если картинка находится в папке picture html код будет такой:

Теги и атрибуты гиперссылки на Web-странице

• Указатель тег с атрибутом для создания гиперссылки
• …
  контейнер для создания гиперссылки на адрес электронной почты

Теги и атрибуты для создания списков на Web-странице

• 
  …

  
  контейнер для создания нумерованных списков
• тег элемента списка
• 
  …

  
  контейнер для создания маркированного списка
• тег элемента списка

• …

  контейнер для создания списка терминов
• тег для создания термина
• тег для создания определения

Алгоритм вставки таблиц:

1. описание таблицы; 2. описание строки; 3. описание ячейки; 4. ввод текста ячейки.

Создание и форматирование таблиц

Вставка таблицы — парный тэг

По умолчанию текст выравнивается по левому краю, ширина столбца — по наиболее длинному элементу.

BORDER “ “ – толщина границы таблицы в пикселях

WIDTH “ “ – ширина таблицы в пикселях или процентах, относительно окна браузера

Вставка строки таблицы — парный тэг

Align = (left, center, richt) – горизонтальное выравнивание

Valign = bottom, middle, top) – вертикальное выравнивание

Вставка ячейки таблицы — парный тэг

Align = (left, center, richt) – горизонтальное выравнивание

Valign = (bottom, middle, top) – вертикальное выравнивание

• WIDTH (ширина таблицы) и HEIGHT (высота таблицы) тега .
• Форма записи: WIDTH=num или WIDTH=num%, где num — численное значение ширины всей таблицы в пикселах или в процентах от всего размера окна. Заметим, что допустимо задавать значения, большие 100%, хотя трудно представить себе случай, где это необходимо. Пример:
• .

Таблица содержит 1 строку,

Источник

Учебная презентация по теме » Язык HTML (начальные сведения)»
презентация урока для интерактивной доски (информатика и икт, 9 класс) по теме

По теме: методические разработки, презентации и конспекты

Учебная презентация по теме » Язык HTML (таблицы, создание форм)»

учебная презентация по теме «Повседневная жизнь» (часть 1) к УМК Верешагиной И.Н. «Английский язык 3 класс

учебная презентация к УМК Верещагиной И,Н. «Английский язык 3 класс» помогает знакомить учащихся с новой лексикой, отрабатывать новую лексику в устной речи, является наглядным пособием.

учебная презентация по тему «Английский год» Части 1-3 к УМК Верещагиной И.Н. «Английский язык 3 класс»

Учебная презентация по теме «Английский год» (части 1-3) к УМК Верещагиной И.Н. «Английский язык 3 класс» позволяет развивать навыки чтения, устной речи, является наглядным материалом.

учебная презентация по теме «Travelling» к УМК «Английский язык 4 класс» Верещагиной И.Н., Афанасьевой О.В.

Учебная презентация по теме «Путушествия» к УМК «Английский язык 4 класс» Верещагиной И.Н., Афанасьевой О.В. позволяет отрабатывать навыки чтения, активизировать новую лекскику, развивать навыки устно.

учебная презентация по теме «Лондон. Вестминстер» к УМК «Английский язык 4 класс» Верещагиной И,Н., Афанасьевой О.В.

Учебная презентация по теме «Лондон. Вестминстер» к УМК «Английский язык 4 класс» Верещагиной И.Н., Афанасьевой О.В. позволяет отрабатывать навыки чтения, устной речи, является наглядным материалом.

учебная презентация по теме «Travelling» к УМК «Английский язык 4 класс» Верещагиной И.Н., Афанасьевой О.В.

Презентация разработана для проведения урока английского языка в 4 классе по теме «Путешествия» и закрепления грамматического материала по теме «Past Simple & Present Perfect».

Учебная презентация по теме «Одежда» к УМК Верещагиной И.Н. «Английский язык 3 класс»

Учебная презентация по теме «Одежда» к УМК Верещагиной И.Н. «Английский язык 3 класс» может быть использована как дополнительный материал для развития навыков чтения устной речи.

Источник

Читайте также:  No module named networkx питон