42549

Создание в редакторе документа HTML на основании примеров и просмотр в Web-браузере

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

Информатика, кибернетика и программирование

При каждом обновлении документа в блокноте обязательно его «Сохранить»(CTR+S) и выполнить в IE меню«Вид – Обновить(F5)» или на панели инструментов. Перейдите в блокнот и отформатируйте текст используя тэг br (перенос текста на другую строку, что-то вроде Enter). Вставьте его между тэгами Body и посмотрите IE, что получится...

Русский

2014-09-23

37.5 KB

4 чел.

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

Создать в редакторе документ HTML на основании  примеров и  просмотреть в Web-браузере.

 Цель: Приобретение практических навыков создания простейших HTML-страниц

Задачи лабораторной работы:

  1.  Создайте на диске отдельную директорию (папку) для будущей страницы.


D:\users\ek-01-1\fio

Теперь откроем блокнот и наберем следующий текст:

<html>
<head>
<title>Моя первая страница </title>
</head>
<body>

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ УКРАИНЫ

НАЦИОНАЛЬНАЯ МЕТАЛЛУРГИЧЕСКАЯ АКАДЕМИЯ УКРАИНЫ

КАФЕДРА ЭКОНОМИЧЕСКОЙ ИНФОРМАТИКИ

ОТЧЕТ

о выполнении лабораторных работ по дисциплине “Интернет технологии”

Выполнил:  Ст.гр. ЕК-01-1

ФИО

Принял:         ст. преподов.

ФИО

Днепропетровск   2005

</body>
</html>

Здесь тэги:  <html>  … </html>  начало и конец страницы

head> </head> - голова документа для заголовка в Internet Explore(IE)
<body> </body> - тело документа
<title> - заголовок.

А теперь сохраним этот документ, присвоив ему имя 1.
html

D:\ users\ek-01-1\fio\1.html

Теперь откроем
Internet Explore (блокнот не закрывать).
Файл - Открыть - кнопка Обзор - Наш документ (1.html).
Там вы увидите вашу страницу. Текст страницы не отформатирован и подается одной строкой.

При каждом обновлении документа в блокноте обязательно его «Сохранить»(CTR+S) и выполнить в IE меню«Вид – Обновить(F5)» или на панели инструментов.

  1.  Перейдите в блокнот и отформатируйте текст используя тэг <br> (перенос текста на другую строку, что-то вроде Enter). Вставте его между тэгами Body и посмотрите IE, что получится. Каждая строка документа должна быть отдельно.

Сохраним  документ и откроем IE(блокнот не закрывать).
Файл - Открыть - кнопка Обзор - Наш документ (1.html).

  1.  Окрасим документ в синий цвет.Цвета в документе задаватся в теге <body>:
    <body text="#336699">
    Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font></font> (если цвет в <body> не задавать, то по умолчанию он будет черным). Окрасим слово ОТЧЕТ в black
    - черный.

<font color="black"> ОТЧЕТ </font>

Существует 16 основных цветов: aqua - бирюзовый; black - черный; blue - синий; gray - серый; green - зеленый; lime - ярко-зеленый; maroon - темно-красный; white - белый; navy - темно-синий; olive - оливковый; purple - фиолетовый; red - красный; silver - светло-серый; teal - ярко-голубой; yellow - желтый; fuchsia - ярко-фиолетовый.

Кроме указанных основных цветов, есть дополнительные цвета:brown - коричневый, orange - оранжевый, cyan - оттенок бирюзового,  pink - розовый и др. Вместо указанных терминов для задания цвета можно использовать RGB-коды, например: #FFFFFF -белый (white), #FF0000 -красный (red). Меняя RGB-коды, можно подбирать желаемые цвета текста и фона.

Сохраним  документ и откроем IE

  1.  Цвет фона в документе устанавливается в тэге <body>:

    <body text="#336699" bgcolor="yellow">
    Здесь устанавливается
    желтый цвет (bgcolor="yellow). Если цвет в <body> не указывать, то по умолчанию он будет белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого, поэтому лучше уж прописывайте цвет фона в body. Сохраним  документ и откроем IE.
  2.  Для выравнивания и центровки текста используются параграфы. Они вводятся тэгом:
    <p></p> 

С помощью параграфов можно:

Центрировать текст:
<p align="center">текст</p>

Выровнять текст по левому краю:
<p align="left">текст</p>

По правому краю:
<p align="right">текст</p>

Выравнивает текст по обоим краям:

<p align="justify">текст</p> 

Теперь преобразум документ к виду в пункте 1.

 Сохраним  документ и откроем IE.

  1.  Для выделения текст можно использовать заголовки и функции тэга <font></font>. 

Заголовки:

<H1> текст </H1>

<H2> текст </H2>

<H3> текст </H3>

<H4> текст </H4>

<H5> текст </H5>

<H6> текст </H6>

Применим заголовки к следующей строке:

<H3> о выполнении лабораторных работ по дисциплине “Интернет технологии” </H3>

Заголовки предназначены для выделения небольшой части текста (строки, фразы), но, для выделения большого фрагмента текста, или только одно слово, при этом без переноса строки, то используется тэг <font></font>:
<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>

Применим тэг к следующему тексту:

<font size="+4"> ОТЧЕТ </font>

Сохраним  документ и откроем IE.

  1.  Применение шрифтов к тексту. Как делается курсив, подчеркнутый текст, полужирный текст и фиксированный текст:

<b> Полужирный текст </b>

<i> Наклонный текст (курсив) </i>

<u> Подчеркнутый текст </u>

<tt> fixed - фиксированный шрифт </tt> 

Применим к одному фрагменту текста сразу несколько тэгов:

<tt><b><i> Днепропетровск   2005</i></b> </tt>

Сохраним  документ и откроем IE

8.  Ответить на контрольные вопросы по лабораторной работе.

Контрольные вопросы по лабораторной работе № 1

1. Что такое Web-страница и какие существуют способы ее создания?

2. Дайте определения следующиму термину языка HTML - тег.

3. Какова общая структура документа HTML?

4. Какие теги форматирования текстового потока и абзацев Вы знаете?

5. Как задать цвет текста?

6. Как задать шрифты?

7. Как задать цвет фона?


 

А также другие работы, которые могут Вас заинтересовать

25919. Электромеханические реле. Принцип действия. Виды электромеханических реле, их назначение. Основные характеристики, требования 25.5 KB
  Электромеханические реле. Виды электромеханических реле их назначение. Электромеханическое релекоммутационное устройство предназначенное производить скачкообразные изменения в управляющих цепях. реле подразделяются на 2 класса: электромеханические статические Эл.
25920. Электромеханические реле времени. Тепловые реле. Принцип работы. Область применения 24 KB
  Электромеханические реле времени. Тепловые реле. реле времени. Схема защиты реле автоматикичасто требуется выдержка времени когда выдержка устанавливается для предотвращения срабатывания защиты от пусковых токов.
25921. Реле тока и реле напряжения. Принцип работы. Область применения 24.5 KB
  Реле тока и реле напряжения. Реле тока. Реле предназначены для отключения неприоритетных цепей при превышении допустимой величины потребляемого тока. Возможно использование реле для защиты цепей и источников питания от перегрузки по току и короткого замыкания Принцип работы: Потенциометром на передней панели изделия устанавливаем величину тока в цепи при превышении которого реле отключает цепь.
25922. Газовое реле. Принцип работы. Область применения 44 KB
  Использование масла решает проблему охлаждения однако создаёт новую проблему связанную с повышенной опасностью эксплуатации электрического аппарата. В случае повреждения токоведущих частей например при коротком замыкании между обмотками трансформатора масло начинает нагреваться происходит усиленное газообразование резко поднимается давление масла в баке что может привести к взрыву сопровождающемуся пожаром. Принцип действия [Расширитель масляного бака В процессе эксплуатации аппарата уровень масла в баке может меняться. Расширитель...
25923. Промежуточные реле. Указательные реле. Принцип работы. Область применения 22.5 KB
  Промежуточные реле. Указательные реле. Реле промежуточные предназначены для коммутации электрических нагрузок в цепях переменного и постоянного тока в схемах устройств релейной защиты противоаварийной и системной автоматики электроэнергетических объектов промышленной аппаратуре различного назначения и являются комплектующими изделиями. Могут использоваться в качестве вспомогательных реле в цепях постоянного тока.
25924. Магнитоуправляемые герметизированные контакты (герконы). Сухие язычковые герконы. Смоченные (жидкометаллические) язычковые герконы. Герконовые реле. Конструктивные особенности. Область применения 21 KB
  Герконовые реле. МК помещенный в герметизированный баллон называется герконом Герконовые реле могут содержать один или несколько МК; одну или несколько обмоток или шин; поляризующие постоянные магниты ПМ; дополнительные ферромагнитные детали играющие роль магнитопровода кожуха магн. На основе МК создают и многоцепные реле располагая например в обмотке несколько коммутационных элементов. Существуют конструкции герконовых реле и с внешним по отношению к обмотке расположением МК.
25925. Контроллеры, командоаппараты, реостаты. Определения. Область применения 33 KB
  КОМАНДОАППАРАТ электрический аппарат для различного рода переключений электрических цепей в системах управления объектами или технологическими процессами. Простейшие командоаппараты кнопки управления концевые выключатели контроллеры. Командоаппараты предназначены для автоамтического дистационного управления электроприводами в качестве путевых конечных выключателей где требуется особая точность и надежность управления.Командоаппараты рассчитаны для работы в цепях управления постоянного тока напряжением до 440 В и до 380 В переменного...
25927. Контакторы электромагнитные. Назначение контакторов. Контакторы постоянного и переменного тока. Конструктивные особенности. Выбор контакторов 42 KB
  Контакторы постоянного и переменного тока. Классификация электромагнитных контакторов Общепромышленные контакторы классифицируются: по роду тока главной цепи и цепи управления включающей катушки постоянного переменного постоянного и переменного тока; по числу главных полюсов от 1 до 5; по номинальному току главной цепи от 15 до 4800 А; по номинальному напряжению главной цепи: от 27 до 2000 В постоянного тока; от 110 до 1600 В переменного тока частотой 50 60 500 1000 2400 8000 10 000 Гц; по номинальному напряжению включающей...