Сайтостроение Урок 3 Тэги HTML
В прошлом уроке мы с вами установили тему и слегка её настроили/подправили под себя. Сегодня мы будем учится разбираться в коде, чтобы хотя бы для начала красиво оформлять свои посты и находить в коде нужные для правки места.
Простейшее форматирование текста статьи.
Непосредственно в каждом посте (странице, статье) в можете задавать форматирование текста (размер шрифта, жирность, списки и т.д.) Это делается в момент написания статьи с помощью тегов HTML
Для начала давайте разберём, что где есть в Вордпресс в редакторе для написания постов:
Зайдите в то место где мы пишем посты: Записи — добавить новую
Вот так выглядело моё окно когда я пыталась впихнуть эту тему в предыдущий урок. Цифрами на картинке я пометила:
- Название статьи
- Адрес, будущая ссылка. Кнопка изменить позволяет редактировать последнюю часть
- «Визуально» Режим просмотра «Как будет выглядеть текст на экране»
- «HTML» режим просмотре как выгдядит код.
Фиолетовым я обвела непосредственно окно куда набераится статья. Зелёным кнопки HTML кодов позволяющие этот текст редактировать.
С кнопками думаю вы разберётесь сами (они похожи на ворд). Обычно сложности возникают когда происходят накладки с HTML кодами
Теги HTML
Давайте начнём писать новый пост. Выберем сначала режим «Визуально» (Номер 3 на картинке) И напишем небольшой текст.
Заголовок в нём выделим как стиль «Заголовок 2″ (Слева в окошечке со словом Абзац ищите). Пару слов выделим жирным шрифтом (Кнопка «В»). Пару наклонным («I»), Пару как ссылку на нашу же страницу (Кнопка с изображением Цепи)
Теперь переключите в режим «HTML» ( 4 номер на картинке) И посмотрите как выглядит ваш текст в тегах. Давайте разберём принципы:
- Тег всегда помещается в знаки больше меньше <ТЕГ>
- Тег в большинстве случаев состоит из двух кусочков Открытие и закрытие. Они отличаются тем, что перед закрывающим тегом стоит слэш. Например тег жирного шрифта выглядит так <strong>тег</strong>
- В открывающей части тега, прямо внутри знаков больше меньше могут указываться дополнительные параметры. Например у тега ссылки это адрес куда она ссылается <a href=»http://АдресСсылки»>Текст ссылки</a>
- Не все теги подчиняются этим правилам. Например у тега <br> (новая строка) нет закрывающей части, а у тега картинки в закрывающий слэш пишется в открывающей части и без имени тега: <img src=»http://АдресКартинки» «/>
Тег DIV. Блочная структура сайта:
Пожалуй этому тегу стоит уделить отдельное внимание. Что он делает? Он определяет каким стилем будет оформляться текст. При этом сам стиль описывается в отдельном файле (style.css). Этот стиль включает какой величину шрифта, цвет, на каком фоне, в каком месте страницы будет располагаться текст и многое другое. Если вы откроете код своего сайта.
В режиме просмотра сайта. Правая клавиша мышки ( в браузере Хром) в любом месте экрана. «Просмотр кода страницы»
То увидите что весь ваш текст заключён во множество тегов DIV с разными идентификаторами и классами. Именно из-за этих тегов он и выглядит такой красивой страничкой, а не просто набором текста.
Что нужно помнить работая с тегами HTML в Вордпресс:
- Весь ваш сайт написан с помощью тегов HTML. Механизмы PHP (На них работает Вордпресс) позволяют формировать сайт динамически, но они всё-равно выдают в результате теги HTML
- Если вы удаляете кусок кода смотрите внимательно чтобы захватить теги целиком и открывающий и закрывающий. Если вставляете новый кусок в код. внимательно следите внутрь каких тегов вы влазите.
- Если вы правите файл PHP, то следите за тем внутри каких тегов DIV вы добавляете или убирает код. Не теряются ли при этом их закрывающие или открывающие части. Куски кода PHP тоже выделяются чем-то вроде тегов HTML <?php … КодPHP… ?> Старайтесь в них не влизать
- Если у вас есть вопрос по написанию конкретного тега HTML — вам сюда
Редактировать:
Комментарии (2) на запись “Сайтостроение Урок 3 Тэги HTML”
- Елена Мироненко 11.04.2011 14:35
-
Мисс Удача
12.04.2011 09:27
Кнопка убрать под кат есть и в HTML режиме называется More.
По поводу влияния плагинов здесь принцип такой — поставили. не работает или что-то заглючило — снесите и найдите аналог. Плагинов много. у них много версий, всегда можно найти тот. что не глючит.
Обратные ссылки
Оставить комментарий
Здравствуйте! Почему-то не всегда удается оставить комментарий. Это вторая попытка.
Я установила плагин для видео. Сразу пропал визуальный редактор, остался только HTML. Я поэтому не могу спрятать часть текста под Кат.
Напишите пост? Допустим, какой нужен тег, чтобы прятать часть текста под Кат. Или какой лучше использовать плагин для правильной работы визуального редактора. Или как исправлять такие ошибки. Заранее спасибо!