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

Категория: Информатика
Нажмите для полного просмотра!
  
  Основные теги HTML  , слайд №1  
  Основные теги HTML  , слайд №2  
  Основные теги HTML  , слайд №3  
  Основные теги HTML  , слайд №4  
  Основные теги HTML  , слайд №5  
  Основные теги HTML  , слайд №6  
  Основные теги HTML  , слайд №7  
  Основные теги HTML  , слайд №8  
  Основные теги HTML  , слайд №9

Вы можете ознакомиться и скачать Основные теги HTML . Презентация содержит 9 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации


Слайд 1





Основные теги HTML
Описание слайда:
Основные теги HTML

Слайд 2





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

Слайд 3





Структура HTML-документа
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
 <title>Моя первая HTML-страница</title> 
</head> 
<body> <p>Здравствуйте!</p> 
</body>
 </html>
Описание слайда:
Структура HTML-документа <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Моя первая HTML-страница</title> </head> <body> <p>Здравствуйте!</p> </body> </html>

Слайд 4





Теги структуры
<HTML> Этот тег указывает на начало HTML-документа
<HEAD> Этот тег указывает на начало области заголовка Web-страницы. 
<TITLE>Структура Web-страницы</title> Элемент для размещения заголовка Web-страницы. Строка отображается в заголовке окна броузера.
<META http-equiv="Content-Type" content="text/html; charset=windows-1251"> Этот тег несет служебную информацию и не отображается в экране браузера. В данном случае идет речь о кодировке Web-странички. Вам достаточно лишь каждый раз вставлять этот тег в таком виде на свою страничку. Тогда ваша страничка будет использовать кодировку windows-1251, наиболее распространенную на сегодняшний день.
</head> Конец области заголовка Web-страницы.
<BODY > Начало собственно содержимого Web-страницы. 
</body> Конец содержимого Web-страницы.
</html> Конец HTML-документа.
Описание слайда:
Теги структуры <HTML> Этот тег указывает на начало HTML-документа <HEAD> Этот тег указывает на начало области заголовка Web-страницы. <TITLE>Структура Web-страницы</title> Элемент для размещения заголовка Web-страницы. Строка отображается в заголовке окна броузера. <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> Этот тег несет служебную информацию и не отображается в экране браузера. В данном случае идет речь о кодировке Web-странички. Вам достаточно лишь каждый раз вставлять этот тег в таком виде на свою страничку. Тогда ваша страничка будет использовать кодировку windows-1251, наиболее распространенную на сегодняшний день. </head> Конец области заголовка Web-страницы. <BODY > Начало собственно содержимого Web-страницы. </body> Конец содержимого Web-страницы. </html> Конец HTML-документа.

Слайд 5





Форматирование текста
Абзац <P> </p>
Переход на новую строку <br>
Выделение текста полужирным шрифтом <B> </b>
Выделение текста курсивом <I> </i>
Маркированный список 
<UL>
<LI> Первый пункт списка;
<LI> Второй пункт списка;
<LI> Третий пункт списка.
</ul>
Нумерованный список 
<OL>
<LI> Первый пункт списка;
<LI> Второй пункт списка;
<LI> Третий пункт списка.
</ol>
Описание слайда:
Форматирование текста Абзац <P> </p> Переход на новую строку <br> Выделение текста полужирным шрифтом <B> </b> Выделение текста курсивом <I> </i> Маркированный список <UL> <LI> Первый пункт списка; <LI> Второй пункт списка; <LI> Третий пункт списка. </ul> Нумерованный список <OL> <LI> Первый пункт списка; <LI> Второй пункт списка; <LI> Третий пункт списка. </ol>

Слайд 6





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

Слайд 7





Гиперссылки 
<A> </a> - один из самых важных элементов языка, обеспечивающий создание гиперссылок. Чаще всего используется такой шаблон:
   Произвольный текст <A href="адрес ссылки">Текст для щелчка </a>
Описание слайда:
Гиперссылки <A> </a> - один из самых важных элементов языка, обеспечивающий создание гиперссылок. Чаще всего используется такой шаблон: Произвольный текст <A href="адрес ссылки">Текст для щелчка </a>

Слайд 8





Таблицы 
Таблицы являются очень удобным средством форматирования данных на Web-станице. Они позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением.
При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элеметы для описания каждой ячейки в с строке TD.
<TABLE> </table> - внешний элемент талицы. 
<TR> </tr> - элемент, задающий строку таблицы. 
<TD> </td> - элемент, задающий ячеку таблицы. 
Например: 
Таблица из 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>
Описание слайда:
Таблицы Таблицы являются очень удобным средством форматирования данных на Web-станице. Они позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением. При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элеметы для описания каждой ячейки в с строке TD. <TABLE> </table> - внешний элемент талицы. <TR> </tr> - элемент, задающий строку таблицы. <TD> </td> - элемент, задающий ячеку таблицы. Например: Таблица из 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>

Слайд 9





Полезные ссылки
Учебник по HTML http://infoschool.narod.ru/html/index.htm
HTML справочник http://html.manual.ru/
Как сделать сайт самому и бесплатно http://seodon.ru/kak-sdelat-sait/
Описание слайда:
Полезные ссылки Учебник по HTML http://infoschool.narod.ru/html/index.htm HTML справочник http://html.manual.ru/ Как сделать сайт самому и бесплатно http://seodon.ru/kak-sdelat-sait/



Похожие презентации
Mypresentation.ru
Загрузить презентацию