Первое, что встретится вам на пути к мастерству разработки интерфейсов для веб — язык разметки 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.
- Первый пункт списка
- Второй пункт списка
- Третий пункт списка
- Первый пункт списка
- Второй пункт списка
- Третий пункт списка
Таблицы
Таблицы — как же без них! Мы же пишем научные статьи — надо всякие выборки писать и т.д. С другой стороны — таблицами можно управлять расположением элементов на странице.
<table>
<tr>
<td>
Измерение
</td>
<td>
Значение
</td>
</tr>
<tr>
<td>
Длина
</td>
<td>
38,5 попугаев
</td>
</tr>
</table>
Что приведёт нас к
| Измерение | Значение |
| Длина | 38,5 попугаев |
Каждый тег tr — новая строка, каждый тег td — новая ячейка строки.
Что же, теперь мы можем сделать свою первую страничку — страницу человека в социальной сети. И да, в рамках этих уроков мы напишем свою социальную сеть. По крайней мере её визуальную составляющую — frontend.
Домашнее задание:
- Изучить, какие атрибуты есть у перечисленных элементов.
- Сходить на fb.me, vk.com или любую другую соц. сеть.
- По образу любого из них сверстать свою страничку.
- Добавить туда в интересы «базовый html».