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


 

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

32788. Особенности научного познания 14.79 KB
  Особенности научного познания. Цель научного познания – открытие объективных законов природы общества мышления постижение сущности изучаемых явлений. Объективность – адекватное отражение действительности не зависящее от субъекта познания. Наличие методологии познания.
32789. Уровни и методы научного познания 14.54 KB
  Уровни и методы научного познания. В научном познании используются разнообразные методы. Метод греч. Учение о методах – методология ее предметом является обоснование методов исследование их эффективности особенностей применения в различных областях знания.
32790. Диалектика, её исторические формы. Диалектика и метафизика 15.42 KB
  Диалектика и метафизика. диалектика – это учение о всеобщих связях и закономерностях развития природы общества и мышления а также основанный на этом учении метод познания. Диалектика как теория и метод познания в своем историческом развитии прошла несколько этапов. Наивная или стихийная диалектика античности.
32791. Общее понятие о философии. Исторические основания возникновения философии. Дофилософские мировоззренческие системы и их роль в формировании философии 15.71 KB
  Философия зародилась около 25 тыс. Термин философия был введен Пифагором и дословно означал любовь к мудрости phileo – любовь sophi – мудрость. Философия все больше превращалась в обобщенную систему знаний о мире задачей которой являлось дать ответы на наиболее общие глубинные вопросы о природе обществе человеке. Философия – это форма духовной деятельности человека форма общественного сознания направленная на осмысление коренных мировоззренческих вопросов.
32792. Спецефика филосовского знания. Соотношение философии и частных наук. Взаимосвязь философии и медецины 15.26 KB
  Соотношение философии и частных наук. Взаимосвязь философии и медецины. С выделением отдельных наук в самостоятельные области знаний возникает вопрос о соотношении философии и частных наук под частными науками понимаются те которые изучают отдельные области реальности. Роль философии представители данного направления сводят к логическому анализу научного языка; 3антисциентизм ограничивает роль науки решением узко практических задач.
32793. Основной вопрос философии и его 2 стороны. Исторические формы материализма и идеализма 16.65 KB
  Основной вопрос философии и его 2 стороны. Центральная мировоззренческая проблема – об отношении человека к миру – конкретизируется в философии как вопрос об отношении мышления к бытию об отношении идеального и материального. Этот вопрос является основным вопросом философии т. Крупнейший представитель немецкой классической философии И.
32794. Исторические этапы развития мировой филосовской мысли. Основные филосовские принципы и исторические типы филосовствования 14.95 KB
  В истории философской мысли также выделяются основные типы философствования философского анализа. В античности созерцательный тип философствования проявился в натурфилософии философии природы а в Древнем Китае – в принципе недеяния т. 2Умозрительный тип философствования – это способ теоретического постижения действительности основанный на отвлеченных логических построениях не связанных с опытными данными. Ярким примером умозрительного типа философствования являются доказательства существования Бога в учении Ф.
32795. Особенности Древнеиндийской философии. Её основные направления 17.32 KB
  В развитии культуры Древней Индии можно выделить два основных периода: 1ведический – предфилософский сер. связанный с переселением на территорию Древней Индии арийских племен. Культура Древней Индии в целом и философия в частности возникла и развивалась в условиях кастовой организации общественной жизни патриархальных традиций и власти деспотического государства. Основным культурным источником философии Древней Индии стала ведическая литература.
32796. Особенности Древнекитайской философии и её основные направления 17.69 KB
  В этот период создавались важнейшие философские школы оказавшие огромное влияние на общественную мысль китайского общества: конфуцианство даосизм моизм легизм и др. б даосизм как онтологическое учение его наивнодиалектический характер. Основателем даосизма является мудрец Лаоцзы VI – V вв. Его главный труд – Даодэцзын – Книга о Дао и Дэ.