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

гиперссылки.
Гиперссылка (англ. hyper reference) – это «активная» ссылка на

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

– полностью или частично создаются на сервере

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

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

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

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

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

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

Javascript

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

редакторы с подсветкой HTML-тэгов:
Sublime Text (sublimetext.com)

Редакторы 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)

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


Привет!



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

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

раздела
– заголовок подраздела
– заголовок параграфа
Глава 1. Информация
1.1

(свойство)

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

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

интервал

и, подлетая к потолку, лоб в лоб столкнулась с

left, center, right, justify

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

только снится

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

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

И мнёт

break – разрыв

12 кг.
Неразрывный пробел ( )
год
инициалы
единицы измерения
Из дома вышел А.С. Пушкин –

не отрывать:

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

не

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

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

X < Y?

X < Y
это начало тэга?

item (элемент списка)
изменение маркера:

...

disk ∙
circle

нумерации:

...

1, i, I, a, A

Москва
Санкт-Петербург


Киев
Одесса

reference (гиперссылка)
страница в том же каталоге:
во вложенном каталоге:

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

Информация.

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

Информация.

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

Скачать.
для запуска почтовой программы:
Напишите мне!

name="bear">
Медведь
Медведь — хищное млекопитающее семейства медвежьих.


медведь
на метку в другом

медведь

href="example.html#resume">...
...
...

Остер
Задача 61 Петя ехал к бабушке на электричке, и всю

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

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

(definition):
Информация — это...
Цитата (citation):
Карету мне, карету!
Сокращение (abbreviation):
НИИЧАВО

do
if a[i] < a[iMin] then
iMin :=

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

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

индекс (superscript):
Вася2
Вася2
Нижний индекс (subscript):
Вася2
Вася2

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

main.css

mob.css

printer.css

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

color – цвет символов
background – цвет фона
test.css
значение
R = FF16

Вася!



qq.html
test.css
body {
color: white;
background: #0000E0;
}


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

white;
background: #0000E0;
}

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

20px;
font-style: italic;
font-weight: bold;
}
для всех абзацев
семейство шрифтов
serif –

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

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

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

height: 100px;
text-align: left;
text-indent: 20px;
}
ширина
высота
Lorem ipsum dolor

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

100px

80%

20px

цвет фона

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

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

consectetur adipiscing elit. Nam nunc libero, semper ac feugiat

margin-right

margin-bottom

margin-left

margin-top

padding-right

padding-left

padding-top

padding-bottom

border-right

border-left

border-top

border-bottom

}
Все гиперссылки:
a:visited { color: #0000AA; }
Посещённые гиперссылки:
a:hover {

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

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

псевдокласс

псевдокласс

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

памятью.

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

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

padding-left: 20px;
}

qq@mail.ru

qq@mail.ru

qq@mail.ru

Courier New, monospace;
}
Общие свойства для нескольких тэгов:
em a

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

a внутри em

{
color: #00F;
text-decoration:underline;
}
p.email a:visited {
color: #F0F;
}
ссылки

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

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

подчеркнуть

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

то же, что #FF00FF

области
анимация
только с палитрой (2…256 цветов)
рисунки с четкими границами, мелкие

JPEG (Joint Photographer Expert Group)
сжатие с потерями
только True Color (16,7 млн. цветов)
нет анимации и прозрачности
рисунки с размытыми границами, фото

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

векторные изображения)

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

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

source (источник)

align="left" hspace="10"

vspace
(vertical space)

hspace
(horizontal space)

width="800"
height="600">
надпись на

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

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

border="0">



локальная ссылка:
ссылка на другой сервер:
иначе будет

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

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

width="48" height="48"
align="left">

тип нестандартных данных
имя файла
размеры
выравнивание

#EEE;
}
'images/grad.jpg'
'../images/grad.jpg‘
'http://www.vasya.ru/images/grad.jpg'
если рисунка нет…

repeat-y; }
если рисунок меньше, он повторяется
не повторять
повторять по вертикали

width="275" height="200">

имя файла
размеры

width="425"
height="350">

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

autostart="false"
width="425" height="350">
Ваш браузер не

Петров


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

(заголовок)
жирный, по центру

февраль
март


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

Петя!


Коля!


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

border="1">

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


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

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

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

...

всей таблицы:
строки:
ячейки:

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

tr {
height: 50px;
}
всей таблицы:
строки:
ячейки:
table.spec td.qq {
width: 25%;

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

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

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

left,
center,
right

left,
center,
right

top,
middle,
bottom

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

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

class="spec">
Привет!




Таблица
из

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

цвет фона

рисунок

bgcolor = blue>

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

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

cellspacing

cellspacing

cellpadding

cellpadding

2


border-spacing
border-spacing
padding
padding
table#qq {
background: blue;
border-collapse: separate;

кроме IE 6

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

consectetur adipiscing elit. Nam nunc libero, semper ac feugiat

margin-right

margin-bottom

margin-left

margin-top

padding-right

padding-left

padding-top

padding-bottom

border-right

border-left

border-top

border-bottom

margin: 5px 5px 10px 20px;
padding: 3px;
}
#result {
background:

width="100"
height="66">
На природе

.picture

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

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

document

html

head

title

DOM

body

em

Привет,

p

Вася!

src этого объекта
вложенные кавычки


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

болт, винт, шуруп, гвоздь и др.

.hidden {
display:none;
}
не показывать
block

elem = document.getElementById(name);
if ( elem )

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

функция

имя функции

переменная

если нашли

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

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

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

Показать детали