На этот раз я решил разобрать курс 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 - то курс даст вам базовое понимание языка разметки и каскадных таблиц стилей. Вы поймёте что это такое и как с этим всем работать. Программа курса частично устарела, но на самом первом этапе вы этого не заметите, всё придёт с практикой.
Ага, пока сам не начнёшь делать ни один курс не поможет...)
Лучшее обучение - это сделать себе сайт самому!
Полностью согласен. Пока у тебя не будет конкретной цели - никакие уроки не помогут. Поставил себе цель написать сайт, и погнал гуглить как и что делается. и уроки уже будут по другому восприниматься. Уже будешь искать в них то зерно которое тебе нужно именно сейчас.
Я бы поспорил, как вы сделает сайт если не владеете базовыми навыками ? Надо пройти вводный курс хотя бы на той же HTML Academy или CodeAcademy, а потом приступать к практике. Надо учится правильно делать сайты сразу, а то потом мы имеем кучу криворуких кодеров.
Смотрим уроки практические и делаем...
А на счёт криворукости - это да, имеем, то что имеем..)))
Вот я например пытался учить JavaScript теорию и нифига не выучил.. может мне не попался хороший практический курс просто?
С JS да знаю, пробовал по книге "Дэвид Флэнаган - Javascript. Подробное руководство". понял что не мой формат мне тяжело так, я проходил на той же CodeAcademy затем немного на http://learn.javascript.ru (тоже понравилось) ну а потом надо переходить на CodeWars https://www.codewars.com - максимум практики.
Сейчас активно продолжаю изучать HTML и СSS, две недели как начал JS. Есть парочка сверстанных макетов. Как думаете с таким багажом можно найти работу? Ваши материалы мне, ой как, пригодятся.
Зависит от требований работодателя, срочности вакансии и ваших зарплатных ожиданий.
Я на свою первую работу устроился после просмотра курсов по программированию и буквально месяца клепания кода на коленке, который дальше localhost`а не вышел.
Если вас возьмут - соглашайтесь. Получите реальный опыт работы. С ним уже на нормальную ЗП потом сможете рассчитывать.
@tristamoff Поздравляю! Вы добились некоторого прогресса на Голосе и были награждены следующими новыми бейджами:
Вы можете нажать на любой бейдж, чтобы увидеть свою страницу на Доске Почета.
Чтобы увидеть больше информации о Доске Почета, нажмите здесь
Если вы больше не хотите получать уведомления, ответьте на этот комментарий словом
стопГолосуя за это уведомление, вы помогаете всем пользователям Голоса. Узнайте, как здесь.
Ваш пост поддержали следующие Инвесторы Сообщества "Добрый кит":
losos, sergiy, mir, kavalsky, andrvik, zoss, tristamoff, shuler, genyakuc, gryph0n, kamila, karusel1, orezaku, ruta, exan, oksana0407, vika-teplo, cryptomafia, alternativamira, stereo, vladsm
Поэтому я тоже проголосовал за него!
Если Вы проголосуете за этот комментарий, то поможете сделать "Доброго Кита" сильнее!
@tristamoff Поздравляю! Вы добились некоторого прогресса на Голосе и были награждены следующими новыми бейджами:
Вы можете нажать на любой бейдж, чтобы увидеть свою страницу на Доске Почета.
Чтобы увидеть больше информации о Доске Почета, нажмите здесь
Если вы больше не хотите получать уведомления, ответьте на этот комментарий словом
стопГолосуя за это уведомление, вы помогаете всем пользователям Голоса. Узнайте, как здесь.