Как изменить текст на сайте html

Одна из основных задач HTML — придавать тексту структуру и смысл, семантику, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать HTML, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.
  • Назад
  • Обзор: Introduction to HTML
  • Далее

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

Предварительные требования: Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача: Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..

Основы: Заголовки и абзацы / параграфы

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

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

Упорядоченный контент делает чтение более лёгким и приятным.

В HTML каждый абзац заключён в элемент <p>, подобно:

<p>Я параграф, да, это я.</p>

Каждый заголовок заключён в элемент заголовка <h1> (en-US):

<h1>Я заголовок истории.</h1>

Имеется шесть элементов заголовка: <h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US) и <h6> (en-US). Каждый элемент представляет разный уровень контента в документе; <h1> представляет главный заголовок, <h2> представляет подзаголовки, <h3> представляет под-подзаголовки и так далее.

Создание иерархической структуры

Например, в рассказе <h1> будет представлять заглавие рассказа, <h2> обозначит название каждой главы, <h3> будет обозначать подзаголовки в каждой главе и так далее.

<h1> Сокрушительная скука </ h1>

<p> Крис Миллс </ p>

<h2> Глава 1: Тёмная ночь </ h2>

<p> Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на ... </ p>

<h2> Глава 2: Вечное молчание </ h2>

<p> Наш главный герой ничего не мог, когда шёпот из тёмной фигуры ... </ p>

<h3> Призрак говорит </ h3>

<p> Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» </ p>

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

  • Предпочтительнее использовать <h1> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.
  • Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте <h3> для создания подзаголовков при одновременном использовании <h2> для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.
  • Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.

Зачем нам необходима структура?

Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).

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

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

Это связано с тем, что нет элементов для создания структуры контента, поэтому браузер не знает, где здесь заголовок и где абзац. Более того:

  • Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки (мы обычно тратим очень мало времени на веб-странице). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.
  • Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения SEO (Search Engine Optimization — поисковая оптимизация).
  • Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.
  • Чтобы стилизовать контент с помощью CSS или сделать его интересным с помощью JavaScript, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.

Поэтому нужно дать структурную разметку нашему контенту.

Активное изучение: создание структуры для нашего контента

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

Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки Сбросить. Если вы застряли, нажмите кнопку Показать решение, чтобы увидеть ответ.

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">Моя мини-история
Я полицейский, и моё имя Триш.
Мои ноги сделаны из картона, и мой муж — рыба.</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<h1>Моя мини-история</h1>n<p>Я полицейский, и моё имя Триш.</p>n<p>Мои ноги сделаны из картона, и мой муж — рыба.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

textarea.onkeyup = function(){
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Почему мы нуждаемся в семантике?

Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)

В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент <h1> (en-US) также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».

<h1>Это заголовок верхнего уровня</h1>

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

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

<span style="font-size: 32px; margin: 21px 0;">Это заголовок верхнего уровня?</span>

Это элемент <span>. У него нет семантики. Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS, чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше. Рекомендуется использовать соответствующий элемент HTML на практике.

Списки

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

Неупорядоченные

Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:

молоко
яйца
хлеб
хумус

Каждый неупорядоченный список начинается с элемента <ul> (unordered list) — он обёртывает все элементы списка: молоко, яйца, хлеб, хумус.

Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент <li> (элемент списка):

<ul>
  <li>молоко</li>
  <li>яйца</li>
  <li>хлеб</li>
  <li>хумус</li>
</ul>

Активное изучение: разметка неупорядоченного списка

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

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">молоко
яйца
хлеб
хумус</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<ul>n<li>молоко</li>n<li>яйца</li>n<li>хлеб</li>n<li>хумус</li>n</ul>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

textarea.onkeyup = function(){
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Упорядоченные

Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:

Двигайтесь до конца дороги
Поверните направо
Езжайте прямо через первые два перекрёстка с круговым движением
Поверните налево на третьем перекрёстке
Школа справа от вас, 300 метров вверх по дороге

Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент <ol> (ordered list), а не <ul>:

<ol>
   <li>Двигайтесь до конца дороги</li>
   <li>Поверните направо</li>
   <li>Езжайте прямо через первые два перекрёстка с круговым движением</li>
   <li>Поверните налево на третьем перекрёстке</li>
   <li>Школа справа от вас, в 300 метрах вверх по дороге</li>
</ol>

Активное изучение: разметка упорядоченного списка

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

<h2>Результат</h2>
<div class="output" style="min-height: 50px;">
</div>
<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">Двигайтесь до конца дороги
Поверните направо
Езжайте прямо через первые два перекрёстка с круговым движением
Поверните налево на третьем перекрёстке
Школа справа от вас, 300 метров вверх по дороге</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<ol>n<li>Двигайтесь до конца дороги</li>n<li>Поверните направо</li>n<li>Езжайте прямо через первые два перекрёстка с круговым движением</li>n<li>Поверните налево на третьем перекрёстке</li>n<li>Школа справа от вас, 300 метров вверх по дороге</li>n</ol>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

textarea.onkeyup = function(){
  if(solution.value === 'Показать решение>') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Активное изучение: разметка собственной страницы рецептов

Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла text-start.html и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">Рецепт быстрого приготовления хумуса.

  Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.

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

  Ингредиенты

  1 банка (400г) турецкого гороха (или бараньего гороха)
  175г тахини
  6 вяленых томатов
  Половинка красного перца
  Щепотка кайенского перца
  1 зубчик чеснока
  Чуть-чуть оливкового масла

  Рецепт

  Очистите чеснок от кожуры и крупно нарежьте.
  Удалите стебель и семена у перца; крупно нарежьте перец.
  Добавьте все ингредиенты в пищевой комбайн.
  Измельчите все ингредиенты до состояния пасты.
  Если вы хотите "грубый" хумус, измельчайте пару минут.
  Если вам нужен гладкий хумус, измельчайте дольше.

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

  Хранение

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

  Хумус можно хранить в морозильном отделении 2–3 месяца.</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<h1>Рецепт быстрого приготовления хумуса.</h1>nn<p>Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.</p>nn<p>Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой.</p>nn<h2>Ингредиенты</h2>nn<ul>n<li>1 банка (400г) турецкого гороха (или бараньего гороха)</li>n<li>175г тахани</li>n<li>6 вяленых томатов</li>n<li>Половинка красного перца</li>n<li>Щепотка кайенского перца</li>n<li>1 зубчик чеснока</li>n<li>Чуть-чуть оливкового масла</li>n</ul>nn<h2>Рецепт</h2>nn<ol>n<li>Очистите чеснок от кожуры и крупно нарежьте.</li>n<li>Удалите стебель и семена у перца; крупно нарежьте.</li>n<li>Добавьте все ингредиенты в пищевой комбайн.</li>n<li>Измельчите все ингредиенты до состояния пасты.</li>n<li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>n<li>Если вам нужен гладкий хумус, измельчайте дольше.</li>n</ol>nn<p>По вкусу можете добавить в небольших количествах лимон и кориандский перец, лайм и чипотле, хариссу и мяту или шпинат и брынзу. Попробуйте и решите, что подходит вам.</p>nn<h2>Хранение</h2>nn<p>Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его.</p>nn<p>Хумус можно хранить в морозильном отделении 2–3 месяца.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

textarea.onkeyup = function(){
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Если вы застряли, вы всегда можете нажать кнопку Показать решение или проверить наш пример text-complete.html в нашем реестре github.

Вложенные списки

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

<ol>
  <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
  <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li>
  <li>Добавьте все ингредиенты в пищевой комбайн.</li>
  <li>Измельчите все ингредиенты до состояния пасты.</li>
  <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>
  <li>Если вам нужен гладкий хумус, измельчайте дольше.</li>
</ol>

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

<ol>
  <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
  <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li>
  <li>Добавьте все ингредиенты в пищевой комбайн.</li>
  <li>Измельчите все ингредиенты до состояния пасты.
    <ul>
      <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>
      <li>Если вам нужен гладкий хумус, измельчайте дольше.</li>
    </ul>
  </li>
</ol>

Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.

Акцент и важность

В обиходе мы часто подчёркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространённых.

Акцент

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

Я рад, что ты не опоздал.

Я рад, что ты не опоздал.

В первом предложении звучит искреннее облегчение, что человек не опоздал. Во втором, напротив, звучит сарказм или пассивная агрессия: так выражена досада от того, что человек немного опоздал.

В таких случаях в HTML используется элемент <em> (выделение). Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном. Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив. Для выделения курсивом вы можете использовать элемент <span> и CSS, или, возможно, элемент <i> (en-US) (смотрите ниже).

<p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p>

Важное значение

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

Эта жидкость очень токсична.

Я рассчитываю на вас. Не опаздывай!

В таких случаях в HTML используется элемент <strong> (важное значение). Помимо того, что документ становится более полезным, они распознаются программами, считывающими с экрана, и говорят другим тоном. Браузеры стилизуют это как полужирный текст по умолчанию, но вы можете не использовать этот тег, чтобы получить жирный шрифт. Для получения жирного шрифта вы можете использовать элемент <span> и CSS, или, возможно, элемент <b> (смотрите ниже).

<p>Эта жидкость <strong>очень токсична</strong>.</p>

<p>Я рассчитываю на тебя. <strong>Не </strong>опаздывай!</p>

При желании вы можете вложить важные и акцентированные слова друг в друга:

<p>Эта жидкость <strong>очень токсична</strong> —
если ты выпьешь её, <strong>то можешь<em>умереть</em></strong>.</p>

Активное изучение: Давайте будем важны!

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

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Важное объявление</h1>
<p>9 января 2010 года, в воскресенье,
банда вандалов была обнаружена за кражей нескольких
садовых гномов из торгового центра в центре Милуоки. На них были
надеты зелёные спортивные костюмы и глупые шляпы, и,
по-видимому, они были в нетрезвом состоянии. Если у кого-то
есть какая-либо информация об этом инциденте, пожалуйста,
позвоните в полицию немедленно.</p></textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<h1>Важное объявление</h1>n<p><strong>9 января 2010 года, в воскресенье</strong>, банда <em>вандалов</em> была обнаружена за кражей <strong><em>нескольких</em> садовых гномов</strong> торговом центре в центре <strong>Милуоки</strong>. На них были надеты <em>зелёные спортивные костюмы</em> и <em>глупые шляпы</em>, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть <strong>какая-либо</strong> информация об этом инциденте, пожалуйста, позвоните в полицию <strong>немедленно</strong>.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Курсив, жирный шрифт, подчеркивание…

Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике. Ситуация с <b>, <i> (en-US) и <u> несколько сложнее. Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался, чтобы люди могли писать жирный текст, курсив или подчёркнутый текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.

HTML5 переопределил <b>, <i> и <u> с новыми, несколько запутанными, семантическими ролями.

Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчёркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.

  • <i> (en-US) используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли …
  • <b> используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения …
  • <u> используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное, орфографическая ошибка …

Примечание: Предупреждение о подчёркивании: люди сильно ассоциируют подчёркивание с гиперссылками. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.

<!-- Научные наименования -->
<p>
  Колибри обыкновенный (<i>архилоус обыкновенный</i>) —
наиболее часто встречающийся вид колибри в северо-восточной Америке.
</p>

<!-- Иностранные слова -->
<p>
  Случился прилив иностранных слов, таких как <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> и <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- Явно неправильное произношение или написание -->
<p>
  Когда-нибудь я узнаю, как <u>гаварить</u> без ошибок.
</p>

<!-- Выделение ключевых слов в инструкциях -->
<ol>
  <li>
    <b>Отрежьте</b> два ломтика хлеба.
  </li>
  <li>
    <b>Добавьте</b> кусочек помидора и лист латука между ломтями хлеба.
  </li>
</ol>

Заключение

Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как создавать гиперссылки, возможно, самый важный элемент в Интернете.

  • Назад
  • Обзор: Introduction to HTML
  • Далее

В этом модуле

Источник

Глава 2

Редактируем текст на своей странице..

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

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

Параграф.

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

Так вот, для того чтобы на странице сайта разбить текст на параграфы, необходимо воспользоваться тегом <p> — собственно параграф.

Параграф имеет атрибут align «выравнивание» который в свою очередь может быть равен тому ли иному значению.

Рассмотрим на примерах:

С помощью параграфа можно расположить наш текст по центру:

<p align=»center»>Привет мир!!!</p>

По левому краю:

<p align=»left»>Привет мир!!!</p>

По правому краю:

<p align=»right»>Привет мир!!!</p>

Или же обоим краям документа:

<p align=»justify»>Привет мир!!! — здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p>

Давайте слегка изменим нашу первую страничку:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body>
<p align=»center»>Привет мир!!!</p>
<br>
<p align=»justify»>
Меня зовут Карлсон! Я в меру упитанный мужчина — это моя первая страничка!
Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам!
Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать Вашего
приглашения на чай. Прилечу!!
</p>
</body>
</html>

Так уже лучше, не правда ли?

Запомним некоторые вещи:

1) Тег <p> не может содержать в себе других параграфов, то есть писать вот так:

<p>
<p>

</p>
</p>

Нельзя! — это нелогично, как может один параграф содержать в себе другой?

2) Так же, нельзя писать пустые теги без текста или других тегов.

<p> здесь, что-то обязательно должно быть!!!</p>

3) По умолчанию Ваш текст выравнивается браузером по левому краю, так что если Вам так и надо атрибут align=»left» для параграфа можно не указывать.

4) Тег <p> подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега <p> тег <div> данный тег является альтернативой тегу <p> пишется так:

<div align=»center»>Привет мир!!!</div>
<div align=»left»>Привет мир!!!</div>
<div align=»right»>Привет мир!!!</div>
<div align=»justify»>Привет мир!!!</div>

Все то же самое, только данный тег не будет переносить текст на следующую строку и в него можно вставлять тег <p> по принципу:

<div>
<p align=»left»>Пишем слева</p>
<p align=»right»>Пишем справа</p>
</div>

А вообще тег <div> многофункциональный.. и по своей сути он является пустым блоком-контейнером, который может содержать в себе как текст, так и другие теги.. в общем, хочу сказать, что работа с текстом это далеко не основная задача тега <div>, но об остальных возможностях данного тега мы поговорим позже..

5) Еще одним способом выравнивания текста по центру является использование тега <center> любое содержание взятое в данный тег выравнивается по центру экрана. Пишется так:

<center>Привет мир!!!</center>

Заголовки

В наборе тегов html языка имеется шесть типов заголовков:

<h1> Привет мир!!! </h1>

<h2> Привет мир!!! </h2>

<h3> Привет мир!!! </h3>

<h4> Привет мир!!! </h4>

<h5> Привет мир!!! </h5>
<h6> Привет мир!!! </h6>

Думаю с этим понятно.. <hx> тег заголовка, где значение x является величиной буковок (может быть от одного до шести). Помните, что после использования того или иного заголовка происходит перенос строки — на то он и заголовок.

Заголовки дело хорошее и достаточно удобное, но ими можно выделять только маленькие кусочки текста, а что если нам надо выделить весь текст?

Знакомимся тег <font> в переводе на русский — «шрифт».

Тег <font> помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size — размер.

Пишется и выглядит это так:

<font size=»+4″>Привет мир!!!</font>
<font size=»+2″>Привет мир!!!</font>
<font size=»+0″>Привет мир!!!</font>
<font size=»-1″>Привет мир!!! </font>
<font size=»-2″>Привет мир!!!</font>

Добавим эти теги на нашу страницу.

<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<center><h2>Привет мир!!!</h2></center>
<br>
<p align=»justify»>

<font size=»+1″>Меня зовут Карлсон! Я в меру упитанный мужчина — это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size=»+2″>вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!</font>

</p>
</body>
</html>

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

Цвет

Для придания страничке красивого вида не обойтись без палитры с красками..

В html языке используется своя палитра красок. Вот основные цвета, выглядят они так:

#000000
black

#ffffff
white

#ff0000
red

#ffa500
orange

#ffff00
yellow

#008000
green

#00ffff
cyan

#0000ff
blue

#800080
purple

Полная палитра базовых красок приведена здесь.

Один и тот же цвет можно задать двумя способами:
используя шестнадцатеричное значение цвета RGB — например #008000 — зелёный цвет,
либо используя константы цвета — green (для тех кто учил французский, green -зелёный.)

Краски есть, давайте рисовать!

Мы уже знакомы с тегом <font> у него есть еще один атрибут — color.

Так вот, если к примеру написать так:

<font color=»#ff0000″>Привет мир!!!</font> — То цвет шрифта станет красным. Попробуйте..

А можно так:

<font color=»red»>Привет мир!!!</font> — Будет тоже самое..

Но советую писать всё же шестнадцатеричным числом, во-первых, по понятным причинам не для всех оттенков цветов есть своё название, а во-вторых, поговаривают, что не все браузеры знают названия тех или иных красок…

Есть еще один способ изменить цвет текста. Тег <body></body> «тело» — имеет атрибут text — «текст» если присудить этому атрибуту любой цвет из доступной палитры то весь текст в нашей странице окрасится, кроме тех мест, где мы «принудительно» указали другой цвет.

В строчке где стоит открывающий тег <body> пишем так:

<body text=»#ff8c40 «>

Теперь весь текст у нас стал оранжевым кроме заголовка «Привет мир!!!» который мы отдельно перекрасили в красный.

А вот атрибут тега <body> bgcolor и его значение задает цвет фона страницы

<body bgcolor=»#40caff»> — залили всё голубым..

Раскрасьте свою страницу на свой лад.. пробуйте, экспериментируйте!

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

На данный момент у меня получилось вот так: .. а у Вас?

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text=»#484800″ bgcolor=»#e8e8e8″>
<center>

<h2>
<font color=»#008000″>Привет мир!!!</font>
</h2>
</center>

<p align=»justify»>

<font size=»+1″>Меня зовут Карлсон! Я в меру упитанный мужчина — это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size=»+2″ color=»#ff0000″>вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</font>

</p>
</body>
</html>

Обратите внимание на то, как пишется код, если в теге присутствует два и более атрибута. В нашей строчке <body text=»#ff207b» bgcolor=»#1a77f0″> у тега <body> два атрибута text и bgcolor мы просто пишем их подряд через пробел, не разделяя никакими другими знаками..

Стиль текста

Здесь все достаточно просто..

Итак, новые теги:

<b> </b> — Полужирный текст
<i> </i> — Наклонный текст
<u> </u> — Подчеркнутый текст
<strike> </strike> — Перечеркнутый
<s> </s> — Перечеркнутый (второй вариант, от первого ничем не отличается)
<tt> </tt> — моноширинный шрифт
<small> </small> — Малый
<big> </big> — Большой
<sup> </sup> — Верхний индекс
<sub> </sub> — Нижний индекс

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

Вот пример на всякий случай…

<html>
<head>
<title>Стили текста</title>
</head>
<body>
<big><b><u>Научная статья.</u></b></big>
<br>
<br>
Если разбавить дистиллированную воду Н<sub>2</sub>О сорока процентами этилового спирта С<sub>2</sub>Н<sub>5</sub>ОН то получится жидкость в 40<sup>о</sup> более известную широкой публике под названием <i>— водка.</i>
<br>
Впервые данную пропорцию <s>придлажил</s> предложил <tt>Дмитрий Иванович МЕНДЕЛЕЕВ.</tt>
<br>
<br>
<br>
<small>Распитие спиртных напитков вредит вашему здоровью.</small>
</body>
</html>

Шрифт

Для того чтобы изменить шрифт документа необходимо дать указание браузеру, что мол от сель до сель показывать текст таким шрифтом. Для этого используем всё тот же тег <font> и его атрибут face — лицо то бишь..

Пишется так:

<font face=»arial»>Эта строчка будет написана с помощью шрифта Arial</font>

Пример:

<html>
<head>
<title>Использование различных шрифтов</title>
</head>
<body>
<font face=»arial»>Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
<font face=»times new roman»>Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
<font face=»comic sans ms»>Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
</body>
</html>

Здесь необходимо отметить, что браузер использует библиотеку шрифтов, установленную на компьютере пользователя, и если вдруг указанного Вами шрифта в этой библиотеке не окажется, то он заменит его на тот который присутствует. Следовательно, чтобы не ударить face(ом) в грязь, не стоит указывать какие-то «экзотические» нестандартные шрифты, так как супер модный шрифт на компьютере Вашего друга сильно рискует превратиться в обыкновенный.

Предварительно отформатированный текст.

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

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

Однако такая политика браузеров, в ряде случаев, не всегда оправданна.. Как например, написать стихи? Нет можно конечно после каждой строчки писать тег <br>, но есть вариант куда проще..

Знакомимся тег <pre>, текст заключённый в данный тег выводится браузерами на экран в том виде в котором он был набран, т.е. со всеми пробелами и переносами строк

Пример:

<html>
<head>
<title>Пробелы и перенос строки</title>
</head>
<body>
<pre>

        СЛОН.

Дали туфельки слону.
Взял он туфельку одну
И сказал: - Нужны пошире,
И не две, а все четыре!

         С. Я. Маршак.

</pre>
</body>
</html>

Такие вот дела..

Полезные советы:

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

    Расскажу про основные плюсы использования подобного редактора.

    • Как правило, html редакторы имеют два окна, в одном Вы пишите код, а во втором сразу видите результат написанного! То есть теперь Вам не придётся постоянно сохранять текущий результат, чтобы открыть его браузером и оценить написанное.
    • Как правило, они содержат в себе стандартные наборы шаблонов кода, в который Вы просто подставляете свою информацию, избавляя себя от прописывания тегов.
    • Ну и «общие» удобства — сохранить, открыть, редактировать сразу несколько страниц сайта перелистывая их… много короче разных полезных штук.. одна подсветка синтаксиса чего стоит!

    P.S. Однако, дальше буду писать эту книгу подразумевая, что Вы тренируетесь в стандартном блокноте… иначе мы друг друга не поймём.

  • Немного об этике и здоровье глаз..

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

Источник

В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.

  • Теги и атрибуты при роботе со шрифтами html
    • Возможности атрибута style
    • Свойство font и цвет шрифта html
    • Русскоязычные шрифты и их поддержка

Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html.

Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.

Теги и атрибуты при роботе со шрифтами html

Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег <font>. С помощью значений его атрибутов можно задать несколько характеристик шрифта:

  • color – устанавливает цвет текста;
  • size – размер шрифта в условных единицах.

Поддерживается положительное значение атрибута от 1 до 7.

  • face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега <font>. Поддерживается сразу несколько значений перечисленных через запятую.

Пример:

<p>
<font size="7" color="red" face="Arial">Форматируется только тот текст, который расположен между частями парного тега font.</font>
Остальной текст отображается стандартным шрифтом, установленным по умолчанию.
</p>

Теги и атрибуты при роботе со шрифтами html - 2

Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:

  • <strong> — задает в html жирный шрифт. Тег <b> по действию аналогичный предыдущему;
  • <big> — размер больше установленного по умолчанию;
  • <small> — меньший размер шрифта;
  • <em> — наклонный текст (курсив). Аналогичный ему тег <i>;
  • <ins> — текст с подчеркиванием;
  • <del> — зачеркнутый;
  • <sub> — отображение текста только в нижнем регистре;
  • <sup> — в верхнем регистре.

Пример:

<p>Обычный текст</p>
<p><strong>Жирный текст</strong></p>
<p><b>Жирный текст</b></p>
<p><big>Больше обычного</big></p>
<p><small>Меньше обычного</small></p>
<p><em>Курсив</em></p>
<p><i>Курсив</i></p>
<p><ins>С подчеркиванием</ins></p>
<p><del>Зачеркнутый</del></p>

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

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя.

Синтаксис написания:

font-family: имя шрифта [, имя шрифта[, ...]]

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Размер шрифта можно также задать:

  • В пикселях;
  • В абсолютном значении (xx-small, x-small, small, medium, large);
  • В процентах;
  • В пунктах (pt).

Пример:

<p style="font-size:7"> font-size:7</p>
<p style="font-size:24px"> font-size:24px</p>
<p style="font-size:x-large"> font-size: x-large</p>
<p style="font-size:200%"> font-size: 200%</p>
<p style="font-size:24pt"> font-size:24pt</p>

Возможности атрибута style

3) font-style – устанавливает стиль написания шрифта. Синтаксис:

font-style: normal | italic | oblique | inherit

Значения:

  • normal –нормальное написание;
  • italic – курсив;
  • oblique – шрифт с наклоном вправо;
  • inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

<p style="font-style:inherit">font-style:inherit</p>
<p style="font-style:italic">font-style:italic</p>
<p style="font-style:normal">font-style:normal</p>
<p style="font-style:oblique">font-style:oblique</p>

Возможности атрибута style - 2

4) font-variant – переводит все строчные буквы в заглавные. Синтаксис:

font-variant: normal | small-caps | inherit

Пример того, как изменить шрифт в html этим свойством:

<p style="font-variant:inherit">font-variant:inherit</p>
<p style="font-variant:normal">font-variant:normal</p>
<p style="font-variant:small-caps">font-variant:small-caps</p>

5) font-weight – позволяет установить толщину написание текста (насыщенность). Синтаксис:

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения:

  • bold – устанавливает полужирный шрифт html;
  • bolder – жирнее относительно normal;
  • lighter –менее насыщенное относительно normal;
  • normal – нормальное написание;
  • 100-900 – задается толщина шрифта в числовом эквиваленте.

Пример:

<p style="font-weight:bold">font-weight:bold</p>
<p style="font-weight:bolder">font-weight:bolder</p>
<p style="font-weight:lighter">font-weight:lighter</p>
<p style="font-weight:normal">font-weight:normal</p>
<p style="font-weight:900">font-weight:900</p>
<p style="font-weight:100">font-weight:100</p>

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font:

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit

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

  • caption – для кнопок;
  • icon – для иконок;
  • menu – меню;
  • message-box –для диалоговых окон;
  • small-caption – для небольших элементов управления;
  • status-bar – шрифт строки состояния.

Пример:

<p style="font:icon">font:icon</p>
<p style="font:caption">font:caption</p>
<p style="font:menu">font:menu</p>
<p style="font:message-box">font:message-box</p>
<p style="font:small-caption">small-caption</p>
<p style="font:status-bar">font:status-bar</p>
<p style="font:italic 50px bold "Times New Roman", Times, serif">font:italic 50px bold "Times New Roman", Times, serif</p>

Свойство font и цвет шрифта html

Для того чтобы задать цвет шрифта в html можно использовать свойство color. Оно позволяет устанавливать цвет, как с помощью ключевого слова, так и в формате rgb. А также в виде шестнадцатеричного кода.

Пример:

<p style="color:#00FF99">color:#00FF99</p>
<p style="color:blue">color:blue</p>
<p style="color:rgb(100,50,180)">color:rgb(0, 255, 153)</p>

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

  • Arial Black;
  • Arial;
  • Comic Sans MS;
  • Courier New;
  • Georgia;
  • Lucida Console;
  • Lucida Sans Unicode;
  • Palatino Linotype;
  • Tahoma;
  • Times New Roman;
  • Trebuchet MS;
  • Verdana.
    Если этого количества мало, то на просторах интернета хватает сайтов, где можно скачать шрифт на любой вкус. Еще можно разработать свой шрифт. Но это уже совсем другая история. И она будет написана уже другим шрифтом.
Источник


Download Article


Download Article

If you prefer to code websites by hand, you can edit HTML files in a basic text editor like Notepad (Windows) or TextEdit (macOS). If you would rather be able to move elements around on the screen and see live previews, you can use a WYSIWYG (What You See Is What You Get) editor like Dreamweaver or Kompozer. This wikiHow teaches you how to open and edit an HTML file in a standard or visual editing app.

  1. Image titled Edit HTML Files Step 1

    1

    Click the Windows Start button

    Image titled Windowsstart.png

    . It’s the button that has a Windows logo in the task bar. By default, it’s in the lower-left corner. This displays the Start menu

  2. Image titled Edit HTML Files Step 2

    2

    Type Notepad. This displays Notepad in the Start menu.

    Advertisement

  3. Image titled Edit HTML Files Step 3

    3

    Click Notepad. It has an icon that resembles a notepad with a blue cover.

  4. Image titled Edit HTML Files Step 4

    4

    Click File. It’s at the top of the menu bar in Notepad. This displays a drop-down menu. This displays a file browser you can use to open files in Notepad.

  5. Image titled Edit HTML Files Step 5

    5

    Click Open. It’s the second option in the File drop-down menu.

  6. Image titled Edit HTML Files Step 6

    6

    Select «All files» in the file type drop-down menu. Click the drop-down that says «Text Documents (.txt)» and select «All files» in the drop-down menu. This displays all document types (including HTML files) in the file browser.

  7. Image titled Edit HTML Files Step 7

    7

    Select an HTML file and click Open. This opens the HTML document in Notepad. You can edit the HTML code in Notepad.

    • Alternatively, you can create a new HTML document in Notepad.

  8. Image titled Edit HTML Files Step 8

    8

    Edit the HTML code. In order to edit HTML in Notepad, you’ll need to learn HTML so that you can edit it by hand. Common elements you can edit include the following.

    • <!DOCTYPE html>: This goes at the top of the HTML document. This tells the web browser that this is an HTML document.
    • <html></html>: These tags go at the top and bottom of the HTML document. This indicates where the HTML code starts and stops.
    • <head></head>: These tags go at the top of the HTML document. They indicate where the head of the HTML document starts and stops. The head of the HTML document contains information that is not seen on the web page. This includes the page title, metadata, and CSS
    • <title>Page Title</title>: These tags indicate the title the page. The title goes in the head of the HTML document. Type the title of the page in between these two tags.
    • <body></body>: These tags indicate where the body of the HTML document starts and stops. The body is where all the web page content is written. The body comes after the head in the HTML document.
    • <h1>Headline Text</h1>: These tags create headline tags. The text in between the «<h1>» and «</h1>» tags appears as a large bold text. Text goes in the body of the HTML document.
    • <p>Paragraph Text</p>: These tags are used to create paragraph text in an HTML document. The text that goes in between «<p>» and «</p>» appears as normal sized text. Text goes in the body of the HTML document.
    • <b>Bold Text</b>: These tags are used to create bold text. The text that goes in between «<b>» and «</b>» appears as bold text.
    • <i>Italic Text</i>: These tags are used to create italic text. The text that goes in between «<i>» and «</i>» appears as itallic text.
    • <a href="URL">Link text</a>: This tag is used to link to another website. Copy the web address you want to link to and paste it where it says «URL» (in between the quotation marks). The the text for the link where it says «Link text» (no quotation marks needed).
    • <img src="image URL">: This tag is used to post an image using HTML. Replace teh text that says «image URL» with the web address of the image.

  9. Image titled Edit HTML Files Step 9

    9

    Click File. It’s in the menu bar at the top of the screen.

  10. Image titled Edit HTML Files Step 10

    10

    Click Save As. This opens a dialogue box you can use to save your file.

    • To save the file as it’s existing name and file type, just click Save in the drop-down menu below «File».

  11. Image titled Edit HTML Files Step 11

    11

    Select «All Files». Use the drop-down menu next to Save as Type» to select «All Files».

  12. Image titled Edit HTML Files Step 12

    12

    Type a name for the file. Use the box next to «File Name» to type a name for the file.

  13. Image titled Edit HTML Files Step 13

    13

    Type .html at the end of the file. After you type a name for the file in the «File Name» box, add the extension «.html» at the end of the file name. Without this extension, it will save the file as a .txt file, instead of an HTML file.

  14. Image titled Edit HTML Files Step 14

    14

    Click Save. This saves the file.

    15. Advertisement

  1. Image titled Edit HTML Files Step 15

    1

    Click the magnifying glass icon

    Image titled Macspotlight.png

    . It’s in the upper-right corner of the Mac desktop. This displays a search bar.

  2. Image titled Edit HTML Files Step 16

    2

    Type TextEdit in the search bar. This displays a list of apps that match your search result.

  3. Image titled Edit HTML Files Step 17

    3

    Click TextEdit.app. It’s at the top of the search results. It’s next to an icon that resembles a sheet of paper and a pen.

  4. Image titled Edit HTML Files Step 18

    4

    Click File. It’s at the menu bar at the top of the screen when TextEdit is open.

  5. Image titled Edit HTML Files Step 19

    5

    Click Open. This opens a file browser you can use to navigate your Mac and open files.

  6. Image titled Edit HTML Files Step 20

    6

    Click an HTML file and click Open. HTML files have an extension that says «.html» after the file name. Use the file browser to navigate to an HTML file and click it to select it. Then click Open to open the HTML file in TextEdit.

  7. Image titled Edit HTML Files Step 21

    7

    Edit the HTML code. You can use TextEdit to edit HTML code on make. You need to learn HTML so that you can edit it by hand. Common elements you can edit include the following.

    • <!DOCTYPE html>: This goes at the top of the HTML document. This tells the web browser that this is an HTML document.
    • <html></html>: These tags go at the top and bottom of the HTML document. This indicates where the HTML code starts and stops.
    • <head></head>: These tags go at the top of the HTML document. They indicate where the head of the HTML document starts and stops. The head of the HTML document contains information that is not seen on the web page. This includes the page title, metadata, and CSS
    • <title>Page Title</title>: These tags indicate the title the page. The title goes in the head of the HTML document. Type the title of the page in between these two tags.
    • <body></body>: These tags indicate where the body of the HTML document starts and stops. The body is where all the web page content is written. The body comes after the head in the HTML document.
    • <h1>Headline Text</h1>: These tags create headline tags. The text in between the «<h1>» and «</h1>» tags appears as a large bold text. Text goes in the body of the HTML document.
    • <p>Paragraph Text</p>: These tags are used to create paragraph text in an HTML document. The text that goes in between «<p>» and «</p>» appears as normal sized text. Text goes in the body of the HTML document.
    • <b>Bold Text</b>: These tags are used to create bold text. The text that goes in between «<b>» and «</b>» appears as bold text.
    • <i>Italic Text</i>: These tags are used to create italic text. The text that goes in between «<i>» and «</i>» appears as itallic text.
    • <a href="URL">Link text</a>: This tag is used to link to another website. Copy the web address you want to link to and paste it where it says «URL» (in between the quotation marks). The the text for the link where it says «Link text» (no quotation marks needed).
    • <img src="image URL">: This tag is used to post an image using HTML. Replace teh text that says «image URL» with the web address of the image.

  8. Image titled Edit HTML Files Step 22

    8

    Click File. It’s in the menu bar at the top of the screen.

  9. Image titled Edit HTML Files Step 23

    9

    Click Save. It’s in the drop-down menu below «File». This saves the HTML file.

    • To change the name of the file, click Rename in the «File» drop-down menu. Type a new name for the file at the top of the screen. Be sure to include the «.html» extension at the top of the page.

    10. Advertisement

  1. Image titled Edit HTML Files Step 24

    1

    Open Dreamweaver. Dreamweaver has an icon that resembles a green square that says «Dw» in the middle. Click the icon in the Windows Start menu, or Application folder on Mac to open Dreamweaver.

    • Adobe Dreamweaver requires a subscription. You can purchase a subscription starting at $20.99 a month.

  2. Image titled Edit HTML Files Step 25

    2

    Click File. It’s in the menu bar at the top fo the screen.

  3. Image titled Edit HTML Files Step 26

    3

    Click Open. It’s in the drop-down menu below «File».

  4. Image titled Edit HTML Files Step 27

    4

    Select an HTML document and click Open. Use the file browser to select an HTML document on your computer and click it to select it. Then click Open in the lower-right corner.

  5. Image titled Edit HTML Files Step 28

    5

    Click Split. It’s the middle tab at the top of the page. This displays a split screen that contains an HTML editor on the bottom and a preview screen on top.[1]

  6. Image titled Edit HTML Files Step 29

    6

    Edit the HTML document. Use the HTML editor to edit HTML. The way you edit HTML in Dreamweaver isn’t too different from editing HTML in Notepad or TextEdit. As you type an HTML tag, a search menu will appear with matching HTML tags. You can click the HTML tag to insert its opening and closing tags. Dreamweaver will check to make sure there are opening and closing tags for all your HTML elements.

    • Alternatively, you can click where you want to insert an HTML element in the HTML editor and click Insert in the menu bar at the top of the screen. Click the item you want to insert in the drop-down menu to add the HTML code automatically.

  7. Image titled Edit HTML Files Step 30

    7

    Click File. When you are done editing the HTML document, click File in the menu bar at the top of the screen.

  8. Image titled Edit HTML Files Step 31

    8

    Click Save. It’s in the drop-down menu below File. This saves your HTML document.

    9. Advertisement

  1. Image titled Edit HTML Files Step 32

    1

    Go to https://sourceforge.net/projects/kompozer/ in a web browser. You can use any web browser on PC or Mac. This is the download page for Kompozer. It is a free HTML (WYSIWYG) editor that works on both Windows and Mac.

  2. Image titled Edit HTML Files Step 33

    2

    Click Download. It’s the green button near the top of the page. This takes you to a separate download page. After a 5 second delay, your download will begin.

  3. Image titled Edit HTML Files Step 34

    3

    Double-Click the Install file. By default, your downloaded files can be found in your «Downloads» folder on PC or Mac. You can also click on them in your web browser to launch the Kompozer installer. Use the following instructions to install Kompozer:

    • Windows:

      • If asked if you want to allow the installer to make changes to your system, click Yes.
      • Click Next in the intro windows.
      • Click the radial button next to «I accept the agreement» and click Next.
      • Click Next to use the default install location or click Browse to select a different install location.
      • Click Next and then click Next again
      • Click Install
      • Click Finish
    • Mac:

      • Double-click the Kompozer install file.
      • Click KompoZer.app
      • Click the Apple icon in the upper-left corner.
      • Click System Preferences
      • Click Security and Privacy
      • Click the General tab.
      • Click Open Anyway near the bottom of the window.
      • Click Open in the pop-up Window.
      • Drag the Kompozer icon to your desktop.
      • Open the Finder.
      • Click the Applications folder.
      • Drag the Kompozer icon from the desktop to the Applications folder.

  4. Image titled Edit HTML Files Step 35

    4

    Open Kompozer. Use the following steps to open Kompozer on PC or Mac

    • Windows:

      • Click the Windows Start menu.
      • Type «Kompozer»
      • Double-click the Kompozer icon.
    • Mac:

      • Click the magnifying glass icon in the upper-right corner.
      • Type «Kompozer» in the search bar.
      • Double-click Kompozer.app.

  5. Image titled Edit HTML Files Step 36

    5

    Click File. It’s in the menu bar at the top of the app.

  6. Image titled Edit HTML Files Step 37

    6

    Click Open File. It’s the second option in the drop-down menu below «File». This open a file browser you can use to select an open HTML file.

  7. Image titled Edit HTML Files Step 38

    7

    Click an HTML file and click Open. This opens the HTML file in Kompozer.

  8. Image titled Edit HTML Files Step 39

    8

    Click Split. It’s the middle tab at the top of the page. This displays a split screen that contains an HTML editor on the bottom and a preview screen on top.

    • You may need to enlarge the app so that you have more room to work.

  9. Image titled Edit HTML Files Step 40

    9

    Edit the HTML document. The HTML source code screen is on the bottom, you can use this screen to edit HTML much the same way you would in Notepad or TextEdit. You can also use the preview screen to edit your HTML using the following steps:

    • Use the drop-down menu in the upper-right corner to select the text type (i.e Heading, paragraph, ect}
    • Click and type to add text.
    • Use the buttons in the panel at the top of the screen to add bold, italics, text alignment, indents, or lists to your text.
    • Click the colored square in the panel at the top of the screen to change the text color.
    • Click the Image icon at the top of the screen to add an image to your HTML document.
    • Click the icon that resembles a chainlink to add a link to your HTML document.

  10. Image titled Edit HTML Files Step 41

    10

    Click the Save icon. Once you are done making changes to your document, click the Save icon at the top of the screen. It’s below an icon that resembles a floppy disk. This saves your work.

    11. Advertisement

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

Thanks for submitting a tip for review!

  • Remember to save your document while editing. Something could go wrong at any moment.

Advertisement

References

About This Article

Article SummaryX

1. Open Notepad on Windows or TextEdit on Mac.
2. Click File.
3. Click Open.
4. Select «All Files» in the drop-down next to the file name box on Windows.
5. Click and HTML file to select it and click Open.
6. Use the text editor to edit the HTML tags.
7. Click File.
8. Click Save.

Did this summary help you?

Thanks to all authors for creating a page that has been read 118,215 times.

Is this article up to date?

Источник


Download Article


Download Article

If you prefer to code websites by hand, you can edit HTML files in a basic text editor like Notepad (Windows) or TextEdit (macOS). If you would rather be able to move elements around on the screen and see live previews, you can use a WYSIWYG (What You See Is What You Get) editor like Dreamweaver or Kompozer. This wikiHow teaches you how to open and edit an HTML file in a standard or visual editing app.

  1. Image titled Edit HTML Files Step 1

    1

    Click the Windows Start button

    Image titled Windowsstart.png

    . It’s the button that has a Windows logo in the task bar. By default, it’s in the lower-left corner. This displays the Start menu

  2. Image titled Edit HTML Files Step 2

    2

    Type Notepad. This displays Notepad in the Start menu.

    Advertisement

  3. Image titled Edit HTML Files Step 3

    3

    Click Notepad. It has an icon that resembles a notepad with a blue cover.

  4. Image titled Edit HTML Files Step 4

    4

    Click File. It’s at the top of the menu bar in Notepad. This displays a drop-down menu. This displays a file browser you can use to open files in Notepad.

  5. Image titled Edit HTML Files Step 5

    5

    Click Open. It’s the second option in the File drop-down menu.

  6. Image titled Edit HTML Files Step 6

    6

    Select «All files» in the file type drop-down menu. Click the drop-down that says «Text Documents (.txt)» and select «All files» in the drop-down menu. This displays all document types (including HTML files) in the file browser.

  7. Image titled Edit HTML Files Step 7

    7

    Select an HTML file and click Open. This opens the HTML document in Notepad. You can edit the HTML code in Notepad.

    • Alternatively, you can create a new HTML document in Notepad.

  8. Image titled Edit HTML Files Step 8

    8

    Edit the HTML code. In order to edit HTML in Notepad, you’ll need to learn HTML so that you can edit it by hand. Common elements you can edit include the following.

    • <!DOCTYPE html>: This goes at the top of the HTML document. This tells the web browser that this is an HTML document.
    • <html></html>: These tags go at the top and bottom of the HTML document. This indicates where the HTML code starts and stops.
    • <head></head>: These tags go at the top of the HTML document. They indicate where the head of the HTML document starts and stops. The head of the HTML document contains information that is not seen on the web page. This includes the page title, metadata, and CSS
    • <title>Page Title</title>: These tags indicate the title the page. The title goes in the head of the HTML document. Type the title of the page in between these two tags.
    • <body></body>: These tags indicate where the body of the HTML document starts and stops. The body is where all the web page content is written. The body comes after the head in the HTML document.
    • <h1>Headline Text</h1>: These tags create headline tags. The text in between the «<h1>» and «</h1>» tags appears as a large bold text. Text goes in the body of the HTML document.
    • <p>Paragraph Text</p>: These tags are used to create paragraph text in an HTML document. The text that goes in between «<p>» and «</p>» appears as normal sized text. Text goes in the body of the HTML document.
    • <b>Bold Text</b>: These tags are used to create bold text. The text that goes in between «<b>» and «</b>» appears as bold text.
    • <i>Italic Text</i>: These tags are used to create italic text. The text that goes in between «<i>» and «</i>» appears as itallic text.
    • <a href="URL">Link text</a>: This tag is used to link to another website. Copy the web address you want to link to and paste it where it says «URL» (in between the quotation marks). The the text for the link where it says «Link text» (no quotation marks needed).
    • <img src="image URL">: This tag is used to post an image using HTML. Replace teh text that says «image URL» with the web address of the image.

  9. Image titled Edit HTML Files Step 9

    9

    Click File. It’s in the menu bar at the top of the screen.

  10. Image titled Edit HTML Files Step 10

    10

    Click Save As. This opens a dialogue box you can use to save your file.

    • To save the file as it’s existing name and file type, just click Save in the drop-down menu below «File».

  11. Image titled Edit HTML Files Step 11

    11

    Select «All Files». Use the drop-down menu next to Save as Type» to select «All Files».

  12. Image titled Edit HTML Files Step 12

    12

    Type a name for the file. Use the box next to «File Name» to type a name for the file.

  13. Image titled Edit HTML Files Step 13

    13

    Type .html at the end of the file. After you type a name for the file in the «File Name» box, add the extension «.html» at the end of the file name. Without this extension, it will save the file as a .txt file, instead of an HTML file.

  14. Image titled Edit HTML Files Step 14

    14

    Click Save. This saves the file.

    15. Advertisement

  1. Image titled Edit HTML Files Step 15

    1

    Click the magnifying glass icon

    Image titled Macspotlight.png

    . It’s in the upper-right corner of the Mac desktop. This displays a search bar.

  2. Image titled Edit HTML Files Step 16

    2

    Type TextEdit in the search bar. This displays a list of apps that match your search result.

  3. Image titled Edit HTML Files Step 17

    3

    Click TextEdit.app. It’s at the top of the search results. It’s next to an icon that resembles a sheet of paper and a pen.

  4. Image titled Edit HTML Files Step 18

    4

    Click File. It’s at the menu bar at the top of the screen when TextEdit is open.

  5. Image titled Edit HTML Files Step 19

    5

    Click Open. This opens a file browser you can use to navigate your Mac and open files.

  6. Image titled Edit HTML Files Step 20

    6

    Click an HTML file and click Open. HTML files have an extension that says «.html» after the file name. Use the file browser to navigate to an HTML file and click it to select it. Then click Open to open the HTML file in TextEdit.

  7. Image titled Edit HTML Files Step 21

    7

    Edit the HTML code. You can use TextEdit to edit HTML code on make. You need to learn HTML so that you can edit it by hand. Common elements you can edit include the following.

    • <!DOCTYPE html>: This goes at the top of the HTML document. This tells the web browser that this is an HTML document.
    • <html></html>: These tags go at the top and bottom of the HTML document. This indicates where the HTML code starts and stops.
    • <head></head>: These tags go at the top of the HTML document. They indicate where the head of the HTML document starts and stops. The head of the HTML document contains information that is not seen on the web page. This includes the page title, metadata, and CSS
    • <title>Page Title</title>: These tags indicate the title the page. The title goes in the head of the HTML document. Type the title of the page in between these two tags.
    • <body></body>: These tags indicate where the body of the HTML document starts and stops. The body is where all the web page content is written. The body comes after the head in the HTML document.
    • <h1>Headline Text</h1>: These tags create headline tags. The text in between the «<h1>» and «</h1>» tags appears as a large bold text. Text goes in the body of the HTML document.
    • <p>Paragraph Text</p>: These tags are used to create paragraph text in an HTML document. The text that goes in between «<p>» and «</p>» appears as normal sized text. Text goes in the body of the HTML document.
    • <b>Bold Text</b>: These tags are used to create bold text. The text that goes in between «<b>» and «</b>» appears as bold text.
    • <i>Italic Text</i>: These tags are used to create italic text. The text that goes in between «<i>» and «</i>» appears as itallic text.
    • <a href="URL">Link text</a>: This tag is used to link to another website. Copy the web address you want to link to and paste it where it says «URL» (in between the quotation marks). The the text for the link where it says «Link text» (no quotation marks needed).
    • <img src="image URL">: This tag is used to post an image using HTML. Replace teh text that says «image URL» with the web address of the image.

  8. Image titled Edit HTML Files Step 22

    8

    Click File. It’s in the menu bar at the top of the screen.

  9. Image titled Edit HTML Files Step 23

    9

    Click Save. It’s in the drop-down menu below «File». This saves the HTML file.

    • To change the name of the file, click Rename in the «File» drop-down menu. Type a new name for the file at the top of the screen. Be sure to include the «.html» extension at the top of the page.

    10. Advertisement

  1. Image titled Edit HTML Files Step 24

    1

    Open Dreamweaver. Dreamweaver has an icon that resembles a green square that says «Dw» in the middle. Click the icon in the Windows Start menu, or Application folder on Mac to open Dreamweaver.

    • Adobe Dreamweaver requires a subscription. You can purchase a subscription starting at $20.99 a month.

  2. Image titled Edit HTML Files Step 25

    2

    Click File. It’s in the menu bar at the top fo the screen.

  3. Image titled Edit HTML Files Step 26

    3

    Click Open. It’s in the drop-down menu below «File».

  4. Image titled Edit HTML Files Step 27

    4

    Select an HTML document and click Open. Use the file browser to select an HTML document on your computer and click it to select it. Then click Open in the lower-right corner.

  5. Image titled Edit HTML Files Step 28

    5

    Click Split. It’s the middle tab at the top of the page. This displays a split screen that contains an HTML editor on the bottom and a preview screen on top.[1]

  6. Image titled Edit HTML Files Step 29

    6

    Edit the HTML document. Use the HTML editor to edit HTML. The way you edit HTML in Dreamweaver isn’t too different from editing HTML in Notepad or TextEdit. As you type an HTML tag, a search menu will appear with matching HTML tags. You can click the HTML tag to insert its opening and closing tags. Dreamweaver will check to make sure there are opening and closing tags for all your HTML elements.

    • Alternatively, you can click where you want to insert an HTML element in the HTML editor and click Insert in the menu bar at the top of the screen. Click the item you want to insert in the drop-down menu to add the HTML code automatically.

  7. Image titled Edit HTML Files Step 30

    7

    Click File. When you are done editing the HTML document, click File in the menu bar at the top of the screen.

  8. Image titled Edit HTML Files Step 31

    8

    Click Save. It’s in the drop-down menu below File. This saves your HTML document.

    9. Advertisement

  1. Image titled Edit HTML Files Step 32

    1

    Go to https://sourceforge.net/projects/kompozer/ in a web browser. You can use any web browser on PC or Mac. This is the download page for Kompozer. It is a free HTML (WYSIWYG) editor that works on both Windows and Mac.

  2. Image titled Edit HTML Files Step 33

    2

    Click Download. It’s the green button near the top of the page. This takes you to a separate download page. After a 5 second delay, your download will begin.

  3. Image titled Edit HTML Files Step 34

    3

    Double-Click the Install file. By default, your downloaded files can be found in your «Downloads» folder on PC or Mac. You can also click on them in your web browser to launch the Kompozer installer. Use the following instructions to install Kompozer:

    • Windows:

      • If asked if you want to allow the installer to make changes to your system, click Yes.
      • Click Next in the intro windows.
      • Click the radial button next to «I accept the agreement» and click Next.
      • Click Next to use the default install location or click Browse to select a different install location.
      • Click Next and then click Next again
      • Click Install
      • Click Finish
    • Mac:

      • Double-click the Kompozer install file.
      • Click KompoZer.app
      • Click the Apple icon in the upper-left corner.
      • Click System Preferences
      • Click Security and Privacy
      • Click the General tab.
      • Click Open Anyway near the bottom of the window.
      • Click Open in the pop-up Window.
      • Drag the Kompozer icon to your desktop.
      • Open the Finder.
      • Click the Applications folder.
      • Drag the Kompozer icon from the desktop to the Applications folder.

  4. Image titled Edit HTML Files Step 35

    4

    Open Kompozer. Use the following steps to open Kompozer on PC or Mac

    • Windows:

      • Click the Windows Start menu.
      • Type «Kompozer»
      • Double-click the Kompozer icon.
    • Mac:

      • Click the magnifying glass icon in the upper-right corner.
      • Type «Kompozer» in the search bar.
      • Double-click Kompozer.app.

  5. Image titled Edit HTML Files Step 36

    5

    Click File. It’s in the menu bar at the top of the app.

  6. Image titled Edit HTML Files Step 37

    6

    Click Open File. It’s the second option in the drop-down menu below «File». This open a file browser you can use to select an open HTML file.

  7. Image titled Edit HTML Files Step 38

    7

    Click an HTML file and click Open. This opens the HTML file in Kompozer.

  8. Image titled Edit HTML Files Step 39

    8

    Click Split. It’s the middle tab at the top of the page. This displays a split screen that contains an HTML editor on the bottom and a preview screen on top.

    • You may need to enlarge the app so that you have more room to work.

  9. Image titled Edit HTML Files Step 40

    9

    Edit the HTML document. The HTML source code screen is on the bottom, you can use this screen to edit HTML much the same way you would in Notepad or TextEdit. You can also use the preview screen to edit your HTML using the following steps:

    • Use the drop-down menu in the upper-right corner to select the text type (i.e Heading, paragraph, ect}
    • Click and type to add text.
    • Use the buttons in the panel at the top of the screen to add bold, italics, text alignment, indents, or lists to your text.
    • Click the colored square in the panel at the top of the screen to change the text color.
    • Click the Image icon at the top of the screen to add an image to your HTML document.
    • Click the icon that resembles a chainlink to add a link to your HTML document.

  10. Image titled Edit HTML Files Step 41

    10

    Click the Save icon. Once you are done making changes to your document, click the Save icon at the top of the screen. It’s below an icon that resembles a floppy disk. This saves your work.

    11. Advertisement

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

Thanks for submitting a tip for review!

  • Remember to save your document while editing. Something could go wrong at any moment.

Advertisement

References

About This Article

Article SummaryX

1. Open Notepad on Windows or TextEdit on Mac.
2. Click File.
3. Click Open.
4. Select «All Files» in the drop-down next to the file name box on Windows.
5. Click and HTML file to select it and click Open.
6. Use the text editor to edit the HTML tags.
7. Click File.
8. Click Save.

Did this summary help you?

Thanks to all authors for creating a page that has been read 118,215 times.

Is this article up to date?

Источник

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

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

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

Гарнитура и шрифт

Термины «гарнитура» и «шрифт» часто взаимозаменяемы, что приводит к путанице. Вот что означает каждый термин.

Гарнитура это то, что мы видим. Это художественное впечатление от того, как текст выглядит, воспринимается и читается.

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

Один из способов помочь прояснить разницу между гарнитурой и шрифтом — это сравнить их с песней и MP3. Гарнитура очень похожа на песню, в том что это произведение искусства. Она создана художником или художниками и открыта для публичного обсуждения. Шрифт, с другой стороны, очень похож на МР3 тем, что он сам не оказывает художественного впечатления, это только способ передачи художественной ценности.

Добавление цвета к тексту

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

Единственное свойство, которое нам требуется для установки цвета текста — это свойство color. Оно принимает одно значение цвета, но в разных форматах. Эти форматы, как мы обсуждали в уроке 3, «Знакомство с CSS», включают ключевые слова, шестнадцатеричные значения и значения RGB, RGBa, HSL и HSLa. Шестнадцатеричные значения являются наиболее распространёнными, поскольку они обеспечивают максимальный контроль с минимальными усилиями.

Давайте взглянем на CSS, необходимый для изменения цвета всего текста в пределах элемента <html> на странице:

html {
  color: #555;
}

Изменение свойств шрифта

CSS предлагает много разных свойств для редактирования внешнего вида текста на странице. Эти свойства входят в две категории: свойства шрифта и свойства текста. Большинство из этих свойств начинаются с font- или text-. Для начала мы обсудим основные свойства шрифта.

font-family

Свойство font-family применяется, чтобы объявить, какой шрифт, а также какие резервные или заменяющие шрифты должны быть использованы для отображения текста. Значение font-family содержит несколько имён шрифтов, перечисляемых через запятую.

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

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

Свойство font-family в действии выглядит так:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

В данном случае Helvetica Neue является предпочтительным шрифтом для отображения. Если этот шрифт недоступен или не установлен на указанном устройстве, будет использоваться следующий шрифт в списке — Helvetica и так далее.

font-size

Свойство font-size даёт возможность установить размер текста, используя типовые значения размера, включая пиксели, em, проценты, пункты или ключевые слова.

Здесь в CSS устанавливается размер шрифта 14 пикселей для элемента <body>:

body {
  font-size: 14px;
}

font-style

Чтобы сделать текст курсивным или предотвратить его от этого, мы будем использовать свойство font-style. Это свойство принимает четыре ключевых слова: normal, italic, oblique и inherit. Из них наиболее часто используются italic (задаёт текст курсивным) и normal (возвращает текст к своему обычному стилю).

Ниже CSS устанавливает для всех элементов с классом special свойство font-style как italic: 

.special {
  font-style: italic;
}

font-variant

Это происходит не часто, но иногда текст необходимо установить небольшими заглавными буквами, также известными как капитель. Для такого особого случая мы воспользуемся свойством font-variant. Оно принимает три значения: normal, small-caps и inherit. Наиболее типовыми значениями являются normal и small-caps, которые используются для переключения шрифтов между капителью и обычным текстом.

Для переключения всех элементов с классом firm, мы будем использовать font-variant со значением small-caps:

.firm {
  font-variant: small-caps;
}

font-weight

Иногда мы хотим сделать текст жирным или изменить насыщенность гарнитуры. В таких случаях мы будем использовать свойство font-weight. Оно принимает в качестве значения ключевое слово или число.

Ключевое слово включает normal, bold, bolder, lighter и inherit. Из этих ключевых слов рекомендуется в первую очередь задействовать normal и bold, чтобы изменить текст от обычного до жирного и наоборот. Вместо использования ключевых слов bolder или lighter лучше применять числовое значение для более точного управления.

На практике, вот CSS для установки font-weight как bold для любого элемента с классом daring:

.daring {
  font-weight: bold;
}

Числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900 связаны с гарнитурами шрифтов, которые имеют несколько жирностей. Их порядок начинается с самой тонкой жирности, 100, и повышается до самой толстой жирности, 900. Для справки, значение normal соответствует 400, а значение bold соответствует 700. Таким образом, любое числовое значение ниже 400 будет достаточно тонким, а любое значение выше 700 будет достаточно жирным.

Изменение насыщенности шрифта до 600 для любого элемента с классом daring теперь отображает текст как полужирный — не совсем жирный, как ключевое слово bold до этого:

.daring {
  font-weight: 600;
}

Насыщенность шрифта

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

Например, шрифт Times New Roman содержит две насыщенности: нормальная или 400 и жирная или 700. Попытка использовать 900 установит шрифт в ближайшую насыщенность, 700 в данном случае.

line-height

Межстрочный интервал — расстояние между двумя строками текста — объявляется с помощью свойства line-height. Оно принимает все основные значения размера, которые мы рассмотрели в уроке 3, «Знакомство с CSS».

Лучше всего для читаемости задать межстрочный интервал примерно в полтора раза больше значения свойства font-size. Это можно быстро получить путём установки line-height как 150% или просто 1.5. Однако если мы работаем с базовой сеткой, предпочтительнее использовать пиксели и получить немного больше контроля над line-height.

Взгляните на CSS, мы установили line-height как 22 пикселя для элемента <body>, тем самым задав 22 пикселя между каждой строкой текста:

body {
  line-height: 22px;
}

Межстрочный интервал также может быть использован для вертикального выравнивания по центру одной строки текста внутри элемента. Используя одинаковые значения свойств line-height и height вы выровняете текст по центру вертикали:

.btn {
  height: 22px;
  line-height: 22px;
}

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

Универсальное свойство font

Все перечисленные выше шрифтовые свойства могут быть объединены в одном универсальном свойстве font. Это свойство может принимать несколько значений шрифтовых свойств. Порядок значений этих свойств должен быть следующим, слева направо: font-style, font-variant, font-weight, font-size, line-height и font-family.

Эти значения перечисляются слева направо без применения запятых (кроме названий шрифтов, поскольку свойство font-family задействует запятые). Косая черта (/) необходима для разделения значений свойств font-size и line-height.

Каждое значение свойства не является обязательным, за исключением значений font-size и font-family. Иными словами, мы можем включить только значения свойств font-size и font-family при желании.

html {
  font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Свойства шрифта все разом

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

HTML

<h2><a href="#">Я разработчик</a></h2>

<p class="byline">Опубликовано: Шэй Хоу</p>

<p>Каждый день я вижу дизайнеров и программистов работающих совместно друг с другом. 
Они работают разумно, преследуя бизнес-цели. Они работают старательно, делая 
исключительные продукты. Они решают реальные проблемы и гордятся своей работой. 
Они разработчики. <a href="#">Продолжить…</a></p>

CSS

h2,
p {
  color: #555;
  font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
  color: #0087cc;
}
a:hover {
  color: #ff7b29;
}
h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 6px;
}
.byline {
  color: #9799a7;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin-bottom: 18px;
}

Демонстрация свойств шрифта

Псевдоклассы в CSS

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

Псевдокласс :hover задаёт стиль элемента, когда пользователь проводит курсор мыши над этим элементом. При использовании с элементом <a>, как показано выше, все элементы <a> получают уникальные стили, когда на них наводят курсор. Теперь наши элементы <a> изменят цвет в этот момент.

На практике

Вернёмся назад к нашему сайту Styles Conference и начнём добавлять некоторые свойства шрифта.

  1. Мы начнём с обновления шрифта для всего нашего текста. Чтобы сделать это, мы применим стили к элементу <body>. Начнём с color, а также добавим значения font-weight, font-size, line-height и font-family через свойство font.

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

    Нам нужно добавить следующее:

    /*
  ========================================
  Пользовательские стили
  ========================================
*/
body {
  color: #888;
  font: 300 16px/22px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

  2. В уроке 4, «Открываем блочную модель», мы начали добавлять некоторые типографские стили, в частности, нижний margin для некоторых заголовков разного уровня и абзацев. В этом же разделе файла main.css давайте добавим цвет к заголовкам от первого до четвёртого уровней.

    h1, h2, h3, h4 {
  color: #648880;
}

    Пока мы здесь, добавим также размер шрифта для этих заголовков. Наши элементы <h1> и <h2> будут использовать достаточно большие значения font-size, следовательно, мы также хотим увеличить у них значения line-height, чтобы сохранить текст внутри этих элементов разборчивым. Для справки, мы установим значение line-height как 44 пикселя, удвоив значение основного line-height, установленного в правилах для элемента <body>.

    h1 {
  font-size: 36px;
  line-height: 44px;
}
h2 {
  font-size: 24px;
  line-height: 44px;
}
h3 {
  font-size: 21px;
}
h4 {
  font-size: 18px;
}

  3. Наши элементы <h5> планируются чуть более уникальными, чем остальные заголовки. Соответственно, мы собираемся немного изменить их стили.

    Мы применим другое значение свойства color и немного уменьшим font-size для этих элементов, а также собираемся изменить font-weight на 400 или normal.

    По умолчанию, браузеры отображают заголовки с font-weight как bold. Для наших заголовков, однако, в данный момент все font-weight заданы как 300. Сброс CSS в верхней части файла main.css изменил font-weight на normal, а затем font-weight внутри элемента <body> задал значение 300 для всех заголовков.

    Значение font-weight как 400 для элемента <h5> на самом деле сделает это немного толще, чем остальные заголовки и текст.

    h5 {
  color: #a9b2b9;
  font-size: 14px;
  font-weight: 400;
}

  4. Наш сброс в начале стилей также сбросит стили браузера по умолчанию для элементов <strong>, <cite> и <em>, которые мы хотим добавить обратно. Для элементов <strong> мы хотим установить font-weight как 400, который на самом деле приравнивается к normal, а не bold, поскольку используемая нами гарнитура толще, чем большинство других гарнитур. Затем для элементов <cite> и <em> мы хотим установить font-style как italic.

    strong {
  font-weight: 400;
}
cite, em {
  font-style: italic;
}

  5. У нас всё получается, так что давайте продолжать, добавляя некоторые стили для наших ссылок. В данный момент они синие, так указал браузер по умолчанию. Сделаем их того же цвета, что наши заголовки от <h1> до <h4>. Кроме того, применим псевдокласс :hover, чтобы изменить цвет на светло-серый, когда пользователь наводит курсор на ссылку.

    /*
  ========================================
  Ссылки
  ========================================
*/

a:hover {
  color: #a9b2b9;
}
a {
  color: #648880;
}

  6. Теперь взглянем на наш элемент <header> и обновим для него наши стили. Мы начнём обновление с логотипа, добавив свойства font-size и line-height в наборе правил для logo. После добавления к существующим свойствам border-top, float и padding, новый набор правил должен выглядеть так:

    .logo {
  border-top: 4px solid #648880;
  float: left;
  font-size: 48px;
  line-height: 44px;
  padding: 40px 0 22px 0;
}

  7. Поскольку мы совсем немного увеличили ширину логотипа, добавим margin к элементу <h3> внутри <header>, чтобы сбалансировать это. Мы сделаем это путём размещения значения tagline у атрибута class для элемента <h3>, а затем используя этот класс в нашем CSS, чтобы применить соответствующие поля.

    Не забывайте, что изменения в элементе <h3> должны произойти на каждой странице.

    HTML

    <h3 class="tagline">24&ndash;26 августа &mdash; Чикаго, штат Иллинойс</h3>

    CSS

    .tagline {
  margin: 66px 0 22px 0;
}

  8. После элемента <h3> с классом tagline наступает очередь элемента <nav>. Добавим значение primary-nav к атрибуту class элемента <nav>, а также свойства font-size и font-weight, чтобы навигация выделялась по сравнению с остальной частью заголовка.

    HTML

    <nav class="primary-nav">
  ...
</nav>

    CSS

    .primary-nav {
  font-size: 14px;
  font-weight: 400;
}

  9. Теперь элемент <header> в несколько лучшей форме, давайте также взглянем на наш элемент <footer>. Используя класс primary-footer изменим color и font-size для всего текста внутри <footer>. Кроме того, поднимем font-weight для <small> до 400.

    Учитывая существующие стили, стиль для нашего подвала должен выглядеть так:

    .primary-footer {
  color: #648880;
  font-size: 14px;
  padding-bottom: 44px;
  padding-top: 44px;
}
.primary-footer small {
  float: left;
  font-weight: 400;
}

  10. Также обновим немного нашу главную страницу. Начнём с раздела hero и увеличим общий line-height в разделе до 44 пикселей. Мы также сделаем текст в этом разделе больше, увеличив font-size для элемента <h2> до 36 пикселей и font-size для элемента <p> до 24 пикселей.

    Мы можем внести все эти изменения, используя существующий класс hero и создав новые селекторы для элементов <h2> и <p>. Наши стили для раздела hero переделаются теперь таким образом:

    .hero {
  line-height: 44px;
  padding: 22px 80px 66px 80px;
}
.hero h2 {
  font-size: 36px;
}
.hero p {
  font-size: 24px;
}

  11. В завершении, у нас есть небольшая проблемка, которую надо исправить на главной странице. Ранее мы задали для всех ссылок светло-серый цвет при наведении на них. Это прекрасно работает, за исключением трёх тизеров на главной странице, где ссылка охватывает оба элемента <h3> и <h5>. Поскольку у этих элементов есть своё собственное определение color, псевдокласс :hover, описанный ранее, не оказывает на них влияние.

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

    <section class="grid">

  <!-- Спикеры -->
  <section class="teaser col-1-3">
    <a href="speakers.html">
      <h5>Спикеры</h5>
      <h3>Спикеры мирового класса</h3>
    </a>
    <p>К нам приедут более двадцати фантастических спикеров со всего мира, чтобы поделиться своими историями.</p>
  </section>

  ... 
</section>

    С классом teaser мы готовы несколько утяжелить CSS и создать достаточно сложный селектор. Начнём наш селектор с этого класса, поскольку мы хотим только нацелиться на элементы внутри элемента с классом teaser. Отсюда мы хотим применить стили к элементам, которые находятся внутри ссылок и на которые навели курсор мыши. Таким образом, мы добавим селектор типа совместно с псевдоклассом :hover. Наконец, мы добавим селектор типа h3, чтобы выбрать действительные элементы <h3>, к которым мы хотели бы применить стили.

    В общей сложности, наш селектор и стили для этих элементов <h3> будут выглядеть следующим образом:

    .teaser a:hover h3 {
  color: #a9b2b9;
}

Уфф, это было немного. Хорошая новость — наша страница Styles Conference начинает выглядеть действительно приятно и показывает немного индивидуальности.

Наш сайт Styles Conference получил немного любви от горстки шрифтовых свойств

Рис. 6.01. Наш сайт Styles Conference получил немного любви от горстки шрифтовых свойств

Применение текстовых свойств

Знать, как установить семейство, размер, стиль, начертание, насыщенность и межстрочный интервал это только полдела. Дополнительно мы можем решить, как выровнять, украсить, трансформировать текст, добавить красную строку и межбуквенное расстояние в текст. Начнём с выравнивания текста.

text-align

Выравнивание текста является важной частью построения ритма и потока на странице. Мы делаем это с помощью свойства text-align. У этого свойства пять значений: left, right, center, justify и inherit. Все эти значения довольно просты; как и ожидалось, они выравнивают текст по левому краю, правому краю, по центру или по ширине.

Ниже CSS устанавливает текст всех абзацев выровненный по центру:

p {
  text-align: center;
}

Свойство text-align, однако, не следует путать со свойством float. Значения text-align как left или right выравнивают текст внутри элемента влево или вправо, в то время как значения float как left или right двигают весь элемент. Иногда свойство text-align даст нам желаемый результат, в другой раз нам, возможно, потребуется использовать свойство float.

text-decoration

Свойство text-decoration предлагает несколько способов для украшения текста. Оно принимает в качестве значений ключевые слова none, underline, overline, line-through и inherit. Использование text-decoration варьируется, но самое популярное применение — это подчёркивание ссылок, что является стилем браузера по умолчанию.

Здесь стиль для любого элемента с классом note задаёт text-decoration как underline:

.note {
  text-decoration: underline;
}

К одному элементу можно применить несколько значений text-decoration, указывая значения ключевых слов через пробел.

text-indent

Свойство text-indent может быть использовано для создания красной строки внутри элемента, как это обычно наблюдается в печатных изданиях. Для этого свойства доступны все основные значения размера, в том числе пиксели, пункты, проценты и так далее. Положительные значения делают отступ текста внутрь, в то время как отрицательные значения делают отступ наружу.

Здесь CSS меняет отступ текста для всех элементов <p> внутрь на 20 пикселей:

p {
  text-indent: 20px;
}

text-shadow

Свойство text-shadow позволяет нам добавить тень или несколько теней к тексту. Свойство обычно принимает четыре значения, все они перечисляются друг за другом слева направо. Первые три значения — это размер, а последнее значение — цвет.

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

Здесь для всего текста элемента <p> свойство text-shadow задаёт на 30% прозрачную чёрную тень, сдвинутую на 3 пикселя вправо, на 6 пикселей вниз и с размытием 2 пикселя:

p {
  text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
}

Использование отрицательных значений размера для горизонтальных и вертикальных смещений позволяет перемещать тени влево и вверх.

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

box-shadow

Свойство text-shadow устанавливает тень конкретно для текста элемента. Если бы нам хотелось разместить тень для элемента в целом, то мы можем использовать свойство box-shadow.

Свойство box-shadow работает так же, как text-shadow, принимая значения для горизонтальных и вертикальных смещений, размытие и цвет.

box-shadow также принимает необязательное четвёртое значение размера, перед значением цвета, для растяжения тени. Положительное значение растяжения расширит тень больше, чем размер элемента, к которому применяется свойство, а отрицательное значение сократит тень меньше, чем размер самого элемента.

Наконец, свойство box-shadow может включать впереди необязательное значение inset для размещения тени внутри элемента, а не снаружи.

text-transform

Подобно свойству font-variant есть свойство text-transform. В то время как свойство font-variant ищет альтернативный вариант гарнитуры, свойство text-transform изменит строку текста без необходимости альтернативной гарнитуры. Свойство text-transform принимает пять значений: none, capitalize, uppercase, lowercase и inherit.

Значение capitalize делает заглавной первую букву каждого слова, значение uppercase устанавливает заглавной каждую букву, а значение lowercase делает каждую букву строчной. С помощью none любые из этих унаследованных значений вернутся к исходному стилю текста.

Ниже CSS устанавливает текст для всех элементов <р> заглавными буквами:

p {
  text-transform: uppercase;
}

letter-spacing

Используя свойство letter-spacing мы можем регулировать (или отслеживать) расстояние между букв на странице. Положительное значение будет толкать буквы дальше друг от друга, а отрицательное значение будет тянуть буквы ближе друг к другу. Значение none вернёт пространство между букв к своей обычной величине.

Использование относительного размера со свойством letter-spacing гарантирует, что мы поддерживаем правильное расстояние между буквами, когда меняется font-size для текста. Это, однако, всегда хорошая идея, чтобы перепроверить нашу работу.

Здесь с помощью CSS все буквы в пределах наших элементов <p> на .5 em станут ближе друг к другу:

p {
  letter-spacing: -.5em;
}

word-spacing

Также, подобно свойству letter-spacing мы можем отрегулировать расстояние между словами в элементе, используя свойство word-spacing. Это свойство принимает те же значения размера и ключевые слова, что и letter-spacing. Вместо расстояния между букв, свойство word-spacing применяет эти значения между словами.

Здесь каждое слово в элементе <p> будет на расстоянии .25 друг от друга.

p {
  word-spacing: .25em;
}

Свойства текста все разом

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

HTML

<h2><a href="#">Я разработчик</a></h2>

<p class="byline">Опубликовано: Шэй Хоу</p>

<p class="intro">Каждый день я вижу дизайнеров и программистов работающих совместно друг с другом. 
Они работают разумно, преследуя бизнес-цели. Они работают старательно, делая исключительные продукты. 
Они решают реальные проблемы и гордятся своей работой. Они разработчики. <a href="#">Продолжить…</a></p>

CSS

h2,
p {
  color: #555;
  font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
  color: #0087cc;
}
a:hover {
  color: #ff7b29;
}
h2 {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
h2 a {
  text-decoration: none;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
}
.byline {
  color: #9799a7;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin-bottom: 18px;
}
.intro {
  text-indent: 15px;
}
.intro a {
  font-size: 11px;
  font-weight: bold;
  text-decoration: underline;
  text-transform: uppercase;
}

Демонстрация свойств текста

На практике

С текстовыми свойствами подмышкой, перепрыгнем обратно к нашему сайту Styles Conference и включим их в работу.

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

    Начнём добавление к разделу с нашими ссылкам в файле main.css с удаления подчёркивания для всех ссылок через свойство text-decoration. Далее выберем все ссылки, которые появляются в абзацах, и зададим им нижнюю границу.

    Мы могли бы использовать свойство text-decoration вместо border-bottom для подчёркивания ссылок внутри каждого абзаца, однако с помощью свойства border-bottom мы получим больше контроля над внешним видом подчёркивания. Здесь, например, подчёркивание будет другого цвета, чем сам текст.

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

    a {
  color: #648880;
  text-decoration: none;
}
a:hover {
  color: #a9b2b9;
}
p a {
  border-bottom: 1px solid #dfe2e5;
}

  2. Возвращаясь к нашим элементам <h5>, у которых стиль немного отличается от остальных заголовков, установим их все в верхнем регистре с помощью свойства text-transform. Наши новые стили элементов <h5> должны выглядеть следующим образом:

    h5 {
  color: #a9b2b9;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}

  3. Вернёмся к нашему элементу <header> и применим дополнительные стили к нашему навигационному меню (к которому мы ранее добавили класс primary-nav). После существующих свойств font-size и font-weight добавим letter-spacing и изменим наш текст на заглавный с помощью свойства text-transform.

    Наши стили для элемента <nav> с классом primary-nav теперь должны выглядеть следующим образом:

    .primary-nav {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
}

  4. Ранее для логотипа мы задали float как left внутри элемента <header>. Теперь наш слоган находится непосредственно справа от логотипа, однако, мы хотели бы, чтобы он был виден в правой части элемента <header>.

    Нам нужно добавить свойство text-align со значением right для элемента <h3> с классом tagline, чтобы получить слоган, который располагается с правой стороны.

    При добавлении к существующему свойству margin наши новые стили для элемента <h3> с классом tagline будут выглядеть следующим образом:

    .tagline {
  margin: 66px 0 22px 0;
  text-align: right;
}

  5. Нам также хотелось бы, чтобы наши навигационные меню в элементах <header> и <footer> располагались по правому краю. Поскольку оба элемента <header> и <footer> содержат дочерние обтекаемые элементы, мы можем использовать тот же подход, что проделали с нашим слоганом.

    Обтекаемые элементы внутри <header> и <footer> убираются из обычного потока страницы, и это заставляет другие элементы обтекать вокруг них. В данном конкретном случае наши навигационные меню это элементы, которые обтекают вокруг обтекаемых элементов.

    Поскольку мы применяем одни и те же стили сразу к двум навигационным меню, то дадим каждому класс nav. Наш элемент <header> будет выглядеть так:

    <header class="container group">

  <h1 class="logo">...</h1>
 
  <h3 class="tagline">...</h3>
 
  <nav class="nav primary-nav">
   ...
  </nav>
  
</header>

    А элемент <footer> будет выглядеть так:

    <footer class="primary-footer container group">

  <small>...</small>
 
  <nav class="nav">
   ...
  </nav>
  
</footer>

    Не забывайте, что изменения в наших элементах <header> и <footer> должны быть сделаны на каждой странице.

  6. С классом nav для двух навигационных меню создадим новый раздел в рамках нашего файла main.css, чтобы добавить общие стили навигации. Начнём с добавления свойства text-align со значением right к классу nav. Мы расширим эти стили позже, но это пока послужит хорошей основой.

    /*
  ========================================
  Навигация
  ========================================
*/

.nav {
  text-align: right;
}

  7. Мы уже добавили свойство text-align к нескольким разным элементам, давайте также добавим text-align со значением center к набору правил с классом hero. Для справки, эти стили, в том числе содержащие свойства line-height и padding, находятся в разделе главной страницы нашего файла main.css.

    .hero {
  line-height: 44px;
  padding: 22px 80px 66px 80px;
  text-align: center;
}

У Styles Conference теперь серьёзный стиль (плохая шутка, извините). Если серьёзно, то все наши стили вместе сочетаются очень хорошо и сайт прогрессирует.

Наш сайт Styles Conference продвигается довольно хорошо после добавления нескольких текстовых свойств

Рис. 6.02. Наш сайт Styles Conference продвигается довольно хорошо после добавления нескольких текстовых свойств

Использование безопасных веб-шрифтов

По умолчанию, есть несколько шрифтов которые заранее установлены на каждом компьютере, планшете, смартфоне или другом устройстве с браузером. Поскольку они установлены на каждом устройстве, мы можем свободно использовать эти шрифты на наших сайтах, зная, что независимо от того, какое устройство просматривает наш сайт, шрифт будет отображаться правильно. Эти шрифты известны как «безопасные веб-шрифты». Таких шрифтов только горстка и наиболее надёжные перечислены здесь:

  • Arial
  • Courier New, Courier
  • Garamond
  • Georgia
  • Lucida Sans, Lucida Grande, Lucida
  • Palatino Linotype
  • Tahoma
  • Times New Roman, Times
  • Trebuchet
  • Verdana

Встраивание веб-шрифтов

У нас также есть возможность загружать шрифты с сервера и включать их на сайт через стилевое правило @font-face. Эта возможность делает чудеса для сетевой типографики. Сейчас, более чем когда-либо, типографика приходит в жизнь в Интернете.

Встраивание собственных веб-шрифтов выглядит как приведённый CSS. Сперва мы используем правило @font-face, чтобы определить имя нашего шрифта через свойство font-family, а также исходник нашего шрифта (путь к файлу, содержащему наш выбранный шрифт) через свойство src. Отсюда мы можем использовать этот шрифт, включая его имя в качестве значения свойства font-family.

@font-face {
  font-family: "Lobster";
  src: local("Lobster"), url("lobster.woff") format("woff");
}
body {
  font-family: "Lobster", "Comic Sans", cursive;
}

Демонстрация свойств текста

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

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

На практике

Чтобы добавить немного характера к нашему сайту Styles Conference, попробуем использовать на нём Google Font.

  1. Зайдём на сайт Google Fonts и поищем шрифт, который мы хотели бы использовать: Roboto. После того как нашли, добавим его к нашей коллекции, следуя инструкциям на сайте.

    Когда придёт время выбора, какое начертание мы хотели бы использовать, удостоверимся, что указали 300 и 400, как мы уже применяли в нашем CSS. Также добавим 100 к коллекции для другого варианта тоже.

    Google выдаст нам дополнительный элемент <link> для включения в <head> на всех наших страницах. Мы поместим этот новый элемент <link> непосредственно ниже нашего существующего <link>. Новый элемент будет включать в себя правильный указатель на стили Google, который в том числе включает новый файл CSS с правильным правилом @font-face, необходимым для использования шрифта Roboto.

    После добавления нового элемента <link>, наш элемент <head> будет выглядеть следующим образом:

    <head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
  <link rel="stylesheet" href="assets/stylesheets/main.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,100&subset=cyrillic,latin">
</head>

  2. После того, как мы добавили новый элемент <link> для всех наших страниц мы готовы начать использовать шрифт Roboto. Мы сделаем это, добавив его в наш основной набор шрифтов в свойстве font внутри стиля для элемента <body>.

    Добавим Roboto в начале нашего набора шрифтов так: «Roboto», «Open Sans», «Helvetica Neue», Helvetica, Arial, sans-serif.

    Хотя Roboto это одно слово, но поскольку это встроенный веб-шрифт, то мы хотим взять его в кавычки внутри любого CSS. Наш новый стиль для элемента <body> будет выглядеть следующим образом:

    body {
  color: #888;
  font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

  3. Теперь Roboto должен загрузиться и работать, что видно по всему тексту на сайте Styles Conference. Поближе взглянем на наш логотип и обновим его немного.

    Внутри набора правил с классом logo начнём с добавления свойства font-weight со значением 100, чтобы сделать текст достаточно тонким. Также используем свойство text-transform со значением uppercase, чтобы сделать все буквы заглавными и свойство letter-spacing со значением .5 пикселей, чтобы добавить немного пространства между букв внутри логотипа.

    Все стили для нашего логотипа будут выглядеть следующим образом:

    .logo {
  border-top: 4px solid #648880;
  float: left;
  font-size: 48px;
  font-weight: 100;
  letter-spacing: .5px;
  line-height: 44px;
  padding: 40px 0 22px 0;
  text-transform: uppercase;
}

  4. Поскольку нам доступно значение 100 у свойства font-weight, давайте также установим абзац для раздела hero такой же насыщенности. Мы можем использовать существующий селектор чтобы сделать это и новый набор правил будет выглядеть следующим образом:

    .hero p {
  font-size: 24px;
  font-weight: 100;
}

Наш сайт Styles Conference проделал несколько довольно больших шагов в этом уроке и внешний вид сайта начинает по-настоящему блистать.

Главная страница Styles Conference после добавления веб-шрифта от Google

Рис. 6.03. Главная страница Styles Conference после добавления веб-шрифта от Google

Демонстрация и исходный код

Ниже вы можете посмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Просмотр сайта Styles Conference или Скачать исходный код

Добавление цитат

Тексты на сайтах иногда включает различные цитаты. Все варианты цитирования могут быть охвачены семантически в HTML с помощью элементов <cite>, <q> и <blockquote>. Из-за того, что цитаты, как правило, отличается от обычного текста по своему виду, мы обсудим их здесь, в уроке по типографике.

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

  • <cite>: применяется для указания на творческую работу, автора или ресурс;
  • <q>: применяется для коротких, встроенных цитат;
  • <blockquote>: применяется для наиболее длинных внешних цитат.

Цитата на творческую работу

Строчный элемент <cite> используется в HTML в качестве указателя на творческую работу; элемент должен включать в себя название работы, имя автора, или ссылку ведущую на работу. По умолчанию, содержимое внутри элемента <cite> отображается в браузере курсивом.

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

Вот цитата из книги Уолтера Айзексона про Стива Джобса внутри элемента <cite>. В цитате также есть гиперссылка на книгу.

<p>Книга <cite><a href="http://www.amazon.com/Steve-Jobs-Walter-Isaacson/dp/1451648537">Стив Джобс</a></cite> действительно вдохновляет.</p>

Демонстрация цитаты на творческую работу

Строчные цитаты

Довольно часто текст от автора выступает как строчная цитата в другом тексте. Для этой цели должен применяться элемент <q>. Он семантически указывает цитату на авторский текст и не должен использоваться для каких-либо других целей.

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

Вот пример:

<p>Стив Джобс однажды сказал: <q>Один хоум-ран гораздо лучше, чем два дабла</q>.</p>

Элемент <q> включает необязательный атрибут cite. Он действует в качестве указателя на ссылку в виде URL. Этот атрибут не меняет внешний вид элемента, он просто добавляет значение для экранных читалок и других устройств. Поскольку атрибут не доступен для просмотра в браузере, также полезно предложить гиперссылку на этот источник, рядом с актуальной цитатой.

Вот пример:

<p><a href="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">Стив Джобс</a> однажды сказал: 
<q cite="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">Один хоум-ран гораздо лучше, чем два дабла</q>.</p>

Демонстрация строчной цитаты

Внешние цитаты

Цитируя большой блок текста, который заимствован из внешнего источника и занимает несколько строк, мы будем использовать элемент <blockquote>. Данный элемент является блочным и может содержать другие вложенные в него блочные элементы, в том числе заголовки и абзацы.

Вот пример, который использует элемент <blockquote>:

<blockquote>
  <p>В понимании большинства людей дизайн — это внешний лоск. Это украшение интерьера. 
     Это ткань штор, ткань дивана. Но для меня, всё это далеко от смысла дизайна. 
     Дизайн — это основа души человеческого творчества, что в конечном итоге выражает 
     себя в последующих внешних слоях продукта.</p>
</blockquote>

Более длинные цитаты в элементе <blockquote> могут включать в себя прямую речь. Подобные цитаты могут содержать как атрибут cite, так и элемент <cite>.

Атрибут cite может добавляться к элементу <blockquote> тем же путём, что был использован для элемента <q> ранее, чтобы указать на цитату в виде URL. Элемент <cite> может быть добавлен после самой цитаты для указания оригинального источника цитаты, если это необходимо.

Здесь в HTML излагается расширенная цитат из Стива Джобса, которая первоначально появилась в журнале Fortune. Цитата размечена с помощью элемента <blockquote> с атрибутом cite, который показывает, где цитата появилась первоначально. В элементе <blockquote> есть элемент <cite> наряду с элементом <a>, он обеспечивает дополнительное цитирование и ссылку на цитату, которая видна пользователям.

<blockquote cite="http://money.cnn.com/magazines/fortune/fortune_archive/2000/01/24/272277/index.htm">
  <p>«В понимании большинства людей дизайн — это внешний лоск. Это украшение интерьера. 
     Это ткань штор, ткань дивана. Но для меня, всё это далеко от смысла дизайна. 
     Дизайн — это основа души человеческого творчества, что в конечном итоге выражает 
     себя в последующих внешних слоях продукта.»</p>
  <p><cite>Стив Джобс в <a href="http://money.cnn.com/ magazines/fortune/fortune_archive/2000/01/24/272277/index.htm">
     журнале Fortune</a></cite></p>
</blockquote>

Демонстрация внешней цитаты

Резюме

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

Напомним быстро, что мы обсудили в этом уроке:

  • добавление цвета к нашему тексту для его улучшения;
  • применение шрифтовых свойств, в том числе font-family, font-size, font-style, font-weight и др.;
  • применение текстовых свойств, включая text-align, text-decoration, text-indent, text-shadow и др.;
  • история безопасных веб-шрифтов и как внедрить наши собственные веб-шрифты;
  • как правильно разметить цитаты.

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

Ресурсы и ссылки

  • The Elements of Typographic Style Applied to the Web via Richard Rutter
  • CSS Font Shorthand Property Cheat Sheet via Impressive Webs
  • Google Fonts

См. также

Последнее изменение: 11.08.2018

Источник

Меняем текстовое содержимое элемента

Мы нашли нужный элемент и вывели в консоль его текстовое содержимое. Но для нашей задачи это содержимое нужно изменить. Как это сделать? Присвоим свойству textContent новое значение.

Возьмём абзац с текстом:

И перезапишем его текстовое содержимое:

Обратите внимание, что строки с текстом нужно заключать в кавычки.

Когда инструкция выполнится, текст внутри абзаца изменится:

Когда мы присваиваем свойству textContent новое значение, оно полностью заменяет собой старое. Как и в случае с переключением классов, JavaScript не влияет на исходную разметку, а меняет текст прямо в браузере пользователя.

Свойство textContent предназначено только для текста, если записать туда HTML-теги, браузер их не поймёт.

Как быстро редактировать текст на странице с помощью консоли разработчика Chrome

Константин Булгаков

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

Однако существует специальная команда document.designMode = ‘on’ которая позволяет окно браузера с содержимым страницы с легкостью превратить в текстовый редактор.

That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN

— Tomek Sułkowski (@sulco) September 27, 2019

Для вызова команды вам потребуется произвести несколько несложных действий:

  1. Откройте на нужной странице консоль администратора (вызывается нажатием клавиши F12 или Ctrl+Shift+I);
  2. В появившемся окне выберите вкладку консоль;
  3. Укажите команду document.designMode = ‘on’ ;
  4. Далее нажмите Enter и приступайте к изменению контента на странице — установите курсор в нужном фрагменте текста и вносите любые правки.

Консоль Google Chrome

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

Для чего будет полезна команда:

  1. изменять тексты и подменять данные на сайте;
  2. тестировать различные текстовые блоки и элементы — заголовки, лид-параграфы, абзацы, врезки, сноски;
  3. проверять различные форматы написания текста и быстро принимать решения;
  4. быстро править тексты и отправлять скриншоты заинтересованным участникам — разработчикам, копирайтерам или дизайнерам;
  5. создавать фейковые скриншоты с содержимым страницы.

Если вам интересно узнать больше о возможностях консоли администратора Chrome, то рекомендую посмотреть запись Chrome Dev Summit 2016.

Хотите еще больше похожих выступлений? Посетите официальную страницу саммита. Здесь вы найдете ссылки на записи других выступлений за все предыдущие года.

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

Как пользоваться вкладкой Elements

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

Инструменты отлично подходят, когда хочется “попробовать, как это выглядит”.

В этой статье мы пользуемся браузером Google Chrome, но в других браузерах всё работает схожим образом.

Поменять текст

Чтобы заменить любой текст на странице, достаточно кликнуть правой клавишей мыши по нужному тексту и выбрать “Просмотреть код”. Откроется код этого элемента, где вы сразу увидите нужный текст. Кликните по нему дважды, чтобы заменить. При нажатии на Enter вы увидите, что текст поменялся и на странице.

Попробуйте повторить приём ниже. Где пробовать.

Поменять картинку

Чтобы заменить картинку, нужно найти её путь: обычно это какая-то длинная ссылка внутри элемента с названием img. Довольно просто, ничем не отличается от смены текста.

В примере ниже мы задумали у второго урока поставить такую же картинку, как у первого. Попробуйте повторить приём ниже. Где пробовать.

Обратите внимание на прикольную фичу: при наведении на ссылку Chrome показывает миниатюрку картинки, которая лежит по этой ссылке. Мелочь, а приятно.

Найти блок вёрстки

Весь HTML устроен иерархически: большие элементы на странице складываются из элементов поменьше, а те, в свою очередь, тоже делятся на части и так пока не дойдёт дело до самых простых элементов на странице — текста, картинок и прямоугольников. Например, на странице Энциклопедии Девмана есть строка, в которой лежит 3 списка из рубрик энциклопедии.

Видно, что они “вложены” в строку — при желании их можно “свернуть”:

При наведении на строчки элементы на странице будут выделяться синим. Чтобы выделить весь элемент поднимайтесь “наверх” по коду, пока он не выделится целиком. Если выделилось слишком много, то вы поднялись слишком высоко, теперь спускайтесь обратно. Перемещайтесь по элементам, пока не найдете нужный.

Найденный элемент можно отредактировать прямо в браузере, выбрав в контекстном меню Edit as HTML . Правда, в файл изменения не попадут. Ещё можно разом скопировать весь блок с вложенными в него элементами или даже удалить их все. О том как это сделать читайте ниже.

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

С помощью инструментов разработчика вы поняли, что вам нужен элемент <div js-article-content»> . Значит в файле надо искать тег div с классами row и js-article-content и с родителями body и article . Задача сильно упростится, если в редакторе свернуть часть кода, в англоязычном интерфейсе этот приём называется code folding .

Помните, что на странице может быть много одинаковых с виду элементов, с одинаковым тегом и классами. Ориентируйтесь прежде всего на родителей — внутри каких элементов он находится. Начинайте поиск с тега <body> — этот элемент на странице всегда один и находится на самом верху.

В коде теги ищут по их родителям

Скопировать элемент

Если вы уже нашли элемент через инструменты разработчика, то кликните по нему правой кнопкой мыши и в выпадающем меню выберите Copy outerHTML . HTML разметка скопирована в буфер обмена, теперь можете вставить её в текстовый редактор.

Удалить элемент

Чтобы удалить элемент, нужно так же кликнуть по нему правой кнопкой мыши и выбрать “Просмотреть код”. Далее выберите его целиком. Когда вы выберете нужный элемент — жмите Delete .

В этой гифке мы задумали удалить вторую статью “Как установить Python”. Попробуйте повторить приём ниже. Где пробовать.

В гифке видно, как мы “поднимаемся” наверх, выделяя всё больше. Как только “поднялись” достаточно — свернули всё, что внутри с помощью “стрелочки” слева. Стало видно, что некие li — это элементы списка (на самом деле это list item), а в некоем ul лежит весь список (это unordered list).

Попробуйте бесплатные уроки по Python

Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.

Источник

Оглавление

  • 1. Написание HTML кода
  • 2. Изменяем цвета
  • 3. Изменяем шрифты
  • 4. Добавляем навигацию
  • 5. Украшаем ссылки
  • 6. Добавляем горизонтальные линии
  • 7. Подключаем внешний CSS
  • Дальнейшее изучение

Это краткое руководство предназначено для людей, начинающих свое
изучение 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 или любого Вашего любимого) и
наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

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

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

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

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

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

Тэг <ul> в нашем примере задает отображение
“неупорядоченного списка” (Unordered List), т.е. списка, элементы
которого непронумерованы. Тэги <li> начинают “элементы
списка” (List Item). Тэг <p> является “параграфом”. А тэг
<a> — “якорь” (Anchor), с помощью которого создаются
гиперссылки.

исходник HTML файла внутри KEdit

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

Внимание! Углубленно:
Если вы хотите узнать какие бывают тэги в скобках <…>, то вы
можете изучить Начало работы с HTML. Но сначала пару слов о
структуре нашей HTML страницы.

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

  • Элементы “h1” и “p” задают содержимое уникальное каждой
    страницы, в то время как подпись (“address”) снизу снова будет
    повторяться на всех страницах.

Отметьте, что я не закрыл “li” и “p” элементы. В HTML (но не в
XHTML), можно опускать закрывающие тэги </li> и </p>,
что я и сделал в данном случае, для того чтобы было проще текст.
Но вы можете добавить их, если считаете необходимым.

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

Выберите “Сохранить как…” или “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 стили только один раз. Но на
этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[и т.д.]

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

Внимание! Дополнительно:
Таблицы стилей CSS создаются согласно правилам. Каждое
правило состоит из трех частей:

  1. селектор (в нашем примере: “body”), которые
    говорит о том, к какой части документа применить правило;

  2. свойство (в нашем примере свойствами являются
    ‘color’ и ‘background-color’), которое указывает что именно мы
    устанавливаем у данного элемента, выбранного селектором;

  3. и значение (‘purple’ и ‘#d8da3d’), которое
    устанавливает значение атрибута.

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

body { color: purple }
body { background-color: #d8da3d }

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

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

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

Снимок разукрашенной страницы в Konquerror

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

Внимание! дополнительно:
В CSS
можно задавать цвета несколькими способами. Наш пример показывает
два из них: по имени (“purple”) и по шестнадцатиричному коду
(“#d8da3d”). Существует порядка 140 имен цветов и 16
шестнадцатиричных значений. Добавляя прикосновение стиля
объясняет детали относительно этих кодов.

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

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

Снимок с измененными шрифтами

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

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

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

Навигация уже на странице. Это список <ul> вверху. Ссылки
в нем не работают, потому что наш “сайт” пока что состоит только из
одной страницы, но это неважно в данный момент. Конечно же, на
настоящем сайте не должно быть неработающих ссылок.

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

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

Снимок с меню слева

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

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

В HTML гиперссылки создаются тэгами <a> поэтому для
указания цвета нам надо создать правило в CSS для “a”. Для того,
чтобы различать посещенные и непосещенные ссылки, CSS
предоставляет два “псевдо-класса” (:link и :visited). Они
называются “псевдо-классами” для отличия от HTML атрибутов, которые указываются в HTML напрямую, т.е. в
нашем случае class="navbar".

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[и т.д.]

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

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

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

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

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

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

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

Теперь вернитесь к HTML коду. Уберите все содержимое от
<style> до </style> включительно и замените убранное
элементом <link> как показано (строка
5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

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

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

Конечный результат

Конечный резульат

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

Источник

Форматирование текста

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

Табл. 1. Теги для форматирования текста

Код HTML Описание Пример
<b>Текст</b> Жирное начертание текста Текст
<i>Текст</i> Курсивное начертание текста Текст
<sup>Текст</sup> Верхний индекс e=mc2
<sub>Текст</sub> Нижний индекс H2O
<pre>Текст</pre> Текст пишется как есть, включая все пробелы 
Текст
<em>Текст</em> Курсивный текст Текст
<strong>Текст</strong> Жирное начертание текста Текст

Любые теги форматирования текста можно использовать совместно друг
с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом
используется сочетание тегов <b> и <i>
(пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body>   
   <p>Он словно вырезан из <b>камня</b>, стоек и неподвижен в отличие от его противников. 
   <i>Дух и жизненная сила</i> в нём достигла <b><i>совершенства</i></b>. 
   Но вот беда — никто не смеет принять его вызов.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Вид курсивного жирного начертания текста

Рис. 1. Вид курсивного жирного начертания текста

Использование тегов <sup> и <sub>
сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body> 
  <p><b>Формула изумруда:</b>
  <i>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></i></p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Нижний индекс в тексте

Рис. 2. Нижний индекс в тексте

Теги <strong> и <em>
выполняют те же функции, что теги <b> и <i>,
но написание последних короче, привычней и удобней.

Следует отметить, что теги <b> и <strong>, также
как <i> и <em> являются не совсем эквивалентными
и заменяемыми. Первый тег <b> — является тегом физической
разметки и устанавливает жирный текст, а тег <strong> —
тегом логической разметки и определяет важность помеченного текста. Такое разделение
тегов на логическое и физическое форматирование изначально предназначалось,
чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода
информации. Теоретически, если воспользоваться, например, речевым браузером,
то текст, оформленный с помощью тегов <b> и <strong>,
будет отмечен по-разному. Однако получилось так, что в популярных браузерах
результат использования этих тегов равнозначен.

Источник

Понравилась статья? Поделить с друзьями:
  • Как изменить текст на планшете
  • Как изменить текст на отсканированном изображении
  • Как изменить текст на отсканированном документе jpeg
  • Как изменить текст seo сайта
  • Как изменить текст на оригинальность