Как HyperText Markup Language. HTML - это не язык программирования, это язык разметки сайта.

Все браузеры умеют преобразовывать эту разметку в удобный вид для пользователя.

В этом языке используются специальные команды, называемые тегами. У каждого тега своя функция. Существует огромное количество тегов. В идеале нужно выучить все. Но для начинающего разработчика базовых знаний вполне достаточно.

Основные команды HTML

Список HTML-команд очень большой. Но основных не так много. Для того чтобы начать писать код, вам нужен редактор. Можно использовать "Блокнот". Рекомендуется использовать Notepad++. Он выглядит вот так.

Преимущество в том, что в специальных редакторах теги подсвечиваются определенным цветом, в зависимости от категории. Команды для создания сайта HTML в блокноте или любой другой программе одни и те же. Язык используется везде одинаковый. Среда разработки - это лишь инструмент.

В языке HTML есть закрывающиеся и незакрывающиеся теги. Также в этом языке существует понятие вложенности. Каждый объект в коде - это элемент. У элемента есть открывающий тег, закрывающий и содержимое. Более того, у тега есть свои дополнительные атрибуты со своими значениями.

На рисунке видно два тега и . Запомните, что открывающий и закрывающий пишутся одинаково, но отличаются только "/". Если тег не закрыть, то обработчик будет всё остальное считать продолжением именно этого элемента. Это очень важно. Особенно в ссылках. Их мы рассмотрим немного дальше.

Тег обязательный. Его всегда нужно писать. А вот закрывать не обязательно. По стандартам надо, но если не закрыть, работать всё равно будет.

Эти HTML-команды являются каркасом для страницы. Они обязательны. Они также закрываются.

Название тегов соответствует смыслу. Head - голова. В этом разделе указывается служебная и важная информация, которую не видно. Раздел body - тело документа. Здесь содержимое, которое отображается пользователю. Старайтесь закрывать теги сразу, чтобы потом не было путаницы.

В служебном разделе указывается:

  • заголовок документа;
  • файлы стилей;
  • файлы скриптов;
  • мета-теги;
  • указания для поисковых систем;
  • указания для роботов;
  • любая другая информация, которая может использоваться программистами, но не пользователям.

Файл стилей подключается вот так:

Файл скриптов следующим образом:

У текста обязательно должен быть заголовок. Его указываем вот так:

Заголовок страницы

Этот текст будет отображаться в названии вкладки браузера. Также этот заголовок выводится в результате выдачи поисковой системы.

Теги для оформления текста

Текст нужно размещать в теге абзаца. Он обозначается как . Для текста также можно использовать Строка.

Оформлять текст можно, как и в "Ворде":

  • курсив
  • жирный текст
  • перечеркнутый текст
  • подчеркнутый текст

Текст можно оформлять стилями. Их мы рассмотрим в конце, после обзора других элементов.

Использование заголовков

Есть и другие важные HTML-команды. Для создания сайтов обязательно используют заголовки. Они указываются при помощи тега Заголовок первого уровня. Существуют уровни от 1 до 6. Важно понимать, что в заголовках должна быть вложенность.

Пример на рисунке.

Имейте в виду, что рекомендуется использовать только один заголовок h1. При этом он должен совпадать с тегом . Разумеется, вы можете указать 200 заголовков h1, но тогда к вам будут применены санкции со стороны поисковых систем.

Использование изображений

Изображения являются неотъемлемой частью веб-страниц. На примере показано, как можно вставить какую-нибудь фотографию.

Как видите, на примере детально показано, что и как называется.

Использование ссылок

Если вы учите HTML-команды, то знать тег-ссылки вы просто обязаны. Это один из главнейших элементов, который составляет

В примере, указанном выше, видно, что вместо текста ссылки указана картинка. То есть можно ставить как текст, так и картинку.

Использование таблиц

Таблицы используются также очень часто. Изначально они предназначались для представления информации в удобном виде. Но затем верстальщики их использовали для размещения различных элементов страницы.

Таблица создается следующим образом:

Текст ячейки Текст ячейки
Текст ячейки Текст ячейки

Атрибут width указывает ширину таблицы. Она может быть в процентах или пикселях. Border указывает толщину рамки.

Структура указывается следующим образом. Тег tr является строкой. Тег td ячейкой. А всё вместе - это таблица.

Таблицу можно выравнивать. Для этого используется атрибут align, который может принимать три значения: Left, Center, Right. Пример использования указан ниже.

Эти HTML-команды (ширина и выравнивание) подходят и для других элементов. Толщина рамки также указывается у изображений.

Использование списков

Используя HTML-команды, можно создать различные виды списков. Практически точно так же, как и в редакторе Word.

В языке Html существуют упорядоченные и неупорядоченные Пример такого списка.

  • Первое

  • Второе

  • Третье

Результат будет такой:

  • Первое
  • Второе
  • Третье

Тип списка

Код в языке HTML

В виде круга

В виде окружности

С квадратными маркерами

Упорядоченные списки создаются точно так же, но только вместо

    , используем тег .

    Здесь также можно задать тип вывода списка:

    • "1" - арабские числа 1, 2, 3 ...
    • "A" - заглавные буквы A, B, C ...
    • "a" - строчные буквы a, b, c ...
    • "I" - большие римские числа I, II, III ...
    • "i" - маленькие римские числа i, ii, iii ...

    Стандартно выводятся арабские цифры.

    Поскольку это нумерованные списки, у них есть атрибут start, в котором указывается начальное значение списка. Например, можно выводить список начиная с 10-го или 20-го числа.

    Использование стилей

    HTML-команды для сайта весьма разнообразны, но все они подчиняются стилям. Стили можно указывать в виде файла в разделе head: или прописать сразу готовый стиль.

    Обратите внимание, что между этими определениями стилей есть разница. Файл стилей можно указывать во всех страницах сайта. Как только вы внесете в него изменения, то это обновление коснется всего сайта в целом. Если вы укажете стили на конкретной странице, то изменения и использование этих классов будет только внутри этого файла. За пределы него ваши настройки не выйдут.

    Представьте, что у вас 20 страниц HTML и вы решили сделать заголовок на 2 пикселя больше. Если у вас всё в файле стилей, то правку внести нужно только там. Если везде индивидуально, то обновлять придется все 20 страниц.

    Указывать только для одной страницы можно следующим образом.

    В этой статье постараюсь описать основные теги языка html. Всего их более сотни, но действительно важных и постоянно нужных не так много. Самые главные теги

    html — это глобальный тег-контейнер, в который помещается все содержимое веб-страницы. Он является парным, впрочем, как и большинство описываемых далее тегов. Если и будут попадаться одинарные, то я об этом скажу.

    head — содержит разную информацию, которая никак не будет выводиться на странице, но от нее непосредственно зависит внешний вид информации. Например, в head прописывается кодировка, подключается таблица стилей и файлы javascript. То есть здесь указывается все, что нужно для корректной работы странички. Следующие четыре тега прописываются именно в head.

    link — с помощью этого одинарного тега подключаются внешние файлы. Например, иконка или таблица стилей.

    script — подключает файлы с расширением js (javascript).

    title — задает название страницы, ее заголовок, который будет виден в поисковиках и в браузере.

    meta — одинарный тег, в котором прописывается служебная информация, такая, как кодировка или ключевые слова.

    body — тело страницы. Контейнер для всего содержимого, которое будет непосредственно выведено на веб-страничку.

    Теги для текста, списки

    p — создает параграф или абзац, который отделяется от других элементов небольшими вертикальными отступами. Основной элемент для хранения текстовой информации.

    blockquote — большая цитата, которая можете содержать в себе другие теги для ее оформления. Может состоять, например, из нескольких абзацев.

    h1 — h6 — теги для выделения заголовков на веб-странице. H1 – самый главный и далее по убыванию важности.

    Рис. 1. Заголовки в html.

    q — маленькая цитата.

    b, strong — выделяет текст жирным. Второй тег также придает словам особую важность.

    em, i — выделение курсивом.

    sub, sup — выводит текст в нижнем/верхнем индексе, заодно уменьшая немного размер шрифта.

    ol — в html это тег нумерованного списка, пунктам которого будут присваиваться порядковые номера.

    ul — маркированный список. Его пункты просто отмечаются маркером, внешний вид которого можно изменить. Маркированный список делают тогда, когда нет нужно в строгом перечислении каких-то пунктов.

    li — парный тег, в который помещается один пункт маркированного или нумерованного списка. То есть ul или ol выступает лишь в роли контейнера.

    Рис.2. Маркированный и немаркированный списки.

    Ссылки

    Для ссылок в html есть отдельный тег — , который имеет один обязательный атрибут:

    анкор

    < a href = "адрес, куда перейти" > анкор< / a > < / p >

    Картинки

    Картинки в html вставляются с помощью одинарного тега . Обязательным атрибутом является src (source), то есть путь к самой картинке. Остальные параметры (размер, позиционирование, эффекты) лучше настраивать через css.

    Таблицы

    table — тег-контейнер, в который помещается вся таблица.

    tr — ряд таблицы, в который вписываются ее ячейки. Сам ряд никак нельзя выделить, он выступает лишь в роли контейнера.

    td — ячейка таблицы. Вот к ней как раз и можно применить какие-то стили, размер, в нее можно вписать информацию, вставить картинку или видео.

    Пустые блочные и строчные контейнеры

    div — пустой блочный контейнер, не выполняющий больше никаких функций. До сих пор с его помощью, например, верстают боковую колонку на сайте.

    span — аналогично с дивов это пустой контейнер, но не блочный, а строчный. Чаще всего применяется для выделения отдельных кусков текста и применения к ним каких-то интересных стилей.

    Мультимедиа

    В список тегов html можно добавить и более современные. Например, тег video, в атрибутах которого можно задать адрес до видеоролика, а также кодеки для его проигрывания на веб-странице. Сюда же входит audio. С помощью этого парного тега можно вставить аудиозапись.

    Формы

    form — в этот тег помещается вся форма (обычно для регистрации, заказа чего-то). Имеет атрибуты, связывающие ее с PHP, иначе она не будет работать.

    input — основной одинарный тег, который позволяет вставить в форму различные поля (для ввода текста, телефона, выбора даты рождения).

    textarea — большое текстовое поле. Обычно в него можно вписать отзыв или комментарий.

    Рис. 3. Простая форма, созданная с помощью тегов form и input.

    HTML5

    Хотелось бы также упомянуть несколько современных тегов, которые появились в HTML5.

    header — шапка сайта, статьи или какого-то раздела.

    footer — подвал сайта, статьи или какого-то раздела.

    aside — второстепенная информация, не имеющая непосредственной связи с главным содержанием. Но в этот тег не советуют вставлять сайдбар (боковую колонку), которую лучше пока делать по-старому с помощью div.

    figure — позволяет группировать элементы. Самый распространенный пример – картинка и описание для нее.

    section — раздел сайта (обычно со своим заголовком).

    article — независимая статья, новость или заметка.

    nav — главная навигация сайта.

    Конечно, это не все теги, которые появились в HTML5, но практика показывает, что именно перечисленные пригодятся вам больше всего. К сожалению, у всех этих новых элементов нет дружбы со старыми версиями Internet Explorer, поэтому для него нужно реализовывать отдельную поддержку.

    В статье были описаны лишь самые распространенные элементы. Полный список тегов html c описанием можно посмотреть в каком-нибудь словаре. Самый популярный в рунете – htmlbook.

    Один раз прочитав статью вы не запомните все перечисленные теги. Намного лучше они запоминаются при реальной работе над сайтом. Это были основные теги для создания сайта html. Заходите на наш блог и вы найдете гораздо больше информации по созданию собственного сайта своими руками.

    Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.

    Описание html тегов из примера

    1. - эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.

    Любая html страница имеет следующую структуру:

    ... Заголовочные теги ... ... Тело страницы ...

    2. - между этими тегами заключается весь видимый контент страницы.

    4. - между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег

    Теперь перейдем к тегам, которые находятся в теле html страницы (внутри и ).

    5. - эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет - центр экрана. В будущем рекомендуется отказаться от использования этих тегов.

    6. - это один из класса тегов заголовочных тегов .. , обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы".

    Примечание

    эти теги имеют большой вес в ранжировании сайта , поэтому ими необходимо пользоваться аккуратно и с умом.

    При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег , а дальше могут идти уже , и т.д. Главное, чтобы не было сначала , потом , потом и т.п. Должна быть строгая иерархия. Заголовков , и т.п. может быть много.

    7.
    - это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.

    8. - это одиночный тег, который выводит изображение.

    • src - обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
      Примечание :
      • Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL ;
      • Не забудьте указать расширение изображения. Например, .jpg , .gif , .jpeg .
    • alt или title - в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта , особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.

    9. - эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.

    Примечание: - аналогичный тег.

    Есть также свойство CSS font , в котором можно задавать все эти параметры.

    10. - выделить жирным. Все, что заключено между и будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является .

    Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.

    13 голоса

    Приветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.

    В этой статье я расскажу про создание html страницы. Выполним мы эту задачу менее, чем за 10 минут, а потом более подробно разберемся с основными тегами. Было бы неправильно называть подобную публикацию уроком. Это скорее затравка, которая призвана показать вам простоту работы и родить в вас желание двигаться дальше, изучить больше, делать лучше.

    Как создать страничку

    Первую страницу я предлагаю вам сделать в блокноте. Самом простом, который находится в меню «Пуск», папка «Стандартные». Пока не нужно ничего скачивать. Попробуйте воспользоваться тем, что имеете.

    Откройте документ.

    Вставьте в него вот этот код.

    Моя первая страница



    Мы дошли до самого низа
    Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино.
    К примеру, вот ссылка на мой блог - Start-Luck - рассказывает просто о "сложном".

    Моя первая страница Создать страницу проще, чем вы думаете Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате.



    Простой код позволяет сделать текст красным

    Написать жирным не намного сложнее

    Мы дошли до самого низа

    Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино..

    Ну вот и все. Ваша первая страница готова

    Файл нужно назвать index.html . Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.

    Я сохранял документ на рабочий стол. Теперь нужно найти его, нажать правую кнопку мыши и открыть с помощью любого браузера. Я выберу Google Chrome.

    Вот так выглядит только что созданная мной страничка. Ваша ничем не будет отличаться. Все точно также: с картинками и цветным шрифтом.

    Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center » и вставим строчку, в которой содержится слово «Color ». Кстати, я уже писал. Это очень просто, рекомендую к прочтению.

    Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5

    Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: .

    Видите, заголовок стал красным. Точно также вы можете придать нужный оттенок любой части текста.

    Ну вот и все, пример готов, и вы должны гордиться собой. Конечно, она еще не находится онлайн, для этого веб-страницу надо выложить на , который предоставляется хостингом. Нужно также подключить свой домен, чтобы и другие люди могли увидеть ваше творение.

    Пока страничку видите только вы. Но согласитесь, таким сайтом можно удивить только человека из железного века. Но это первый опыт, давайте сделаем его еще более успешным, разобравшись с тегами, которые мы использовали. Это поможет вам научиться создавать свои проекты, без чьей либо помощи.

    Теги

    С вашего позволения я перейду в программу NotePad++. Она обладает целым рядом преимуществ в сравнении с обычным блокнотом. Сейчас мне очень пригодится подсветка тегов, чтобы показывать вам те элементы, о которых я буду рассказывать. Вообще, если вы собираетесь, изучать html, то я очень рекомендую установить эту бесплатную программу.

    Она не единственная и я могу предложить вам еще несколько если кого-то заинтересуют альтернативы. Мы же перейдем к теоретической части.

    Основные

    Начинается и заканчивается страница с тегов . Они показывают браузеру, что это веб-документ, созданный при помощи html.

    Далее идет или заголовок. В ней располагается самая важная информация о странице, в нашем случае – . Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.

    Именно теги отвечают за начало и конец основной информации о страничке.

    Тег указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style , как мы это делали в примере. Хотя об этом тоже рановато.

    Кстати, Title и H1 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к . Помимо h1, существуют еще и h2, h3,h4.

    В этой же строчке есть открывающийся и закрывающийся . Благодаря этому элементу можно выравнивать текст по середине. Если этот тег удалить, то текст встанет по правому краю.


     — один из немногих единичных тегов. То есть он работает сам по себе. Благодаря этому элементы вы перепрыгиваете с одной строки, на другую. Проще говоря, делаете отступ. Написали его один раз, значит один раз переместились вниз, два, как у меня, и отступ получился чуть больше.

    Картинка

    Далее идет тег img , то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты.

    Первым делом идет alt , то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title . При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.

    Можно было загрузить рисунок в папку сайта и прописать к ней путь, но я пошел простым путем. Среди на Pixabay я нашел картинку, открыл ее в новом окне и вставил ссылку.

    В теге src прописывается путь к картинке. Именно он указывает браузеру, что дальше нужно двигаться, чтобы найти нужное изображение, а в каком направлении искать – пишете вы сами.

    Форматирование текста

    отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.

    помогает выделить текст жирным.

    рисует горизонтальную линию. Он одиночный и используется только в закрытом виде. Если вы напишете несколько раз, то получите ровно столько же горизонтальных полос при открытии страницы в браузере.

    Ссылки

    указывает браузеру, что дальше будет ссылка. Вы хотите перенаправить читателя на другой адрес. Этот тег идет с обязательным атрибутом href=”адрес” . В кавычки вставляется путь, куда браузер должен перенести посетителя страницы. После того, как этот тег прописан, вставляется описание, слово или несколько, при нажатии на которое читателя будет переносить дальше. После того как эти условия выполнены, можно вставлять второй, закрывающийся тег .

    После того как основная часть страницы написана, вы закрываете тег body , так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html .

    Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова «Основы html ». Всего 33 урока помогут вам выйти на новый уровень.


    Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup


    Помимо этого заберите Бесплатную книгу по созданию сайтов ! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.

    Сегодня вы сделали много, ведь первый шаг самый сложный.

    Подписывайтесь на рассылку и группу ВКонтакте , и узнавайте еще: как и зачем нужен движок сайта, что такое блочная верстка и модульная сетка, как правильно писать сайты и многое другое.

    До новых встреч и удачи!