С чего начать изучение html и css

Уроки по HTML и CSS

«Уроки по HTML и CSS» являются простым и полным руководством, целью которого служит помощь начинающим при обучении HTML и CSS. Излагая основы, это руководство проходит через все основные этапы проектирования и разработки.

Если сумеете, представьте себе время до изобретения Интернета. Сайтов не существует и книги напечатанные на бумаге были вашим основным источником информации. Требовалось приложить значительное усилие, чтобы отыскать нужный фрагмент информации, который вы уже читали.

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

В этой книге я собираюсь показать вам как создавать свои собственные сайты с помощью двух самых доминирующих компьютерных языков — HTML и CSS.

Оригинальную книгу вы можете прочитать и при желании купить по этому адресу: learn.shayhowe.com/html-css/

Содержание

Шэй Хоу

Шэй Хоу

Специализируется на дизайне и разработке интерфейсов, о чём регулярно пишет и говорит. В настоящее время является руководителем подразделения Belly. Один из организаторов таких мероприятий как Chicago Camps, Refresh Chicago и UX Happy Hour.

С чего начать изучение html?

С чего начать изучение html?

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

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

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

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

Для начала, я хотел бы привести примерный план этой статьи. Если кому-то что-то не интересно — может смело пропустить.

Что такое html и зачем он нужен

html — это не язык программирования, как многие думают. Это всего лишь, язык разметки. Его назначение — определять структуру документа. Если кто-то вам скажет, что html нужен, чтобы определять внешний вид странички — не верьте ему! Этот человек либо из прошлого, либо не совсем понимает предмет.

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

Поддержкой html, как и многих других технологий, связанных с web, занимается консорциум W3C. Если вы хотите узнать все из первых рук — пожалуйте на их сайт. Но должен вас предупредить: спецификации, выпускаемые W3C, носят рекомендательный характер, поэтому браузеры всегда по-разному воспринимают один и тот же html код. Это делает верстку гораздо сложнее, чем она есть на самом деле.

В настоящее время последняя спецификация html имеет номер 4.0. Есть так же, язык xhtml, который гораздо более требователен к разработчику, потому что содержит более жесткие стандарты. Так, тэги в html могут писаться в любом регистре, а в xhtml — только в нижнем. И так далее. Я придерживаюсь спецификации xhtml и буду ниже описывать ее.

Язык html составляет набор тэгов. Это директивы браузеру, которые указывают ему сруктуру вашего документа. Прошу заметить: структуру . За внешний вид сегодня отвечает другая технология — CSS, разговор о которой пойдет ниже. Для того, чтобы выучить html, по сути, нужно выучить набор тэгов и их аттрибутов и все! Можно приступать к созданию тестовых сайтов.

Какие тэги нужно знать?

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

  • Основные: html, head, title, body;
  • Структурные: div, span;
  • Текстовые: p, ul, ol, li, h1-h6, br, pre;
  • Таблицы: table, tr, td;
  • Ссылки: a;
  • Мультимедиа: img, object;
  • Фреймы: frameset, frame, iframe;
  • Формы: form, input, textarea, label, select, option;
  • Факультативные: hr;
  • Специальные: script, link, meta;

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

Кто-то может возмутиться и сказать, что знает другие тэги, которые работают. Да, действительно, я привел список не всех тэгов, поддерживаемых браузерами. Однако, эти тэги являются основными, и человек, который знает их может сказать, что он знает html. Я нарочно не включал в свой список тэги типа font, которые являются устаревшими. Эти тэги настолько плохи, что даже говорить о них нет смысла, потому что сейчас есть значительно более мощные средства, позволяющие управлять внешним видом страниц и их частей. Лично я считаю необходимым и достаточным знание вышеприведенных тэгов. Потому что остальные либо нужны очень редко, либо не нужны вовсе. А посему, я предлагаю начинать изучение html с изучения этих тэгов.

Как сделать красиво?

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

Сейчас практически ни один сайт не обходится без применения технологии CSS. Именно на CSS возложена миссия определения оформления документа. Фон страницы, отступы, выравнивания, шрифты, цвета и многое другое находится в компетенции CSS. Поэтому сейчас рекомендуется не использовать теги и атрибуты, определяющие оформление страниц и элементов, а использовать вместо них правила CSS. О том, как же применять CSS лучше почитать в книгах. Но я хочу сказать, что если вы встретили тэг или атрибут, определяющий внешний вид элемента, 10 раз подумайте, прежде, чем применять его! Лучше узнайте, какое правило CSS отвечает за отображение элемента в таком виде, в котором вы хотите его видеть. За очень редким исключением, такое правило находится всегда.

С чего лучше начать изучение верстки?

Верстать лучше всего начинать после того, как поймешь принципы работы веб. Лично я бы составил такой план обучения:

  1. Изучение принципов работы web и структуры клиент-сервер
  2. Изучение тэгов и их атрибутов, с практическими занятиями по их применению
  3. Изучение правил CSS с практическими занятиями по их применению
  4. Изучение табличной верстки
  5. Верстка простого макета таблицами
  6. Верстка сложного макета таблицами
  7. Изучение директив DOCTYPE
  8. Изучение блочной верстки (тэг div)
  9. Верстка простого макета дивами
  10. Верстка сложного макета дивами
  11. Хитрости, приемы, хаки и прочие премудрости от гуру

В принципе, для начального уровня подготовки и знания основ html, достаточно пройти только первые 5 пунктов. (такой вариант будет идеальным для веб-программистов, которые не будут верстать сайты. Знание html им нужно только для того, чтобы выводить данные, полученные в результате выполнения скрипта.)

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

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

Если вам понравился данный мини-курс, или он вызвал вопросы или пожелания, если вы хотите поспорить о чем-то — я был бы рад вашему отзыву в комментариях или по почте.

Учим основы HTML и CSS: полезные материалы, курсы, площадки

Дамы и господа, здравствуйте, пришло время осваивать нелегкий путь фрилансера — разработку сайтов на заказ. Кто-то возразит: «Берешь любую CMS и делаешь за пару дней сайт». Ага, конечно, если было бы так просто, то не пришлось бы дописывать 186 строк кода в файл functions.php. Не HTML, конечно, использовал, но WordPress устроен так, что посредством PHP вам придется выводить HTML, соответственно, нужно знать и то, и другое.

доработка WP

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

CSS

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

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

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

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

Самообучение

Конечно же, без самообучения не обойтись, придется искать информацию, пробовать что-то делать. Поверьте, даже профессионал постоянно учится, в принципе постоянное саморазвитие отличает профессионала от посредственностей. Желаете научиться чему-нибудь новому? Вперед! Это легко, только с виду задача кажется тяжелой.

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

Итак, веб-ресурсы, которые в полной мере помогут освоить основы разметки страниц и каскадные стили :

http://htmlbook.ru/ . Полный сборник всех тегов и стилей, а также подробных объяснений с их участием. Очень полезная площадка.

https://webref.ru/ . Отличная площадка с набором уроков по многим языкам программирования. Есть информация как для новичков, так и для матерых специалистов.

https://puzzleweb.ru/ . Сайт сделан под новичков, есть самоучители по многим направлениям программирования.

https://professorweb.ru/ . Довольно много полезной информации по многим языкам программирования. Если желаете профессионально создавать сайты на заказ, то можно многому научиться, но оформление немного глаза режет, так что дизайну там обучаться бы не стал :).

https://msiter.ru/ . Также много самоучителей. Можете посетить и ознакомиться с информацией.

Как видите, предложил неплохое количество сайтов для самообучения на выбор, если не знаете с чего начать тернистый путь в разработчик и сайтов, скажу сразу: вот с этих площадок. Для начала освойте азы HTML5, CSS. Потом можно переходить к обучению PHP, JavaScript. После изучить jQuery и Ajax. С этой базой вы будете уже неплохим специалистом ( уровня junior, но не пугайтесь, реальный опыт набьете уже на прикладных задачах ) . Идем далее.

Учебники

Теперь перейдем к учебникам. На выбор предложу несколько книг, по которым учился сам. В первую очередь рекомендую эту книгу: https://www.litres.ru/8511974/

Эрик Фримен, Элизабет Фримен: Изучаем HTML, XHTML и CSS. Отличный самоучитель для новичков, все разложено по полочкам, минимальное количество непонятных моментов. В общем, для старта самое то.

Теперь усложняем задачу и переходим к следующему уровню: https://www.litres.ru/19224133/

Владимир Дронов, Николай Прохоренок: HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера (4-е издание). Отличный учебник для тех, кто встает на тернистый путь разработчика сайтов. Современные технологии там вполне понятно разъясняются.

Следом зацепите этот учебник, он тоже очень не плох, но только после того, как справились с предыдущим: https://www.litres.ru/8920342/

Робин Никсон: Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. Отличный учебник, который окажется неплохим введением в более сложную сферу веб-программирования.

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

Интерактивные площадки

И еще понравилась одна площадка, которая подает материал в виде интерактивного курса. Мне очень понравилось!

Собственно, переходите сюда: https://htmlacademy.ru/courses . Регистрируйтесь и начинайте спокойно изучать. Здесь есть уроки по HTML, CSS, языкам программирования и даже про препроцессорам, например, Less.

Подается информация в игровом варианте. Соответственно, постепенно выполняя задачи, вы развиваете свои навыки.

Основы HTML и CSS в HTMLacademy

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

Интерактивный курс

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

Курсы HTML и CSS

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

Основы HTML и CSS от Нетологии

Отличный курс для новичков, где подробно разжевываются основы. Пройти можно здесь: https://netology.ru/programs/html-css-base.

Обучение основам HTML и CSS в Нетологии

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

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

Научат тегам для разметки страницы, а также атрибутам.

Научат пользоваться списками и таблицами.

Объяснят селекторы и свойства в CSS.

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

Поведают о клиент-серверном взаимодействии.

Процесс обучения в Нетлогии

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

HTML/CSS. Интерактивный курс от GeekBrains

Отличный курс, но, к сожалению, не бесплатны й : https://geekbrains.ru/courses/246.

Обучение HTML и CSS в GeekBrains

Цену драконовской не назовешь, но все-таки, за всего 8 занятий многовато. Впрочем, за время учебы вы научитесь:

верстать статические сайты;

освоите блочную верстку;

познакомитесь с кроссбраузерностью;

немного научитесь Photoshop;

познакомитесь с препроцессорами LESS;

немного узнаете о Bootstrap.

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

Ученье — свет

Как видите, площадок для изучения основ HTML и CSS, а также способов быстрее освоить навыки, великое множество. Это база, которая позволит вам эффективно работать в дальнейшем и осваивать новые навыки. Так что дерзайте, инструмент дал, далее дело за вами.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *