HTML Скачать
презентацию
<<  Основы языка HTML Гипертекст  >>
Теги для создания сайта
Теги для создания сайта
Содержание презентации:
Содержание презентации:
Необходимость изучения html кода и тегов для создания сайта
Необходимость изучения html кода и тегов для создания сайта
Теги для сайта
Теги для сайта
Парные теги состоят из открывающего тега <html> и закрывающего тега
Парные теги состоят из открывающего тега <html> и закрывающего тега
Создаём простую html страницу
Создаём простую html страницу
Теги для сайта
Теги для сайта
Теги для сайта
Теги для сайта
Теги для сайта
Теги для сайта
Теги для сайта
Теги для сайта
<html> </html> - открывающий и закрывающий теги, которые определяют,
<html> </html> - открывающий и закрывающий теги, которые определяют,
Если вы создаете первую или единственную страницу своего сайта, так
Если вы создаете первую или единственную страницу своего сайта, так
Теги форматирования текста
Теги форматирования текста
Переход на следующую строку <br> Выравнивание абзаца: <p
Переход на следующую строку <br> Выравнивание абзаца: <p
 <p><font size="1">Шрифт 1</font></p> самый маленький <p><font
 <p><font size="1">Шрифт 1</font></p> самый маленький <p><font
 <p><strong>Жирный текст</strong></p> или <p><b>Жирный текст</b></p>
 <p><strong>Жирный текст</strong></p> или <p><b>Жирный текст</b></p>
<center>Центрирование</center> <p><strong><em>Жирный курсив
<center>Центрирование</center> <p><strong><em>Жирный курсив
Цвет шрифта
Цвет шрифта
Заголовки
Заголовки
<h1> Заголовок 1 уровня </h1> <h2> Заголовок 2 уровня </h2> <h3>
<h1> Заголовок 1 уровня </h1> <h2> Заголовок 2 уровня </h2> <h3>
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Теги для создания сайта. Теги для создания сайта. Теги для 16Заголовки. Заголовки, это особо отформатированные слова, на
создания сайта. Теги для создания сайта. Теги для создания которые поисковые машины обращают особое внимание, особенно на
сайта. Теги для создания сайта. Автор :Веретельникова- педагог заголовки уровня 1, который должен располагаться в самом верху
Шилкинского Дома детства и юношества. страницы. Но не увлекайтесь заголовками так как при большом
2Содержание презентации: 1. Необходимость изучения html кода избытке их на странице поисковый робот начинает их просто
и тегов для создания сайта. 2. Теги сайта 3. Создаём простую игнорировать.
страницу 4. Форматирование текста 5. Графика 6. Текстовые ссылки 17<h1> Заголовок 1 уровня </h1> <h2>
7. Графические ссылки 8. Простая таблица 9. Мета теги для сайта Заголовок 2 уровня </h2> <h3> Заголовок 3 уровня
10. Маленькие хитрости 11. Правила дизайна. </h3> <h4> Заголовок 4 уровня </h4> <h5>
3Необходимость изучения html кода и тегов для создания сайта. Заголовок 5 уровня </h5> <h6> Заголовок 6 уровня
Существует достаточно много разнообразных программ при помощи </h6>
которых можно сделать WEB страницы, не задумываясь над 18alt - описание картинки, которое появляется при наведении на
технической стороной вопроса. Но когда возникает необходимость неё курсора, обязательно делайте подписи к картинкам, поисковые
ввести в код страницы не стандартные или сторонние программы, системы очень не любят картинки без подписей, а картинки с
вот тут и начинаются трудности. Минимальные знания, по написанию подписями обязательно проиндексируют и картинку да и страницу
страниц, только при помощи блокнота, дадут необходимые навыки заодно. <p><center><img src="tigr.jpg"
для понимания общей структуры страницы и тегов для создания alt="Это изображение
сайта, возможности исправлять ошибки, и дополнять страницу тигра"></center></p> ГРАФИКА (Вставка
текстом, не прибегая к выше означенным программам, а также картинок, фотографий, анимации).
понимать исходный код страницы и вносить собственные изменения и 19Фон страницы. Картинка «img src» и фон страницы «background»
дополнения. . Фон страницы задает общий цвет для всего документа, можно
4Теги для сайта. Теги - это программные метки, используемые использовать как стандартные цвета, так и картинки, графику,
браузером для интерпретации и представления HTML страниц в фотографии. Причем фон, позволяет размещать поверх него и
определённом графическом виде. Именно графическом виде, потому, графику и текст, а рисунки и фотографии такой возможности не
как посредством браузера, без дополнительных программ, предоставляют. <body
невозможно изменять текст и дизайн страницы непосредственно на background="fon.jpg"><p> <img
самой странице. Теги, это программные метки, с которыми работает src="teacher.jpg"
браузер, и которые указываю ему, что и, как показывать в окне border="1"></p></body>
просмотра документа. Теги бывают двух видов - парные и 20Изменение размера картинки <img
одиночные. Все теги заключаются в скобки <тег>. Если таких src="img/tigr.jpg" width="100"
скобок нет или одна из скобок отсутствует, то браузер height="82"> Горизонтальная черта длинна 50 и
интерпретирует такой текст, как обычный текст, а не как команду. толщина 5 <hr align="left" width="50"
5Парные теги состоят из открывающего тега <html> и size="5" noshade>
закрывающего тега </html>, как видите они абсолютно 21Текстовая ссылка. Текстовые ссылки используются для
идентичны, и отличаются только вертикальной косой чертой у переходов между страницами сайта, внутри текста на одной
закрывающего тега, который обозначает конец интерпретации, странице, а также и на другие сайты. Атрибуты цвета ссылок link,
управляющего кода, браузером. Не парные теги, например vlink, alink, задают цвет шрифта гиперссылок. Атрибут link -
<br>, это в основном теги, обозначающие перевод каретки, служит для выделения гиперссылок, которые еще не посещались.
пробел, особый элемент текста. Чаще всего они относятся к Атрибут vlink - уже посещенные ссылки. Атрибут alink - выделяет
простому тексту, и используются для его форматирования. Вся активную гиперссылку. <a
информация, тексты, графика и рисунки, помещаются между парными href="index.html">Ссылка на главную страницу
тегами и интерпретируются браузером как таковые, но с сайта</a> <a href="001.html">Ссылка на 001
определёнными атрибутами для отображения на странице. страницу сайта</a> <a
6Создаём простую html страницу. Чтобы создать простую HTML href="http://www.toren.chat.ru">Ссылка на другой
страницу, без специальных программ, создайте документ txt, при сайт</a>
помощи блокнота или WordPad, в котором напишите: <html> 22Графическая ссылка. Графической ссылкой может быть рисунок,
<head> <title>Документ</title> </head> фотография, анимация, и даже часть рисунка. <a
<body> Текст </body> </html> Закройте документ href="011.html"><img
и измените окончание файла txt на htm или html, согласитесь с src="rita500x80.gif" width="500"
вопросом об изменении расширения файла. Иконка файла «блокнот» height="80" border="0" /> Здесь ссылкой
должна измениться на иконку файла «Интернет». Теперь откройте является анимация, которая ведёт на другую страницу сайта
полученный документ, обычным двойным кликом, вместо тегов вы 011.html.
увидите надпись «Текст». 23Простейшая таблица. <Table> <table
7 border="1"> <tr> (ширина границы таблицы от
8<html> </html> - открывающий и закрывающий теги, «0» и до ...) <td>1</td> <td>2</td>
которые определяют, что всё, что находится между ними это HTML </tr> <tr> <td>3</td>
документ. Всё, что находится за пределами этих тегов, должно <td>4</td> </tr>
игнорироваться браузером. Но это не всегда так, браузеры <tr><td>5</td> <td>6</td>
научились отображать даже ту информацию, которая находится за </tr> </table>
пределами тела документа, интерпретируя это просто как ошибку 24Мета теги. Дескрипторы или теги <META> - не
при написании кода и автоматически исправляя её. Будьте обязательные дескрипторы html страницы. Они располагаются в теле
внимательны. <title>Документ</title> - служебные <head>, после заголовка
теги и название документа, которое отображается при его <title>Документ</title>. Эти дескрипторы содержат
открытии. <head></head> - служебные теги, описание страницы, ключевые слова, информацию об авторе, команды
предназначенные для размещения между ними информационных тегов и для роботов и прочую служебную информацию. Здесь мы рассмотрим
тегов для поисковых роботов. <body></body> - тело наиболее важные и часто используемые мета тэги.
документа, между этими тегами размещается весь основной текст, 25<META HTTP-EQUIV="Content-Type"
графика и анимация. content="text/html; charset=windows-1251"> Указание
9Если вы создаете первую или единственную страницу своего типа документа и его кодировки. Это наиболее важный тег, для
сайта, так называемый сайт визитку, то чтобы этот файл правильного отображения страницы в разных браузерах. <META
открывался автоматически и по умолчанию, ему необходимо NAME="Title" CONTENT="Заголовок
присвоить имя index.html. Это имя интерпретируется браузером страницы"> Указание заголовка страницы.
всегда, как первая и главная страница сайта. Остальные страницы 26<META NAME="Description" CONTENT="Описание
сайта должны иметь названия на латинице или быть пронумерованы, вашей страницы."> Это аннотация страницы. Если страница
например sait.html, ait01.html, 002.html. не содержит этого тэга, то поисковая система в качестве
10Теги форматирования текста. При помощи тегов форматирования аннотации возьмет начальный фрагмент текста страницы, что
текста, можно также и изменять уже имеющийся текст. Текст можно зачастую нежелательно, т.к. в верхней части страницы может
сделать жирным, наклонным, подчеркнутым, изменять размер и располагаться баннер. <META NAME="Keywords"
ширину букв, изменять цвет всего предложения, слова и даже CONTENT="Ключевые слова."> Список ключевых слов
отдельной буквы. Текст который форматируется должен находиться страницы. Зачастую используется поисковыми машинами. Ключевые
между парными тегами. Необходимо соблюдать порядок вложенности слова должны быть простыми и обязаны описывать суть страницы.
парных тегов. Начните с простых конструкций. 27Если содержание Вашей страницы часто меняется, то вставьте
11Переход на следующую строку <br> Выравнивание абзаца: следующие два тега: <META NAME="Document-state"
<p align=“left”>по левому краю...</p> <p CONTENT="Dynamic"> Указывает, что страница
align="right”>по правому краю...</p> <p динамичная, т.е. ее содержание периодически меняется. <META
align="center”>по центру...</p> <p NAME="Revizit-after" CONTENT="10 days">
align="justify"> абзац выровнен по ширине... Указывает роботу периодичность смены информации. <META
</p> NAME="Document-state" CONTENT="Static">
12<p><font size="1">Шрифт Указывает, что страница статичная, т.е. ее содержание не
1</font></p> самый маленький <p><font меняется.
size="2">Шрифт 2</font></p> 28<META NAME="author"
<p><font size="3">Шрифт content="Автор"> Тег, в который вы можете вписать
3</font></p> <p><font своё имя. <META HTTP-EQUIV="Reply-to"
size="4">Шрифт 4</font></p> content="mail@pochta.ru"> Тег для указания адреса
<p><font size="5">Шрифт электронной почты автора. <META NAME="Copyright"
5</font></p> <p><font content="Авторские права"> Описание авторских прав
size="6">Шрифт 6</font></p> на документ.
<p><font size="7">Шрифт 29Маленькие хитрости. Три бегущие строки: <marquee
7</font></p> самый большой. Размеры шрифта. behavior="scroll"
13<p><strong>Жирный текст</strong></p> direction="left">Бегущая строка 1</marquee>
или <p><b>Жирный текст</b></p> <marquee behavior="alternate"
<p><em>Курсив</em></p> direction="right" loop="30"
<p><u> Подчеркнутый текст</u></p> scrollamount="10">Бегущая строка 2</marquee>
<p><strike>Зачеркнутый </strike></p> Вид <marquee behavior="scroll"
шрифта. direction="left" scrolldelay="500"
14<center>Центрирование</center> bgcolor="#00ff00">Бегущая строка 3</marquee>
<p><strong><em>Жирный курсив Вместо букв, строки, можно использовать и изображения. Бегущая
</em></strong></p> <p>Верхний строка 1. Бегущая строка 2. Бегущая строка 3.
<sup>индекс</sup></p> <p>Нижний 30Немного о правилах дизайна. Страница документа не должна
<sub>индекс</sub></p> <pre></pre> быть по размеру более 70-100 килобайт, иначе она будет очень
Очень полезный тег. На странице HTML текст выглядит точно так, долго загружаться в браузер. Страница не должна быть более двух
как его напечатали в теле страницы при помощи блокнота. экранов, а лучше только один экран браузера, от этого зависит
15Цвет шрифта. <p><font удобство просмотра документа. Используйте достаточное количество
color="#ff0000">Красный цвет</font></p> украшений, но не избыточное, иначе основная тема страницы утонет
Основные цвета и их кодировка: 000000 — черный FFFFFF — белый на их фоне. Используйте не более 2-3 цветов для оформления
FF0000 — красный 00FF00 — зелёный 0000FF – синий FF00FF — страницы, лучше, если это будут оттенки одного из основных
фиолетовый FFFF00 — жёлтый 00FFFF — голубой. цветов и один контрастирующий цвет, для текста и ссылок.
«Теги для сайта» | Теги для сайта.pptx
http://900igr.net/kartinki/informatika/Tegi-dlja-sajta/Tegi-dlja-sajta.html
cсылка на страницу

HTML

другие презентации об HTML

«Гиперссылки» - Гиперссылка на изображение: <A href=“picture.jpg”>изображение</A>. Гиперссылка (hyperlink) указатель внутри гипертекстового документа, указывающий на другой документ (связывает с другим документом). Гиперссылки. Если страница размешена на локальном компьютере: <A href=“filename.htm”>текст-ссылка</A>.

«Теги для сайта» - Начните с простых конструкций. Автор :Веретельникова- педагог Шилкинского Дома детства и юношества. Фон страницы. Атрибут link - служит для выделения гиперссылок, которые еще не посещались. Теги форматирования текста. Ключевые слова должны быть простыми и обязаны описывать суть страницы. Все теги заключаются в скобки <тег>.

«Основы языка HTML» - 4. Основы языка HTML. 2. Д. Раггетт (Hewlett-Packard Labs), 1992 - HTML+. Дэн Конноли,1994 - HTML 2. В настоящее время версия с 1994 г. - HTML 4.0. 3. 1.

«Документ HTML» - 1969. - Создан консорциум W3. Интерпретируется текст. <HTML>. Заголовки. Строка адреса ресурса (URL). Достигнута граница html- документа строк для интерпретации больше нет. Основные конструкции. - Тим Бернерс-Ли разработал систему разметки гипертекстовых документов HTML. Наиболее распространенные атрибуты.

«Язык HTML» - Тег <IMG SRC> - вставка изображения из файла. История развития html. Общие сведение о HTML. Каждый тег имеет свое название. Тело документа – святая святых. Язык HTML состоит из элементов, называемых тегами. Теги представляют собой управляющие элементы разметки гипер-текстового документа. Но можно разработать web-сайтов и самим.

«HTML страница» - Заголовок должен быть коротким по тексту, но емким по содержанию. Пример 2: кегль шрифта задается в пунктах <font size="12pt">. Атрибуты тега <body>. 2. Размер шрифта size (продолжение). Шрифт. Заголовок – очень важный элемент web-страницы. Одновременно теги <b> и <i> использовать не рекомендуется.

Урок

Информатика

126 тем
Картинки
Презентация: Теги для сайта | Тема: HTML | Урок: Информатика | Вид: Картинки