900igr.net > Презентации по информатике > HTML > Теги для сайта.pptx
РЕКЛАМА
<<  Как вставить гиперссылку
Все презентации
Язык HTML  >>
Теги для создания сайта
Теги для создания сайта
Содержание презентации:
Содержание презентации:
Необходимость изучения html кода и тегов для создания сайта
Необходимость изучения html кода и тегов для создания сайта
Теги для сайта
Теги для сайта
Парные теги состоят из открывающего тега <html> и закрывающего
Парные теги состоят из открывающего тега <html> и закрывающего
Создаём простую html страницу
Создаём простую html страницу
Теги для сайта
Теги для сайта
<html> </html> - открывающий и закрывающий теги, которые
<html> </html> - открывающий и закрывающий теги, которые
Если вы создаете первую или единственную страницу своего сайта, так
Если вы создаете первую или единственную страницу своего сайта, так
Теги форматирования текста
Теги форматирования текста
Переход на следующую строку <br> Выравнивание абзаца: <p
Переход на следующую строку <br> Выравнивание абзаца: <p
 <p><font size="1">Шрифт 1</font></p>
 <p><font size="1">Шрифт 1</font></p>
 <p><strong>Жирный текст</strong></p> или <
 <p><strong>Жирный текст</strong></p> или <
<center>Центрирование</center> <p><strong><
<center>Центрирование</center> <p><strong><
Цвет шрифта
Цвет шрифта
Заголовки
Заголовки
<h1> Заголовок 1 уровня </h1> <h2> Заголовок 2
<h1> Заголовок 1 уровня </h1> <h2> Заголовок 2
alt - описание картинки, которое появляется при наведении на неё
alt - описание картинки, которое появляется при наведении на неё
Фон страницы
Фон страницы
Изменение размера картинки <img src="img/tigr
Изменение размера картинки <img src="img/tigr
Текстовая ссылка
Текстовая ссылка
Графическая ссылка
Графическая ссылка
Простейшая таблица
Простейшая таблица
Мета теги
Мета теги
<META HTTP-EQUIV="Content-Type" content="text/html;
<META HTTP-EQUIV="Content-Type" content="text/html;
<META NAME="Description" CONTENT="Описание вашей
<META NAME="Description" CONTENT="Описание вашей
Если содержание Вашей страницы часто меняется, то вставьте следующие
Если содержание Вашей страницы часто меняется, то вставьте следующие
<META NAME="author" content="Автор">  Тег, в
<META NAME="author" content="Автор"> Тег, в
Маленькие хитрости
Маленькие хитрости
Немного о правилах дизайна
Немного о правилах дизайна
Слайды из презентации «Теги для сайта» к уроку информатики на тему «HTML»

Автор: Веретельникова Ирина Борисовна. Чтобы увеличить слайд, нажмите на его эскиз. Чтобы использовать презентацию на уроке, скачайте файл «Теги для сайта.pptx» бесплатно в zip-архиве размером 319 КБ.

Скачать презентацию
РЕКЛАМА

Теги для сайта

содержание презентации «Теги для сайта.pptx»
СлайдТекст
1 Теги для создания сайта

Теги для создания сайта

Теги для создания сайта

Теги для создания сайта

Теги для создания сайта

Теги для создания сайта

Теги для создания сайта

Автор :Веретельникова- педагог Шилкинского Дома детства и юношества

2 Содержание презентации:

Содержание презентации:

1. Необходимость изучения html кода и тегов для создания сайта. 2. Теги сайта 3. Создаём простую страницу 4. Форматирование текста 5. Графика 6. Текстовые ссылки 7. Графические ссылки 8. Простая таблица 9. Мета теги для сайта 10. Маленькие хитрости 11. Правила дизайна

3 Необходимость изучения html кода и тегов для создания сайта

Необходимость изучения html кода и тегов для создания сайта

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

4 Теги для сайта

Теги для сайта

 Теги - это программные метки, используемые браузером для интерпретации и представления HTML страниц в определённом графическом виде. Именно графическом виде, потому, как посредством браузера, без дополнительных программ, невозможно изменять текст и дизайн страницы непосредственно на самой странице. Теги, это программные метки, с которыми работает браузер, и которые указываю ему, что и, как показывать в окне просмотра документа. Теги бывают двух видов - парные и одиночные. Все теги заключаются в скобки <тег>. Если таких скобок нет или одна из скобок отсутствует, то браузер интерпретирует такой текст, как обычный текст, а не как команду.

5 Парные теги состоят из открывающего тега <html> и закрывающего

Парные теги состоят из открывающего тега <html> и закрывающего

тега </html>, как видите они абсолютно идентичны, и отличаются только вертикальной косой чертой у закрывающего тега, который обозначает конец интерпретации, управляющего кода, браузером. Не парные теги, например <br>, это в основном теги, обозначающие перевод каретки, пробел, особый элемент текста. Чаще всего они относятся к простому тексту, и используются для его форматирования. Вся информация, тексты, графика и рисунки, помещаются между парными тегами и интерпретируются браузером как таковые, но с определёнными атрибутами для отображения на странице.

6 Создаём простую html страницу

Создаём простую html страницу

 Чтобы создать простую HTML страницу, без специальных программ, создайте документ txt, при помощи блокнота или WordPad, в котором напишите: <html> <head> <title>Документ</title> </head> <body> Текст </body> </html> Закройте документ и измените окончание файла txt на htm или html, согласитесь с вопросом об изменении расширения файла. Иконка файла «блокнот» должна измениться на иконку файла «Интернет». Теперь откройте полученный документ, обычным двойным кликом, вместо тегов вы увидите надпись «Текст».

7
8 <html> </html> - открывающий и закрывающий теги, которые

<html> </html> - открывающий и закрывающий теги, которые

определяют, что всё, что находится между ними это HTML документ. Всё, что находится за пределами этих тегов, должно игнорироваться браузером. Но это не всегда так, браузеры научились отображать даже ту информацию, которая находится за пределами тела документа, интерпретируя это просто как ошибку при написании кода и автоматически исправляя её. Будьте внимательны. <title>Документ</title> - служебные теги и название документа, которое отображается при его открытии. <head></head> - служебные теги, предназначенные для размещения между ними информационных тегов и тегов для поисковых роботов. <body></body> - тело документа, между этими тегами размещается весь основной текст, графика и анимация.

9 Если вы создаете первую или единственную страницу своего сайта, так

Если вы создаете первую или единственную страницу своего сайта, так

называемый сайт визитку, то чтобы этот файл открывался автоматически и по умолчанию, ему необходимо присвоить имя index.html. Это имя интерпретируется браузером всегда, как первая и главная страница сайта. Остальные страницы сайта должны иметь названия на латинице или быть пронумерованы, например sait.html, ait01.html, 002.html.

10 Теги форматирования текста

Теги форматирования текста

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

11 Переход на следующую строку <br> Выравнивание абзаца: <p

Переход на следующую строку <br> Выравнивание абзаца: <p

align=“left”>по левому краю...</p> <p align="right”>по правому краю...</p> <p align="center”>по центру...</p> <p align="justify"> абзац выровнен по ширине... </p>

12  <p><font size="1">Шрифт 1</font></p>

 <p><font size="1">Шрифт 1</font></p>

самый маленький <p><font size="2">Шрифт 2</font></p> <p><font size="3">Шрифт 3</font></p> <p><font size="4">Шрифт 4</font></p> <p><font size="5">Шрифт 5</font></p> <p><font size="6">Шрифт 6</font></p> <p><font size="7">Шрифт 7</font></p> самый большой.

Размеры шрифта

13  <p><strong>Жирный текст</strong></p> или <

 <p><strong>Жирный текст</strong></p> или <

p><b>Жирный текст</b></p> <p><em>Курсив</em></p> <p><u> Подчеркнутый текст</u></p> <p><strike>Зачеркнутый </strike></p>

Вид шрифта

14 <center>Центрирование</center> <p><strong><

<center>Центрирование</center> <p><strong><

em>Жирный курсив </em></strong></p> <p>Верхний <sup>индекс</sup></p> <p>Нижний <sub>индекс</sub></p> <pre></pre> Очень полезный тег. На странице HTML текст выглядит точно так, как его напечатали в теле страницы при помощи блокнота.

15 Цвет шрифта

Цвет шрифта

 <p><font color="#ff0000">Красный цвет</font></p> Основные цвета и их кодировка: 000000 — черный FFFFFF — белый FF0000 — красный 00FF00 — зелёный 0000FF – синий FF00FF — фиолетовый FFFF00 — жёлтый 00FFFF — голубой

16 Заголовки

Заголовки

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

17 <h1> Заголовок 1 уровня </h1> <h2> Заголовок 2

<h1> Заголовок 1 уровня </h1> <h2> Заголовок 2

уровня </h2> <h3> Заголовок 3 уровня </h3> <h4> Заголовок 4 уровня </h4> <h5> Заголовок 5 уровня </h5> <h6> Заголовок 6 уровня </h6>

18 alt - описание картинки, которое появляется при наведении на неё

alt - описание картинки, которое появляется при наведении на неё

курсора, обязательно делайте подписи к картинкам, поисковые системы очень не любят картинки без подписей, а картинки с подписями обязательно проиндексируют и картинку да и страницу заодно. <p><center><img src="tigr.jpg" alt="Это изображение тигра"></center></p>

ГРАФИКА (Вставка картинок, фотографий, анимации)

19 Фон страницы

Фон страницы

Картинка «img src» и фон страницы «background» . Фон страницы задает общий цвет для всего документа, можно использовать как стандартные цвета, так и картинки, графику, фотографии. Причем фон, позволяет размещать поверх него и графику и текст, а рисунки и фотографии такой возможности не предоставляют. <body background="fon.jpg"><p> <img src="teacher.jpg" border="1"></p></body>

20 Изменение размера картинки <img src="img/tigr

Изменение размера картинки <img src="img/tigr

jpg" width="100" height="82"> Горизонтальная черта длинна 50 и толщина 5 <hr align="left" width="50" size="5" noshade>

21 Текстовая ссылка

Текстовая ссылка

 Текстовые ссылки используются для переходов между страницами сайта, внутри текста на одной странице, а также и на другие сайты. Атрибуты цвета ссылок link, vlink, alink, задают цвет шрифта гиперссылок. Атрибут link - служит для выделения гиперссылок, которые еще не посещались. Атрибут vlink - уже посещенные ссылки. Атрибут alink - выделяет активную гиперссылку. <a href="index.html">Ссылка на главную страницу сайта</a> <a href="001.html">Ссылка на 001 страницу сайта</a> <a href="http://www.toren.chat.ru">Ссылка на другой сайт</a>

22 Графическая ссылка

Графическая ссылка

Графической ссылкой может быть рисунок, фотография, анимация, и даже часть рисунка. <a href="011.html"><img src="rita500x80.gif" width="500" height="80" border="0" /> Здесь ссылкой является анимация, которая ведёт на другую страницу сайта 011.html

23 Простейшая таблица

Простейшая таблица

<Table> <table border="1"> <tr> (ширина границы таблицы от «0» и до ...) <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr><td>5</td> <td>6</td> </tr> </table>

24 Мета теги

Мета теги

 Дескрипторы или теги <META> - не обязательные дескрипторы html страницы. Они располагаются в теле <head>, после заголовка <title>Документ</title>. Эти дескрипторы содержат описание страницы, ключевые слова, информацию об авторе, команды для роботов и прочую служебную информацию. Здесь мы рассмотрим наиболее важные и часто используемые мета тэги.

25 <META HTTP-EQUIV="Content-Type" content="text/html;

<META HTTP-EQUIV="Content-Type" content="text/html;

charset=windows-1251"> Указание типа документа и его кодировки. Это наиболее важный тег, для правильного отображения страницы в разных браузерах. <META NAME="Title" CONTENT="Заголовок страницы"> Указание заголовка страницы.

26 <META NAME="Description" CONTENT="Описание вашей

<META NAME="Description" CONTENT="Описание вашей

страницы."> Это аннотация страницы. Если страница не содержит этого тэга, то поисковая система в качестве аннотации возьмет начальный фрагмент текста страницы, что зачастую нежелательно, т.к. в верхней части страницы может располагаться баннер. <META NAME="Keywords" CONTENT="Ключевые слова."> Список ключевых слов страницы. Зачастую используется поисковыми машинами. Ключевые слова должны быть простыми и обязаны описывать суть страницы.

27 Если содержание Вашей страницы часто меняется, то вставьте следующие

Если содержание Вашей страницы часто меняется, то вставьте следующие

два тега: <META NAME="Document-state" CONTENT="Dynamic"> Указывает, что страница динамичная, т.е. ее содержание периодически меняется. <META NAME="Revizit-after" CONTENT="10 days"> Указывает роботу периодичность смены информации. <META NAME="Document-state" CONTENT="Static"> Указывает, что страница статичная, т.е. ее содержание не меняется.

28 <META NAME="author" content="Автор">  Тег, в

<META NAME="author" content="Автор"> Тег, в

который вы можете вписать своё имя. <META HTTP-EQUIV="Reply-to" content="mail@pochta.ru"> Тег для указания адреса электронной почты автора. <META NAME="Copyright" content="Авторские права"> Описание авторских прав на документ.

29 Маленькие хитрости

Маленькие хитрости

 Три бегущие строки: <marquee behavior="scroll" direction="left">Бегущая строка 1</marquee> <marquee behavior="alternate" direction="right" loop="30" scrollamount="10">Бегущая строка 2</marquee> <marquee behavior="scroll" direction="left" scrolldelay="500" bgcolor="#00ff00">Бегущая строка 3</marquee> Вместо букв, строки, можно использовать и изображения.

Бегущая строка 1

Бегущая строка 2

Бегущая строка 3

30 Немного о правилах дизайна

Немного о правилах дизайна

 Страница документа не должна быть по размеру более 70-100 килобайт, иначе она будет очень долго загружаться в браузер. Страница не должна быть более двух экранов, а лучше только один экран браузера, от этого зависит удобство просмотра документа. Используйте достаточное количество украшений, но не избыточное, иначе основная тема страницы утонет на их фоне. Используйте не более 2-3 цветов для оформления страницы, лучше, если это будут оттенки одного из основных цветов и один контрастирующий цвет, для текста и ссылок.

«Теги для сайта»
http://900igr.net/prezentatsii/informatika/Tegi-dlja-sajta/Tegi-dlja-sajta.html
cсылка на страницу



Реклама
Слайды
Презентация: Теги для сайта.pptx | Тема: HTML | Урок: Информатика | Вид: Слайды