Web-страницы. Язык HTML и др.

Тема 1. Введение

Что такое Web-страницы?

Гиперссылка – «активная»ссылка на другой документ.
Гипертекст – текст, содержащий

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

статические – существуют на сервере в виде готовых файлов:

Язык HTML

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

HTML-страница – это текстовый

Тэги

Тэг – это команда языка HTML, которую выполняет браузер:

непарные тэги
парные тэги

Простейшая Web-страница

Привет!

first.html

шапка («голова»)

Привет!

основная

Редактор HEFS

файловые операции

буфер обмена

один экран

запуск
браузера (F9)

назад

вперед

текстовый

Вставка тэгов в HEFS

Web-страницы. Язык HTML и др.

Тема 2. Структура документа.
Специальные символы

Заголовки: H1 … H6

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

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

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

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

Комментарий

Авторские пометки

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

История

left,
center,

Абзацы

переход на новую строку
абзац (с отступами)

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

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

Этот текст выровнен по центру.

Этот текст выровнен по ширине.
Этот

Абзацы в HEFS

Специальные символы

Специальные символы

А.С. Пушкин — солнце русской поэзии.
Дом сдали в 2011 году.
Пёс весил

Специальные символы в HEFS

Web-страницы. Язык HTML и др.

Тема 3. Списки

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

• Вася
  
• Петя
  
• Коля
  

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

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

изменение

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

1. Вася
   
2. Петя
   
3. Коля
   

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

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

...

1, i,

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

• Города России       
  
• Города Украины   
  

  
1. Москва   
2. Санкт-Петерург

  
1. Киев   
2. Одесса

Списки в HEFS

Ctrl-L вставить элемент списка

Web-страницы. Язык HTML и др.

Тема 4. Гиперссылки

Ссылки на другие страницы сайта

Таблицы

страница в той же папке

anchor (якорь)

Примеры (ссылки из файла rock.html)

Ссылки на другие сайты

Почта

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

index.htm, index.html, default.asp, …

на

Ссылки внутри страницы

Глава 1
Глава 2

Глава 1

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

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

Гиперссылки в HEFS

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

Ctrl-A гиперссылка на выделенный блок, адрес вводить вручную

вставить

Web-страницы. Язык HTML и др.

Тема 5. Оформление документа. Стилевые файлы (CSS)

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

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

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

Задача 61

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

Форматированный текст (тексты программ)

program qq;
var a, b: integer;
begin
writeln("Введите два числа");

Физическая разметка

Форматирование текста в HEFS

Ctrl-B

Кодирование цвета

имена
red, green, blue, magenta, black,
шестнадцатеричные коды

white

R

G

B

# F F

Что такое CSS?

HTML – язык логической разметки текста, определяющий содержание и

Свойства элементов страницы

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

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

значение

селектор

color – цвет

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

...

qq.html

my.css

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

...

Шрифты

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

для всех

Классы (стили оформления)

p.spec {
font-style: italic;
background: green;
}

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

Размеры, выравнивание

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

Рамка и поля

p {
background: #ccffcc;
border: 1px solid green;
margin:

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

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

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

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

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

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

Ссылки

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

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

Выделение отдельных слов

.latin {
color: green;
font-style: italic;
}

класс, применимый ко всему

курсив

Собака(лат. 

Web-страницы. Язык HTML и др.

Тема 6. Рисунки

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

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

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

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

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

#6e5c62;

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

из

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

left

right

top

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

middle

Отступы

VSPACE
(vertical space)

HSPACE
(horizontal space)

Выравнивание и отступы (CSS)

img.left {
float: left;
margin:

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

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

надпись

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

ALT="Бесплатная почта" BORDER=0>

локальная

Рисунки в HEFS

вставить рисунок

Web-страницы. Язык HTML и др.

Тема 7. Таблицы

Простейшая таблица

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

TABLE таблица
TR = table row строка таблицы
TD = table data данные таблицы
TH = table header заголовок (жирный, по центру)

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

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

table.spec tr {
height:

Выравнивание (через 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

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

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

цвет фона

рисунок

Отступы (CSS)

border-spacing

border-spacing

padding

padding

table#qq {
background:

Объединение ячеек

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

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

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

Таблицы в HEFS

Web-страницы. Язык HTML и др.

Тема 9. Блоки (DIV)

Блоки (DIV) – любое содержимое