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

Содержание

Слайд 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

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

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



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


Привет!



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


Привет!

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

Слайд 4

Заголовки

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

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

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

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

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

–

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

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


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


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

Слайд 5

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

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


left,
center,
right

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

Слайд 6

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

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


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


Летит, летит степная

кобылица


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


paragraph – абзац

интервал

Слайд 7

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


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

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


left, center, right, justify

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

Слайд 8

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

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

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

break – разрыв

Слайд 9

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

Слайд 10

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

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

А.С. Пушкин

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

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

год

инициалы

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

Из дома

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

не отрывать:

Слайд 11

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

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

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

Вышел А.С. Пушкин –

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

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

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

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

Слайд 12

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


  • Вася

  • Петя

  • Коля


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

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

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


    ...

disk

∙
circle ○
square ■

Слайд 13

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


  1. Вася

  2. Петя

  3. Коля


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

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


    ...

1, i, I, a,

A

Слайд 14

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


  1. Россия

  2. Украина



  • Москва

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



  • Киев

  • Одесса


Слайд 15

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

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

anchor
(якорь)

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

страница в том

же каталоге:

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

Информация.

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

Информация.

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

Информация.

Слайд 16

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


Информация.

на URL:

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

Информация.

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


Скачать.

для запуска почтовой

программы:

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

Слайд 17

оформление

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

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

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

содержание

оформление

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


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


Задача 61

Петя ехал к бабушке

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

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

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

Слайд 18

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

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

Вася

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

Вася

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

a:=b+c;

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

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

Цитата (citation):

Карету мне,

карету!

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

НИИЧАВО

Слайд 19

Тэги физической разметки 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;
}

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

свойство

селектор

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

цвет фона

test.css

значение

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

Слайд 22

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



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



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


qq.html

test.css

body {
color: white;
background:

#0000E0;
}

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

Слайд 23

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


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

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



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

наследуется

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

Слайд 24

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

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: 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 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 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:visited { color: #0000AA;

}

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

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

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

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

псевдокласс

псевдокласс

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

Слайд 29

Классы

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


p.error {
background:red;
}

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

p {
background:blue;
color:white;
}

каскад!

Слайд 30

Классы

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

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

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


элемент в

тексте

Слайд 31

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

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

Слайд 33

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

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

Слайд 36

Отступы



vspace
(vertical space)

hspace
(horizontal space)

Слайд 37

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

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

надпись на месте

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

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

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

Слайд 38

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


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




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

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

сервер:

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

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

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

Слайд 39

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

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) repeat-y; }

если рисунок меньше, он

повторяется

не повторять

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

Слайд 41

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

Слайд 42

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

autostart="false">

имя файла

автозапуск

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

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

width="275" height="200">

имя файла

размеры

Слайд 43

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

width="425" height="350">

адрес ролика

Видео:

размеры

Слайд 44

HTML5 – тэг audio


имя файла

показывать элементы

управления

размеры

Слайд 45

HTML5 – тэг video

не поддерживает элемент video.



Слайд 46

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


. . .

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






Вася Петров

table row
(строка)

table data
(ячейка

с данными)

Слайд 47

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














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

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

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

Слайд 48

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










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

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

Слайд 49

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












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

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

Слайд 50

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







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






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

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

Слайд 51

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










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




122
3334444

Слайд 52

Размеры


...

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

высота в

пикселях


...

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

строки:

ячейки:


...

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

Слайд 53

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

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

table.spec tr {
height: 50px;
}

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

строки:

ячейки:

table.spec

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


...

Слайд 54

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


valign="top">

align="right" valign="middle"
width="200">по правой границе,
по середине

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


...

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

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

left,
center,
right

left,
center,
right

top,
middle,
bottom

Слайд 55

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




class="rmid">По правой
границе, по середине

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

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)







class="pic">
Таблица
из двух строк


Привет!
и двух столбцов

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>
white>



1 2

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

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

cellspacing

cellspacing

cellpadding

cellpadding

Слайд 58

Отступы (через 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)?


...




...

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

Слайд 60

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

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: 5px 5px 10px 20px;

padding: 3px;
}
#result {
background: #CCCCFF;
border: 1px solid blue;
}

Слайд 62

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


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-сервер

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

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

Презентация по информатике Защита файлов и управление доступом к ним
Конспект урока Запись арифметических выражений на языке Паскаль
Создание плана-проекта по разработке, внедрению и сопровождению сайта компании по продаже мужской одежды
Презентация к уроку информатики в 11 классе Троянские программы и защита от них
Проектирование информационных систем. Обследование и анализ информационной системы предприятия. (Лекция 1)
Операционная система. Назначение и основные функции
Автоматы и формальные языки
Жадыны басқару
Алгоритмы и структуры данных. Лекция 2-4
Цифровое фото и видео
Комп'ютерна графіка. Основні поняття та засоби комп'ютерної графіки
Java Core. Introduction
Аддитивные технологии: 3D-печать
Информационные ресурсы интернета
Работа с инструментарием
История средств хранения, передачи и обработки информации. 9 класс
Патентно-информационный поиск в электронной среде
Представление и кодирование информации
Переключатели зависимые и независимые
Коллекционные карточные игры
Обеспечение информационной безопасности при работе на персональном компьютере и в вычислительных сетях
Основы программирования. Хеширование
Презентация Файлы и папки
Система электронных дневников и журналов
Криптография. Симметричные алгоритмы шифрования
Представление информации в компьютере
Штриховой код - штрих-ко́д
Презентация
Обратная связь
Email: Нажмите что бы посмотреть