Без темы
<<  Язык поисковых запросов Язык телодвижений  >>
Язык разметки гипертекста
Язык разметки гипертекста
Html-теги
Html-теги
Html-теги
Html-теги
Структура HTML-документа
Структура HTML-документа
Структура HTML-документа
Структура HTML-документа
Параметры документа
Параметры документа
Параметры документа: пример
Параметры документа: пример
Индексирование документы
Индексирование документы
Кодировка страницы
Кодировка страницы
Кодировка страницы: пример
Кодировка страницы: пример
Заголовки
Заголовки
Стили текста
Стили текста
Шрифт
Шрифт
Предварительное форматирование
Предварительное форматирование
Верхние и нижние индексы
Верхние и нижние индексы
Выравнивание
Выравнивание
Графика на Web-страницах
Графика на Web-страницах
Графика на Web-страницах
Графика на Web-страницах
Графика на Web-страницах: пример
Графика на Web-страницах: пример
Графика на Web-страницах: пример
Графика на Web-страницах: пример
Графика на Web-страницах: пример
Графика на Web-страницах: пример
Графика на Web-страницах: пример
Графика на Web-страницах: пример
Ссылки на Web-страницах
Ссылки на Web-страницах
Ссылки на Web-страницах
Ссылки на Web-страницах
Ссылки на Web-страницах
Ссылки на Web-страницах
Ссылки на Web-страницах
Ссылки на Web-страницах
Списки на Web-страницах
Списки на Web-страницах
Списки на Web-страницах
Списки на Web-страницах
Списки на Web-страницах
Списки на Web-страницах
Списки на Web-страницах
Списки на Web-страницах
Списки с графическими маркерами
Списки с графическими маркерами

Презентация: «Язык разметки гипертекста». Автор: valiv. Файл: «Язык разметки гипертекста.ppt». Размер zip-архива: 245 КБ.

Язык разметки гипертекста

содержание презентации «Язык разметки гипертекста.ppt»
СлайдТекст
1 Язык разметки гипертекста

Язык разметки гипертекста

Часть1. Структура и параметры html-документа. Форматирование текста. Графика на Web-страницах. Ссылки. Маркеры.

2 Html-теги

Html-теги

HTML-тег напоминает переключатель, с помощью которого вы что-то включаете или выключаете в вашем браузере. Теги могут быть написаны заглавными и строчными буквами. Наиболее мудро в тегах использовать заглавные буквы, чтобы они выделялись в тексте. <TAG>...</TAG> Теги, в основном, используются попарно. Открывающий тег включает, закрывающий тег выключает. <TAG ATTRIBUTE>...</TAG> Иногда теги имеют один или несколько атрибутов. Атрибуты предоставляют дополнительную информацию для браузера. Тег говорит браузеру ЧТО делать, а атрибут говорит КАК это делать. <TAG ATTRIBUTE="...">...</TAG>

3 Html-теги

Html-теги

Всегда обращайте внимание на порядок расположения тегов: Верно: <A><B></B></A> Неверно: <A><B></A></B>

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

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

<HTML> <HEAD> <title>простое название</TITLE> </HEAD> <BODY> содержание страницы </BODY> </HTML>

<HTML> <HEAD> <title>простое название</TITLE> </HEAD> <BODY> содержание страницы </BODY> </HTML>

<HTML> <HEAD> <title>простое название</TITLE> </HEAD> <BODY> содержание страницы </BODY> </HTML>

<HTML> <HEAD> <title>простое название</TITLE> </HEAD> <BODY> содержание страницы </BODY> </HTML>

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

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

6 Параметры документа

Параметры документа

Параметры документа задаются через тег <BODY>. Параметры – это специальные символьные команды, которые «понимает» браузер.

Атрибуты тега BODY

Атрибуты тега BODY

bgcolor

цвет фона задан по схеме RGB (Красный Зеленый Синий), 6-разрядное шестнадцатеричное число (#RRGGBB) или имя цвета (например red - Красный, green - Зеленый, blue - Синий)

background

Фон - графический файл

text

Цвет текста

link

Цвет ссылки

alink

Цвет активной ссылки

vlink

Цвет посещенной ссылки

7 Параметры документа: пример

Параметры документа: пример

<HTML> <HEAD> <TITLE>Заглавие документа</TITLE> </HEAD> <body bgcolor="#fee8e0" text="black" link="#0000ff" alink="#ff0000" vlink="#000080"> Это наш пример!!! </body> </HTML>

8 Индексирование документы

Индексирование документы

HTML-документы могут содержать набор ключевых слов и других вспомогательных параметров, такие как заглавие, описание сайта, авторство для индексирования и лучшего нахождения поисковыми системами страницы. Эти параметры обозначены в META-тегах.

Атрибуты тега META

Атрибуты тега META

description

Описание документа

keywords

Ключевые слова, разделенные запятыми

9 Кодировка страницы

Кодировка страницы

Для здания кодировки используется тег META, стоящий в теге HEAD. Атрибуты тега для задания кодировок:

http-equiv

content

Кодировка

Content-Type

text/html; charset=windows-1251

Кириллица Windows

Content-Type

text/html; charset=KOI8-R

Кириллица KOI8-R

Content-Type

text/html; charset=iso-8859-5

Кириллица ISO

Другие кодировки...

Другие кодировки...

Другие кодировки...

10 Кодировка страницы: пример

Кодировка страницы: пример

<HTML> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"> <META NAME="DESCRIPTION" CONTENT="Домашняя страница Васи Пупкина"> <META NАМЕ="keywords" CONTENT="Пупкин, дизайн, htm, html"> <TITLE>Заглавие документа</TITLE> </HEAD> <BODY> Вася <br> Содержание документа: автоматически отображается на Кириллице! </BODY> </HTML>

11 Заголовки

Заголовки

В HTML существуют специальные теги для заголовков: от Н1 (самого крупного) до Н6 (самого мелкого): <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"> </HEAD> <BODY> <H1> Заголовок 1</H1> <H2> Заголовок 2</H2> <H3> Заголовок 3</H3> <H4> Заголовок 4</H4> <H5> Заголовок 5</H5> <H6> Заголовок 6</H6> </BODY> </HTML>

12 Стили текста

Стили текста

<B> bold жирный <I> italic наклонный <U> underline подчеркнутый <S> strikethrough зачеркнутый <HTML> <BODY> <B> bold</B> <br> <I> italic </i><br> <U> underline </u><br> <S> strikethrough </s><br> <B><I> bold & italic </I></B> </BODY> </HTML>

13 Шрифт

Шрифт

Шрифт задаётся тегом FONT. <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"> </HEAD> <BODY> <FONT FACE="Arial Cyr, Helvetica" SIZE="4" COLOR="green"> Цвет, размер и шрифт выбраны.</FONT> </BODY> </HTML>

Атрибуты тега FONT

Атрибуты тега FONT

Face

Имена шрифтов, разделенные запятыми

Size

Размер от 1 до 7 (по умолчанию 3)

Color

Цвет шрифта

14 Предварительное форматирование

Предварительное форматирование

Неразрывный пробел – &nbsp; (non-breaking space). Перенос строки – <br> Размещение текста в том виде, в котором он представлен – <PRE>... </PRE> Пример: <HTML> <BODY> <PRE> Предварительное форматирование текста // * // </PRE> <br> Mitsubishi Galant <br> Mitsubishi Galant. <P> Начало нового абзаца! </P> </BODY> </HTML>

15 Верхние и нижние индексы

Верхние и нижние индексы

Верхний индекс - тег SUP, а нижний - SUB. <HTML> <BODY> X<SUP>3</SUP> <br> A<SUB>3</SUB> </BODY> </HTML>

16 Выравнивание

Выравнивание

Тег нового абзаца <P> <HTML> <BODY> <p align=center>Значение CENTER - центрирование</p> <p align=right>Значение RIGHT - выравнивание по правому краю.</p> <p align=left>Значение LEFT - выравнивание по левому краю</p> </BODY> </HTML>

Атрибут тега <P>

Атрибут тега <P>

ALIGN

Выравнивание

left

По левой границе

center

По центру

right

По правой границе

justify

По ширине

17 Графика на Web-страницах

Графика на Web-страницах

На Web-страницах возможно размещать графическую информацию. Желаемым условием графики в сети является небольшой размер файлов, наиболее часто реализуется в форматах GIF и JPEG.

Формат

Диапазон цветов

Прозрачность

Анимация

GIF

От 2 до 256

Да

Да

JPEG

16 милионов или 256 оттенков (grayscale)

Нет

Нет

18 Графика на Web-страницах

Графика на Web-страницах

Для публикаций изображений используется тег IMG: <HTML> <BODY> <IMG SRC= "image/1.gif" WIDTH="155" HEIGHT="155" BORDER="2" ALT="Бабочка" align="right"> </BODY> </HTML>

Атрибуты тега IMG

Атрибуты тега IMG

SRC

Имя графического файла и путь до него

WIDTH

Ширина изображения в пикселах

HEIGHT

Высота изображения в пикселах

BORDER

Ширина рамки вокруг изображения в пиксели

ALT

Альтернативный текст изображения

ALIGN

Расположение на экране: left - слева, right – справа

19 Графика на Web-страницах: пример

Графика на Web-страницах: пример

<IMG SRC=ie.gif ALIGN="RIGHT" BORDER=1 ALT=“Веселая картинка"> Картинку можно разместить справа от текста...

20 Графика на Web-страницах: пример

Графика на Web-страницах: пример

<img src=ie.gif align="LEFT"> <img src=ie2.gif align="RIGHT"> Атрибут ALIGN дает возможность разместить текст на Web-странице между двумя изображениями...

21 Графика на Web-страницах: пример

Графика на Web-страницах: пример

<IMG SRC=3.GIF ALIGN="TOP"> Этот текст выровнен по верхней кромке изображения

<IMG SRC=3.GIF ALIGN="MIDDLE"> Этот текст выровнен по средней оси изображения

<IMG SRC=3.GIF ALIGN="BOTTOM"> Этот текст выровнен по нижней кромке изображения

22 Графика на Web-страницах: пример

Графика на Web-страницах: пример

<IMG SRC=PALMA.JPG ALIGN="LEFT" HSPACE=30 VSPACE=30>

23 Ссылки на Web-страницах

Ссылки на Web-страницах

Ссылки служат для перехода с одной страницы на другую, перенаправление по протоколам ссылок и прочее. Реализуются с помощью тега A.

href

target

name

Атрибуты тега A

Атрибуты тега A

Имя и путь к странице Интернет-адрес с именем протокола: http:// Ссылка отправления письма на e-mail: mailto: Переход на ссылку внутри документа #

Имя окна, в которое отправит ссылка: _blank - открывает ссылку в новом окно браузера _top - окно стоящее поверх остальных _parent - открывает ссылку в родительском окне (по умолчанию)

Имя ссылки в документе

24 Ссылки на Web-страницах

Ссылки на Web-страницах

Ссылка в пределах одного сайта:

<A HREF=menu/1.htm>Заходите в гости!</А>

Ссылка на ресурс Интернет:

<A HREF=http://gimn6.krsk.info target="_blank">Ссылка на сайт гимназии 6 </А>

Ссылка на ресурс Интернет:

<A HREF= http://www.mysite.ru/html/example.html> Текст является ссылкой на документ example.html на сайте www.mysite.ru в папке HTML</A>

Ссылка на адрес электронной почты:

<A HREF="mailto:vlata@hotbox.ru"> Присылайте письма!</A>

25 Ссылки на Web-страницах

Ссылки на Web-страницах

Ссылка на метку внутри данного документа:

<A HREF="#mesto">Переход по метке</A> – переход к строке этого же документа, помеченной <A NAME="mesto">

Картинка-ссылка

<A HREF=example.html><img src=example.gif width=100 height=100 border=0></A> <A HREF=example2.gif><img src=example.gif width=100 height=100 border=0></A>

Ссылка на произвольный файл:

<A HREF= "MyFile.exe" Title=“Файл в 10 Мегабайт">Скачать программу</А>

26 Ссылки на Web-страницах

Ссылки на Web-страницах

Абсолютные ссылки:

<A HREF= http://www.mysite.ru/html/example.html> Текст является ссылкой на документ example.html на сайте www.mysite.ru в папке HTML </A>

Относительные ссылки:

<A HREF=/html/example.html> Ссылка на файл example.html лежащий в папке HTML сайта </A>

Относительные ссылки:

<A HREF=../example.html> <img src=images/example.gif width=100 height=100 border=0> </A>

27 Списки на Web-страницах

Списки на Web-страницах

МАРКИРОВАННЫЕ СПИСКИ: <UL> – начало текста списка <LI> – начало каждого элемента в списке

<UL> <LI>Раз</LI> <LI>Два</LI> <LI>Три</LI> <LI>Четыре</LI> <LI>Пять</LI> </UL>

Атрибут TYPE позволяет изменить вид маркера:

<UL TYPE=“square"> <LI>Раз</LI> <LI>Два</LI> <LI>Три</LI> <LI>Четыре</LI> <LI>Пять</LI> </UL>

Значение

Пример

circle

?

disk

?

square

?

28 Списки на Web-страницах

Списки на Web-страницах

НУМЕРОВАННЫЕ СПИСКИ: <OL> – начало текста списка <LI> – начало каждого элемента в списке

<OL> <LI>Раз</LI> <LI>Два</LI> <LI>Три</LI> <LI>Четыре</LI> <LI>Пять</LI> </OL>

Атрибут TYPE позволяет изменить стиль нумерации:

Значение

Пример

<OL TYPE="I"> <LI>Раз</LI> <LI>Два</LI> <LI>Три</LI> <LI>Четыре</LI> <LI>Пять</LI> </OL>

A

A, B, C

a

a, b, c

I

I, II, III

i

I, ii, iii

1

1, 2, 3

29 Списки на Web-страницах

Списки на Web-страницах

Атрибуты START и VALUE позволяют изменить порядок нумерации списка: START – дает возможность присвоить начальному элементу номер, отличный от 1; VALUE – принудительно назначает элементу произвольный номер. <OL START=4> <LI>Иванов</LI> <LI VALUE="10">Сидоров</LI> <LI>Пупкин</LI> </OL>

30 Списки на Web-страницах

Списки на Web-страницах

Список с несколькими уровнями вложенности: <OL> <LI>форматирование текста</LI> <UL> <LI>жирность; </LI> <LI>наклон; </LI> <LI>цвет </LI> </UL> <LI>работа с абзацами </LI> </OL>

31 Списки с графическими маркерами

Списки с графическими маркерами

Картинки для маркеров должны быть небольшого размера, соответствовать форматированию текста. Образцы маркеров можно найти на сайтах: www.grapholina.com/Grafics и www.theshockzone.com

<UL> <BR><img src="spisok.gif">Раз <BR><img src="spisok.gif">Два <BR><img src="spisok.gif">Три <BR><img src="spisok.gif">Четыре <BR><img src="spisok.gif">Пять </UL>

Для указания способа вертикального выравнивания текста относительно границ маркеров можно воспользоваться атрибутом ALIGN (top, middle, bottom) тега IMG: <BR><img src="spisok.gif" align="middle">Раз Атрибут HSPACE тега IMG позволит отделить картинку маркера от текста: <BR><img src="spisok.gif" HSPACE="10">Раз

«Язык разметки гипертекста»
http://900igr.net/prezentacija/russkij-jazyk/jazyk-razmetki-giperteksta-195219.html
cсылка на страницу

Без темы

322 презентации
Урок

Русский язык

100 тем
Слайды
900igr.net > Презентации по русскому языку > Без темы > Язык разметки гипертекста