Здравствуй, дорогой друг! Если ты это читаешь, то ты встал на темную сторону сайтостроения, и я помогу освоиться в этом мире!

Итак, приступим!

Все сайты “состоят” из серверной части – скриптов, написанных на различных ЯП (Языках Программирования), скриптов JS (JavaScript), каркаса (HTML) и стилей (CSS)

Наше знакомство с написанием сайтов начнется с азов фронтенда – язык разметки сайта HTML

Фронтенд & Бэкенд

Фронтенд (англ. frontend) — клиентская сторона пользовательского интерфейса к программно-аппаратной части сервиса.
Бэкенд (англ. back-end) — программно-аппаратная часть сервиса. Бэкенд отвечает за осуществление функционирование внутренней части веб-сайта.

HTML – не является языком программирования, запомните это, и нигде не пишите / говорите, что HTML – это ЯП !

HTML

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки веб-страниц во Всемирной паутине. Код HTML интерпретируется браузерами; полученная в результате интерпретации страница отображается на экране монитора компьютера или мобильного устройства.

Для полноценного изучения требуется практика! Самый минимум программ, необходимых для практических заданий – это любой текстовый редактор (стандартный блокнот, VS Code, Atom и т.д) и обычный браузер.

Пишем свой первый сайт!

Ниже приведен минимальный HTML код разметки любого сайта. Для практики – создайте файл на рабочем столе , назовите его любым именем и сделайте расширение html ( например: index.html ), откройте его текстовым редактором.
Скопируйте код, приведенный ниже и вставьте его в свой файл. Сохраните файл.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Мой первый сайт!</h1>
</body>
</html>

Перенесите файл мышкой в свой браузер и посмотрите результат!
Ниже мы разберем, что означает каждая строчка.

В HTML существуют тэги, в которые заключены некие слова.

<!DOCTYPE html>

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы. 

Синтаксис

<!DOCTYPE [Элемент верхнего уровня] [Публичность] “[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]” “[URL]”>
<html>
...
</html>

Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег <html> идет в документе вторым, после определения типа документа (Document Type Definition, DTD), устанавливаемого через элемент <!DOCTYPE>. Закрывающий тег <html> должен всегда стоять в документе последним.

<head>
...
</head>

Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.

Внутри контейнера <head> допускается размещать следующие элементы: <base><basefont><bgsound><link><meta><script><style><title>.

<body>
...
</body>

Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег <body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.

Часто тег <body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

Открывающий и закрывающий теги <body> на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.

Это основные теги HTML разметки, их необходимо выучить как таблицу умножения!

На этом первый урок подходит к концу, рекомендуем отдельно почитать о тегах на нашем сайте или в дополнительных ресурсах (википедия, htmlbook и другие)

Поделиться ссылкой: