Лабораторная работа №1 Тема: «Создание простейшего html-документа. Форматирование текста»




Скачать 253,62 Kb.
НазваниеЛабораторная работа №1 Тема: «Создание простейшего html-документа. Форматирование текста»
Дата публикации12.04.2013
Размер253,62 Kb.
ТипЛабораторная работа
pochit.ru > Информатика > Лабораторная работа

Лабораторная работа №1

Тема: «Создание простейшего HTML-документа.

Форматирование текста».
Цель работы: познакомиться со структурой html-документа и на основе создать свою страницу; изучить основные тэги форматирования текста и использовать их при создании страницы.
Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.
Теоретический материал:

Структура html-документа:

HTML-код страницы помещается внутрь контейнера ... , заголовок страницы в контейнер Заголовок .

Контейнер обязательно содержит открывающий и закрывающий теги.

В разделе описания заголовка можно указать заглавие документа, для этого используется тэг ... (имя страницы).

Весь остальной HTML-документ, включая весь текст, содержится внутри тэга содержание (содержание страницы).
{начало страницы}

{описание страницы, заголовка}

<i><b>название</b></i> {имя страницы}

{закрытый тэг описания заголовка}

{содержание страницы}

текст

{закрытый тэг описания страницы}

{конец страницы}
Основные тэги форматирования html-документа:

Заголовок страницы задается с помощью тегов, где размер шрифта заголовка устанавливается с помощью Н1 (самый крупный) и до Н6 (самый мелкий)

Заголовок страницы целесообразно выделить самым крупным шрифтом:

заголовок страницы

(например,

Все о компьютере

)

заголовок страницы - в данном случае заголовок будет записан самым мелким шрифтом;

Если необходимо выровнять этот заголовок по правому краю, то это записывается следующим образом:

Все о компьютере



{выравнивание текста по правому краю}

{выравнивание текста по центру}

{выравнивание текста по левому краю}

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

Атрибут FACE позволяет задать гарнитуру шрифта;

Атрибут SIZE – размер шрифта (может принимать иметь значение в диапазоне от 1 до 7);

Атрибут COLOR – цвет шрифта (можно задавать названием цвета (например, “red”, “green”, “blue” и так далее));

Например, ...
(шрифт размера 7, тип шрифта – Arial, цвет - голубой);

Также можно задавать начертание текста или фрагмента текста:

текст - полужирный шрифт;

текст - начало текста курсивом;

текст - подчёркивание;

Комбинированное выделение осуществляется следующим образом:

<Тэг-1><Тэг-2> фрагмент текста

Например, фрагмент текста (текст полужирный и подчеркнутый);

При создании html-документов можно задавать и цвет самого фона страницы. Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры: BGCOLOR - определяет цвет фона документа, TEXT - задает цвет текста для всей страницы. Цвет также задается с помощью его названия (“red”, “green”, “blue”);

Например, - задание цвета фона и текста (фон голубого цвета, цвет шрифта - красный)
Списки:

Ненумерованный список располагается внутри контейнера
, а каждый элемент списка определяется также тэгом
  • . С помощью атрибута TYPE тэга
      можно задать вид маркера списка: “disc” (диск),

      “square” (квадрат), “circle” (окружность). Например,
      (маркированный список, маркер в виде окружности)



      • текст


      • текст


      • текст



      Ход работы:

      1. Создать, используя только тэги структуры, текстовый html-документ. Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB. Открыть документ в окне браузера и посмотреть, как он будет отформатирован.

      2. Заголовок страницы должен быть выровнен по центру, начертание – полужирный шрифт, тип шрифта - Comic Sans MS, размер – 1, цвет шрифта – голубой, подчеркивание;

      3. Задать цвет фона страницы – бирюзовый цвет;

      4. Текст должен состоять из трех абзацев, один абзац должен быть выровнен по левому краю, второй – по центру, а третий – по правому краю;

      5. Цвет текста в первом абзаце задать белым цветом, тип шрифта - Monotype Corsiva, размер – 7;

      6. Цвет текста во втором абзаце задать розовым цветом, тип шрифта - Arial, размер – 6;

      7. Цвет текста в первом абзаце задать желтым цветом, тип шрифта - Calibri, размер – 5;

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


      Листинг html-программы:




      Компьютер





      Все о компьютере


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

      Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

      На этом сайте вы можете узнать много новой и полезной информации для вас.


      • Компьютер


      • Терминологический словарь


      • Цены на товары



  • Похожие:

    Лабораторная работа №1 Тема: «Создание простейшего html-документа. Форматирование текста» iconУрок №29. Тема урока: Разработка Web-сайтов с использованием языка...
    Познакомить учащихся с языком разметки гипертекста html, структурой Web-страницы и форматированием текста на Web-странице
    Лабораторная работа №1 Тема: «Создание простейшего html-документа. Форматирование текста» iconТема: Форматирование документа
    Форматировать можно фрагмент текста, либо весь текст. При внесении изменений параметров текста без выделения какого-либо фрагмента,...
    Лабораторная работа №1 Тема: «Создание простейшего html-документа. Форматирование текста» iconРазработка урока по теме «Форматирование документа. Выбор параметров...
    Цели: привитие навыков работы с программными средствами; освоение основных возможностей текстового редактора, навыков работы с фрагментами...
    Лабораторная работа №1 Тема: «Создание простейшего html-документа. Форматирование текста» icon1. Ввод, редактирование и форматирование текста
    Традиционной целевой установкой таких программ является разработка текстового документа для последующей его распечатки, т е создания...
    Лабораторная работа №1 Тема: «Создание простейшего html-документа. Форматирование текста» iconБазовые конструкции языка html
    Т. е. Web-страницы это документы в формате html, содержащие текст и специальные тэги (дескрипторы) html. По большому счету тэги html...
    Лабораторная работа №1 Тема: «Создание простейшего html-документа. Форматирование текста» iconЛабораторная работа №1 Тема : «Создание Web -страницы средствами языка гипертекстовой разметки»
    Все создаваемые файлы должны иметь только латинские имена, без использования символов пробелов и спецсимволов. Файлы должны иметь...
    Лабораторная работа №1 Тема: «Создание простейшего html-документа. Форматирование текста» iconУрок №2 Тема «Создание и форматирование таблиц»
    В таблице представлены алгоритмы выполнения форматирования документа в текстовом процессоре ms word 2003 и ms word 2007(2010)
    Лабораторная работа №1 Тема: «Создание простейшего html-документа. Форматирование текста» iconАналитических умений, развитие познавательного интереса
    Тема№7. Работа в Word: Проверка правописания, форматирование документа, оформление границ и заливки
    Лабораторная работа №1 Тема: «Создание простейшего html-документа. Форматирование текста» iconУрок №1 Тема «Форматирование документа»
    В таблице представлены алгоритмы выполнения форматирования документа в текстовом процессоре ms word 2003 и ms word 2007(2010)
    Лабораторная работа №1 Тема: «Создание простейшего html-документа. Форматирование текста» iconУрока: Обучающая
    Тема урока: «Ввод и редактирование текста. Фрагменты текста и операции с ними. Поиск и автоматическая замена текстовых фрагментов....
    Вы можете разместить ссылку на наш сайт:
    Школьные материалы


    При копировании материала укажите ссылку © 2019
    контакты
    pochit.ru
    Главная страница