Подстрочный и надстрочный текст
Редактор кода
HTML-документ можно создавать в любом текстовом редакторе, тем не менее, для этой цели подойдёт не всякая программа. Нужна такая, чтобы поддерживала следующие возможности:
- Подсветка синтаксиса — выделение тегов, текста, ключевых слов и атрибутов разными цветами. Это облегчает поиск нужного элемента, ускоряет работу разработчика и снижает возникновение ошибок.
- Работа с вкладками. Сайт представляет собой набор файлов, которые приходится править по отдельности, для чего нужен редактор, умеющий одновременно работать сразу с несколькими документами. При этом файлы удобно открывать в отдельных вкладках, чтобы быстро переходить к нужному документу.
- Автодополнение — автоматическое закрытие скобок, кавычек и тегов. Опять же, это ускоряет работу и снижает число возможных ошибок. Некоторые редакторы также позволяют быстро вводить теги, определяя их по первым введённым буквам.
Ссылки на известные подобные редакторы приведены ниже.
Notepad ++
Бесплатный редактор под Windows, обладающий массой возможностей, при этом оставаясь простым в освоении и очень шустрым.
http://notepad-plus-plus.org/download
Brackets
Лёгкий, быстрый, но современный текстовый редактор от Adobe, ориентированный на веб-разработку.
http://brackets.io
Sublime Text
Популярный среди веб-разработчиков редактор для Mac, Windows, Linux. Хотя Sublime Text является платным, но скачанной с сайта незарегистрированной версией можно пользоваться неограниченное время.
|
|
|
http://www.sublimetext.com
Настройка редактора Notepad++ и создание HTML документа
1. Скачать и установить редактор Notepad++ с официального сайта;
2. Запустить редактор;
3. Зайти в меню Settings -> Preferences и на вкладке General в поле Localization выбрать русский язык.
4. Выбрать синтаксис HTML. Синтксисы - > H -> HTML.
5. Выбрать имя файла и его место сохранения (если сайт одностроничный или данная страница является главной, ей следует дать имя index.html)
Основы HTML
HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста):
· язык означает, что он может быть прочитан как человеком, так и компьютером;
· разметка означает, что написанный вами код помечается с помощью ключевых слов;
HTML довольно простой язык, состоящий из элементов или иначе тэгов, которые могут быть применены к частям текста, чтобы придавать им различные значения (абзац, маркированный список, часть таблицы и т.д.), разделять документ на логические секции (шапка страницы, меню навигации, колонка с рекламой) и добавлять контент на страницу, такой как фото и видео.
Пример HTML кода:
<p> Привет мир! </p>
То, что вы видите в угловых скобках < и > называется тегами HTML. Они определяют, где что-то начинается и где оно заканчивается.
|
|
|
Каждый из тегов несёт определённый смысл. В нашем случае <р> обозначает абзац текста.
Как правило, тэги идут парами:
· открывающий тег <р> определяет начало абзаца;
· закрывающий тег </p> определяет его конец.
Но существуют и одинарные тэги не требующие закрывающего тэга. Примером одинарного тэга может служить перенос строки <br>.
Различают блочные и строчные элементы:
· Блочные элементы предназначены для структурирования основных частей вашей страницы, путём разделения содержимого на логически связанные блоки.
· Строчные элементы предназначены, чтобы разграничить часть текста и придать ему определённую функцию или смысл. Строчные элементы, как правило, содержат одно или несколько слов.
Некоторые тэги языка HTML
Заголовок
HTML предлагает шесть заголовков разного уровня. Тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше.
<h1> Заголовок первого уровня </h1>
<h2> Заголовок второго уровня </h2>
<h3> Заголовок третьего уровня </h3>
<h4> Заголовок четвертого уровня </h4>
<h5> Заголовок пятого уровня </h5>
<h6> Заголовок шестого уровня </h6>
|
|
|
Абзац
Абзацы определяются тэгом <p>. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отступом.
<p> Первый абзац </p>
<p> Второй абзац </p>
Перевод строки
Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. Тэг <br> не имеет закрывающего тэга.
Первая строка <br>
Вторая строка
Выделение текста
Для выделения текста используются тэги <strong> и <em>.
Этот текст <strong>жирный</strong>, а этот текст <em>курсивный</em>
Подстрочный и надстрочный текст
Тег <sub> определяет подстрочный текст. Подстрочный текст имеет высоту в два раза меньше и появляется под базовой линией. Подстрочный текст может использоваться при написании химических формул.
Тег <sup> определяет надстрочный текст. Надстрочный текст имеет высоту в два раза меньше и появляется над базовой линией. Надстрочный текст может использоваться при написании сносок.
|
|
|
H<sub>2</sub>SO<sub>4</sub> - это формула серной кислоты<sup>1</sup>
Списки
Списки являются блочными элементами HTML и бывают трёх видов:
· <ul> — маркированные списки;
· <ol> — упорядоченные списки (чьи элементы пронумерованы автоматически);
· <dl> — списки описаний
Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).
<ul>
<li> Первый элемент списка </li>
<li> Второй элемент списка </li>
<li> Третий элемент списка </li>
</ul>
<ol>
<li> Первый элемент списка </li>
<li> Второй элемент списка </li>
<li> Третий элемент списка </li>
</ol>
Атрибуты тэгов
Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов. Атрибуты предназначены для добавления дополнительной информации об элементе и/или для изменения его стандартного поведения.
Свойства атрибутов
|
Упорядоченный список <ol> имеет ряд атрибутов:
start – определяет первое число, с которого начинается нумерация пунктов (только целые числа) . Если не указывать, начинается с начала.
type – определяет стиль нумерации пунктов списка.
Дата добавления: 2018-11-24; просмотров: 612; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!