Здравствуй, дорогой Читатель! Сегодня я расскажу Вам о том, как написать свою страницу на HTML5 для возможного, дальнейшего использования её в интернете! И так, приступим...
! HTML - это язык гипертекстовой разметки, то есть не язык программирования и используется только для создания HTML страниц в файлах с расширением ".html".
Что необходимо?
Для создания своей онлайн страницы необходимо иметь любой браузер и текстовый редактор (простой блокнот тоже подойдёт) на ПК.
Приступаем к работе
Открываем текстовый редактор и создаём новый файл. Название можете придумать сами, например "Page". Далее, в первой строчке пишем следующее:
1. <!DOCTYPE html>
Это объявление типа документа, что было нововведением в обновлении HTML5.
Следом "открываете" свой HTML документ:
2.<html>
В ломанных скобках пишутся теги.
! Тег - это основная команда, показывающая, какой тип контента следует далее. Между тегами <html> ... </html>, как начинка бутерброда, находится основная часть html страницы.
Каждый тег, в котором находится какой-то контент, закрывается другим тегом со слэшем "/" (<p> ... </p>), поэтому после написания кода, в самом конце, необходимо закрыть html код тегом </html>.
3. </html>
Выглядеть должно так:
Это готовая HTML страница, но она пуста. Теперь можете сохранить свой файл с расширением ".html", вместо расширения ".txt". После этого у Вас, в месте сохранения должен появиться файл с иконкой браузера или надписью ".html" (У нас это Page.html). Если нет, то, скорее всего, если Вы всё сделали правильно, но результат оказался другим, на Вашем ПК отключена функция изменения расширения файлов. Как это изменить Вы можете найти в интернете.
Работа в браузере
Если всё же результат такой, как описано в этой статье, то откройте новый файл, который отобразится в браузере в виде пустой страницы. Это Ваша html страница!
Теперь нажмите кнопку "F12" на клавиатуре. Нажали? Выглядеть должно примерно как на фотографии выше, если Вы используете браузер Chrome или Yandex. Если Вы работаете на другом браузере, то, возможно, Вам придётся снова использовать блокнот.
Теперь давайте добавим немного красок в нашу страницу. Для этого просто скопируйте код, представленный ниже в блокнот, и повторите действия, описанные ранее:
<!DOCTYPE html>
<html>
<head>
<style> body { background-color: #33A; color: #DDF; } </style>
</head>
<body>
<h2>Привет, HTML!<h2>
</body>
</html>
Получилось? Должен появиться синий экран с большой белой надписью "Привет, HTML!":
Подробнее все основные теги, а также язык таблиц стилей CSS, использованный выше, мы рассмотрим в следующих уроках! Удачи!