Для ведения блогов на платформе Blogger требуется несколько навыков веб-программирования. Одним из языков программирования веб-сайта, который используется в Blogger, является HTML. Понимание HTML-кода требуется для блогера. Нам не нужно углубляться в это, но есть некоторый базовый HTML-код, который может сделать наш процесс ведения блога намного проще.
- HTML код для Blogger
- Рассказ о HTML
- Почему блогер должен понимать HTML?
- Общая структура HTML-файла
- Структура шаблона Blogger
- Основная концепция HTML для Blogger: понимание элемента HTML
- Основная концепция HTML для Blogger: понимание атрибута HTML
- Как создать комментарий в HTML
- 12 Базовых HTML-код, используемых в Blogger
- 1. Элемент
- 2. Элемент уровня блока HTML <div>
- 3. HTML в элементах строки <span>
- 4. HTML-код для создания ссылки
- 6. HTML-код для форматирования заголовков
- 7. HTML-код для вставки цитаты
- 8. HTML-код для обычного форматирования текста
- 9. HTML-код для создания упорядоченного списка и неупорядоченного списка.
- 10. HTML код для создания таблицы
- 11. HTML-код для вставки программного кода
- 12. Атрибут стиля и введение в CSS для Blogger
- Советы: изучение HTML-кода для Blogger
HTML код для Blogger
В этой статье я хочу поделиться своим изучением HTML, связанным с Blogger. Я читаю некоторые книги по темам HTML и изучаю HTML на другом онлайн-ресурсе.
Рассказ о HTML
Короче говоря, HTML – это язык разметки. Последняя версия HTML 5. Она состоит из стандартного кода, который может форматировать текст как макет, так и стиль. Представьте себе Microsoft Word, мы можем отформатировать текст в Microsoft Word так, как мы хотим, чтобы он отображался на компьютере или в печатном документе. Язык HTML разметит текст, чтобы он мог отображаться так, как мы хотим.
Почему блогер должен понимать HTML?
Когда мы запустили Blogger в первый раз, мы никогда не думали, что позже нам потребуется понять HTML или другой язык веб-программирования. Итак, почему мы должны понимать HTML-код? Как блогеру, нам нужно когда-нибудь перейти в раздел «Редактировать HTML» в нашем шаблоне Blogger. Есть несколько случаев, когда блогер обязан погрузиться в «Редактирование HTML».
- Создание меню в нашем блоге
- Незначительное редактирование шаблона блоггера
- Вставить скрипт Google AdSense, Google Analytic
- Создание шаблона блогера с нуля
Поэтому нам нужно понимать HTML. Какую часть HTML-кода нам нужно понять? Цель изучения HTML для Blogger – облегчить жизнь блогерам. Нам просто нужен базовый код HTML-кода, который часто используется в шаблоне Blogger и в блоге.
Существует несколько базовых HTML-кодов, которые необходимы Blogger, чтобы сделать нашу жизнь в блогах намного проще.
Общая структура HTML-файла
В целом HTML-документ состоит из <!DOCTYPE..>, <html> , <head>, <body> тега. Ниже приведена общая структура документа HTML.
<!DOCTYPE HTML>
<html>
<head>….</head>
<body>…</body>
</html>
В общем, каждый HTML-документ построен с той же структурой, что и выше. Ниже объяснение
- <!DOCTYPE HTML> : Объявление документа, чтобы браузер знал, что наш документ является HTML-документом
- <html>тег: это стандартный тег структуры документа HTML. Он начинается с тега <html> и заканчивается </html> тегом
- <head>…. </head> : Добавляем тег заголовка, скин, код CSS, код Java Script
- <body>… </body> : Все внутри этого тега видно нашему читателю блога
Структура шаблона Blogger
Шаблон Blogger – это документ XML. Когда мы загружаем шаблон Blogger, мы получаем файл XML. XML стоит от языка расширенной разметки. В чем разница между этими двумя языками? По цитате из поиска Google я нашел это определение
HTML является аббревиатурой для языка разметки гипертекста. HTML был разработан для отображения данных с акцентом на то, как они выглядят. XML был разработан как независимый от программного и аппаратного обеспечения инструмент, используемый для транспортировки и хранения данных, с акцентом на том, что это за данные. XMLобеспечивает основу для определения языков разметки
Сравнение HTML и XML на сайте www.xmlobjective.com позволяет лучше понять разницу между HTML и XML. Пожалуйста, посмотрите на ссылку ниже:
HTML отвечает за то, как данные будут выглядеть в блоге, XML отвечает за хранение данных и их передачу, чтобы их можно было отображать в блоге.
Данные, о которых мы говорим, – это данные блога. Например, заголовок блога, описание блога, метка блога, пост блога и любые другие связанные данные. Когда мы создаем сообщение на платформе Blogger, мы фактически вводим эти данные в базу данных Blogger. Шаблон блога XML преобразует эту информацию в HTML (формулировку) и отображается в блоге как дизайн.
Структура шаблона Blogger почти такая же, как и у HTML. Разница находится в декларации типа документа, определении пространства имен XML, а также в хранилище и вызове данных. Ниже приведена общая структура шаблона Blogger.
Файл шаблона Blogger запускается с декларацией XML, а остальные – с HTML. Однако мы видим, что тег <html> имеет много атрибутов.
Тег <head> содержит заголовок страницы, код CSS для настройки шаблона <b:template skin>, а также код CSS для настройки шаблона панели управления Blogger <b:skin>
Так что это общая структура шаблона Blogger. Это просто общий обзор, я не буду вдаваться в подробности структуры шаблона Blogger.
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<html b:css=’false’ b:defaultwidgetversion=’2′ b:layoutsVersion=’3′ b:responsive=’true’ b:templateUrl=’rockpool.xml’ b:templateVersion=’1.2.0′ expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’>
<head>
* Page Title
* Meta Tag Discription
* Google AdSense syndication script
* Google Analytic syndication script
* CSS (internal and external)
* Script
* Etc
….</head>
<body>
* Header
* Blog Post
* Side Bar
* Footer
* Google AdSense Code
* Etc
…</body>
</html>
Основная концепция HTML для Blogger: понимание элемента HTML
Итак, мы знаем общую структуру HTML-файла и XML-файла шаблона Blogger. Как мы видим, HTML-код всегда начинается с открывающего тега и заканчивается закрывающим тегом. Код внутри открывающего и закрывающего тега называется HTML-элементом. В приведенном выше примере, по крайней мере, мы уже знали об элементе <html>, элементе <head>, элементе <body>.
Большая часть HTML-кода будет иметь открывающий и закрывающий теги. Например, <html> …… </html>. Однако есть код, который не нуждается в закрывающем теге, например <br/>.
В шаблоне Blogger или сообщении Blogger используется много элементов HTML. Мы обсудим это позже. Какой наиболее частый HTML-код требуется Blogger. Ниже приведена общая структура HTML-элемента.
<opening tag element>Content Of The Elements</closing tag element>
Основная концепция HTML для Blogger: понимание атрибута HTML
В примере структуры шаблона Blogger мы видим, что за тегом <html> следует большой код, такой как b:css = ‘false’, b:defaultwidgetversion = ‘2’. Эти коды являются атрибутом HTML. Атрибут HTML объясняет больше об элементе HTML. Это всегда указывается в открывающем теге.
Понимание атрибута HTML очень важно. Общий атрибут, который очень часто используется в сообщении Blogger или шаблоне Blogger, – это атрибут класса, атрибут id, атрибут href, атрибут src, атрибут alt, атрибут width, атрибут style и многие другие. Важно понимать, что этот атрибут дает дополнительное объяснение тегу HTML.
Ниже приведена структура тега HTML с его атрибутом.
<tag attribute1=”attributename1″ attribute2=”attributename2″>HTML Tag Element Content </tag>
Как создать комментарий в HTML
Комментарий очень важен в программировании. Нам нужен способ поместить некоторый текст в наш код, который игнорируется как часть исполняемого кода. Нам нужен комментарий, чтобы дать больше информации программисту или пользователю о намерениях написанного кода. В HTML или в шаблоне блога XML комментарий начинается с <! – и заканчивается ->.
<! – Оставьте свой комментарий здесь ->
Мы также можем использовать комментарий, чтобы отключить определенную часть нашего кода. Лучше отключить его, чем удалить. Если нам снова понадобится этот код, мы можем включить его, удалив тег комментария.
12 Базовых HTML-код, используемых в Blogger
1. Элемент
Структуры HTML Элемент структуры HTML – это базовый элемент, необходимый для Blogger. Есть декларация типа документа, элемент html, элемент head и элемент body.
Как объяснялось выше, мы помещаем информацию о нашем блоге, такую как заголовок, мета-описание, стиль CSS, скрипт внутри тега <head>.
Вся видимая часть нашего блога размещена внутри тега <body>. Заголовок, боковая панель, область тела сообщения, код Ad-Sense и другая видимая часть.
Понимание структуры HTML сделает процесс ведения блога проще. Мы знаем, хотим ли мы изменить шаблон Blogger или просто скопировать и вставить код в сообщение Blogger или шаблон Blogger, чтобы улучшить внешний вид или функцию нашего блога.
<!DOCTYPE HTML>
<html>
<head>….</head>
<body>…</body>
</html>
2. Элемент уровня блока HTML <div>
Элемент блочного уровня всегда начинается с новой строки и занимает всю доступную ширину. Одним из элементов уровня блока, который очень часто встречается в шаблоне Blogger или сообщении Blogger, является элемент <div>. Он используется для создания контейнера части или элемента Blogger.
Применение элемента тега <div> не ограничивается только в структуре шаблона Blogger. Мы также можем использовать элемент <div> в нашем сообщении Blogger для создания раздела в нашем блоге с другим форматом. Например, создать поле для гиперссылки на соответствующую статью в середине сообщения. Ниже приведен пример. Я не создал этот код в посте Blogger. Я использовал «Try-It Editor», предоставленный www.w3schools.com. Я просто пишу код на левой панели, нажимаю «Выполнить», и я вижу видимость кода на правой стороне.
3. HTML в элементах строки <span>
<div> создает элемент уровня блока, <span> создает элемент уровня строки. Когда мы помещаем что-то в элемент <span> html, это не создаст новую строку. Содержимое внутри <span> будет встроено в предыдущее содержимое HTML-элемента. Я видел это приложение в мобильном меню шаблона Blogger. Ниже приведен пример в «Try-It Editor», а также в шаблоне Blogger.
Мы можем скопировать этот код в Try-It Editor и посмотреть его поведение. Ниже приведен пример кода.
<!– mobile navigation menu start –>
<div id=’mobile-nav’>
<span><a href=’https://www.technoblogger.ru/p/blog-page_8.html’>Blogger Guide</a></span> ·
<span><a href=’https://www.technoblogger.ru/p/blog-page_8.html’>Why Blogger</a></span> ·
<span><a href=’https://www.technoblogger.ru/p/blog-page_8.html’>Blogger Template</a></span> ·
<span><a href=’https://www.technoblogger.ru/p/blog-page_8.html’>Google AdSense</a></span>
</div>
<!– mobile navigation menu end –>
Ниже приведен результат кода:
Руководство Blogger · Почему Blogger · Шаблон Blogger · Google AdSense
Если мы изменим <span> на <div>, меню больше не будет в одну строку. Меню будет в 4 строки. Ниже приведен пример.
Руководство Blogger·
Почему Blogger·
Шаблон Blogger·
Google AdSense
4. HTML-код для создания ссылки
Чтобы создать ссылку в нашем сообщении в блоге, мы можем нажать кнопку «добавить или удалить ссылку» в нашем редакторе сообщений Blogger. Поэтому нам не нужно понимать, что такое код для создания ссылки в посте Blogger. Однако, когда мы хотим создать меню в шаблоне Blogger, нам нужно понять, как работает этот HTML-элемент.
Чтобы вставить ссылку, нам нужен элемент <a> и атрибут href. Мы видим приложение в создании меню Blogger выше в части 3. 5. HTML-код для вставки изображения Изображение важно в публикации Blogger или шаблоне Blogger. Так же, как ссылка, мы можем вставить картинку в наше сообщение блогера, используя меню форматирования HTML, доступное в нашем редакторе сообщений блогера.
6. HTML-код для форматирования заголовков
Заголовки HTML являются одним из наиболее частых элементов HTML, которые используются блогерами. Обычно мы использовали его из редактора постов Blogger. Мы можем выбрать строку текста и изменить ее на заголовок, подзаголовок, второстепенный заголовок или просто обычную строку.
7. HTML-код для вставки цитаты
Мне очень нравится помещать цитаты в важную строку моего поста Blogger. Это делает пост Blogger красивее, а также дает возможность для быстрого чтения. Благодаря быстрому просматриванию заголовка, цитата также поможет читателю углубиться в статью. Для этого все, что нам нужно, это просто выбрать текст и нажать инструменты форматирования «Цитировать» в нашем редакторе Blogger Post.
8. HTML-код для обычного форматирования текста
Форматировать текст в HTML очень легко в нашем редакторе сообщений Blogger. Нам просто нужно нажать «Жирный шрифт», «Курсив» или «Подчеркнуть», чтобы получить эффект форматирования текста, который мы хотим, как в программном обеспечении Word Processor.
9. HTML-код для создания упорядоченного списка и неупорядоченного списка.
Список также является наиболее распространенным форматированием, встречающимся часто в сообщениях Blogger. У каждой статьи можно создать список несколькими способами. Меню Blogger создается в неупорядоченном списке. Мы можем создать список, нажав «Список маркеров» или «Нумерованный список» в редакторе сообщений Blogger. При создании меню внутри шаблона Blogger мы также используем этот код.
10. HTML код для создания таблицы
Мы можем создать таблицу в нашем посте блогера, чтобы сделать сравнение и предоставить информацию более эффективным способом. Чтобы создать таблицу в нашем блоге, нам нужно написать код. Нет другого варианта. Вот почему Blogger должен понимать HTML-код. На каком-то уровне нам нужно выполнить «рутинную» работу, погрузиться в редактор сообщений HTML и создать некоторые вещи, используя код HTML.
11. HTML-код для вставки программного кода
Вставить HTML-код или другой код в HTML очень легко. Существует два типа тегов HTML, которые можно использовать для выполнения этой работы.
- <pre>….</pre>
- <code>…</code>
Все внутри этого тега будет отображаться в виде строки кода в нашем блоге. Тег <pre> предназначен для блочного элемента, а <code> для встроенного элемента. Так же, как <div> и <span>
12. Атрибут стиля и введение в CSS для Blogger
Атрибут стиля очень важен в шаблоне Blogger или в сообщении Blogger. Мы использовали атрибут style для форматирования текста, как мы хотим. Измените цвет фона, измените тип и размер шрифта и другое доступное форматирование элемента. Мы можем сделать стиль внутри элемента тега в каждом сообщении в блоге или поместить его в качестве внешнего CSS (каскадной таблицы стилей), который можно использовать во всем сообщении Blogger.
Советы: изучение HTML-кода для Blogger
Изучение HTML – это как учиться ездить на велосипеде. Начинающему кажется трудным, и когда мы начнем понимать, станет легче и веселее. HTML также нужен практический навык, поэтому мы должны попытаться написать код. Чтение этого блога недостаточно. В этой статье дается только общая картина базового HTML-кода, необходимого Blogger для облегчения нашей работы в Blogger.
Итак, как мы можем практиковать HTML-код для Blogger? В Blogger есть два режима редактирования сообщений. Обычно мы используем редактор «Создать», который имеет много форматирующего текстового меню и дает почти то, что вы увидите в браузере. Blogger также предлагает HTM-редактор для блога. Попробуйте переключить режим редактора HTML после того, как вы закончили писать и изучите код. Мы можем попробовать использовать редактор сообщений HTML и написать нашу статью в формате HTML.
Другими советами по изучению HTML является использование редактора Try-It, предоставленного www.w3schools.com. Он имеет онлайн-редактор HTML на левой стороне и панель предварительного просмотра на правой стороне. Мы можем увидеть, как работает HTML-код, сравнив код и результат.
Чтение HTML или XML-кода также является деятельностью, которую можно использовать для улучшения нашего понимания HTML или XML. Мы можем использовать текстовый редактор для программирования кода, который может отображать код в количестве и цвете. Есть несколько приложений, которые можно использовать. Для программы Windows я бы хотел, чтобы пользователь Notepad ++ читал код XML или HTML. Различные цвета помогают нам лучше понять код.
Если вы хотите читать HTML или XML-код на ходу, вы можете найти приложение для Android, которое может красиво отображать код в цветном режиме. Я использую текстовый редактор Jota для чтения HTML или XML на ходу в моем смартфоне.
