Создание веб страницы HTML5
Но эта тема создана потому, что это просто интересно написать сайт самому, более понятно структура и работа сайта (не надо ковыряться в чужом коде, чтобы что-либо внедрить), на конец, в нём будет всё, что вам необходимо и ничего лишнего.
Вам понадобится текстовый редактор. Блокнот Виндовс не удобен. Я использую notepad++, он бесплатный, поддержка синтаксиста различных языков, удобное переключение между вкладками.
Создайте папку, на компьютере, в удобном месте. Откройте текстовый редактор и создайте и сохраните файл index.html в этой папке. Все главные страницы сайтов имеют название index.
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Моя первая страница</title>
</head>
<body>
<h1>Странца HTML</h1>
<img src="html.png" width="250" title="html5" alt="html5">
<p>Эта страница сделана на языке гипертекстовой разметки HTML5.</p>
</body>
</html>
Так видит страницу браузер, я расскажу что всё это значит.
<!DOCTYPE html>
Сообщает браузеру, что страница стандарта html5.
<html lang="ru">
сообщает браузеру, что надо начинать чтение документа на русском языке до тех пор, пока не появится закрывающий тег </html> (он внизу разметки).
<head>
Описывает служебную информацию страницы, для браузера и поисковых роботов. Пользователь только видит название страницы, на вкладке браузера, и иконку сайта.
Теги внутри head
</head>
Этот тег обязательно должен закрываться.
<body>
Тело страницы, тут располагается информация, которую видит пользователь.
</body>
Этот тег обязательно должен закрываться.
</html>
Закрытие документа, всё что написанно после него, браузер будет игнорировать.
<h1>Странца HTML</h1>
- это заголовок содержимого (статьи) страницы, всего их 6, от h1 до h6. Подробнее о них будет в следующих статьях.
<img src="html.png" width="250" title="html5" alt="html5">
сообщает браузеру о картинке которую надо вывести на экран. В данном случае картинка html.png находится в той же папке что и index.html, её надо либо сжать, либо растянуть по ширине в 250 пикселей, высота меняется автоматически. Если не указать ширину, то картинка будет показана с реальными размерами. Title – при наведении мыши на картинку, будет появляться подсказка с указанным содержимым. Alt – его содержимое появляется если картинка не загрузилась.
Сохраните картинку в папке где находится index.html
<p>...</p>
называется параграф, внутри него группируется текст. Подробней в следующих статьях.