×
Фото HTML — базовая верстка

HTML — базовая верстка

Первое, что встретится вам на пути к мастерству разработки интерфейсов для веб — язык разметки HTML. Придуман он давно, во времена, когда tex был популярен, а интернета в его текущем понимании ещё не было.

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

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

Для начала откроем исходный код страницы сайта. Для этого нам потребуется супер-программа — Chrome-браузер:

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

В правой верхней области экрана можно увидеть код страницы. Она полна различных <html></html>-тегов. Именно эти теги и делают из простого текста нечто большее — гипертекст.

Подробнее изучить — какие теги за что отвечают, вы сможете, воспользовавшись «стрелочкой» слева от вкладок «elements», «console», «sources», «network» и «perfomance» и сайта htmlbook (это не реклама, просто лень расписывать все теги).

Чтобы проверять, что я не вру — создайте файл 1.html, откройте его текстовым редактором и пробуйте всё прямо там: написали что-то, сохранили, посмотрели в браузере.

Для начала подойдут следующие теги

<h1>-<h6> – это заголовки.

Вернёмся в суровые 90-ые, когда html использовался для научных статей. Само собой там были заголовки и подзаголовки. Ну и так уж повелось, что есть заголовки 1-го уровня — самые главные — <h1>Название статьи</h1>. Дальше — подзаголовки — <h2>О чём статья</h2>. И, «очевидно всем», 6 уровней заголовков «хватит всем». Ну да Винт Серф им судья.

Ах да, большинство тегов — как кавычки: «кавычки открываются, кавычки закрываются».

Примеры:

<h2>Тег заголовка второго уровня</h2>

Заголовок второго уровня

<h4>Заголовок четвертого уровня</h4>

Заголовок четвертого уровня

Еще для форматирования текста часто служат теги – <b>, <strong>, <em>, <i> — жирный, важныйвыделенный, наклонный. Казалось бы, по 2 типа на каждое преобразование… Так и есть, но если обрести синдром поиска глубинного смысла, таки можно найти различие.

Если же несколько тегов используется для одного блока текста, тот тут как со скобками в математических задачках — (a - b * [c + (d / e)]) — вложенность сохраняется и важна.

<br> – переводит строку. Закрывающий тег не нужен. Если вам нужен большой разрыв между строками можете использовать несколько таких тегов, например, <br><br><br><br><br> – пять переводов строки.

Для форматирования текста используются двусторонние теги <p>, <pre>:

<p>Текст</p> – параграф.

<pre></pre> – отформатированный шрифт. Между этими тегами текст выведится так как напечатам (с пробелами, переводами строки).

Вставка объектов

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

Чтобы вставить картинку нужно создать код:

<img src="http://900913.ru/wp-content/uploads/2017/05/DQFEw3ulTds-825x510.jpg">

Где «http://900913.ru/wp-content/uploads/2017/05/DQFEw3ulTds-825×510.jpg» — адрес картинки с котиком. «img» — это тег, не требующий закрытия. Всё необходимое — уже в нём: «src» — атрибут, значением которого выступает ссылка.

Чтобы вставить ссылку:

<a href="http://900913.ru">
  Тут хорошему не научат
</a>

Тут http://900913.ru — сайт, на который ведет ссылка, лежит в атрибуте. Текст ссылки — между открывающим и закрывающим тегом «Тут хорошему не научат». Казалось бы — бред! Ничего, привыкнете.

Списки

Списки создаются следующими html-тегами:

<ul>
  <li>Первый пункт списка</li>
  <li>Второй пункт списка</li>
  <li>Третий пункт списка</li>
</ul>

ul — это сокращение от unordered list. Ещё есть ol — ordered list. li — всего лишь list item.

  • Первый пункт списка
  • Второй пункт списка
  • Третий пункт списка
  1. Первый пункт списка
  2. Второй пункт списка
  3. Третий пункт списка

Таблицы

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

<table>
  <tr>
    <td>
      Измерение
    </td>
    <td>
      Значение
    </td>
  </tr>
  <tr>
    <td>
      Длина
    </td>
    <td>
      38,5 попугаев
    </td>
   </tr>
</table>

Что приведёт нас к

Измерение Значение
Длина 38,5 попугаев

Каждый тег tr — новая строка, каждый тег td — новая ячейка строки.

Что же, теперь мы можем сделать свою первую страничку — страницу человека в социальной сети. И да, в рамках этих уроков мы напишем свою социальную сеть. По крайней мере её визуальную составляющую — frontend.

Домашнее задание:

  1. Изучить, какие атрибуты есть у перечисленных элементов.
  2. Сходить на fb.me, vk.com или любую другую соц. сеть.
  3. По образу любого из них сверстать свою страничку.
  4. Добавить туда в интересы «базовый html».

Будь первым – оставь комментарий!

Фото Frontend для непростых людей
Предыдущая запись:
Frontend для непростых людей
Фото CSS — стили
Следующая запись:
CSS — стили