Курс: Информатика и ВТ

18.06.20г

Тема: «Создание простейшего WEB-сайта с помощью языка гипертекстовой разметки HTML»

HTML – язык разметки гипертекста, стандартизированный язык разметки документов во Всемирной паутине

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

Учащиеся формируют задачи урока: изучить язык разметки, научиться создавать web-страницы и web-сайты средствами языка разметки гипертекста.

Создание сайтов - составной процесс, состоящий из нескольких этапов:

1. разработка дизайна,

2. вёрстка,

3. программирование,

4. безопасность.

Сопровождение сайтов:

o это техническая поддержка сайта;

o помощь в обновлении контента;

o внесение корректировок в работу ресурса.

Методы создания и сопровождения сайтов:

o вручную на языкe HTML (в БЛОКНОТЕ);

o c помощью редакторов сайтов (HEFS, DreamWeaver и др.);

o c помощью Конструктора сайтов на основе готового шаблона (ucoz.ru, narod.ru и др.);

o с помощью систем управления сайтов (Joomla, 1С Битрикс и др.).

Этапы создания WEB-страницы:

1. Разработка проекта (Постановка задачи);

· Главная тема страницы.

· Текстовое содержание (грамотный язык).

· Планировка размещения информации на странице (верстка).

· Графика (набор рисунков, анимации).

· Стиль дизайна (сочетания цветов, фоны и т. п.)

2. Алгоритм заполнения страницы.

3. Программирование.

Программа для WEB-страницы записывается на языке HTML в виде текстовых файлов в текстовом редакторе Блокнот.

HTML- hypertext markup language – язык разметки гипертекста. Основными элементами HTML являются теги (tags), с помощью которых проводится разметка текста. Теги служат для представления атрибутов и инструкций по форматированию, которые в браузерах превращаются на готовые фрагменты web- странички, готовой для просмотра пользователем.

Каждый тег имеет такой формат:

<tag>содержание тега</tag>, где <tag> открывающий тег, </tag> закрывающий тег.

Существуют так же теги, которые можно использовать без закрывающих тегов.

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

HTML- документ имеет три основные области.

Наивысший порядок в документе имеет тег <HTML>, для которого данный документ является подчиненным. Следующими по старшинству являются теги <HEAD> (заголовок) и < BODY> (тело документа).

Метатеги начинаются с ключевого слова meta, их действия отличаются по использованным атрибутам.

Атрибут name специфицирует информацию о странице (самоназвание документа). Атрибут content служит для описания атрибутов name и equiv.

Совершенно ясно, что обычная страничка не может обойтись без графических изображений, как в области оформления, так и в области фактической информации. Для web-дизайна используются три основных графических формата: .*gif, .*jpeg,.*png. Для вставки изображения используется тег < img src>.

Актуализация знаний

В наше время разработка сайта является одним из главных атрибутов многих предприятий, которые работают не только в Интернете. Практически все компании, которые занимаются продажами и рекламой товара стремятся к тому, чтобы присутствовать во всемирной паутине.

Грамотно разработанный сайт может стать хорошим методом распространения информации о предприятии.

Так вот знания и навыки по созданию и раскрутке сайтов в ближайшем будущем будут наиболее востребованы в мире. А Интернет дает возможность распространять свою деятельность на всю нашу планету. А это означает, что где бы вы не находились, вы можете быть полезны и зарабатывать средства. Для этого вам нужен современный компьютер и Интернет.

3.Закрепление нового материала

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

1. Создайте личную папку, куда вы будете сохранять все файлы своего сайта.

2. Запустите программу Блокнот (Notepad).

3. Наберите в окне программы простейший файл HTML. « Моя пробная страничка»

4. Сохраните файл под именем PROBNAYA.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке.

5. Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera, Mozilla Firefox или другую). Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом по файлу PROBNAYA.HTML откройте окно браузера.

При этом фрагмент документа будет иметь такой вид:

<HTML>

<HEAD>

< TITLE> Моя пробная страничка</TITLE>

</HEAD>

Добро пожаловать на мою пробную страничку.

Меня зовут Ирина Иванова

Я учусь в муниципальном общеобразовательном учреждении «Школа №1» города Кировское

Мне 17 лет

К сфере моих увлечений относятся занятия танцами, рисование, очень люблю читать

Заходите на мою страничку еще!

</BODY>

</HTML>

Не забывайте каждый раз сохранять текст Web-страницы при ее корректировке в программе Блокнот и обновлять страницу при ее просмотре в программе браузера.

Задание 2. Расположение текста на странице. Теги управления расположением текста.

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

– двойной, т.е. требуется закрывающий тег </P>.

<BR> -теги переноса строки.

<I> - текст курсивом.

<PRE>-форматированный текст.

<HR>-рисование линии.

Тег	Комментарий
< P ALIGN= “LEFT”>	Абзац выравнивается по левому краю экрана
< P ALIGN= “RIGHT”>	Абзац выравнивается по правому краю экрана
< P ALIGN= “CENTER”>	Абзац выравнивается по центру экрана
< P ALIGN= “JUSTIFY”>	Абзац выравнивается по ширине экрана, но браузер выполняет это лучшим, возможным для себя способом. Абзац не всегда будет выглядеть так, как было бы после его обработки текстовым процессором

При этом фрагмент документа будет иметь такой вид:

<HTML>

<HEAD>

< TITLE> Моя пробная страничка</TITLE>

</HEAD>

<H1>Добро пожаловать на мою пробную страничку.</H1>

Меня зовут Ирина Иванова

<P>Я учусь в муниципальном общеобразовательном учреждении «Школа №1» города Кировское

<P>Мне 17 лет

<P> К сфере моих увлечений относятся занятия танцами, рисование, очень люблю читать

<P ALIGN =RIGHT> <I> Заходите на мою страничку еще!</I>

<HR>

<H2> Распорядок дня </H2>

<PRE>

<B> Время Действие </B> <BR>

_________________________________________________________ <BR>

08:00 Подъем <BR>

08:30…13:30 Школа <BR>

15:00…18:00 Домашнее задания <BR>

18:00…21:00 Любимые увлечения <BR>

22:00 Отбой <BR>

_______________________________________________________

</PRE>

</BODY>

</HTML>

Сохраните текст с внесенными изменениями в файле PROBNAYA.HTML (меню Файл - Сохранить). Если у вас уже отображается Web-страница, то вам достаточно переключиться на панели задач на программу браузера и обновить эту страницу (кнопка ОБНОВИТЬ). Изменилось ли отображение текста на экране?

Задание 3. Изменение размеров символов на странице и установка текущего шрифта.

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

1. использование стилей заголовка,

2. задание размера шрифта основного документа или размера текущего шрифта.

Используется шесть тегов заголовков: от <H1> до <H6> (тег двойной, т.е. требует закрытия). Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера.

Тег шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7.

При этом фрагмент документа будет иметь такой вид:

<HTML>

<HEAD>

< TITLE> Моя пробная страничка</TITLE>

</HEAD>

<H1>Добро пожаловать на мою пробную страничку.</H1>

Меня зовут Ирина Иванова

<P>Я учусь в муниципальном общеобразовательном учреждении «Школа №1» города Кировское

<P>Мне 17 лет

<P> К сфере моих увлечений относятся занятия танцами, рисование, очень люблю читать

<P ALIGN =RIGHT> <I> Заходите на мою страничку еще!</I>

<HR>

<FONT SIZE =7> Распорядок дня </FONT>

<PRE>

<B> Время Действие </B> <BR>

_________________________________________________________ <BR>

08:00 Подъем <BR>

08:30…13:30 Школа <BR>

15:00…18:00 Домашнее задания <BR>

18:00…21:00 Любимые увлечения <BR>

22:00 Отбой <BR>

_______________________________________________________

</PRE>

</BODY>

</HTML>

Задание 4. Создание документа, содержащего списки и таблицы

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

Таблица состоит из трех основных частей:

1. названия таблицы;

2. заголовков столбцов;

3. ячеек таблицы.

Таблица в Web-документе заполняется по строкам (слева направо по строке, затем переход на новую строку). Каждая ячейка таблицы должна быть заполнена (хотя бы пробелом, которые используются для создания пустых ячеек).

<LI></LI>-теги для формирования списков;

<UL></UL>-теги для создания нумерованных списков;

<DL>,<DT>,<DD>- теги для создания ассоциативных списков из одного или нескольких элементов-терминов, сопровождаемого одним или более элементами.

Создадим файл «Увлечения.HTML» следующего содержания:

<HTML>

<HEAD>

<TITLE> Увлечения </TITLE>

<HEAD>

<BODY>

<H2> Увлечения</H2>

<UL><LI> Танцы

<LI>Рисование

<LI> Чтение

<LI> Путешествия

</UL>

<DL> <DT> Танцы

<DD> Я очень люблю танцевать и занимаюсь этим профессионально. Танцую в народном коллективе «Латинский квартал». Имею достижения республиканского и международного уровня.

<DT> Путешествия

<DD> Люблю путешествовать с родителями. Мы всегда выбираем интересные маршруты и готовимся к поездке целый год. В этом году мы были на чемпионате мира по футболу в Российской федерации и посетили шесть городов из одиннадцати.

<DT> Чтение

<DD> В свободное от учебы время читаю художественные произведения. Увлекаюсь произведениями, в которых в художественном изложении представлены реальные исторические события.

</DL>

</BODY>

</HTML>

Создадим файл «Оценки.HTML», в котором будут отображаться таблицы c данными:

<HTML>

<HEAD>

<TITLE> Оценки </TITLE>

</HEAD>

<BODY>

<H2> Мои оценки </H2>

<TABLE>

<TR><TD>Предмет</TD>

<TD> Оценка</TD></TR>

<TR><TD>Физическая культура</TD>

<TR><TD> Математика </TD>

<TR><TD>Физика</TD>

<TR><TD>Биология </TD>

<TD> 5</TD></TR>

</TABLE>

</BODY>

</HTML>

Задание 5. Задание цвета фона и текста, установка гарнитуры и цвета шрифта.

При изображении фона и цвета браузеры используют цвета, установленные по умолчанию, – они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в теге <BODY>.

Атрибут BGCOLOR= определяет цвет фона страницы, атрибут TEXT= задает цвет текста для всей страницы, атрибуты LINK= и VLINK= определяют соответственно цвета непросмотренных и просмотренных ссылок (последние два примера будут рассмотрены позже).

Тег <FONT> предоставляет возможности управления гарнитурой, цветом и размером текста. Изменение гарнитуры текста выполняется простым добавлением к тегу <FONT> атрибута FACE. Например, для отображения текста шрифтом Times New Roman необходимо записать:

Для изменения цвета шрифта можно использовать в теге<FONT> атрибут COLOR=”X”. Вместо “X” надо подставить английское название цвета в кавычках (“ ”), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом необходимо представить этот цвет разложенным на три составляющие: красную (R – Red), зелѐную (G – Green), синюю (B – blue), каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым форматом RGB.

Приведем несколько примеров записей цвета, которые можно использовать для изменения цвета текста либо цвета страницы.

Тег	Комментарий
<FONT SIZE=””>…</FONT>	Устанавливает размер текста в пределах от 1 (наименьший) до 7 (наибольший). Замечание: если не определять размер текста, то браузер отобразит его размером: <FONT SIZE=”3”>…<FONT>
<FONT FASE =””>…</FONT>	Устанавливает шрифты различного начертания (гарнитура)
<FONT COLOR=””>…</FONT>	Устанавливает цвет текста

Цвет	RRGGBB	Цвет	RRGGBB	Цвет	RRGGBB
Черный Black	000000	Лазурный Cerulean	007BA7	Тёмно-коричневый Dark brown	654321
Карминово-красный Carmine	960018	Васильковый Cornflower blue	6495ED	Тёмно-зелёный Dark green	013220
Морковный Carrot	ED9121	Тёмно-синий цвет Dark blue	00008B	Тёмно-розовый Dark pink	E75480
Серый Gray	A0A0A0	Белый White	FFFFFF	Зеленый Green	00FF00
Баклажановый Eggplant	990066	Розовый Pink	FFC0CB	Сливовый Plum	660066
Красный Red	FF0000	Отборный жёлтый Selective yellow	FFBA00	Яблочно-зелёный Apple Green	8DB600
Фуксия Fuchsia	FF00FF	Индиго Indigo	4B0082	Зелёная мята (мятный) Mint Green	98FF98

<HTML>

<HEAD>

<TITLE> Увлечения </TITLE>

<HEAD>

<BODY BGCOLOR = «007BA7» TEXT= «00008B»>

<P ALIGN = «CENTER»>

<FONT COLOR = «000000» SIZE= «7»>

<H2> Увлечения</H2>

<UL><LI> Танцы

<LI>Рисование

<LI> Чтение

<LI> Путешествия

</UL>

<DL> <DT> Танцы

<DT> Путешествия

<DT> Чтение

</DL>

</BODY>

</HTML>

Просмотрите изменения вашей Web-страницы в браузере.

Задание 6. Размещение графики на Web-странице

Тег <IMG> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег <IMG> является одиночным. Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.

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

Лучше любые изображения на странице ограничивать размером 20 Кбайт. Такие изображения достаточно подробны и быстро загружаются. Ограничение в 20 Кбайт очень приблизительно. Если встретилось потрясающее изображение, занимающее больше 20 Кбайт, спокойно используйте его. Просто помните, что если вставляете слишком много больших изображений, время ожидания посетителей существенно возрастет.

Тег <IMG> имеет немало атрибутов. Эти атрибуты можно задавать дополнительно и располагаться они могут в любом месте тега после кода IMG. Приведем несколько примеров, которые можно применять на практике и вы можете самостоятельно их опробовать.

Атрибут	Формат	Описание
ALT	<IMG SRS=”CLOCK.JPG” ALT= «КАРТИНКА»	Задает текст, заменяющий изображение в том случае, если браузер не воспринимает изображение
BORDER	<IMG SRS=”CLOCK.JPG” BORDER=”3”>	Задает толщину рамки вокруг изображения. Измеряется в пикселях
ALIGN	<IMG SRS=”CLOCK.JPG” ALIGN= “TOP”>	Задает выравнивание изображения относительно текста: относительно текста выровнена верхняя часть изображения – "TOP", относительно текста выровнена нижняя часть изображения – "BOTTOM", относительно текста выровнена средняя часть изображения – "MIDDLE".
HEIGHT	<IMG SRS=”CLOCK.JPG” HEIGHT=”111”>	Задает вертикальный размер изображения внутри окна браузера
WIDTH	<IMG SRS=”CLOCK.JPG” WIDTH=”210”>	Задает горизонтальный размер изображения внутри окна браузера
VSPACE	<IMG SRS=”CLOCK.JPG” VSPACE=”8”>	Задает добавление верхнего и нижнего пустых полей
HSPACE	<IMG SRS=”CLOCK.JPG” HSPACE= “8”>	Задает добавление левого и правого пустых полей

<HTML>

<HEAD>

<TITLE> Увлечения </TITLE>

<HEAD>

<BODY BGCOLOR = «007BA7» TEXT= «00008B»>

<P ALIGN = «CENTER»>

<FONT COLOR = «000000» SIZE= «7»>

<H2> Увлечения</H2>

<UL><LI> Танцы

<LI>Рисование

<LI> Чтение

<LI> Путешествия

</UL>

<DL> <DT> Танцы

<DT> Путешествия

<DT> Чтение

</DL>

<IMG SRC=” CLOCK.PNG”>

</P>

</BODY>

</HTML>

Просмотрите изменения вашей Web-страницы в браузере.

Задание 7. Установка фонового изображения на Web-странице

Фоновое изображение – это графический файл с небольшим рисунком, который многократно повторяется, заполняя все окно браузера независимо от его размеров. Графика, используемая в качестве фоновой, задается в теге<BODY>.Отвечает за вставку фонового рисунка на поле страницы атрибут BACKGROUND

Возможности тега <FONT>

1. Внесите изменения в файл Увлечения.HTML, предварительно подготовив и сохранив в рабочей папке графический файл фонового рисунка (FON.PNG).

<HTML>

<HEAD>

<TITLE> Увлечения </TITLE>

<HEAD>

<BODY BACKGROUND = FON.PNG TEXT= «00008B»>

<P ALIGN = «CENTER»>

<FONT COLOR = «000000» SIZE= «7»>

<H2> Увлечения</H2>

<UL><LI> Танцы

<LI>Рисование

<LI> Чтение

<LI> Путешествия

</UL>

<DL> <DT> Танцы

<DT> Путешествия

<DT> Чтение

</DL>

<IMG SRC=” CLOCK.PNG”>

</P>

</BODY>

</HTML>

Просмотрите изменения вашей Web-страницы в браузере

Задание 8. Создание бегущей строки.

В качестве бегущей строки принимается заголовок текста или строка, требующая особого внимания от посетителей данной Web- страницы.

Тег	Комментарий
<MARQUEE>…</MARQUEE>	Создает бегущую строку
Атрибуты	Комментарии
ALIGN=” ”	Располагает бегущую строку по вертикали относительно текста, в котором она расположена. Принимает значения: – TOP – по верхнему положению; – MIDDLE – посередине; – BOTTOM – по нижнему положению.
BIHAVIOR=” ”	Задает стиль бегущей строки. Принимает значения: – SCROLL – бегущей строки пробегает полностью по окну браузера и действие повторяется (задается по умолчанию); – SLIDE – бегущей строки выбегает и останавливается в левом углу окна браузера; – ALTERNATE – бегущей строки «болтается» между краями окна браузера
BGCOLOR=” ”	Задает цвет фона бегущей строки
DIRECTION=” ”	Задает направление пробега текста бегущей строки Принимает значения: – LEFT – текст бегущей строки пробегает слева направо (задается по умолчанию); – RIGHT – текст бегущей строки пробегает справа налево;
LOOP=" "	Задает число повторов анимации бегущей строки. Принимает значения: – INFINITE – бесконечное значение (задается по умолчанию); – любое целое число
HSPACE=" "	Размещает слева и справа от бегущей строки область свободного пространства заданного размера. Значение задается в пикселях.
VSPACE=" "	Размещает над и под от бегущей строки область свободного пространства заданного размера. Значение задается в пикселях
SCROLLAMOUNT=" "	Задает значение в пикселях области смещения текста при любой операции прокрутки бегущей строки
SCROLLDELAY=" "	Задает задержку в миллисекундах между последними смещениями текста бегущей строки. 1 с.=1000 млс
WIDTH=" "	Задает ширину области бегущей строки в пикселях

<HTML>

<HEAD>

< TITLE> Моя пробная страничка</TITLE>

</HEAD>

<MARQUEE BIHAVIOR=”SCROLL ” DIRECTION=” LEFT” LOOP=" 10" WIDTH=" 15" BGCOLOR=” FF0000 ”> Очень рада знакомству!!! </MARQUEE>

<H1>Добро пожаловать на мою пробную страничку</H1>

Меня зовут Ирина Иванова

<P>Я учусь в муниципальном общеобразовательном учреждении «Школа №1» города Кировское

<P>Мне 17 лет

<P> К сфере моих увлечений относятся занятия танцами, рисование, очень люблю читать

<P ALIGN =RIGHT> <I> Заходите на мою страничку еще!</I>

<HR>

<FONT SIZE =7> Распорядок дня </FONT>

<PRE>

<B> Время Действие </B> <BR>

_________________________________________________________ <BR>

08:00 Подъем <BR>

08:30…13:30 Школа <BR>

15:00…18:00 Домашнее задания <BR>

18:00…21:00 Любимые увлечения <BR>

22:00 Отбой <BR>

_______________________________________________________

</PRE>

</BODY>

</HTML>

Просмотрите изменения вашей Web-страницы в браузере.

Подобрать материал и подготовить 4 web-страницы для зачетного проекта по теме web-сайт;

Войти