Понимание HTML-кода который требуется для Blogger

Для ведения блогов на платформе Blogger требуется несколько навыков веб-программирования. Одним из языков программирования веб-сайта, который используется в Blogger, является HTML. Понимание HTML-кода требуется для блогера. Нам не нужно углубляться в это, но есть некоторый базовый HTML-код, который может сделать наш процесс ведения блога намного проще.

 

Понимание HTML-кода

 

HTML код для Blogger

В этой статье я хочу поделиться своим изучением HTML, связанным с Blogger. Я читаю некоторые книги по темам HTML и изучаю HTML на другом онлайн-ресурсе. Для справки в обучении HTML вы можете посмотреть на http://www.w3schools.com/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-кодов, которые необходимы 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 (формулировку) и отображается в блоге как дизайн.

См. также:  Перенаправить Старый URL-адрес на новый - 301 Redirects Blogger

Структура шаблона Blogger почти такая же, как и у HTML. Разница находится в декларации типа документа, определении пространства имен XML, а также в хранилище и вызове данных. Ниже приведена общая структура шаблона Blogger.

 

Общая структура шаблона 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 и другая видимая часть.

См. также:  Раздел заголовка Blogger

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

<!DOCTYPE HTML>
<html>
<head>….</head>
<body>…</body>
</html>

2. Элемент уровня блока HTML <div>

Элемент блочного уровня всегда начинается с новой строки и занимает всю доступную ширину. Одним из элементов уровня блока, который очень часто встречается в шаблоне Blogger или сообщении Blogger, является элемент <div>. Он используется для создания контейнера части или элемента Blogger.

 

Пример элемента уровня блока <div> в структуре шаблона Blogger

 

Применение элемента тега <div> не ограничивается только в структуре шаблона Blogger. Мы также можем использовать элемент <div> в нашем сообщении Blogger для создания раздела в нашем блоге с другим форматом. Например, создать поле для гиперссылки на соответствующую статью в середине сообщения. Ниже приведен пример. Я не создал этот код в посте Blogger. Я использовал «Try-It Editor», предоставленный www.w3schools.com. Я просто пишу код на левой панели, нажимаю «Выполнить», и я вижу видимость кода на правой стороне.

 

Применение элемента div в посте блогера

 

3. HTML в элементах строки <span>

<div> создает элемент уровня блока, <span> создает элемент уровня строки. Когда мы помещаем что-то в элемент <span> html, это не создаст новую строку. Содержимое внутри <span> будет встроено в предыдущее содержимое HTML-элемента. Я видел это приложение в мобильном меню шаблона Blogger. Ниже приведен пример в «Try-It Editor», а также в шаблоне Blogger.

 

Использование <span> в шаблоне 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> &#183;
<span><a href=’https://www.technoblogger.ru/p/blog-page_8.html’>Why Blogger</a></span> &#183;
<span><a href=’https://www.technoblogger.ru/p/blog-page_8.html’>Blogger Template</a></span> &#183;
<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-элемент.

 

Меню форматирования HTML в Редакторе сообщений Blogger

 

Чтобы вставить ссылку, нам нужен элемент <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.

См. также:  Создание элементов Marquee с помощью CSS

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 на ходу в моем смартфоне.

 

Ознакомьтесь также

Как изменить расширение копирования имени для файлов и папок в Windows 11/10

В Windows 11 метод вырезания, копирования, вставки, переименования, удаления, совместного использования файлов и папок остается …

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *