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. Как задать цвет фона?


 

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

49437. Автоклавная установка для изделий на основе ИКВ 143.64 KB
  Классификация автоклавов Выбор типа и состава автоклава Технические характеристики автоклавов Процессы происходящие при автоклавной обработке Устройство автоклава Цикл работы автоклава Требования к охране труда при эксплуатации автоклавов Автоклавные установки для производства ячеистых материалов Расчетный раздел Расчетная аэродинамическая схема Расчет теплоизоляции материальный баланс процесса автоклавной обработки ячеистобетонных изделий Тепловой баланс Техникоэкономическое обосновние Введение Последние...
49438. Проектирование оптической линии связи Новосибирск - Омск 836 KB
  Определение типа кода передачи. Выбор системы передачи. Волоконно-оптическая линия связи ВОЛС это вид системы передачи при котором информация передается по оптическим диэлектрическим волноводам известным под названием оптическое волокно. Технологии волоконно-оптических сетей помимо вопросов волоконной оптики охватывают также вопросы касающиеся электронного передающего оборудования его стандартизации протоколов передачи вопросы топологии сети и общие вопросы построения сетей.
49442. Магистральная волоконно-оптическая линия связи 1.33 MB
  Приложение Задание Спроектировать магистральную волоконно-оптическую линию связи. Одним из важнейших достижений последнего десятилетия в области связи несомненно является создание волоконно-оптических систем передачи ВОСП на базе использования волоконно-оптических линий связи ВОЛС. Использование волоконно-оптических линий связи и систем передачи информации позволяет повысить надежность помехозащищенность скрытность и пропускную способность линий связи Перспективы развития оптической связи связаны с новыми технологиями:...
49443. Мост передний ведущий МАЗ 5434-2300010-20 244 KB
  Данный мост технологичен и ремонтопригоден. Его конструкция в определённых пределах проста, узлы, по возможности, выполнены небольших габаритов и массы, при этом их число минимально. Конструкция моста обеспечивает удобство сборки, места расположения крепежных элементов доступны для сборочного инструмента.
49444. ДИСКРЕТНАЯ ОБРАБОТКА СИГНАЛОВ И ЦИФРОВАЯ ФИЛЬТРАЦИЯ 7.43 MB
  Произвести сравнение результатов вычислений: сравнить форму спектра дискретизированной последовательности со спектром исходного аналогового сигнала; установить связь между: результатом Zпреобразования и спектральной плотностью дискретизированной последовательности; спектром исходного периодического аналогового сигнала и дискретными отсчётами его спектральной плотности.2...