'

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

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





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

9 Физическая разметка


Слайд 9

10 Специальные символы - мнемоники


Слайд 10

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


Слайд 11

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


Слайд 12

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


Слайд 13

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


Слайд 14

15 Форматированный текст (тексты программ) 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)


Слайд 15

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


Слайд 16

17 Кодирование цвета имена 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


Слайд 17

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


Слайд 18

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


×

HTML:





Ссылка: