Каждый уважающий себя программист имеет в своем распоряжении множество инструментов для работы. С ними работа становится приятнее, а процесс разработки сокращается в несколько раз.
Возможно, в прошлом уроке, вам показалось, что весь код, который мы поместили в документ превратился в нечитаемую простыню, - это действительно так. Представьте, что в нашем коде будет не 10-15 строк, а, скажем, 1 000, - работать с таким кодом стало бы невозможно.
Для работы с кодом программисты используют специализированные текстовые редакторы. В своих статьях я буду использовать Notepad++. Скачать его можно по этой ссылке.
На прошлой лекции мы создали html-страницу. Давайте скопируем ее в новый каталог Learn 2 и откроем в профессиональном редакторе Notepad++.
Согласитесь - другое дело!
Если у вас не такой вид текста, проведем небольшую настройку редактора:
Это сильно поможет нам в будущем.
В прошлом уроке я не акцентировал внимание на то, что в программировании каждый символ имеет значение и, соответственно, для чего-то нужен. В нашем случае, это символы <, / и >. Если они будут находиться не там, где нужно, либо будут отсутствовать там, где нужны, наш код работать не будет.
В таких случаях, как раз, помогает новый текстовый редактор.
Перейдем к делу
Проведем эксперимент, - удалим символ > из тега начала абзаца:
Было: <p align="center">
Сделаем: <p align="center"
Нотпад моментально показывает нам подсказку (фиолетовый цвет): неправильный синтаксис. В нашем случае, это некорректное открытие абзаца.
Вернем абзац в прежнее состояние и посмотрим что еще умеет такой редактор.
Давайте уберем параметр center из абзаца.
Было: <p align="center">
Стало: <p align="">
Сюда же начнем писать ce... И редактор выдает нам возможные варианты этой комбинации, отталкиваясь от написанного кода:
Редактор будто знал какой нам нужен параметр. Жмем Enter.
Эти подсказки я больше не буду упоминать, так как вы сами будете их видеть постоянно.
Экспериментируйте с ними и постепенно вы заучите все параметры для каждого тега.
Логика кода
Так же писать код (программировать) очень удобно логическими разделами. Каждый логический раздел должен начинаться с новой строки. Для визуального восприятия кода вставляют пустую строку, но, желательно, не более одной.
В принципе, писать код можно в одну строку. Да, все, что мы написали в прошлом уроке можно поставить в одну строку. Попробуйте сделать это, - сможете ли вы прочитать свой код? Посмотрите на наш готовый код - каждый раздел страницы на отдельной строке.
С блоков в коде прыгнем на секторы страницы.
Сектор страницы
Сектор страницы (придумал эту фразу в процессе написания статьи) - это, например, шапка сайта, меню с левой стороны, подвал и все что только угодно, что может быть на странице.
Откроем наш редактор и разобьем нашу страницу на сектора:
<html>
<title>Заголовок вкладки</title>
<body>
<table>
<tr>
<td>
<h1 align="left">Заголовок страницы</h1>
</td>
</tr>
<tr>
<td>
<p align="left">Текст в абзаце. Текст для примера.</p>
</td>
</tr>
</table>
</body>
</html>
Не торопитесь проверять результат, посмотрим на код еще раз:
Обратите внимание на структуру двух секторов в коде. Сохраняемся и идем смотреть результат:
Казалось бы, ничего не изменилось, но на самом деле это не так. У каждого сектора теперь есть своя граница, по умолчанию она скрыта. Мы сможем увидеть границы секторов, используя интструментарий табличного тега <table>. Изменяем в 7-й строке часть кода:
<table border="1"> - просим наши сектора показать границу, border, и выбираем первый вариант ее начертания, 1.
Было: <table>
Стало: <table border="1">
Идем смотреть результат:
Теперь мы визуально наблюдаем границы созданных секторов.
Давайте придумаем как будет называться наша страница, придумаем текст для нее и создадим еще несколько секторов:
<html>
<title>Easy Dev - Создание сайтов от А до Я</title>
<body>
<table border="1">
<tr>
<td colspan="3">
<h1 align="left">Easy Dev</h1>
</td>
</tr>
<tr>
<td>
<p align="left">Левый сектор</p>
</td>
<td>
<p align="left">Создание сайтов от А до Я. Делать сайты может каждый! Это легче, чем кажется! Я вас научу!</p>
</td>
<td>
<p align="left">Правый сектор</p>
</td>
</tr>
<tr>
<td colspan="3">
<p align="left">Подвал страницы Easy Dev</p>
</td>
</tr>
</table>
</body>
</html>
Посмотрим результат:
Мы создали дополнительные секторы, аналогично имеющимся.
Очень важно не запутаться в структуре тегов.
Сегодня мы размечаем (помните про разметку?) нашу страницу табличным методом или, как принято называть, табличной версткой.
Логично, тело таблицы открывается тегом <table> и им же закрывается </table>. Далее мы открываем строку <tr> и так же тегом ее закрываем </tr>. После этого идут теги столбцов <td> и так же закрываются </td>.
Как и в любой таблице, ячейка формируется при пересечении строки и столбца:
<tr>
<td>
Ячейка
</td>
</tr>
Полагаю, что вы заметили 3 объединенные ячейки вверху и внизу таблицы. Мы это сделали параметром colspan="3" в 9 и 33 строках, где цифра 3 - это количество объединяемых ячеек в строке.
Было: <td >
Стало: <td colspan="3">
Выдыхайте, дальше копипастим (copy + paste):
<html>
<title>Easy Dev - Создание сайтов от А до Я</title>
<body>
<table border="1">
<tr>
<td colspan="3">
<h1 align="left">Easy Dev</h1>
</td>
</tr>
<tr height="200">
<td bgcolor="aqua" valign="top">
<p align="left">Левый сектор</p>
</td>
<td bgcolor="green" valign="top">
<p align="left">Создание сайтов от А до Я. Делать сайты может каждый! Это легче, чем кажется! Я вас научу!</p>
</td>
<td bgcolor="yellow" valign="top">
<p align="left">Правый сектор</p>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="red">
<p align="left">Подвал страницы Easy Dev</p>
</td>
</tr>
</table>
</body>
</html>
Смотрим результат:
Что изменилось: я визуально хочу показать структуру кода. Используя табличную верстку, мы жестко отделяем секторы друг от друга. Так же мы можем их кастомизировать (изменить под наши нужды), задавая высоту строки, height="200" в 15-й строке кода, а так же указывать заливку фона, bgcolor="aqua", в 16-й строке, и расположение объектов, относительно вертикали valing="top", в 19-й строке.
С этого момента мы часто будем делать сноски на наш код по номеру строки в редакторе. Соблюдайте чистоту кода и тогда ошибок не будет.
Дополним левый сектор содержимым, 18-я строка:
<p align="left">Левый сектор</p>
<p align="left">Текст в левом секторе. Резервируем место.</p>
Что получилось:
Левый сектор увеличился в ширину, так как его содержимое требует большего места. Согласитесь, выглядит не очень. Вносим правки в три окрашенных столбца (добавляем параметры):
width="20%" - первый столбец;
width="60%" - второй столбец;
width="20%" - третий столбец;
Общая длина таблицы 100%. Мы пропорционально разбили таблицу для наилучшего отображения разметки. Эта длина теперь будет статичной (неизменной):
Яркие цвета режут глаз, поэтому при помощи встроенного в браузер помощника подберем более приятные тона. Начнем с левого сектора, щелкнем по нему ПКМ (правая кнопка мыши) и вызовем инспектор объектов страницы:
Откроется окно обзора этого сектора:
Определимся: большое окно - это разметка страницы, маленькое, справа - стили сектора или объекта. По умолчанию в окне стилей задан параметр element.style - его мы используем для своих целей.
Помещаем туда курсор, пишем backgrond. Тут есть такие же подсказки, как в текстовом редакторе. Жмем Tab, чтобы указать значение параметра и выбираем подходящий цвет, у меня это beige.
Если вы после этого нажмете на иконку этого цвета, станет доступно окно выбора цвета в системе HEX и RGB:
Копируем название цвета или кода цвета, который понравился и возвращаемся в редактор:
bgcolor="#7cbaec" - 16-я строка;
То же самое проделываем с оставшимися двумя столбцами и подвалом (столбцы - это <td>):
Вот такой вид приобрела моя страница.
Подведем итоги
Для чего нужен профессиональный текстовый редактор?
Расскажите о некоторых возможностях Notepad++.
Табличная верстка - как формируется ячейка?
Напишите в комментарий HEX-код желтого цвета.
