Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Другие методич. материалы / Разработка и создание информационного объекта в виде Web-сайта на заданную тему
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 26 апреля.

Подать заявку на курс
  • Информатика

Разработка и создание информационного объекта в виде Web-сайта на заданную тему

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















Государственное бюджетное образовательное учреждение среднего профессионального образования «Челябинский базовый медицинский колледж»

(ГБОУ СПО «ЧБМК»)



«Разработка и создание информационного объекта в виде Web-сайта на заданную тему»



Цели и задачи:

  1. Изучение простейшего языка HTML (базовых функций необходимых для освоения программы).

  2. Формирование у студентов понятия «Простейший Web», способы создания простейшего сайта с начальным уровнем усвоения языка программирования HTML.

  3. Овладение техникой создания простой Web-страницы с форматированием текста по заданным параметрам, а также применение картинок в формировании веб-объекта, создания ссылок и таблиц.

Студент должен знать:

  1. Понятие «HTML», «Простейший Web»

  2. Иметь представление о передаче, обработке, хранении информации

  3. Иметь представление о свойствах таблиц в Web (хранение баз данных на серверах)

  4. Что такое «Гипертекст» и где он может находиться на Web-странице?



  1. Студент должен уметь:

  • Создавать простейшую Web-страницу по предложенному образцу

  • Создавать простейшую HTML-таблицу, вписывая данные

  • Устанавливать «Шапку» (HEAD) для Web-страницы

  • Вставлять картинку в страницу (формат gif или jpeg)

  • Вставлять в страницу заголовки от 1го до 6 уровня

  • Вставлять разделительную черту перед или после заголовков

  • Правильно устанавливать ссылки на странице

  • Применять форматирование к буквам в тексте (шрифт, размер, цвет и т.д.)



Внимание! Требования к отчету: 

Итоги  практической работы  представить в виде веб-файлов в папке под своей фамилией.

hello_html_mb49d8e4.png

Создание Web-страницы

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

Цель работы:

  1. Ознакомление с особенностями форматирования документов HTML и их отображения при помощи обозревателя.

  2. Изучение разметки абзацев.

  3. Создание документа, содержащего гиперссылки, графику.

  4. Изучение атрибутов тега .



Обеспечивающие средства:

  1. Сборник  описаний  практических работ;

  2. Операционная система  Windows Xp;

  3. Программа Internet Explorer или Google Chrome; программа «блокнот»,

  4. Персональный компьютер.





Теоретическая часть:

Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры. Теговая модель документа: "элемент" := <"имя элемента" "список атрибутов"> содержание элемента "имя элемента">. Элемент HTML или гипертекстовый документ состоит из двух частей: заголовка документа (HEAD) тела документа (BODY)



Содержание заголовка



Содержание тела документа



Элементы заголовка поля документа, базовый адрес, поисковый документ, общая гипертекстовая ссылка, гипертекстовые контекстные ссылки.



Язык HTML поддерживает 6 уровней заголовков от

до

.

Обычные абзацы задаются с помощью парного тега

.

Гипертекстовая ссылка определяется при помощи парного тега .

Обязательным атрибутом является HREF=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка, ссылка может быть локальной. Примеры: . Индекс базы данных "Полынь" Ссылка на точку "point" в документе "index.html".



Для представления графики используют форматы файлов GIF и JPEG. Для вставки рисунка используется текстовый элемент, задаваемый непарным тегом . Тег должен содержать обязательный атрибут SCR=, задающий адрес URL файла с изображением. Примеры: Sarcofagus.Winter, 1997, icon.gif.





Ход работы:



Задание №1. Создание простейшей Web-страницы.

Текст для страницы выбираем самостоятельно. Все теги и буквы печатаются также самостоятельно, не копируем!

hello_html_m75a70d6e.png

hello_html_59fdb276.png





1. Запустите текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).

2. Введите следующий документ:



<HTML>

<HEAD> <TITLE>Ваш заголовок документаTITLE> HEAD>

Содержание Вашего документа



3. Сохраните этот документ под именем first.htm

Перед сохранением убедитесь, что сброшен флажок Не показывать расширения для зарегистрированных типов файлов (Пуск > Настройка > Свойства папки > Вид). В противном случае редактор Блокнот может автоматически добавить в конец имени расширение .ТХТ.

4. Запустите программу Internet Explorer (Пуск > Программы > Internet Explorer).

5. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл first.htm.



Задание №2. Изучение приемов форматирования абзацев

hello_html_5fa76032.png

hello_html_212b21a2.png

1. Откройте документ first.htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами и . Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега , а его конкретное содержание может быть любым.

3. Введите заголовок первого уровня, заключив его между тегами <Н1 > и Н1 >.

4. Введите заголовок второго уровня, заключив его между тегами <Н2> и Н2>.

5. Введите отдельный абзац текста, начав его с тега <Р>. Пробелы и символы перевода строки можно использовать внутри абзаца произвольно.

6. Введите тег горизонтальной линейки .

7. Введите еще один абзац текста, начав его с тега <Р>.

8. Сохраните этот документ под именем paragraph.htm.

9. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

10. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл paragraph.htm.

11. Посмотрите, как отображается этот файл. Установите соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране.



Задание №3. Создание гиперссылкиhello_html_618b12cd.png

hello_html_127f7ef4.png

1. Откройте свой документ first.htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами и . Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега .

3. Введите фразу: Текст до ссылки.

4. Введите тег: <А REL="nofollow" target="_blank" HREF="https://infourok.ru/go.html?href=first.htm">.

5. Введите фразу: Ссылка.

6. Введите закрывающий тег А>.

7. Введите фразу: Текст после ссылки.

8. Сохраните документ под именем link.htm

9. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

10. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл link.htm.

11. Убедитесь в том, что текст между тегами <А> и А> выделен как ссылка (цветом и подчеркиванием).

12. Щелкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка.

13. Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается “просмотренной” и отображается другим цветом.



Задание №4. Создаём изображения и используем его на Web-странице

hello_html_m147ddcad.png

hello_html_m147ddcad.png

1. Откройте программу Paint (Пуск > Программы > Стандартные > Paint). Задайте размеры нового рисунка, например 250х250 точек (Рисунок > Атрибуты).

2. Нарисуйте произвольный рисунок.

3. Сохраните рисунок под именем pict1.gif (в формате GIF).

4. Если это упражнение выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.

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

6. Введите произвольный текст (протяженностью 4-5 строк) и установите текстовый курсор в его начало.

7. Введите Teг pic1.gif.

8. Сохраните документ под именем picture.htm.

9. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer) или Google Chrome.

10. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл picture.htm. Посмотрите на получившийся документ, обращая особое внимание на изображение.

11. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="TOP". Сохраните файл под тем же именем.

12. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.

13. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN="LEFT". Сохраните файл под тем же именем.

14. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы при изменении атрибутов.



Задание №5. Создание таблицы



  1. Откройте свой документ first.htm в программе Блокнот.

  2. Удалите весь текст, находящийся между тегами и . Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега .

  3. Таблица в языке HTML задается парным тегом <TABLE>.

  4. Заголовок таблицы определяется парным тегом <CAPTION>, строки таблицы задаются при помощи тегов <TR>.

  5. Ячейки в заголовках столбцов  – парным тегом <TH>. Обычные ячейки – <TD>.

  6. Закрывающиеся теги можно опускать.

  7. Где BORDER=#> задает параметры ширины таблицы

hello_html_m512cf052.png

hello_html_m512cf052.png



Задание №6. Создание фона для страницы

Для создания фона можно использовать массу тегов и вариаций. Остановимся на самом простом из них , а именно на



Где:

fon.gifназвание изображения в формате gif

 background-repeat - задает параметры для повторения фона. Может принимать следующие значения:

  • repeat-x (повторять по горизонтали)

  • repeat-y (повторять по вертикали)

  • no-repeat (не повторять)

  • repeat (повторять по горизонтали и вертикали)

По умолчанию включен просто repeat, т.е. повторять.

Если мы хотим повторять и по вертикали и по горизонтали, то перечисляем функции через запятую. Например repeat-x,y;



background-attachment - задание привязки. Может принимать два параметра:

  • scroll (действует по умолчанию) - фон прокручивается вместе с сайтом;

  • fixed - при прокрутке скролла фон остается неизменными;



background-position - задание расположение фона. Может принимать 5 параметров:

  • top

  • left

  • right

  • bottom

  • center

Итак:

1. Запустите текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).

2. Введите следующий документ:



<HTML>

<HEAD> <TITLE>Ваш заголовок документаTITLE> HEAD>

Содержание Вашего документа

3. Сохраните этот документ под именем fon.htm

Перед сохранением убедитесь, что сброшен флажок Не показывать расширения для зарегистрированных типов файлов (Пуск > Настройка > Свойства папки > Вид). В противном случае редактор Блокнот может автоматически добавить в конец имени расширение .ТХТ.

4. Запустите программу Internet Explorer (Пуск > Программы > Internet Explorer).

5. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл fon.htm.

6. Создаем (или копируем) фон. Для этого необходимо в Вашу папку «Мой сайт» поместить фон (рисунок) изображения и назвать его fon.gif . Сам фон может быть каким-то рисунком, градиентной заливкой и т.д. Главное – это не делать фон очень ярким, при том, что текст в Вашей HTML-странице будет написан простыми буквами.

7. Помещаем тег между и

8. Сохраните документ и откройте его через браузер. Изображение, которое вы сохранили в папке должно быть на странице, а по верх него текст.

hello_html_m4227c57d.png

Задание №7. Составление HTML -страницы "Студенту в помощь"

hello_html_m5d8ab188.png

hello_html_e682765.png





Теги и примеры их оформления

Пояснения

Курсовая работа

Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD>

HEAD>. Раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом <TITLE>

Содержание

Обычный абзац начинается с тега <P>

Тег <FONT> управляет параметрами шрифта,

содержит атрибуты COLOR= цвет текста (например, “GREEN”,  “RED”,   и т.д.),  

FACE= гарнитура шрифта или имя шрифта (например, ARIAL и т.д.),

SIZE= размер шрифта.

<H1> Введение H1>

<H1> 1. Использование информационных технологий при решении экономических задач

1.1 Классификация ИТ

Язык HTML поддерживает 6 уровней заголовков от <H1> до <H6>

Текст до ссылки.

<A HREF=”first.htm”>

Ссылка.

Гипертекстовая ссылка определяется парным тегом <A>.

Обязательным является HREF= (знак равенства  показывает, что необходимо задать значение этого атрибута, т.е. адрес документа, на который указывается ссылка)

pict1.gif”

ALINE=”MIDDLE”>.

Вставка графического элемента (используется только два формата –GIF, JPEG).

Для вставки рисунка используется текстовый элемент, задаваемый непарным тегом <IMG> с обязательным атрибутом SRC=, задающим адрес файла с изображением.

Атрибут ALINE= режим взаимодействия изображения с текстом

(BOT-TOM – рисунок выше текста,

MIDDLE – рисунок в середине текста,

LEFT – левее, а RIGHT – правее текста).

 

Заголовок документа

Содержание

Введение

A>

<OL>

<LI>Использование информационных технологий при решении экономических задач

<LI>Решение конкретной экономической задачи с использованием Excel

Списки

Упорядоченные (нумерованные) списки создаются при помощи парных тегов <OL>, маркированные списки  при помощи <UL>.

Эти списки могут содержать только элементы списка, определяемые парным тегом <LI>. Закрывающий тег LI> можно опускать.

Например, Содержание документа можно оформлять списком и использовать гиперссылки.

Заключение

Содержание

Введение

1.      Использование информационных технологий при решении экономических задач

2.      Решение конкретной экономической задачи с использованием Excel

Заключение













Задание №8. Составление HTML-страницы с применением всех предложенных функций и методов вставки кода на HTML-страницу

Задание: Изучив вышеуказанные простейшие приёмы программирования, составить свою собственную веб-страницу под названием «Мой сайт». В работе можно использовать картинки, форматирование текста, ссылки и прочее.

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

Основные теги

Ключевые слова странички (для поисковых машин)

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

Атрибуты тела документа

Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.

Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.

Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.

Устанавливает цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.

Устанавливает цвет гиперссылок при нажатии.

Теги форматирования текста

Обрамляет предварительно отформатированный текст.

Создает самый большой заголовок

,

,

,
,

Создает заголовоки промежуточных размеров

Создает самый маленький заголовок

Создает жирный текст (не рекомендованный)

Создает наклонный текст (не рекомендованный)

Создает текст - имитирующий стиль печатной машинки. (не рекомендованный)

Создает текст - имитирующий стиль печатной машинки. (рекомендованный)

Название переменных отображается курсивом

Выделение цитат курсивом

Отображается курсивом в виде отдельного абзаца

Наклонный текст (воспринимается поисковыми роботами как выделение)

Жирный текст (воспринимается поисковыми роботами, как особо сильное выделение)

Устанавливает размер текста в пределах от 1 до 7.

Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Г Гиперссылки

Создает гиперссылку на другие сайты.

Указывает, в каком окне открывать гиперссылку.

Создает гиперссылку на другую страницу.

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

Создает гиперссылку на метку текущей страницы.

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

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

Форматирование

Создает новый параграф

Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center

Запрещает перевод строки.

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


Вставляет перевод строки.

Создает отступы с обеих сторон текста.

Создает список определений.

Определяет каждый из терминов списка

Описывает каждое определение

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

Определяет каждый элемент списка и присваивает номер

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

Предваряет каждый элемент списка и добавляет кружок или квадратик.

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

Графические элементы

name

Добавляет изображение в HTML документ

name

Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle

name

Устанавливает толщину рамки вокруг изображения

name

Устанавливает поля сверху и снизу

name

Устанавливает поля с боков

?

Всплывающая подсказка при наведении на имейдж

Добавляет в HTML документ горизонтальную линию.

Устанавливает высоту (толщину) линии

Устанавливает ширину линии, можно указать ширину в пикселах или процентах.

Создает линию без тени.

Задает линии определенный цвет. Значение RRGGBB.

Таблицы

Создает таблицу.

Определяет строку в таблице.

Определяет отдельную ячейку в таблице.

Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)

Определяет подпись таблицы

Атрибуты таблицы

Задает толщину рамки таблицы.

Задает расстояние между ячейками таблицы.

Задает расстояние между содержимым ячейки и ее рамкой.

Устанавливает ширину таблицы в пикселах или процентах от ширины документа.

Устанавливает высоту таблицы в пикселах или процентах от высоты документа.

или

Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.

или

Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.

Указывает количество столбцов, которое объединено в одной ячейке. (По умолчанию=1)

Указывает количество строк, которое объединено в одной ячейке. (По умолчанию=1)

Не позволяет программе просмотра делать перевод строки в ячейке таблицы.

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

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

Фреймы

Предваряет тег в документе, содержащем фреймы;

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

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

Определяет единичный фрейм или область в таблице фреймов.

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

Атрибуты фреймов

Определяет, какой из HTML документов будет показан во фрейме.

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

Определяет величину отступов по левому и правому краям во внутрь фрейма; должно быть равно или больше 1.

Определяет величину отступов по верхнему и нижнему краям внутрь фрейма; должно быть равно или больше 1.

Указывает будет ли выводится линейка прокрутки во фрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.

Препятствует изменению размеров фрейма пользователем.

Ифрейм и его атрибуты

Создает контейнер, который может содержать любые элементы. Остальные элементы обтекают этот контейнер.

Определяет, какой из HTML документов будет показан в ифрейме.

Указывает Имя ифрейма, что позволяет перенаправлять информацию в этот ифрейм .

Устанавливает поля сверху и снизу с наружи от ифрейма

Устанавливает поля сбоков с наружи от ифрейма

Определяет величину отступов по левому и правому краям в нутрь ифрейма; должно быть равно или больше 1.

Определяет величину отступов по верхнему и нижнему краям в нутрь ифрейма; должно быть равно или больше 1.

Указывает, будет ли выводится линейка прокрутки в ифрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.

Определяет ширину ифрейма

Определяет высоту ифрейма;

Текст всплывающей подсказки

Формы

Создает формы

Создает скролируемое меню. Size устанавливает количество пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.

Указывает каждый отдельный элемент меню

Создает ниспадающее меню

Указывает каждый отдельный элемент меню

Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.

Создает checkbox.

Создает radio кнопку.

Создает строку для ввода текста. Параметром Size указывается длина в символах.

Создает кнопку "Отправить"

Создает кнопку "Отправить" - для этого используется изображение

Создает кнопку "Очистить"





Автор
Дата добавления 20.05.2016
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров100
Номер материала ДБ-091582
Получить свидетельство о публикации

"Инфоурок" приглашает всех педагогов и детей к участию в самой массовой интернет-олимпиаде «Весна 2017» с рекордно низкой оплатой за одного ученика - всего 45 рублей

В олимпиадах "Инфоурок" лучшие условия для учителей и учеников:

1. невероятно низкий размер орг.взноса — всего 58 рублей, из которых 13 рублей остаётся учителю на компенсацию расходов;
2. подходящие по сложности для большинства учеников задания;
3. призовой фонд 1.000.000 рублей для самых активных учителей;
4. официальные наградные документы для учителей бесплатно(от организатора - ООО "Инфоурок" - имеющего образовательную лицензию и свидетельство СМИ) - при участии от 10 учеников
5. бесплатный доступ ко всем видеоурокам проекта "Инфоурок";
6. легко подать заявку, не нужно отправлять ответы в бумажном виде;
7. родителям всех учеников - благодарственные письма от «Инфоурок».
и многое другое...

Подайте заявку сейчас - https://infourok.ru/konkurs


Выберите специальность, которую Вы хотите получить:

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

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ


Идёт приём заявок на международный конкурс по математике "Весенний марафон" для учеников 1-11 классов и дошкольников

Уникальность конкурса в преимуществах для учителей и учеников:

1. Задания подходят для учеников с любым уровнем знаний;
2. Бесплатные наградные документы для учителей;
3. Невероятно низкий орг.взнос - всего 38 рублей;
4. Публикация рейтинга классов по итогам конкурса;
и многое другое...

Подайте заявку сейчас - https://urokimatematiki.ru

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

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