Что такое веб-страница? Создание веб-сайтов. 11 класс презентация

Содержание

Слайд 2

Как создать веб-страницу? Любой текстовый редактор (Блокнот и т.п.) 2×ЛКМ

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

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

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)

Слайд 3

Первая веб-страница Тэг – команда языка HTML открывающий тэг закрывающий

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



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

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

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



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



Привет!



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


Привет!

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

Слайд 4

Заголовки заголовок документа заголовок раздела – заголовок документа – заголовок

Заголовки

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

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

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

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

– заголовок

подраздела

– заголовок параграфа

Глава 1. Информация


1.1 Что такое информация?


Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена...
Слайд 5

Выравнивание заголовков Глава 1. Информация left, center, right атрибут (свойство)

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

Глава 1. Информация


left,
center,
right

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

Слайд 6

Абзацы (параграфы) И вечный бой! Покой нам только снится Сквозь

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

И вечный бой! Покой нам только снится


Сквозь кровь и пыль...


Летит,

летит степная кобылица


И мнёт ковыль...


paragraph – абзац

интервал

Слайд 7

Выравнивание абзацев Молекула воды испарилась из кипящего чайника и, подлетая

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


Молекула воды испарилась из кипящего чайника и, подлетая к

потолку, лоб в лоб столкнулась с неизвестно как
прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?


left, center, right, justify

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

Слайд 8

Переход на новую строку И вечный бой! Покой нам только

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

И вечный бой! Покой нам только снится
Сквозь кровь

и пыль...
Летит, летит степная кобылица
И мнёт ковыль...

break – разрыв

Слайд 9

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

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

Слайд 10

Применение специальных символов Дом сдали в 2011 году. А.С. Пушкин Пёс весил

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

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

А.С. Пушкин

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

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

год

инициалы

единицы

измерения

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

не отрывать:

Слайд 11

Применение специальных символов Вышел А.С. Пушкин — солнце русской поэзии. Длинное тире

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

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

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

Вышел А.С.

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

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

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

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

Слайд 12

Маркированные списки Вася Петя Коля unordered list (неупорядоченный список) list

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


  • Вася

  • Петя

  • Коля


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

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

изменение

маркера:


    ...

disk ∙
circle ○
square ■

Слайд 13

Нумерованные списки Вася Петя Коля ordered list (упорядоченный список) изменение

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


  1. Вася

  2. Петя

  3. Коля


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

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


    ...

1, i,

I, a, A
Слайд 14

Многоуровневые списки Россия Украина Москва Санкт-Петербург Киев Одесса

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


  1. Россия

  2. Украина



  • Москва

  • Санкт-Петербург



  • Киев

  • Одесса


Слайд 15

Гиперссылки (локальные) Переход на новую страницу . anchor (якорь) hyper

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

Переход на
новую страницу.

anchor
(якорь)

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

страница

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

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

Информация.

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

Информация.

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

Информация.

Слайд 16

Гиперссылки (внешние) Информация . на URL: на главную страницу сайта:

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


Информация.

на URL:

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

Информация.

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


Скачать.

для

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

Напишите мне!

Слайд 17

оформление Содержание и оформление содержание (контент) Веб-страница: содержание оформление Сборник

оформление

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

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

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

содержание

оформление

Сборник задач по физике


Григорий Остер


Задача 61

Петя ехал

к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления.

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

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

Слайд 18

Логическая разметка (HTML) Выделение (emphasize): Вася Сильное выделение (strong): Вася

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

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

Вася

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

Вася

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

a:=b+c;

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

Информация — это...

Цитата

(citation):

Карету мне, карету!

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

НИИЧАВО

Слайд 19

Тэги физической разметки HTML Курсив (italic): Вася Вася Жирный (bold):

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

Курсив (italic):

Вася

Вася

Жирный (bold):

Вася

Вася

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

Вася

Вася

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

Вася

Вася

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

Вася2

Вася2

Нижний индекс

(subscript):

Вася2

Вася2

Слайд 20

Стилевые файлы содержание оформление Рекурсия У попа была собака, он

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

содержание

оформление

Рекурсия


У попа была собака, он её любил,
Она съела кусок мяса,

он её убил,
В землю закопал,
Надпись написал:
У попа была собака, он её любил,
...

main.css

mob.css

printer.css

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

Слайд 21

Стилевые файлы body { color: white; background: #FF6600; } название

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

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

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

свойство

селектор

color – цвет

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

test.css

значение

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

Слайд 22

Подключение стилевого файла Страница с файлом стилей Привет, Вася! qq.html

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



Страница с файлом стилей



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


qq.html

test.css

body {
color:

white;
background: #0000E0;
}

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

Слайд 23

Наследование стилей Привет, Вася! Петя, тебе тоже привет! body {

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


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

Петя, тебе тоже привет!



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

наследуется

не

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

Стили для элементов: шрифты p { font-family: Arial,sans-serif; font-size: 20px;

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

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

font-weight: bold;
}

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

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

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

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

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

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

Слайд 25

Стили: размеры, выравнивание p { background: #E6E6FF; width: 80%; height:

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

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

80%

20px

цвет фона

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

Слайд 26

Рамка, поля, отступы p { background: #ccffcc; border: 1px solid

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

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

Слайд 27

Рамка, поля и отступы Lorem ipsum dolor sit amet, consectetur

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

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

Слайд 28

Стили гиперссылок a { color: green; text-decoration: none; } Все

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

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

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

a:visited {

color: #0000AA; }

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

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

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

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

псевдокласс

псевдокласс

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

Слайд 29

Классы Ошибка! Что-то с памятью. p.error { background:red; } для

Классы

Ошибка!
Что-то с памятью.


p.error {
background:red;
}

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

p {

background:blue;
color:white;
}

каскад!

Слайд 30

Классы .error { background:red; color:white; } для всех элементов класса

Классы

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

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

Ошибка!
Что-то с

памятью.


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

Слайд 31

Фоновый рисунок p.hallo { background: white url(images/grad.jpg); } Привет, Вася! p.hallo { background: url(grad.jpg) repeat-y; }

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

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


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


p.hallo {
background: url(grad.jpg)

repeat-y;
}
Слайд 32

Фоновый рисунок без повторения p.email { background: url(letter.gif) no-repeat; padding-left: 20px; } qq@mail.ru qq@mail.ru qq@mail.ru

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

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

href="mailto:qq@mail.ru">qq@mail.ru


qq@mail.ru

qq@mail.ru

Слайд 33

Сложные селекторы p.email a { color: green; text-decoration:none; } p.email

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

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

Слайд 34

Рисунки в документе из той же папки: из другой папки:

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





из

той же папки:

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

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

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

source (источник)

Слайд 35

Выравнивание left right top bottom (по умолчанию) middle

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


left

right

top

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

middle

Слайд 36

Отступы vspace (vertical space) hspace (horizontal space)

Отступы



vspace
(vertical space)

hspace
(horizontal space)

Слайд 37

Другие атрибуты title="Ночь на Ладоге" width="800" height="600"> надпись на месте

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

Фото: Ладога title="Ночь на Ладоге" width="800"
height="600">

надпись

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

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

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

Слайд 38

Рисунок-гиперссылка alt="Бесплатная почта" border="0"> локальная ссылка: ссылка на другой сервер:

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


alt="Бесплатная почта" border="0">




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

ссылка

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

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

если не вплотную к , будет «хвост»

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

Слайд 39

Фоновый рисунок body { background: url(grad.jpg); } body { background:

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

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

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

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

если рисунка

нет…
Слайд 40

Фоновый рисунок body{ background: url(grad.jpg) no-repeat; } body{ background: url(grad.jpg)

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

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

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

если рисунок

меньше, он повторяется

не повторять

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

Слайд 41

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

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

Слайд 42

Вставка мультимедийных файлов autostart="false"> имя файла автозапуск Звуковой файл: Флэш-анимация: width="275" height="200"> имя файла размеры

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

autostart="false">

имя файла

автозапуск

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

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

width="275" height="200">

имя

файла

размеры

Слайд 43

Вставка мультимедийных файлов width="425" height="350"> адрес ролика Видео: размеры

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

width="425" height="350">

адрес ролика

Видео:

размеры

Слайд 44

HTML5 – тэг audio src="nature.ogg" autostart="false" controls="controls" width="425" height="350"> имя файла показывать элементы управления размеры

HTML5 – тэг audio


имя

файла

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

размеры

Слайд 45

HTML5 – тэг video controls="controls" autostart="false" width="425" height="350"> Ваш браузер

HTML5 – тэг video

height="350">
Ваш браузер не поддерживает элемент video.



Слайд 46

Простые таблицы . . . толщина рамки Вася Петров table

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


. . .

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






Вася Петров

table row
(строка)

table

data
(ячейка с данными)
Слайд 47

Заголовки таблиц месяц январь февраль март table header (заголовок) жирный, по центру

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














месяц
январь
февраль
март

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

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

Слайд 48

Объединение ячеек – столбцы месяц январь февраль март column span (охват столбцов)

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










месяц
январь февраль март

column span (охват

столбцов)
Слайд 49

Объединение ячеек – строки Привет, Вася! Петя! Коля! row span (охват строк)

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












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

row span (охват

строк)
Слайд 50

Табличная вёрстка Самая большая страна Западной Европы. Франция Париж скрытая таблица!

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







Самая большая страна
Западной Европы.






Франция Париж

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

Слайд 51

Вложенные таблицы Вася Петя Маша Даша 1 22 333 4444

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










ВасяПетя
МашаДаша




122
3334444

Слайд 52

Размеры ... ширина в пикселях или в % от ширины

Размеры


...

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

браузера

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


...

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

строки:

ячейки:


...

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

Слайд 53

Размеры (через CSS) table.spec { width: 60%; height: 300; }

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

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

table.spec tr {
height:

50px;
}

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

строки:

ячейки:

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


...

Слайд 54

Выравнивание valign="top"> по центру, по верхней границе width="200">по правой границе,

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


valign="top">



по центру,
по верхней
границе
 width="200">по правой границе,
по середине


...

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

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

left,
center,
right

left,
center,
right

top,
middle,
bottom

Слайд 55

Выравнивание (через CSS) По центру, по верхней границе По правой

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






По центру,
по верхней
границе
 По правой
границе, по середине

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

Слайд 56

Фон и цвет текста (через CSS) Привет! Таблица из двух

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




class="r">





Привет!

Таблица
из двух строк		 и двух столбцов

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

цвет фона

рисунок

Слайд 57

Отступы bgcolor = blue> 1 2 интервал между ячейками отступ внутри ячеек cellspacing cellspacing cellpadding cellpadding

Отступы

bgcolor = blue>
bgcolor = white>



1 2

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

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

cellspacing

cellspacing

cellpadding

cellpadding

Слайд 58

Отступы (через CSS) 1 2 border-spacing border-spacing padding padding table#qq

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






1 2

border-spacing

border-spacing

padding

padding

table#qq {

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

кроме IE 6

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

Слайд 59

Что такое блок (div)? ... ... свойства блока:

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


...




...

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

Слайд 60

Рамка, поля и отступы Lorem ipsum dolor sit amet, consectetur

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

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

Слайд 61

Стили для блоков Ответ: 45. идентификатор (уникальный!) .info { margin:

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


Ответ: 45.

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

.info {
margin: 5px 5px

10px 20px;
padding: 3px;
}
#result {
background: #CCCCFF;
border: 1px solid blue;
}
Слайд 62

«Плавающий» блок width="100" height="66"> На природе .picture { float:left; margin:

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


width="100"
height="66">

На природе



.picture

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

Как разместить сайт? На своём компьютере: постоянно включенный компьютер стабильный

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

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

и настройка веб-сервера
защита сайта от взломщиков, вредоносных программ и сетевых атак – самостоятельно
Слайд 64

Что такое хостинг? Хостинг — услуга по размещению сайта (данных)

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

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

работающем сервере.

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

≈100 Мбайт

Бесплатные хостинги
ucoz.ru
webservis.ru
www.hostinger.ru
www.holm.ru
www.hut.ru
wallst.ru

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

Слайд 65

Типы хостинга Виртуальный хостинг Виртуальный частный сервер Выделенный сервер до

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

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

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

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

до 1000 сайтов

garage.ru
toy.com
vobla.net
…

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

хостера

garage.ru
toy.com
vobla.net

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

vobla.net

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

Слайд 66

Доменные имена IP-адреса: 94.100.101.202 Доменные имена: www.mail.ru nic.ru (RU-CENTER) Бесплатно (3-й уровень): vasya.ucoz.ru DNS-сервер

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

IP-адреса: 94.100.101.202

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

nic.ru
(RU-CENTER)

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

DNS-сервер

Имя файла: Что-такое-веб-страница?-Создание-веб-сайтов.-11-класс.pptx
Количество просмотров: 26
Количество скачиваний: 0
- Предыдущая
Памятники литературным героям
Следующая -
A world of food

Похожие презентации

Желілерді қолдану артықшылықтары
Presentation template
Проектирование в KOMANDOR Designer
Дистанционное управление домом
Программирование на Python. Создание Telegram-бота. Часть 1. 23 занятие
Табличные информационные модели
Построение шрифта
Задача о пути торможения автомобиля
Разработка урока по информатике и ИКТ для 5 класса по теме Кодирование информации. Текст как форма представления информации.
Разветвляющийся алгоритм
Модели и моделирование. Создание компьютерной модели Биоритмы человека
AVG антивирус
Пользовательский интерфейс
Методы оптимизации в компьютерных и информационных технологиях (домашнее задание)
Концепция Grid (СУДБ) Oracle
Алгоритми сортування
Создание и форматирование таблиц в Microsoft Word
Логические основы компьютера
Alan Mathison Turing (1912-1954)
Штучний інтелект - допоможе людству чи знищить його?
Разработка аппаратно-программного комплекса E-Picture Poi. Световые шоу
Работа в EXCEL.
Робота з запитами на вибірку
Стек протоколов Tcp-ip. Тема № 2
ADO.Net Connected model
Введение в САПР. Принципы построения САПР
Теория графов в информатике
Возможности и особенности работы ОС Windows 8
Обратная связь
Email: Нажмите что бы посмотреть