Материал подготовлен специалистами

Оформление HTML документа

Оформление и размещение HTML документа


При оформлении текста очень важно:


  1. Корректная HTML разметки документа

1) Каждый текст всегда начинается с заголовка второго уровня.  В HTML коде он выглядит как:

<h2>Заголовок второго уровня</h2>



2) Для разметки параграфов используются теги <p></p>


<p>Эта модель гольф-класса настолько популярна, что в 2013 году была объявлена компанией Форд самым продаваемым в мире легковым автомобилем. Заводы по его выпуску находятся по всей Европе, в том числе и в России, где количество сошедших с конвейера авто давно превысило миллионный показатель. По вероятности встретить его на дорогах нашей страны &ndash; эта модель, пожалуй, одна из лидеров.</p>


3) Ненумерованый список


<ul>

<li>мир;</li>

<li>труд;</li>

<li>май;</li>

</ul>
  • мир;
  • труд;
  • май;

4) Нумерованый список


<ol>

<li>мир;</li>

<li>труд;</li>

<li>май;</li>

</ol>
  1. мир;
  2. труд;
  3. май;

  1. Отсутствие мусора в HTML

Часто при переносе из Google Docs и Microsoft Word в HTML код переносится “МУСОР”. Внешне текст может выглядеть нормально, но открыв “исходный код” этого документа можно убедиться в наличии лишних тегов.


Акцентировать внимание на этом сейчас не будем, просто ниже предложим инструменты для “очистки”


  1. Типографирование

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


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


С принципами экранной типографики вы можете ознакомиться по ссылке


Очистка, разметка и размещение готового текста

  1. Вставляем текст в Seo Shield (если он был написан на сторонних программах)


  1. Нажатием активируем вкладку Реформатор (она станет выделена зеленым цветом)

  1. Если сразу же отобразить исходный код (установив курсор в рамке с текстом)



то можно заметить, что:

<h2><span>Специфика больницы “Леопольдина”, Швайнфурт</span></h2>

<p><span>Клиника “Леопольдина” начала свою деятельность в 1898 году. Имя больнице подарило старейшее научно-исследовательское медицинское общество под названием "Леопольдина" (Германия), занимавшееся научными исследованиями в области медицины с 1652 года.</span></p>

<p><<span>В настоящее время больница “Леопольдина” принимает более 30 тысяч пациентов в год, как в стационаре, так и в амбулаторном порядке. Для этого у медицинского центра есть все необходимое - современное оборудование для диагностики и терапии, персонал численностью почти 2000 человек и 18 самостоятельно функционирующих отделений разного профиля (хирургия, отделение лечения онкологии, инфекционных болезней, гинекология, педиатрия, кардиология, гастроэнтерология, неврология, нейрохирургия, психиатрия, урология и др.). Примечательно также наличие многопрофильных центров для пациентов, имеющих комплексную клиническую картину и нуждающихся в нескольких специалистах одновременно. Высокий уровень посещения отмечается в психосоматической клинике, открывшейся в 2014 году. Имеется отдельное подразделение, занимающееся иностранными пациентами.</span></p>

<p><span>Как попасть на лечение?</span></p>

<p><span>Чтобы попасть на лечение в больницу “Леопольдина”, необходимо забронировать место. Для этого нужно собрать требуемое учреждением нужное количество документов. Стоимость услуг, предоставляемых здесь, адекватно соответствует качеству. </span></p>

<p><span><br/>

</span>

</p>
  1. В коде присутствуют <span> (это мусорные стили)
  2. Заголовок “Как попасть на лечение?” размечен как “параграф”
  3. В конце присутствует набор тегов “без текста”

Используем кнопку “Очистить HTML” - она уберет “мусор” и “пустые теги”



<p>Как попасть на лечение?</p>

придется заменить вручную на

<h2>Как попасть на лечение?</h2>



Результат:

<h2>Специфика больницы «Леопольдина», Швайнфурт</h2>

<p>Клиника «Леопольдина» начала свою деятельность в&nbsp;1898&nbsp;году. Имя больнице подарило старейшее научно-исследовательское медицинское общество под названием «Леопольдина» (Германия), занимавшееся научными исследованиями в&nbsp;области медицины с&nbsp;1652&nbsp;года.</p>

<p>В&nbsp;настоящее время больница «Леопольдина» принимает более 30&nbsp;тысяч пациентов в&nbsp;год, как в&nbsp;стационаре, так и&nbsp;в&nbsp;амбулаторном порядке. Для этого у&nbsp;медицинского центра есть все необходимое&nbsp;— современное оборудование для диагностики и&nbsp;терапии, персонал численностью почти 2000 человек и&nbsp;18&nbsp;самостоятельно функционирующих отделений разного профиля (хирургия, отделение лечения онкологии, инфекционных болезней, гинекология, педиатрия, кардиология, гастроэнтерология, неврология, нейрохирургия, психиатрия, урология и&nbsp;др.). Примечательно также наличие многопрофильных центров для пациентов, имеющих комплексную клиническую картину и&nbsp;нуждающихся в&nbsp;нескольких специалистах одновременно. Высокий уровень посещения отмечается в&nbsp;психосоматической клинике, открывшейся в&nbsp;2014&nbsp;году. Имеется отдельное подразделение, занимающееся иностранными пациентами.</p>

<h2>Как попасть на&nbsp;лечение?</h2>

<p>Чтобы попасть на&nbsp;лечение в&nbsp;больницу «Леопольдина», необходимо забронировать место. Для этого нужно собрать требуемое учреждением нужное количество документов. Стоимость услуг, предоставляемых здесь, адекватно соответствует качеству. </p>



Подписаться Подписаться Подписаться