Рабочие листы
к вашим урокам
Скачать
1 слайд
Текстовые и гипертекстовые способы хранения и представления информации
2 слайд
American Standard Code for Informational Interchange — Американский стандартный код информационного обмена.
Для хранения двоичного кода одного символа выделен 1 байт = 8бит, количество возможных сочетаний единиц и нулей равно 2 8 =256.
ASCII-коды
3 слайд
Кодовая таблица Unicode
Стандарт кодирования символов, включающий в себя знаки почти всех письменных языков мира.
Стандарт был предложен в 1991 году некоммерческой организацией «Консорциум Юникода».
4 слайд
Гиперссылка – «активная» ссылка на другой документ.
Гипертекст – текст, содержащий гиперссылки.
Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой.
WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа).
Основные определения
5 слайд
Web-страница
Это документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера.
статические – существуют на сервере в виде готовых файлов (*.htm, *.html).
динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из БД, *.shtml, *.asp, *.pl, *.php).
позволяют выбирать информацию из БД по заранее неизвестным запросам.
дополнительная нагрузка на сервер;
загружаются медленнее.
6 слайд
Браузер
Это прикладное ПО для просмотра страниц, содержания веб-документов, компьютерных файлов и их каталогов, управления веб-приложениями, а также для решения других задач.
7 слайд
Язык HTML
HTML = Hypertext Markup Language
(язык разметки гипертекста)
HTML был разработан британским учёным
Тимом Бернерсом-Ли
в конце 80-х годов 20 века в рамках создания проекта распределенной
гипертекстовой системы WWW.
8 слайд
Тэг
Это команда языка HTML, которую выполняет браузер:
непарные тэги
парные тэги (контейнеры)
<TABLE>
...
</TABLE>
Открывающий
Закрывающий
Область действия тэга: описание таблицы
<IMG SRC = "vasya.jpg">
Вставить рисунок
9 слайд
Это какой-то указатель коде HTML, отличительный знак, который придает элементу какое-то свойство, что выделяет его из других.
Атрибут
<a title="Ссылка, ведущая на Яндекс" href="http://yandex.ru">Поиск</a>
Атрибут (всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной)
10 слайд
Структура HTML страницы
<html>
<head>
Невидимая часть страницы (Заголовок, Мета-тэги, Подключение стилей, Java-script )
</head>
<body>
Видимая часть страницы, в которой расположены непосредственно элементы Web- страницы: абзацы, таблицы рисунки.
</body>
</html>
11 слайд
Является контейнером, который заключает в себе все содержимое Web-страницы, включая тэги <head> и <body>.
Документ начинается тэгом <html> и заканчивается </html>.
Тэг <html>
12 слайд
Предназначен для хранения элементов, цель которых — помочь браузеру в работе с данными.
Содержимое тэга <head> не отображается напрямую на веб-странице, за исключением тэга <title>.
Тэг < head >
13 слайд
Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на Wеб-странице.
Допускается использовать только один тэг <title> на документ и размещать его в контейнере <head>.
Тэг <title>
14 слайд
Предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.
Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>.
Тэг <body>
15 слайд
Простейшая Web-страница
16 слайд
Заголовки: H1 … H6
17 слайд
Заголовки: H1 … H6
Выравнивание:
<H1 ALIGN=center>История</H1>
left,
center,
right
18 слайд
Выделение текста
<i> - выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<b> - задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<u> - выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<em> - выделяет важные фрагменты текста, отображая их курсивом.
19 слайд
Абзацы
- перенос текста на новую строку.
20 слайд
Абзацы
<p> - абзац с отступами.
21 слайд
Выравнивание
<P ALIGN="center"></p>
left – по левой границе
right – по правой границе
center – по центру
justify – по ширине
22 слайд
Маркированные списки
<ul> - создает маркированный список.
<li> - элемент маркированного или нумерованного списка.
23 слайд
Маркированные списки
Изменение маркера:
disc –
circle – ○
square – ■
<UL TYPE="disc">
...
</UL>
24 слайд
Нумерованные списки
<ol> - упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
25 слайд
Нумерованные списки
Изменение нумерации:
<OL TYPE=i START=3>
...
</OL>
1, i, I, a, A
26 слайд
Многоуровневые списки
27 слайд
Рисунки в документе
<img> - встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<IMG SRC="flag.jpg">
image
(изображение)
bottom, left, middle, right, top
<IMG SRC="flag.jpg" ALIGN="left">
source
(источник)
28 слайд
Рисунки в документе
Из другой папки:
С другого сервера:
<IMG SRC="images/flag.jpg">
<IMG SRC="../../images/night.jpg">
<IMG SRC="http://example.com/img/night.jpg">
29 слайд
Ссылки
<a> - создаёт гипертекстовые ссылки.
<area> - представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.
<a href="http://site.ru">указатель ссылки</a>
<a href="webupblog.ru/link-to-page"><img src="http://webupblog.ru/image1.jpg" /></a>
Ссылка-изображение
30 слайд
<div> - тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<hr> - горизонтальная линия для тематического разделения параграфов.
<s> - отображает текст, не являющийся актуальным, перечеркнутым.
<span> - контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
Часто используемые теги
31 слайд
<strong> - расставляет акценты в тексте, выделяя полужирным.
<sub> - задает подстрочное написание символов, например, индекса элемента в химических формулах.
<sup> - задает надстрочное написание символов.
Часто используемые теги
32 слайд
Содержание и оформление
содержание (контент)
оформление
main.css
mini.css
print.css
Физическая разметка (*.css)
Логическая разметка (*.html)
33 слайд
Что такое HTML?
HTML – код не должен содержать оформления!
оформление частей документа (заголовков, параграфов) описывается в отдельном файле.
CSS = Cascading Style Sheets – каскадные таблицы стилей (стилевые файлы: *.css).
HTML + CSS
+ Javascript
Содержание
Оформление
Анимация
34 слайд
Свойства элементов страницы
color – цвет символов
background – цвет фона
my.css
body {
color: white;
background: #FF6600;
}
Значение
Название тэга
35 слайд
Подключение стилевого файла
<html>
<title>Пример CSS</title>
<head>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
...
</body>
</html>
36 слайд
Шрифты
p {
font-family: Arial, sans-serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
Для всех абзацев
Семейство шрифтов
normal – обычный
bold - жирный
normal – обычный
italic - курсив
размер в пикселях
serif – с засечками
sans-serif – без засечек
monospace – моноширинный
37 слайд
qq.html
Классы (стили оформления)
Для абзацев класса spec
p.spec {
font-style: italic;
background: green;
}
<p class="spec">
L’Etat c’est moi.
</p>
.spec {
font-style: italic;
background: green;
}
Для всех элементов
класса spec
<h1 class="spec">
Россия молодая
</h1>
38 слайд
Размеры и выравнивание
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem.
100px
80%
20px
p {
background: #E6E6FF;
width: 80%;
height: 100px;
text-align: left;
text-indent: 20px;
}
Фон
Ширина
Высота
выравнивание:
left, center, right, justify
Абзацный отступ
39 слайд
Рамка и поля
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem.
40px
40px
5px
20px
p {
background: #ccffcc;
border: 1px solid green;
margin: 0 40px 20px 40px;
padding: 5px;
}
Цвет
Отступы внутри
Отступы снаружи
Рамка
Со всех сторон
Толщина
сверху, справа, снизу, слева
solid – сплошная
dashed - штриховая
dotted – точечная
40 слайд
Форматы рисунков
GIF (Graphic Interchange Format)
сжатие без потерь;
прозрачные области;
анимация;
только с палитрой (2…256 цветов);
рисунки с четкими границами, мелкие рисунки.
JPEG (Joint Photographer Expert Group)
сжатие с потерями;
нет анимации и прозрачности;
рисунки с размытыми границами, фото.
PNG (Portable Network Graphic)
сжатие без потерь;
с палитрой (PNG-8) и True Color (PNG-24)
прозрачность и полупрозрачность;
нет анимации;
плохо сжимает мелкие рисунки.
41 слайд
Фон страницы (через CSS)
body {
background: url(back.jpg);
}
'images/back.jpg'
'../images/back.jpg‘
'http://www.vasya.ru/images/back.jpg'
42 слайд
Выравнивание и отступы (CSS)
<img src="net.jpg" class="left">
img.left {
float: left;
margin: 5px 10px;
}
margin: 5px 10px 5px 0;
Отступа слева нет!
HSPACE
ALIGN
VSPACE
43 слайд
Таблицы
<table> - тег для создания таблицы.
<tbody> - определяет тело таблицы.
<td> - создает ячейку таблицы.
<tfoot> - определяет нижний колонтитул таблицы.
<th> - создает заголовок ячейки таблицы.
<thead> - определяет заголовок (шапку) таблицы.
<caption> - определяет название таблицы.
<tr> - создает строку таблицы.
44 слайд
Размеры (через CSS)
строки:
ячейки:
table.spec {
width: 60%;
height: 300px;
}
<table class="spec">
...
</table>
table.spec tr {
height: 50px;
}
table.spec td.qq {
width: 25%;
height: 50px;
}
45 слайд
Выравнивание (через CSS)
<table class="ex" border="1">
<tr class="centop">
<td>По центру,
по верхней границе</td>
<td class="rmid">По правой
границе, по середине</td>
</tr>
</table>
table.ex tr.centop {
text-align: center;
vertical-align: top;
height:100px;
}
table.ex td.rmid {
text-align: right;
vertical-align: middle;
width:200px;
}
left, center, right
top, middle,
bottom
46 слайд
Фон и цвет текста (CSS)
<table border="1" class="qq">
<tr class="spec">
<td>Привет!</td>
<td class="r"></td>
</tr>
<tr>
<td class="pic">
Таблица
из двух строк</td>
<td>и двух столбцов</td>
</tr>
</table>
table.qq td {
background: green;
}
table.qq tr.spec td {
background: blue;
color: white;
}
table.qq tr.spec td.r {
background: red;
}
table.qq td.pic {
background: url("web.jpg");
}
Цвет фона
Рисунок
47 слайд
Отступы (CSS)
border-spacing
border-spacing
padding
padding
<table id="qq">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>
table#qq {
background: blue;
border-collapse: separate;
border-spacing: 10px;
padding: 10px;
}
#qq tr {
background: white;
}
48 слайд
Таблицы
<td colspan="number"> - определяет количество столбцов, которое ячейка данных должна охватывать.
<td rowspan="number"> - определяет количество строк, которое ячейка данных должна охватывать.
49 слайд
Таблицы
50 слайд
Таблицы
51 слайд
Блоки (DIV) – любое содержимое
<div style="background: #CCA69E;">Блок 1</div>
<div style="background: #FF9282;"> Блок 2</div>
<div style="background: #8ED9B6;"> Блок 3</div>
<div style="background: #CCA69E; width: 200px;">Блок 1</div>
<div style="background: #FF9282; width: 150px;"> Блок 2</div>
<div style="background: #8ED9B6; width: 100px;"> Блок 3</div>
52 слайд
Блоки (DIV) – любое содержимое
<div style="background: #CCA69E; float: left; width: 200px;">Блок 1</div>
<div style="background: #FF9282; float: left; width: 150px;"> Блок 2</div>
<div style="background: #8ED9B6; float: left; width: 100px;"> Блок 3</div>
53 слайд
Спасибо за внимание!
Рабочие листы
к вашим урокам
Скачать
6 660 026 материалов в базе
Настоящий материал опубликован пользователем Федотова Ксения Андреевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
600 ч.
Мини-курс
4 ч.
Мини-курс
3 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.