Презентация "Создание веб-сайтов"

Скачать материал

Подписи к слайдам:

Создание веб-сайтов

Веб-сайты и веб-страницы

<number>

Основные определения

<number>

Гипертекст (англ. hypertext) – это текст, содержащий гиперссылки.
Гиперссылка (англ. hyper reference) – это «активная» ссылка на другой объект (часть того же документа, другой документ, файл, каталог, программу и т.д.).
Веб-страница – это гипертекстовый документ в Интернете.
Веб-сайт – группа веб-страниц, которые объединены общей темой и оформлением, связаны гиперссылками.
Веб-сервер – это программа, которая принимает запросы по протоколу HTTP и отвечает на них – возвращает веб-страницы и дополнительные данные (рисунки, звуковые файлы, видеофайлы).
Браузер – это программа для просмотра веб-страниц на экране монитора.

Что такое веб-страница?

<number>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis scelerisque metus, non hendrerit neque convallis placerat. Phasellus consequat convallis nisl, a volutpat quam posuere sed. Maecenas laoreet congue nibh, et euismod lectus varius sit amet. In tristique mattis leo, eget commodo ante egestas eget. Sed id purus quis ligula scelerisque fringilla. Suspendisse scelerisque, sapien id scelerisque imperdiet, tellus odio consequat nunc, eu fermentum diam lacus non urna. Praesent faucibus massa in risus sagittis a luctus justo aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent metus dolor, semper ut fermentum vel, imperdiet in risus. Nam a lectus lorem, dictum semper nulla. In eget ipsum non arcu aliquet lacinia. Morbi iaculis sodales metus, vel posuere orci vulputate vel. Nulla non felis sem, sagittis porttitor mi. Curabitur in tortor in nisi egestas cursus quis at sapien. Proin pulvinar, odio id lacinia suscipit, sem justo aliquam risus, nec suscipit enim felis at justo. Donec at nulla orci, suscipit auctor arcu. Donec nec tortor quis justo scelerisque cursus id et magna.

index.html

sunset.jpg

tree.jpg

images

media

laugh.wav

movie.flv

запрос на каждый файл!

HTML = Hypertext Markup Language (язык разметки гипертекста)

HTML – это не язык программирования!

Какие бывают веб-страницы?

<number>

статические – готовые файлы *.htm, *.html
динамические – полностью или частично создаются на сервере в момент запроса *.php, *.asp, *.pl, *.cgi, *.shtml …

быстро загружаются
почти не нагружают сервер

невозможна работа с базами данных (в т.ч. гостевые книги, комментарии, Веб 2.0)

работа с базами данных

загружаются медленнее
дополнительная нагрузка на сервер

Системы управления сайтами

<number>

CMS = Content Management System, система управления содержимым сайта.

Функции:
создание разделов сайта
создание страниц
база данных пользователей
управление доступом
обеспечение навигации и поиска

Не нужно знать HTML!

1c-bitrix.ru

Joomla!
joomla.org

Drupal
drupal.org

ucoz.ru

wordpress.org

бесплатно!

Интерактивные страницы

<number>

DHTML = Dynamic HTML, динамический HTML.

Скрипт или сценарий (англ. script) – это программный код для автоматизации действий пользователя.

Javascript

замена текста, оформления, рисунков
многоуровневые выпадающие меню
скрытие и показ частей страницы
проверка данных, введенные пользователем
выполнение вычислений
игры…

Создание веб-сайтов

Текстовые веб-страницы

<number>

Как создать веб-страницу?

<number>

Любой текстовый редактор (Блокнот и т.п.)

2×ЛКМ

Текстовые редакторы с подсветкой HTML-тэгов:
Sublime Text (sublimetext.com)
NotePad++ (notepad-plus-plus.org)
Bluefish (bluefish.openoffice.nl)
HEFS (kpolyakov.spb.ru/prog/hefs.htm)

Редакторы WYSIWYG = What You See Is What You Get
TinyMCE (www.tinymce.com)
Kompozer (kompozer.net)
CKEditor (ckeditor.com)
openWYSIWYG (www.openwebware.com)
BlueGriffon (bluegriffon.org)

бесплатно!

бесплатно!

Первая веб-страница

<number>

<html>
</html>

Тэг – команда языка HTML

открывающий тэг

закрывающий тэг

<html>
<head>
<title>Первая страница</title>
</head>
<body>
Привет!
</body>
</html>

<head>
<title>Первая страница</title>
</head>

<body>
Привет!
</body>

контейнер (парный тэг)

Заголовки

<number>

заголовок документа

заголовок раздела

<h1> – заголовок документа
<h2> – заголовок раздела
<h3> – заголовок подраздела
<h4> – заголовок параграфа

<h1>Глава 1. Информация</h1>
<h2>1.1 Что такое информация?</h2>
Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена...

Выравнивание заголовков

<number>

<h1 align="center">Глава 1. Информация</h1>

left,
center,
right

атрибут (свойство)

Абзацы (параграфы)

<number>

И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит степная кобылица
И мнёт ковыль...

Браузер «проглатывает» переходы на новую строку!

Абзацы (параграфы)

<number>

<p>И вечный бой! Покой нам только снится</p>
<p>Сквозь кровь и пыль...</p>
<p>Летит, летит степная кобылица </p>
<p>И мнёт ковыль...</p>

paragraph – абзац

интервал

Выравнивание абзацев

<number>

<p align="justify">
Молекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как
прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?
</p>

left, center, right, justify

Что плохо?

Решение:
align="left"

Переход на новую строку

<number>

И вечный бой! Покой нам только снится
<br>Сквозь кровь и пыль...
<br>Летит, летит степная кобылица
<br>И мнёт ковыль...

break – разрыв

Специальные символы (HTML entities)

<number>

Символ	HTML-код	Название
		неразрывный пробел
–	–	короткое тире
—	—	(длинное) тире
§	§	параграф
«	«	левая русская кавычка
»	»	правая русская кавычка
<	<	левая угловая скобка
>	>	правая угловая скобка
©	©	символ авторского права
®	®	зарегистрированная торговая марка
°	°	градус
²	²	квадрат
³	³	куб
×	×	знак умножения
÷	÷	знак деления

Применение специальных символов

<number>

Дом сдали в 2011 году.

А.С. Пушкин

Пёс весил 12 кг.

Неразрывный пробел ( )

год

инициалы

единицы измерения

Из дома вышел А.С. Пушкин – солнце
русской поэзии.

не отрывать:

Применение специальных символов

<number>

Вышел А.С. Пушкин — солнце русской поэзии.

Длинное тире (—)

Вышел А.С. Пушкин – солнце русской поэзии.

не начинать строку с тире!

Короткое тире (–)

Дорога Васюки–Васютино строилась
в 2007–2013 годах.

Что плохо?

Применение специальных символов

<number>

Угловые скобки (< >)

<p>Верно ли, что X < Y?</p>

В чём проблема?

X < Y

это начало тэга?

Маркированные списки

<number>

<ul>
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ul>

unordered list (неупорядоченный список)

list item (элемент списка)

изменение маркера:

<ul type="disk">
...
</ul>

disk 
circle ○
square ■

Нумерованные списки

<number>

<ol>
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ol>

ordered list (упорядоченный список)

изменение нумерации:

<ol type="i" start="4">
...
</ol>

1, i, I, a, A

Многоуровневые списки

<number>

<ol>
<li>Россия
</li>
<li>Украина
</li>
</ol>

<ul>
<li>Москва</li>
<li>Санкт-Петербург</li>
</ul>

<ul>
<li>Киев</li>
<li>Одесса</li>
</ul>

Гиперссылки (локальные)

<number>

Переход на
<a href="newpage.html">новую страницу</a>.

anchor
(якорь)

hyper reference (гиперссылка)

страница в том же каталоге:

во вложенном каталоге:

<a href="news/info.htm">Информация</a>.

в родительском каталоге:

<a href="../info.htm">Информация</a>.

в соседнем каталоге:

<a href="../news/info.htm">Информация</a>.

Гиперссылки (внешние)

<number>

<a href="http://example.net/news/info.htm">
Информация</a>.

на URL:

на главную страницу сайта:

<a href="http://example.net">Информация</a>.

для скачивания архива:

<a href="http://example.net/game.zip">
Скачать</a>.

для запуска почтовой программы:

<a href="mailto:[email protected]"> Напишите мне!</a>

Как записать гиперссылки от show.htm?

<number>

main

index.htm

goods.htm

goods

food

food.htm

show

show.htm

history

hist.htm

before

before.htm

Метки внутри документов

<number>

Там в лесу живет
<a href="#bear">медведь</a>.
...
...
...
<a name="bear"></a>
<h2>Медведь</h2>
Медведь — хищное млекопитающее семейства медвежьих.

<a href="animals.htm#bear">медведь</a>

на метку в другом файле:

<a href="http://qq.net/a.htm#bear">медведь</a>

Куда переход?

<number>

<a href="example.html">...</a>
<a href="../example.html">...</a>
<a href="../../../example.html">...</a>
<a href="../new/old/example.html">...</a>
<a href="example.html#resume">...</a>
<a href="download/example.zip">...</a>
<a href="mailto:[email protected]">...</a>

Создание веб-сайтов

§ 26. Оформление документов

<number>

оформление

Содержание и оформление

<number>

содержание (контент)

Веб-страница:

содержание

оформление

<h1>Сборник задач по физике</h1>
<p class="author">Григорий Остер</p>
<h2>Задача 61</h2> Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления.

логическая разметка
(*.html)

физическая разметка
(*.css)

Логическая разметка (HTML)

<number>

Выделение (emphasize):

<em>Вася</em>

Сильное выделение (strong):

<strong>Вася</strong>

Программный код (code):

<code>a:=b+c;</code>

Определение (definition):

<dfn>Информация</dfn> — это...

Цитата (citation):

<cite>Карету мне, карету!</cite>

Сокращение (abbreviation):

<abbr>НИИЧАВО</abbr>

Оформление текстов программ

<number>

<pre>
iMin := 1;
for i:=2 to n do
if a[i] < a[iMin] then
iMin := i;
</pre>

iMin := 1;
for i:=2 to n do
if a[i] < a[iMin] then
iMin := i;

preformatted (уже отформатированный)

Тэги физической разметки HTML

<number>

Курсив (italic):

<i>Вася</i>

Вася

Жирный (bold):

<b>Вася</b>

Вася

Подчёркивание (underline):

<u>Вася</u>

Вася

Зачёркивание (strikeout):

<s>Вася</s>

Верхний индекс (superscript):

Вася<sup>2</sup>

Вася2

Нижний индекс (subscript):

Вася<sub>2</sub>

Вася2

Стилевые файлы

<number>

содержание

оформление

<h1>Рекурсия</h1>
У попа была собака, он её любил,
Она съела кусок мяса, он её убил,
В землю закопал,
Надпись написал:
У попа была собака, он её любил,
...

main.css

mob.css

printer.css

CSS (Cascading Style Sheets) – каскадные таблицы стилей.

Стилевые файлы

<number>

body {
color: white;
background: #FF6600;
}

название тэга

свойство

селектор

color – цвет символов
background – цвет фона

test.css

значение

R = FF16 = 255
G = 6616 = 102
B = 0

Подключение стилевого файла

<number>

<html>
<head>
<title>Страница с файлом стилей</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
Привет, Вася!
</body>
</html>

qq.html

test.css

body {
color: white;
background: #0000E0;
}

таблица стилей

Наследование стилей

<number>

<body>
Привет, Вася!
<p>Петя, тебе тоже привет!</p>
</body>

body {
color: white;
background: #0000E0;
}

наследуется

не наследуется
(прозрачный фон)

Стили для элементов: шрифты

<number>

p {
font-family: Arial,sans-serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
}

для всех абзацев

семейство шрифтов

serif – с засечками
sans-serif – без засечек
monospace – моноширинный

размер в пикселях

normal – обычный
italic - курсив

normal – обычный
bold - жирный

Стили: размеры, выравнивание

<number>

p {
background: #E6E6FF;
width: 80%;
height: 100px;
text-align: left;
text-indent: 20px;
}

ширина

высота

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.

выравнивание:
left
center
right
justify

100px

20px

цвет фона

абзацный отступ

Рамка, поля, отступы

<number>

p {
background: #ccffcc;
border: 1px solid green;
margin: 0 40px 20px 40px;
padding: 5px;
}

рамка

отступы снаружи

отступы внутри

сверху, справа, снизу, слева

со всех сторон

толщина

solid – сплошная
dashed - штриховая
dotted – точечная

цвет

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

20px

Рамка, поля и отступы

<number>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus.

margin-right

margin-bottom

margin-left

margin-top

padding-right

padding-left

padding-top

padding-bottom

border-right

border-left

border-top

border-bottom

Стили гиперссылок

<number>

a {
color: green;
text-decoration: none;
}

Все гиперссылки:

a:visited { color: #0000AA; }

Посещённые гиперссылки:

a:hover {
color: red;
text-decoration: underline;
}

Гиперссылки при наведении мыши:

убрать подчёркивание

псевдокласс

псевдокласс

подчёркивание

Классы

<number>

<p class="error">Ошибка!
Что-то с памятью.
</p>

p.error {
background:red;
}

для абзацев класса error

p {
background:blue;
color:white;
}

каскад!

Более конкретное указание отменяет более общее!

Классы

<number>

.error {
background:red;
color:white;
}

для всех элементов класса error

<p>
<span class="error">Ошибка!</span>
Что-то с памятью.
</p>

элемент в тексте

Фоновый рисунок

<number>

p.hallo {
background: white url(images/grad.jpg);
}

<p class="hallo">
Привет, Вася!
</p>

Привет, Вася!

p.hallo {
background: url(grad.jpg) repeat-y;
}

Привет, Вася!

Фоновый рисунок без повторения

<number>

p.email {
background: url(letter.gif) no-repeat;
padding-left: 20px;
}

<p class="email">
<a href="mailto:[email protected]">[email protected]</a>
</p>

[email protected]

[email protected]

20px

Составные селекторы

<number>

code, pre {
font-weight: bold;
font-family: Courier New, monospace;
}

Общие свойства для нескольких тэгов:

em a {
font-style: normal;
}

Вложенные элементы:

a внутри em

Сложные селекторы

<number>

p.email a {
color: green;
text-decoration:none;
}

p.email a:hover {
color: #00F;
text-decoration:underline;
}

p.email a:visited {
color: #F0F;
}

ссылки внутри абзаца класса email

убрать подчеркивание

посещённые ссылки

подчеркнуть

мышь над ссылкой

то же, что #FF00FF

Создание веб-сайтов

§ 27. Рисунки

<number>

Форматы рисунков

<number>

GIF (Graphic Interchange Format)

сжатие без потерь (LZW)
прозрачные области
анимация
только с палитрой (2…256 цветов)

рисунки с четкими границами, мелкие рисунки

JPEG (Joint Photographer Expert Group)

сжатие с потерями
только True Color (16,7 млн. цветов)
нет анимации и прозрачности

рисунки с размытыми границами, фото

PNG (Portable Network Graphic)

сжатие без потерь
с палитрой (PNG-8) и True Color (PNG-24)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки

Форматы рисунков

<number>

SVG (Scalable Vector Graphics, масштабируемые векторные изображения)

<svg>
<rect width="135" height="30"
x="0" y="10"
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(255,255,255)"/>
<rect width="135" height="30" x="0" y="40"
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(0,0,255)"/>
<rect width="135" height="30" x="0" y="70"
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(255,0,0)"/>
</svg>

Рисунки в документе

<number>

<img src="night.jpg">

<img src="images/night.jpg">

<img src="../../images/night.jpg">

<img src="http://example.com/img/night.jpg">

из той же папки:

из другой папки:

с другого сервера:

image (изображение)

source (источник)

Выравнивание

<number>

<img src="flag.jpg" align="left">

left

right

bottom
(по умолчанию)

middle

Отступы

<number>

<img src="net.jpg" align="left">

<img src="net.jpg" align="left" hspace="10" vspace="10">

vspace
(vertical space)

hspace
(horizontal space)

Другие атрибуты

<number>

<img src="night.jpg" alt="Фото: Ладога"
title="Ночь на Ладоге" width="800"
height="600">

надпись на месте рисунка, если его нет

размеры позволяют:
растянуть – сжать
не портить дизайн, если рисунка нет

всплывающая подсказка

Рисунок-гиперссылка

<number>

<a href="http://www.mail.ru">
<img src="mailru.jpg"
alt="Бесплатная почта" border="0"></a>

<a href="gallery.htm">
<img src="night.jpg" border="0">
</a>

локальная ссылка:

ссылка на другой сервер:

иначе будет синяя рамка вокруг

если </a> не вплотную к <img …>, будет «хвост»

не будет «хвоста»

Вставка векторных рисунков

<number>

<object type="image/svg+xml"
data="test.svg"
width="48" height="48"
align="left">
</object>

тип нестандартных данных

имя файла

размеры

выравнивание

Фоновый рисунок

<number>

body {
background: url(grad.jpg);
}

body {
background: url(grad.jpg) #EEE;
}

'images/grad.jpg'
'../images/grad.jpg‘
'http://www.vasya.ru/images/grad.jpg'

если рисунка нет…

Фоновый рисунок

<number>

body{ background: url(grad.jpg) no-repeat; }

body{ background: url(grad.jpg) repeat-y; }

если рисунок меньше, он повторяется

не повторять

повторять по вертикали

Фоновый рисунок

<number>

Не должно быть «швов»!

Фон не должен мешать чтению!

Создание веб-сайтов

§ 28. Мультимедиа

<number>

Вставка мультимедийных файлов

<number>

<embed src="myaw.wav"
autostart="false"></embed>

имя файла

автозапуск

Звуковой файл:

Флэш-анимация:

<embed src="cube.swf"
width="275" height="200">
</embed>

имя файла

размеры

Вставка мультимедийных файлов

<number>

<embed src="http://www.youtube.com/v/YvLNA5OW6xZ"
width="425" height="350">
</embed>

адрес ролика

Видео:

размеры

HTML5 – тэг audio

<number>

<audio
src="nature.ogg"
autostart="false"
controls="controls"
width="425"
height="350">
</audio>

имя файла

показывать элементы управления

размеры

HTML5 – тэг video

<number>

<video src="sail.ogv"
controls="controls"
autostart="false"
width="425" height="350">
Ваш браузер не поддерживает элемент video.
</video>

<video width="425" height="350"
controls="controls">
<source src="start.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

<video width="425" height="350"
controls="controls">
<source src="finish.webm"
type='video/webm; codecs="vp8, vorbis"'>
</video>

Создание веб-сайтов

§ 29. Таблицы

<number>

Простые таблицы

<number>

<table border="1">
. . .
</table>

толщина рамки

<table border="1">
<tr>
<td>Вася</td>
<td>Петров</td>
</tr>
</table>

table row
(строка)

table data
(ячейка с данными)

Заголовки таблиц

<number>

<table border="1">
<tr>
<th>месяц</th>
</tr>
<tr>
<td>январь</td>
</tr>
<tr>
<td>февраль</td>
</tr>
<tr>
<td>март</td>
</tr>
</table>

table header
(заголовок)

жирный, по центру

Объединение ячеек – столбцы

<number>

<table border="1">
<tr>
<th colspan="3">месяц</th>
</tr>
<tr>
<td>январь</td>
<td>февраль</td>
<td>март</td>
</tr>
</table>

column span (охват столбцов)

Объединение ячеек – строки

<number>

<table border="1">
<tr>
<th rowspan="3">Привет,</th>
<td>Вася!</td>
</tr>
<tr>
<td>Петя!</td>
</tr>
<tr>
<td>Коля!</td>
</tr>
</table>

row span (охват строк)

Табличная вёрстка

<number>

<table>
<tr>
<td>
</td>
<td>Самая большая страна
Западной Европы.</td>
</tr>
</table>

<table border="1">
<tr>
<th>Франция</th>
<td>Париж</td>
</tr>
</table>

скрытая таблица!

Вложенные таблицы

<number>

<table border="0" cellspacing=10>
<tr><td>
</td>
<td>
</td></tr>
</table>

<table border="1">
<tr><td>Вася</td><td>Петя</td></tr>
<tr><td>Маша</td><td>Даша</td></tr>
</table>

<table border="1">
<tr><td>1</td><td>22</td></tr>
<tr><td>333</td><td>4444</td></tr>
</table>

Размеры

<number>

<table width="60%" height="300">
...
</table>

ширина в пикселях или в % от ширины окна браузера

высота в пикселях

<tr height="50">
...
</tr>

всей таблицы:

строки:

ячейки:

<td width="25%" height="50">
...
</td>

ширина в пикселях или в % от ширины таблицы

Размеры (через CSS)

<number>

table.spec {
width: 60%;
height: 300;
}

table.spec tr {
height: 50px;
}

всей таблицы:

строки:

ячейки:

table.spec td.qq {
width: 25%;
height: 50px;
}

<table class="spec">
...
</table>

Выравнивание

<number>

<table border="1">
<tr align="center"
valign="top">
<td width="120">по центру,
по верхней границе</td>
<td align="right" valign="middle"
width="200">по правой границе,
по середине</td>
</tr>
</table>

<table align="center">
...
</table>

всей таблицы:

информации в ячейках:

left,
center,
right

left,
center,
right

top,
middle,
bottom

Выравнивание (через CSS)

<number>

<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

Фон и цвет текста (через CSS)

<number>

<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");
}

цвет фона

рисунок

Отступы

<number>

<table cellspacing = "10" cellpadding = "10"
bgcolor = blue>
<tr bgcolor = white>
<td width = "100">1</td>
<td width = "100">2</td>
</tr>
</table>

интервал между ячейками

отступ внутри ячеек

cellspacing

cellspacing

cellpadding

cellpadding

<number>

Отступы (через CSS)

<table id="qq">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>

border-spacing

border-spacing

padding

padding

table#qq {
background: blue;
border-collapse: separate;
border-spacing: 10px;
padding: 10px;
}
#qq tr {
background: white;
}

кроме IE 6

идентификатор – уникальное имя

Создание веб-сайтов

§ 30. Блоки

<number>

Что такое блок (div)?

<number>

<div>
...
</div>

<p>
<table>
<a>
<img>
...

свойства блока:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus.

padding

border

margin

Рамка, поля и отступы

<number>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus.

margin-right

margin-bottom

margin-left

margin-top

padding-right

padding-left

padding-top

padding-bottom

border-right

border-left

border-top

border-bottom

Стили для блоков

<number>

<div class="info" id="result">
Ответ: 45.
</div>

идентификатор (уникальный!)

.info {
margin: 5px 5px 10px 20px;
padding: 3px;
}
#result {
background: #CCCCFF;
border: 1px solid blue;
}

«Плавающий» блок

<number>

<div class="picture">
<img src="dog.jpg"
width="100"
height="66">
<p>На природе</p>
</div>

.picture { float:left; margin: 5px; }
.picture p {
margin: 0;
text-align: center;
font-family: sans-serif;
font-size: 80%;
font-weight: bold;
}

Создание веб-сайтов

§ 31. Динамический HTML

<number>

Что такое DHTML?

<number>

Динамический HTML (DHTML) – это технология создания интерактивных сайтов, использующая HTML, CSS, язык программирования (чаще всего JavaScript) и объектную модель документа (англ. DOM = Document Object Model).

<html>
<head>
<title>DOM</title>
</head>
<body>
<p>Привет,
<em>Вася!</em></p>
</body>
</html>

document

html

head

title

DOM

body

Привет,

Вася!

«Живой» рисунок

<number>

box_closed.gif

box_opened.gif

<img src="box_closed.gif"
onMouseOver="this.src='box_opened.gif'"
onMouseOut="this.src='box_closed.gif'">

this.src='box_opened.gif'

свойство src этого объекта

вложенные кавычки

обработчик события (Javascript)

Скрытый блок

<number>

ЛКМ

<div id="details" class="hidden">
Детали  это гайка, шайба, болт, винт, шуруп, гвоздь и др.
</div>

.hidden {
display:none;
}

не показывать

Зачем нужен id?

block – во всю ширину
inline – в тексте

Javascript-файл

<number>

Файл test.js

function show ( name )
{
var elem = document.getElementById(name);
if ( elem )
elem.style.display = "block";
}

найти элемент по id

функция

имя функции

переменная

если нашли

изменить свойство display

block – во всю ширину
inline – в тексте
none – не показывать

Подключение Javascript-файла

<number>

<head>
<script src="test.js"></script>
...
</head>

имя файла

Вызов функции

<number>

<a href="#"
onClick="show('details');return false;">
Показать детали
</a>

ссылка на эту страницу

дальнейшая обработка (переход по ссылке) не нужна

по щелчку вызвать функцию

HTML-файл

<number>

<html>
<head>
<title>Скрытый блок</title>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<a href=# onClick="show('details'); return false;">
Показать детали</a>
</body>
</html>

<div id="details" class="hidden">
Детали  это гайка, шайба, болт, винт,
шуруп, гвоздь и др.
</div>

Как сделать два скрытых блока?

Формы

<number>

<form name="calc">
<input name="answer">
<input type="button"
value="Готово"
onClick="check();">
</form>

форма – набор элементов диалога

поле ввода

кнопка

текст на кнопке

что делать при щелчке

Формы

<number>

<form name="calc">
<input name="answer">
<input type="button"
value="Готово"
onClick="check();">
</form>

function check()
{
if ( calc.answer.value == "4" )
alert("Правильно!");
else alert("Неправильно!");
}

Обработка события «щелчок мышью»:

В файл
calc.js

введённый текст

Создание веб-сайтов

§ 32. XML и XHTML

<number>

В чём проблема?

<number>

Интеграция (объединение) информационных систем

обмен данными

В каком формате?

Двоичные файлы:

небольшой объём

множество форматов, приёмник должен суметь прочитать файл

В чём проблема?

<number>

Задачи:

универсальный формат
текстовая форма
понятен человеку при просмотре
только содержание (без оформления)
сохранение структуры (главы, разделы)
автоматическая обработка

HTML:

содержит тэги физической разметки
нельзя вводить новые тэги
нестрогий синтаксис (можно не закрывать <p>)

Что такое XML?

<number>

<?xml version="1.0"?>
<компьютер>
<процессор частота="2 ГГц">Intel Celeron
</процессор>
<память фирма="Kingston">2048 Мб</память>
<винчестер фирма="Seagate">320 Гб
</винчестер>
<периферия>
<монитор>Philips 190C1SB</монитор>
<клавиатура>Logitech Classic 200
</клавиатура>
<мышь>Genius Navigator 600</мышь>
</периферия>
</компьютер>

Что такое XML?

<number>

XML = eXtensible Markup Language
(расширяемый язык разметки)

тэги-контейнеры в угловых скобках
<тэг>... </тэг>
атрибуты тэгов (дополнительные данные)
<тэг атрибут="значение">... </тэг>
можно вводить новые тэги
нет никаких тэгов оформления, только данные
в контейнер могут быть вложены другие контейнеры иерархия – дерево!

Это иерархическая база данных!

документы Microsoft Office и OpenOffice.org:
набор XML-файлов  zip-архив
RSS (ленты новостей на сайтах и в блогах)
MathML (описание математических формул)
SVG (векторная графика на веб-страницах)
файлы настроек (конфигурации) программ
электронные книги .fb2
XAML – язык описания интерфейсов в Windows 8

Использование XML

<number>

XML: «за» и «против»

<number>

открытый текстовый формат
не зависит от ОС и ПО
строгие правила, стандарты  легко обрабатывать в программах
удобен для многоуровневых списков и иерархических БД

сложно описать структуры, отличающиеся от иерархии (графы)
не различаются типы данных (число, текст, дата, время, логическое значение)
большой объем файлов

XHTML

<number>

Задача: автоматическая обработка веб-страниц

HTML:

нестрогий синтаксис (можно не закрывать <p>)
не различаются заглавные и строчные буквы

XHTML = eXtensible Hypertext Markup Language
имена тегов и атрибутов – только строчные буквы
все тэги должны быть закрыты (например, <br />)
правильная вложенность тэгов
значения атрибутов в кавычках
замена служебных символов:
«<»  «<» «&»  «&»

HTML

XHTML

<p><strong>Вася</p></strong>

<img src="dog.jpg" alt="Пес Барбос" />

Создание веб-сайтов

§ 33. Размещение веб-сайтов

<number>

Как разместить сайт?

<number>

На своём компьютере:
постоянно включенный компьютер
стабильный скоростной канал связи
«белый» IP-адрес;
установка и настройка веб-сервера
защита сайта от взломщиков, вредоносных программ и сетевых атак – самостоятельно

Что такое хостинг?

<number>

Хостинг — услуга по размещению сайта (данных) на постоянно работающем сервере.

Тарифный план  стоимость
ограничение объема данных (файлов и почты)
ограничение трафика
ежедневно: 100 пользователей
10 страниц по 100 Кбайт
в месяц:  3 Гбайт
поддержка баз данных (да/нет/количество)
поддержка серверных скриптов (PHP)

100 Мбайт

оплата – реклама

Типы хостинга

<number>

Виртуальный хостинг

Виртуальный частный сервер

Выделенный сервер

до 1000 сайтов

garage.ru
toy.com
vobla.net
…

копирование файлов в каталог
ПО хостера

garage.ru
toy.com
vobla.net

виртуальная машина для каждого сайта
ПО хозяина сайта

vobla.net

отдельный компьютер для сайта
ПО хозяина сайта

Доменные имена

<number>

IP-адреса: 94.100.101.202

Доменные имена: www.mail.ru

Как зарегистрировать?

nic.ru
(RU-CENTER)

Бесплатно (3-й уровень): vasya.ucoz.ru

DNS-сервер

Загрузка файлов на сайт

<number>

создание страниц в конструкторе: *.ucoz.ru
FTP

локальный компьютер

каталог на сайте

пароль

логин

сайт

FileZilla (filezilla-project.org)

Источники иллюстраций

<number>

www.kkfreight.ru
www.revelation-of-silence.com
www.dejurka.ru
www.foru.ru
www.ibizsys.com
ru.wikipedia.org
иллюстрации художников издательства «Бином»
авторские материалы

Презентация "Создание веб-сайтов"

Подписи к слайдам:

Информатика - еще материалы к урокам:

Предметы

Похожие материалы