Академия: Конспект первой недели курса HTML, CSS для новичков

На этот раз я решил разобрать курс Html, CSS для новичков
Курс совсем небольшой и описывает самые крохи из из огромного языка разметки html. Впрочем для первого знакомства больше и не нужно. Это как при обучении вождению - научись сперва руль держать и педали не путать, а потом уже правильно включать поворотники на круговом движении, смотреть в зеркала и маневрировать в потоке.

Изображение с сайта abcdwork.ru

Создаем первую web-страницу

В данном разделе даётся объяснение того, что вообще такое web-страница. А именно - это документ(текстовый файл), содержащий гиппертекст. В свою очередь гиппертекст - это смесь текста и языка гипертекстовой разметки, позволяющего добавлять в текст гипперссылки, изображения, таблицы и многое другое. Каждый такой интерактивный элемент - это тэг. За каждый тип элемента отвечает конкретный тэг. Всего их несколько сотен, помнить их все конечно-же необязательно. Всегда можно обратиться к документации и найти информацию по нужному тэгу.
Понимая теперь что такое веб страница - несложно догадаться, что набор таких страниц - это и есть web-сайт.
Сайты бывают разными, например в википедии тысячи страниц, сайт-визитка может состоять из 5-10 страниц, а промо-сайт и того меньше.
Если окунуться в историю - то язык html был разработан в 1989 года учёным-физиком по имени Тим Бернерс-Ли.
HTML - hypertext markup language.
Сразу после создания html потребовались программы, которые могут читать этот язык - и имя им браузеры.
Сейчас браузеров достаточно много, самые популярные это:

Edge
Internet Explorer
Mozilla firefox
Opera
Google Chrome

Возвращаясь к тэгам стоит отметить, что тэги бывают парные и одиночные. большинство тэгов - парные.
Необходимый минимум тэгов на странице - это html, head и body
html - это обёртка для всего html кода страницы
head - в этой области прописываются невидимые на странице тэги, мета-тэги. кодировка, внешние стили и т.д.
body - основное содержимое страницы, именно то, что мы видим в браузере.
Простейший пример html страницы:
<html>
<head>
<title>My page</title>
</head>
<body>
<p>Hello html!</p>
</body>
</html>

Что хотелось бы отметить по этой части. Документальный фильм абсолютно лишний. Расшифровки аббревиатуры html вполне достаточно. Так-же в блоке head прописывается кодировка windows-1251, которая является устаревшей и её следует заменить на utf-8. Ещё автор назвал браузер Google Chrome просто Google, так нельзя. И хочу добавить списку типов сайтов ещё один тип лонгрид. Это достаточно новый трэнд, это сайт, состоящий из одной длинной страницы. Как правило - это продающий сайт. В нём очень важен дизайн, кроссбраузерность, адаптивность, скорость загрузки и удобство навигации.

Создание страниц в kompozer

В этом разделе объясняется что такое WYSIWYG-редактор.
WYSIWYG - What You See Is What You Get , что дословно переводится как “что видишь, то и получишь”.
Это особый редактор, работая с которым пользователь видит привычные ему текст, цвета, таблицы и изображения. А редактор сохраняет всё это в виде html-разметки. Таким образом, человек с нулевым знанием html и css сможет создать web-страницу.
Одним из таких редакторов является Kompozer. Он позволяет видеть одновременно и разметку, и боевое отображение страницы.
Для того, чтобы стилизовать элементы, будь то выбор цвета, отступ, размер и т.п. - используются css стили.
CSS - Cascading Style Sheets
Использовать их начали ещё с конца 1990-х.
Для того, чтобы “привязать” стиль к тэгу - нужно прописать нужные свойства в аттрибуте style нужного тэга.

По поводу Kompozer. Последняя заметка на офф сайте датирована мартом 2010 года. Это говорит о том, что данный продукт безнадёжно устарел. В качестве альтернатив аналогичного уровня я бы порекомендовал Notepad++ или Sublime Text.
Из визуальных редакторов первое место у CKEditor, правда это онлайн редактор. Но возможностей у него действительно много. А Adobe Muse - это насстоящий инструмент для профессионалов. На нём реально можно сделать очень красивые страницы.

Оформление web-страниц с помощью таблиц

Если перед вами стоит задача спроектировать страницу - в первую очередь нужно нарисовать макет данной страницы, а потом уже думать как её верстать.

https://i.imgsafe.org/2122810aed.png

Самым простым способом создать макет страницы будет таблица.

Таблица обозначается парными тэгами table
Строки таблицы - тэгами tr
Ячейки строк таблицы - тэгами td
Пример:
<table>
<tr>
<td>Красный</td>
<td>Зеленый</td>
<td>Синий</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Ширину таблицы можно указать как в пикселях, так и в процентах. Если использовать проценты - то можно указать ширины не всех столбцов. У неуказанных столбцов ширина рассчитается автоматически.
Таблицы с шириной, указанной в процентах называются резиновыми. Они гораздо эффектнее смотрятся на странице и занимают всё доступное им место, что тоже немаловажно.

Хотя целиком страницы таблицами не верстают - табличные данные никто не отменял. Так-же в уроке не сказано о тэгах: th, thead, tbody и tfoot.

Иллюстрирование web-страниц

В ряду прочего на странице может быть сколько угодно изображений. Добавляется изображение непарным тэгом 'открывающая кавычка' img src="url файла" 'закрывающая кавычка'
Если фотографии на странице грамотно расположены - то все вместе они создают целостно-графический образ.
Важно понимать, что злоупотребление изображениями может существенно увеличить вес страницы и увеличить продолжительность загрузки сайта в целом. При медленном соединении это достаточно критично. Пользователь может вообще не дождаться окончания загрузки и покинуть сайт.
Есть требования и к самим фотографиям - это:

вес до 1 мегабайта
размер до 1024х768 (среднестатистический экран нетбука)

Изображение так-же можно использовать как фон. На css это делается так:
background-image:url("url изображения");
Так-же стоит помнить, что у каждого изображения есть владелец и вы можете нарушать его авторские права.
Чтобы быть спокойным - лучше использовать сайты с бесплатными фото, или покупать права на изображения. Так-же автор может разрешать использовать его фото, с указанием авторства.

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

Создание навигации

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

https://i.imgsafe.org/2122999825.png

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

Структура CSS. Встроенные и внешние стили

Всю мощь css можно оценить когда на странице много однотипных элементов. Например 30 пунктов меню, 5 заголовков или 10 тизеров. Прописывать у каждого элемента аттрибут style - это громоздко и неправильно. Чтобы прописать стили один раз - достаточно всем однотипным элементам указать аттрибут class. А в разделе <style> описать свойства этого класса.
Например:
<div class=”cont”>Line 1</div>
<div class=”cont”>Line 2</div>

<style>
.cont {
margin:5px;
color:red;
}
</style>
Таким кодом я задам внешний отступ в 5 пикселей и цвет текста красный у всех тэгов классом cont.
В названии классов можно использовать латинский алфавит, цифры, знак подчёркивания и дефис.
Стили, описанные в блоке style - называются встроенными стилями, а вынесенные в отдельный css файл - внешними.
Внешний файл подключается так:
<link rel="stylesheet" href="styles.css" type="text/css">

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

Верстка с помощью блоков

Современные тенденции обязывают верстать страницу на контейнерах div, это называется блочной вёрсткой. Верстая на блоках(а не на таблицах) html код будет гораздо более краток и читабелен.
Достоинство таблиц в том, что на их верстать очень просто и легко. Недостаток - большой объём кода. Так-же нельзя наложить один элемент на другой.
Использование div контейнеров даёт нам возможность накладывать с их друг на друга, делая своеобразные “слои”. Позиционирование этих слоёв реализуется css-свойствами top, bottom,left и right.
Порядок слоёв - свойством z-index.
По-умолчанию все элементы имеют z-index равный 0. Если увеличить его - элемент будет как-бы над экраном, если уменьшить - то под экраном.

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

Сравнение таблицы и слоёв контейнеров div

https://i.imgsafe.org/2122a7cb85.png

Мокапы к статье сделаны на сайте NinjaMock

Вывод

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