Инфоурок / Информатика / Другие методич. материалы / Сборник практических работ по созданию сайта с помощью языка "HTML"
Обращаем Ваше внимание, что в соответствии с Федеральным законом N 273-ФЗ «Об образовании в Российской Федерации» в организациях, осуществляющих образовательную деятельность, организовывается обучение и воспитание обучающихся с ОВЗ как совместно с другими обучающимися, так и в отдельных классах или группах.

Педагогическая деятельность в соответствии с новым ФГОС требует от учителя наличия системы специальных знаний в области анатомии, физиологии, специальной психологии, дефектологии и социальной работы.

Только сейчас Вы можете пройти дистанционное обучение прямо на сайте "Инфоурок" со скидкой 40% по курсу повышения квалификации "Организация работы с обучающимися с ограниченными возможностями здоровья (ОВЗ)" (72 часа). По окончании курса Вы получите печатное удостоверение о повышении квалификации установленного образца (доставка удостоверения бесплатна).

Автор курса: Логинова Наталья Геннадьевна, кандидат педагогических наук, учитель высшей категории. Начало обучения новой группы: 27 сентября.

Подать заявку на этот курс    Смотреть список всех 216 курсов со скидкой 40%

Сборник практических работ по созданию сайта с помощью языка "HTML"

библиотека
материалов

Работа 1. Основные тэги HTML.


Создать Web-страницу, знакомящую с основными тэгами HTML.

  1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

  2. Ввести HTML-код, задающий структуру Web-страницы:

 

Первое знакомство с тэгами HTML


  1. Ввести команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя первое_знакомство.htm

  2. Сохранить в вашу папку.

  3. Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается название Web-страницы Первое знакомство с тэгами HTML.

  4. Открыть заново этот файл с помощью блокнота (не закрывая этот файл в браузере) и внести в текст страницы после <BODY> в пустую строку тэги заголовков различных уровней (размеров).

Заголовок первого уровня


Заголовок второго уровня


Заголовок третьего уровня


Заголовок четвертого уровня


Заголовок пятого уровня

Заголовок шестого уровня


Сохранить изменения в блокноте. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат.


  1. В окне браузера отобразится обновленная Web-страница. Закончить работу с файлом.


Работа 2. Форматирование шрифта.


Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий.


  1. Открыть файл из вашей папки первое_знакомство.htm через блокнот.

  2. Внести в текст страницы тэги, между тегами


Заголовок шестого уровня

вводить все сюда

(в блокнот необходимо внести только то, что написано полужирным шрифтом в работе.)

  1. Разделительная линия:

<HR>

Форматирование шрифта:

Жирный
Курсив
Подчеркнутый
Жирный подчеркнутый курсив
Равноширинный

Выделение:

Выделение
Усиленное выделение

  1. Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.

Нумерованный список:


Первый элемент списка
Второй элемент списка
Третий элемент списка


Ненумерованный список:


Первый элемент списка
Второй элемент списка
Третий элемент списка
 

Список определений:


ТЕРМИН 1
Пояснение к термину 1
ТЕРМИН 2
Пояснение к термину 2
ТЕРМИН 3
Пояснение к термину 3
  1. Сохранить изменения в блокноте. Активизировать браузер. В окне браузера отобразится обновленная Web-страница.



  1. В итоге в файле первое_знакомство.htm у вас должно получиться


hello_html_22bac382.png

блокнот


hello_html_181b7a8f.png

браузер


  1. Закончить работу с файлом


Работа 3. Цветовые схемы. Шрифты.


Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок). Цвет на Web-странице задают либо его названием, либо числовым шести разрядным шестнадцатеричным кодом #RRGGBB (первые два разряда задают интенсивность красного цвета, вторые – зеленого и третьи – синего). Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов: 


Цвет

Код

Название

 

Цвет

Код

Название

черный

#000000

black

фиолетовый

#FF00FF

magenta

белый

#FFFFFF

white

бирюзовый

#00FFFF

cyan

красный

#FF0000

red

желтый

#FFFF00

yellow

зеленый

#00FF00

lime

золотой

#FFD800

gold

синий

#0000FF

blue

оранжевый

#FFA500

orange

серый

#808080

gray

коричневый

#A82828

brown


Основную цветовую схему Web-страницы можно задать в тэге <BODY> с помощью атрибутов:


  Цвет фона

BGCOLOR="#RRGGBB"

Текстура фона

BACKGROUND="file_name"

Цвет текста

TEXT="#RRGGBB"

Цвет текста ссылки

LINK="#RRGGBB"

Цвет текста активной ссылки

ALINK="#RRGGBB"

Цвет текста просмотренной ссылки

VLINK="#RRGGBB"


При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка.

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


  1. Открыть файл первое_знакомство.htm через блокнот.

  2. Для оформления страницы можно использовать следующую цветовую схему:

(!!!)описание атрибутов цвета производится в открытом теге <BODY>(!!!)



  1. Сохранить файл и Обновить страничку (цвет текста и цвет фона должен поменяться).

  2. Закончить работу с файлом.








Работа 4. Вставка изображений.


Вставка изображений. Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG и PNG. Изображения помещаются на Web-страницу тэгом IMG с атрибутом SRC, сообщающим браузеру имя и местоположение графического файла.

<IMG SRC="image_name">

Если рядом с изображением не должно быть текста, его размещают внутри отдельного абзаца. Выравнивание рисунка по горизонтали в этом случае задают в тэге <P>. Размеры изображения (в пикселах) можно задать с помощью атрибутов  WIDTH и HEIGHT. К изображению атрибутом ALT можно добавить название, которое появляется на экран или вместо иллюстрации (если по какой - либо причине графика не выводится в окне браузера), или в качестве всплывающий строки, при указании на рисунок мышью.


  1. Открыть файл первое_знакомство.htm в блокноте.

  2. Вставить в начале страницы картинку (после тега <BODY>) с помощью тега:


</SPAN>Просто<SPAN > </SPAN>ПК<SPAN >


Атрибут ALIGN выравнивает по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений: top, bottom, middle, left или right.  

  1. Форматирование текста. Для выделения фрагментов текста используется тэг <FONT>. Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR – цвет и атрибут

SIZE - размер символов. Выравнивание текста по горизонтали задает атрибут ALIGN. Выравнивание можно добавлять к тэгам, задающим заголовки, абзацы, или размещающим информацию в таблице. Выровнять по центру заголовок страницы. HSPACE, VSPACE - горизонтальный и вертикальный отступы между картинкой и текстом. Введем заголовки различных уровней сразу после изображения.


А это - заголовок нашей странички.

А это - подзаголовок нашей странички.


Сохранить файл и Обновить страничку.


Выделим часть текста более крупным шрифтом и цветом и определим выравнивание


<P ALIGN="left"><FONT SIZE="6" COLOR="#FF0066" FACE="Arial" > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.

<P ALIGN="right"><FONT SIZE="5" COLOR="#FF0000" FACE="Times New Roman" > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по правому краю.

<P ALIGN="center"><FONT SIZE="4" COLOR="#FF0011" FACE="Arial"> Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по центру.FONT>P>


  1. Сохранить файл и Обновить страничку). Закончить работу с файлом.



hello_html_6dce7b8a.png

блокнот

браузер



hello_html_5759df0b.png


Работа 5. Оформление гиперссылок.


  1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

  2. Открыть файл первое_знакомство.htm

  3. Различные виды гиперссылок. Связать Web-страницу с другими документами можно с помощью универсального тэга <A>, и его атрибута HREF, указывающим в каком файле хранится вызываемый ресурс.

Указатель ссылки

file_name – путь к файлу или его URL-адрес в Интернете. Если вызываемый документ размещается в той же папке, что и Web-страница, то можно указывать только имя файла.

Указатель ссылки в окне браузера выделяется подчеркиванием и особым цветом. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мыши по указателю, вызывает переход на документ, указанный в гиперссылке. Используем различные значения атрибута HREF для реализации различных реакций браузера:


<A HREF="вторая страница.htm">Моя вторая страничкаA>


Сохранить файл и Обновить страничку


  1. А теперь с оформлением выравнивания и шрифтов Исправляем предыдущую запись.


<A HREF="вторая страница.htm"><P ALIGN="center"><FONT SIZE="4" COLOR="#FFaa11" FACE="Arial"> Моя вторая страничкаFONT>P>A>


  1. Сохранить файл и Обновить страничку

  2. Создадим вторую страничку. Для этого откроем Блокнот еще раз. И наберем в нем следующий текст.

<TITLE>Моя вторая страницаTITLE>

Моя первая страничка, на ней я познакомился (лась) с основными тегами

  1. Сохраним файл под именем вторая_страница.htm

  2. Запустить первый файл первое_знакомство.htm. Запустим гиперссылку Моя вторая страница.

В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга . Пусть в нашем проекте при щелчке мышью по маленькому рисунку, вызывается ее крупная фотография. Такой прием часто используют, для снижения времени загрузки страницы. Посетитель увидит уменьшенные копии рисунков, а при желании, сможет загрузить полномасштабное изображение. Дополним нашу страничку, введем текст в пустую строку в файл вторая_страница.htm


A REL="nofollow" target="_blank" HREF="http://infourok.ru/go.html?href=%3C%2FSPAN%3E%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0%3CSPAN+%3E.jpg">SPAN>картинка<SPAN >.gif


  1. Сохранить файл и Обновить обе странички

Работа 6-8. Творческое задание.


Творческое задание. «Мой сайт». Создать Web-сайт, рассказывающий о Процессорах, Внешней памяти, Внутренней памяти, Свободная тема.

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

HTML код первой страницы.


Первое знакомство с тэгами HTML

фон.jpg" TEXT="#993300" LINK="#00FF00" ALINK="#FF0000" VLINK="#00FF00">

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

</SPAN>Просто<SPAN > </SPAN>ПК<SPAN >


А это - заголовок нашей странички.

А это - подзаголовок нашей странички.

Выделим часть текста более крупным шрифтом и цветом и определим выравнивание

Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.

Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по правому краю.

Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по центру.


Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвертого уровня

Заголовок пятого уровня

Заголовок шестого уровня


Жирный

Курсив

Подчеркнутый

Жирный подчеркнутый курсив

Равноширинный

Выделение

Усиленное выделение


Первый элемент списка

Второй элемент списка

Третий элемент списка


Первый элемент списка

Второй элемент списка

Третий элемент списка

ТЕРМИН 1

Пояснение к термину 1

ТЕРМИН 2

Пояснение к термину 2

ТЕРМИН 3

Пояснение к термину 3




HTML код второй страницы.



Моя вторая страница


Моя первая страничка, на ней я познакомился (лась) с основными тегами


SPAN>картинка<SPAN >.jpg





Самые низкие цены на курсы переподготовки

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

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

Обучение проходит заочно прямо на сайте проекта "Инфоурок", но в дипломе форма обучения не указывается.

Начало обучения ближайшей группы: 27 сентября. Оплата возможна в беспроцентную рассрочку (10% в начале обучения и 90% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru

Общая информация

Номер материала: ДВ-524338

Похожие материалы

2017 год объявлен годом экологии и особо охраняемых природных территорий в Российской Федерации. Министерство образования и науки рекомендует в 2017/2018 учебном году включать в программы воспитания и социализации образовательные события, приуроченные к году экологии.

Учителям 1-11 классов и воспитателям дошкольных ОУ вместе с ребятами рекомендуем принять участие в международном конкурсе «Законы экологии», приуроченном к году экологии. Участники конкурса проверят свои знания правил поведения на природе, узнают интересные факты о животных и растениях, занесённых в Красную книгу России. Все ученики будут награждены красочными наградными материалами, а учителя получат бесплатные свидетельства о подготовке участников и призёров международного конкурса.

Конкурс "Законы экологии"