Как сделать свой тег html

Обновлено: 07.07.2024

Это краткое руководство предназначено для людей, начинающих свое изучение CSS в первый раз.

Оно не дает глубоких знаний о CSS. Руководство просто объясняет как создать HTML файл, CSS файл и как заставить их работать вместе. После прочтения данной статьи, Вы можете продолжить дальнейшее изучение других обучающих руководств для получения информации о более значительных особенностях HTML и CSS. Или же перейти к изучению материала в интерактивных HTML или CSS редакторах, которые помогут Вам при создании сайтов.

В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:

Полученная HTML страница с цветами и разметкой сделанной при помощи CSS.

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты, например Блокнот от Windows, TextEdit на Mac или KEdit под KDE вполне подойдут под задачу. Как только Вы поймете основные принципы, вы можете переключиться на использование более продвинутых инструментов разработки, например на такие коммерческие программы как Style Master или DreamWeaver. Но для создания первого CSS файла не стоит отвлекаться на множество расширенных возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или OpenOffice. Эти программы обычно создают файлы, которые не могут быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:

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

(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit'у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем случае - это HTML версии 4.01.

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

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

Код HTML в редактор KEdit.

Тэг “ul” - список состоящий из одной ссылки на каждый элемент списка. Эта структура послужит нам “навигацией” по нашему сайту связывая с нами другие страницы нашего гипотетического сайта . Предполагается, что все страницы нашего сайта будут иметь схожее или идентичное меню.
Элементы “h1” и “p” задают содержимое уникальное каждой страницы, в то время как подпись (“address”) снизу снова будет повторяться на всех страницах.

, что я и сделал в данном случае, для того чтобы было проще текст. Но вы можете добавить их, если считаете необходимым.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage.html”. Не закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем 10.4, вы увидите опцию "Don't append the .txt extension" в диалоговом окне "Save as". Выберите эту опцию, потому что имя файла “mypage.html” уже включает в себя расширение. Более новые версии TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем. Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

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

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим CSS стили и HTML разметку в разные файлы. Раздельное хранение хорошо тем, что легче использовать те же самые стили для множества HTML файлов: Вам нужно написать CSS стили только один раз. Но на этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент [и т.д.]

Первая строка говорит браузеру о том, что это таблица стилей и что она написана на CSS (“text/css”). Вторая строка говорит, что мы применяем стиль к элементу “body”. Третья устанавливает цвет текста в пурпурный, а следующая устанавливает цвет фона в желто-зеленый оттенок.

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

но поскольку оба правила относятся к body мы записали “body” один раз и поместили свойства и значения вместе. Для получения большей информации о селекторах смотрите главу 2 из Lie & Bos .

Фон элемента body так же является фоном целого документа. Мы явно не назначили другим элементам (p, li, address…) фона, так что по умолчанию у них его нет (или он прозрачный). Свойство 'color' устанавливает цвет текста элемента body, но все остальные элементы внутри body наследуют этот цвет, пока для них не задан другой в виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или “Save” из файлового меню) и переключитесь обратно в браузер. Если вы нажмете кнопку “обновить” , то изображение сменится со “скучной” страницы на разукрашенную (но все еще однообразную) страницу. Кроме ссылок сверху, весь текст должен быть пурпурный на желто-зеленом фоне.

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

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать - шрифтовое разнообразие разных элементов на странице. Давайте напишем шрифтом “Georgia” весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том, какие шрифты установлены на компьютерах посетителей, мы добавим альтернативные способы отображения: если Georgia не найдена, то мы будем использовать Times New Roman или Times, а если и он не найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы можем попробовать использовать Geneva, Arial или SunSans-Regular поскольку они очень похожи по начертанию, ну а если у пользователя нет таких шрифтов, то браузер может выбрать любой другой шрифт без засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13) :

Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.

Сейчас шрифт заголовков и основного текста различается.

ШАГ 4: добавляем навигацию

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

Нам нужно переместить список налево и сдвинуть остальное содержимое немного вправо, чтобы создать пространство для него. Свойства CSS которые мы будем использовать для этого - 'padding-left' (для сдвига текста) и 'position', 'left' и 'top' (для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или “верстка” на странице изучая CSS , вы найдете несколько готовых к использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16) :

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

В отличии от предыдущего файла, в этом главный текст переместился направо а навигация налево

Свойство 'position: absolute' говорит что элемент ul расположен независимо от любого текста который предшествовал или будет следующим за этим элементом, а свойства 'left' и 'top' обозначают это расположение. В нашем случае это 2em сверху и 1em от левого края окна.

'2em' обозначает 2 раза по растоянию, равному размеру текущего шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em будет равняться 24 пунктам. `em` очень полезная единица измерения в CSS, поскольку может адаптироваться автоматически к шрифту, используемому браузером. Большинство браузеров имеют возможность изменять размеры шрифта: вы можете попробовать увеличить или уменьшить размер и увидеть, что меню будет изменяться в зависимости от размера шрифта, чего бы не случилось, если бы мы указали отступ в пикселях

ШАГ 5: украшаем ссылки

Навигационое меню все еще по-прежнему выглядит как список, вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и переместим элементы налево, где были маркеры. Так же мы нарисуем каждый элемент списка на белом фоне в своем черном квадрате (зачем? просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что давайте добавим и это свойство: синими будут ссылки которые пользователь еще не смотрел, пурпурными - те которые он уже посещал. (строки 13-15 и 23-33) :

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

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет горизонтальная полоса для разделения текста и подписи снизу. Мы используем свойство 'border-top' для того чтобы добавить прерывистую линию над элементом (строки 34-37) :

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

ШАГ 7: внешний CSS

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

Для создания отдельного файла таблицы стилей нам нужен другой пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню "Файл" в редакторе , для создания пустого файла. (Если вы используете TextEdit, не забудьте сделать его текстовым снова, используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри . Они принадлежат HTML коду, а не CSS. В новом окне у вас теперь должен быть полная таблица стилей:

Выберите “Сохранить как…” из меню "Файл", убедитесь что вы в той же директории/папке что и файл mypage.html, и сохраните таблицу стилей под именем “mystyle.css”.

Такая конструкция скажет браузеру о том, что таблица стиле располагается в файле под названием “mystyle.css”, и поскольку директория не упомянута, браузер будет искать этот файл там же, где лижит HTML файл.

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

Следующий шаг - положить оба файла mypage.html и mystyle.css на ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…) Как положить файлы на сайт зависит от вашего интернет провайдера.

Дальнейшее изучение

Для введения в CSS, смотрите главу 2 Lie & Bos или введение в CSS Дейва Рэггета .

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

Пользовательские теги могут использоваться в Safari, Chrome, Opera и Firefox, по крайней мере, если использовать их вместо "class=. ".

green в css работает для

Вы можете использовать пользовательские теги в браузерах, хотя они не будут HTML5 (см. Допустимы ли пользовательские элементы HTML5? И спецификации HTML5).

Предположим, вы хотите использовать пользовательский элемент тега с именем . Вот что вы должны сделать.

ШАГ 1

Нормализовать его атрибуты в вашей таблице стилей CSS (думаю, сброс css) - Пример:

ШАГ 2

Чтобы заставить его работать в старых версиях Internet Explorer, вам нужно добавить этот скрипт в заголовок (важно, если он нужен для работы в более старых версиях IE!):

Тогда вы можете свободно использовать свой собственный тег.

Не стесняйтесь устанавливать атрибуты, а также.

Дело в том, что HTML был основан на SGML. В отличие от XML с его доктринами и схемами, HTML не становится недействительным, если браузер не знает тег или два. Подумайте о . Это не было в официальном стандарте. Поэтому, используя это, ваша страница HTML "официально не была одобрена", она также не сломала страницу.

Тогда есть , который был специфичным для Netscape, забытым в HTML4 и вновь открывшимся и теперь указанным в HTML5.
А также у нас есть пользовательские атрибуты тегов, такие как data-XyZzz = ". ", разрешенные для всех тегов HTML5.

Итак, пока вы не должны изобретать совершенно собственный нестандартный салат-разметку самостоятельно, не совсем запрещено иметь пользовательские теги в HTML. Это, однако, если вы не хотите отправлять его с + xml Content-Type или встраивать другие пространства имен XML, такие как SVG или MathML. Это относится только к SGML-ограниченному HTML.

Как предложил Майкл в комментариях, что вы хотите сделать, вполне возможно, но ваша номенклатура ошибочна. Вы не добавляете теги в HTML 5, "вы создаете новый тип документа XML с вашими собственными тегами.

Я сделал это для некоторых проектов на моей последней работе. Некоторые практические советы:

Когда вы говорите, что хотите "добавить их в HTML 5", я предполагаю, что вы действительно имеете в виду, что вы хотите, чтобы страницы отображались правильно в современном браузере, без необходимости выполнять большую работу над сервер. Это может быть выполнено путем вставки "инструкции обработки стилей" в верхней части XML файла, например, . Замените "menu.xsl" на путь к таблице стилей XSL, которую вы создаете, чтобы преобразовать ваши пользовательские теги в HTML.

Предостережения: ваш файл должен быть хорошо сформированным XML-документом, в комплекте с заголовком XML . XML является более четким, чем HTML, о таких вещах, как несоответствующие теги. Кроме того, в отличие от HTML, теги чувствительны к регистру. Вы также должны убедиться, что веб-сервер отправляет файлы с соответствующим типом mime "application/xml". Часто веб-сервер будет настроен так автоматически, если расширение файла ".xml", но проверьте.

Большая оговорка. Наконец, использование автоматического преобразования XSL браузеров, как я описал, действительно лучше всего подходит для отладки и для ограниченных приложений, где у вас много контроля. Я успешно использовал его для создания простой интрасети у моего последнего работодателя, к которой обращались только несколько десятков человек. Не все браузеры поддерживают XSL, а те, которые не имеют полностью совместимых реализаций. Поэтому, если ваши страницы будут выпущены в "wild", лучше всего преобразовать их в HTML на стороне сервера, что может быть сделано с помощью инструмента командной строки или с помощью кнопки во многих редакторах XML.

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

Как создать на сайте теги
Как придумать себе тег
Как заполнять теги

Чтобы знать, как создаются на сайте теги, вы должны изучить язык HTML. При помощи тегов вы сможете указывать браузеру то, что должно появиться на экране монитора. Тег обозначается скобками <> и слешем /. Для создания тегов вы можете использовать обычный текстовый редактор.

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

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

Вы должны написать текст, а каждый текст, как известно, имеет свой заголовок, на языке HTLM заголовок будет обозначен так: ВАШ ТЕКСТ

Далее вам нужно написать сам текст, на языке HTML начало и конец текста должен выглядеть следующим образом: ВАШ ТЕКСТ

Вы получаете основной вид вашей странички, написанной на языке HTLM:

ТЕКСТ ТЕКСТ
Работая с тегами, вы отображаете написанный вами текст, так, как его увидят пользователи, посетившие сайт. Язык HTLM - это структура документа, а теги выполняют функцию разметки странички. В настоящее время существуют целые программы, которые помогут вам изучить различные способы создания сайтов. Любой браузер понимает и распознает только определенный набор тегов. Создав тег типа , вы не придумаете новый велосипед. Браузер проигнорирует содержимое, он выполнит и поймет только свой язык HTLM.В языке HTLM существуют основные теги, тег для оглавления, теги - атрибуты документа, теги для форматирования документа,теги для создания гиперссылок, теги для графики, теги для таблиц, и т.д.

В этом учебнике для создания HTML файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.

Рассмотрим, как вы будете создавать свой первый HTML файл с использованием программы Notepad++.

Шаг 1: Откройте текстовый редактор

Перед Вами откроется основное окно программы:

Рис. 2 Текстовый редактор Notepad++.

Шаг 2: Напишите несколько HTML тегов

Запишите в редактор следующий HTML код:

Давайте разберем по частям, что мы сделали в этом примере:

Читайте также: