Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Практическая работа 1
Введение в язык HTML
Цель
Изучить структуру HTML-документа, освоить приемы форматирования текста.
Задачи
Создать файл в формате html наполнить его текстом сделать форматирование текста с помощю тегов html вставить картинки и ссылки на другие источники.
Свединия из теории
HTML – язык разметки гипертекстового документа, используемый для форматирования данных и отображения их в удобном для человека виде специализрованными программами (браузерами).
Теги HTML сообщают браузеру информацию о структуре и особенностях форматирования веб-страницы. Каждый тег содержит определенную инструкцию и заключается в угловуые скобки <>. Большинство тегов состоят из откывающей и закрывающей части и применяются к тесту заключенному внутри.
HTML код задания
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая страница на HTML</title>
</head>
<body style="width: 800px; background: lightblue">
<h1 id="1">Что такое Lorem Ipsum?</h1>
<marquee behavior="alternate" direction="right" style="border: 1px solid #f600; background: brown; color: white;" >Бегущая строка</marquee>
<ul>
<li><a href="#2">Почему используется?</a></li>
<li><a href="#3">Откуда появился?</a></li>
<li><a href="#4">Где взять?</a></li>
<li><a href="1.html">Страница 1</a></li>
<li><a href="2.html">Страница 2</a></li>
<li><a href="3.html">Страница 3</a></li>
</ul>
<img src="../files/106/alarm.jpg" alt="Будильник" align="right" width="300">
<p style="font-family: verdana;"><strong style="text-decoration: underline;">Lorem Ipsum</strong> - это текст-"рыба", часто используемый в печати и вэб-дизайне. <strong style="text-decoration: underline;">Lorem Ipsum</strong> является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя <strong style="text-decoration: underline;">Lorem Ipsum</strong> для распечатки образцов. <strong style="text-decoration: underline;">Lorem Ipsum</strong> не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов <strong style="text-decoration: underline;">Letraset</strong> с образцами <strong style="text-decoration: underline;">Lorem Ipsum</strong> в 60-х годах и, в более недавнее время, программы электронной вёрстки типа <strong style="text-decoration: underline;">Aldus PageMaker</strong>, в шаблонах которых используется <strong style="text-decoration: underline;">Lorem Ipsum</strong>.</p>
<h3 id="2" style="color: red;">Почему он используется?</h3>
<p style="font-family: Arial;">Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. <strong style="text-decoration: underline;">Lorem Ipsum</strong> используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы <strong style="text-decoration: underline;">HTML</strong> используют <strong style="text-decoration: underline;">Lorem Ipsum</strong> в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст <strong style="text-decoration: underline;">Lorem Ipsum </strong>получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).
</p>
<img src="../files/106/time.jpg" alt="Часы" align="right">
<h3 id="3" style="color: green;">Откуда он появился?</h3>
<p style="font-family:Times New Roman;">Многие думают, что <strong style="text-decoration: underline;">Lorem Ipsum</strong> - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа <strong style="text-decoration: underline;">Hampden-Sydney</strong>, штат Вирджиния, взял одно из самых странных слов в <strong style="text-decoration: underline;">Lorem Ipsum, "consectetur"</strong>, и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник <strong style="text-decoration: underline;">Lorem Ipsum</strong> в разделах 1.10.32 и 1.10.33 книги <strong style="text-decoration: underline;">"de Finibus Bonorum et Malorum"</strong> ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка <strong style="text-decoration: underline;">Lorem Ipsum, "Lorem ipsum dolor sit amet.."</strong>, происходит от одной из строк в разделе 1.10.32
</p>
<p>Классический текст <strong style="text-decoration: underline;">Lorem Ipsum,</strong> используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 <strong style="text-decoration: underline;">"de Finibus Bonorum et Malorum"</strong> Цицерона и их английский перевод, сделанный <strong style="text-decoration: underline;">H. Rackham, 1914 год.</strong></p>
<h3 id="4"style="color: yellow;">Где его взять?</h3>
<p style="font-family: comic sans ms;">Есть много вариантов <strong style="text-decoration: underline;">Lorem Ipsum,</strong> но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь. Если вам нужен <strong style="text-decoration: underline;">Lorem Ipsum</strong> для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца. Также все другие известные генераторы <strong style="text-decoration: underline;">Lorem Ipsum</strong> используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. Это делает предлагаемый здесь генератор единственным настоящим <strong style="text-decoration: underline;">Lorem Ipsum </strong>генератором. Он использует словарь из более чем 200 латинских слов, а также набор моделей предложений. В результате сгенерированный <strong style="text-decoration: underline;">Lorem Ipsum</strong> выглядит правдоподобно, не имеет повторяющихся абзацей или "невозможных" слов.
</p>
<p align="center">
<img src="../files/106/table.jpg" usemap="table">
<map id="table" name="table">
<area shape="rect" alt="www.iconfinder.com" coords="12,7,258,71" href="http://www.iconfinder.com/" target="" />
<area shape="rect" alt="www.sssu.ru" coords="285,5,524,69" href="http://www.sssu.ru/" target="" />
</map>
</p>
<hr>
<a href="http://www.yandex.ru/">Яндекс</a>
<a href="http://www.google.ru/">Гугл</a>
<a href="mailto:1@mail.ru">Наш email 1</a>
<a href="mailto:2@mail.ru">Наш email 2</a>
<a href="mailto:3@mail.ru">Наш email 3</a>
<p align="right">
<a href="#1">Вверх</a>
</p>
</body>
</html>
Расшифровка тегов
<html> тег начала и конца документа html.
<head> тег контейнер служебной информации.
<meta> тег для настройки отображения страницы.
<title> тег названия документа вверху браузера.
<body> тег контейнер тела докумена все что в нем отображается в браузере.
<h1…h6> теги заколовков разного уровня.
<p> тег абзаца.
<img> тег для вставки изображения.
<a> тег ссылки.
<hr> тег горизонтальной черты.
Скриншот результата:
Вывод
В ходе данной практической работы была изучена структуру html документа, основные теги использующиеся в таком документе и различные способы форматирования теста и изображения с помощью тегов и атрибутов html.