Первые шаги в HTML, только самое необходимое
06.09.2018
Верите ли вы, что можно изучить HTML, прочитав только одну статью на блоге? Сейчас это выясним.
Я думаю никто не будет спорить, что если купить какой-нибудь учебник по HTML , то информация в нем будет плохо структурирована; кучу всяких тегов пытаются забить тебе в голову уже на первых страницах, о существовании которых некоторые веб-разработчики даже не подозревают.
Довольно болтовни. Скажу лишь, что HTML, который вы здесь увидите, можно спокойно называть XHTML, потому что он в принципе удовлетворяет всем требованиям.
5 советов как объяснить своей девушке, что видеоигры – это круто
HTML теги (синтаксис)
Они бывают двух видов:
| <название_тега></название_тега> <название_тега /> |
Как определить, когда тег должен быть первого вида а когда второго? Да никак — просто запомнить. К счастью запоминать много не придётся.
Как пригнать и ездить на авто из Литвы? (часть 1)
Атрибуты тегов
| <название_тега название_атрибута= "значение" ></название_тега> <название_тега название_атрибута= "значение" /> |
Одним словом это параметры, типа х="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.blog/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.blog/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-код этой страницы. Практически ничего нового, удачи ????