Презентация - "Теги HTML - структура web-страницы"
- Презентации / Другие презентации
- 0
- 18.10.24
Просмотреть и скачать презентацию на тему "Теги HTML - структура web-страницы"
Теги HTML
Структура web-страницы
Что такое HTML
HTML (HyperText Markup Language) — язык гипертекстовой разметки. Базовый язык для создания веб-страниц.
Гипертекст — текст связанный с другим текстом при помощи гиперссылок (или просто ссылок).
Структура и основные элементы
Основным элементом HTML является тег. Тег это определенный текст заключенный в угловые скобки <...>. Большинство тегов парные, они имеют открывающий и закрывающий тег.
Например:
<html> ... </html>
Теги могут быть вложенными друг в друга.
Например:
<html>
<head>
…
</head>
</html>
Основные элементы web-страницы
Веб-страница состоит из «базового» набора тегов:
<html> — указывает что это HTML код.
<head> — тег содержит техническую информацию, например заголовок страницы, подключаемые стили, скрипты, мета-информацию и так далее.
<title> — содержит заголовок HTML-документа который отображается во вкладке браузера.
<body> — «тело» или основное содержимое документа которое видит пользователь.
Все базовые теги имеют закрывающие теги и являются вложенными друг в друга.
Основные элементы web-страницы
Наберем в редакторе следующий код:
<html>
<head>
<title>Заголовок моей первой страницы</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>
Затем сохраните файл с расширением .html.
Откройте файл в браузере и посмотрите результат.
Тег <html>
Корневой элемент веб-страницы.
Все HTML-теги должны быть внутри него, иначе они не будут правильно обрабатываться браузером.
Тег <head>
Между тегами <head> … </head> заключается информация которую не видит пользователь, эта информация «служебная» или «техническая».
Она нужна для:
Роботов поисковых систем;
Стилизации и расширения функциональности сайта;
Указания, с помощью тега <title> заголовка документа в браузере.
Тег <title>
Используется для того, чтобы указать название web-страницы которое будет отображаться во вкладке и закладке браузеров.
<title> </title>
Тег <body>
Между тегами <body> … </body> заключается все содержимое веб-страницы которое видит пользователь.
Атрибуты тегов
Тег <p> (параграф) — это тег в который вкладывают одно или несколько предложений.
Для всех тегов существует один из глобальных атрибутов — style.
style — это атрибут с помощью этого атрибута мы можем изменять стиль текста в теге <p>.
Например:
<p style="color:blue;">Какой-то текст...</p>
Результатом выполнения этого кода будет:
Какой-то текст…
Тег <meta />
Тег <meta /> (или мета-тег) является не обязательным.
С помощью тега <meta /> можно указать:
Описание страницы.
Ключевые слова.
Кодировку.
Возможность индексирования.
Время перезагрузки страницы.
<meta />
Тег <style>
Используется для оформления сайта.
Он указывает что код между тегами <style>…</style> является css кодом.
Тег <style> располагается в теге <head>.
<style> </style>
Тег <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>
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>
Подключает к HTML-документу различные скрипты, например JavaScript.
Скрипты, как в случае с тегом <style> могут находятся как непосредственно в HTML-файле, так и в отдельных файлах с соответствующим расширением, например .js.
Отношения между тегами
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Заголовок моей первой страницы</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>
