Будь умным!


У вас вопросы?
У нас ответы:) SamZan.ru

документа освоить приемы форматирования текста

Работа добавлена на сайт samzan.ru: 2016-03-30


Практическая работа 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.




1. ВЛИЯНИЕ ПОТРЕБНОСТИ В АФФИЛИАЦИИ НА ВЫБОР СТРАТЕГИИ В КОНФЛИКТНОМ ПОВЕДЕНИИ У ПОДРОСТКОВ
2. Вариант 3 Для анализа валового регионального продукта ВРП и доходов населения в отчетном периоде произвед
3. ПОЯСНИТЕЛЬНАЯ ЗАПИСКА К
4. Реферат- Изменение климата и человек.html
5. Плеханов Георгий Валентинович
6. звезды в макулярной области; В ~ гипертоническая нейроретинопатия; Г ~ артериоспастическая ретинопатия
7. птица Серия Айвз Тиль Уленшпигель Палиндром
8. Тема- Обработка графических объектов растровая и векторная графика
9. Статья- Бухгалтерский и налоговый учет с заемными средствами
10. Автомобильный транспорт
11. На начальном своем этапе Ренессанс представлялся как возвращение к достижениям античности
12. Промышленная электроника Отчет о лабораторной работе 4 ИССЛЕДОВАНИЕ ЭЛЕКТРИЧЕСКИХ С
13. Правознавство Житомирського комерційного технікуму З 7
14. Лекция 1 1602 2013г Ивантер В
15.  Определите основные группы отношений которые можно выделить в предмете конституционного права с учетом их
16. Лечебное дело Сестринское дело При использовании лекарственных форм в капсулах внутрь следу
17. Загрязнение морской акватории
18. Аспекты квалификации и совершения валютных операций
19. Тема 1 ФОРМИРОВАНИЕ НАУКИ ОБ ОРГАНИЗАЦИИ 1
20. статья заставит тебя посмотреть на важную часть твоей жизни с другой неизученной стороны и тебе есть смысл п