Какое расширение обычно имеют стилевые файлы в каких программах их можно редактировать
В этой главе речь пойдет о том, как внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом.
Осуществить данную задачу можно тремя способами:
- Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
- Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
- Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.
Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.
Атрибут style.
Практически каждый HTML тег имеет атрибут style , который говорит о том, что к этому тегу применяется некое стилевое описание.
это параграф с индивидуальным стилем
Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента
В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. В последующих главах я подробно расскажу о том что написано в кавычках , сейчас же речь идет о том как применить CSS к какому либо HTML тегу.
По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.
Но еще раз повторюсь такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.
Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.
Взгляните на пример, ниже к нему будут комментарии.
Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки , — будут синими а параграфы — красными. Представьте как мы облегчили бы себе работу будь на странице сотня таких параграфов и штук пятнадцать заголовков, да и сам документ стал меньше весить за счет "удаления" всех повторяющихся стилевых описаний для каждого отдельно взятого элемента.
Теперь обещанные комментарии:
Тег принято внедрять в заголовок HTML документа между тегами .
Атрибут тега type — сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Для правильной интерпретации браузерами CSS значение type (MIME тип данных) должно равняться text/css .
Внутри тега идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:
Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.
CSS в отдельном внешнем файле.
Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.
Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:
О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.
Далее сохраняем этот небольшой файлик с расширением *.css (обычно файл со стилями называют style.css).
Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.
Делается это с помощью тега (связь). Тег многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.
Тег имеет атрибуты:
- shortcut icon — Определяет, что подключаемый файл является иконкой.
- stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
- application/rss+xml — Файл в формате XML для описания ленты новостей.
Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:
Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"
Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..
В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом — mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?
О том как присвоить какой либо группе идентичных элементов стиль отличающийся от основного стиля данного элемента, сделать отдельный класс элементов, читайте в главе Классы и идентификаторы.
Полезные советы:
В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?
Добавление стилей на веб-страницу
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.
Внешняя таблица стилей
Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент . Он располагается внутри , как показано в примере 1.
Пример 1. Подключение внешних стилей
Значение атрибута rel у всегда будет stylesheet и остаётся неизменным. В качестве значения href указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В примере выше мы подключаем кириллический шрифт Lobster с сайта Google Fonts.
Содержимое файла style.css показано в примере 2.
Пример 2. Содержимое файла style.css
Как видно из данного примера, файл со стилем является обычным текстовым файлом и содержит только синтаксис CSS. В свою очередь и HTML-документ содержит только указатель на файл со стилем, таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование внешней таблицы стилей — наиболее универсальный и удобный метод добавления стиля на сайт. Это позволяет независимо редактировать файлы HTML и CSS.
Внутренняя таблица стилей
Стили пишутся в самом HTML-документе внутри элемента , который в свою очередь располагается внутри . По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но часто применяется в ситуациях, когда речь идёт об одной веб-странице (пример 3).
Пример 3. Использование
В данном примере задан стиль элемента , который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать со .
Рис. 1. Вид заголовка, оформленного с помощью стилей
Встроенный стиль
Встроенный стиль является по существу расширением для одиночного элемента, используемого на текущей веб-странице. Для определения стиля элемента к нему добавляется атрибут style , а значением атрибута выступает набор стилевых правил (пример 4).
Пример 4. Использование атрибута style
В данном примере стиль элемента
меняется с помощью атрибута style , в котором через точку с запятой перечисляются стилевые свойства (рис. 2).
Рис. 2. Использование встроенного стиля для изменения вида текста
Встроенные стили не рекомендуется применять на сайте, поскольку это усложняет редактирование стилей и нарушает принцип разделения кода и оформления.
Все описанные методы добавления CSS могут быть задействованы как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет встроенный стиль, затем внутренняя таблица стилей и в последнюю очередь внешняя таблица стилей. В примере 5 применяется сразу два метода добавления стиля в документ.
Пример 5. Сочетание разных методов
В данном примере для первого заголовка задан красный цвет и размер 36 пикселей с помощью атрибута style , для второго заголовка — зелёный цвет через элемент (рис. 3).
Рис. 3. Результат применения стилей
Импорт CSS
В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно с внешней или внутренней таблицей стилей, но никак не со встроенными стилями. Общий синтаксис следующий.
После ключевого слова @import указывается путь к стилевому файлу одним из двух приведённых способов — с помощью url или без него. В примере 6 показано, как можно импортировать стиль из внешнего файла.
Пример 6. Импорт CSS
В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.
Аналогично происходит импорт и в CSS-файле, который затем подключается к документу через элемент (пример 7).
Пример 7. Импорт в файле style.css
Импорт обычно применяется в тех случаях, когда доступ есть только к стилевому файлу и нет возможности отредактировать HTML-документ.
Как вынести стили в отдельный файл css
Форум Приднестровской поддержки CMS XOOPS.
По ссылке вы можете скачать последнюю версию CMS XOOPS. А так же прочитать инструкции по установке XOOPS и модулей
По данным ссылкам можно скачать модули нашей разработки.
Модуль инструкций. Ознакомьтесь с установкой XOOPS. C начальными познаниями по HTML,CSS, JS, PHP и др.
Приднестровская поддержка XOOPS
Таблицу стилей можно вынести в отдельный файл. Файл с таблицей стилей обычно имеет расширение css и может редактироваться любым текстовым редактором, например, Блокнотом. (1) Задать расширение файлу можно точно так же, как и при создании файла с расширением html .
Вынесем таблицу стилей в отдельный файл style.css (листинг 2) и подключим его к основному документу test.html (листинг 3).
Листинг 2. Содержимое файла style.css
font-size: 12pt; /* Размер шрифта */
color: red ; /* Цвет текста */
font-family: Arial /* Название шрифта */
font-size: 12pt; /* Размер шрифта */
color: green ; /* Цвет текста */
font-family: Arial /* Название шрифта */
font-size: 12pt; /* Размер шрифта */
color: blue ; /* Цвет текста */
font-family: Arial /* Название шрифта */
Листинг 3. Содержимое файла test.html
" http: // www . w3 . org / TR / html4 / loose . dtd " >
Сохраним оба файла в одной папке и откроем файл test.html в Web-браузере. Результат будет таким же, как и в предыдущем примере.
Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью одинарного тега . В параметре href указывается абсолютный или относительный URL-адрес файла, а в параметре rel должно быть значение stylesheet , показывающее, что присоединяемый таким образом документ содержит таблицу стилей:
Подключить внешний CSS-файл можно также с помощью правила ©import :
Правило ©import: должно быть расположено внутри тега :
©import url( "style.ess" );
В необязательном параметре можно указать устройство, для которого предназначена подключаемая таблица стилей. Например, all — для любых устройств, print — для предварительного просмотра и распечатки документа. Пример:
©import "style.css" print;
Таблицу стилей, вынесенную в отдельный файл, можно использовать в нескольких HTML-документах.
Оформление современных веб-сайтов задаётся с помощью стилевых файлов, в которых в специальном формате описывается внешний вид документа. Такая технология называется каскадными таблицами стилей (англ. CSS — Cascading Style Sheets). Как правило, для всего сайта используется единый стилевой файл. Поэтому изменение дизайна (например, для отображения документа на карманном персональном компьютере или смартфоне) теоретически сводится к замене этого файла на другой.
Стилевой файл — это простой текстовый файл («только текст», англ. plain text), в котором задаются свойства тэгов. Обычно стилевые файлы имеют расширение css.
Для того чтобы изменить цвет фона и текста для всей страницы, нужно в стилевом файле (назовем его test.css) записать:
Сначала указывают селектор (от англ. select — выбирать) — название элемента или обозначение для группы элементов, оформление которых меняется. Затем в фигурных скобках определяются все нужные свойства. В данном случае для тэга изменяются свойства color (цвет текста, англ. color — цвет) и background (цвет фона, англ. background — фон).
Значение свойства записывают через двоеточие, в конце каждого определения ставится точка с запятой.
R = FF16 = 255, G = 6616 = 102, В = 0.
Теперь стилевой файл test.css нужно «подключить» к вебстранице с HTML-кодом. Для этого используется специальный тэг (англ. link — связь), с помощью которого устанавливается связь с другими файлами. Этот тэг нужно расположить внутри контейнера (заголовка страницы):
У тэга указаны три атрибута, причем сразу понятно, что href обозначает имя подключаемого стилевого файла.
Атрибут rel — это сокращение от английского relation — отношение; он определяет, какую роль играет файл text.css. В данном случае значение stylesheet говорит о том, что это таблица стилей (англ. style sheet). Атрибут type — это тип данных, значение text/css говорит о том, что это файл с каскадной таблицей стилей (CSS).
Если теперь вы откроете веб-страницу с подключённым стилевым файлом, то увидите, что цвета текста и фона изменились.
Следующая страница Стили для элементов
Cкачать материалы урока
Оформление современных веб-сайтов задаётся с помощью стилевых файлов, в которых в специальном формате описывается внешний вид документа. Такая технология называется каскадными таблицами стилей (англ. CSS — Cascading Style Sheets). Как правило, для всего сайта используется единый стилевой файл. Поэтому изменение дизайна (например, для отображения документа на карманном персональном компьютере или смартфоне) теоретически сводится к замене этого файла на другой.
Стилевой файл — это простой текстовый файл («только текст», англ. plain text), в котором задаются свойства тэгов. Обычно стилевые файлы имеют расширение css.
Для того чтобы изменить цвет фона и текста для всей страницы, нужно в стилевом файле (назовем его test.css) записать:
Сначала указывают селектор (от англ. select — выбирать) — название элемента или обозначение для группы элементов, оформление которых меняется. Затем в фигурных скобках определяются все нужные свойства. В данном случае для тэга изменяются свойства color (цвет текста, англ. color — цвет) и background (цвет фона, англ. background — фон).
Значение свойства записывают через двоеточие, в конце каждого определения ставится точка с запятой.
R = FF16 = 255, G = 6616 = 102, В = 0.
Теперь стилевой файл test.css нужно «подключить» к вебстранице с HTML-кодом. Для этого используется специальный тэг (англ. link — связь), с помощью которого устанавливается связь с другими файлами. Этот тэг нужно расположить внутри контейнера (заголовка страницы):
У тэга указаны три атрибута, причем сразу понятно, что href обозначает имя подключаемого стилевого файла.
Атрибут rel — это сокращение от английского relation — отношение; он определяет, какую роль играет файл text.css. В данном случае значение stylesheet говорит о том, что это таблица стилей (англ. style sheet). Атрибут type — это тип данных, значение text/css говорит о том, что это файл с каскадной таблицей стилей (CSS).
Если теперь вы откроете веб-страницу с подключённым стилевым файлом, то увидите, что цвета текста и фона изменились.
Следующая страница Стили для элементов
Cкачать материалы урока
Наверное, вы уже заметили, что в предыдущем параграфе этой главы мы говорили только о том, как структурировать текст: выделять заголовки и абзацы, строить списки, добавлять гиперссылки. Вопрос об оформлении документа (изменении внешнего вида) ещё практически вообще не рассматривался. Дело в том, что в современном веб-дизайне считается хорошим тоном разделять содержание и оформление.
В идеале веб-страница (файл с HTML-кодом) должна содержать только логическую разметку — определять смысловые части документа. Например, тэги заголовков и списков — это тэги логической разметки.
Всё оформление (например, размер шрифта и цвет заголовков) должно быть вынесено в отдельный файл. Во-первых, при этом можно легко менять дизайн всего сайта, поправив единственный файл. Во-вторых, пользователь может просматривать веб-страницу на разных устройствах, от широкоэкранного монитора до карманного персонального компьютера (КПК). Вместо того чтобы для каждого из них готовить свою версию веб-сайта, можно просто подключать разные файлы с оформлением для одних и тех же веб-страниц.
Язык HTML предназначен, прежде всего, для логической разметки документа. Для этого используются специальные тэги, некоторые из них приведены в табл. 4.2.
Обратите внимание, что внешний вид этих блоков никак не задаётся. Браузеры выделяют их некоторым стилем, установленным по умолчанию. Например, контейнер обычно выделяется жирным шрифтом, — курсивом, — моноширинным 1 шрифтом, a — подчёркивается штриховой линией. Веб-мастер (разработчик сайта) может изменить это оформление с помощью стилевых файлов, о которых пойдёт речь далее. Именно эти тэги играют важную роль при определении места сайта в выдаче поисковых систем — с их помощью нужно отмечать ключевые слова, отражающие содержание страницы.
Для оформления текстов программ используют тэг (англ. preformatted — предварительно отформатированный). В этом контейнере сохраняются все пробелы и символы перевода строки; текст обычно оформляется моноширинным шрифтом, чтобы сохранить все отступы (рис. 4.12).
Кроме того, язык HTML содержит так называемые тэги физической разметки, которые точно указывают, как должен выглядеть текст. Некоторые из них перечислены в табл. 4.3.
Стилевые файлы
Оформление можно изменять также и с помощью атрибутов некоторых тэгов (например, атрибут align задаёт выравнивание заголовков и абзацев). Эти средства считаются устаревшими, и использовать их не рекомендуется. Тэги физической разметки оставлены для совместимости с веб-сайтами прошлых лет, где они были единственным средством оформления.
Оформление современных веб-сайтов задаётся с помощью стилевых файлов, в которых в специальном формате описывается внешний вид документа. Такая технология называется каскадными таблицами стилей (англ. CSS — Cascading Style Sheets). Как правило, для всего сайта используется единый стилевой файл. Поэтому изменение дизайна (например, для отображения документа на карманном персональном компьютере или смартфоне) теоретически сводится к замене этого файла на другой.
Стилевой файл — это простой текстовый файл («только текст», англ. plain text), в котором задаются свойства тэгов. Обычно стилевые файлы имеют расширение ess.
Для того чтобы изменить цвет фона и текста для всей страницы, нужно в стилевом файле (назовем его test. ess) записать:
Сначала указан тэг, оформление которого меняется — это тэг . Затем в фигурных скобках определяются все нужные свойства (их называют селекторами от англ. select — выбирать), в данном случае используются свойства color (цвет текста, англ. color — цвет) и background (цвет фона, англ. background — фон). Значение свойства записывают через двоеточие, в конце каждого определения ставится точка с запятой.
R - FF16 = 255, G = 6616 = 102, В = 0.
Теперь стилевой файл test.ess нужно «подключить» к вебстранице с HTML-кодом. Для этого используется специальный тэг (англ. link — связь), с помощью которого устанавливается связь с другими файлами. Этот тэг нужно расположить внутри контейнера (заголовка страницы):
У тэга указаны три атрибута, причем сразу понятно, что href обозначает имя подключаемого стилевого файла.
Атрибут rel — это сокращение от английского relation — отношение; он определяет, какую роль играет файл text. ess. В данном случае значение stylesheet говорит о том, что это таблица стилей (англ. style sheet). Атрибут type — это тип данных, значение text/ess говорит о том, что это файл с каскадной таблицей стилей (CSS).
Если теперь вы откроете веб-страницу с подключённым стилевым файлом, то увидите, что цвета текста и фона изменились.
Стили для элементов
Задав стиль для контейнера , мы определили свойства по умолчанию для вложенных в него элементов. Так в предыдущем примере для всех абзацев () будет установлен белый цвет символов. Это говорит о том, что свойство color передаётся вложенным элементам, т. е. наследуется.
Наследование означает, что некоторые свойства контейнера-«родитепя» передаются всем вложенным элементам.
Это удобно, потому что во многих случаях в стилевом файле достаточно определить только свойства «родителя».
Однако не все свойства наследуются 1 . Например, фон (background) не наследуется, по умолчанию он прозрачный для всех элементов, поэтому фактически мы видим фон «родителя».
Можно задать стиль оформления любого тэга. Например, чтобы сделать рамку (англ. border) у всех абзацев, нужно добавить в стилевой файл строки
border: lpx solid blue;
Здесь для селектора (свойства) border задано (через пробел) сразу три «подсвойства»:
В справочниках по CSS можно уточнить, наследуется свойство.
• lpx —толщина линии (1 пиксель);
• solid—тип линии (сплошная);
• blue — цвет линии (синий).
Для настройки цвета гиперссылок изменяется стиль для тэга :
Стиль посещённых ссылок задаётся с помощью обозначения visited visited — посещённый):
Здесь visited — это так называемый псевдокласс, который обозначает состояние объекта. Часто применяется также псевдокласс hover (состояние «мышь над объектом»).
В рассмотренных примерах оформление определялось сразу для всех одноимённых тэгов на странице. Часто бывает нужно выделить с помощью специального оформления не все абзацы, а только некоторые. В этом случае используют классы. Каждому тэгу можно присвоить свой класс с помощью атрибута class, например:
Специальное оформление для абзацев класса error определяется в стилевом файле:
Внешний вид остальных абзацев при этом остаётся без изменений.
Может оказаться, что к какому-то тэгу применимы несколько правил оформления, указанных в таблице стилей. Например, к абзацу класса error относятся все стили, определённые для тэга , а также все стили для класса p.error. Такая ситуация называется каскадом, поэтому таблицы, стилей называют каскадными. В этом случае браузер определяет окончательный вид элемента по специальным (достаточно сложным) правилам. Их смысл состоит в том, что более конкретное указание отменяет более общее. Например, пусть в стилевом файле определён зелёный цвет текста для всех абзацев (общее правило) и красный цвет — для абзацев класса error (более конкретное правило):
p.error ( color: red; )
Тогда для абзаца класса error будет установлен красный цвет, общее правило отменяется.
Можно вообще не указывать тэг, оставив только название класса:
В этом случае оформление применяется к любым тэгам, для которых задан класс error. Например, для выделения специальным стилем слова или словосочетания (а не всего абзаца) можно использовать тэг (от англ. span — интервал, промежуток):
В этом примере красным цветом будет выделено только слово «Ошибка» (для него использован класс error).
С помощью стилей можно определить оформление тэга, который вложен в другой тэг. Например, пусть мы хотим использовать дополнительное выделение в контейнере с помощью такого же вложенного контейнера :
<еm>Тэги <еm>логическойеm> разметкиеm>.
Если не изменять стили, то повторное применение тэга не меняет результат, и слово «логической» никак не будет выделяться на фоне соседей. Если же добавить в стилевой файл строки
то слово «логической» будет записано прямым (нормальным, не курсивным) шрифтом, в отличие от окружения, набранного курсивом (так обычно выделяется содержимое контейнера ). Чтобы определить курсив, нужно задать значение italic вместо normal. Запись em em означает «тэг внутри другого тэга », ар еm — «тэг внутри тэга ».
Существует много разных селекторов и ещё больше их возможных значений. Полную информацию вы можете найти в справочной литературе или в Интернете.
Вопросы и задания
1. Как вы понимаете термины «логическая разметка* и «физическая
разметка»?
2. Почему считается более грамотным выносить оформление веб-стра
ниц в отдельный файл?
3. Назовите тэги логической и физической разметки языка HTML. Ка
кие из них рекомендуется использовать? Почему?
4. В чем различие тэгов и ? В каких случаях использует-
5. Какой тэг используется для оформления текстов программ?
6. Что такое CSS?
7. Какое расширение обычно имеют стилевые файлы? В каких про
граммах их можно редактировать?
8. Как подключить стилевой файл к веб-странице?
9. Как изменить оформление стандартных тэгов, например ?
10. Каким способом можно определить цвет элемента на веб-странице?
12. Чем отличается класс от псевдокласса? Какие псевдоклассы вы знаете?
13. Чем различаются два определения?
14. Зачем нужен тэг?
15. Что такое наследование свойств в CSS? Чем, по вашему мнению, оно
полезно?
Основным средством для написания документов в Web является гипертекстовый язык разметки или HTML (Hypertext Markup Language), используемый для разработки Web-сайтов.
HTML-документ – это обычный текстовый файл с расширением имени .html или .htm. Для создания HTML-документов можно воспользоваться любым текстовым редактором (н-р, редактором Notepad/блокнот). При сохранении документа в таком редакторе следует вручную вводить нужное расширение (.html или .htm).
Повтор HTML
Документ HTML состоит из текста и различных управляющих слов, заключенных в угловые скобки “”. Эти слова называются тегами (или дескрипторами) HTML-документа. Различают парные и непарные теги. Пару из открывающего и закрывающего тегов называют контейнером.
Тело документа находится между тегами и и содержит заголовок и основной текст HTML-документа. Заголовок размещается между тегами
и и может включать различную системную информацию, например название документа. Текст заголовка документа располагается между тегамиРасширения языка HTML
Средства языка HTML ограничиваются описанием элементов, а также их свойств, которые должны быть отображены на Web-странице. Но если возникает необходимость внесения каких-либо изменений в эти объекты, то возможностей HTML для этого оказывается недостаточно. В таких случаях приходится прибегать к применению других средств. Многие из которых нуждаются для браузера в дополнительных программных надстройках, обеспечивающих отображение файлов соответствующего формата. Это могут быть различные видео- и аудиофайлы, аплеты Java[1], ролики Flash и многое другое. Однако существуют средства, не требующие установки дополнительных надстроек браузера и даже загрузки дополнительных файлов – это расширения самого языка HTML. Сюда можно отнести такие технологии, как каскадные таблицы стилей (CSS), динамический HTML (DHTML) и JavaScript.
Flash-ролики, вставляемые в HTML-страницу и Java-аплеты могут взаимодействовать с остальным содержимым страницы только посредством сценариев JavaScript.
В Windows: Microsoft Internet Explorer, Mozilla Firefox, Adobe Dreamweaver CS5, Adobe ColdFusion Builder 2, Microsoft Visual Web Developer, Microsoft Visual Studio 2010, Microsoft Notepad, Nvu, Adobe Contribute, Adobe Creative Suite, Adobe ExtendScript, Safari for Microsoft Windows, Opera, любой другой веб-браузер, любой другой текстовый редактор.
В Mac OS: Apple Safari, Mozilla Firefox, Adobe Creative Suite for Mac, Adobe GoLive, Adobe Dreamweaver CS5, Adobe ColdFusion Builder 2, любой другой веб-браузер, любой другой текстовый редактор.
В Linux: Firefox for Linux, Opera for Linux, Chromium for Linux, Konqueror, gedit, GNU Emacs, Google Chrome for Linux
Описание HTML
Популярность:
Расширение файла HTML связано с языком гипертекстовой разметки. Язык HTML предоставляет средства для создания структурированных документов, обозначая структурные семантики текста, например, заголовки, абзацы, списки, ссылки, цитаты и другие предметы. Это основной язык для написания веб-страниц.
На DOS-компьютерах, которые не понимают расширения с более чем 3 символа, используется расширение .HTM, но это одно и тоже, что и .HTML.
Файлы .HTML веб-страниц закодированы на языке HTML. HTML веб-страницы могут отображаться в любом веб-браузере. HTML форматирует текст, таблицы, изображения и другое содержимое, которое будет отображаться на странице. Большинство страниц в статических веб-сайтах имеют расширение .HTML.
HTML код разбирается веб-браузером и, как правило, не видны пользователю. Но пользователи обычно имеют возможность «просмотреть исходный файл» в своем веб-браузере. Поэтому HTML-файлы сохраняются в стандартном текстовом формате, их можно открыть и редактировать с помощью любого текстового редактора.
Какие форматы текстовых файлов бывают и в каких программах можно открывать
Читайте, что это за форматы текстовых файлов: TXT, RTF, DOC, DOCX, HTML, PDF. Какие программы поддерживают и как можно редактировать, открывать и сохранять. Далее поговорим о них подробнее. Во время работы с документами можно далеко не сразу обратить внимание на доступное им разнообразие форматов. Далее мы подробнее остановимся на особенностях каждого из них.
Самый распространенный и простой формат текстовых файлов — TXT
Если говорить о том, какой формат текстовых файлов появился первым, это будет txt – его история началась практически одновременно с возникновением такого явления, как персональный компьютер. В файле имеется исключительно текст, форматирование, картинки и шрифты в txt не сохраняются. Данный формат можно считать одним из наиболее универсальных – его распознают сотни приложений для различных устройств.
Среди прочего, TXT можно открыть одним из следующих приложений:
- «Блокнот» — это самое простое средство для обработки текстовой информации. Приложение встроено в Windows. Приложение позволяет вводить и корректировать текст, сохранять информацию на ПК. Данное решение не теряет совой актуальности, поскольку при работе с информацией не всегда есть необходимость в использовании масштабных текстовых процессоров.
- WordPad – редактор, который также является частью ОС Windows. В приложении имеется большое число инструментов, однако его функциональность уступает решением Writer или Word. Программа берет истоки от компонента Windows Write, который является частью Windows 1.0. В редакторе доступно форматирование, а также печать текстовой информации.
- Word – это решение от корпорации Microsoft получило огромное распространение. Оно в значительной степени облегчает взаимодействие пользователя с текстовой информацией. Word полезен при ведении официальной и деловой переписки, обработке текстовых данных, работе с корреспонденцией. Программа отличается простотой и функциональностью. – это процессор с уникальным интерфейсом. При этом у пользователя есть возможность выбрать стиль схожий с Microsoft Word. При помощи данного инструмента можно просматривать документацию обозревателе интернета. Пользователь может скрыть отдельную информацию из документа, на ней возникнет особая черная полоса.
Форматы файлов текстовых документов начали стремительно развиваться, и компания Microsoft разработала решение Rich Text Format — RTF. Перед нами кросс-платформенный формат, способный хранить текстовые сведения. RTF способен сохранять форматирование и вставлять в текст различные объекты:
Формат rtf работает с технологией «управляющих» слов, они выделяются специальными символами и поэтому документ занимает больше места на диске.
RTF можно открыть одним из следующих приложений:
- Microsoft Works – это пакет, который позволяет создавать различные документы. Здесь есть инструменты для объединения с КПК, средство воспроизведения презентаций, менеджер графики, календарь-ежедневник, электронные таблицы, текстовый редактор и база данных. В приложение встроен особый «Центр запуска», в который входит несколько разделов.
- AbiWord – это бесплатное приложение, оно распространяется в соответствии с лицензией GNU. Процесс экспорта в этой программе имеет свои особенности, при использовании функции «Сохранить как», документу присваивается фирменный формат AbiWord , который используется не слишком активно. Удобнее для преобразования обратиться к функции «Сохранить копию».
- Nuance OmniPage – это компактное приложение с возможностью распознания символов. Благодаря возможности Google Desktop Search легко отыскать необходимые документы, указав имеющиеся в них слова. Приложение способно работать с фалами, в которых помимо также содержаться фотографии другие изображения.
- TextMaker – редактор, который способен работать не только в среде Windows, но и Windows CE, Windows Mobile, Android и Linux. Является частью пакета SoftMaker Office. Данное решение – альтернатива Pocket Word, которая существенно расширяет возможности форматирования и обработки текстов. В приложение встроена проверка орфографии.
Обсуждая распространенные форматы текстовых файлов следует отдельно сказать о doc. Данное решение также было создано корпорацией Microsoft, оно применялось редактором Word. Отметим, что файлы doc относятся к бинарным, их поддерживают практически все существующие сегодня текстовые редакторы. Данный формат поддерживает гиперссылки, вставку в текст картинок и прочих объектов, стили и форматирование.
Открыть DOC можно одним из следующих приложений:
- LibreOffice – это решение, которое дает возможность обрабатывать графики, презентации, базы данных, электронные таблицы и тексты. Данный пакет приложений распространяется свободно и переведен на множество языков. Во многом LibreOffice можно использовать, как альтернативу известным коммерческим решениям.
- Kingsoft Writer —пакет, разработанный разработчиками из Китая, как альтернатива решения Microsoft Office. Решение официально переведено на множество языков, среди которых интерфейсы на польском, русском, португальском, испанском, немецком, французском, английском. Существуют также версии данного решения для Linux и Android.
- OpenOffice – это пакет программ, который во многом успешно выступает конкурентом Microsoft Office и другим коммерческим решениям такого типа. Он практически не уступает конкурентам по качеству интерфейса. Данное решение поддерживается множеством операционных систем, среди которых Solaris, FreeBSD, Windows, MacOS, Linux.
Обсуждая форматы текстовых файлов нельзя пройти мимо doc x . Это усовершенствованный вариант doc, который был лицензирован и впервые появился вместе с пакетом Office 2007.
Открыть DOCX можно одной из следующих программ:
- Ability Write – это текстовый редактор с набором функций, близких к MS Word . В дизайне отличия несущественные, однако в Ability Write отсутствует проверка орфографии и грамматики для русского языка. Данное решение является частью пакета офисных программ Ability Office, который отличается нетребовательностью к ресурсам ПК.
- Panergy docXConverter – это приложение для конвертирования файлов docx, а также xlsx в форматы cvs и rtf. Инструмент позволяет работать с упомянутыми форматами документов даже в тех редакторах, которые изначально их не поддерживали. В преобразованном документе сохраняется форматирование оригинала.
Форматы, в основу которых положена технология HTML получили широкое распространение, среди них следует отметить MHT, CHM и HTM. Язык HTML создавался специально для разработки веб-страниц, однако его удобство, небольшой размер и универсальность привели к тому, что сейчас данное решение активно используется для хранения текстовой информации. Файл HTML легко воспроизвести базовыми инструментами ОС, он не требует установки стороннего программного обеспечения.
Компания Adobe создала данное решение для различных полиграфических целей. Файлы pdf оказались настолько удобными, что превратились в стандарт в сфере обмена документами.
Открыть PDF можно при помощи Adobe Reader . Речь идет о ряде программных решений, разработанных специально для управления и создания документов интересующего нас формата. Данный продукт позволяет работать с презентациями, формами и самостоятельно создавать файлы PDF. Документ можно дополнить видеофайлами, аудиозаписями и анимацией.
Также PDF можно открыть одним из следующих приложений:
- Foxit Reader ;
- Sumatra PDF ;
- IMSI TurboPDF ;
- Icecream PDF Converter .
Данный формат используется в документах OpenOffice. Он является открытым и выступает альтернативой коммерческому решению docx. Также позволяет добавлять в текстовую информацию гиперссылки, таблицы, изображения.
Открыть ODT можно одним из следующих приложений:
- TextMaker
- IBM Lotus Symphony
- TextMaker Viewer
- ALReader
- AbiWord
Форматы текстовых файлов для электронных книг
Существует особые текстовые форматы, которые созданы специально для чтения на электронных книгах. Для работы с подобными материалами требуется особое устройство или программное обеспечение. Документы, сохранные в таких форматах не поддерживают редактирование.
К ним можно отнести:
Как поменять формат текстовых файлов
Чтобы сохранить текстовый файл в определенном формате легче всего использовать функции приложения Microsoft Word. Алгоритм действий следующий:
- Любой версией Microsoft Word открываем документ.
- Нажимаем на «Файл»
- Переходим во вкладку «Сохранить как».
Далее, чтобы изменить формат текстового файла достаточно выбрать предпочтительный из выпадающего списка и указать место сохранения. Word способен самостоятельно определять текстовые форматы файлов, что позволяет легко преобразовывать документы.
Изменение txt
В случае с txt, проще внести перемены в расширение документа. Первое, что необходимо сделать, это включить показ расширений в операционной системе.
После описанных действий нажимаем правой кнопкой мыши на текстовом документе, используем функцию «Переименовать». Далее вместо .txt указываем, к примеру, .html, .rtf или .doc. При этом следует помнить, что, если попытаться изменить расширение документа Word путем переименования с открытием файла возникнут проблемы.
Читайте также: