Автор работы: Пользователь скрыл имя, 01 Декабря 2014 в 21:27, лабораторная работа
Цель работы: изучить основные теги языка html, получить первоначальные навыки создания Web-страниц средствами html; научиться форматировать текст с помощью языка html.
МИНИСТЕРСТВО СЕЛЬСКОГО ХОЗЯЙСТВА И ПРОДОВОЛЬСТВИЯ
РЕСПУБЛИКИ БЕЛАРУСЬ
Специальность 2-40 01 01 «Программное обеспечение
информационных технологий»
ОТЧЁТ ПО ЛАБОРАТОРНОЙ РАБОТЕ№2-3
По дисциплине «Программные средства создания Интернет-приложений»
на тему «Основные понятия и определения языка html»
Разработала уч-ся гр. ПО-31 |
_____________ |
|
(подпись) |
||
Проверил преподаватель |
_____________ |
|
(подпись) |
Гомель 2014
Цель работы: изучить основные теги языка html, получить первоначальные навыки создания Web-страниц средствами html; научиться форматировать текст с помощью языка html.
Условие задания:
Часть I. В папке mod1 откройте с помощью программы notepad++ файл lab1-1.html. В комментариях этого файла пошагово описываются ваши действия. Оформите html документ согласно всем требованиям. Проделанную работу покажите преподавателю.
Код1:
<html>
<head>
<title> Мой первый документ </title>
<h1>Мой первый HTML-документ</h1>
<hr noshade width="80%" color="Blue" size="8">
<h2>Евгений Онегин</h2>
<h3>А.С. Пушкин</h3>
</head>
<body>
<p align=left> Мой дядя самых честных правил, </p>
<p align=left> Когда не в шутку занемог, </p>
<p align=left> Он уважать себя заставил </p>
<p align=left> И лучше выдумать не мог. </p>
<br>
</body>
</html>
Рисунок 1 –
Часть II. В папке mod1 откройте с помощью программы notepad++ файл lab1-1a.html. Выполните действия, описанные в комментариях. Результаты работы покажите преподавателю.
Код2:
<!-- СОЗДАЙТЕ
ЗАГОЛОВОК ПЕРВОГО УРОВНЯ
<H1><p align="center"><font color="red">Основные элементы языка HTML</font></p><H1>
<HR>
<!-- ПРОЙДИТЕ ВНИЗ ПО ДОКУМЕНТУ И СДЕЛАЙТЕ ВСЕ ЗАГОЛОВКИ:
ТИПА 1. - ЗАГОЛОВКАМИ ВТОРОГО УРОВНЯ
ТИПА 1.1 - ЗАГОЛОВКАМИ ТРЕТЬЕГО УРОВНЯ
ТИПА 1.1.1 - ЗАГОЛОВКАМИ ЧЕТВЕРТОГО УРОВНЯ И Т.Д. -->
<!----------------------------
<H2>1. БЛОЧНЫЕ ЭЛЕМЕНТЫ (block-level elements)</H2>
Некоторые элементы HTML, которые могут присутчствовать внутри тега body,
называются "блочными элементами" (или элементы уровня блока), в то время
как другие - "внутренние" (элементы уровня текста).
<H3>1.1 Заголовки</H3>
Существует шесть уровней заголовков - от h1 (наиболее важный) до h6
(наименее важный).
Все заголовки имеют полужирное начертание и отступы сверху и снизу.
Примеры заголовков:
<!-- СОЗДАЙТЕ
ЗАГОЛОВКИ СООТВЕТСТВУЮЩИХ
<BLOCKQUOTE>
<H1>Заголовок 1 уровня</H1>
<H2>Заголовок 2 уровня</H2>
<H3>Заголовок 3 уровня</H3>
<H4>Заголовок 4 уровня</H4>
<H5>Заголовок 5 уровня</H5>
<H6>Заголовок 6 уровня</H6>
</BLOCKQUOTE>
1.2 Элементы p и div
<!--
- СДЕЛАЙТЕ
КАЖДЫЙ ФРАГМЕНТ ТЕКСТА
- ВСЕ АБЗАЦЫ ПОМЕСТИТЕ ВНУТРЬ ЭЛЕМЕНТА DIV
- ЗАДАЙТЕ ВЫРАВНИВАНИЕ ALIGN-JUSTIFY ДЛЯ DIV
-->
<DIV align="justify">
<p>Элемент p создает абзац. В нем не могут содержаться элементы уронвя блока
(включая и сам элемент p). Также нежелательно использовать пустой элемент
p, так как
браузеры игнорируют пустые
</p>
<p>
Элемент p добавляет пустые строки вначале и в конце абзаца.
</p>
<p>
Элемент div создает абзац, но без добавления пустых строк. Он может
сожержать как внутренние элементы, так и блочные.
</p>
<p>
наряду с элементом div часто используется элемент span,
определяющий информацию уровня текста.
</p>
<p>
1.3 Форматирование текста с помощью элемента pre
</p><p>
Элемент pre сообщает визуальным агентом пользователей, что содержащийся
в нем текст уже "отформатирован". Браузеры отобразят все символы, спецсимволы
и переводы строк точно так, как в исходном документе.
<p></DIV>
<!-- ПОМЕСТИТЕ ASCII-ГРАФИКУ ВНУТРЬ ЭЛЕМЕНТА PRE-->
<pre>
____
o8%8888,
o88%88888888.
8'- -:8888b
8' 888
d8.-=. ,==-.;888b
>8 `~` :`~' d8888
88 ,88888
88b. `-~ ':88888
888b ~==~ .:88888
88888o--:':::8888
`88888| :::' 8888b
8888^^' 8888b
d888 ,%888b.
d88% %%%--'-.
/88:.__ ' _%-'--- -
'''::==..-' = --. `
</pre>
2. Спецсимволы
спецсимволы используются в тех случаях, когда использование
обычных символов невозможно или нежелательно.
<!-- Символы, которые должны быть заменены на спецсимволы:
< (отврывающая угловая скобка)
> (закрывающая угловая скобка)
" (кавычка)
& (амперсанд)
-->
Пример: фрагмент кода
<!-- оформитее так, чтобы фрагмент выдавался на экран именно так: -->
<p><textarea><h2 align="center">
Голандская фирма Horns&Hoofs запустила online-магазин
</h2></textarea></p>
<!----------------------------
3. Элементы внутренней разметки (inline elements)
3.1.1 Атрибут size: размер текста
<!-- ОФОРМИТЕ КАЖДУЮ СТРОЧКУ ЭЛЕМЕНТОМ FONT C СООТВЕТСТВУЮЩИМ ЗНАЧЕНИЕМ
SIZE -->
<font size="1">size=1;</font>
<font size="2">size=2;</font>
<font size="3">size=3 - обычный текст;</font>
<font size="4">size=4;</font>
<font size="5">size=5;</font>
<font size="6">size=6 - заголовок h1;</font>
<font size="7">size=7;</font>
3.1.2 Атрибут color: цвет текста
<!-- каждую строчку СООТВЕТСТВУЮЩИМ ЦВЕТОМ -->
<font color="#FF0000">Red = "#FF0000" : пример текста</font>
<font color = "#008000">Green = "#008000" : пример текста</font>
<font color="#0000FF">Blue = "#0000FF" : пример текста</font>
<font color="#000000">Black = "#000000" : пример текста</font>
<font color="#808080">Gray = "#808080" : пример текста </font>
<font color="#c0c0c0">Silver = "#c0c0c0": пример текста</font>
3.1.3 Атрибут face: шрифтовое оформление текста
<!-- каждую
строчку СООТВЕТСТВУЮЩИМ
<font face="Arial, Verdana, sans-serif">: пример текста</font>
<font face="Georgia, Times, serif">: пример текста</font>
<font face="Courier, mono">: пример текста</font>
<font face="Cursive">: пример текста</font>
<font face="Fantasy">: пример текста</font>
<H3>3.2 Элемент span</H3>
Элемент span позволяет оформить содержимое с использованием каскадных
таблиц стилей.
Пример:
<span>Обратите внимание на цвет и фон данного текста, а также на рамку вокруг него.</span>
<H3>3.3 Начертание символов<H3>
<!-- ИСПОЛЬЗУЙТЕ
РАЗНЫЕ СПОСОБЫ ВЫДЕЛЕНИЯ
3.3.1 Использование sup, sub, small:
<sup>Формула расчета инергии:</sup>
<sub>E=mc2</sub>
<small>Химическая формула воды:</small>
H2O
<H3>3.3.2 Шрифтовые выделения:</H3>
<i>: выделение курсивом</i>
<b>: выделение полужирным</b>
<u>: выделение подсчеркиванием</u>
<tt>: выделение моноширинным.</tt>
3.3.3 Смысловые элементы ("phrase elements"):
<em>: выделение</em>
<strong>: более сильное выделение</strong>
<cite>: цитата или ссылка на другие ресурсы</cite>
<p>
©1991-2011 УО «Гомельский государственный технический
университет имени П.О. Сухого»
Факультет повышения квалификации и переподготовки кадров
Адрес: г. Гомель, ул. Сосновая, д. 136, ауд. 400, 4-й этаж
</p>
Рисунок 2 –
Часть III. Откройте файл reklama.gif и создайте аналогичную html-страницу.
Код3:
<p align="center" ><font color ="#FF0000" size="7">IX Московский Международный фестиваль Рекламы</font></p>
<p align="center">пройдет с <i>10 по 20 ноября 2011 года</i></p>
<p align ="center">в Центре Международной торговли на Красной Пресне.</p>
<p><b>Организаторы фестиваля</b></p>
<BLOCKQUOTE><p>Российская
Ассоциация Рекламных Агентств<
Ассоциация Рекламодателей<br>
Общественный Совет по рекламе<br></p>
</BLOCKQUOTE>
<p><b>Цель</b></p>
<p>
<BLOCKQUOTE>
Повысить престиж рекламы как вида исскуства, продемонстрировать последние<br>
достижение в этой области зарубежных и отечественных производителей,<br>
способствовать выдвижению на рекламный рынок наиболее интересных и<br>
оригинальных работ.<br>
</BLOCKQUOTE>
</p>
<p><b>Задачи Фестиваля</b></p>
<p>
<BLOCKQUOTE>
Проведение конкурсов телевизионной, печатной рекламы в Интернет,<br>
радиорекламы, полиграфического воплощения, конкурса молодых креаторов. Осуществления научной программы Фестиваля<br>
(семинары, круглые
столы, расширенные заседания
На Фестивале будет открыт "Рекламный клуб" для общения, профессиональных встреч, презентаций.<br>
</BLOCKQUOTE></p>
<p>Число участников:</p>
<BLOCKQUOTE>
= = = = = = = = = <br>
2009: 25<br>
2010: 225<br>
2011: 1225<br>
© 2011 Web|DISIGN|Group, Moscow<br>
</BLOCKQUOTE>
Рисунок 3 -
Информация о работе Основные понятия и определения языка html