Сайтостроение Урок 3 Тэги HTML

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

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

Непосредственно в каждом посте (странице, статье) в можете задавать форматирование текста (размер шрифта, жирность, списки и т.д.) Это делается в момент написания статьи с помощью тегов HTML

Для начала давайте разберём, что где есть в Вордпресс в редакторе для написания постов:

Зайдите в то место где мы пишем посты: Записи — добавить новую

Вот так выглядело моё окно когда я пыталась впихнуть эту тему в предыдущий урок. Цифрами на картинке я пометила:

1. Название статьи
2. Адрес, будущая ссылка. Кнопка изменить позволяет редактировать последнюю часть
3. «Визуально» Режим просмотра  «Как будет выглядеть текст на экране»
4. «HTML» режим просмотре как выгдядит код.

Фиолетовым я обвела непосредственно окно куда набераится статья. Зелёным кнопки HTML кодов позволяющие этот текст редактировать.

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

Теги HTML

Давайте начнём писать новый пост.  Выберем сначала режим  «Визуально» (Номер 3 на картинке)  И напишем небольшой текст.
Заголовок в нём выделим как стиль «Заголовок 2″ (Слева в окошечке со словом Абзац ищите). Пару слов выделим жирным шрифтом (Кнопка «В»). Пару наклонным («I»), Пару как ссылку на нашу же страницу (Кнопка с изображением Цепи)

Теперь переключите в режим «HTML» ( 4 номер на картинке) И посмотрите как выглядит ваш текст в тегах. Давайте разберём принципы:

1. Тег всегда помещается в знаки больше меньше <ТЕГ>
2. Тег в большинстве случаев состоит из двух кусочков Открытие и закрытие.  Они отличаются тем, что перед закрывающим тегом стоит слэш. Например тег жирного шрифта выглядит так <strong>тег</strong>
3. В открывающей части тега, прямо внутри знаков больше меньше могут указываться дополнительные параметры. Например у тега ссылки это адрес куда она ссылается <a href=»http://АдресСсылки»>Текст ссылки</a>
4. Не все теги подчиняются этим правилам.  Например у тега <br> (новая строка) нет закрывающей части, а у тега  картинки в закрывающий слэш пишется в открывающей части и без имени тега: <img  src=»http://АдресКартинки» «/>

Тег DIV. Блочная структура сайта:

Пожалуй этому тегу стоит уделить отдельное внимание. Что он делает? Он определяет каким стилем будет оформляться текст. При этом сам стиль описывается в отдельном файле  (style.css). Этот стиль включает какой величину шрифта,  цвет, на каком фоне, в каком месте страницы будет располагаться текст и многое другое. Если вы откроете код своего сайта.
В режиме просмотра сайта. Правая клавиша мышки ( в браузере Хром) в любом месте экрана. «Просмотр кода страницы»
То увидите что весь ваш текст заключён во множество тегов DIV с разными идентификаторами и классами. Именно из-за этих тегов он и выглядит такой красивой страничкой, а не просто набором текста.

Что нужно помнить работая с тегами HTML в Вордпресс:

1. Весь ваш сайт написан с помощью тегов HTML.  Механизмы PHP (На них работает Вордпресс) позволяют формировать сайт динамически, но они всё-равно выдают в результате теги HTML
2. Если вы удаляете кусок кода смотрите внимательно чтобы захватить теги целиком и открывающий и закрывающий. Если вставляете новый кусок в код. внимательно следите внутрь каких тегов вы влазите.
3. Если вы правите файл PHP, то следите за тем внутри каких тегов DIV вы добавляете или убирает код. Не теряются ли при этом их закрывающие или открывающие части. Куски кода PHP тоже выделяются чем-то вроде тегов HTML  <?php   … КодPHP…     ?> Старайтесь в них не влизать
4. Если у вас есть вопрос по написанию конкретного тега HTML — вам сюда

Редактировать:

Вы можете подписаться на новые посты этого блога: