Поделиться
Курс лекций Знанио. часть 4. Web-страницы. Язык HTML, таблицы, фреймы.ppt
Web-страницы. Язык HTML и др.
Курс лекций
Никитин Михаил Евгеньевич
Web-страницы. Язык HTML и др.
Введение
Структура документа
Списки
Гиперссылки
Оформление документа
Рисунки
Таблицы
Фреймы
Блоки (DIV)
Понятие о JavaScript
Что такое Web-страницы?
3
Гиперссылка – «активная»ссылка на другой документ.
Гипертекст – текст, содержащий гиперссылки.
Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой.
WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа).
Web-страница – текстовый файл, в котором описано размещение материала на экране.
Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).
Какие бывают Web-страницы?
4
статические – существуют на сервере в виде готовых файлов: *.htm, *.html
динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php
позволяют выбирать информацию из базы данных по заранее неизвестным запросам
дополнительная нагрузка на сервер
загружаются медленнее
Язык HTML
5
HTML = Hypertext Markup Language (язык разметки гипертекста)
HTML-страница – это текстовый файл (Блокнот):
index.html
Тэги
6
Тэг – это команда языка HTML, которую выполняет браузер:
непарные тэги
парные тэги (контейнеры)
вставить рисунок
открывающий
закрывающий
область действия тэга: описание таблицы
Простейшая Web-страница
7
first.html
шапка («голова»)
основная часть («тело»)
Редактор HEFS
8
файловые операции
буфер обмена
один экран
запуск
браузера (F9)
назад
вперед
текстовый редактор
браузер (IE)
отмена
Вставка тэгов в HEFS
9
Web-страницы. Язык HTML и др.
Тема 7. Таблицы
Простейшая таблица
11
| Таблица из одной строки | из трех столбцов | без указания ширины таблицы и ячеек. |
толщина рамки
TABLE таблица
TR = table row строка таблицы
TD = table data данные таблицы
TH = table header заголовок (жирный, по центру)
Размеры
12
ширина в пикселях или в % от ширины окна браузера
высота в пикселях
всей таблицы:
строки:
ячейки:
ширина в пикселях или в % от ширины таблицы
Размеры (через CSS)
13
table.spec {
width: 60%;
height: 300;
}
table.spec tr {
height: 50px;
}
всей таблицы:
строки:
ячейки:
table.spec td.qq {
width: 25%;
height: 50px;
}
Выравнивание
14
| По центру, по верхней границе | WIDTH=200>По правой границе, по середине |
всей таблицы:
информации в ячейках:
left,
center,
right
left,
center,
right
top,
middle,
bottom
Выравнивание (через CSS)
15
| По центру, по верхней границе | По правой границе, по середине |
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
Фон и цвет текста
16
| Привет! | |
| Таблица из двух строк | и двух столбцов |
цвет фона
фоновый рисунок
Фон и цвет текста (CSS)
17
| Привет! | |
Таблица из двух строк | и двух столбцов |
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");
}
цвет фона
рисунок
Отступы
18
| 1 | 2 |
интервал между ячейками
отступ внутри ячеек
CELLSPACING
CELLSPACING
CELLPADDING
CELLPADDING
Отступы (CSS)
19
| 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
Объединение ячеек
20
| Привет! | ||
| Вася, | Петя, | Маша! |
| Привет! | Вася, |
| Петя, | |
| Маша! |
column span охват столбцов
row span охват строк
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
