Web-страницы. Язык HTML 1. Введение Введение 2. Оформление текста Оформление текста 3. Гиперссылки Гиперссылки 4. Списки Списки 5. Рисунки Рисунки 6.Таблицы Таблицы
Web-страницы. Язык HTML © К.Ю. Поляков, 2007 Тема 1. Введение
3 Что такое Web-страницы? Гиперссылка – «активная»ссылка на другой документ. Гипертекст – текст, содержащий гиперссылки. Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой. WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа). Web-страница – текстовый файл, в котором описано размещение материала на экране. Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).
4 Какие бывают Web-страницы? статические – существуют на сервере в виде готовых файлов: *.htm, *.html динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php позволяют выбирать информацию из базы данных по заранее неизвестным запросам дополнительная нагрузка на сервер загружаются медленнее
5 Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML – это не язык программирования! ! HTML-страница – это текстовый файл (Блокнот): Моя страница Привет! … Моя страница Привет! … index.html sail.jpg man.jpg sunset.jpg clock.avi ball.swf bee.wav images
6 Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги (контейнеры) вставить рисунок открывающий закрывающий область действия тэга: описание таблицы
7 Простейшая Web-страница Моя первая Web-страница Привет! Моя первая Web-страница Привет! first.html Моя первая Web-страница Моя первая Web-страница шапка ("голова") Привет! Привет! основная часть («тело»)
8 Редактор HEFS файловые операции буфер обмена один экран запуск браузера (F9) запуск браузера (F9) назад вперед текстовый редактор браузер (IE) отмена
9 Кодирование цвета имена red, green, blue, magenta, black, шестнадцатеричные коды white # F A # F A # F A # F A R R G G B B # F F # F F # F F # F F # F F F F F F# F F F F F F # F F F F F F# F F F F F F # 0 0 F F F F# 0 0 F F F F # 0 0 F F F F# 0 0 F F F F # # # # # A A A A A A# A A A A A A # A A A A A A# A A A A A A
Web-страницы. Язык HTML © К.Ю. Поляков, 2007 Тема 2. Оформление текста
11 Тэг BODY – общие свойства страницы цвет фона и текста цвет гиперссылок Привет! Привет! цвет текста цвет фона посещенные ссылки (visited link) посещенные ссылки (visited link) цвет ссылок атрибуты тэга
12 Вставка тэгов в HEFS
13 Вставка атрибутов в HEFS вставить только код цвета
14 цвет текста размер шрифта Тэг FONT – свойства блока текста Привет! Как дела? Привет! Как дела? Привет! <FONT COLOR=red SIZE=6> Как дела? Привет! <FONT COLOR=red SIZE=6> Как дела? от 1 до 7 (3 – нормальный) от 1 до 7 (3 – нормальный)
15 Стили оформления жирный (bold) Вася курсив (italic) Вася подчеркивание (underline) Вася зачеркивание (strike out) Вася верхний индекс (superscript) Вася 2 нижний индекс (subscript) Вася 2
16 Форматированный текст ( листинги программ) program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end; program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end; program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end; program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end; отформатированный текст (preformatted) отформатированный текст (preformatted)
17 Заголовки: H1 … H6 Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки выравнивание: История left, center, right left, center, right
18 Форматирование текста в HEFS Ctrl-B
19 Специальные символы Символ HTML-код Название ¡ или неразрывный пробел § §параграф © © или ©символ авторского права « « или «левая русская кавычка ® ® или ®зарегистрированная торговая марка ° °градус ± ±плюс-минус ² ²квадрат ³ ³куб » » или »правая русская кавычка ¼ ¼четверть ½ ½половина ¾ ¾три четверти × ×знак умножения ÷ ÷знак деления
20 Специальные символы в HEFS
21 Абзацы переход на новую строку абзац (с отступами) Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками...
22 Выравнивание Этот текст выровнен по центру. Этот текст выровнен по ширине. Этот текст выровнен по ширине. Этот текст выровнен по центру. Этот текст выровнен по ширине. Этот текст выровнен по ширине. left по левой границе right по правой границе center по центру justify по ширине Не используйте выравнивание по ширине для узких столбцов! ! атрибут тэга
23 Абзацы в HEFS
24 Линия-разделитель horizontal rule ширина в пикселях или процентах толщина выравнивание Не рекомендуется использовать – лучше заголовки разделов! !
Web-страницы. Язык HTML © К.Ю. Поляков, 2007 Тема 3. Гиперссылки
26 Цвет гиперссылок LINK ссылки, на которых не были VLINK посещенные ссылки ALINK активные ссылки
27 Ссылки на другие страницы сайта Таблицы страница в той же папке anchor (якорь) hyper reference (гиперссылка) страница во вложенной папке Пример страница в соседней папке Текст выйти из текущей папки
28 Примеры (ссылки из файла rock.html) stories novels new old story.html list.html rock.html sea.html verse.html
29 Ссылки на другие сайты Почта на главную страницу сайта index.htm, index.html, default.asp, … на конкретную страницу сайта (URL) Васин текст Васин текст на файл для скачивания Скачать Скачать
30 Ссылки внутри страницы Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх в другом файле Цвет текста метка (якорь) переход на метку
31 Запуск почтовой программы Напишите мне! Напишите мне!
32 Гиперссылки в HEFS локальная ссылка Автоматически строится относительный адрес! ! Ctrl-A гиперссылка на выделенный блок, адрес вводить вручную вставить только адрес файла
Web-страницы. Язык HTML © К.Ю. Поляков, 2007 Тема 4. Списки
34 Маркированные списки Вася Петя Коля Вася Петя Коля unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: disk circle square
35 Нумерованные списки Вася Петя Коля Вася Петя Коля ordered list (упорядоченный список) изменение нумерации: , i, I, a, A
36 Списки определений компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск definition list (список определений) definition term (термин) definition description (описание)
37 Многоуровневые списки Города России Города Украины Города России Города Украины Москва Санкт-Петерург Киев Одесса
38 Списки в HEFS Ctrl-L вставить элемент списка
Web-страницы. Язык HTML © К.Ю. Поляков, 2007 Тема 5. Рисунки
40 Форматы рисунков GIF (Graphic Interchange Format) сжатие без потерь прозрачные области анимация только с палитрой (2…256 цветов) рисунки с четкими границами, мелкие рисунки JPEG (Joint Photographer Expert Group) сжатие с потерями только True Color (16,7 млн. цветов) нет анимации и прозрачности рисунки с размытыми границами, фото PNG (Portable Network Graphic) сжатие без потерь с палитрой (PNG-8) и True Color (PNG-24) прозрачность и полупрозрачность (альфа-канал) нет анимации плохо сжимает мелкие рисунки
41 Фон страницы "images/back.jpg" "../images/back.jpg" " "images/back.jpg" "../images/back.jpg" " Не должно быть "швов"! ! Фон не должен мешать! !
42 Рисунки в документе из той же папки: из другой папки: с другого сервера:
43 Выравнивание left right top bottom (по умолчанию) middle
44 Отступы VSPACE (vertical space) HSPACE (horizontal space)
45 Другие атрибуты всплывающая подсказка надпись на месте рисунка, если его нет всплывающая подсказка надпись на месте рисунка, если его нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет толщина рамки вокруг рисунка
46 Рисунок-гиперссылка <IMG SRC="mailru.jpg" ALT="Бесплатная почта" BORDER=0> <IMG SRC="mailru.jpg" ALT="Бесплатная почта" BORDER=0> локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет "хвост" не будет "хвоста"
47 Рисунки в HEFS вставить рисунок Автоматически вставляются размеры! !
Web-страницы. Язык HTML © К.Ю. Поляков, 2007 Тема 6. Таблицы
49 Простейшая таблица Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. толщина рамки TABLEтаблица TR = table rowстрока таблицы TD = table dataданные таблицы TH = table header заголовок (жирный, по центру)
50 Размеры ширина в пикселях или в % от ширины окна браузера высота в пикселях всей таблицы: строки: ячейки: ширина в пикселях или в % от ширины таблицы
51 Выравнивание <TR ALIGN="center" VALIGN="top"> По центру, по верхней границе <TD ALIGN="right" VALIGN="middle" WIDTH=200>По правой границе, по середине <TR ALIGN="center" VALIGN="top"> По центру, по верхней границе <TD ALIGN="right" VALIGN="middle" WIDTH=200>По правой границе, по середине всей таблицы: информации в ячейках: left, center, right left, center, right left, center, right left, center, right top, middle, bottom top, middle, bottom
52 Фон и цвет текста Привет! Таблица из двух строк и двух столбцов Привет! Таблица из двух строк и двух столбцов цвет фона фоновый рисунок
53 Отступы <TABLE CELLSPACING = 10 CELLPADDING = 10 BGCOLOR = blue> 1 2 <TABLE CELLSPACING = 10 CELLPADDING = 10 BGCOLOR = blue> 1 2 интервал между ячейками отступ внутри ячеек CELLSPACING CELLPADDING
54 Объединение ячеек Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! column span охват столбцов row span охват строк
55 Вложенные таблицы Вася Петя Маша Даша Вася Петя Маша Даша
56 Таблицы в HEFS