Курс лекций. Часть 4. Web-страницы. Язык HTML, таблицы, фреймы

Основное содержимое веб-страницы можно назвать контентом. А главной целью создания этих страниц является предоставление нам информации посредством всемирной паутины. А вот объединение этих самых веб-страниц между собой одной тематикой, веб-дизайном и ссылками называют web-сайтом.

Web-страницы. Язык HTML и др. Курс лекций

Web-страницы.Язык HTML и др.
Курс лекций
Никитин Михаил Евгеньевич

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

Web-страницы.Язык HTML и др.
Введение
Структура документа
Списки
Гиперссылки
Оформление документа
Рисунки
Таблицы
Фреймы
Блоки (DIV)
Понятие о JavaScript

Что такое Web-страницы? 3 Гиперссылка – «активная»ссылка на другой документ

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

Гиперссылка – «активная»ссылка на другой документ.
Гипертекст – текст, содержащий гиперссылки.
Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой.
WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа).
Web-страница – текстовый файл, в котором описано размещение материала на экране.
Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).

Какие бывают Web-страницы? 4 статические – существуют на сервере в виде готовых файлов: *

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

статические – существуют на сервере в виде готовых файлов: *.htm, *.html
динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php

позволяют выбирать информацию из базы данных по заранее неизвестным запросам

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

Язык HTML 5 HTML = Hypertext Markup

Язык HTML
5

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

HTML-страница – это текстовый файл (Блокнот):

Моя страница

Привет!
…

index.html

Тэги 6 Тэг – это команда языка

Тэги
6

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

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

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

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

...

открывающий

закрывающий

область действия тэга: описание таблицы

Простейшая Web-страница 7 Моя первая

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

Моя первая <br> Web-страница

Привет!

first.html

Моя первая <br> Web-страница

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

Привет!

основная часть («тело»)

Редактор HEFS 8 файловые операции буфер обмена один экран запуск браузера (F9) назад вперед текстовый редактор браузер (IE) отмена

Редактор HEFS
8

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

буфер обмена

один экран

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

вперед

текстовый редактор

браузер (IE)

отмена

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

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

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

Web-страницы.Язык HTML и др.
Тема 7. Таблицы

Простейшая таблица 11 Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек

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

Таблица из одной строки из трех столбцов без указания ширины таблицы
и ячеек.

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

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

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

Размеры
12

...

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

высота в пикселях

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

...

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

Размеры (через CSS) 13 table.spec { width: 60%; height: 300; } table

Размеры (через CSS)
13
table.spec {
width: 60%;
height: 300;
}
table.spec tr {
height: 50px;
}
всей таблицы:
строки:
ячейки:
table.spec td.qq {
width: 25%;
height: 50px;
}

...

Выравнивание 14 VALIGN="top">

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

VALIGN="top">

По
центру, по верхней границе WIDTH=200>По правой границе,
по середине

...
всей таблицы:
информации в ячейках:

left,
center,
right

top,
middle,
bottom

Выравнивание (через CSS) 15 По центру, по верхней границе

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

Фон и цвет текста
16

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

цвет фона

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

Фон и цвет текста (CSS) 17 Привет!

Фон и цвет текста (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 BGCOLOR = blue> 1 2 интервал между ячейками отступ внутри ячеек

Отступы
18

BGCOLOR = blue>

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;…

Отступы (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 Привет!

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

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

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

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

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

Материалы на данной страницы взяты из открытых истончиков либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.

27.02.2021