Домой Интернет Делаем сайт: история создания Front-End для чайника

Делаем сайт: история создания Front-End для чайника

281
0

Делаем сайт: история создания Front-End для чайникаКаждый сайт в сети стоит на 2-х китах: Back-End и Front-End. Back-End – серверная разработка сайта, без нее сайт может спокойно работать и находиться в сети, а вот без Front-End сайта даже не будет, потому что это и есть сайт, точнее его облицовка. Сам Front-End пишется на: HTML, CSS, JS. Это – три кита, на которых держится сайт, о первых двух мы и поговорим, потому что использовать JS при разработке сайта желательно, но обойтись можно и без него, а вот без первых двух сложновато будет.

Что такое HTML?

Придуман язык HTML физиком Тимом Бернерс-Ли. Один из самых уважаемых в мире программирования человек и по своей сути – автор всемирной паутины, он создатель языка и протокола передачи данных.

Итак, HTML – аббревиатура, расшифровывается как “HyperTextMarkupLanguage”. Начнем с первого слова переводиться оно как “Гипертекст”. Изначальное значение этого слова – текст с ссылками, ссылки в свою очередь – то самое, на что кликает пользователь и переходит на другое место в странице или вообще на другую страницу, или даже сайт. Это – Гиперссылка.

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

Итак, дальше еще одно непонятное слово “Markup” – это, в переводе, означает разметка(разметка – термин верстальщиков). По своей сути – информация о том, как на странице сайта текст подразбивается и выдается пользователю: где абзац, где таблица, какой шрифт используется, какого он размера, жирный или курсивный и так далее. Это изначальное значение слово разметка. Language – в переводе “язык”. Если собрать все вместе, то получиться язык разметки гипертекста.

В начале пути языка в нем описывалось все: текст, картинки, цвета, шрифты, как пользователь видел что-то, рамки, тени и тому подобное. Все было намешано в одну большую кучу.
Со временем росли возможности браузеров, компьютеров, их назначение, впрочем все со временем меняется. Требовалось работать с изображениями, визуализировать разные эффекты.

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

Что такое CSS?

CSS – своего рода подъязык HTML, в него решили свести всю информацию о том как выглядит текст, то есть: цвет, фон, шрифт, словом – дизайн. Теперь HTML – структурная часть страницы, а CSS – ее дизайн. Проще говоря: HTML – каркас дома, а CSS – его облицовка.

CSS такая же аббревиатура, как и HTML и расшифровывается она как Cascading Style Sheets. Тут перевод не имеет значение, так как на русском языке выглядит нелепо и не имеет практического смысла, как в случае с HTML.

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

Если совсем простым языком, то описание дизайна абзаца или другого элемента на странице (картинки, например) – стиль и имя того элемента, который вы описываете.

Почему же все таки HTML и CSS разделены?

Тут все очень просто и сейчас все будет предельно ясно. Например: на сайте есть 1.000 картинок и кто-то захотел, чтобы они стали на 10% меньше по размеру, то не надо будет искать каждую картинку по отдельности и выставлять размер вручную, достаточно будет открыть файл CSS и написать примерно следующее на языке CSS: “Картинки: размер 90%” и все картинки станут меньше на 10% от своего изначального размера. Ведь это гораздо проще, чем искать все 1.000 картинок и изменять им размер.

Если коротко и ясно, то HTML – то что выводиться, CSS – то как это выглядит. На данный момент и еще пару лет будут являться актуальными версии HTML5 и CSS3. Есть некоторые функции языка CSS, для которых на языках программирования низкого уровня понадобилось бы написать целую программу. Например: наклонить изображение на какое-то количество градусов по оси-Z.

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