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


 

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

38539. Социальная защита детей-сирот и детей, оставшихся без попечения родителей: история вопроса и современное состояние 91.5 KB
  Исторические предпосылки возникновения социальной защиты детей сирот и детей оставшихся без попечения родителей 1. Зачатки социальной защиты детей – сирот и детей оставшихся без попечения родителей Во все времена были дети которым выпадала горькая участь расти без родителей. Первые учреждения для детей оставшихся без родителей были приютами для младенцев.
38540. Разработка компактного, надежного современного датчика алкогольных паров 1.06 MB
  Ширина печатного проводника рассчитывается по формуле:1 1 где I протекающий по проводнику ток А; J плотность тока А мм h толщина фольги мм; Для односторонней печатной платы изготовленной химическим способом методом сеткографии для бытовой аппаратуры плотность тока J= 30 ммпо справочнику. Сопротивление...
38542. ОПЫТНО-ЭКСПЕРИМЕНТАЛЬНАЯ РАБОТА ПО ФОРМИРОВАНИЮ ЭКОЛОГИЧЕСКОЙ КУЛЬТУРЫ МЛАДШИХ ШКОЛЬНИКОВ ПОСРЕДСТВОМ ДИДАКТИЧЕСКИХ ИГР 720 KB
  Формирования экологической культуры посредством дидактической игры . Эффективным методом формирования экологической культуры являются дидактические игры. В процессе использования дидактической игры у детей формируется умение действовать в какойлибо ситуации в соответствии с определенными нормами. Фицула в учебнике по педагогике отмечает что целью формирования экологической культуры в учебновоспитательном процессе используют экологопсихологическую терминологию групповые и ролевые игры мозговой штурм что направлены на...
38543. Управление маркетингом на предприятие на примере торговой компании ТОО «DOM COMPANI» 755.5 KB
  Организационная структура предприятия ТОО DOM COMPNI. Используя в управлении теорию маркетинга предприятия и фирма должны строить свою деятельность в соответствии с ее ключевым принципом: производить то что продается а не продавать то что производится. Методически этот процесс должен предшествовать разработке любых тактических и тем более стратегических линий поведения предприятия поскольку он на многоальтернативной основе позволяет высшему звену управления остановить свой выбор на наиболее перспективных для предприятия рынках....
38544. Управление прибылью и рентабельностью предприятия (на примере ООО «Моравия Авто Плюс») 1 MB
  кафедрой _________________________ __ ____________20___г Дипломный проект Студента 6 курса заочного отделения Сухобока Александра Владимировича зачетная книжка №1008 на тему: Управление прибылью и рентабельностью предприятия на примере ООО Моравия Авто Плюс Специальность: 080507. Аннотация Дипломный проект на тему: Управление прибылью и рентабельностью предприятия на примере ООО Моравия Авто Плюс. При написании работы ставятся следующие задачи: изучить теоретически основы анализа ликвидности и платежеспособности;...
38545. Исследования динамики воображения при использовании эвристических методов обучения у студентов специальности Связи с общественностью ЧГПУ им. И.Я. Яковлева 222 KB
  Донесение и работа с информацией, влияние на определенные слои общества, а также проталкивание, лоббирование некоторых своих, личных интересов, как раз и составляет основу деятельности PR. Именно поэтому на сегодняшний день актуально изучение эвристических методы в работе PR - специалиста.
38546. Технология возделывания картофеля в условиях СПК “Старый Лепель” Лепельского района 545 KB
  Технология возделывания картофеля в условиях СПК â€œСтарый Лепель†Лепельского района24 5. Мучнистая рассыпчатая консистенция отварного картофеля приготовленного в домашних условиях – критерий отбора при покупке. Поэтому нужно ориентироваться на производство типичного картофеля не пытаясь подменять продукцию немецких голландских польских картофелеводов. Сбыт качественного картофеля не вызывает серьезных затруднений.