Сделан еще один небольшой шажок. Но шкала прогресса курса его не заметила:) Хотя, если честно, думал, что успею и того меньше.
За предыдущий день удалось закончить еще два урока: «формы и таблицы» и «семантическая структура».
Вот как теперь выглядит блок.
Как работать с формами и таблицами в HTML.
В этом уроке я узнал как нарисовать простейшую таблицу используя HTML. Добавить к этому особо нечего. Вся таблица состоит из четырех тегов: тега самой таблицы <table>, тега строки <tr> и двух тегов ячейки <th> и <td>. Хочу остановиться только на одном моменте, в уроке не было сказано в чем отличие тега наименования столбца <th> от тега ячейки значения <td>. Опытным путем удалось понять, что в ячейках <th> текст выделен жирно.
Вот кусок тренировочного кода:
А так таблица выглядит не странице:
Если и на второй строчки пропишем <th>, то выглядеть будет так:
Естественно, все теги имеют множество атрибутов, но их решили не освещать. Предполагая, что вся кастомизация таблиц ляжет на плечи CSS.
Формы тема более интересная. По сути, это тег, дающий возможность получить обратную связь от пользователя сайта. Как в виде печатной информации, так и в виде установки флажком или выпадающего меню.
Учебный код с формой обратной связи:
В браузере:
Атрибут placeholder отвечает за подсказку в поле ввода. Данный код ничего никуда не отправит, для этого нужно прикрутить скрипт на JS.
К формам так же относиться выпадающее меню и флажки. Для выпадающего меню используется свой тег <select>. Так же хочу отметить, что тег ввода <input> вполне можно использовать и вне общего тега форм <form>. В данном примере его поместили в ненумерованный список.
Урок состоит из интерактивных слайдом и скринкастов написания кода. В конце небольшое домашнее задание с самостоятельной проверкой.
Вот на этом месте меня немного бамбануло…
Мало того, что в приложенном материале нет текста, который надо оттуда скопировать в код, так еще и в проверочном файле код написан, забегая на тему вперед. Ничего критичного, но лишние 15 минут я потерял, разбираясь что происходит…
Откуда взялись 5 часов на урок не понятно. Даже с запинкой на домашке я потратил на него всего часа полтора.
Как построить семантическую структуру страницы.
Тема сама по себе довольно неоднозначная. На этапе учебы мне пока не понятно зачем городить дополнительное разделение кода. Именно кода, на самой странице многочисленные дополнительные семантические теги абсолютно никак не отображаются. В уроке вскользь упоминается, что это нужно в том числе для SEO. Ну поверим на слово. Дальше скорее всего станет понятнее.
Так же оказалось, что почти все ранее используемые теги были тоже семантические, просто они как раз отображались на странице:) На этом уроке я расставлял теги к ранее написанному коду.
Итак, я узнал, что код принято разделять семантическими тегами, а именно:
- <header> - шапка сайта. На ней обычно располагается лого компании и навигация. Чаще всего шапка одна на все страницы сайта. Шапок на странице может быть несколько.
- <main> - основной уникальный контент страницы. Не повторяется на других страницах сайта.
- <footer> - подвал сайта. Там чаще всего располагается дополнительная навигация, информация о компании и контакты. Чаще всего один на все страницы сайта.
- <section> - тег используется для обособления части связанного контента внутри <main>, его нельзя перенести на другую страницу без потери смысла.
- <article> - похож на <section>, но полностью независим. Можно перенести на другую страницу.
- <nav> - тег выделяющий блок кода отвечающий за навигация. Чаще всего находиться в шапке или на боковой панели.
Код с семантическими тегами выглядит примерно так:
Урок так же представляет из себя слайды и скринкасты. В конце небольшое домашнее задание с самопроверкой. На этот раз все материалы корректны. Ушло на урок 1.5 часа.
В целом блок пока выглядит полезным и качественно сделанным. Есть некоторое ощущение, что теории и практики можно чуть побольше. Но, с другой стороны, вряд ли практикующий веб-разработчик все это пишет руками. Сейчас главное дать некоторое понимание основ синтаксиса и структуры кода. Надеюсь, я смогу это узнать на собственном опыте😉