Что такое Web-страницы Гиперссылка активная ссылка на

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

Язык HTML = Hypertext Markup Language (язык разметки гипертекста) HTML-страница – это текстовый файл (Блокнот): index. html <HTML> <HEAD> <TITLE>Моя страница</TITLE> </HEAD> <BODY> Привет! … </BODY> </HTML> images sail. jpg bee. wav man. jpg clock. avi sunset. jpg ball. swf 2

n Тег - начальный или конечный маркеры элемента (команда). Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой. n Атрибут - параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартный или произвольный. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами. <имя_тега атрибут тега=“параметр_атрибута”> <P ALIGN="CENTER"> Регистр символов в именах тегов и атрибутов не учитывается, за исключением значений параметров атрибутов <а HREF=“http: //www. sportedu. ru/”> Атрибуты имеет только начальный тег.

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

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

Структура WEB-страницы <HTML> Этот тег указывает на начало HTML-документа <HEAD> Этот тег указывает на начало области заголовка Web-страницы. Служит для формирования обей структуры документа. <TITLE> Структура Webстраницы </title> Элемент для размещения заголовка Web-страницы. Строка отображается в заголовке окна браузера. </head> Конец области заголовка Web-страницы. <BODY> Начало собственно содержимого Web-страницы. <H 2> Здесь расположен заголовок вашей странички </h 2> <H 2> </h 2> Элемент заголовка <P> Здесь расположен текст первого абзаца вашей странички</p> <P> </p> Элемент абзаца. </body> Конец содержимого Web-страницы. </html> Конец HTML-документа.

Основные ТЭГИ HTML Название тэга Назначение BODY Границы страницы FONT Управления шрифтами IMG Вставка рисунка P Абзац A Указатель A HREF Организация гиперссылки TABLE Таблица TR Строка таблицы TD Ячейка таблицы HR Горизонтальная черта BR Переход на новую строчку

Кодирование цвета • имена red, green, blue, magenta, black, white • шестнадцатеричные коды # FA 8072 R G B # FF 0000 # FFFFFF # 000000 # AAAAAA 8

Управление цветом Кодирование цвета используется для раскрашивания шрифтов, горизонтальных линий, фона и других элементов страницы. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами. Стандартные цвета

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

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

Стили оформления жирный (bold) <B>Вася</B> Вася курсив (italic) <I>Вася</I> Вася подчеркивание (underline) <U>Вася</U> Вася зачеркивание (strike out) <S>Вася</S> Вася верхний индекс (superscript) Вася<SUP>2</SUP> Вася 2 нижний индекс (subscript) Вася<SUB>2</SUB> Вася 2 12

Заголовки: H 1 … H 6 <BODY> <H 1>Заголовок документа</H 1> <H 2>Заголовок раздела</H 2> <H 3>Заголовок подраздела</H 3> <H 4>Заголовок параграфа</H 4> <H 5>Комментарий</H 5> <H 6>Авторские пометки</H 6> </BODY> left, выравнивание: center, right <H 1 ALIGN=center>История</H 1> 13

Специальные символы Символ HTML-код Название ¡ или § § © © или © символ авторского права « « или « левая русская кавычка ® ® или ® ° ° градус ± ± плюс-минус ² ² квадрат ³ ³ куб » » или » ¼ ¼ четверть ½ ½ половина ¾ ¾ три четверти × × знак умножения ÷ ÷ знак деления неразрывный пробел параграф зарегистрированная торговая марка правая русская кавычка 14

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

Выравнивание атрибут тэга <P> <P ALIGN="center"> Этот текст выровнен по центру. </P> <P ALIGN="justify"> Этот текст выровнен по ширине. </P> left right center justify по левой границе по правой границе по центру по ширине ! Не используйте выравнивание по ширине для узких столбцов! 16

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

Рисунки на WEB-страничке <IMG> - элемент для создания ссылки на графический файл (image). Он не содержит конечного тега - вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гиперссылках, вставлять картинки в таблицы, просто размещать рисунки на Web-странице, решать задачи дизайна и т. д. Используются графические форматы: . jpg, . png, . gif Необходимым атрибутом является src - указатель на файл графики: src="Ссылка на файл" Например: <IMG src="bos 2. gif> - обычный рисунок При вставки рисунка в текст надо учитывать: HSPACE- отступ текста от рисунка в пикселях WIDTH- ширина рисунка HEIGHT- высота рисунка в пикселях

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

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

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

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

Фон страницы <BODY BACKGROUND="back. jpg"> "images/back. jpg" ". . /images/back. jpg" "http: //www. vasya. ru/images/back. jpg" ! Не должно быть "швов"! ! Фон не должен мешать! 23

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

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

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

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

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

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

Фон и цвет текста цвет фона <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> 30

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

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

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

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

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

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

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

Загрузка рисунка по ссылке На странице сайта надо помещать рисунок маленького размера, а по ссылке осуществлять загрузку рисунка нужного размера <A HREF=”a. jpg”><IMG SRC=”a. jpg” WIDTH=“ 30” HEIGHT=“ 75”> </A>