'

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

Понравилась презентация – покажи это...





Слайд 0

Web-страницы. Язык HTML © К.Ю. Поляков, 2007-2008 Введение Оформление текста Гиперссылки Списки Рисунки Таблицы Фреймы Понятие о JavaScript


Слайд 1

Web-страницы. Язык HTML © К.Ю. Поляков, 2007-2008 Тема 1. Введение


Слайд 2

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


Слайд 3

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


Слайд 4

5 Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML-страница – это текстовый файл (Блокнот): <HTML> <HEAD> <TITLE>Моя страница</TITLE> </HEAD> <BODY> Привет! … </BODY> </HTML> index.html


Слайд 5

6 Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги (контейнеры) <IMG SRC = "vasya.jpg"> вставить рисунок <TABLE> ... </TABLE> открывающий закрывающий область действия тэга: описание таблицы


Слайд 6

7 Простейшая Web-страница <HTML> <HEAD> <TITLE>Моя первая Web-страница</TITLE> </HEAD> <BODY> Привет! </BODY> </HTML> first.html <HEAD> <TITLE>Моя первая Web-страница</TITLE> </HEAD> шапка («голова») <BODY> Привет! </BODY> основная часть («тело»)


Слайд 7

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


Слайд 8

9 Кодирование цвета имена red, green, blue, magenta, black, шестнадцатеричные коды white R G B # F F 0 0 0 0 # F F F F F F # 0 0 F F F F # 0 0 0 0 0 0 # A A A A A A


Слайд 9

Web-страницы. Язык HTML © К.Ю. Поляков, 2007-2008 Тема 2. Оформление текста


Слайд 10

11 Тэг BODY – общие свойства страницы цвет фона и текста цвет гиперссылок <BODY TEXT="white" BGCOLOR=#00FF00> Привет! </BODY> <BODY LINK="#FF8C00" VLINK=green> ... </BODY> цвет текста цвет фона посещенные ссылки (visited link) цвет ссылок атрибуты тэга


Слайд 11

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


Слайд 12

13 Вставка атрибутов в HEFS вставить только код цвета


Слайд 13

14 цвет текста размер шрифта Тэг FONT – свойства блока текста Привет! <FONT COLOR=red> Как дела? </FONT> Привет! <FONT COLOR=red SIZE=6> Как дела? </FONT> от 1 до 7 (3 – нормальный)


Слайд 14

15 Стили оформления


Слайд 15

16 Форматированный текст (листинги программ) program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end. <PRE> program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end. </PRE> отформатированный текст (preformatted)


Слайд 16

17 Заголовки: H1 … H6 <BODY> <H1>Заголовок документа</H1> <H2>Заголовок раздела</H2> <H3>Заголовок подраздела</H3> <H4>Заголовок параграфа</H4> <H5>Комментарий</H5> <H6>Авторские пометки</H6> </BODY> выравнивание: <H1 ALIGN=center>История</H1> left, center, right


Слайд 17

18 Форматирование текста в HEFS Ctrl-B


Слайд 18

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


Слайд 19

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


Слайд 20

21 Абзацы переход на новую строку абзац (с отступами) Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. <BR> До самого вечера тело с варежками ... <P> Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. </P> <P> До самого вечера тело с варежками ... </P>


Слайд 21

22 Выравнивание <P ALIGN="center"> Этот текст выровнен по центру. </P> <P ALIGN="justify"> Этот текст выровнен по ширине. Этот текст выровнен по ширине. Этот текст выровнен по ширине. Этот текст выровнен по ширине. </P> left по левой границе right по правой границе center по центру justify по ширине атрибут тэга <P>


Слайд 22

23 Абзацы в HEFS


Слайд 23

24 Линия-разделитель <HR> <HR WIDTH="60%" SIZE="3" ALIGN="right"> horizontal rule ширина в пикселях или процентах толщина выравнивание


Слайд 24

Web-страницы. Язык HTML © К.Ю. Поляков, 2007-2008 Тема 3. Гиперссылки


Слайд 25

26 Цвет гиперссылок <BODY LINK="#FF8C00" VLINK=green ALINK=red> ... </BODY> LINK ссылки, на которых не были VLINK посещенные ссылки ALINK активные ссылки


Слайд 26

27 Ссылки на другие страницы сайта <A HREF="table.htm">Таблицы</A> страница в той же папке anchor (якорь) hyper reference (гиперссылка) страница во вложенной папке <A HREF="example/ex1.htm">Пример</A> страница в соседней папке <A HREF="../texts/text1.htm">Текст</A> выйти из текущей папки Название папки


Слайд 27

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


Слайд 28

29 Ссылки на другие сайты <A HREF="http://www.mail.ru">Почта</A> на главную страницу сайта index.htm, index.html, default.asp, … на файл для скачивания <A HREF="http://www.vasya.ru/prog.zip"> Скачать</A>


Слайд 29

30 Ссылки внутри страницы <A NAME="up"></A> <A HREF="#chap1">Глава 1</A><br> <A HREF="#chap2">Глава 2</A><br> <A NAME="chap1"></A> <H1>Глава 1</H1> Это текст главы 1. Это текст главы 1. Это текст главы 1. Это текст главы 1.<BR> <A HREF="#up">Наверх</A> <A NAME="chap2"></A> <H1>Глава 2</H1> Это текст главы 2. Это текст главы 2. Это текст главы 2. Это текст главы 2.<BR> <A HREF="#up">Наверх</A> в другом файле <A HREF="texts.html#color">Цвет текста</A> метка (якорь) переход на метку


Слайд 30

31 Запуск почтовой программы <A HREF="mailto:vasya@mail.ru"> Напишите мне! </A>


Слайд 31

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


Слайд 32

Web-страницы. Язык HTML © К.Ю. Поляков, 2007-2008 Тема 4. Списки


Слайд 33

34 Маркированные списки <UL> <LI>Вася <LI>Петя <LI>Коля </UL> unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: <UL TYPE="disk"> ... </UL> disk ? circle 0 square ¦


Слайд 34

35 Нумерованные списки <OL> <LI>Вася <LI>Петя <LI>Коля </OL> ordered list (упорядоченный список) изменение нумерации: <OL TYPE=i START=3> ... </OL> 1, i, I, a, A


Слайд 35

36 Списки определений <DL> <DT>компьютер <DD>устройство для обработки информации <DT>дискета <DD>гибкий магнитный диск <DT>винчестер <DD>жесткий магнитный диск </DL> definition list (список определений) definition term (термин) definition description (описание)


Слайд 36

37 Многоуровневые списки <UL> <LI>Города России        <LI>Города Украины    </UL> <OL>   <LI>Москва   <LI>Санкт-Петерург </OL> <OL>   <LI>Киев   <LI>Одесса </OL>


Слайд 37

38 Списки в HEFS Ctrl-L вставить элемент списка <LI>


Слайд 38

Web-страницы. Язык HTML © К.Ю. Поляков, 2007-2008 Тема 5. Рисунки


Слайд 39

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) прозрачность и полупрозрачность (альфа-канал) нет анимации плохо сжимает мелкие рисунки


Слайд 40

41 Фон страницы <BODY BACKGROUND="back.jpg"> "images/back.jpg" "../images/back.jpg" "http://www.vasya.ru/images/back.jpg"


Слайд 41

42 Рисунки в документе <IMG SRC="flag.jpg"> <IMG SRC="images/flag.jpg"> <IMG SRC="../images/flag.jpg"> <IMG SRC="http://www.vasya.ru/img/flag.jpg"> из той же папки: из другой папки: с другого сервера: image (изображение) source (источник)


Слайд 42

43 Выравнивание <IMG SRC="flag.jpg" ALIGN="left"> left right top bottom (по умолчанию) middle


Слайд 43

44 Отступы <IMG SRC="net.jpg" ALIGN="left"> <IMG SRC="net.jpg" ALIGN="left" HSPACE=10 VSPACE=10> VSPACE (vertical space) HSPACE (horizontal space)


Слайд 44

45 Другие атрибуты <IMG SRC="myphoto.jpg" ALT="Моя фотография" WIDTH=100 HEIGHT=150 BORDER=0> всплывающая подсказка надпись на месте рисунка, если его нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет толщина рамки вокруг рисунка


Слайд 45

46 Рисунок-гиперссылка <A HREF="http://www.mail.ru"> <IMG SRC="mailru.jpg" ALT="Бесплатная почта" BORDER=0></A> <A HREF="table.htm"> <IMG SRC="tbl.jpg" ALT="Таблицы" BORDER=0> </A> локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если </A> не вплотную к <IMG …>, будет «хвост» не будет «хвоста»


Слайд 46

47 Рисунки в HEFS вставить рисунок


Слайд 47

Web-страницы. Язык HTML © К.Ю. Поляков, 2007-2008 Тема 6. Таблицы


Слайд 48

49 Простейшая таблица <TABLE BORDER="1"> <TR> <TD>Таблица из одной строки</TD> <TD>из трех столбцов</TD> <TD>без указания ширины таблицы и ячеек.</TD> </TR> </TABLE> толщина рамки TABLE таблица TR = table row строка таблицы TD = table data данные таблицы TH = table header заголовок (жирный, по центру)


Слайд 49

50 Размеры <TABLE WIDTH="60%" HEIGHT="300"> ... </TABLE> ширина в пикселях или в % от ширины окна браузера высота в пикселях <TR HEIGHT="50"> ... </TR> всей таблицы: строки: ячейки: <TD WIDTH="25%" HEIGHT="50"> ... </TD> ширина в пикселях или в % от ширины таблицы


Слайд 50

51 Выравнивание <TABLE BORDER="1"> <TR ALIGN="center" VALIGN="top"> <TD WIDTH=120 HEIGHT=100>По центру, по верхней границе</TD> <TD ALIGN="right" VALIGN="middle" WIDTH=200>По правой границе, по середине</TD> </TR> </TABLE> <TABLE ALIGN="center"> ... </TABLE> всей таблицы: информации в ячейках: left, center, right left, center, right top, middle, bottom


Слайд 51

52 Фон и цвет текста <TABLE BORDER="1" BGCOLOR="green"> <TR HEIGHT=30 BGCOLOR="blue"> <TD><FONT COLOR="white">Привет!</FONT></TD> <TD BGCOLOR="red"></TD> </TR> <TR> <TD BACKGROUND="web.jpg">Таблица из двух строк</TD> <TD>и двух столбцов</TD> </TR> </TABLE> цвет фона фоновый рисунок


Слайд 52

53 Отступы <TABLE CELLSPACING = 10 CELLPADDING = 10 BGCOLOR = blue> <TR BGCOLOR = white> <TD WIDTH = 100>1</TD> <TD WIDTH = 100>2</TD> </TR> </TABLE> интервал между ячейками отступ внутри ячеек CELLSPACING CELLSPACING CELLPADDING CELLPADDING


Слайд 53

54 Объединение ячеек <TABLE BORDER="1"> <TR> <TD COLSPAN="3">Привет!</TD> </TR> <TR> <TD>Вася,</TD> <TD>Петя,</TD> <TD>Маша!</TD> </TR> </TABLE> <TABLE BORDER="1"> <TR> <TD ROWSPAN="3">Привет!</TD> <TD>Вася,</TD> </TR> <TR><TD>Петя,</TD></TR> <TR><TD>Маша!</TD></TR> </TABLE> column span охват столбцов row span охват строк


Слайд 54

55 Вложенные таблицы <TABLE BORDER="0" CELLSPACING=10> <TR><TD> </TD> <TD> </TD></TR> </TABLE> <TABLE BORDER="1"> <TR><TD>Вася</TD><TD>Петя</TD></TR> <TR><TD>Маша</TD><TD>Даша</TD></TR> </TABLE> <TABLE BORDER="1"> <TR><TD>1</TD><TD>22</TD></TR> <TR><TD>333</TD><TD>4444</TD></TR> </TABLE>


Слайд 55

56 Таблицы в HEFS


Слайд 56

Web-страницы. Язык HTML © К.Ю. Поляков, 2007-2008 Тема 7. Фреймы


Слайд 57

58 Фреймы Фрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web-страница. 3 файла: left.html – страница в левой части right.html – страница в правой части index.html – описание структуры


Слайд 58

59 Описание структуры index.html <HTML> <HEAD> <TITLE>Фреймы-столбцы</TITLE> </HEAD> <FRAMESET COLS="30%,*"> <FRAME SRC="left.html"> <FRAME SRC="right.html" NAME="qq"> </FRAMESET> </HTML> columns столбцы ширина в пикселях или % все остальное место source источник имя фрейма (для ссылок)


Слайд 59

60 Граница между фреймами <FRAMESET COLS="30%,*" FRAMESPACING="10"> ... </FRAMESET> <FRAMESET COLS="30%,*" FRAMEBORDER="0"> ... </FRAMESET> граница между фреймами: 0 – невидима, 1 - видима ширина полосы между фреймами, за которую можно перетащить границу


Слайд 60

61 Настройка фрейма (FRAME) <FRAME SRC="a.htm" MARGINWIDTH="0" MARGINHEIGHT="0" NORESIZE SCROLLING="auto"> убрать отступы от края фрейма до содержимого полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда запретить изменение размеров


Слайд 61

62 Фреймы-строки index.html <HTML> <HEAD> <TITLE>Фреймы-строки</TITLE> </HEAD> <FRAMESET ROWS="120,*"> <FRAME SRC="up.html"> <FRAME SRC="down.html" NAME="qq"> </FRAMESET> </HTML> строки ширина в пикселях или %


Слайд 62

63 Сложные структуры (3 фрейма) index.html <FRAMESET COLS="30%,*"> <FRAME SRC="left.html"> </FRAMESET> <FRAMESET ROWS="40,*"> <FRAME SRC="up.html"> <FRAME SRC="down.html"> </FRAMESET>


Слайд 63

64 Как открыть ссылку в другом фрейме <FRAME ... NAME="qq"> <A HREF="chapter2.htm" TARGET="qq">Глава 2</A> TARGET _blank – в новом окне _parent – в родительском окне _top – в главном окне (убрать фреймы)


Слайд 64

65 Фреймы в HEFS


Слайд 65

66 Работа с несколькими страницами в HEFS переключение страниц закрыть текущую страницу (Ctrl-W) просмотр активной страницы


Слайд 66

Web-страницы. Язык HTML © К.Ю. Поляков, 2007-2008 Тема 8. Понятие о Javascript


Слайд 67

68 Что может Javascript? информация статична нет интерактивности (только переход на другую страницу) Чем плоха HTML-страница? Что можно сделать с помощью Javascript? изменение рисунка при наведении мыши выпадающие меню всплывающие подсказки фотогалерея без перегрузки страницы движение объекта по экрану Javascript может быть отключен в браузере


Слайд 68

69 Основные принципы каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства свойства объекта можно менять из программы на Javascript (скрипта) все, что происходит – это события все события можно «обрабатывать», т.е. как-то реагировать на них HTML + Javascript = DHTML (Dynamic HTML)


Слайд 69

70 Замена рисунка при движении мыши <IMG SRC="image1.gif"       onMouseOver="this.src='image2.gif'"       onMouseOut="this.src='image1.gif'"> когда курсор мыши над рисунком после ухода мыши События: onMouseOver – курсор мыши над объектом onMouseOut – курсор мыши ушел с объекта начальный рисунок this – этот объект this.src – свойство SRC этого объекта


Слайд 70

71 Конец фильма


×

HTML:





Ссылка: