Бегущая строка <MARQUEE WIDTH=200 BGCOLOR =#99ccff>Внимание!!!</MARQUEE>

1.54M

Category:

internet

Основные теги

1.

СОЗДАНИЕ Web-сайта
КОММУНИКАЦИОННЫЕ
ТЕХНОЛОГИИ

Технология создания сайта
Способы создания сайта
Язык разметки
гипертекста HTML
(Hyper Text Markup Language)
Текст размечают
специальными
метками – тегами
Текстовый
редактор
Визуальный
HTML-редактор,
конструктор сайтов
Документ
сохраняют как
Web-страницу
Microsoft FrontPage
uCoz, Сайткрафт
и др.

3.

Создание сайта
Web-дизайнер - специалист,
проектирующий
структуру
Web-сайта,
подбирающий
способы подачи информации и
выполняющий художественное
оформление Web-проекта.
Создадим сайт школьного
«Компьютерная графика».
творческого
объединения

4.

Содержание и структура сайта
Содержание сайта должно отражать творческую жизнь
участников
объединения,
привлекать
внимание
единомышленников.
Структура (план) сайта - разбиение общего содержания
на смысловые разделы и отдельные страницы с указанием
связей между ними.
Иерархическая структура сайта
Главная страница
Новости и
объявления
Галерея
Личные
страницы
Полезные
ссылки
Растровая
графика
Руководитель
Векторная
графика
Ученик 1
Сканография
Ученик 2

5.

Оформление сайта
На главной странице размещают название сайта,
тематическое графическое изображение, короткий текст с
описанием содержания сайта, главное меню - ссылки на
основные разделы сайта.

6.

Оформление сайта
Каждая страница сайта, как правило, имеет несколько
постоянных элементов, которые всегда находятся на одних и
тех же местах. Это:
• заголовок сайта, расположенный в самом верху
страницы;
• главное меню, как правило, размещаемое в левой части
страницы.
Графика
Меню
Название сайта
Название страницы
Фон
Поле ввода информации
Координаты
Примерный шаблон страниц сайта

7.

Оформление сайта
Рекомендации при наполнении страниц сайта
информационными материалами
Не ставьте точку в названиях сайта и страниц,
если они состоят из одного предложения
Названия пунктов меню делайте краткими
Не выбирайте для страниц пёстрый фон
Не размещайте на странице слишком много
информационных и художественных блоков
Не пишите слишком длинных текстов
В каждом абзаце используйте
одни и те же приёмы форматирования

8.

Тестирование сайта
Тестирование сайта – проверка того, что сайт правильно
отображается разными браузерами:
• тексты хорошо читаются на выбранном фоне,
• рисунки расположены на своих местах,
• гиперссылки обеспечивают правильные переходы.
Тестирование проводят перед размещением сайта в сети
Интернет.

9.

Основные теги HTML

10. Язык HTML

HTML не является языком программирования,
он предназначен для разметки текстовых
документов. HTML состоит из тегов.
Основным назначением HTML тегов является
указание области действия тех или иных
правил разметки документов. Большая часть
HTML тегов состоит из двух частей:
открывающий тег <...> и закрывающий тег
</...>.

11. Структура HTML-документа

<html>
<head>
<title>Моя первая HTML-страница</title>
</head>
<body>
<H1>Первая страница</H1>
<p>Здравствуйте!</p>
<IMG SRC=“foto.jpg” ALT=“Фото”>
</body>
</html>

12. Теги и атрибуты

Тег – код языка HTML , с помощью которого выполнятся
разметка исходного текста. Тег записывается в угловых скобках.
Имя атрибута
Имя тега Значение атрибута
<H3 ALIGN = CENTER> Страница должна иметь заголовок </H3>
Атрибут
Содержимое элемента
Закрывающий
тег
Теги не отображаются сами, а влияют на способ отображения
документа. Атрибуты – свойства тегов.

13. Теги структуры

<HTML> Первый тег, сообщает веб-браузеру, что
документ написан на языке HTML.
<HEAD> Этот тег указывает на начало области
заголовка Web-страницы.
<TITLE>
Структура
Web-страницы</title>
Обязательный контейнер, содержащий текст
заголовка Web-страницы, отображается в
заголовке окна браузера.
</head> Конец области заголовка Web-страницы.
<BODY > Тело Web-страницы.
</ BODY >
</ HTML > Конец HTML-документа.

14. Уровни заголовков

Заголовки позволяют структурно разделить текст на разделы.
<H1> Заголовок первого уровня </ H1>
<H2> Заголовок второго уровня </ H2>
………..
<H6> Самый маленький заголовок</ H6>
Атрибут ALIGN – выравнивание управляет горизонтальным
выравниванием, принимает значения:
LEFT - влево,
CENTER – по центру,
RIGHT – вправо,
JUSTIFY – по ширине.
<H1 ALIGN = CENTER > Заголовок первого уровня </ H1>

15. Форматирование текста

<P> Текст </p> - абзац, атрибут ALIGN
<br> - переход на новую строку
<B> Текст </b> - выделение текста полужирным
шрифтом
<I>Текст </i> - выделение текста курсивом
<Pre> Текст </pre> - предварительное
форматирование текста.
<Center> </Center> - выравнивание по центру

16. Форматирование текста

<font>...</font> - с помощью данного тега
осуществляется изменение внешнего вида текста.
Имеет атрибуты:
color - цвет
face - шрифт
size — размер
Изменения вносятся после тега <body> перед основным
текстом.
Размер шрифта может принимать значения от 1 до 7,
при этом 1 — самый маленький, 7 — самый большой.
<Font face= «Arial» size=3 color= «blue»> Это шрифт arial
размером 3, цвет синий </font>

17. Списки

Маркированный список:
<ULTYPE=square >
<LI> Первый пункт списка
<LI> Второй пункт списка
<LI> Третий пункт списка
</ul>
Атрибут TYPE определяет внешний вид маркера:
disc – закрашенные круглые маркеры (по умолчанию);
circle – не закрашенные круглые маркеры;
square – квадратные маркеры.

18. Списки

Нумерованный список
<OL>
<LI> Первый пункт списка
<LI> Второй пункт списка
<LI> Третий пункт списка
</ol>
Атрибут TYPE определяет вид символа списка:
А – прописные латинские буквы (A, B, C …);
a – строчные латинские буквы (a, b, c …);
I – большие римские цифры (I, II, III …);
i – маленькие римские цифры (I, II, III …);
1 – арабские цифры (1, 2, 3 …) – по умолчанию.
START=n – начальное значение списка.

19. Гиперссылки

Гипертекстовая ссылка – основной элемент всех
гипертекстовых систем, которые указывают на другой
документ или на другую часть того же документа.
Задается тегами <A> </a>, обязательно наличие одного
из атрибутов HREF и NAME.
Ссылка за пределы данного документа:
<A HREF="адрес ссылки">Текст для щелчка </a>
Атрибут NAME позволяет перейти к отмеченному якорем
месту этого же документа:
<A NAME="#имя_якоря">Текст для щелчка </a>

20. Рисунки на WEB-страничке

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

21. Рисунки на WEB-страничке

Атрибуты тега <IMG>
HEIGTH - длина
WIDTH - ширина
ALIGN - позиционирование на экране (top, middle, bottom,
left, right)
BORDER - толщина обрамления
VSPACE - размер пустого пространства над и под
изображением
HSPACE - размер пустого пространства слева и справа
от изображения
<IMG SRC=“URL” ALT=“Текст” HEIGTH =“длина”>

22. Горизонтальная линия

<HR> - горизонтальная линия (по умолчанию
объемная с тенью) позволяет разделить длинный
формально неограниченный текст на отдельные
разделы.
Атрибуты:
SIZE – толщина линии в пикселях;
WIDTH – ширина линии в пикселях или в процентах от
ширины окна браузера;
ALIGN – положение на экране (слева, справа, по центру);
NOSHADE – линия представляется простой однотонной
темной полосой.

23. Бегущая строка <MARQUEE WIDTH=200 BGCOLOR =#99ccff>Внимание!!!</MARQUEE>

Бегущая строка
<MARQUEE WIDTH=200 BGCOLOR =#99ccff>Внимание!!!</MARQUEE>
<MARQUEE ><IMG src=“Велосипедист.gif ”></MARQUEE>
Атрибуты:
ALIGN – позволяет разместить текст в верхней TOP, средней MIDDLE,
нижней BOTTON области бегущей строки;
BEHAVIOR – управление бегущей строки на экране:
SCROLL – текст пересекает экран (по умолчанию);
SLIDE – текст выдвигается на экран и останавливается;
ALTERNATE – текст выдвигается, затем перемещается взад-вперед.
BGCOLOR –цвет фона;
DIRECTION – направление движения текста (LEFT, RIGHT);
HEIGHT – высота в пикселях или в %;
WIDTH – ширина в пикселях или в %;
LOOP – количество проходов бегущей строки;
SCROLLAMOUNT – скорость перемещения текста (1 – min, 2000-max);
SCROLLDELAY – время в млс для перерисовки текста.

24. Фон

Атрибуты тега <BODY>
bgcolor - цвет
<Body bgcolor=“green” >
<Body bgcolor=“#00FF00”>

25. Фон

Атрибуты тега <BODY>
BACKGROUND – задает графическое изображение,
которое, как кафельная плитка, заполнит фон
документа.
<Body BACKGROUND =“путь_имя_файла.jpeg” >
TOPMARGIN – верхняя граница в пикселях;
BOTTOMMARGIN – нижняя граница в пикселях;
LEFTMARGIN – левая граница в пикселях;
RIGHTMARGIN – правая граница в пикселях.
LINK - цвет гиперссылки;
ALINK – цвет активной гиперссылки.

26. Таблицы

Таблицы являются очень удобным средством форматирования данных на
Web-станице. Они позволяют решать чисто дизайнерские задачи:
выравнивать части страницы друг относительно друга, размещать рядом
рисунки и текст, управлять цветовым оформлением.
При создании таблиц используется принцип вложения: внутри основного
элемента таблицы TABLE создается ряд элементов, определяющих строки
TR, а внутри этих элементов размещаются элементы для описания каждой
ячейки в с строке TD.
<TABLE> </table> - внешний элемент таблицы
<CAPTION> Подпись таблицы</CAPTION>
<TR> </tr> - элемент, задающий строку таблицы
<TD> </td> - элемент, задающий ячейку таблицы
<COL> - столбец таблицы
Например:
Таблица из 2 строк, в первой строке - 2 ячейки, во втрой – 3.
<TABLE>
<TR> <TD> 1.1</td> <TD> 1.2</td> </tr>
<TR> <TD>2.1 </td> <TD>2.2 </td> <TD>2.3 </td> </tr>
</table>

27. Таблицы

ALIGN – выравнивание (LEFT, RIGHT,CENTER);
BORDER – толщина границы (BORDER=3);
BACKGROUND – фоновое изображение для всей таблицы;
BGCOLOR – фоновый цвет;
BORDERCOLOR – цвет рамки;
CELLPADDING – расстояние от границ ячейки до ее содержимого;
CELLSPACING – расстояние между ячейками в пикселах;
HSPACE – свободное пространство от таблицы слева и справа;
SPACE - свободное пространство от таблицы снизу и сверху;
COLSPEC – столбцы фиксированной ширины в символах или в
процентах;
WIDTH – ширина таблицы в пикселах или в процентах от текущей
ширины окна браузера (WIDTH=256,WIDTH=100%).

28. Таблицы

English Русский Rules