В прошлом уроке мы начали создавать сайт-портфолио, использовав за основу скелет сниппет. Сегодня же с помощью html разметки оформим наше портфолио.
Все использованные теги нам уже знакомы:
- <h1> - тег главного заголовка, с самым большим шрифтом
- <div> - универсальный блочный элемент, служит для выделения фрагмента текста, с целью его дальнейшего форматирования, кстати, в нашем случае можно вообще убрать этот тег
- <h2><h3> - заголовки шрифтом поменьше
- <ul> - тег списка, рассматривали в этом уроке
- <li> - теги пунктов списка
- <a href="*" > - тег ссылки с пустым (я поставил просто звездочку) значением, т.е. в данном случае ссылка никуда не ведет
- <table> - тег таблицы, подробнее изучали тут
- <tr> - строка таблицы
- <td> - ячейка таблицы
Давайте немного изменим портфолио для лучшего вида
Первым делом убрал тег <div>, который, как мы видим, в данном случае оказался не нужен. Заголовок <h1> выровнял по центру с помощью знакомого атрибута align со значением center.
Для придания большей важности заголовку выделим его чертой с помощью также знакомого по прошлым урокам одиночного тега <hr>. Причем сделаем его красным с помощью атрибута color со значением red. Значение можно записывать с помощью шестнадцатиричной системы исчисления либо с помощью названия.
К изображению добавим альтернативное отображение alt (alternative), оно понадобится если картинка из источника scr(source) по каким-то причинам не загрузится или будет грузится очень медленно. Помню раньше, когда интернет был медленным, при загрузке картинки мы первым делом видели именно атрибут alt, а потом уже медленно прогружалась сама картинка.
При наведение курсора на какой-либо элемент если у него установлен title, покажется содержимое атрибута в виде всплывающей подсказки. Кроме того, что он несет подсказку для пользователя, для картинок он еще полезен и тем, что помогает поисковикам лучше ранжировать содержимое вашего сайта. Если, например, в яндекс.картинках искать гриб, то поисковик как раз таки выдаст все изображения, в значении title которых будет слово гриб.
Насколько для тега <img> важен атрибут src, настолько для тега <а> важен атрибут href, именно в нем мы указываем адрес документа, на который хотим перейти. Используем атрибут target со значением _blank, чтобы ссылка открывалась в новой вкладке. Для target возможны также значения _self (загружает страницу в текущее окно), _top - в новом окне. Для ссылки на ВК снова использовал атрибут title, чтобы всплывала подсказка для пользователя при наведении.
Как я уже говорил, разработчики давно пришли к пониманию того, что нужно разделять между собой структуру, внешний вид и функционал. Т.е. стараться использовать независимо друг от друга html, css и js. Поэтому чтобы создать какие-то точки связи между этими тремя технологиями есть два специальных атрибута: id и class. id это уникальный индетификатор документа на страничке. Он может быть присвоен любому тегу, но его значение для каждого тега должно быть уникальным, т.е. может встречаться только один раз. Я присвоил аватарке айдишник, в дальнейшем (в следующих уроках) мы сможем обращаться по этому имени из css или js. Поэтому рекомендуется давать какие то осмысленные имена для своего же удобства. Также изображение я поместил в рамку шириной 2 пикселя с помощью атрибута border.
Второй важный атрибут это class, одно из его применений - это связать какие-то теги с определенным целевым оформлением. На данном примере мы видим что у нас есть несколько заголовков и, например, мы хотим выделить их все по особенному. Если каждому из заголовков мы будем применять специальный атрибут, копировать его сто раз, вставлять, а потом захотим изменить стиль всех наших заголовков, то нам придется переделывать все заново, это очень неудобно и неправильно, для этого как раз разделяют между собой html и css. Т.е. нам достаточно, как говорят, повесить класс на заголовки и разом присвоить им стиль. Чтобы поставить курсор сразу в нескольких местах в sublime зажимаем ctrl и мышкой отмечаем места, где будем писать, т.о. я не копировал-вставлял class="section-title" для трех тегов <h2>, а писал один раз. В имя класса также принято вкладывать какой-то смысл, здесь я назвал class-selection (выбор класса). Сейчас нам нужно немного забежать вперед и воспользоваться технологией css. Покажу как одним махом можно сделать все заголовки синими. Для этого подключим файл стилей style.css Вспоминаем про теги верхнего уровня из первого урока, в частности про тег <head>, в котором нужно разместить тег <link>, служащий для подключения сторонних файлов. Атрибут rel служит для определения отношений между текущим документом и документом на который ведет ссылка. В данном случае мы говорим, что ссылка ведет на таблицу стилей. В атрибуте href указываем путь к нашему файлу style.css. Создадим его ctrl+n ctrl+s, пишем имя style.css и готово.
Далее покажу группу атрибутов специально для таблиц, т.е. для тега <table>. Их достаточно много, большинство из них служит для визуального форматирования. Повторюсь, что все атрибуты выучивать не стоит, всегда можно и нужно пользоваться справочниками, так, например, если ты встретил незнакомый атрибут, то смело вбивай его в поиске и смотри для чего он служит и к чему относится. Как говорится инженер не должен все знать, инженер должен знать где найти. К верхнему ряду таблицы добавим фон чтобы лучше выделить названия колонок с помощью атрибута bgcolor
Для всей таблицы добавим внутренние поля вокруг содержимого ячеек размером 10 пикселей и отступ между ячеек шириной в один пиксель. Для этого служат атрибуты cellpadding и cellspacing соответственно.
Кстати атрибут bgcolor применим не только к таблицам, с помощью него можно задать фон для всей страницы. Для этого его нужно добавить к тегу <body>
Напоследок расскажу еще об одном атрибуте, который может встретиться тебе в каких-то проектах, а может ты и сам будешь его использовать, когда освоишь html, css и js в полной мере, это атрибут data. В основном его используют, чтобы передавать какие-то данные из html в js. Его имя формируется следующим образом: сначала data, затем через тире какое-то имя, в качестве значения мы можем передавать все, что угодно. Представим, что, например, для каких-то ограничений или действий над таблицей в данной ячейке максимальное значение может быть равным 200, тогда запись будет выглядеть вот так
