Презентация на тему: "Теги HTML - структура web-страницы"

Теги HTML - структура web-страницы - Скачать презентации бесплатно ☑ Презентации по предметам на school-textbook.com
Смотреть онлайн
Поделиться с друзьями:
Cкачать презентацию: Теги HTML - структура web-страницы

Презентация "Теги HTML - структура web-страницы" онлайн бесплатно или скачать на сайте электронных школьных учебников/презентаций school-textbook.com

Теги HTML<br>Структура web-страницы<br>
1 слайд

Теги HTML
Структура web-страницы

Что такое HTML<br>HTML (HyperText Markup Language) — язык гипертекстовой разметки. Базовый язык для
2 слайд

Что такое HTML
HTML (HyperText Markup Language) — язык гипертекстовой разметки. Базовый язык для создания веб-страниц.
Гипертекст — текст связанный с другим текстом при помощи гиперссылок (или просто ссылок).

Структура и основные элементы<br>Основным элементом HTML является тег. Тег это определенный текст за
3 слайд

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

<html> ... </html>



Теги могут быть вложенными друг в друга.

Например:

<html>
<head>

</head>
</html>

Основные элементы web-страницы<br>Веб-страница состоит из «базового» набора тегов:<br><html> —
4 слайд

Основные элементы web-страницы
Веб-страница состоит из «базового» набора тегов:
<html> — указывает что это HTML код.
<head> — тег содержит техническую информацию, например заголовок страницы, подключаемые стили, скрипты, мета-информацию и так далее.
<title> — содержит заголовок HTML-документа который отображается во вкладке браузера.
<body> — «тело» или основное содержимое документа которое видит пользователь.
Все базовые теги имеют закрывающие теги и являются вложенными друг в друга.

Основные элементы web-страницы<br>Наберем в редакторе следующий код:<br><html><br><head>
5 слайд

Основные элементы web-страницы
Наберем в редакторе следующий код:
<html>
<head>
<title>Заголовок моей первой страницы</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>
Затем сохраните файл с расширением .html.
Откройте файл в браузере и посмотрите результат.

Тег <html><br>Корневой элемент веб-страницы. <br>Все HTML-теги должны быть внутри него, иначе
6 слайд

Тег <html>
Корневой элемент веб-страницы.
Все HTML-теги должны быть внутри него, иначе они не будут правильно обрабатываться браузером.

Тег <head><br>Между тегами <head> … </head> заключается информация которую не види
7 слайд

Тег <head>
Между тегами <head> … </head> заключается информация которую не видит пользователь, эта информация «служебная» или «техническая».

Она нужна для:
Роботов поисковых систем;
Стилизации и расширения функциональности сайта;
Указания, с помощью тега <title> заголовка документа в браузере.

Тег <title><br>Используется для того, чтобы указать название web-страницы которое будет отобра
8 слайд

Тег <title>
Используется для того, чтобы указать название web-страницы которое будет отображаться во вкладке и закладке браузеров.

<title> </title>

Тег <body><br>Между тегами <body> … </body> заключается все содержимое веб-страниц
9 слайд

Тег <body>
Между тегами <body> … </body> заключается все содержимое веб-страницы которое видит пользователь.

Атрибуты тегов<br>Тег <p> (параграф) —  это тег в который вкладывают одно или несколько предло
10 слайд

Атрибуты тегов
Тег <p> (параграф) — это тег в который вкладывают одно или несколько предложений.


Для всех тегов существует один из глобальных атрибутов — style.
style — это атрибут с помощью этого атрибута мы можем изменять стиль текста в теге <p>.

Например:
<p style="color:blue;">Какой-то текст...</p>
Результатом выполнения этого кода будет:
Какой-то текст…

Тег <meta /><br>Тег <meta /> (или мета-тег) является не обязательным. <br>С помощью тега
11 слайд

Тег <meta />
Тег <meta /> (или мета-тег) является не обязательным.
С помощью тега <meta /> можно указать:
Описание страницы.
Ключевые слова.
Кодировку.
Возможность индексирования.
Время перезагрузки страницы.

<meta />

Тег <style><br>Используется для оформления сайта. <br><br>Он указывает что код между тегами &l
12 слайд

Тег <style>
Используется для оформления сайта.

Он указывает что код между тегами <style>…</style> является css кодом.

Тег <style> располагается в теге <head>.

<style> </style>

Тег <style><br><html><br>  <head><br>    <style><br>      h1{color:red;}<br>
13 слайд

Тег <style>
<html>
<head>
<style>
h1{color:red;}
p {color:blue;font-style:italic;}
</style>
<title>Заголовок моей первой страницы </title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

Тег <link><br>Link подключает внешние файлы. <br><br>Когда на сайте много страниц, то обычно п
14 слайд

Тег <link>
Link подключает внешние файлы.

Когда на сайте много страниц, то обычно подключают отдельный файл со стилями.
Файл style.css будет выглядеть следующим образом:
h1{color:red;}
p {color:blue;font-style:italic;}
При этом мы избавляемся от тега <style>.
Код с прошлого слайда можно переписать следующим образом:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Заголовок моей первой страницы</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

Тег <script><br>Подключает к HTML-документу различные скрипты, например JavaScript. <br><br>Ск
15 слайд

Тег <script>
Подключает к HTML-документу различные скрипты, например JavaScript.

Скрипты, как в случае с тегом <style> могут находятся как непосредственно в HTML-файле, так и в отдельных файлах с соответствующим расширением, например .js.

Отношения между тегами<br><html><br>  <head><br>    <link rel="stylesheet"
16 слайд

Отношения между тегами
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Заголовок моей первой страницы</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>

Отзывы по презентациям на сайте school-textbook.com "Теги HTML - структура web-страницы" (0)
Оставить отзыв
Прокомментировать

Путеводитель по миру знаний. Тем, кто хочет учиться.

Свяжитесь с нами