Html

2,072 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,072
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html

  1. 1. Web- страницы. Язык HTML © К.Ю. Поляков, 2007 <ul><li>Введение </li></ul><ul><li>Оформление текста </li></ul><ul><li>Гиперссылки </li></ul><ul><li>Списки </li></ul><ul><li>Рисунки </li></ul><ul><li>Таблицы </li></ul><ul><li>Фреймы </li></ul><ul><li>Понятие о JavaScript </li></ul>
  2. 2. Web- страницы. Язык HTML Тема 1. Введение © К.Ю. Поляков, 2007
  3. 3. Что такое Web- страницы? Гиперссылка – «активная»ссылка на другой документ . Гипертекст – текст, содержащий гиперссылки. Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой. WWW (World Wide Web) – « всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа). Web- страница – текстовый файл, в котором описано размещение материала на экране. Браузер – программа для просмотра Web- страниц на экране ( Internet Explorer, Mozilla Firefox , Opera ) .
  4. 4. Какие бывают Web- страницы? <ul><li>статические – существуют на сервере в виде готовых файлов: *.htm , *.html </li></ul><ul><li>динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) * .shtml, * .asp, *.pl, *.php </li></ul><ul><li>позволяют выбирать информацию из базы данных по заранее неизвестным запросам </li></ul><ul><li>дополнительная нагрузка на сервер </li></ul><ul><li>загружаются медленнее </li></ul>
  5. 5. Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML -страница – это текстовый файл ( Блокнот ): <HTML> <HEAD> <TITLE> Моя страница </TITLE> </HEAD> <BODY> Привет! … </BODY> </HTML> index.html HTML – это не язык программирования! ! sail.jpg man.jpg sunset.jpg clock.avi ball.swf bee.wav images
  6. 6. Тэги Тэг – это команда языка HTML, которую выполняет браузер: <ul><li>непарные тэги </li></ul><ul><li>парные тэги ( контейнеры ) </li></ul><IMG SRC = &quot;vasya.jpg&quot;> вставить рисунок <TABLE> ... < / TABLE> открывающий закрывающий область действия тэга: описание таблицы
  7. 7. Простейшая Web- страница <HTML> <HEAD> <TITLE> Моя первая Web-страница </TITLE> </HEAD> <BODY> Привет! </BODY> </HTML> first.html <HEAD> <TITLE> Моя первая Web-страница </TITLE> </HEAD> шапка (&quot;голова&quot;) <BODY> Привет! </BODY> основная часть («тело»)
  8. 8. Редактор HEFS файловые операции буфер обмена один экран запуск браузера ( F9) назад вперед текстовый редактор браузер ( IE ) отмена
  9. 9. Кодирование цвета <ul><li>имена </li></ul><ul><ul><li>red , green , blue , magenta , black , </li></ul></ul><ul><li>шестнадцатеричные коды </li></ul>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 # F A 8 0 7 2
  10. 10. Web- страницы. Язык HTML Тема 2 . Оформление текста © К.Ю. Поляков, 2007
  11. 11. Тэг BODY – общие свойства страницы <ul><li>цвет фона и текста </li></ul><ul><li>цвет гиперссылок </li></ul><BODY TEXT =&quot;white&quot; BGCOLOR =#00FF00> Привет! </BODY> <BODY LINK =&quot;#FF8C00&quot; VLINK =green> ... </BODY> цвет текста цвет фона посещенные ссылки ( visited link ) цвет ссылок атрибуты тэга
  12. 12. Вставка тэгов в HEFS
  13. 13. Вставка атрибутов в HEFS вставить только код цвета
  14. 14. <ul><li>цвет текста </li></ul><ul><li>размер шрифта </li></ul>Тэг FONT – свойства блока текста Привет! <FONT COLOR =red> Как дела? </FONT> Привет! <FONT COLOR=red SIZE =6> Как дела? </FONT> от 1 до 7 (3 – нормальный)
  15. 15. Стили оформления Вася 2 Вася < SUB >2</ SUB > нижний индекс ( subscript ) Вася < SUP >2</ SUP > < S > Вася </ S > < U > Вася </ U > < I > Вася </ I > < B > Вася </ B > Вася 2 верхний индекс ( superscript ) Вася зачеркивание ( strike out ) Вася подчеркивание ( underline ) Вася курсив ( italic ) Вася жирный ( bold )
  16. 16. Форматированный текст ( листинги программ) program qq; var a, b: integer; begin writeln(&quot;Введите два числа&quot;); read(a,b); writeln(a,'+',b,'=',a+b); end; < PRE > program qq; var a, b: integer; begin writeln(&quot;Введите два числа&quot;); read(a,b); writeln(a,'+',b,'=',a+b); end; </ PRE > отформатированный текст ( preformatted )
  17. 17. Заголовки: H1 … H6 <BODY> <H1>Заголовок документа</H1> <H2>Заголовок раздела</H2> <H3>Заголовок подраздела</H3> <H4>Заголовок параграфа</H4> <H5>Комментарий</H5> <H6>Авторские пометки</H6> </BODY> выравнивание: <H1 ALIGN =center >История</H1> left, center, right
  18. 18. Форматирование текста в HEFS Ctrl-B
  19. 19. Специальные символы знак деления ÷ ÷ знак умножения × × три четверти ¾ ¾ половина ½ ½ четверть ¼ ¼ правая русская кавычка » или &raquo; » куб ³ ³ квадрат ² ² плюс-минус ± ± градус ° ° зарегистрированная торговая марка  ® или &reg; ® левая русская кавычка « или &laquo; « символ авторского права © или &copy; © параграф § § неразрывный пробел   ¡ или &nbsp;     Название    HTML-код    Символ 
  20. 20. Специальные символы в HEFS
  21. 21. Абзацы <ul><li>переход на новую строку </li></ul><ul><li>абзац ( с отступами) </li></ul>Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. < BR > До самого вечера тело с варежками ... < P > Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. < / P > < P > До самого вечера тело с варежками ... </ P >
  22. 22. Выравнивание <P ALIGN =&quot;center&quot;> Этот текст выровнен по центру. </P> <P ALIGN =&quot;justify&quot;> Этот текст выровнен по ширине. Этот текст выровнен по ширине. Этот текст выровнен по ширине. Этот текст выровнен по ширине. </P> left по левой границе right по правой границе center по центру justify по ширине атрибут тэга <P> Не используйте выравнивание по ширине для узких столбцов! !
  23. 23. Абзацы в HEFS
  24. 24. Линия-разделитель < HR > < HR WIDTH =&quot;60%&quot; SIZE =&quot;3&quot; ALIGN =&quot;right&quot;> horizontal rule ширина в пикселях или процентах толщина выравнивание Не рекомендуется использовать – лучше заголовки разделов! !
  25. 25. Web- страницы. Язык HTML Тема 3. Гиперссылки © К.Ю. Поляков, 2007
  26. 26. Цвет гиперссылок <BODY LINK =&quot;#FF8C00&quot; VLINK =green ALINK =red> ... </BODY> LINK ссылки, на которых не были VLINK посещенные ссылки ALINK активные ссылки
  27. 27. Ссылки на другие страницы сайта < A HREF =&quot;table.htm&quot;> Таблицы </A> <ul><li>страница в той же папке </li></ul>anchor ( якорь) hyper reference ( гиперссылка) <ul><li>страница во вложенной папке </li></ul><A HREF=&quot; example/ ex1.htm&quot;> Пример </A> <ul><li>страница в соседней папке </li></ul><A HREF=&quot; ../ texts/text1.htm&quot;> Текст </A> выйти из текущей папки
  28. 28. Примеры ( ссылки из файла rock.html ) stories novels new old <ul><li>story.html </li></ul><ul><li>list.html </li></ul><ul><li>rock.html </li></ul><ul><li>sea.html </li></ul><ul><li>verse.html </li></ul>
  29. 29. Ссылки на другие сайты <A HREF=&quot; http:// www.mail.ru&quot;> Почта </A> <ul><li>на главную страницу сайта </li></ul>index.htm, index.html, default.asp, … <ul><li>на конкретную страницу сайта ( URL ) </li></ul><A HREF=&quot;http://www.vasya.ru /text/a.htm &quot;> Васин текст </A> <ul><li>на файл для скачивания </li></ul><A HREF=&quot;http://www.vasya.ru /prog.zip &quot;> Скачать </A>
  30. 30. Ссылки внутри страницы <A NAME= &quot; up &quot; ></A> <A HREF=&quot;#chap1&quot;> Глава 1</A><br> <A HREF=&quot;#chap2&quot;> Глава 2</A><br> <A NAME= &quot; chap 1&quot; ></A> <H1>Глава 1</H1> Это текст главы 1. Это текст главы 1. Это текст главы 1. Это текст главы 1.<BR> <A HREF=&quot;#up&quot;> Наверх</A> <A NAME= &quot; chap2 &quot; ></A> <H1>Глава 2</H1> Это текст главы 2. Это текст главы 2. Это текст главы 2. Это текст главы 2.<BR> <A HREF=&quot;#up&quot;> Наверх</A> <ul><li>в другом файле </li></ul><A HREF=&quot;texts.html #color &quot;> Цвет текста </A> метка (якорь) переход на метку
  31. 31. Запуск почтовой программы <A HREF=&quot; mailto: vasya@mail.ru&quot;> Напишите мне! </A>
  32. 32. Гиперссылки в HEFS локальная ссылка Ctrl-A гиперссылка на выделенный блок, адрес вводить вручную вставить только адрес файла Автоматически строится относительный адрес! !
  33. 33. Web- страницы. Язык HTML Тема 4. Списки © К.Ю. Поляков, 2007
  34. 34. Маркированные списки < UL > < LI >Вася < LI >Петя < LI >Коля </ UL > unordered list ( неупорядоченный список ) list item ( элемент списка ) изменение маркера: <UL TYPE =&quot;disk&quot;> ... </UL> disk  circle ○ square ■
  35. 35. Нумерованные списки < O L > < LI >Вася < LI >Петя < LI >Коля </ O L > ordered list ( упорядоченный список ) изменение нумерации: <OL TYPE =i START =3> ... </OL> 1, i, I, a, A
  36. 36. Списки определений < DL > < DT >компьютер <DD>устройство для обработки информации < DT >дискета <DD>гибкий магнитный диск < DT >винчестер <DD>жесткий магнитный диск </ DL > definition list ( список определений ) definition term ( термин ) definition description ( описание )
  37. 37. Многоуровневые списки <UL> <LI>Города России        <LI>Города Украины    </UL> <OL>   <LI>Москва   <LI>Санкт-Петерург </OL> <OL>   <LI>Киев   <LI>Одесса </OL>
  38. 38. Списки в HEFS Ctrl-L вставить элемент списка <LI>
  39. 39. Web- страницы. Язык HTML Тема 5. Рисунки © К.Ю. Поляков, 2007
  40. 40. Форматы рисунков <ul><li>GIF (Graphic Interchange Format) </li></ul><ul><ul><li>сжатие без потерь </li></ul></ul><ul><ul><li>прозрачные области </li></ul></ul><ul><ul><li>анимация </li></ul></ul><ul><ul><li>только с палитрой (2…256 цветов) </li></ul></ul><ul><li>рисунки с четкими границами, мелкие рисунки </li></ul><ul><li>JPEG (Joint Photographer Expert Group) </li></ul><ul><ul><li>сжатие с потерями </li></ul></ul><ul><ul><li>только True Color ( 16,7 млн. цветов ) </li></ul></ul><ul><ul><li>нет анимации и прозрачности </li></ul></ul><ul><li>рисунки с размытыми границами, фото </li></ul><ul><li>PNG (Portable Network Graphic) </li></ul><ul><ul><li>сжатие без потерь </li></ul></ul><ul><ul><li>с палитрой ( PNG-8) и True Color (PNG -24 ) </li></ul></ul><ul><ul><li>прозрачность и полупрозрачность (альфа-канал) </li></ul></ul><ul><ul><li>нет анимации </li></ul></ul><ul><ul><li>плохо сжимает мелкие рисунки </li></ul></ul>
  41. 41. Фон страницы <BODY BACKGROUND =&quot;back.jpg&quot;> &quot;images/back.jpg&quot; &quot;../images/back.jpg&quot; &quot;http://www.vasya.ru/images/back.jpg&quot; Не должно быть &quot;швов&quot;! ! Фон не должен мешать! !
  42. 42. Рисунки в документе < IMG SRC =&quot;flag.jpg&quot;> < IMG SRC =&quot;images/flag.jpg&quot;> < IMG SRC =&quot;../images/flag.jpg&quot;> < IMG SRC =&quot;http://www.vasya.ru/img/flag.jpg&quot;> из той же папки: из другой папки: с другого сервера:
  43. 43. Выравнивание <IMG SRC=&quot;flag.jpg&quot; ALIGN =&quot;left&quot;> left right top bottom ( по умолчанию ) middle
  44. 44. Отступы <IMG SRC=&quot;net.jpg&quot;> <IMG SRC=&quot;net.jpg&quot; HSPACE =10 VSPACE =10> VSPACE ( vertical space ) HSPACE ( horizontal space )
  45. 45. Другие атрибуты <IMG SRC=&quot;myphoto.jpg&quot; ALT =&quot; Моя фотография &quot; WIDTH =100 HEIGHT =150 BORDER =0> <ul><li>всплывающая подсказка </li></ul><ul><li>надпись на месте рисунка, если его нет </li></ul><ul><li>размеры позволяют: </li></ul><ul><li>растянуть - сжать </li></ul><ul><li>не портить дизайн, если рисунка нет </li></ul>толщина рамки вокруг рисунка
  46. 46. Рисунок-гиперссылка <A HREF=&quot;http://www.mail.ru&quot;> <IMG SRC=&quot;mailru.jpg&quot; ALT=&quot; Бесплатная почта &quot; BORDER =0></A> < A HREF=&quot;table.htm&quot;> <IMG SRC=&quot;tbl.jpg&quot; ALT=&quot; Таблицы &quot; BORDER =0> </ A > локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если </A> не вплотную к <IMG …> , будет &quot;хвост&quot; не будет &quot;хвоста&quot;
  47. 47. Рисунки в HEFS вставить рисунок Автоматически вставляются размеры! !
  48. 48. Web- страницы. Язык HTML Тема 6. Таблицы © К.Ю. Поляков, 2007
  49. 49. Простейшая таблица < TABLE BORDER=&quot;1&quot;> < TR > < TD >Таблица из одной строки</ TD > < TD >из трех столбцов</ TD > < TD >без указания ширины таблицы и ячеек.</ TD > </ TR > </ TABLE > толщина рамки TABLE таблица TR = table row строка таблицы TD = table data данные таблицы TH = table header заголовок (жирный, по центру)
  50. 50. Размеры <TABLE WIDTH =&quot;60%&quot; HEIGHT =&quot;300&quot;> ... </TABLE> ширина в пикселях или в % от ширины окна браузера высота в пикселях <TR HEIGHT =&quot;50&quot;> ... </TR> всей таблицы: строки: ячейки: <TD WIDTH = &quot;2 5 %&quot; HEIGHT =&quot;50&quot;> ... </TD> ширина в пикселях или в % от ширины таблицы
  51. 51. Выравнивание <TABLE BORDER=&quot;1&quot;> <TR ALIGN =&quot;center&quot; VALIGN =&quot;top&quot;> <TD WIDTH=120 HEIGHT=100>По центру, по верхней границе</TD> <TD ALIGN =&quot;right&quot; VALIGN =&quot;middle&quot; WIDTH=200>По правой границе, по середине</TD> </TR> </TABLE> <TABLE ALIGN =&quot;center&quot;> ... </TABLE> всей таблицы: информации в ячейках: left, center, right left, center, right top, middle, bottom
  52. 52. Фон и цвет текста <TABLE BORDER=&quot;1&quot; BGCOLOR =&quot;green&quot;> <TR HEIGHT=30 BGCOLOR =&quot;blue&quot;> <TD>< FONT COLOR=&quot;white&quot;>Привет!</ FONT ></TD> <TD BGCOLOR =&quot;red&quot;></TD> </TR> <TR> <TD BACKGROUND =&quot;web.jpg&quot;>Таблица из двух строк</TD> <TD>и двух столбцов</TD> </TR> </TABLE> цвет фона фоновый рисунок
  53. 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
  54. 54. Объединение ячеек <TABLE BORDER=&quot;1&quot;> <TR> <TD COLSPAN =&quot;3&quot;>Привет!</TD> </TR> <TR> <TD>Вася,</TD> <TD>Петя,</TD> <TD>Маша!</TD> </TR> </TABLE> <TABLE BORDER=&quot;1&quot;> <TR> <TD ROWSPAN =&quot;3&quot;>Привет!</TD> <TD>Вася,</TD> </TR> <TR><TD>Петя,</TD></TR> <TR><TD>Маша!</TD></TR> </TABLE> column span охват столбцов row span охват строк
  55. 55. Вложенные таблицы <TABLE BORDER=&quot;0&quot; CELLSPACING=10> <TR><TD> </TD> <TD> </TD></TR> </TABLE> <TABLE BORDER=&quot;1&quot;> <TR><TD>Вася</TD><TD>Петя</TD></TR> <TR><TD>Маша</TD><TD>Даша</TD></TR> </TABLE> <TABLE BORDER=&quot;1&quot;> <TR><TD>1</TD><TD>22</TD></TR> <TR><TD>333</TD><TD>4444</TD></TR> </TABLE>
  56. 56. Таблицы в HEFS
  57. 57. Web- страницы. Язык HTML Тема 7. Фреймы © К.Ю. Поляков, 2007
  58. 58. Фреймы Фрейм ( frame ) – это часть сложной Web- страницы, в которую может быть загружена другая Web- страница. 3 файла : left.html – страница в левой части right.html – страница в правой части index.html – описание структуры
  59. 59. Описание структуры index.html <HTML> <HEAD> <TITLE>Фреймы-столбцы</TITLE> </HEAD> < FRAMESET COLS =&quot;30%,*&quot;> < FRAME SRC =&quot;left.html&quot;> < FRAME SRC =&quot;right.html&quot; NAME =&quot;qq&quot;> </ FRAMESET > </HTML> columns столбцы ширина в пикселях или % все остальное место source источник имя фрейма (для ссылок) <BODY> ... </BODY>
  60. 60. Граница между фреймами <FRAMESET COLS=&quot;30%,*&quot; FRAMESPACING =&quot; 1 0&quot;> ... </FRAMESET> <FRAMESET COLS=&quot;30%,*&quot; FRAMEBORDER =&quot;0&quot;> ... </FRAMESET> граница между фреймами: 0 – невидима, 1 - видима ширина полосы между фреймами, за которую можно перетащить границу
  61. 61. Настройка фрейма (FRAME) <FRAME SRC=&quot;a.htm&quot; MARGINWIDTH =&quot;0&quot; MARGINHEIGHT =&quot;0&quot; NORESIZE SCROLLING =&quot;auto&quot;> убрать отступы от края фрейма до содержимого полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда запретить изменение размеров
  62. 62. Фреймы-строки index.html <HTML> <HEAD> <TITLE>Фреймы-ст роки </TITLE> </HEAD> < FRAMESET ROWS =&quot; 120 ,*&quot;> < FRAME SRC =&quot;up.html&quot;> < FRAME SRC =&quot;down.html&quot; NAME =&quot;qq&quot;> </ FRAMESET > </HTML> строки ширина в пикселях или %
  63. 63. Сложные структуры (3 фрейма) index.html <FRAMESET COLS=&quot;30%,*&quot;> <FRAME SRC=&quot;left.html&quot;> </FRAMESET> <FRAMESET ROWS=&quot;40,*&quot;> <FRAME SRC=&quot;up.html&quot;> <FRAME SRC=&quot;down.html&quot;> </FRAMESET>
  64. 64. Как открыть ссылку в другом фрейме <FRAME ... NAME =&quot; qq &quot;> <A HREF=&quot;chapter 2 .htm&quot; TARGET =&quot; qq &quot;> Глава 2 </A> TARGET _ blank – в новом окне _ parent – в родительском окне _ top – в главном окне (убрать фреймы)
  65. 65. Фреймы в HEFS
  66. 66. Работа с несколькими страницами в HEFS переключение страниц закрыть текущую страницу ( Ctrl-W ) просмотр активной страницы
  67. 67. Web- страницы. Язык HTML Тема 8. Понятие о Javascript © К.Ю. Поляков, 2007
  68. 68. Что может Javascript ? <ul><li>информация статична </li></ul><ul><li>нет интерактивности (только переход на другую страницу) </li></ul>Чем плоха HTML- страница? Что можно сделать с помощью Javascript ? <ul><li>изменение рисунка при наведении мыши </li></ul><ul><li>выпадающие меню </li></ul><ul><li>всплывающие подсказки </li></ul><ul><li>фотогалерея без перегрузки страницы </li></ul><ul><li>движение объекта по экрану </li></ul><ul><li>Javascript может быть отключен в браузере </li></ul>
  69. 69. Основные принципы <ul><li>каждый элемент на странице (текст, рисунок, таблица) – это объект , имеющий свои свойства </li></ul><ul><li>свойства объекта можно менять из программы на Javascript ( скрипта ) </li></ul><ul><li>все, что происходит – это события </li></ul><ul><li>все события можно « обрабатывать », т.е. как-то реагировать на них </li></ul>HTML + Javascript = DHTML (Dynamic HTML) Javascript – это язык программирования! !
  70. 70. Замена рисунка при движении мыши <IMG SRC=&quot;image1.gif&quot;       onMouseOver =&quot;this.src= ' image2.gif ' &quot;       onMouseOut =&quot;this.src= ' image1.gif ' &quot;> когда курсор мыши над рисунком после ухода мыши События : onMouseOver – курсор мыши над объектом onMouseOut – курсор мыши ушел с объекта начальный рисунок this – этот объект this.src – свойство SRC этого объекта
  71. 71. Конец фильма

×