Презентация "Информационные системы"
Презентация "Информационные технологии"
Основы языка разметки HTML
Язык HTML основан на использовании тэгов. Тэги - это команды, которые указывают браузеру, где и как расположить на странице текст и картинки, а также позволяют организовывать ссылки на другие документы. Для того, чтобы браузер не путал тэги с текстом, их отмечают треугольными скобками <>. Большинство тэгов, как правило, используются парами. Первым идет открывающий тэг, он объясняет браузеру, что делать с последующим текстом. Затем следует закрывающий тэг, который указывает, что действие тега заканчивается. Отличается закрывающий тэг от открывающего наличием в нем косой черты - слэша.
Пример HTML-текста:
Вот <I>это курсив</I>, а это уже нет.
На экране вы увидите:
Вот это курсив, а это уже нет.
Теперь рассмотрим, из чего, в основном, состоит HTML документ. Сам документ начинается тэгом <html> и заканчивается тегом </html> - браузер должен знать, где страница начинается, и где заканчивается. Внутри расположены два блока.
В блоке <head> ... </head> размещается неотображаемая на странице служебная информация. Между тегами <title> ...</title> записывается текст, который будет появляться в строке заголовка окна браузера.
Вся информация веб-страницы размещается в блоке <body>...</body>), Структура простейшего html-документа:
<html>
<head>
<title>Название страницы</title>
</head>
<body>
Здесь находится текст страницы, различные картинки.
</body>
</html>
Попробуйте набрать этот пример в любом текстовом редакторе и сохранить его с расширением .html или .htm. Теперь можно его просматривать, как любой HTML документ.
Форматирование текста
За оформление текста отвечают теги форматирования. Для отображения заголовков используют теги <h1> ...<h6>. Отличаются заголовки от текста и между собой толщиной и высотой букв. Заголовок <h1>... </h1>задаёт самые крупные символы, а заголовок <h6>...</h6> самые мелкие.
Абзацы в тексте выделяются тэгами <p>...</p>. При просмотре браузером абзацы отделяются друг от друга пустой строкой.
И заголовки, и абзацы по умолчанию выравниваются влево.. Атрибут align позволяет выравнивать текст по центру или вправо.
Пример:
<p>Этот абзац расположен слева</p>
<p align="center'>Этот абзац по центру</p>
<p align="right">А вот этот абзац справа</p>
Что дает при просмотре:
Этот абзац расположен слева
Этот абзац по центру
А вот этот абзац справа
Аналогично форматируются и заголовки: <h1 align="right">..</h1> и т.д.
Еще один полезный способ выравнивания по центру, это использование тегов <center>..</center>. Они позволяют отформатировать сразу несколько заголовков и абзацев.
Например:
<html>
ПРИМЕР 1 Создать веб-страницу в соответствии с рисунком.
<html>
<head>
<title>Заголовки</title>
</head>
<body bgcolor= "knaki" text = "blue">
<h1 align="center">Заголовок 1</h1>
<h2 align="left">Заголовок 2</h2>
<h3 align="right">Заголовок 3</h3>
<font face="Arial" color="red">
<h4 align="center">Заголовок 4</h4>
</body>
</html>
<html>
<title>Заголовки</title>
</head>
<body bgcolor= "knaki" text = "blue">
<h1 align="center">Заголовок 1</h1>
<h2 align="left">Заголовок 2</h2>
<h3 align="right">Заголовок 3</h3>
<font face="Arial" color="red">
<h4 align="center">Заголовок 4</h4>
</body>
</html>
Еще один полезный способ выравнивания по центру, это использование тегов <center>..</center>. Они позволяют отформатировать сразу несколько заголовков и абзацев.
Например:
<center>
<h1>Заголовок страницы</h1>
<h2>Подзаголовок</h2>
<p>Абзац 1</p>
<p>Абзац 2</p>
</center>
В результате заголовок, подзаголовок и оба абзаца будут выравниваться по центру.
Чтобы перейти на новую строку, не прерывая абзаца (т.е., чтобы не вставлять пустую строку между абзацами), применяется тэг <br>. Закрывающего тэга у него нет.
Тэг <hr> описывает горизонтальную линию и может включать атрибуты:
- size- толщина линии в пикселях;
- width- длина линии в пикселях или процентах от ширины экрана;
- align- выравнивание линии, может принимать значения left, center, right;
- color- цвет линии
Еще один способ форматирования текста - использование тегов<pre>..</pre> (prefomatted text - предварительно форматированный текст). Обычно браузеры игнорируют множественные пробелы и символы конца строки. Однако с использованием тега <pre> текст выводится в окне браузера точно в том виде, как он есть в исходном HTML-документе.
Пример. В тексте html-документа:
<pre> Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе необязательно использовать
тэг BR! </pre>
В окне браузера:
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе необязательно использовать
тэг BR!
Для задания шрифта, цвета и размера символов текста используется тег <font>. Шрифт задаётся атрибутом face, значением которого является название шрифта, например Arial. Цвет символов задаётся атрибутом color.
Например шрифт Arial синего цвета задаётся следующим образом:
<font face="Arial" color="blue">
Если шрифт не задан, то по умолчанию используется шрифт Times чёрного цвета.
Размер шрифта задаётся атрибутом size и может выражаться в условных единицах, которые могут принимать значения от 1 до 6. По умолчанию размер шрифта - 6.
Размер шрифта может выражаться и в относительных единицах. Так <font size="+2"> задаёт размер 5, а <font size="-2"> - размер 1.
ПРИМЕР 2 Создать веб-страницу в соответствии с рисунком.
<head>
<title>Шрифты</title>
</head>
<body bgcolor= "pink">
<font face="Arial" size="5" color="red"> Шрифт Arial</font><br>
<font face="Times" size="5" color="green"> Шрифт Times</font><br>
<font face="Courier" size="5" color="blue"> Шрифт Courier</font>
</body>
</html>
Изображения на веб-страницах
Все изображения, которые располагаются на веб-странице, хранятся в отдельных файлах, а в HTML-коде даются лишь ссылки на них.
Для вставки рисунка предназначен непарный тег <img>. Обязательным его атрибутом является имя графического файла <img srс=имя файла"">.
Тег <img> может содержать и другие атрибуты, такие как:
height - высота изображения в пикселях;
width - ширина изображения в пикселях;
border - толщина рамки в пикселях.
С помощью атрибута alt можно задать текст сообщения, которое будет выводиться вместо рисунка, если он не найден. Этот текст будет появляться в виде подсказки при наведении курсора мыши на рисунок.
ПРИМЕР 3 Создать веб-страницу в соответствии с рисунком.
<html>
<head>
<title>модель RGB</title>
</head>
<body bgcolor="gold">
<font face="Arial">
<h2 align=center> Цветовая модель RGB</h2>
<p align=center>
Любой цвет представляется суммой трех основных цветов: <br>
<b> <font color=red>красного (<i>Red</i>), </font>
<font color=green>зеленого (<i>Green</i>),</font>
<font color=blue>синего (<i>Blue</i>) </font></b>.<br>
<img src=rgb.gif> </p>
</body>
</html>
Изображения на веб-страницах
Все изображения, которые располагаются на веб-странице, хранятся в отдельных файлах, а в HTML-коде даются лишь ссылки на них.
Для вставки рисунка предназначен непарный тег <img>. Обязательным его атрибутом является имя графического файла <img srс=имя файла"">.
Тег <img> может содержать и другие атрибуты, такие как:
height - высота изображения в пикселях;
width - ширина изображения в пикселях;
border - толщина рамки в пикселях.
С помощью атрибута alt можно задать текст сообщения, которое будет выводиться вместо рисунка, если он не найден. Этот текст будет появляться в виде подсказки при наведении курсора мыши на рисунок.
ПРИМЕР 3 Создать веб-страницу в соответствии с рисунком.
<html>
<title>модель RGB</title></head>
<body bgcolor="gold">
<font face="Arial">
<h2 align=center> Цветовая модель RGB</h2>
<p align=center>
Любой цвет представляется суммой трех основных цветов: <br>
<b> <font color=red>красного (<i>Red</i>), </font>
<font color=green>зеленого (<i>Green</i>),</font>
<font color=blue>синего (<i>Blue</i>) </font></b>.<br>
<img src=rgb.gif> </p>
</body>
</html>
Создание гиперссылок
Переходы со страницы на страницу веб-сайта выполняются с помощью гиперссылок.
Для создания гиперссылок на языке HTML служит парный тег <a> ...</a> с обязательным атрибутомhref, который указывает адрес перехода. Например, HTML-код текстовой гиперссылки на страницу “Графика”, которая сохранена в файле graf.htm в той же папке, что и исходная, имеет вид:
<a href="graf.htm">Графика </a>
Гиперссылкой может служить не только текст, но и рисунок. Для этого между парой тегов
<a href=... >...</a > нужно вставить тэг, указывающий на файл изображения,
например: <a href="graf.htm"> <img src="ris.gif"> </a>.
Возможно совместное использование текста и графики в одной ссылке,
например: <a href="graf.htm"> <img src="ris.jpg"> Графика </a>.
По умолчанию вызванная гиперссылкой страница открывается в том же окне, что и исходная, замещая ее. Для просмотра вызванной страницы в новом окне необходимо указать атрибут target=”_blank”,
например: <a href="graf.htm" target=”_blank” > Графика </a>.
Подготовка изображений для Интернета
При создании веб-сайта приходится заботиться о том, чтобы его страницы загружались как можно быстрее. Это особенно актуально, если на страницах сайта необходимо разместить много изображений. Поэтому так важна оптимизация изображений и грамотный выбор формата их хранения.
Оптимизация - процесс уменьшения размера файла изображения. Процесс оптимизации включает следующие операции:
Переходы со страницы на страницу веб-сайта выполняются с помощью гиперссылок.
Для создания гиперссылок на языке HTML служит парный тег <a> ...</a> с обязательным атрибутомhref, который указывает адрес перехода. Например, HTML-код текстовой гиперссылки на страницу “Графика”, которая сохранена в файле graf.htm в той же папке, что и исходная, имеет вид:
<a href="graf.htm">Графика </a>
Гиперссылкой может служить не только текст, но и рисунок. Для этого между парой тегов
<a href=... >...</a > нужно вставить тэг, указывающий на файл изображения,
например: <a href="graf.htm"> <img src="ris.gif"> </a>.
Возможно совместное использование текста и графики в одной ссылке,
например: <a href="graf.htm"> <img src="ris.jpg"> Графика </a>.
По умолчанию вызванная гиперссылкой страница открывается в том же окне, что и исходная, замещая ее. Для просмотра вызванной страницы в новом окне необходимо указать атрибут target=”_blank”,
например: <a href="graf.htm" target=”_blank” > Графика </a>.
Подготовка изображений для Интернета
При создании веб-сайта приходится заботиться о том, чтобы его страницы загружались как можно быстрее. Это особенно актуально, если на страницах сайта необходимо разместить много изображений. Поэтому так важна оптимизация изображений и грамотный выбор формата их хранения.
Оптимизация - процесс уменьшения размера файла изображения. Процесс оптимизации включает следующие операции:
- изменение размера изображения
- сжатие изображения с сохранением оптимального качества.
При подготовке изображений для Интернета выработаны определенные рекомендации. Размеры сохраняемых в файлах изображений должны соответствовать отображаемым на веб-страницах, несмотря на то, что их ширину и высоту можно задавать в теге <img>. Например, для мониторов 17’ с разрешением 1280x768 ширина изображения на странице чаще всего не
превышает 600-800 пикселей, а высота 400-600. Если изображение обтекается текстом, то его размер должен находиться в пределах 200-400 пикселей.
При большом разнообразии графических форматов для размещения на сайтах в основном используют изображения форматов JPG, GIF, PNG.
Готовимся к контрольной работе
(11а - 16.02.2017, 11б - 14.02 2016)
1. Вспомните основные понятия.
Презентация "Базы данных и СУБД"
2. Проверьте себя.
Задание 1. Разгадайте кроссворд.
Задание 2. Найдите основные понятия.
Повторяем графические команды языка программирования
При работе в графическом режиме изображение на экране строится из точек (пикселей). Каждая точка имеет 2 координаты, которые принимают только целые значения. Ось Y имеет направлена вниз.
1. Для работы в графическом режиме необходимо подключить модуль графических команд следующим образом:
Uses GraphAbc;
2. Рисование линий Line (x1, y1, x2, y2);
где x1, y1 x2, y2 - координаты начала и конца отрезка.
3. Рисование прямоугольника Rectangle (x1, y1, x2, y2);
где x1, y1 x2, y2 - координаты противоположных вершин прямоугольника.
4. Рисование окружности Circle (x, y, r);
где х, у - координаты центра окружности, r - радиус.
5. Рисование точки SetPixel (x, y, цвет);
где х, у - координаты точки
6. Закраска замкнутой фигуры FloodFill (x, y, цвет);
где х, у - координаты любой точки, которая находится внутри замкнутой фигуры.
7. Задание толщины контура (линии) SetPenWidth(n);
где n - толщина линий в пикселях
8. Задание цвета контура (линии) SetPenColor(цвет);
Толщину и цвет линии необходимо задавать перед командой рисования линии (фигуры)
9. Вывод текста TextOut(x, y, 'надпись');
где х, у - координаты точки, где начинается текст.9. Вывод текста TextOut(x, y, 'надпись');
10. Установка цвета фона (команда очищает графическое окно указанным цветом)
ClearWindow(цвет);
Упражнение. Графические команды. Перейти к заданию
Комментариев нет :
Отправить комментарий