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


 

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

55732. Яку роль відіграє у житті людини родинне коло, сімейні свята і традиції 64.5 KB
  Мета: пояснити зміст понять сім’я сімейні обов’язки та конфлікт; розвивати вміння характеризувати ієрархію родинних зв’язків у своїй сім’ї; розкрити роль родинного кола сімейних свят і традицій у житті людини...
55734. Родинами багата Україна 88 KB
  Мене ви матусю під серцем носили. Ви пестили ніжні слова говорили Та з пелюшок мене розуму вчили. я вдячний матусю за те що ви є За те що до праці привчаєте мене. Мене ви зустрінете і посміхнетесь Я щось запитаю – ви зразу озветесь.
55735. Наша шкільна родина 75.5 KB
  Мета: удосконалювати знання учнів про важливість родинних зв’язків; плекати в дитячих душах любов і повагу до батьків, свого роду, гордість за свій народ; розвивати вміння висловлювати свої почуття і вміння бути вдячними;
55736. Виховний захід «Моя родина, я, клас, шкільна сім`я» 59 KB
  Ми зібрались сьогодні на свято. Добрий день всі хто прийшов сьогодні на наше свято Здрастуйте дорога класна родино Дорогі діти Шановні батьки Любі друзі Ми починаємо наше родинне свято.
55737. Нашому роду - нема переводу. Родинне свято 67.5 KB
  Розширити поняття дітей про сім ю, родину, наш український рід, щедрий, багатий своїми традиціями, обрядами, прищеплювати любов до близьких людей, повагу до старших, ровесників та молодших за себе; довести, що найсильніше зігріває родинне вогнище, материнське тепло, батьківська підтримка і порада
55738. Моя сім’я, моя родина – це рідна область, Україно! 52 KB
  Формувати знання дітей про значення здоров’я розуміння необхідності дружби зі спортом. Прищеплювати гігієнічні навички встановити взаємозв’язок між здоров’ям дітей та майбутнім країни.
55739. Семья и семейные ценности 104.5 KB
  Цель: показать ценности семьи и семейные традиции в русской классической литературе на примере романа Л.Н. Толстого «Война и мир»; формировать представление о психологических особенностях семьи, помочь в осознании семейных ценностей
55740. Яку роль відіграє у житті людини родинне коло 130.5 KB
  Мета: Уточнити розширити поглибити уявлення дітей про сім’ю родину рід їх значення в житті людини пробуджувати пізнавальний інтерес до історії свого родоводу формувати навички толерантного поводження в у сім’ї...