Какая программа читает формат html. Как открыть файл 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 .

В первой главе вы узнали, что дизайн сайта создается с помощью CSS. Для лучшего понимания, что и для чего нужно использовать, давайте рассмотрим один наглядный пример. Представьте себе, что HTML – это черно-белый структурированный каркас дома без украшений, а CSS – это то, с помощью чего мы создаем уникальный образ.

Как видите, у дома справа появились цвета, материалы и дополнительные украшения. На веб-странице происходит все то же самое: с помощью правил CSS на ней появляются цвета, отступы, меняется стиль шрифтов и размеры элементов, создается целый, завершенный стиль.

Простая таблица стилей

Давайте же взглянем, как выглядит самая элементарная таблица стилей и из каких элементов она состоит. Это пример CSS-стиля для всех тегов

Которые есть на веб-странице:

Как теперь будет выглядеть текст

В браузере и что означает каждая строка? Все очень просто: шрифт будет иметь полужирное начертание и цвет #1E824C (шестнадцатеричный код цвета) и отображаться в размере 1em (относительная единица, равная размеру шрифта, который задан по умолчанию в браузере).

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

Селектор Указывая его, мы говорим браузеру, к чему именно хотим применить стиль. В нашем случае селектором является p . Блок объявлений Так называется всё содержимое, находящееся между фигурными скобками {} после селектора. Стилевое свойство Это команда, с помощью которой указывается желаемый вариант форматирования (например, вы хотите изменить начертание шрифта font-weight , цвет color , размер шрифта font-size и т. д.). После имени свойства необходимо ставить двоеточие. В дальнейшем вы познакомитесь с большим количеством свойств CSS. Значение свойства После двоеточия записывается само значение свойства, которое вы определяете самостоятельно, создавая таким образом собственный стиль. В зависимости от свойства необходимо указывать подходящее ему значение.

Например, начертание шрифта задается ключевыми словами bold , bolder и т. д., цвет – шестнадцатеричным значением, RGB(A), HSL(A) или ключевыми словами red , orange , white и т. д., размер шрифта – единицами измерения CSS (процентами% , пикселямиpx , пунктамиpt , высотой шрифтаem ) или константами small , medium , large и т. д. После указания значения свойства ставится точка с запятой.

Поскольку CSS не чувствителен к переносу строк, пробелам, символам табуляции и регистру, вы можете оформлять ваш код так, чтобы в дальнейшем его было удобно читать и править. К примеру, мы могли бы написать вышеприведенный код в одной строке:

P {font-weight:bold;color:#1E824C;font-size:1em;}

Он тоже работает, но легко ли в нем разобраться? Особенно когда код CSS достаточно длинный. Конечно, не помешало бы разделить его хотя бы пробелами. Существует несколько правил хорошего тона, и если вы сразу выучите их, то в будущем скажете себе «спасибо».

Очень часто при описании стиля используется компактная форма записи, при которой все свойства для одного селектора указаны в одном блоке:

P { font-weight: bold; color: #1E824C; font-size: 1em; }

А такая форма записи весьма громоздка, хоть и работает:

P {font-weight: bold;} p {color: #1E824C;} p {font-size: 1em;}

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

Для дополнительного удобства можно добавлять комментарии прямо в CSS. В них вы можете писать пояснения, пометки, помогающие ориентироваться в таблицах стилей.

Комментарии в CSS записываются между символами /* и */ . Они не отображаются на веб-странице в браузере и видны исключительно в коде. Разработчики также часто используют комментарии для того чтобы скрыть временно ненужный участок кода CSS. Выглядят комментарии таким образом:

/* Стиль для основного текста */ p { font-weight: bold; color: #1E824C; font-size: 1em; }

Внутренние и внешние таблицы стилей

Когда вы создали таблицу стилей, вы можете выбрать, каким образом прикрепить ее к веб-странице. Существует два варианта таблиц – внутренние, которые добавляются прямо на страницу, и внешние, которые находятся в отдельном файле с расширением.css и подключаются к странице с помощью ссылки.

Внутренние таблицы стилей записываются в HTML-документе между тегами . Нужно добавлять таблицу стилей в каждую веб-страницу. Если на сайте присутствует большое количество страниц, которым необходим одинаковый дизайн, то добавление, а также редактирование стилей становится неблагодарной работой – процесс займет очень много времени. Поэтому внутренние таблицы стилей считаются неудобными.

Внешние таблицы стилей гораздо более распространены. Вам нужно только подключить таблицу ко всем необходимым веб-страницам, используя тег c атрибутом rel (определяет отношение между страницей и подключаемым файлом) и значением stylesheet , которое означает, что в подключаемом файле содержится таблица стилей. Атрибут href – это путь (URL) к вашему файлу.css:

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

Урок: создаем таблицу стилей

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

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

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

Подключение CSS к HTML

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

Откройте HTML-документ в текстовом редакторе, а также в браузере (чтобы было удобно просматривать изменения во внешнем виде страницы). Добавьте между тегами следующий код:

Вкратце о том, что вы только что сделали. Вставив этот код в HTML-документ, вы:

• указали ссылку на шрифт под названием Roboto Condensed, который будет взят с сервера Google (подробнее о шрифтах Google мы расскажем позже);
• подключили свою внешнюю таблицу стилей style.css (пока что пустую).

Пишем стиль CSS

Сохраните изменения в HTML-документе и перейдите в вами созданный пустой файл.css . Давайте добавим стиль для страницы:

Html { padding-top: 5px; background-image: url(background.jpg); }

Сохраните изменения. Поздравляем, вы написали первое правило – оно касается тега . Первое свойство - padding-top - добавит отступ сверху между окном браузера и содержимым веб-страницы в размере 5 пикселей. С помощью второго свойства, background-image , вы подключили изображение для фона всей страницы, указав путь к графическому файлу (находится в той же папке, что и HTML-документ).

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

Body { width: 75%; padding: 40px; margin: 15px auto; background-color: #EBEBEB; border-radius: 30px; }

Сохраните изменения в файле. Сейчас вы:

• задали область для содержимого тега , которая равна 75% от ширины окна браузера;
• обеспечили отступ в 40 пикселей от всех сторон области содержимого;
• расположили область по центру страницы, а также сделали отступ сверху и снизу в 15 пикселей;
• задали цвет фона #EBEBEB для области содержимого;
• скруглили углы прямоугольной области, указав радиус скругления 30 пикселей.

Снова обновите HTML-документ. При этом убедитесь, что кэш отключен либо перезагрузите страницу с обновлением всех связанных с ней файлов, используя специальную комбинацию клавиш (например, для Chrome это Ctrl+F5 ).

Вы увидите, что по центру страницы добавилась прямоугольная область со скругленными углами. Это и есть результат ваших действий в файле CSS. Вы можете также попробовать уменьшить окно браузера и полюбоваться, как ширина прямоугольной области подстраивается под его размер. Это происходит благодаря тому, что ширина width задана в процентах.

Изменяем шрифт с помощью CSS

Пора украсить наш текст. Добавьте в таблицу стилей этот код и сохраните изменения:

H1 { color: #E87E04; font-size: 2em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } h2 { color: #E87E04; font-size: 1.7em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } p { color: #22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; }

Написав это, вы задали цвета шрифтов для тегов h1 , h2 , p , указали их размеры, добавили отступы margin от левого края в 20 пикселей и дополнительно для

Сделали отступ сверху в 20 пикселей и установили интерлиньяж line-height (межстрочный интервал текста) на 50% больше стандартного. К тому же, вы подключили ко всем трём тегам шрифт Roboto Condensed (вот для чего в самом начале необходимо было указать ссылку на него в HTML-файле).

Обновите страницу в браузере и полюбуйтесь результатом работы. В этом уроке мы попробуем еще одну вещь. Допишите в CSS этот код:

Emphasis { font-weight: bold; }

Сохранитесь и обновите страницу в браузере. Вы увидите, что в последнем абзаце шрифт в некоторой части текста стал жирным. Чтобы понять, что произошло, перейдите в окно текстового редактора, где в самом начале вы открыли HTML-файл. Взгляните на последний абзац: часть предложения завернута в тег с классом emphasis . Таким образом вы написали стиль для отдельной строки текста в абзаце. Подробнее о классах мы расскажем в следующей главе.

В конечном итоге у вас должна получиться вот такая страница:

В качестве тренировки попробуйте изменить размер текста для

(допустим, 1.1em), а также увеличить отступ между

И левым краем области содержимого еще на 10 пикселей.

Выводы

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

Любой стиль CSS состоит из нескольких элементов: селектора, стилевого свойства и значения этого свойства.

Все свойства и их значения записываются в блоке объявлений между двумя фигурными скобками {} после указания селектора.

Нужно внимательно следить за знаками: две фигурные скобки (открывающая в начале блока объявлений и закрывающая в конце). Без этих скобок CSS будет работать некорректно.

Требуется обязательно ставить двоеточие после свойства и точку с запятой после значения.

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

Начинаем изучение языка. Текст на HTML представляет собой "простой текст". Все гипертекстовые особенности документа задаются с помощью тегов - особых пометок, включаемых в этот текст.

Пусть есть текст:

Запишем этот текст по-другому, вставив указания о том, как надо отображать текст. Указания выделим угловыми скобками.

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

«Мама мыла раму, а котик играл с клубком. Мальчик забрал у котика клубок».

Тег – команда в угловых скобках. Имя тега – первое, что пишется после открывающей угловой скобки, без пробелов перед ним! Существуют теги одиночные и теги контейнеры. Одиночные теги – некоторая команда браузеру, выполняемая в том месте, где указана, например, команда «нарисовать линию»:

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

Мама мыла раму.

.

У тега могут быть атрибуты. Атрибут дополняет и поясняет тег. Порядок атрибутов не важен. Например, у тега HR есть атрибут WIDTH, обозначающий ширину линии, SIZE – толщину линии, ALIGN – расположение (выравнивание) и COLOR – цвет. Значения атрибутов конкретизируют заданную характеристику. Синтаксическое правило звучит следующим образом: после имени тега может следовать, по крайней мере, один пробел, затем, через пробелы, могут следовать тройки: атрибут, символ «=», значение. Значение рекомендуется заключать в кавычки, хотя стандарт HTML позволяет значения, состоящие только из латинских букв и цифр, не заключать в кавычки.

Изображение на экране будет примерно следующим.

_____________________________________

Стандарт позволяет не писать закрывающий тег, если он подразумевается. Например, тег

Имеет закрывающий, но его можно не писать перед открытием следующего абзаца. Тег

Обозначает абзац.

Мама мыла раму.

Дочка играла с мячиком.

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

Теги (элементы) в HTML могут быть вложены друг в друга аналогично циклам или условным операторам в языках программирования. Пересечения тегов без вложенности запрещены.

Пример ошибочной записи:

пример блока

с вложенным абзацем

Пример правильной записи:

пример блока

С вложенным абзацем

Кроме тегов и простого текста в HTML-коде могут встретиться так называемые символьные объекты или Escape последовательности: именованные и нумерованные сущности. Они нужны для представления в документе символов, запрещенных синтаксически или физически, а также символов, которые невозможно ввести с клавиатуры. Например,

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

Очень важное замечание! Цель браузера – показать клиенту вашу страницу. Обычная реакция браузера на ошибку – попытка исправить ошибку, а если не удалось, то пропустить не понятные для него слова или теги. Это и хорошо и плохо. Так как, с одной стороны, в результате браузер постарается показать пользователю максимум текста, но, с другой стороны, в этот текст может попасть часть с тегами и скриптами или не попасть собственно текст, если его браузер воспримет, например, как комментарий. Разработчику сайта такое поведение браузера очень мешает. Будьте готовы к тому, что сначала браузер будет старательно исправлять ваши ошибки, но через некоторое время он запутается, и у вас перестанут работать ранее работавшие фрагменты. Поэтому совет: не делайте ошибок, а лучше используйте современные редакторы, осведомленные о html-правилах, и указывающие вам на ошибки.