Язык разметки гипертекста html практические работы

Практическая работа № 10. «Создание простейшего WEB-сайта с помощью языка гипертекстовой разметки HTML»

· воспитывать информационную культуру обучающихся, внимание, аккуратность.

Оборудование: ПК, раздаточный материал с указаниями к выполнению ПР;

Программное обеспечение: операционная система Windows, браузер Internet Explorer или Mozilla Firefox , стандартное приложение Блокнот, графические изображения.

2. Изложение нового материала

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

Постановка целей и задач урока: (на доске представлена надпись: Что такое HTML?)

Обучающимся предлагается ответить на данный вопрос. Не многие обучающиеся смогут ответить на него, поэтому им предлагается найти ответ на данный вопрос в дополнительной литературе, при отсутствии печатных изданий, обучающиеся пользуются Интернет-ресурсами.

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

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

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

2. Изложение нового материала

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перед началом работы повторим правила техники безопасности в кабинете информатики и при работе за ПК. (Приложение 1)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.

Источник

Язык разметки гипертекста — html

Практическая работа № 1. Создание простейшей Web-страницы

Цель работы: освоение приема создания документа HTML, знакомство с особенностями форматирования документов HTML и их отображения при помощи обозревателя Internet Explorer.

1. Создайте в Вашей рабочей папке — подпапку Web, в этой папке должны хранится ВСЕ созданные файлы, которые будут созданы в процессе выполнения практических работ
2. Запустите текстовый редактор Блокнот (Пуск/ Программы / Стандартные / Блокнот). Уменьшите окно редактора так, чтобы оно стало занимать 1/4 часть экрана монитора.
3. Введите следующий документ:

1. Рис. 1

   Сохраните этот документ под именем first.htm. Убедитесь, что в поле Тип файла выбрано Все файлы(*.*) (рис.1), так как необходимо сохранить наш файл first только с расширением .htm (иначе редактор Блокнот автоматически добавить в конец имени расширение .ТХТ). Сверните окно редактора Блокнот, но не закрывайте.

2. Запустите программу Internet Explorer (Пуск/Программы/Internet Explorer). Окно редактора Internet Explorer восстановите во весь экран.
3. Дайте команду Файл / Открыть…. Щелкните на кнопке Обзор… и откройте файл first.htm.
4. Посмотрите, как отображается этот файл – корректный простейший документ HTML. Где отображается содержимое элемента TITLE? Где отображается содержимое элемента BODY?
5. Как отображаются слова «Содержание» и «документа», введенные в двух отдельных строчках? Почему? Т.е. получилось, что редактор Internet Explorer игнорирует разного рода отступы, концы строк и множественные пробелы. В принципе, текст можно рассматривать как одну длинную строку. Для того чтобы разбить текст на отдельные абзацы необходимо вставить определенные теги, они будут изучены в последующих практических работах. Проверьте, что происходит при уменьшении ширины окна.
6. Вернитесь в окно редактора Блокнот, но при этом не закрывайте окна редактора Internet Explorer. Добавьте после фразы «Содержание документа» Ваши фамилию, имя и отчество. Сохраните файл под прежним именем first.htm. Вернитесь в окно редактора Internet Explorer и нажмите кнопку Обновить на панели инструментов. Таким переходом между двумя редакторами мы будем изучать правила языка HTML.
7. ВСЕГДА СОХРАНЯЙТЕ ДОКУМЕНТ В БЛОКНОТЕ ПРЕЖДЕ ЧЕМ ПРОСМОТРЕТЬ ЕГО В INTERNET EXPLORER.
8. Практически все теги языка HTML имеют атрибуты, которые записываются после имени тега, например атрибут BGCOLOR тега устанавливает цвет фона Web-страницы.
9. Измените написание тега с на ; добавьте свое содержание между тегами:

И днем и ночью кот ученый ….

1. Сохраните в редакторе Блокнот и переходите в Internet Explorer, обновите содержимое окна. Как отображается наше стихотворение? Форматирование текста описано во второй практической работе.

1. В каком приложении создается HTML-документ?
2. Какое расширение имеет HTML-документ?
3. Какая программа запускается при открытии HTML-документа через Мой компьютер?
4. Как открыть произвольный HTML-документ в InternetExplorer?
5. Что такое ТЕГ? Приведите для примера 3 тега?
6. Приведите пример атрибута. Что он означает и где он записывается?
7. Что редактор игнорирует?
8. Как обновить представление HTML-документа в окне InternetExplorer?

Источник