Начинаем изучение языка. Текст на HTML представляет собой "простой текст". Все гипертекстовые особенности документа задаются с помощью тегов - особых пометок, включаемых в этот текст.
Пусть есть текст:
Запишем этот текст по-другому, вставив указания о том, как надо отображать текст. Указания выделим угловыми скобками.
В языке HTML указания называются тегами. Браузер выполняет указания-теги, то есть, не показывая их, производит изменения текста. Поэтому на экране мы увидим следующее:
«Мама мыла раму, а котик играл с клубком. Мальчик забрал у котика клубок».
Тег – команда в угловых скобках. Имя тега – первое, что пишется после открывающей угловой скобки, без пробелов перед ним! Существуют теги одиночные и теги контейнеры. Одиночные теги – некоторая команда браузеру, выполняемая в том месте, где указана, например, команда «нарисовать линию»:
Теги контейнеры состоят из открывающего тега и закрывающего, и их указание относится ко всему тексту, расположенному между ними, говорят: «вложенному в контейнер». Закрывающий тег имеет то же имя, что и открывающий, но перед именем ставится символ «слэш»: «/»:
Мама мыла раму.
.У тега могут быть атрибуты. Атрибут дополняет и поясняет тег. Порядок атрибутов не важен. Например, у тега HR есть атрибут WIDTH, обозначающий ширину линии, SIZE – толщину линии, ALIGN – расположение (выравнивание) и COLOR – цвет. Значения атрибутов конкретизируют заданную характеристику. Синтаксическое правило звучит следующим образом: после имени тега может следовать, по крайней мере, один пробел, затем, через пробелы, могут следовать тройки: атрибут, символ «=», значение. Значение рекомендуется заключать в кавычки, хотя стандарт HTML позволяет значения, состоящие только из латинских букв и цифр, не заключать в кавычки.
Изображение на экране будет примерно следующим.
_____________________________________
Стандарт позволяет не писать закрывающий тег, если он подразумевается. Например, тег
Имеет закрывающий, но его можно не писать перед открытием следующего абзаца. Тег
Обозначает абзац.
Мама мыла раму.
Дочка играла с мячиком.
Некоторые атрибуты не имеют значений, точнее, они имеют единственное значение, и потому достаточно просто указать или не указать в теге этот атрибут. Например, у тега FRAME есть атрибут NORESIZE, указывающий на то, что пользователю не позволено изменять размер данного фрейма.
Теги (элементы) в HTML могут быть вложены друг в друга аналогично циклам или условным операторам в языках программирования. Пересечения тегов без вложенности запрещены.
Пример ошибочной записи:
пример блока
с вложенным абзацем
Пример правильной записи:
пример блока
С вложенным абзацем
Кроме тегов и простого текста в HTML-коде могут встретиться так называемые символьные объекты или Escape последовательности: именованные и нумерованные сущности. Они нужны для представления в документе символов, запрещенных синтаксически или физически, а также символов, которые невозможно ввести с клавиатуры. Например,
Регистр букв для имен тегов и имен и значений атрибутов не важен. Хотя рекомендуется соблюдать некоторый стиль, например, писать имена всех тегов большими буквами, либо маленькими, либо маленькими, но с первой заглавной буквой. Такой текст легче воспринимается человеком.
Очень важное замечание! Цель браузера – показать клиенту вашу страницу. Обычная реакция браузера на ошибку – попытка исправить ошибку, а если не удалось, то пропустить не понятные для него слова или теги. Это и хорошо и плохо. Так как, с одной стороны, в результате браузер постарается показать пользователю максимум текста, но, с другой стороны, в этот текст может попасть часть с тегами и скриптами или не попасть собственно текст, если его браузер воспримет, например, как комментарий. Разработчику сайта такое поведение браузера очень мешает. Будьте готовы к тому, что сначала браузер будет старательно исправлять ваши ошибки, но через некоторое время он запутается, и у вас перестанут работать ранее работавшие фрагменты. Поэтому совет: не делайте ошибок, а лучше используйте современные редакторы, осведомленные о html-правилах, и указывающие вам на ошибки.
HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста ):
- язык означает, что он может быть прочитан как человеком, так и компьютером;
- разметка означает, что написанный вами код помечается с помощью ключевых слов;
- гипертекст означает, что он использует HTTP как часть Интернета.
Как и любой язык, HTML поставляется с набором правил . Эти правила относительно простые и сводятся к определению границ , чтобы знать, где что-то начинается и где заканчивается.
Ниже приведён пример абзаца в HTML:
Сегодня я изучаю синтаксис HTML на сайте сайтТо, что вы видите в угловых скобках < и > называется тегами HTML. Они определяют, где что-то начинается и где оно заканчивается.
Я уже создавал запись со справочником по HTML, где находился полный список всех тегов и их значения. Ссылка на данную запись –
Каждый из тегов несёт определённый смысл . В нашем случае обозначает абзац текста.
Как правило, они идут парами:
- открывающий тег определяет начало абзаца;
- закрывающий тег определяет его конец.
Единственным различием между открывающим и закрывающим тегами является слэш /, который предшествует имени тега.
При объединении открывающего, закрывающего тегов и всего между ними, вы получите элемент HTML .
Если вы просмотрите этот пример в вашем браузере, то заметите, что теги HTML в браузере не отображаются . Они читаются только браузером, чтобы знать, какой тип контента вы написали.
Группы теговВсе теги делятся на 2 типа, строчные и блочные.
Блочные элементы, вроде:
- абзацы ;
- списки: неупорядоченные (с маркером)
-
или упорядоченные списки (с числами)
;
- заголовки: от первого уровня до шестого уровня ;
- статьи ;
- разделы ;
- длинные цитаты .
Строчные элементы, вроде:
- ссылки ;
- выделенные слова ;
- важные слова ;
- короткие цитаты ;
- аббревиатуры .
Блочные элементы предназначены для структурирования основных частей вашей страницы, путём разделения содержимого на логически связанные блоки.
Строчные элементы предназначены, чтобы разграничить часть текста и придать ему определённую функцию или смысл. Строчные элементы, как правило, содержат одно или несколько слов.
АтрибутыВ тегах также могут размещаться атрибуты – специальные команды, которые расширяют действие тега. Для некоторых тегов они являются обязательными для правильной работы. Например для того чтобы ссылка вела на указанный адрес, нужно добавить дополнительный атрибут. Ссылка будет выглядеть так:
Атрибуты размещаются внутри открывающего тега в таком формате: .
Кавычки могут быть любыми – одинарными или двойными, допустимо их вообще их не ставить, если значение атрибута состоит из одного слова (но это не желательно).
Где писать HTMLВы, вероятно, сталкивались c простыми текстовыми файлами, теми, которые имеют расширение.txt. Чтобы такой текстовый файл стал HTML-документом (вместо текстового), вам нужно использовать расширение.html.
В принципе, для работы с HTML вы можете использовать даже обычный текстовый документ, который является стандартным на каждом компьютере. Для этого вам нужно создать новый документ, прописать в него код и сохранить его в формате.html .
Для того чтобы работать с HTML файлами было удобно, вы можете использовать специальные редактор, которые предназначены для работы с данным типом файлов. Одним, из таких редакторов, является Sublime Text 3, я уже писал о нем с своих предыдущих записях. Вот ссылка на запись –
Что писать в файлеДля того чтобы наглядно просмотреть свой сайт в браузере, в файле сайта необходимо прописать следующий код.
Это базовый шаблон, который используется для написания web-страниц с использованием HTML. Давайте его подробно разберем.
- – это код который говорит браузеру о том что мы используем последнюю версию HTML – HTML5
- – внутри данного тега располагаются все теги которые отвечают за функциональность сайта. Здесь мы подключаем сторонние файлы, подключаем скрипты, указываем кодировки и многое другое
- body – внутри этого тега располагаются теги, которые будут выводиться и работы которых мы с вами сможем расмотреть наглядно.
Давайте попробуем наглядно просмотреть работу кода, выведем текст:
Мой первый сайт
Это мой первый сайт!
Как вы могли заменить каждый из этих тегов имеет закрывающийся тег, то о чем мы говорили ранее. Вся структура HTML кода напоминает “матрешку”. Один тег вкладывается во внутрь другого.
В данной системе есть специальная иерархия. В этой системе теги делятся на братские, родительские и теги предки. Здесь все относительно, у каждого тега будут свои предки, родители и братья.
Родителем называют тег, внутри которого находится рассматриваемый тег.
Предками называются, теги которые расположены внутри рассматриваемого тега.
Братскими называют теги, которые находятся на одном уровне с рассматриваемым тегом.
Данную связь легко понять по данному примеру:
Известные футбольные цитаты Сэр Алекс Фергюсон однажды сказал о Филиппо Индзаги: Этот парень должен был родиться в положении вне игры . При критике со стороны Джона Карью, Златан Ибрагимович ответил: То, что делает Карью с мячом, я могу сделать с апельсином. Джордж Бест сказал: Я потратил много денег на выпивку, девчонок и быстрые автомобили. Остальное я просто промотал , - когда его спросили о его образе жизни.В этой структуре:
- является предком для любого другого элемента;
- является родителем для и трёх ;
- и три являются братскими друг для друга;
- каждый является родителем для и , которые в них содержатся;
- каждый
,
, и - это всё потомки .
Аналогия с семейным древом также применяется при прохождении нескольких слоёв вложений в HTML:
- потомок элемента X - это любой элемент внутри X;
- ребёнок - это просто прямой потомок;
- предком элемента Y является любой элемент;
- родитель - это лишь первый прямой предок.
Синтаксис HTML5
Как вы уже узнали, в HTML5 некоторые правила были ослаблены. Это было сделано потому, что создатели HTML5 хотели, чтобы этот язык реальнее отражал действительную работу веб-браузеров. Иными словами, они хотели сократить разрыв между "работающими веб-страницами" и "веб-страницами, правильными с точки зрения стандарта". В следующем разделе мы рассмотрим изменения в правилах более подробно.
Конечно же, все еще существуют устаревшие методы, поддерживаемые браузерами, употребление которых абсолютно не одобряется стандартом HTML5. Эти методы можно обнаружить с помощью валидатора HTML5.
Ослабленные правилаПри нашем первом знакомстве с разметкой HTML5 мы узнали, что использования элементов , и не является обязательным для этой разметки. Но ослабление правил в HTML5 на этом не заканчивается.
В нем также разрешается использовать в тегах как прописные, так и строчные буквы, как в следующем примере:
В тегах можно использовать как прописные, так и строчные буквы.
Также можно не использовать закрывающую обратную косую черту в пустых элементах, т.е. элементах без содержимого, таких как (изображение),
(разрыв строки) или (горизонтальная линия). Далее приведены три равнозначных способа вставить разрыв строки:
Пример
разрыва
строки
В HTML5 также подверглись изменениям правила для атрибутов. Значения атрибутов больше не требуется брать в кавычки, но только при условии, что они не содержат запретных символов (обычно это символы >, = или пробел). Вот пример использования элемента таким образом:
Также разрешены атрибуты без значений. Таким образом, если для установки флажка в XHTML требуется несколько повторяющийся синтаксис:
то в HTML5 это можно делать в традициях HTML 4.01, указывая только одно название атрибута:
Но некоторых особенно беспокоит не то, что все это разрешено в HTML5, а то, что не особенно последовательные разработчики могут небрежно использовать как строгие, так и ослабленные правила, иногда даже в одном и том же документе. Но в действительности подобная небрежная разметка возможна и в XHTML. В обоих стандартах обязанность за хороший стиль разметки лежит на веб-разработчике, т.к. браузер скушает все, что ему будет подано.
Использование элементов , и . В элементе удобно размещать определение естественного языка страницы, а элементы и позволяют отделить информацию о странице от собственно содержимого страницы.
Строчные буквы в тегах . Использование строчных букв в тегах не является обязательным, но такие теги намного больше распространены, их легче вводить (т. к. не требуется задействовать клавишу ), а также не так режут глаз, как теги с прописными буквами.
Взятие в кавычки значений атрибутов . Значения атрибутов берутся в кавычки потому, что на это есть причина - помочь избежать ошибок, которые в противном случае очень легко допустить. Без кавычек один неправильный символ значения атрибута может испортить всю страницу.
Новый расслабляющий подход к правилам в HTML5 может быть вполне по душе одним веб-разработчикам. Других же сама мысль о том, что за фасадом работающего без сучка, без задоринки браузера может скрываться непоследовательная, полная ошибок разметка, способна лишить сна.
Если вы принадлежите ко второму типу, то знайте, что инструмент для проверки правильности разметки, называющийся валидатором, может обнаружить код, который не соответствует рекомендуемым стандартам HTML5, даже если браузер и глазом не моргнет при обработке этого кода.
Некоторые из возможных проблем, которые валидатор в состоянии уловить, включают следующие:
отсутствие обязательных элементов (например, элемента );
отсутствие закрывающего тега;
неправильно внедренные теги;
отсутствие атрибутов у тегов, для которых они обязательны (например, атрибута src тега );
неправильное расположение элементов или содержимого (например, текста в блоке ).
Инструменты для разработки веб-страниц, такие как Dreamweaver и Expression Web, оснащены собственными валидаторами, но только самые последние версии поддерживают HTML5. В таком случае можно воспользоваться одним из онлайновых валидаторов. Далее даются инструкции по использованию популярного валидатора от организации W3C:
Ваш код будет отправлен на проверку, и после короткого ожидания в браузере будет выведен отчет с результатами валидации. Если код не прошел проверку, то в отчете будут указаны выявленные валидатором ошибки:
Даже для полностью правильного HTML-документа в отчете может быть указано несколько предупреждений (хотя полностью безобидных), включая такие, что кодировка была определена автоматически и услуга валидации кода HTML5 является экспериментальной и не совсем доведенной до логического конца.
Как можно видеть на рисунке, валидатор выявил в документе четыре нарушения правил HTML5, являющиеся результатом двух ошибок в коде. Первая ошибка - отсутствует обязательный элемент . Вторая - элемент закрывается до закрытия вложенного в него элемента . Тем не менее, несмотря на эти ошибки, эта разметка правильная, и все браузеры будут отображать эту страницу должным образом.
Возвращение XHTMLКак мы уже узнали, восхождение спецификации HTML5 знаменует, по идее, закат предыдущего короля Всемирной паутины - стандарта XHTML. Но действительность не так проста, и поклонникам XHTML не нужно отказываться ни от чего, что им мило в языках разметки предыдущего поколения.
Прежде всего, вспомним, что синтаксис XHTML продолжает существовать. Налагаемые XHTML правила либо продолжают использоваться в качестве руководящих принципов (например, правила правильного вложения элементов), либо поддерживаются в виде необязательных соглашений (например, соглашение об использовании закрывающей косой черты с пустыми элементами).
Но что, если вы хотите сделать следование правилам XHTML-синтаксиса обязательным? Возможно, вы беспокоитесь, что вы (или ваши коллеги по работе) неосознанно потихоньку впадете в использование ослабленных соглашений обычного HTML. Чтобы не допустить этого, вам нужно использовать XHTML5 , это менее распространенный стандарт, который, по сути, является HTML5, облаченным в ограничения, основанные на XML.
Чтобы сделать документ HTML5 документом XHTML, нужно явно указывать пространство имен XHTML в элементе , закрывать каждый элемент, обязательно использовать строчные буквы в тегах и т. д. В следующем листинге приводится пример кода, в котором выполнены все эти требования:
Крошечный документ HTML5
Дадим встряску браузеру в стиле HTML5!
В тегах XHTML нельзя использовать прописные буквы.
Для проверки этого кода требуется валидатор XHTML, который контролирует следование строгим старым правилам XHTML. Валидатор от W3C для этого не подойдет, но зато подойдет валидатор на сайте http://validator.nu, где нужно указать требуемый стандарт (т.е. XHTML) в раскрывающемся списке Preset. Также нужно установить флажок Be lax about HTTP Content-Type, если только вы не вставляете проверяемый код непосредственно в текстовое поле.
Следуя этим шагам, вы сможете создать документ XHTML и выполнить его проверку. Тем не менее браузеры все равно будут обрабатывать этот документ, как обычную страницу HTML5, которая просто пыжится походить на XML-документ. Никаких дополнительных правил при обработке такой страницы применять они не будут.
Если же вы хотите, чтобы и браузеры обрабатывали страницу согласно правилам XHTML, то вам нужно настроить свой веб-сервер для подачи страниц с MIME-типом application/xhtml+xml или application/xml, вместо стандартного типа text/html. Кстати, браузеры, поддерживающие XHTML5, обрабатывают такую разметку по-другому, чем обычный код HTML5. Они пытаются обрабатывать страницу как документ XML, и если это им не удается (по причине ошибки в коде), браузер прекращает обработку оставшейся части документа.
Какой из этого следует вывод? Для подавляющего большинства веб-разработчиков, от любителей до серьезных профессионалов, игра по строгим правилам XHTML не стоит требуемых для этого свеч. Единственным исключением является разработка специальных решений, например страниц с содержимым, которым нужно манипулировать посредством XML-инструментов, таких как, например, XQuery и XPath.
Если вам интересно, можно обмануть браузер и заставить его переключиться в режим XHTML. Для этого нужно лишь переименовать файл с расширением xhtml или xht, а потом открыть его с жесткого диска вашего компьютера. Большинство браузеров (включая Firefox, Chrome и IE 9) будут обрабатывать такую страницу, как будто бы она была загружена с веб-сервера с настройками MIME XML. Если страница содержит любую незначительную ошибку, в браузере отобразится частично обработанная страница (IE 9), сообщение об ошибке XML (Firefox) или то и другое вместе (Chrome).
Последнее обновление: 18.11.2019
При создании документа HTML5 мы можем использовать два различных стиля: HTML и XML.
Стиль HTML предполагает следующие моменты:
Начальные открывающие теги могут отсутствовать у элементов
Конечные закрывающие теги могут отсутствовать у элементов
Только пустые элементы (void elements) (например, br , img , link) могут закрываться с помощью слеша />
Регистр названий тегов и атрибутов не имеет значения
Можно не заключать значения атрибутов в кавычки
Некоторые атрибуты могут не иметь значений (checked и disabled)
Специальные символы не экранируются
Документ должен иметь элемент DOCTYPE
Это так называемый "разрешительный" стиль, основанный на послаблениях при создании документа.
Документ HTML5 также может быть описан с помощью синтаксиса XML. Такой стиль еще называют "XHTML". Он используется, если заголовок content-type имеет значение application/xml+xhtml . Для данного стиля характерны следующие правила:
Каждый элемент должен иметь начальный открывающий тег
Непустые элементы (non-void elements) с начальным открывающим тегом также должны иметь конечный закрывающий тег
Любой элемент может закрываться с помощью слеша />
Названия тегов и атрибутов регистрозависимы, как правило, используются в нижнем регистре
Значения атрибутов должны быть заключены в кавычки
Атрибуты без значений не допускаются (checked="checked" вместо просто checked)
Специальные символы должны быть экранированы
Сравним два подхода. Подход HTML5:
Заголовок
Содержание документа HTML5
И аналогичный пример с использованием подхода XHTML:
Заголовок
Содержание документа HTML5
При использовании синтаксиса XHTML нам также надо указать пространство имен для данного документа:
Выбор конкретного стиля при написании html-документов зависит от предпочтений программиста или веб-дизайнера. Нередко используется смешенный стиль, который заимствует правила из первого, и из второго стилей.
В то же время надо учитывать, что наличие у элемента закрывающего и открывающего тегов снижает вероятность, что элемент будет неправильно интерпретирован браузером.
Также заключение значений атрибутов в кавычки поможет избежать потенциальных ошибок. Так, атрибут class может принимать несколько значений подряд. Например: . Но если мы опустим кавычки, то в качестве значения будет использоваться "navmenu", а "bigdesctop" браузер будет пытаться интерпретировать как отдельный атрибут.
Если же возникают затруднения, насколько правильной является создаваемая разметка html, то ее можно проверить с помощью валидатора по адресу https://validator.w3.org :
Мы можем вставить в текстовое поле код веб-страницы, и после нажатия на кнопку "Check" внизу валидатор либо отобразит нам ошибки красным цветом, либо зеленым цветом уведомит, что ошибок нет, и код прошел валидацию.
Александр Кичатов
Как работают 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 кода в PHPHTML-код можно перемешивать с командами PHP:
Также HTML код можно подставить в PHPшную строку:
Результат в браузере:
Слон Наполеон
Мы можем как угодно совмещать PHP код и HTML теги:
Функции в PHP
Функция - это команда, которая выполняет какие-либо действия, например расчёты, управление файлами и т.д.
Определить функцию просто - у неё после названия идут круглые скобки:
Функция phpinfo() выводит на экран информацию с текущими настройками PHP.
Некоторые функции ожидают, что им передадут какое-нибудь значение. Например, функция округления ceil() ожидает число, которое она округлит:
Функция ceil() получает переданное нами значение 91.5 , обрабатывает его (округляет до 92) и возвращает результат. А команда echo получает возвращённое функцией значение и выводит его на экран. Результатом работы этого скрипта будет 92 .
Необходимость закрывающего тега в PHPЕсли после PHP команд нет HTML или любого другого вывода на экран, то мы можем не использовать закрывающий тег ?> :
Кроме этого, мы можем заменить тег
Использование тега