Тема урока: «Язык разметки гипертекста HTML» Цель: познакомить учеников с языком разметки гипертекста – HTML. Задачи: Сформулировать основные принципы создания WEB-страниц; познакомить учеников с основными командами оформления текста; продемонстрировать использование этих команд на конкретных примерах оформления WEB-страниц; формировать навыки и умения создания простейших WEB-страниц; развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль; воспитывать аккуратность, внимательность, вежливость и дисциплинированность, бережное отношение к своему здоровью. Тип урока: усвоение новых знаний.

Язык гипертекстовой разметки

HTML Язык гипертекстовой разметки

Язык гипертекстовой разметки

HTML HTML (Hyper Text Markup Language) – стандартный язык для создания Web-страниц Web-страница – документ, который можно открыть и посмотреть с помощью программы просмотра – браузера. Web-сайт – совокупность Web-страниц. HTML имеет свои команды, которые называются тегами.

Язык гипертекстовой разметки

Теги Тег - элемент HTML, представляющий из себя текст, заключенный в угловые скобки <>. Обычно используются два тега - открывающий и закрывающий.

Язык гипертекстовой разметки

Заголовок web- страницы Название страницы Содержимое страницы

Язык гипертекстовой разметки

Стандартный текст страницы Моя страничка Эта страничка обо мне

Язык гипертекстовой разметки

 Текст страницы изначально пишется в программе «Блокнот». Затем его надо правильно сохранить!

Язык гипертекстовой разметки

Получившаяся страница Теперь, если мы откроем данный файл в браузере, то увидим следующее:

Язык гипертекстовой разметки

Форматирование страницы  Пока наша страница не очень красива и красочна. Изменим ее, добавив более крупный шрифт, красивый фон и пару картинок

Язык гипертекстовой разметки

Размер шрифта  Размер шрифта задается тэгами от

( самый крупный) до

( самый мелкий).  Заголовок страницы целесообразно выделить самым крупным шрифтом:

Моя страничка

Язык гипертекстовой разметки

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

Язык гипертекстовой разметки

Размер шрифта и выравнивание Эта страничка обо мне

Язык гипертекстовой разметки

Шрифт  Тэг «FONT» задает параметры форматирования шрифта текста. Его атрибуты:COLOR цвет шрифта;

Язык гипертекстовой разметки

Изменение цвета текста  Моя страничка 

Язык гипертекстовой разметки

Горизонтальная линия  Чтобы отделить заголовок от остального текста, можно использовать горизонтальную линию.  Тэг линии

. Этот тэг одиночный он не требует закрывающего тэга.

Язык гипертекстовой разметки

Заголовок страницы Эта страничка обо мне

Язык гипертекстовой разметки

Абзацы  Чтобы разделить текст на абзацы, можно использовать теги

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

Язык гипертекстовой разметки

Текст страницы    Моя страничка     Эта страничка обо мне 

  На этом сайте Вы сможете найти информацию обо мне, о том, чем я занимаюсь на работе и в свободное время.

 Здесь вы увидите фотографии меня и моих друзей, моих родных и близких людей.

 

Язык гипертекстовой разметки

Страница в браузере

Язык гипертекстовой разметки

Вставка изображений  Чтобы сайт был визуально привлекательным, на нем можно разместить изображения.  На webстраницах могут размещаться файлы трех форматов GIF, JPG, PNG.  На титульном листе логично разместить фотографию того, кому посвящен этот сайт.

Язык гипертекстовой разметки

Вставка изображений  Вставка изображения производится с помощью тэга с атрибутом SRC, который указывает на место хранения файла на компьютере.  Например:

Язык гипертекстовой разметки

Фон слайда  Для изменения фона можно воспользоваться атрибутом тэга background, который указывает на место хранения файла фонового рисунка на компьютере. .  Чтобы фон при прокрутке текста не двигался зафиксируем его с помощью атрибута bgproperties="fixed"

Язык гипертекстовой разметки

Фон слайда 

Язык гипертекстовой разметки

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

02.02.2019