Понравилась презентация – покажи это...
Слайд 0
РАЗМЕЩЕНИЕ ИНФОРМАЦИИ В ИНТЕРНЕТ РАЗРАБОТКА WEB-ПРИЛОЖЕНИЙ
Слайд 1
Язык HTML
HTML (Hyper Text Markup Language) - язык разметки гипертекстовых документов.
Язык разметки гипертекстовых документов HTML представляет собой совокупность команд, называемых тегами (от английского tag).
Назначение HTML-тегов
Форматирование текста;
Форматирование таблиц и списков;
Организация ссылок на другие ресурсы;
Описание фреймов;
Вставка изображений и расширений HTML.
Слайд 2
Формат HTML–тегов
HTML-тег записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов. Атрибуты – элементы, дающие браузеру дополнительную информацию об отображении размещаемой информации.
Большинство тегов имеют два компонента: открывающий и закрывающий (парные теги). Закрывающий компонент имеет то же название, но при записи перед названием ставится символ « / ».
Общий вид парного тега: <имя тега>текст</имя тега> Пример: <title> Пробная страница </title>
Существуют также непарные теги. Общий вид непарного тега: <имя тега> Пример: <br>
Общий вид тега с атрибутами: <имя тега атрибут 1=значение … атрибут n=значение> текст </имя тега> Пример: <font color=“green” size=3> Проба </font>
Слайд 3
Структура HTML-документа
Слайд 4
Пример простейшего HTML-документа
<HTML>
<HEAD>
<TITLE>Пример HTML-документа</TITLE>
</HEAD>
<BODY bgcolor="#00FF00">
Hello!!!
</BODY>
</HTML>
Тег <HTML> указывает программе просмотра страниц что это HTML документ.
Тег <HEAD> определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа.
Тег <TITLE> - тег названия документа. Текст внутри него отображается не на странице, а как заголовок окна браузера.
Тег <BODY> определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты).
Атрибут bgcolor устанавливает цвет фона документа, используя значение цвета в виде RGB (возможно использование константы цвета, например “yellow”).
Слайд 5
Названия основных цветов и значения RGB
Чувствительность к регистру
При написании имен тегов, атрибутов и большинства значений атрибутов язык HTML нечувствителен к регистру. Например, можно написать TITLE, или Title, или title, или даже tItLE.
Слайд 6
Теги форматирования текстовых фрагментов
<I> Курсив
<B> Жирный шрифт
<U> Подчеркнутый текст
<H1> заголовок 1-го уровня (самый большой)
. . .
<H6> заголовок 6-го уровня (самый маленький)
<BR> перевод строки (непарный)
<HR> для рисования горизонтальной черты в качестве разделителя (непарный)
<FONT> определяет выводимый шрифт, его цвет и размер (парный)
Атрибуты:
color - цвет текста
face - гарнитуру шрифта
size - размер текста в пределах от 1 до 7, где 1 - самый мелкий шрифт. По умолчанию равен 3
<P> начало нового параграфа (абзаца) (парный)
Атрибут:
align - выравнивает параграф относительно одной из сторон документа, значения: left, right, или center
парные теги
Слайд 7
Встраивание в документ иллюстраций
Графические форматы
GIF - Graphic Interchange Format. При сохранении изображения в этом формате количество используемых цветов не превышает 256.
JPEG (JPG) - Joint Photography Experts Group. Этот формат допускает сохранение изображений, содержащих миллионы цветов.
<IMG> - тег для внедрения графики на страницу
Атрибуты
src - обязательный атрибут, указывающий URL рисунка.
align - выравнивает изображение к одной из сторон документа:
left - по левому краю
right - по правому краю
center - по центру
bottom - по нижнему краю
top - по верхнему краю
middle – посередине.
alt - выводит текст к картинке. Полезно, если браузер не отображает графику на странице
border - устанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется.
height - высота картинки в пикселах или процентах. Желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером.
hspace - определяет размер свободного места в пикселах слева и справа от изображения.
vspace - определяет размер свободного места в пикселах сверху и снизу от изображения.
width - ширина картинки в пикселах или процентах. (Желательно устанавливать явно).
Слайд 8
Использование списков
Виды списков – нумерованные и маркированные.
<UL> и </UL> - для маркированного списка
Атрибут:
type - тип маркера
disk - закрашенный кружок (по умолчанию)
circle - незакрашенный кружок
square - квадратик
<OL> и </OL> - для нумерованного списка
Атрибуты:
type - тип маркера
A - заглавные буквы
a - строчные буквы
I - заглавные римские цифры
i - строчные римские цифры
1 - арабские цифры (по умолчанию)
start - начальное значение для нумерованного списка при использовании арабских цифр
<LI> - элементы списка (непарный)
Элемент любого списка может содержать в себе другой список любого вида (число уровней формально не ограничено)
Слайд 9
Организация ссылок
Гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Для создания гипертекста (гиперссылок) служит тег
<A>. Закрывающий тег обязателен.
Атрибут
href - задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке. Атрибут может указывать как на внешний документ, так и на документ, расположенный в той же папке, что и исходный файл (в этом случае в достаточно указать имя файла – его относительный адрес).
Документы одного сайта рекомендуется связывать относительными ссылками, чтобы не потерять их при перемещении с одного компьютера на другой.
Пример:
<A href="page2.htm">текст</A>
В качестве ссылки может использоваться графический элемент или комбинация текста и графики.
Примеры:
<A href="start.htm"><IMG src="photo1.jpg"</A>
<A href=«page2.htm"><IMG src="photo2.jpg“<br>страница 2</A>
