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

hyper reference) – это «активная» ссылка на другой объект (часть

разметки гипертекста)

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

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

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

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

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

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

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

подсветкой HTML-тэгов:
Sublime Text (sublimetext.com)
NotePad++ (notepad-plus-plus.org)

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

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

не отрывать:

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

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

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

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

Y?

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

списка)
изменение маркера:

...

disk ∙
circle ○
square ■

start="4">
...

1, i, I, a, A

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


Киев
Одесса

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

Информация.
в родительском каталоге:

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

Информация.

href="http://example.net/game.zip">
Скачать.
для запуска почтовой программы:
Напишите мне!

млекопитающее семейства медвежьих.


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

href="mailto:john@yahoo.com">...

ехал к бабушке на электричке, и всю дорогу над ним

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

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

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

a[i] < a[iMin] then
iMin := i;

iMin := 1;
for

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

индекс (subscript):
Вася2
Вася2

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

main.css

mob.css

printer.css

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

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

color: white;
background: #0000E0;
}


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

#0000E0;
}

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

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

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

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

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

text-align: left;
text-indent: 20px;
}
ширина
высота
Lorem ipsum dolor sit amet, consectetur

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

100px

80%

20px

цвет фона

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

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

elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et

margin-right

margin-bottom

margin-left

margin-top

padding-right

padding-left

padding-top

padding-bottom

border-right

border-left

border-top

border-bottom

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

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

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

псевдокласс

псевдокласс

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

тексте

url(grad.jpg) repeat-y;
}

class="email">
qq@mail.ru

qq@mail.ru

qq@mail.ru

monospace;
}
Общие свойства для нескольких тэгов:
em a {
font-style: normal;
}

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

a внутри em

#00F;
text-decoration:underline;
}
p.email a:visited {
color: #F0F;
}
ссылки внутри абзаца класса

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

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

подчеркнуть

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

то же, что #FF00FF

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

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

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

из той же папки:
из другой папки:
с другого сервера:
image (изображение)
source (источник)

align="left" hspace="10" vspace="10">
vspace
(vertical space)
hspace
(horizontal

width="800"
height="600">
надпись на месте рисунка, если

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

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

src="night.jpg" border="0">

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

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

align="left">

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

рисунка нет…

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

width="275" height="200">

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

height="350">

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

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

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

центру

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

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

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


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

border="1">
ВасяПетя
МашаДаша


122
3334444

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

...

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

...

ширина в пикселях

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

...

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

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

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

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

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

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;
border-spacing: 10px;
padding:

кроме IE 6

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

elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et

margin-right

margin-bottom

margin-left

margin-top

padding-right

padding-left

padding-top

padding-bottom

border-right

border-left

border-top

border-bottom

5px 10px 20px;
padding: 3px;
}
#result {
background: #CCCCFF;
border: 1px

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

.picture { float:left; margin:

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

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

document

html

head

title

DOM

body

em

Привет,

p

Вася!

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


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

шуруп, гвоздь и др.

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

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

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

функция

имя функции

переменная

если нашли

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

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

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

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








Детали — это