HTML


Программа спецкурса «Язык разметки гипертекста HTML».

ПРАКТИЧЕСКАЯ  РАБОТА № 1


17.10.2014

Задание 1. Создание простейших файлов HTML

Чтобы создать свой файл HTML, сделайте следующее:

  1.  Создайте папку HTML в папке Вашего класса D:\Uchebnaya\№_klassa\, в которой мы будем сохранять созданные Web-страницы.
  2. Запустите стандартную программу Блокнот (Notepad, Sublime Text 2, Bred0).
  3. Наберите в окне редактора простейший текст файла HTML:

<HTML>
<HEAD>
<TITLE>Познай Крым через HTML!</TITLE>
</HEAD>
<BODY>
Крым глазами путешественника!
</BODY>
</HTML>

  1. Сохраните файл под именем crimea.htm
  2. Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer, Google Chrome или любой другой, установленный на вашем компьютере.

Убедитесь, что название Web-страницы (Познаём Крым через HTML!) отразилось в верхней статусной строке браузера, текст «Крым глазами путешественника!» отразился в рабочем поле браузера.


01.11.2014

 Задание 2. Управление расположением текста на экране

Информация.
При отображении HTML-документов браузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущих подряд пробелов.
Откройте первоисточник Web-страницы – в программе Блокнот (Notepad, Sublime Text 2, или Bred 3.0), для редактирования в кодах HTML.
Внесите изменения в текст файла HTML, расположив слова «Расписание», «занятий», «на вторник» на разных строках:

<HTML>
<HEAD>
<TITLE> Познай Крым через HTML!</TITLE>
</HEAD>
<BODY>
Крым
глазами
путешественника!</BODY>
</HTML>

1. Сохраните внесённые изменения в файле crimea.htm
2. Просмотрите с помощью браузера новую полученную Web-страницу, используя  клавишу F5 или с помощью команд Вид>>Обновить. Изменилось ли изображение текста на экране?
Примечание
В дальнейшем, после внесения изменений в Web-страницу, всегда выполняйте пункты 1-2 в следующих заданиях.


10.02.2015

Задание 3. Тэги перевода строки и абзаца

Информация.
Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе браузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
Тэг перевода строки <BR> отделяет строку от последующего текста или графики. Тэг абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзаца. Оба тэга являются одноэлементными.

1. Внесите изменения в текст файла HTML:

<HTML>
<HEAD>
<TITLE>Познай Крым через HTML!</TITLE>
</HEAD>
<BODY>
Познай <P>
Крым <BR>
через HTML!
</BODY>
</HTML>

  1. Сохраните внесённые изменения в файле crimea.htm
  2. Просмотрите с помощью браузера новую полученную Web-страницу. Как изменилось изображение текста на экране?

18.03.2015

Задание 4. Выделение фрагментов текста

Информация.
Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тэга выделения фрагментов текста:

<B> … </B> для выделения полужирным,
<I> … </I> для выделения курсивом,
<U> …</U> для выделения подчеркиванием.

  1. Внесите изменения в файл crimea.htm:

<HTML>
<HEAD>
<TITLE>Познай Крым через HTML!</TITLE>
</HEAD>
<BODY>
<B> Крым </B><I> глазами </I> <U> путешественника!</U>
</BODY>
</HTML>

  1. Посмотрите новую полученную Web-страницу.
  2.  Возможно использование комбинированных шрифтов:

<I><B>Расписание </B></I> <I>занятий</I> <U> на вторник</U>

Но при этом необходимо помнить следующее правило записи комбинированных тэгов:

<Тэг-1> <Тэг-2></Тэг-2> </Тэг-1>         правильная запись
<Тэг-1> <Тэг-2> … </Тэг-1> </Тэг-2>           ошибочная запись

11.05.2015

Задание 5. Использование стилей заголовка

Информация.

Существует два способа управления размером текста, изображаемого браузером:

  • использование стилей заголовка,
  • задание размера основного документа или размера текущего шрифта.

Используется шесть тэгов заголовков (от Н1 до Н6). Каждому тэгу соответствует конкретный стиль, заданный в параметрах настройки браузера. Стиль Н1 – самый крупный.

Внесите изменения в файл crimea.htm:
<HTML>
<HEAD>
<TITLE> Познай Крым через HTML!</TITLE>
</HEAD>
<BODY>
<H1> Крым </H1><I> глазами </I> <U> путешественника!</U>
</BODY>
</HTML>
Посмотрите новую полученную Web-страницу.


 

15.09.2015

 Урок на тему: «Виды списков в HTML-документах. Тэги создания списков».

Цель:

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

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

учащиеся должны уметь: запускать на выполнение программу-браузер, просматривать Web, создавать списки.

Оборудование урока: конспект, ПК.

  1. Приветствие, проверка наличия учеников.
  2. Опрос учащихся по предыдущей теме.

Вопросы:

Для чего необходим язык разметки гипертекста HTML?
Преимущество создания HTML-документа простейшими текстовыми редакторами
(например, Bred, Sublime Text 2, Notepad).

Что происходит, если вы допустили ошибку в написании тэга или забыли один из управляющих символов?
Какое расширение имеет HTML-документ?
Назовите программы для открытия HTМL-документов.

  1. Тема, задачи и цель урока.
  2. Ход урока

Если вам нужно разместить на странице нумерованный список (например, названий каких-то товаров), воспользуйтесь тэгом

<OL> …</OL>

Обрабатывая его, браузер будет автоматически управлять нумерацией списка, — естественно, по заранее составленному вами плану.

Исходный НТМL-код описания списка и его отображение в браузере представлены ниже:

Пример отображения:

Атрибуты и значения

Дескриптор <OL> может содержать параметр ТУРЕ, которым задается тип используемой нумерации.

А — большие латинские буквы.
а — маленькие латинские буквы.
I — большие римские цифры.
i — маленькие римские цифры.
1 — арабские цифры.

Для задания начального значения, с которого будет начинаться отсчет, предназначен параметр START.

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

Описание маркированного списка начинается открывающим дескриптором <UL> и завершается его парным дескриптором </UL>. Каждый элемент списка в этом случае также начинается с дескриптора <LI>. Пример описания ненумерованного (маркированного) списка и его представление в браузере приведены ниже.

Дескриптор <UL> может включать параметр ТУРЕ со значениями disc, circle или square, определяющими вид используемого маркера. По умолчанию маркер ставится в виде заштрихованного кружочка, т.е. используется значение disc. Если один список вкладывается в другой, то маркеры вложенного списка будут не заштрихованными.

В языке HTML существует еще один вариант списков — списки определений. Способ их описания с помощью дескрипторов <DL> </DL> и <DD>, а также вид этих списков в окне браузера приведены ниже.

5. Ответы на вопросы учеников.

6. Резюме. Итоги урока.

Из предыдущих тем и новой темы, рассмотренной сегодня, вы узнали, какие инструменты понадобятся начинающему Web-мастеру и зачем. Выполняя практическую работу, мы постарались создать простенький, но зато са­мый первый собственный НТМL-документ, и вы впервые увидели в окне браузера результаты проделанной работы. Далее обсуждались вопросы выбора и описания цве­та фона Web-страницы, а также методы форматирования текста в НТМL-документах. В завершение были рассмотрены способы создания НТМL-списков и приведены примеры их различных вариантов.

7. Оценки за работу в классе:

8. Домашнее задание.


Следите за дальнейшими заданиями…


 

Один комментарий на “HTML

  1. Спасибо за уроки!
    Как первое знакомство с версткой веб-страниц очень полезно…
    Уроки изложены грамотно, в логической последовательности, доступно в понимании, ни чего лишнего…

Добавить комментарий