Hello, World!
This is a paragraph of text.
Указание на автора.
Указание на программу, которая сгенерировала этот текст.
Описывает формат и кодировку страницы.
content="text/html; charset=windows-1251/">
Определяет основной язык, на котором написана страница.
,
,
Комментарии вставляются в HTML текст так же, как и обычные элементы:
Слайд 16Блочные элементы и их атрибуты
- абзац (параграф)
.. - заголовки
- длинная цитата
- предварительно отформатированный текст
- текстовый блок
Атрибут:
align — выравнивание (left, right, center, justify)
Примеры:
Заголовок в центре
Абзац справа
Ай, Моська, знать, она сильна, коль лает на слона!
Текст с выравниванием по ширине
Слайд 17Некоторые элементы HTML и их атрибуты
- перевод строки
Даром преподаватели
время
со мною тратили!
- горизонтальная полоса-разделитель
- вывод рисунка
![]()
width="250" height="150"/>
Слайд 18Шрифты
...
Текст документа шрифтом 3 размера
...
Слегка увеличиваем шрифт
...
Продолжаем шрифтом 3 размера
...
face="Arial, Helvetica, Sans Serif" size="5">
Вставка текста увеличенным шрифтом Arial
W
Слайд 19Выделение в тексте
Текст с курсивом
Порой в России встречаются действительно талантливые
веб-мастера. Но только не друг с другом.
Текст с выделенным словом
Я
сильный, но легкий.
Подчеркнутый текст
Лена + Вася Коля = Love
Текст с увеличенным словом. Небоскребы, небоскребы, а я маленький такой.
X2, X0 x2 x0
Слайд 20Атрибуты элемента BODY
background - определяет изображение для "заливки" фона. Значение
задается в виде полного URL или имени файла с картинкой
в формате gif или jpg.
bgcolor - определяет цвет фона документа.
text - определяет цвет текста в документе.
link - определяет цвет гиперссылок в документе.
alink - определяет цвет подсветки гиперссылок в момент нажатия.
vlink - определяет цвет гиперссылок на документы, которые вы уже просмотрели.
Слайд 21Создание гипертекста
Гиперссылка — элемент
URL-адрес ресурса
URL – Uniform Resource Locator
http://en.wikipedia.org/wiki/Http_error_codes
http
– используемый протокол;
en.wikipedia.org – хост – адрес или имя запрашиваемого
сервера;
80 – явно не указанный номер порта (но можно указать после имени хоста);
/wiki/Http_error_codes – адрес страницы на сервере
Слайд 22Дополнительные поля URL
http://akoub.narod.ru/2007-2008/autumn/func5538.htm#task3
После получения страницы перейти к метке task3
http://127.0.0.1:8080/secret/money.txt
В запросе
указан нестандартный порт.
Слайд 23Элемент
Атрибуты:
href=“путь” – связь с объектом, на который идет ссылка
target=“название”
– указание того окна, где будет открываться объект:
_parent
_self
_blank
Link
href=“mailto:abc.mail.ru”>Пишите!
Слайд 24«Якоря»
Якорь – специальная метка в документе, невидимый объект, на который
можно создать ссылку.
Вставка якоря:
Ссылка на якорь:
текст
Слайд 25Списки
Список (нумерованный или ненумерованный) – блочный элемент, содержащий внутри себя
блочные элементы – члены списка
маркированный список
Первая строка списка
Вторая
строка списка
Третья строка списка
Атрибуты списка могут задавать вид маркеров (не поддерживается в «строгом» XHTML), например
- Первая строка списка
Первая строка списка
Вторая строка списка
Третья строка списка
Первая строка списка
Слайд 26Нумерованные списки
нумерованный список
Вымыть посуду
Сделать уборку
Сходить на лекцию
Атрибуты
списка могут задавать тип и способ нумерации (не поддерживается в
«строгом» XHTML)
- Сделать домашнее задание
- Купить билеты на концерт
Вымыть посуду
Сделать уборку
Сходить на лекцию
Сделать домашнее задание
Купить билеты на концерт
Слайд 27Таблицы
Элемент
Используется для создания таблиц в HTML-документах. Таблица состоит из
строк. Каждая из строк состоит из одной либо нескольких ячеек
(заголовки или ячейки с данными). Таблица может содержать параграфы, списки, заголовки, формы, рисунки и отформатированный текст.
Атpибуты: align, border, cellpadding, cellspacing, width.
Элемент
Используется для определения ячеек заголовка таблицы.
Атpибуты: align, colspan, rowspan, height, nowrap, valign, width.
Слайд 28Таблицы
Элемент
Ячейка таблицы.
Атpибуты: align, colspan, rowspan, height, nowrap, valign,
width .
Элемент
Строка в таблице.
Атpибуты: align, valign.
Элемент
Заголовок
всей таблицы.
Атрибуты: align
Таблица расходов
Слайд 30Атрибуты тегов tr, th, td
align - горизонтальное выравнивание содержимого ячейки.
Возможные значения: left, center, right. По умолчанию способ выравнивания определяется
значением параметра align элемента tr. Если он не задан, то для td выполняется выравнивание по левому краю, а для th — по центру.
valign - вертикальное выравнивание содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (valign="middle"), если значение этого параметра не было задано ранее в элементе tr.
width - определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.
height - определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы.
colspan - определяет количество столбцов, которые объединяет данная ячейка.
rowspan - определяет количество рядов, которые объединяет данная ячейка.
nowrap - блокирует автоматический перенос слов в пределах текущей ячейки.
bgcolor - определяет цвет фона ячейки.
background - заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка.
Слайд 34Базовые понятия
стиль
элементы HTML и их атрибуты
таблицы стилей: style sheets
таблица стилей:
правила таблицы стилей
правило таблицы стилей:
селектор {пары атрибут-значение}
p {color:blue; text-indent:30pt}
body
{font-family:sans-serif;font-size:15pt}
таблица стилей по умолчанию
область действия таблицы стилей: отдельный элемент, документ, группа документов
CSS (Cascading Style Sheets)
Слайд 35Свойства, описываемые CSS
Свойства шрифта
Свойства текста
Свойства фона
Свойства обрамления
Свойства позиционирования
Слои
Слайд 36Примеры атрибутов и их значений
font-family: "lucida console" "courier new" sans-serif;
font-size:
small;
font-size: larger;
font-size: 10px;
font-size: 80%;
font-weight: bold;
font-weight: 400;
font-style: italic;
font: sans-serif
bold x-large;
text-align: center;
text-align: right;
text-transform: uppercase;
text-indent: 2cm;
text-decoration: underline;
text-decoration: blink;
Слайд 37Единицы измерения
Относительные
em — размер шрифта, соответствует атрибуту font-size,
ex -
размер буквы ''x'' данного шрифта
px - размер, использующий пиксели,
относительно устройства вывода
% - размер, использующий процентные значения, относительно основного размера
Дочерние элементы не наследуют относительные значения, указанные для их родительских элементов.
Абсолютные
in - размер, в дюймах, 1 дюйм равен 2.54 сантиметрам.
cm - размер, в сантиметрах
mm - размер, в миллиметрах
pt - размер, в точках, 1 точка равна 1/72 дюйма.
pc - размер, в пиках, 1 пика равна 12 точкам.
Слайд 39Таблица стилей, внедренная в документ
Элемент style в элементе head
type="text/css">
h2 { color: blue; text-align: center }
p { color: red; text-align: right }
p.blue { color: blue; text-align: right }
.lime { color: lime; text-align: right }
Слайд 40Селекторы таблицы стилей
Селектор типа тега
p { color: red; text-align: right
}
Селектор типа класса
p.blue { color: blue; text-align: right }
.lime {
color: lime; text-align: right }
Применение правил таблицы стилей
Text1
- Абзац с красными буквами
Text2
Абзац с синими буквами
Text2
Абзац с зелеными буквами
Text4
Заголовок с зелеными буквами
Слайд 42Пример css-файла (my.css)
h2 { color: blue; text-align: center
}
p { color: red; text-align: right }
p.blue { color: blue; text-align: right }
.lime { color: lime; text-align: right }
Слайд 43Импортирование таблицы стилей
Команда @import в элементе
Формат команды
@import url("имя файла")
[типы носителей];
@import "имя файла" [типы носителей];
Типы носителей
all - все типы
(по умолчанию),
braille - устройства, основанные на системе Брайля (для слепых людей),
handheld - наладонные компьютеры и аналогичные им аппараты,
print - печатающие устройства вроде принтера,
screen - экран монитора,
tv - Телевизор.
Слайд 44Пример импортирования таблицы стилей
@import URL("my.css")
screen;
@import URL("myprint.css") print;
h2 {
color: gray; text-align: right }
p.blue { color: blue; text-align: right }
.yellow { color: yellow }
Похожие презентации
Обратная связь
Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:
Email: Нажмите что бы посмотреть
Что такое TheSlide.ru?
Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно хранить и делиться своими презентациями с другими пользователями.
