HTML, первые шаги, только самое необходимое
Верите ли вы, что можно изучить HTML, прочитав только одну статью на блоге? Сейчас это выясним.
Я думаю никто не будет спорить, что если купить какой-нибудь учебник по HTML, то информация в нем будет плохо структурирована; кучу всяких тегов пытаются забить тебе в голову уже на первых страницах, о существовании которых некоторые веб-разработчики даже не подозревают.
Довольно болтовни. Скажу лишь, что HTML, который вы здесь увидите, можно спокойно называть XHTML, потому что он в принципе удовлетворяет всем требованиям.
HTML теги (синтаксис)
Они бывают двух видов:
<название_тега></название_тега> <название_тега />
Как определить, когда тег должен быть первого вида а когда второго? Да никак — просто запомнить. К счастью запоминать много не придётся.
Атрибуты тегов
<название_тега название_атрибута="значение"></название_тега> <название_тега название_атрибута="значение" />
Одним словом это параметры, типа х="2" или адрес_ссылки="http://google.com".
Структура страницы
<!DOCTYPE html> <html><head> </head> <body> </body></html>
Между тегами <head> и </head> находится необходимая информация о странице, а также подключаются CSS-стили и в некоторых случаях скрипты.
Между <body> и </body> уже само содержание страницы.
Содержимое тега
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Портфолио, разработка сайтов, truemisha.ru</title> <meta name="description" content="Разработка, а также доработка сайтов и оформление групп в социальных сетях" /> <link rel="stylesheet" href="https://misha.agency/style.css" type="text/css" media="screen" />
Как ни странно, иногда этих четырёх строчек бывает достаточно. Сейчас расскажу, что они означают.
Кстати, на нубо-сайтах я встречал целые помойки в <head>, бывало даже так, что некоторые строчки повторялись по три раза :)
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Это кодировка страницы. Чаще всего используется именно UTF-8, даже на зарубежных сайтах. Поэтому рекомендую не париться и тупо копировать её отсюда.
<title>Портфолио, разработка сайтов, truemisha.ru</title>
Это заголовок страницы, например его можно увидеть, если навести мышкой на вкладку в браузере. Очень важная вещь, особенно для поисковиков.
<meta name="description" content="Разработка, а также доработка сайтов и оформление групп в социальных сетях" />
Описание страницы, должно отличается от заголовка. Для посетителей не имеет никакого значения, но важно для поисковиков, в частности для Google, он чаще всего составляет сниппет из этого описания, а это уже видят потенциальные посетители.
Сниппет обведен красным цветом. Понятно, что чем интереснее он будет выглядеть, тем больше вероятность того, что пользователи перейдут на сайт.
<link rel="stylesheet" href="https://misha.agency/style.css" type="text/css" media="screen" />
Подключение стилей. Там где href="" указываем путь к таблице стилей (я про файл .css)
Содержимое тега <body>
Здесь может быть куча всего, но я не буду бросаться вперёд и расскажу только о тех вещах, в которых можно полностью разобраться уже сейчас.
Ссылка:
<a href="адрес_ссылки">текст_ссылки</a>
Картинка:
Обратите внимание, что ширина и высота указываются здесь просто цифрами без "px".
Описание и размеры картинки важны только для поисковиков.
<img src="адрес_картинки" width="200" height="100" alt="описание" />
Форматирование текста:
Google любит красиво отформатированные тексты.
<strong>жирный текст</strong> <em>курсив</em> перенос<br />строки <h1>Заголовок 1-го уровня, должен быть один на странице</h1> <h2>Заголовок 2-го уровня</h2> <h3>Заголовок 3-го уровня</h3> <h4>Заголовок 4-го уровня</h4> <h5>Заголовок 5-го уровня</h5> <h6>Заголовок 6-го уровня, зачем их столько нужно:) </h6>
В HTML ещё много всяких фишек по форматированию, но вместо них лучше использовать CSS.
Списки:
При помощи стилей с ними можно вытворять что угодно. Иногда очень удобно использовать именно их.
Маркированный список:
<ul> <li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Третий и так до бесконечности</li> </ul>
Нумированный список:
<ol> <li>Первый элемент списка</li> <li>Второй элемент списка и так далее</li> </ol>
Блочные элементы:
<div>Обычный блок</div> <p>Абзац</p> <span>Кусок текста</span>
Функциональность блоков будет более подробно рассмотрена в статье про вёрстку.
А теперь нажмите Ctrl + U и взгляните на HTML-код этой страницы. Практически ничего нового, удачи :)
Миша
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
как реализовать вывод кода в статьях так как у тебя ?
у меня через Geshi
ссылку можно на плагин ?:))
не знаю ссылки, у меня все в коде внедрено)
напиши пожалуйста пост и поделись кодом :)