Изучение html5 и css с нуля. Основы html для начинающих на понятном языке. Я востребован на рынке труда, несмотря на возраст, у меня появилось четкое понимание, в каком направлении мне дальше двигаться

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

Класснуть

Запинить

Для изучения урока, скачайте архив с необходимыми файлами.

HTML - это язык разметки документов . Правильное произношение - Эйч Ти Эм Эль .

Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

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

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

Да, простой набор и форматирование текста в офисных приложениях не имеют ни чего общего с программированием. Но наблюдательный читатель заметит важную деталь - в текстовом процессоре мы набираем, редактируем и форматируем текст и картинки с помощью визуальных кнопочек и меню, но почему же HTML код пишется вручную? Зачем изучать так много технических деталей написания разметки для документа?

На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.

Этакий Word для HTML. Такие визуальные редакторы называются:

Я их называю "вузивуги". Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно - не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее - у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

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

  Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.

  Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.

  Структура документа HTML

  Рекомендую для занятий скачать и установить редактор Sublime Text . Крайне не рекомендую использовать для HTML верстки встроенный в Windows "Блокнот", если вы не хотите сломать себе психику на ранних порах изучения HTML.

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

  Давайте создадим на компьютере первоначальный шаблон - файл index.html , откроем с помощью редактора и вставим в него следующий код:

  Заголовок Тело документа Обратите внимание, документы HTML имеют расширение .html .

  Итак, по порядку из примера.

  - тип документа (доктайп)

  Данная конструкция всегда указывается в начале документа для правильного "понимания" браузером того, какая версия HTML используется при построении документа.

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

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

  - начало документа

  Первый тег, который мы встречаем после доктайпа, это .

  HTML тег - структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.

  Хотелось бы отметить, что изучение HTML не такое сложное занятие, как может показаться на первый взгляд. Выучить используемые в разметке документа теги - не такая уж и большая нагрузка на мозг.

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

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

  Тег

  Далее, мы видим тег , который содержит другие, пока не понятные нам элементы. Содержит другие элементы - это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

  содержание или другие теги

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

  Тег - заголовок документа Заголовок

  Заголовок является обязательным тегом , содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег должен находиться в теге . Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.

  Метатег

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

  Фавиконка (favicon)

  Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) - миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка - это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки - это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

  CSS стили документа

  Подключает к документу CSS файл со стилями оформления HTML.

  CSS - каскадные стили оформления HTML документа. У каждого тега, который находится в теге , имеется набор свойств, такие как - цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция подключает внешние файлы к документу HTML, в том числе и стили CSS.

  Примечание: свойство href конструкции указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico , находятся в той-же папке, что и файл index.html . не имеет закрывающего тега.

  Тег

  Тег содержит код или ссылку на файл javaScript и чаще всего используется внутри тега , хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом .

  В нашем примере подключается внешний файл script.js , который находится в той-же папке, что и основной файл index.html.

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

  Тело aka body

  Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

  Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.

  Тег может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.

  Тег	Описание
  	Тег для создания ссылок в документе. Пример: текст ссылки Атрибут href указывает документ, на который будет вести данная ссылка.
  ,	Делает текст курсивом или жирным (акцентируемым). Пример: текст курсивом жирный (акцентируемый) текст
  , , , , ,	Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h1 до h4. В документе должен быть только один заголовок, выделенный тегом h1, как главный заголовок документа. Примеры: Заголовок первого уровня Заголовок второго уровня Заголовок третьего уровня ... и т. д.
  ,	Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег Примеры: Элемент маркированного списка 1 Элемент маркированного списка 2 Элемент нумерованного списка 1 Элемент нумерованного списка 2
  	Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно. Пример: Внешний вид HTML разметки во многом определяется CSS стилями. Тем не менее, некоторые веб-мастера предпочитают не использовать стили на первых этапах проекта.
  	Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст - атрибут "alt". Данный тег "самозакрывающийся". Пример:
  + +	Формы и элементы ввода. Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача - отправка данных на сервер. Пример - простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст: Текст сообщения
  	Определяет подстроку в строке. Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере. Пример: Изучение HTML, в большинстве случаев, не вызывает ни каких сложностей у новичков.
  ,	Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег. Примеры: Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере.
  	Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие "дивной" верстки - это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги . Пример: Текст во вложенном блоке Все элементы , в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег .
  	Данный тег загружает внешнюю страницу в документ. Пример:

  Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное - понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.

  Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.

  Например, не:

  Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.

  Итак, теперь мы знаем некоторые основы HTML : какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному - а именно, печенькам.

  Практическое задание по HTML верстке

  Если вы еще не скачали архив с примерами, сделайте это . Для примера, можете подглядывать в файл example.html, который также находился в архиве.

• Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
• Создайте первоначальную структуру документа с доктайпом, тегом , содержащим и и перейдите к редактированию содержимого тега ;
• Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

На этом урок по основам HTML окончен, в следующем уроке "Основы CSS " мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.

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

Hyper Text Markup Language — «HTML» (язык разметки гипертекста ) многие уже давно перестали его считать просто языком программирования. Так как само понятие HTML включает в себя различные методы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и много всего другого. Пользователь, освоивший этот язык, приобретает возможность делать серьезные вещи простыми методами и, главное, быстро, что в современном мире считается очень хорошо!

На языке HTML можно создавать собственные мультимедийные продукты и распространять их на cd-дисках, и все эти продукты, выполненные в виде наборов HTML-страниц, не требуют разработки специализированных программных средств, так как все необходимое для работы с данными (Web-браузеры ) стали частью стандартного программного обеспечения большинства персональных компьютеров.

• Элемент (element ) — конструкция языка HTML. Это объект, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста - возможность вложения элементов.
• Тег (tag ) — начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
• Атрибут (attribute) — параметр или свойство элемента. Другими словами это переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
• Гиперссылка — часть текста, которая является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
• Фрейм (frame ) — этот термин имеет два значения. Первое - область документа со своими полосами прокрутки. Второе значение - одно изображение в сложном (анимационном ) графическом файле (похожее на кадр из кинофильма). Также возможно вместо термина «фрейм» в специальной литературе и локализованных программных продуктах можно встретить термин «кадр» или «рамка».
• HTML-файл или HTML-страница — документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения htm или html.
• Апплет (applet ) — программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
• Скрипт или сценарий (script ) — программа, включенная в состав Web-страницы для расширения ее возможностей.
• Расширение (extension ) — элемент, не входящий в спецификацию языка, но использующийся, обеспечивая возможность создания нового интересного эффекта форматирования.
• CGI (Common Gateway Interface ) — общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц. Например, без таких программ невозможно создание интерактивных страниц.
• Код HTML — гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.
• Web-страница — документ (файл), подготовленный в формате гипертекста и размещенный в World Wide Web.
• Сайт (site ) — набор Web-страниц, расположенных в одном месте и связанных между собой.
• Браузер (browser ) — программа для просмотра Web-страниц.
() — копирование файлов с сервера на компьютер-клиент.
• URL (Uniform Resource Locator ) или универсальный указатель ресурса, адрес некоторого объекта в Интернете, т.е. типичный URL для WWW, имеет вид: http://www.название.домен/имя файла.

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

Несмотря на то, что спецификация HTML является стандартом, этот язык дополняется новыми элементами (расширениями ). Поэтому некоторые Web-страницы удобнее просматривать при помощи определенных браузеров. Расширения создаются только известными фирмами, которые разрабатывают программное обеспечение для WWW, а рядовые пользователи могут совершенствовать свои Web-страницы при помощи программирования. Аплеты позволяют снять ограничения HTML и дают простор фантазии разработчика.

Версии HTML

Первая версия языка HTML была разработана в начале 90-х годов Тимом БенерсЛи для одного из распространенных в прошлом браузера Mosaic. Но тогда ни для браузера, ни для самого HTML еще не нашлось хорошего применения. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Но распространение язык HTML получил благодаря версии 2.0, которая появилась в июне 1994 года. И с того момента происходят возрастание популярности WWW по всему миру. Стандарты, включенные в версию 2, настолько прижились что используются и по сей день.

HTML версия 3.0, которая появилась примерно год спустя, в ней была реализована возможность прорисовки математических символов (знаков интеграла, бесконечности, дроби, скобок и т. д. ) при помощи элементов языка. Но развитие этого проекта затормозилось и не получило дальнейшего распространения.

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

Официальная спецификация HTML 4 (Dynamic HTML ) разрабатывалась в 1997 год. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет web-программирования. Это оказалось намного более эффективным, чем вводить в язык все новые элементы.

Структура Web-страницы

Ниже представлен код Web-страницы, который выполнен на языке HTML, и на примере этой страницы мы разберем ее структуру, но для начала скопируйте весь код в обычный текстовый блокнот и нажмите «Сохранить как» и сохраняйте уже файл с расширением html, т.е. после названия напишите.html

Структура web документа Переход в Конец документа Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6 Здесь расположена первая ссылка Здесь должен располагаться
основной текст web страницы.
А я, например, вставлю сюда
несколько переносов,
для того чтобы Вы могли
наглядно наблюдать,
как у Вас работает
ссылки внутри документа,
а то если у Вас будет большое разрешение,
Вы просто не заметите переход по ссылкам


Обозначение документа на языке HTML. Одно из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и конечным тегам должна находиться вся Web-страница. По идеи, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY FRAMESET и других, определяющих общую структуру Web-страницы. Естественно, что конечным тегом заканчиваются все подобные документы.

< head >

Область заголовка Web-страницы. Другими словами, ее первая часть. Так же, как и предыдущий элемент, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir.

< title >

Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Данный элемент очень сильно влияет на продвижение в поисковой системе т.к. поисковые системы уделяют особое внимание на тег TITLE. Мой совет: никогда не делаете очень длинный текст в этом теге (65 символов достаточно ).

Этот элемент содержит служебную информацию, которая не отражается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент МЕТА содержит два основных атрибута, первый из которых определяет тип данных, а второй - содержание.

< body >

Этот элемент объединяет в себе гипертекст, который определяет собственно Web-страницу. Это та видимая часть документа, которую разрабатывает авто страницы и которая отображается браузером. Соответственно, конечный тег этого элемента надо искать в конце Web-страницы. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального тега элемента BODY можно расположить много атрибутов, которые служат для установки всей страницы целиком. Рассмотрим их по порядку.

Один из самых полезных атрибутов данного тега, который оказывает свое влияние на дизайн страницы это

background=»путь к файлу фона»

Более простое оформление фона сводится к заданию его цвета

bgcolor=»#FFFFFF»

Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов (rbg).

Так как можно изменить фон страницы можно и изменить цвет текста. Для этого имеется следующий атрибут

text=» #RRGGBB»

Для задания цвета текста гиперссылок используется следующий атрибут

link=»#RRGGBB»

Можно также указать изменение цвета для последней выбранной пользователем гиперссылки

Элемент заголовка. Различают шесть уровней заголовков, которые обозначаются следующим образом.
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок

Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:

align=»left» align=»center» align=»right»

Для создания нового абзаца используется тэг

А для перехода на новую строчку без создания абзаца — тэг
т.е происходит перенос. Эти тэги закрывать не обязательно. Конечно, если Вы не используете в тэге

Элемент ALIGN, которым может задавать выравнивание абзаца:

По левому краю

По центру

По правому краю

Текст, находящийся между этими элементами выравнивается по ширине

Горизонтальная линия (horizontal rule ) — очень распространенный элемент. Во-первых, потому что с его помощью очень легко и удобно делить страницу на части. Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Элемент не имеет конечного тега, но имеет ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:

• align=»left»
• align=»center»
• align=»right»
• align=»justify»

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

Произвольный текст

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

Для вставки изображений (картинки ) в HTML документ используется следующий тег (представлено полное описание атрибутов данного тега ):


Списки

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

Самым распространенным является ненумерованный список (unordered list ). Он представлен ниже:

• Пункт 1 списка
• Пункт 2 списка
• Пункт 3 списка

Элемент ul является своеобразным выделением списка. Он позволяет разделять один список от другого. Элемент liобозначает каждый из пунктов.

Таблицы

Являются одним из самых необходимых средством форматирования данных на Web-странице. Основное удобство заключается в том, что браузер прорисовку всей таблицы берет на себя. Размер рамки может быть автоматически согласован с размером окна просмотра в браузере и, разумеется, с размером находящихся в ячейках таблицы строк текста и рисунков. По мимо всего прочего, таблицы позволяют решать многие дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и так далее. При создании таблиц применяется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов располагаются элементы для описания каждой ячейки в строке (ТD,ТН).

Для того чтобы разобраться в структуре существующей таблицы или разработать новую таблицу, существует одно правило, что последовательность элементов описывает таблицу сверху вниз и справа налево. Например, если после элемента TABLE указан элемент TR, это указывает на то, что начинается описание новой строки таблицы. Все, что расположено за этим элементом, будет размещено в одной строке (справа налево). Это может быть последовательность элементов TD (ячеек ), другая таблица и так далее. После того как появится новый элемент TR, начнется описание следующей строки, и т. д. до конца таблицы (тега ).
Таблицу можно выровнять по горизонтали при помощи атрибута align:

• align=»left» — влево;
• align=»center» — по центру;
• align=» right» — вправо.

Ширину таблицы можно задать точно в пикселях или в процентном отношении к ширине страницы в окне браузера. Например: width=400 или width=50%

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

Сценарии

Практически все web – мастера хотят, чтобы их страницы на сайте имели современный вид, были многофункциональными, красивыми и динамичными. Стандартными средствами HTML это невозможно, поэтому применяются разные средства: апплеты, объекты, каскадные таблицы стилей и так далее. Но самым популярным и распространенным видом (приемом ) является использование сценариев.

Сценарий — это программный код, который включается в текст страницы в виде исходного текста и выполняется браузером при просмотре страницы. Сценарий может быть написан на языке JavaScript, разработанном фирмой Netscape, или на Visual Basic Script (VBScript ), разработанном фирмой Microsoft.

Данный тег позволяет отделить текст программы-сценария от другой информации страницы. Тег SCRIPT обязательно включает в себя атрибут language, который определяет язык и может принимать следующие значения:

• javascript — код на языке JavaScript;
• vbscript — код на языке VBScript.

Атрибут type тоже может указывать на тип языка, хотя его применение не является обязательным. Чтобы не нарушать все правила, внутри элемента можно поместить такое определение:

type=»text/javascript»

Одной из самых прикольных особенностей сценариев является возможность изменения содержимого страницы в результате выполнения программы. Но это только особеность, а не правило. С помощью атрибута defer (который не принимает никаких значений) можно «сказать» браузеру, что таких изменений внесено, не будет. В некоторые случаях это позволяет ускорить загрузку страницы.

Из стандартных атрибутов можно использовать атрибут charset.

Тег SCRIPT (или ряд таких элементов ) может располагаться как внутри элемента HEAD, так и внутри элемента BODY. Если сценарий находится внутри элемента BODY, возможна и такая ситуация, когда какой-нибудь браузер, не поддерживающий элемент SCRIPT, воспримет программный код как обычный текст и выведет его на экран. Чтобы этого не случилось, код сценария вводят как комментарий:

—
—
—

Все современные браузеры распознают этот прием и игнорируют символы комментария. Если в тексте сценария нужно ввести комментарий, то для этого используют иное обозначение: в начале строки вводят два слеша //.
Программный код сценария выполняется в момент загрузки страницы, т.е. когда на экране еще видно ее содержание. Ниже представлен пример простейшего сценария (вывод сообщения в окне ).

—
—
—
— Просто сценарий
—
— alert(«Вы написали свой первый сценарий!»)
—
—
—
—

Это простая страница, но она включает сценарий из одной строки. С помощью метода alert перед загрузкой выводится сообщение. И оно будет висеть до тех пор, пока пользователь не нажмет на кнопку ОК, загрузка не будет продолжена.
Возможен случай, например страница, будет просматриваться в браузере, не поддерживающем сценариев, для этого предусмотрен элемент NOSCRIPT. Современные программы просмотра игнорируют его содержимое. Этот элемент можно использовать несколькими методами. Для начала, внутри него можно показать объявление наподобие следующего: «Ваш браузер не может выполнить сценарий, необходимый для просмотра этой web-страницы! » Во-вторых, внутри элемента можно разработать упрощенную версию страницы, без скриптов. В-третьих, можно создать ссылку на другой HTML-документ. Элемент NOSCRIPT должен обязательно снабжаться конечным тегом.

Вот мы с Вами и рассмотрели основы такого языка WEB-программирования как HTML. Даже после прочтения этой небольшой статьи Вы уже имеете представление, и даже возможность программировать на этом языке. Желаю удачи!

Песочница

Леонид Якубович 26 мая 2015 в 11:18 Обучение HTML/CSS/JS
• CSS ,
• HTML ,
• JavaScript
Youtube
• www.youtube.com/user/agragregra - очень интересный канал, который поможет вам набить руку по созданию сайтов различной сложности с нуля;
• www.youtube.com/user/ArtSorax - много полезного материала для начинающих.Упор делается на CSS и JS;
• www.youtube.com/user/WebMagistersRu - с этого канала лично я начала знакомство со средой веб-разработки. Все рассказано доступным и понятным языком, основа основ, так сказать.
• www.youtube.com/user/loftblog - команда LoftBlog берет интервью у начинающих и состоявшихся IT-специалистов и разработчиков, а так же проводят видео обучение;
• www.youtube.com/user/TheSWAT727 - видеоканал содержит в себе информацию и обучающие материалы по Web-разработке в целом, охватываю Front-end, Back-end, обзоры текстовых редакторов и прочую полезную информацию для начинающих разработчиков и дизайнеров.
Интернет-ресурсы
• htmlbook.ru - святыня для начинающих специалистов. Данный ресурс содержит огромное количество информации в доступной и понятной форме + форум. Именно с этого я советую начинать знакомство с HTML/CSS;
• webdesign-master.ru - познавательный сайт для более глубокого ознакомления с web-дизайном и версткой;
• learn.javascript.ru - название сайта говорит само за себя. Советую начать обучение после ознакомления с основами HTML5/CSS3.
Сервисы
• www.codecademy.com - англоязычный сервис, где можно проверить свои знания на практике. Все интуитивно понятно, глубокие познания английского языка не потребуются;
• htmlacademy.ru - русскоязычный сервис, где упор идет на практику + немного теории. Очень интересный ресурс, курсы и задания;
• jsfiddle.net - так сказать «песочница» для web-разработчиков. Здесь в режиме онлайн можно код и тут же смотреть результат. Сервис будет вам помощником по указанию ошибок;
• validator.w3.org - здесь можно проверить свой кода на валидность, что бы исправить свои ошибки или недочеты кода HTML;
• jigsaw.w3.org/css-validator - аналогичный сервис, предназначенный для проверки на валидность CSS кода.

Итог
В интернете очень много полезной, правильной и нужной информации, но бесполезной больше. Учитесь, практикуйтесь, пишите код.

Теги: Обучение, материал, сайты, разработка сайтов

Данным циклом я хочу открыть серию уроков, посвященных HTML . Я принял такое решение, потому что мне хотелось бы попробовать обучить создавать пользователей сайты с нуля. Такая мысль была у меня в голове уже довольное долгое время. Лишь вставал вопрос, с чего начать, с HTML или непосредственно приступить к установке движка и дальнейшей его настройки.

Но если начинать с изучения движка, то некоторая часть пользователей, которая не знает HTML , окажется обделена. Поэтому я решил начать с основ и сделать это так, чтобы даже любой новичок мог разобраться что да как.

Итак, что же такое HTML ?

Сама аббревиатура расшифровывается как Н урегТ ехt M arkиp L aпguage (язык гипертекстовой разметки ).

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

Предлагаю для начала рассмотреть пример самой простой веб-странички , которая может быть. Сейчас вы не должны заострять свое внимание на том, что обозначают те или иные тэги . Всему свое время, для начала просто обратите внимание на то, где что находится в коде и как это всё соотносится с тем, что отображается в браузере. Рассмотрим пример документа HTML :

Заголовок странички Один день из моей жизни Подготовка к концерту

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

Репетиция

Всё прошло без сучка и задоринки. Из нашей команды никто не сбивался с ритма, и как оказалось все напрасно волновались.

Концерт

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

Для начала вам надо будет набрать этот текст в каком-нибудь текстовом редакторе (наиболее удобным я считаю является Notepad ++ ) и сохранить файл под именем index .html где-нибудь у себя на диске. При двойном щелчке на сохраненном файле у вас откроется страничка примерно такого вида.

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

Посмотрите на исходный код. Как вы могли уже заметить, в нем перед словом “Один”, есть небольшой отступ. Однако браузер его не учел, он просто его проглотил молча, как будто и не было его никогда. Более того, если вы попробуете поставить множество пробелов между словами, то они все будут восприняты браузером как один пробел, - у HTML есть такая особенность.

И вот ещё такой совет, - когда пишите HTML -код, приучайте себя к тому, чтобы делать отступы в тех тэгах, которые являются вложенными в другие. Например, тэги title и body вложены в тэг html . Значит, когда будете писать эти тэги, то не забывайте делать соответствующие отступы. Обычно они делаются с помощью двух пробелов, либо табуляции, - это уже дело вкуса. Зачем это нужно? Сейчас, в том небольшом кусочке документа, который я привёл как пример выше - информации немного, поэтому и запутаться там довольно проблематично. Однако, если на страничке будет находиться множество вложенных элементов, то не будет ничего проще, как заплутать в этом огромном коде и с трудом сообразить, в какой части документа вы сейчас находитесь. Так что лучше приучать себя к хорошему стилю сразу, потом вы это сами поймете и вам это сыграет в дальнейшем хорошую службу.

Стоит также указать и самый необходимый минимум тэгов, которые должны быть в HTML -документе. Я говорю про эту часть:

Но даже если этой части и не будет, то большинство браузеров посмотрит на все это сквозь пальцы и всё равно отобразит вашу страничку. Однако такой фривольный стиль написания кода, при котором человек пропускает большое количество тэгов, является дурным тоном написания, поэтому желательно, чтобы все эти элементы были на вашей странице в любом случае. Иначе это может грозить проблемой совместимости с другими браузерами, что в результате сможет повлиять на внешний вид вашего сайта, и как следствие – посещаемости.

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

А теперь попробуем разобрать сами, какой тэг нашего примера выше за что отвечает.

Тэг html означает, что начинается вывод html кода.

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

body – начинается основная часть документа.

h 1 – заголовок.

h 2 – подзаголовок.

p – абзац.

На этом пожалуй всё! Если это был ваш первый HTML -документ, то я вас поздравляю! Да, он выглядит не так здорово, как нам бы того хотелось. Но тем не менее, у нас есть материал, над которым мы уже можем работать. А в следующих уроках, всё будет ещё интереснее, и мы потихоньку коснёмся работе с каскадными таблицами стилей (CSS ) .

• < Назад

Для комментирования, вам необходимо зарегистрироваться.

Вопрос: Опишите себя в начале пути?

Ответ: В начале пути у меня было огромное желание сменить основную профессию на более интересный и денежный род занятий .

Вопрос: Опишите себя сейчас?

Ответ: Сейчас у меня этой решимости только прибавились. Имея за плечами больше 20 лет педагогического стажа, поняла, что это совсем не то, чем мне хочется заниматься сейчас и в дальнейшем. Совсем уходить из преподавания мне бы не хотелось. Идеальный вариант: остаться работать на 0,25 ставки, а остальное время заниматься разработкой сайтов на заказ. Тем более сейчас, когда уровень знаний значительно вырос по сравнению с началом пути.

Вопрос: Какие мысли у Вас возникли?

Ответ: Очень крутой проект. Нужно познакомиться с ним поближе. Обязательно воспользоваться материалами вашего проекта.

Вопрос: Что Вам понравилось?

Ответ: Понравилось качество курсов, их оформление, профессионализм авторов не вызывает сомнений .

Вопрос: Какие у Вас были ощущения?

Ответ: Полный восторг от процесса изучения.

Вопрос:

Ответ: Курсы помогли систематизировать разрозненные знания, и появилась уверенность, что у меня все получится .



Мне вас посоветовал мой хороший знакомый, который уже был на тот момент вашим клиентом

Вопрос: Жизненный опыт?

Ответ: Так уж получилось, что я пошёл учиться по специальности программиста практически случайно (это была вторая специальность по приоритетам). После обучения посчастливилось сразу устроиться программистом 1С, в итоге я задержался в этой сфере на целых 5 лет.

В итоге, когда в этом стало совсем скучно ковыряться, решил кардинально сменить профиль деятельности и стал ассистентом режиссера на региональном ТВ.

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

Первым коммерческим опытом веб-разработки был проект, который я разрабатывал на Joomla, это было долгое, трудное, малоденежное занятие, но я выдержал этот период, набрался опыта и начал понимать, как работать на результат, и как общаться непосредственно с заказчиком. Далее был самостоятельный опыт разработки пары магазинов на Joomla+Virtuemart, знания и решения черпались непосредственно с курса «Интернет-магазин на Joomla» (https://сайт/jshop/).

Затем в жизни случился крутой поворот, я заключил первый полноценный контракт с IT-компанией. После налаживания всех внутренних процессов и понимания стратегии компании, у меня появилось время для дальнейшего саморазвития в области веб-разработчика..

Вопрос:

Ответ: В этом плане сомнения были минимальными, и только в одном - насколько быстро окупятся потраченные средства. А в том, что они окупятся, была полная уверенность.

Вопрос: Назовите самые значимые для Вас убеждения и ценности в жизни в целом и веб-разработке в частности?

Ответ: Главное в жизни - это любовь. Что касается веб-разработки - постоянное развитие и принятие новых вызовов.

Вопрос:

Ответ: Была основная проблема: так как я был полным новичком в мире веб-разработки - у меня не было четкого структурированного плана о том, с чего начать, и в каком направлении действовать. После приобретения курса по PHP я узнал все основы этого языка, как строить приложения, и от этого уже появилось понимание и видение, как и куда это все развивать.

Вопрос: Каких успехов Вы достигли?

Ответ: Моя разработка стала более быстрой и качественной, я овладел несколькими технологиями, избавился от походов в офис, да и вообще профессия веб-разработчика позволяет мне зарабатывать в комфортных для меня условиях и в удобное время.

Вопрос: Какие перемены к лучшему произошли в жизни?

Ответ: Семья, дети, путешествия и мое хобби перешло в основную деятельность, которым я зарабатываю (это я про веб-разработку).



Унгер Олег

Я востребован на рынке труда, несмотря на возраст, у меня появилось четкое понимание, в каком направлении мне дальше двигаться

Вопрос: Жизненный опыт?

Ответ: После школы поступал на программиста, но баллов не хватило. Учился на инженера-электронщика. Работал в разных сферах, в основном - на производстве. Та сфера, которая раньше приносила неплохой доход - перекочевала в Китай, работу стало сложно найти, да и надоело уже.

Вопрос: Опишите себя в начале пути?

Ответ: В начале пути я очень сомневался, стоит ли начинать. Меня очень мотивировал пример моего друга, который также начал с нуля и менее чем через год устроился на нормально оплачиваемую работу.

Вопрос: Опишите себя сейчас?

Ответ: Прошло почти три года, я уже обладаю определенными знаниями и постоянно получаю новые благодаря курсам от WebForMySelf.

Вопрос: Как Вы узнали о наших курсах?

Ответ: Стал искать, что же это за школа или курсы какие, где так хорошо и подробно все объясняют. Нашел на YouTube, и далее поиски привели на сайт Webformyself.

Вопрос: Что впервые подумали, когда узнали о нашем проекте?

Ответ: Подумал, как хорошо, что столько информации есть в одном месте.

Вопрос: Вы испытывали какие-то сомнения?

Ответ: Честно говоря, сомнения были. Но я подписался на Премиум клуб. И я многому научился по видео: PHP, JavaScript, регулярные выражения, курс по объектно-ориентированному программированию (ООП PHP) и пр.

Вопрос: Что Вам понравилось?

Ответ: Мне очень понравилось, что бонусом к курсу шли другие курсы и видео из премиум доступа . И так удачно было, что мне не пришлось выбирать между Yii2 и Laravel, потому что они шли в комплекте.

Вопрос:

Ответ: Мне пришлось бы потратить много времени на поиски более-менее структурированной информации по нужным темам.

Вопрос: Каких успехов Вы достигли?

Ответ: Как-то незаметно для себя, стал разбираться в том, что раньше казалось недоступным для понимания. На данный момент почти год работаю программистом (Yii, MS SQL Server, JavaScript), участвую в разработке нового функционала и сопровождении проекта CRM в организации, занимающейся системами безопасности, автоматики и связи.

Вопрос:

Ответ: Чувствую себя уверенно, оптимистично. Планирую и дальше повышать свой профессиональный уровень.

Вопрос: Какие перемены к лучшему произошли в жизни?

Ответ: Перемены к лучшему: я востребован на рынке труда, несмотря на возраст, у меня появилось четкое понимание, в каком направлении мне дальше двигаться. Будущее уже не такое туманное и пугающее, как раньше.



Я никогда не жалел денег на самообразование, а отговорки типа «поздно начинать» или «я не смогу», для меня не приемлемы

Вопрос: Опишите себя в начале пути?

Ответ: В начале пути для меня веб-программирование было «темным лесом», где было страшно и неуютно, но жажда знаний заставила двигаться вперед , да, на Делфи мне приходилось писать парсеры, были написаны Ebay снайпер, программа для участия на тендерах. На данный момент я понимаю, что написать подобное лучше на PHP (не нужно «придумывать велосипед» с библиотекой Synapse).

Вопрос: Что Вы скажете по поводу возражений, с которыми Вы, возможно, сталкивались перед покупкой информационных продуктов, как преодолевали данные возражения (нет денег; у меня не получится; слишком поздно начинать; слишком рано начинать; родственники против; слишком сложно; возможно, какие-либо Ваши возражения)?

Ответ: Я никогда не жалел денег на самообразование, а отговорки типа «поздно начинать» или «я не смогу», для меня не приемлемы - дорогу осилит идущий.

Вопрос: Какую проблему Вы пытались решить, какие проблемы испытывали до приобретения курса?

Ответ: Главной проблемой до приобретения курсов был мой нулевой уровень знаний. Да, конечно, можно на ютубе смотреть кучу бесплатных роликов, тут ты не потратишь денег, но зато потратишь самое ценное - время. На ютуб большинство роликов содержат кучу воды, так как авторы стараются сделать видео максимально длинным, чтобы заработать на рекламе.

Вопрос: О чем Вы думали в начале пути?

Ответ: Нашел через интернет, на тот момент нужно было срочно сделать сайт-галерею, и я приобрел первый курс по верстке. Тот проект я благополучно завалил - не хватало знаний. Сверстать макет я смог, прикрутил даже JQuery, а дальше мои знания закончились, нужна была админка, нужно было хранить где-то данные. Тут произошло мое знакомство с паттерном MVC и желание освоить PHP (с MySQL проблем не было, так как по роду своей деятельности я хорошо знаком с SQL, часто приходится вытаскивать данные из БД в разрезе складов, контрагентов и т.д.).

Вопрос: Какие изменения стали происходить, когда Вы узнали о курсах?

Ответ: Когда я узнал о курсах, изменений никаких не происходило, я просто приобрел сначала один курс и начал изучать, потом второй…. изменения стали происходить во время изучения материала, и эти изменения однозначно в лучшую сторону.

Вопрос: Что могло бы случиться, если бы Вы не смогли решить свои проблемы, если бы Вы не воспользовались нашими продуктами?

Ответ: Вряд ли бы что-то серьезное случилось, веб-разработка - это мое хобби, я не беру денег за это, и берусь лишь за то, что мне действительно интересно. Ну, а что касается именно Ваших продуктов, именно они направляли меня в мире веб-разработки, так как в начале пути я был подобен слепому котенку, мои знания были нулевыми, и я не знал, куда идти, и что делать. Я считаю, в начале пути просто необходим наставник, указывающий тебе путь, и этим наставником для меня как раз и стали Ваши курсы. Да, не все сразу получилось, но главное - не сдаваться.

Вопрос: Каких успехов Вы достигли?

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

Вопрос: Как Вы себя чувствуете? О чем думаете? Какие планы?

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



Мне очень нравятся курсы и уроки Андрея Кудлая. Как по мне, так он просто волшебник в вебе

Вопрос: Жизненный опыт?

Ответ: Начиналось все с верстки, постигал все азы с нуля, начинал брать несложные заказы на фрилансе. Далее познакомился с Joomla, но как-то не срослось с ней, не знаю, почему. Наткнулся на Wordpress - и тут мы нашли друг друга. Начал тщательно изучать эту CMS и плотно с ней работать. Изучил бесплатный курс от WFM по созданию темы с нуля, решил купить сразу курс WordPress-Профессионал - так как там был бонусом еще и курс по PHP, который мне очень нужен был тогда. В процессе изучения пришло понимание, что не все так сложно, как кажется, понемногу начал брать заказы и на создание тем для WordPress. Сейчас на фриланс биржи не заглядываю даже, есть свои постоянные заказчики. Основной профиль - создание тем для Wordpress с нуля.

Вопрос: Опишите себя в начале пути?

Ответ: В начале пути были сомнения - а есть ли деньги в интернете, на фрилансе. Честно говоря, стартовать было непросто - с небольшим опытом и «не толстым» портфолио долго приходилось искать заказчиков. Вообще для себя вывел некую формулу - сначала все всегда кажется страшным, непонятным, невыполнимым, но достаточно разбить большую задачу на этапы и начать делать - как все начинает получаться, складываться. Нужно только не бояться и делать - решение найдется всегда.

Вопрос: Опишите себя сейчас?

Ответ: Сейчас мой основной профиль - это создание тем для WordPress с нуля. На фриланс биржи не заглядываю, есть заказчики и поток постоянной интересной работы. Точно знаю, что заработать в вебе можно. Есть желание расширить свои знания в области PHP, поэтому купил курс PHP мастер от команды WFM от Андрея Кудлая. Его курсы и уроки мне очень нравятся - у него получается прекрасно объяснять материал. Помимо этого, его курсы/уроки мне очень интересно смотреть, они для меня не скучные, что ли. Не знаю, как это объяснить корректно, но на своем пути я встречал много уроков, при просмотре которых хотелось засыпать).

Вопрос: В какой момент Вы решили купить курсы?

Ответ: Понимал, что для дальнейшего роста мне необходим новый набор структурированных знаний. Искал курсы/уроки для себя. На тот момент, в рунете я не видел конкурентов WFM в курсах по WordPress. Вообще я всегда нахожусь в поиске нужных мне качественных материалов для развития.

Вопрос : Что Вам понравилось?

Ответ: Мне очень нравятся курсы и уроки Андрея Кудлая. Как по мне, так он просто волшебник в вебе). Стоит отметить его прекрасный навык в объяснении сложной информации.

Вопрос: Каких успехов Вы достигли?

Ответ: Нашел работу, которая мне очень нравится. Нашел много интересных людей вокруг себя. Получил знания и навыки, которые я могу сейчас свободно продавать. Есть уверенность в завтрашнем дне. Фриланс для меня - это свобода и возможность развиваться, строить себя.



Раньше эти технологии мне казались заоблачными

Начинал я с того, что для начала просто слушал. А затем пытался создать даже не сайт. А простенькую страничку. Изменяя её при помощи медиа запросов. Это мне удалось.

Абсолютно не знал, что такое адаптивная вёрстка, всё это мне казалось тёмным лесом. За сайты для мобильных устройств сейчас хорошо платят. В среднем адаптивный сайт стоит у нас в городе 15 000 - 20 000 рублей. Желание научиться делать такие сайты и способствовало приобретению курса.

Я твёрдо понял принципы адаптивной вёрстки. Суть её состоит в медиа запросах. При помощи медиа запросов можно задавать например максимальную или минимальную ширину страницы. И для этого размера прописывать свойства. Цвет текста, его размер, расположение блоков на ней, различные футеры и хедеры для различных размеров страниц если это рисунок.

Что мне запомнилось больше всего из курса? Дотошность, я бы сказал занудливость Андрея:-) Сначала это раздражало, а затем наоборот понравилось. И сам принцип подачи материала. Сначала мы верстаем сайт. Его идеология вёрстки через блоки. А затем начинаем его адаптировать при помощи медиа запросов.

Хочу зарабатывать на вёрстке адаптивных сайтов до 50 000 рублей в месяц:-)

Ещё мне понравилось бесплатный бонус к этому курсу в виде уроков по CSS3. Раньше эти технологии мне казались заоблачными. Теперь же после прохождения этих уроков. Я запросто могу заставить картинку или вращаться или сделать так, чтобы при наведении мышки она перемещалась. Всё это мне стало доступно после прохождения уроков по CSS3.



...И перед тем как сдаться я увидела в ютюбе ролик от Автора команды WebForMyself. Посмотрела один, второй и не смогла оторваться

Привет, меня зовут Юлия Ритфелд, я фронт энд разработчик в Министерстве Юстиции в Нидерландах.

Я очень сомневалась купить ли мне курс о Ларавел. Я уже 5 лет работаю верстальщицей и графическим дизайнером и мне всегда казалось, что php (и другие языки бэкенд) - это удел супер умных программистов. Но в какой-то момент мой начальник сказал, что мне надо тоже выучить пхп, а именно Ларавел, чтобы помочь в разработке аппликаций. Я очень долго сомневалась потяну ли такую сложную теорию. Как я как креативный человек смогу ли строить сложные вещи, да еще и в пхп?

Стоит ли инвестировать столько времени и средств?

Я посмотрела курс о Ларавел на lynda.com. Потом купила несколько курсов об этом фреймворке на Udemy.com. Потом были курсы на pluralsight.com. Все было сложно. И даже не в языке дело, на английском я учусь и работаю уже 2 десятка лет. И перед тем как сдаться я увидела в ютюбе ролик Виктора. Посмотрела один, второй и не смогла оторваться.

Но пойдя на данный момент уже 19 из 39 уроков (50%) теоретической части курса о Ларавел хочу сказать с полной уверенностью, что все мои страхи были напрасны. Виктор просто предугадывает мои вопросы и мысли типа ‘а что если..’. Видео записаны в отличном качестве и картинки на которых он объясняет о том, что такое, например, Middleware для меня как визуального человека просто спасение.

С уважением и признанием,
Юлия Рифтелд



Я узнала что такое вёрстка, виртуальный сервер, база данных, язык PHP и т.д. и я знаю как с этим работать

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

Больше всего, помимо качественной подачи материала, мне нравится стиль подачи. Т.к. всё же мы изучаем материалы самостоятельно, то многие моменты приходится пересматривать несколько раз. Мне нравится что в курсе чёткая структура уроков, я сразу знаю какой урок мне необходимо повторить, чтобы уточнить какой-либо вопрос. Я изучаю записи по нескольку часов и не устаю от прослушивания: голос у авторов курса приятный, спокойный, не торопливый. Это очень важно для меня.

Очень хочу, чтобы мой отзыв помог многим людям, которые находятся в поиске себя, выбирают новое направление деятельности или просто выбирают курс для повышения квалификации.