Язык разметки HTML, синтаксис. Основы языка HTML Изменяем шрифт с помощью CSS

HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста ):

• язык означает, что он может быть прочитан как человеком, так и компьютером;
• разметка означает, что написанный вами код помечается с помощью ключевых слов;
• гипертекст означает, что он использует HTTP как часть Интернета.

Как и любой язык, HTML поставляется с набором правил . Эти правила относительно простые и сводятся к определению границ , чтобы знать, где что-то начинается и где заканчивается.

Ниже приведён пример абзаца в HTML:

Если Тетрис и научил меня чему-то, так это тому, что ошибки накапливаются, а достижения исчезают.

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

Каждый из тегов несёт определённый смысл . В нашем случае обозначает абзац текста.

Как правило, они идут парами:

• открывающий тег определяет начало абзаца;
• закрывающий тег
  определяет его конец.

Единственным различием между открывающим и закрывающим тегами является слэш /, который предшествует имени тега.

При объединении открывающего, закрывающего тегов и всего между ними, вы получите элемент HTML . Строка целиком представляет собой элемент HTML, который использует теги HTML и

.

Если вы просмотрите этот пример в вашем браузере, то заметите, что теги HTML в браузере не отображаются . Они читаются только браузером, чтобы знать, какой тип контента вы написали.

Где писать HTML

Вы, вероятно, сталкивались c простыми текстовыми файлами, теми, которые имеют расширение.txt. Чтобы такой текстовый файл стал HTML-документом (вместо текстового), вам нужно использовать расширение.html.

Откройте текстовый редактор, скопируйте и вставьте следующее содержимое:

Это моя первая веб-страница!

Сохраните этот файл как my-first-webpage.html, просто откройте его вашим браузером и вы увидите:

Это моя первая веб-страница!

• используйте текстовый редактор, вроде Notepad++, для создания HTML-документов;
• используйте браузер, вроде Firefox, для открытия HTML-документов.

Атрибуты

Атрибуты действуют как дополнительная информация, привязанная к элементу HTML. Они пишутся внутри тега HTML. Таким образом, они также не отображаются в браузере.

Например, атрибут href используется для определения назначения ссылки (которая создаётся тегом ):

Скачать Firefox

Есть 16 атрибутов HTML , которые могут быть использованы в любом элементе HTML. Все они не являются обязательными.

Вы в основном будете применять class (который используется для CSS) и title (подсказка, которая появляется при наведении курсора на объект, вроде этого).

Некоторые элементы HTML содержат обязательные атрибуты. Например, при вставке изображения вы должны указать его расположение с помощью атрибута src :

Принимая во внимание, что цель элемента заключается в показе изображения, то имеет смысл путь к изображению сделать обязательным .

Комментарии

Если вы пишете что-то в своём коде без нарушения отображения страницы браузером, то вы можете писать комментарии . Они будут игнорироваться браузером и могут быть использованы только для людей, которые пишут код.

Комментарий начинается с .

Привет, мир!

Самозакрывающиеся элементы

Некоторые элементы HTML имеют только открывающий тег:

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

Синтаксис HTML

В этой статье мы рассмотрим синтаксис HTML и как правильно записывать код языка HTML.

Структура HTML-документа

При написании HTML-кода в блокноте, желательно придерживаться одного стиля. Схема стандартного HTML-документа, выглядит следующим образом:

Название страницы Заголовок статьи

Абзац статьи

Каждый HTML-документ должен начинаться со строки , она означает что код в документе будет написан на языке HTML. Затем идёт сам HTML-код .

Между тегами располагаются два основных блока, первый блок — это голова HTML-документа , который начинается и заканчивается тегами , второй блок — это тело HTML-документа , который начинается и заканчивается тегами .

В голове HTML-документа содержится различная служебная информация, которую пользователь не видит (кроме тега title ), там находятся следующие теги:
— название HTML-страницы,
— мета-теги, в них содержится служебная информация о странице,
— тег ссылающийся на внешние файлы, например .css , .ico и т.д.,
— теги могут содержать JavaScript-код или ссылаться на внешний файл .js

В теле HTML-документа обычно содержится основная информация, которую мы видим на странице, там могут находиться следующие теги:
— заголовок статьи, первого уровня,
— изображение,
— абзац,
— ссылка,

— таблица,
— форма ввода данных,
и т.д.

Правила написания HTML-кода

Рассмотрим некоторые правила написания HTML-кода. Данные правила нужны для того, чтобы потом удобно было разбираться в собственном коде.

• Блочные теги которые находятся внутри других тегов, лучше размещать на одну строку ниже и на один пробел (табуляцию, как вам удобней) правее от тега в котором он размещен. Например таким образом расположены заголовок h1 и абзац p , по отношению к тегу body , в схеме HTML-документа расположенной в начале этой статьи.
• Закрывающий и открывающий теги одного элемента, могут находится либо на одном уровне, как например теги , либо закрывающий тег может находится в конце текста, как например закрывающие теги элементов title , h1 и p .
• Равнозначные между собой элементы тоже можно размещать на одном уровне, в схеме HTML-документа что расположена выше, равнозначными по отношению друг к другу, являются head и body , h1 и p .
• На самом деле, весь HTML-код можно записать в одну строку и браузер всё равно правильно покажет HTML-страницу. Правила синтаксиса языка HTML, где теги нужно записывать друг под другом и левее, существуют лишь для того, чтобы вебмастеру было удобнее создавать и изменять в дальнейшем код HTML-страницы.

Вот еще некоторые моменты, которые нужно учитывать при создании кода:

Сколько бы вы не поставили пробелов в текстовом редакторе , браузер покажет их как один пробел.

Переносы строк и табуляции в текстовом редакторе, не распознаются браузером.

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

Если вам нужна табуляция (например для создания "красной" строки), которая должна быть видна на HTML-странице, то используйте либо несколько спецсимволов неразрывного пробела либо CSS-свойство text-indent .

Александр Кичатов

Как работают PHP скрипты

Наверняка ты знаком с принципом работы радиоуправляемых машинок. Нажимаешь вперёд - машинка едет, нажимаешь влево - машинка меняет направление колёс.

PHP работает точно также. Ты пишешь команды одну за другой, а PHP последовательно их исполняет.

Что такое PHP скрипт

PHP-скрипт - это обычный текстовый файлик с расширением .php . Точно такой же, как html и css.

Но есть одно важное отличие:

Скрипты запускаются только через http-запросы в браузере. Это значит, что для запуска скрипта script.php необходимо в адресной строке браузера написать site.ru/script.php

Если скрипт не работает - проверь текущий URL. Если там будет что-то вроде file:///D:/openserver/domains/site.ru/script.php - это значит, что ты пытаешься не перейти на страницу сайта, а открыть сам PHP файлик в браузере. Это неправильно.

Веб-серверы чаще всего настроены так, что при заходе на главную страницу (например site.ru ) автоматически запускается файл index.php или index.html, лежащий в корне сайта.

Создай в корневой папке сайта файл с названием index.php и открой его в своём текстовом редакторе. При наличии файла index.html его нужно удалить.

Если у тебя пока нет текстового редактора - рекомендую лёгкий и бесплатный Notepad++ , он гораздо удобней встроенного в Windows блокнота.

Обязательно следи за кодировкой скриптов. Кодировка должна быть либо UTF-8 без BOM (если такая доступна в твоём редакторе), либо просто UTF-8 .

Вывод чисел и строк в PHP

Команды PHP пишутся между тегами , например:

Команда echo отвечает за вывод информации на экран. После оператора указывается значение, которое нужно вывести.

Чтобы вывести текст, его нужно указать в одинарных или двойных кавычках:

Команды в PHP разделяются точкой с запятой. Для удобства чтения каждую команду принято писать с новой строки:

Результат в браузере:

Это PHP код.

Вывод HTML кода в PHP

HTML-код можно перемешивать с командами PHP:

Также HTML код можно подставить в PHPшную строку:

Результат в браузере:

Слон Наполеон

Мы можем как угодно совмещать PHP код и HTML теги:

Функции в PHP

Функция - это команда, которая выполняет какие-либо действия, например расчёты, управление файлами и т.д.

Определить функцию просто - у неё после названия идут круглые скобки:

Функция phpinfo() выводит на экран информацию с текущими настройками PHP.

Некоторые функции ожидают, что им передадут какое-нибудь значение. Например, функция округления ceil() ожидает число, которое она округлит:

Функция ceil() получает переданное нами значение 91.5 , обрабатывает его (округляет до 92) и возвращает результат. А команда echo получает возвращённое функцией значение и выводит его на экран. Результатом работы этого скрипта будет 92 .

Необходимость закрывающего тега в PHP

Если после PHP команд нет HTML или любого другого вывода на экран, то мы можем не использовать закрывающий тег ?> :

Кроме этого, мы можем заменить тег

Использование тега