Урок 1. HTML — Как гуглить?

На этом уроке мы познакомимся с языком разметки под названием HTML. По сути, вся информация, представленная на том или ином сайте хранится в наборе HTML-документов.

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

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

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

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

Любой сайт имеет свой исходный код. Ознакомиться с ним можно нажав правой кнопкой мыши в браузере и выбрав пункт контекстного меню под названием «Просмотр кода страницы».

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

Давайте попробуем заменить заголовок. Кликнем правой кнопкой мыши по нему, выберем «Посмотреть код», найдем текст заголовка и заменим его на свой текст. После этих изменений текст на сайте поменяется, но если обновить страницу — эти изменения не сохранятся. Для того, чтобы эти изменения сохранились, а также другие пользователи смогли их увидеть — эти изменения необходимо вносить в исходных файлах сайта.

Сейчас мы откроем исходный код сайта в текстовом редакторе. С помощью команды Ctrl + F, мы можем найти интересующий нас заголовок к исходном коде этой страницы. Заменим заголовок на свой и сохраним изменения. После этого, когда мы обновим страницу, мы увидим, что изменения сохранились.

Таким образом, скачав подходящий шаблон сайта и используя исключительно поиск и замену, можно разработать свой собственный веб-сайт абсолютно не обладая никакими знаниями и навыками. Готовые шаблоны сайтов вы можете просто найти в интернете. Есть как платные решения, так и бесплатные. Также, существует огромное количество маркетплейсов, где можно приобрести уже готовое решение конкретно под вашу задачу. Например, сайт themeforest.net — здесь мы можем найти шаблон под совершенно любую тематику. Выбираем понравившийся нам шаблон, покупаем и и просто заменяем текст — готово.

С поиском и заменой текста мы разобрались на интуитивном уровне. Точно также, на интуитивном уровне, разберемся с тем как удалять элементы. Например, какой-то элемент в шаблоне нам не нужен. Воспользуемся инспектором объектов. Каждый элемент в разметке HTML находится внутри строгой структуры. У каждого элемента могут быть как родительские так и дочерние элементы. При наведении на HTML-код в инспекторе объектов — браузер будет выделять на странице элемент, который мы пытаемся выделить в HTML-коде.

Найдем интересующий нас родительский элемент, который мы хотим удалить, выделим его и нижем на клавишу Delete — он пропал. Таким же образом удалим следующие ненужные нам элементы.

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

Но как быть с задачами, которые не на столько очевидны как замена текста или удаление элементов? И здесь нам поможет Google. Именно Google, а не заучивание каких-то инструкций, просто потому, что запомнить всё попросту невозможно, а Google всегда есть под рукой.

Например, мы хотим добавить на страницу какую-то картинку. Переходим в Google и формируем наш поисковый запрос, звучать он должен следующим образом: «как добавить картинку в HTML документ». Переходим по первой же ссылке и изучаем, что здесь написано. У нас есть исчерпывающее описание, а также готовый пример. Попробуем воспользоваться этим примером — копируем приведенный в примере код и пытаемся встроить его на наш сайт. Сохраняем картинку рядом с нашим HTML-документом и меняем значение атрибута src, согласно инструкции, которую мы увидели ранее. Сохраняем и обновляем HTML-страницу. Картинка появилась, но выглядит она не так, как нам бы хотелось. Поэтому точно также, мы идём в Google и формируем новый поисковый запрос: «изменить размер изображения html». Переходим по первой же ссылке, читаем описание и вносим необходимые изменения. Подобрать подходящий размер мы можем прямо в браузере при помощи инспектора объектов. Убедимся, что всё выглядит так как нам нужно и внесем все те же самые изменения в исходном коде HTML-документа при помощи текстового редактора.

Предположим, что перед нами стоит задача сделать так, чтобы при клике на кнопку, расположенную в центре экрана, пользователь попадал на сайт Apple. Первым делом нам необходимо понять с каким элементом мы сейчас работаем — находим его в инспекторе и видим, что этот элемент находится в теге «a». Нам необходимо понять, что это такое — мы идем в Google и формируем наш поисковый запрос: «html что такое a». Переходим по первой же ссылке и видим, что тег «a» — это ссылка. Рядом нам доступен перечень атрибутов, которые могут быть заданы для тега «a», в том числе атрибут «href» — адрес страницы, на которую должен попасть пользователь при клике на ссылку. Находим нужный элемент в исходном коде HTML-документа и вносим необхоидмые изменения, сохраняем HTML-страницу в тестовом редакторе и открываем её в браузере.

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

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

  • Весь HTML-код должен располагаться внутри тега <html>;
  • Внутри тега <head> располагаются элементы, невидимые для пользователя. Это могут быть подключаемые таблицы стилей, javascript-код, meta-теги и другие элементы;
  • Внутри тега <body> размещается основной контент веб-страницы;
  • Между открывающим и закрывающим тегами, обычно, располагается текст, который видит посетитель сайта, а внутри тега (т.е. между открывающей и закрывающей треугольными скобками) — атрибуты;
  • Атрибутом может быть идентификатор элемента («id»), с помощью которого мы можем взаимодействовать с конкретным элементом — задавать его форматирование, менять его содержимое или менять его другие атрибуты;
  • Существует атрибут «class». Классы также используются для взаимодействия с элементами, они позволяют задавать форматирование элемента или влиять на его содержимое. В отличии от идентификатора, один элемент может иметь сразу несколько классов,  а также, один класс может принадлежать сразу нескольким элементам;
  • Помимо идентификатора и классов, в качестве атрибута того или иного элемента может быть задано имя элемента («name»). Обычно, имена используются для работы с контактными формами;
  • Еще одним атрибутом может быть стиль («style»), позволяющий задавать настройки форматирования того или иного элемента;
  • Существуют специфические атрибуты, необходимые только для определенных тегов. Например, для ссылок — это атрибут href, позволяющий задавать адрес веб-страницы, которая должна быть открыта по клике пользователя на ссылку;
  • Помимо всего прочего, разработчик может задавать свои собственные атрибуты и их значения для реализации более сложных конструкций;
  • Значения атрибутам присваиваются с помощью символа равно (=), а сами значения должны быть обрамлены кавычками («).
  • Разные типы объектов в HTML-документах имеют свои теги. Так, например, тегом <p> — выделяются абзацы, тегом <a> — гиперссылки, тегами <h1>, <h2>, <h3> — заголовки разных уровней, тегом <img> — изображения и так далее.

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

В нашем случае, при работе с HTML-документами, для того, чтобы лучше понять основы HTML и его синтаксис — я рекомендую ознакомиться с двумя небольшими статьями на сайте Mozilla: «Начало работы с HTML» и «Основы HTML». Ссылки на эти статьи доступны в само начале этого урока.

А в качестве домашнего задания, я предлагаю уже сейчас начать разрабатывать свой первый веб-сайт, самостоятельно внеся небольшие изменения в шаблон jubmotron от Bootsrap:

  • Замените заголовки
  • Текст кнопки
  • Добавьте свою краткую биографию
  • Вставьте свое фото на первом экране

Шаблон jubmotron находится в папке bootrap, архив с которым мы скачивали в самом начале урока (ссылка на архив доступна в самом начале урока). В итоге должно получится что-то подобное:

Если для вас, вдруг, такая задача окажется сложной — тогда я рекомендую перед выполнением домашнего задания всё же пройти курс по основам HTML от Code Academy.

Обсудите ваш проект с менеджером

    Я согласен на обработку персональных данных согласно политике конфиденциальности

    Служба поддержки

      Тариф Базовый Продвинутый Профессиональный
      При оплате на 1 год 390 руб./мес. 450 руб./мес. 490 руб./мес.
      При оплате на 2 года 332 руб./мес. 383 руб./мес. 417 руб./мес.
      При оплате на 3 года 273 руб./мес. 315 руб./мес. 343 руб./мес.

      Реквизиты для рассчётного счета

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

        Я согласен на обработку персональных данных согласно политике конфиденциальности