271.39K

Категории:

Интернет

Программирование

Похожие презентации:

HTML - Hyper Text Markup Language язык гипертекстовой разметки

Основы создания Web-страниц

Основы создания web - страниц

Изображения и формы в HTML. 3 определения

HTML (HyperText Markup Language, язык разметки гипертекста)

Практические приемы работы в HTML

Лекция 9. Фреймовые структуры

Интернет-технологии

Основы web-технологий. Технологии создания web-сайтов

Основные принципы HTML и основные теги. 11 класс

Основы web-программирования. Занятие №2. Спецсимволы. Списки. Таблицы. Занятие №3. Гиперссылки. Карты-изображения

1.

Основы webпрограммирования
Занятие №2. Спецсимволы. Списки. Таблицы
Занятие №3. Гиперссылки. Карты-изображения
1

2.

Структура страницы
<HTML> декларация HTML
<HEAD> заголовок
• Название документа и техн. Информация
</HEAD>
<BODY> тело документа
• Текст, изображения, списки, таблицы
</BODY>
</HTML>
2

Пример
<HTML>
<HEAD>
<ТIТLЕ>Домашняя страница Сергея Сергеева </TITLE>
</HEAD>
<BODY>
Домашняя страница Сергея Сергеева.
Сергей Сергеев - писатель-юморист, автор 20 рассказов.
В жизни большой любитель собак и компьютерных игр.
</BODY>
</HTML>
Тег <ТIТLЕ> отвечает за текст в заголовке окна браузера

4.

Структура тега
4

5.

Повторение
Изображения
Списки
Таблицы
спец. символы
5

6.

Гиперссылки.
Карты изображения

7.

Адресация в Интернете
Абсолютные адреса
Корневой
каталог
сайта
site
http://site-name.ru/folder1/folder2/file1
http://site-name.ru/folder3/file2
folder1
index.htm
folder2
Относительные адреса
file1
folder3
file2
folder2/file1
../folder3/file2

8.

Гиперссылки
<A href="way/file_name">
Текст ссылки
</A>

9.

Различные переходы

10.

Переход на новую страницу сайта
Башня
десятиэтажная, три из которых, занимают
<A href="kuranty.htm">Куранты</A>
- часы с боем.

11.

Переход на другой сайт
<P>Более подробно о
<A href="http://www.moskva.ru">
Москве </A> и
<A href="http://www.moscowkremlin.ru">
Московском Кремле </A> можно прочитать
на специализированных сайтах.</P>

12.

Открыть сайт по ссылке в новом
окне
<P>Более подробно о
<A href="http://www.moskva.ru"
target="_blank"> Москве </A> и
<A href="http://www.moscowkremlin.ru">
Московском Кремле </A> можно прочитать
на специализированных сайтах.</P>

13.

Открыть сайт по ссылке
в том же окне
<P>Более подробно о
<A href="http://www.moskva.ru"
target="_self"> Москве </A> и ...
</P>

14.

Ссылки на объекты

15.

Переход на рисунок
<H2>Спасская башня</H2>
<P>Самая величественная и красивая
<A href="spassk.jpg">башня</A>
Кремля, она по праву считается
главной.

16.

Рисунок – Web-страница
Башня
десятиэтажная, три из которых, занимают
<A href="kuranty.htm">Куранты</A> <A href="clock.htm">часы</A> с боем.

17.

Исполнение мелодии
Башня
десятиэтажная, три из которых, занимают
<A href="kuranty.htm">Куранты</A> <A href="clock.htm">часы</A> с
<A href="ring.mp3">боем</A>.

18.

Скачивание архивного файла
<P>Вы можете
<A href="kremlin.zip"> скачать </A>
себе текстовый вариант этой страницы.
</P>

19.

Бланк письма с заполненным
электронным адресом
<P> Если вы захотите поделиться своими
мыслями о нашей страничке, пришлите
<A href="mailto:[email protected]">
письмо </A> по электронной почте.</P>

20.

Более корректное указание
почтового адреса
<P> Если вы захотите поделиться своими
мыслями о нашей страничке, пришлите
письмо по электронной почте:
<A href="mailto:[email protected]">
[email protected]</A>.</P>

21.

Гиперссылка с рисунка
<A href="carsk.htm">
<IMG src="carsk.gif"
width="30" height="75"
align="bottom">
</A>

22.

Информация об элементе во
всплывающем окне
Башня
десятиэтажная, три из которых, занимают
<A href="kuranty.htm" title="Рассказ">
Куранты</A> <A href="clock.htm" title="Фото">
часы</A> с <A href="ring.mp3" title="Бой
курантов">боем</A>.

23.

Внутренние ссылки - якоря

24.

Якорь (метка, закладка)
<A name="anchor_name">

25.

Гиперссылка на якорь
<A name="anchor_name">
<A href="#anchor_name">
текст </A>

26.

Гиперссылка на раздел страницы
<BODY bgcolor="khaki"…>
<A name=metka">…
…
<P align="center">
<A href="#metka">
В раздел страницы</A> </P>
</BODY>

27.

Якорь на начало страницы
<BODY text="#993300" …>
<A name=“#top">…

28.

Задание №3
Наберите с
использованием кодов:
Чистота – залог здоровья.
«ФИРМА»
25>16
H2SO4
Джонсон&KO
Добавьте изображение
Сделать переход на
отдельный сайт,
открытие в новой
вкладке
Переход к разделу
страницы
Ссылка на почту
Ссылка на архив

29.

<A name="anchor1">
<H2> Спасская башня </H2>
anchor2
anchor3
anchor4
anchor5
anchor6
anchor7
anchor8
Никольская
Угловая Арсенальная
Троицкая
Боровицкая
Водовзводная
Беклемишевская
Царская башня
anchor9
Другие башни

30.

Гиперссылка на якорь, находящийся
на другой странице
<A name="anchor1">
<H2> Спасская башня </H2>
index.htm

31.

Гиперссылка на якорь, находящийся
на другой странице
<A name="anchor1">
<H2> Спасская башня </H2>
index.htm
<A href="index.htm#anchor1">
На главную страницу
kuranty.htm
</A>

32.

Карты - изображения

33.

Карты
Преобразование рисунка в карту
<IMG src="way/image_name"
usemap="#map_name">

34.

Карты
Преобразование рисунка в карту
<IMG src="way/image_name"
usemap="#map_name">
Структура карты формируется с помощью тэгаконтейнера MAP.
Области карты задаются тэгами AREA.

35.

36.

Атрибуты тэга AREA
• href – гиперссылка
• alt – альтернативный текст
• shape – очертания области
rect – прямоугольник
circle – окружность
poly – многоугольник
• coords – координаты области

37.

Координаты рисунка
(0,0)
(Xmax,0)
(0,Ymax)
(Xmax,Ymax)

38.

Прямоугольник (shape="rect")
(X1,Y1)
coords="X1,Y1,X2,Y2"
(X2,Y2)

39.

Окружность (shape="circle")
(X,Y)
coords="X,Y,R"
R

40.

Многоугольник (shape="poly")
(X2,Y2)
(X1,Y1)
(X3,Y3)
coords="X1,Y1,X2,Y2,X3,Y3"

41.

42.

43.

44.

45.

Подключение favicon
45

46.

Подготовка
необходимо нарисовать изображение размером
16х16 пикселов
сохранить его в формате ICO в корне сайта под
именем favicon.ico.
46

47.

Подключение
<head>
<link
rel="shortcut icon"
href="/images/favicon.ico"
type="image/x-icon">
</head>
47

48.

Файл не обязательно должен располагаться в
корне сайта,
• следует указать браузеру, где он находится с
помощью тега <link>
Формат рисунка не обязательно должен быть
ICO, допускается использование GIF и PNG.
• необходимо сменить значение атрибута
type на image/gif или image/png
<head>
<link rel="shortcut icon" href="/images/favicon.png" type="image/png">
</head>
48

49.

Мета-теги
49

50.

<META>
charset
content
http-equiv
name
<meta name="Author" content="Ivanov, Иванов
Иван">
< meta name="copyright" content="&copy 2001
MySoft Corp.">

51.

52.

<META>
<meta name="robots" content="index, nofollow">
noindex – не допускает индексирование
документа;
nofollow – не допускает посещение ссылок,
имеющихся в документе;
index – разрешает индексирование документа;
follow – разрешает посещение ссылок,
имеющихся в документе;
all – равносильно заданию index и follow;
none – равносильно заданию noindex и nofollow.

53.

54.

<META>
<meta http-equiv="cache-control" content="nocache">
атрибут content может принимать следующие
значения:
no-cache – запретить кэширование;
private – запретить кэширование proxy-сервером;
no-store -разрешить кэширование proxy-сервером
и запретить кэширование браузером;
public – разрешить любое кэширование.

55.

56.

English Русский Правила