Предыдущий ролик Следующий ролик  

Видео урок: Изучение HTML

Основы веб-дизайна

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

Это означает, что для размещения контента на странице в нем используются теги, которые впоследствии распознаются как элементы конкретного типа. Элементы - это ключевые составляющие HTML-документов. Большинство из них состоит из открывающего и закрывающего тегов, между которыми впоследствии можно помещать контент. Возьмем, например, вот этот элемент абзаца. В этом случае буква "p", символизирующая тег абзаца, указывает на то, что этот текст относится к абзацу. Обратите внимание, что в закрывающем теге используется слэш, указывающий на закрытие элемента.

Многие путают термины "тег" и "элемент". Термин "тег" используется для обозначения самого тега, в этом случае тега абзаца. Тогда как "элемент" - это сам тег плюс содержимое этого тега. С помощью атрибутов можно передавать больше информации об элементах. Некоторые атрибуты используются для передачи обязательной информации, например, где находится изображение, или на что указывает ссылка. В то время как остальные атрибуты просто помогают придать смысл этому элементу. Как видите, этот атрибут class я использую для дальнейшей идентификации содержимого абзаца.

Таким образом, HTML-документы состоят из сгруппированных определенным образом элементов, позволяющих структурировать контент страниц. Атрибуты можно использовать для дальнейшего раскрытия смысла элементов или для передачи важной информации об элементе в браузер. С учетом этого именно этим моментам я рекомендую вам уделить особое внимание при обучении HTML. Во-первых, изучите основы синтаксиса HTML. Одни теги помещаются в другие в соответствии с определенными правилами, позволяющими управлять процессом структурирования всего документа.

Для управления базовой структурой HTML-файлов и определения тех обстоятельств, при которых необходимо использовать те или иные теги, применяются другие правила. Ознакомьтесь с этими правилами и теми ограничениями, которые касаются структурирования элементов, чтобы создаваемые вами документы были корректны и не содержали ошибок. После этого подучите наиболее распространенные HTML-элементы. Такие элементы как абзацы, заголовки, списки и таблицы составляют основу всех HTML-документов. Если этим элементам уделить внимание в первую очередь, то это избавит вас от необходимости отвлекаться на них по ходу всего процесса обучения. Кроме того, такой подход способствует должному структурированию контента.

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

Вы не только изучаете информацию о каждом отдельном элементе, но и знакомитесь с тем, каким образом они приспосабливаются друг к другу, чтобы обеспечить должную структуру контента. Как известно, не все дизайнеры сходятся во взглядах в вопросе разметки конкретного контента. В основном структура вашего контента будет определяться на основании ваших личных предпочтений. Благодаря исследованию подходов, применяемых другими дизайнерами при структурировании контента, вы сможете сформировать собственное мнение. Кроме того, следует потратить некоторое время на изучение секционных элементов HTML5. Такие элементы как article, nav и section предназначены для создания более выразительных документов.

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