HTML + CSS Синтаксис HTML

Уроки по HTML+CSS: Синтаксис HTML

HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста):

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

Как и любой язык, HTML поставляется с набором правил. Эти правила относительно простые и сводятся к определению границ, чтобы знать, где что-то начинается и где заканчивается.

Ниже приведён пример абзаца в HTML:

<p>Сегодня я изучаю синтаксис HTML на сайте prog-time.ru</p>

То, что вы видите в угловых скобках < и > называется тегами HTML. Они определяют, где что-то начинается и где оно заканчивается.

Я уже создавал запись со справочником по HTML, где находился полный список всех тегов и их значения. Ссылка на данную запись – http://prog-time.ru/spravochnik-vseh-tegov-i-atributov-html/

Каждый из тегов несёт определённый смысл. В нашем случае <р> обозначает абзац текста.

Как правило, они идут парами:

  • открывающий тег <р> определяет начало абзаца;
  • закрывающий тег </p> определяет его конец.

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

При объединении открывающего, закрывающего тегов и всего между ними, вы получите элемент HTML.

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

Группы тегов

Все теги делятся на 2 типа, строчные и блочные.

Блочные элементы, вроде:

  • абзацы <р>;
  • списки: неупорядоченные (с маркером) <ul> или упорядоченные списки (с числами) <ol>;
  • заголовки: от первого уровня <h1> до шестого уровня <h6>;
  • статьи <article>;
  • разделы <section>;
  • длинные цитаты <blockquote>.

Строчные элементы, вроде:

  • ссылки <a>;
  • выделенные слова <em>;
  • важные слова <strong>;
  • короткие цитаты <q>;
  • аббревиатуры <abbr>.

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

Строчные элементы предназначены, чтобы разграничить часть текста и придать ему определённую функцию или смысл. Строчные элементы, как правило, содержат одно или несколько слов.

Атрибуты

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

<a href="Ссылка">Моя новая ссылка</a> 

Атрибуты размещаются внутри открывающего тега в таком формате: <тег атрибут1=”значение” атрибут2=”значение”>.

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

Где писать HTML

Вы, вероятно, сталкивались c простыми текстовыми файлами, теми, которые имеют расширение .txt. Чтобы такой текстовый файл стал HTML-документом (вместо текстового), вам нужно использовать расширение .html.

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

Для того чтобы работать с HTML файлами было удобно, вы можете использовать специальные редактор, которые предназначены для работы с данным типом файлов. Одним, из таких редакторов, является Sublime Text 3, я уже писал о нем с своих предыдущих записях. Вот ссылка на запись – http://prog-time.ru/5-populyarnyh-redaktorov-koda-dlya-web-programmirovaniya/

Что писать в файле

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

<!DOCTYPE html>
<head>
</head>
<body>
</body>
</html>

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

  • <!DOCTYPE html> – это код который говорит браузеру о том что мы используем последнюю версию HTML – HTML5
  • <head> – внутри данного тега располагаются все теги которые отвечают за функциональность сайта. Здесь мы подключаем сторонние файлы, подключаем скрипты, указываем кодировки и многое другое
  • body – внутри этого тега располагаются теги, которые будут выводиться и работы которых мы с вами сможем расмотреть наглядно.

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

<!DOCTYPE html>
<head>
  <title>Мой первый сайт</title>
</head>
<body>
  <p>Это мой первый сайт!</p>
</body>
</html>

Здесь я добавил 2 тега. Первый это <title></title>, он отвечает за вывод названия сайта во вкладке браузера, второй – <p></p>, тег который выводит строку текста, написанного в нем.

Как вы могли заменить каждый из этих тегов имеет закрывающийся тег, то о чем мы говорили ранее. Вся структура HTML кода напоминает “матрешку”. Один тег вкладывается во внутрь другого.

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

Родителем называют тег, внутри которого находится рассматриваемый тег.

Предками называются, теги которые расположены внутри рассматриваемого тега.

Братскими называют теги, которые находятся на одном уровне с рассматриваемым тегом.

Данную связь легко понять по данному примеру:

<article>
  <h1>Известные футбольные цитаты</h1>
  <p>
    Сэр <strong>Алекс Фергюсон</strong> однажды сказал о Филиппо Индзаги: 
    <q>Этот парень должен был родиться в положении вне игры</q>.
  </p>
  <p>
    При критике со стороны Джона Карью, <strong>Златан Ибрагимович</strong> ответил: 
    <q>То, что делает Карью с мячом, я могу сделать с апельсином.</q>
  </p>
  <p>
    <strong>Джордж Бест</strong> сказал: 
    <q>Я потратил много денег на выпивку, девчонок и быстрые автомобили. 
       Остальное я просто промотал</q>, —  
    когда его спросили о его образе жизни.
  </p>
</article>

В этой структуре:

  • <article> является предком для любого другого элемента;
  • <article> является родителем для <h1> и трёх <р>;
  • <h1> и три <р> являются братскими друг для друга;
  • каждый <р> является родителем для <strong> и <q>, которые в них содержатся;
  • каждый <h1><p><strong> и <q> — это всё потомки <article>.

Аналогия с семейным древом также применяется при прохождении нескольких слоёв вложений в HTML:

  • потомок элемента X — это любой элемент внутри X;
  • ребёнок — это просто прямой потомок;
  • предком элемента Y является любой элемент;
  • родитель — это лишь первый прямой предок.

Вот что мы узнали из этого урока

  1. Мы узнали что в HTML есть теги, которые хранят в себе информацию и выводят ее на страницах сайтов. Каждый из тегов несёт определённый смысл.
  2. Что для работы с HTML используются файлы с разрешением .html. Для того чтобы работать с HTML, нужно создать новый документ, прописать в него код и сохранить его в формате .html.
  3. То что в HTML имеется специальная иерархия. Теги делятся на братские, родительские и теги предки. Здесь все относительно, у каждого тега будут свои предки, родители и братья.

 

Оставить комментарий

avatar
  Подписаться  
Уведомление о