Введение в HTML. Создание простого веб-документа

1. Введение в HTML. Создание простого веб-документа

2.

Что такое HTML
HTML — основа всего, что происходит внутри вашего браузера.
Если вы знаете HTML, то можете сами создавать сайты, красиво
оформлять статьи и документы в интернете и даже устроиться
на работу веб-разработчиком.

3.

Что такое HTML
HTML — это язык гипертекстовой разметки документов (HyperText Markup
Language).
По-русски: это набор команд, которые говорят нашим браузерам, как рисовать
сайты.
Например:
Именно по таким командам и строится вся структура сайта, который мы можем
увидеть в сети.

4.

Что такое HTML
Слова внутри угловых скобок называются тегами: <h1>,<p> и т. д.
Теги говорят браузеру, как именно нужно отобразить тот или иной текст, где
разместить картинку или какую сделать кнопку.
Браузер прочитает каждый тег и покажет нам страницу уже без них, но будет
помнить, что они означают.
Браузеры на компьютерах и смартфонах понимают эти команды примерно
одинаково, поэтому в большинстве браузеров страница тоже будет смотреться
одинаково.

5.

Из чего состоит HTML
HTML состоит из тегов — команд, которые указывают браузеру, как отображать
помещённый в них текст. Это и есть элементы веб-страницы.
У каждого тега есть имя, которое заключается в угловые скобки «<…>».
Например, в тег <p> обычно помещают текст:
Теги бывают парные и непарные.
Парные состоят из двух тегов — открывающего и закрывающего, а непарные —
из одного.
При этом непарный тег тоже можно закрывать, но это необязательно.
Например, тег <img>, который
позволяет разместить картинку
на сайте, — непарный:
У каждого тега есть атрибуты. С их помощью можно передавать элементам вебстраницы дополнительные данные: размеры, уникальный id элемента, ссылки
на изображения и так далее.

6.

Из чего состоит HTML
Тег <p> — парный, он всегда должен закрываться тегом </p>. Парные теги
применяются для разметки блоков — элементов, в которые можно вкладывать
другие элементы (в том числе блоки).
К ним относятся:
• контейнеры (div);
• абзацы;
• заголовки;
• списки;
• таблицы.

7.

Как HTML работает
Принцип работы разметки следующий:
• Вы вводите в адресную строку адрес сайта или страницы.
• Браузер отправляет запрос по этому адресу и получает файл в формате
HTML.
• Код из полученного файла последовательно преобразуется в визуальные
объекты.
При этом каждый браузер руководствуется своими правилам отображения
элементов.
Раньше разработчикам приходилось создавать отдельные версии сайтов для
Internet Explorer, Firefox, Opera и других браузеров. Стоило только не учесть
какую-то особенность браузера, и сайт падал на глазах у разочарованных
пользователей.
К счастью, организация W3C разработала веб-стандарты — чтобы сайты
отображались более или менее одинаково во всех браузерах.
Но и от обыкновенных ошибок никто не застрахован. Если разработчик
по невнимательности не закроет тег или добавит содержимое куда-нибудь
не туда, на странице вылезет что-то неожиданное.

8.

Что можно и нельзя сделать на HTML
HTML — это каркас сайта. По нему браузер отрисовывает веб-страницу, наводит
«красоту» с помощью CSS и добавляет логику через JavaScript.
Например, в HTML-файле можно прописать:
• гиперссылки;
• таблицы;
• изображения;
• блоки;
• абзацы;
• формы;
• заголовки.
Можно даже задавать простой дизайн напрямую
в HTML — например, устанавливать цвет и шрифт
текста или фоновый цвет блока. Однако
профессионалы не рекомендуют так делать —
лучше указывать стили в файле CSS.
Там-то ваша фантазия ничем не будет ограничена: задавайте любые отступы,
размещайте элементы нестандартными способами, играйтесь с прозрачностью,
тенями и анимацией. Всё что угодно — но в CSS.

9.

HTML – язык программирования?
На самом деле, HTML не является языком программирования. На языках
программирования пишут программы и web-приложения. Для этого в них есть
условия, функции, переменные, операторы, классы и много что ещё.
В то время как HTML – это всего лишь формат текста, и он очень похож на
вордовские файлы. В HTML есть только теги, которые помогают браузеру
правильно отобразить содержимое сайта.
Для программирования сайтов используются скрипты, написанные на
«javascripts», а для изменения внешнего вида всех объектов используют файлы
стилей CSS.

10.

Основные теги в HTML
<head>…</head> — служебная область на странице, которая не показывается
в браузере, но влияет на страницу в целом.
<title>…</title> — находится внутри <head>. Текст, который написан внутри
этого тега, отображается в названии вкладки и в закладках браузера.
<body>…</body> — видимая часть страницы. Всё, что вы видите, происходит
внутри этих тегов.
<h1>…</h1>, <h2>…</h2> и так далее — заголовки разного уровня.
<p>…</p> — абзац.
<a href="...">…</a> — гиперссылка. Свойство «href» отвечает за адрес ссылки.
<img src="..."> — картинка. Свойство «src» отвечает за адрес, по которому лежит
изображение, чтобы браузер мог запросить её оттуда, скачать и показать
на экране.

11.

Основные теги в HTML
<ul><li>…</li></ul> — ненумерованный список с одним элементом внутри.
Чтобы элементов было больше, добавьте <li>…</li> внутрь <ul>…</ul>.
<ol><li>…</li></ol> — нумерованный список.
<div>…</div> — универсальный блок внутри страницы. Его можно настроить,
чтобы содержимое выглядело и работало как угодно, от назойливой всплывашки
до кнопки подтверждения.
<span>…</span> — с помощью этого тега можно менять внешний вид
выбранного текста. Например, выделить его жёлтым, как маркером на бумаге.
<table><tbody><tr><td>…</td><td>…</td></tr></tbody></table> — минимальный
набор тегов, чтобы сделать таблицу.

12.

Как создать HTML сайт
1) Создать файл в блокноте (или в ином
приложении – среде разработки) с
расширением HTML:
2) Создать каркас сайта:

13.

Задания
Ответьте на вопросы (проверяем память и понимание):
1.
2.
3.
4.
5.
6.
Что такое HTML?
Является ли HTML языком программирования?
Из чего состоит HTML?
Каким тегом выделить абзац?
Каким тегом указывается название сайта?
Внутри какого тега находится весь отображаемый контент?
Выполните практическое задание:
1.
2.
3.
4.
Создайте собственный web-файл;
Создайте каркас сайта;
Наполните сайт контентом и дайте ему название;
Проверьте разные теги, измените внешний вид контента, проверьте
работоспособность сайта.

14. Благодарю за внимание