Перейти к содержимому






* * * * * 5 голосов

Что такое «верстка» сайтов, HTML, CSS и JavaScript?

Написано IT Lessons, в Языки программирования, Интернет, web-приложения, Front-End 07 Март 2019 · 342 Просмотров

верстка сайт html css javascript обучение
Что такое «верстка» сайтов, HTML, CSS и JavaScript?

В продолжение темы по самым частым вопросам о профессии программиста, я хотел бы для всех ответить на очередной вопрос, который задают почти все, кто интересуется IT. Что такое «верстка» сайтов, HTML, CSS и JavaScript?

 

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

 

Верстка — это процесс разметки (построения) web-страниц, этот процесс осуществляется с использованием языка разметки — HTML (HyperText Markup Language). Все мы привыкли видеть на сайтах такие элементы как шапка с логотипом и ссылками навигации, строка поиска, формы регистрации и входа на сайт, подвал, боковое меню, главное меню, центральную часть, которая содержит основную информацию, разные кнопочки, картиночки и прочие элементы. Те места, где расположены эти элементы на странице, их размеры и формы, то как они выглядят и как с ними может взаимодействовать пользователь — всё и входит в понятие верстка. Именно верстальщик создает для вас то, что вы видите на своих экранах.

 

Изначально проект сайта (его страницы) рисует web-дизайнер, который почти не имеет ни малейшего представления о верстке. Талант дизайнера — это умение рисовать, а не верстать… причем рисовать именно элементы страницы и таким образом, чтоб они приятно выглядели, сочетались цвета, иконки, использовались хорошие шрифты и чтоб они были приемлемых размеров и т.д.

 

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

 

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

 

Когда на странице разместили все необходимые элементы, когда эти элементы были наделены стилями, необходимо сделать так, чтоб всё это выглядело не просто как электронная картинка, а чтоб все это могло и работать, т. е. взаимодействовать с пользователем… Например в элемент текстового поля, пользователь написал текст сообщения, которое хочет отправить, он нажимает кнопку «Отправить»… и сообщение отправляется. Иными словами страница начинает работать, откликаться на действия пользователя, отображать ему уведомления, отправлять его сообщения, что-то искать в интернете, показывать галерею фотографий и т.п. Страница живет за счет интерактива, который в свою очередь создается на языке JavaScript (не путайте с языком Java). По сути это третий компонент в работе верстальщика — заставить страницу отвечать на действия пользователя.

 

Сочетание работы во всех трех аспектах: разметка, стиль, интерактив — в этом и заключается понятие верстка и работа верстальщика. Все три языка HTML, CSS и JavaScript — сами по себе очень простые и иногда их даже не называют языками, а их изучение всегда происходит почти одновременно, т.е. параллельно друг другу, и в конечном счете получается, что вы изучили одно из самых масштабных направлений в IT. Когда все три компоненты (каждая из которых описана на своем языке) работают слаженно и вместе, то в итоге мы получаем красивые, качественные и удобные сайты.

 

Для ускорения и упрощения работы верстальщика существует множество очень необходимых и полезных инструментов, это так называемые фреймворки. Есть даже инструменты, которые позволяют создавать макеты сайтов без глубоких знаний о верстке — это движки, наиболее известные: Joomla, WordPress и другие, однако такие инструменты не позволят вам создавать действительно качественные и дорогие сайты, за которые клиенты готовы много платить. Более того, намного больше ценятся верстальщики, которые реально знают языки HTML, CSS и JavaScript и умеют ими пользоваться. Зарплаты у таких верстальщиков в несколько раз больше, чем у тех, кто делает сайты с использованием движков.

 

Кому интересно знать больше ⇒ Обучение программированию с нуля
Спасибо за внимание! Удачи вам!






Последние посетители