Выдаём удостоверения и дипломы установленного образца

Получите 5% кэшбэк!

Запишитесь на один из 793 курсов и получите 5% кэшбэк стоимости курса на карту

Выбрать курс
Инфоурок Информатика КонспектыПрактическая работа «Форматирование html-документа»

Практическая работа «Форматирование html-документа»

Скачать материал
библиотека
материалов

Практическая работа № 2. «Форматирование html-документа»

1. Создать HTML-документ с содержимым:

ПРИВЕТ МИР!!!

2. Cоздайте заголовки по образцу

Анкета

Петров Владимир Владимирович

17 лет

козерог

студент
люблю рок-музыку

3. Создайте текст на HTML-cтранице по образцу

ПАРУС

Белеет парус одинокой
В тумане моря голубом!..
Что ищет он в стране далекой?
Что кинул он в краю родном?..

Играют волны — ветер свищет,
И мачта гнется и скрыпит...
Увы! он счастия не ищет,
И не от счастия бежит!

Под ним струя светлей лазури,
Над ним луч солнца золотой...
А он, мятежный, просит бури,
Как будто в бурях есть покой!

4. Создание формулу по образцу Sквадрата=a2

5. Создайте список


Последовательность выполнения:

  1. 1.Создайте папку (в качестве имени папки выберите свою фамилию). Запустить редактор Notepad++. Ввести приведенные ниже стандартные теги разметки страницы теги

Мой первый HTML-документ

ПРИВЕТ МИР!!!HTML>

  1. Сохранить документ под именем 1.html в созданной вами папке. Откройте папку, кликните правой кнопкой мыши по файлу 1.html и выберите команду «Открыть с помощью» и выберите удобный для просмотра браузер. В окне браузера вы можете посмотреть как будет выглядеть ваш файл.

  2. Отредактируйте документ 1.html, кликните правой кнопкой мыши и выберите команду «Открыть с помощью» и выберите программу Блокнот. После слов ПРИВЕТ МИР!!! поставьте тег <BR> (тег перехода на новую строку), и наберите текст «Программирование сайтов и Web-дизайн». Не забывайте сохранять документ и обновлять браузер.

  3. В тег вставить атрибуты TEXT(цвет текста на всейhtml-странице) и BGCOLOR(цвет заливки на всейhtml-странице), и установите любое значения цветов (безопасные коды цветов можно найти в интернете). Поставьте горизонтальную линию в документе с помощью соответствующего тега <HRSIZE=1>, где атрибут SIZE определяет толщину линии в пикселях.


2. Откройте в Notepad++ файл 1.html и создайте анкету с помощью заголовочных тегов <H1-6 ALIGN=”LEFT| CENTER| RIGHT”> текст H1-6>, с помощью атрибута ALIGN выровняйте текст по центру.


3. В файле 1.html после анкеты наберите текст стихотворения «Парус» и отформатируйте шрифт текста по образцу. Название стихотворения заголовок 3-го уровня (<H3>H3>), первая строчка стихотворения выделена жирным шрифтом с помощью тегов <B>B> или ; вторая строчка выделена курсивом с помощью тега <I>I>; третья строчка подчеркнута с помощью тега <U>U>>; четвертая строчка перечеркнута с помощью тега <S>S> или <DEL>DEL>; пятая, шестая, седьмая и восьмая строчки выделены с помощью тегов с размерами шрифтов <FONTSIZE=1|3|5|7>FONT> соответственно; девятая строчка выделена с помощью тега <SMALL>SMALL>; десятая строчка создана при помощи тега <BIG>BIG>; одиннадцатая и двенадцатая строчки раскрашены с помощью тегов <FONTCOLOR=YELLOW|GREEN>FONT> соответственно. В конце стихотворения добавьте фамилию и инициалы автора стихотворения моноширинным шрифтом(шрифт имитирующий печатную машинку), с помощью контейнеров тегов <tt>,или.


4. Для создания нижнего индекса используйте теги в контейнер заключите индекс, для возведения в степень используйте теги верхнего индекса . Увеличьте шрифт не индексного текста до 5.


5. В файле 1.html после отредактированного текста создайте списки.

Для создания нумерованного списка используют теги <OL><LI>.

<OL><LI>Элемент списка 1 LI>

<LI>Элемент списка 2LI>

<LI>Элемент списка 3LI>OL>

Список по умолчанию цифровой, но его можно сделать и буквенным c помощью атрибута TYPE .

<OLTYPE=a><LI>Элемент списка 1 LI>

<LI>Элемент списка 2LI>

<LI>Элемент списка 3LI>OL>

Для создания маркированного списка используют теги <UL><LI>.

<UL>LI>Элемент списка 1 LI>

<LI>Элемент списка 2LI>

<LI>Элемент списка 3LI>UL>

Маркеры в списке можно сделать разнообразными c помощью атрибута TYPE=circle|disc|square .

<UL><LI>Элемент списка 1 LI>

<LI>Элемент списка 2LI>

<LI>Элемент списка 3LI>UL>

Для создания списков определений используют три тэга:

<DL>- начало/конец списка.

<DT>- начало/конец конкретного термина.

<DD>- начало/конец поясняющей статьи термина.

<DL><DT>ГРИБЫDT>

<DD>ОПЯТАDD>

<DD>ГРУЗДИDD>DL>

Задания для самостоятельного выполнения:

  1. Создайте формулу соляной кислоты и общий вид квадратного уравнения.

  2. Создайте смешанный список по образцу

Я знаю как оформлять:

      1. Шрифты

  • Размер

  • Цвет

  • Гарнитуру

  • Индексы

      1. Заголовки

  • От 1-го до 6-го уровня

      1. Абзацы

  • Выравнивание

  • Разрыв строк внутри абзаца

  • С использованием переформатирования.

Составить отчет о выполнении

  • Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
    Пожаловаться на материал
Курс повышения квалификации
Курс профессиональной переподготовки
Учитель математики и информатики
Курс профессиональной переподготовки
Учитель информатики
Скачать материал
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Проверен экспертом
Общая информация
Скачать материал

Вам будут интересны эти курсы:

Курс повышения квалификации «Табличный процессор MS Excel в профессиональной деятельности учителя математики»
Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс профессиональной переподготовки «Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Применение MS Word, Excel в финансовых расчетах»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышения квалификации «Специфика преподавания дисциплины «Информационные технологии» в условиях реализации ФГОС СПО по ТОП-50»
Курс повышения квалификации «Применение интерактивных образовательных платформ на примере платформы Moodle»

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.