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


 

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

23439. ФЕНОТИПИЧЕСКИЕ РЕАКЦИИ И ЭВОЛЮЦИОННЫЙ ПРОЦЕСС 428 KB
  Его обсуждение с дарвинистских позиций началось как известно с гипотезы органического или совпадающего отбора Моргана Болдуина выдвинутой на рубеже нашего века; в 30 40х годах в нашей стране к нему вновь было привлечено большое внимание благодаря работам таких исследователей как В. Одно из них унаследованное генетической теорией еще от вейсмановского неодарвинизма полагает что модификации или ненаследственные изменения в качестве таковых не имеют эволюционного значения и могут только замедлять темпы отбора если попадают в его...
23440. Строение и химия клеточного ядра. Клеточная биология 1.68 MB
  Структура и химия хроматина ДНК хроматина Репликация эукариотических ДНК Основные белки хроматина – гистоны Функциональные свойства гистонов Первый уровень компактизации ДНК. Структурная роль нуклеосом Нуклеосомы при репликации и транскрипции Второй уровень компактизации ДНК – 30 нм фибрилла Негистоновые белки Петлевые домены ДНК – третий уровень структурной организации хроматина ГЛАВА 6. Ядерный белковый матрикс Общий состав ядерного матрикса ДНК ядерного белкового матрикса ГЛАВА 7. Клетки увеличиваются в числе путем деления исходной клетки...
23441. Репликация генома 2.58 MB
  ДНКполимеразы 1. Биосинтез ДНК.2 Бактериальные ДНКполимеразы 1. ДНКполимераза I E.
23442. Биобезопасность 5.6 MB
  Мотивирующие факторы биотерроризма Возможные источники появления у террористов биологического оружия и пути предупреждения его распространения Последствия биотерроризма значимость психологического фактора Биотерроризм как составляющая часть угрозы распространения опасных инфекционных заболеваний человека и животных общие и отличительные черты Потенциальные и реальные патогены для биотерроризма Общие черты и отличительные особенности биотерроризма и естественных вспышек инфекционных заболеваний. Защита человека и общества...
23443. Сибирская язва 1.56 MB
  Три мембраносвязанные энзима необходимые для синтеза капсулы кодируются pXO2 плазмидой массой 60 мегадальтон Наличие капсулы отличает вирулентные штаммы сибирской язвы от вакцинного. Многочисленные исследования убедительно показали что вирулентность возбудителя сибирской язвы утратившего способность образовывать капсулу снижается в десятки тысяч раз хотя его способность вызывать иммунитет сохраняется. Во время Второй Мировой войны Великобритания тестировала взрывчатку с бациллами сибирской язвы на шотландском острове Груинард. Бактерии...
23444. Современные методы индикации и идентификации B.anthracis 98 KB
  В Центре по контролю за заболеваемостью США разработали оптимизировали и оценили ферментносвязанный иммуносорбентный анализ ELISA на IgG антитела к защитному антигену PA Bacillus anthracis в сыворотке человека. Identification of Bacillus anthracis by a sample protective antigenspecific mAb dotELISA. Detection of frequency resonance energy transfer pair on doublelabeled microsphere and Bacillus anthracis spores by flow cytometry. anthracis лабораторной службы США.
23445. ФИЗИЧЕСКАЯ ГЕОГРАФИЯ 12.61 MB
  Материковые воды . Современные представления о Мировом круговороте воды . Подземные воды . Внутренние воды и водные ресурсы России .
23446. Экономическая география 1.57 MB
  Экономикогеографическая характеристика территории страны района и т. Кроме того существует территориальное разделение труда закрепляющее отдельные отрасли производства за определенными территориями страны и районы мира. Территориальное разделение труда Условные обозначения: А Б В территория любой страны или района мира; предприятия разнородных производств отраслей возникшие на территории отдельных стран районов располагающих благоприятными условиями предпосылками для их развития. Формирование в рамках...
23447. Битва за небеса 1.56 MB
  После нее победители немцев Британия Франция и США устанавливают Версальскую систему равновесия. Германия снова повержена и победители – прежде всего наша Империя и США – в 1944 году на Ялтинской конференции проектируют Ялтинскую модель мира. С балансом сил двух мировых держав – СССР и США. Проклятая Североатлантическая сила ударит и по России едва только у нас сгниют от старости последние баллистические ракеты способные ударить по США.