What are HTML, CSS, and PHP?
HTML, CSS, and PHP are acronyms for different coding languages used for displaying webpages on the internet. Each has a different purpose and function and they work together to deliver beautiful websites with updated content to your web browser.
HTML stands for Hyper Text Markup Language, CSS for Cascading Style Sheets, and PHP for PHP Hypertext Preprocessor. (Yes, the acronym is recursive. Computer nerds like to do silly things like this as a joke.)
The 10-second explanation: HTML is the flesh and bones of a website, defining its structure. CSS is the clothing, allowing designers to make site-wide changes more easily while PHP assembles each piece of the website and prepares it for your viewing pleasure.
No doubt these explanations of the acronyms has completely enlightened you about what these languages are used for. But if you want more detailed information (and I know you do), continue reading below.
HTML
We will start with HTML, since that is how the web started. Back in the day, us old web designers had only boring old HTML with which to make webpages. It was a miserable hardship; web designers these days have it so easy what with their fancy styles and dynamically produced pages. But I am getting ahead of myself.
HTML = Hyper Text Markup Language, but what does that mean? Let’s break it down: Text that is hyper? This is the ability of the text document to have links, either to various sections of the same document (or webpage) or to other text documents entirely (other webpages and websites). Linking is what makes the web so interconnected.
The ML part of HTML, or Markup Language, refers to how the language is structured: with mark up. A simple text document is marked up with tags that define the role of the text between the tags.
For example: heading text (like the title of this blog) is often surrounded by and H1 tags. This lets your browser know that the text is a heading, and the number indicates the prominence/importance of the heading (with 1 being the most important). Tags let the web browser know what the text between the tags is for and, originally, how the browser should display the text. That was before CSS.
CSS
Cascading Style Sheets tell browsers how to display HTML tags. These style rules override the default display rules that browsers have for HTML tags. The style sheets are cascading in that there can be a number of conflicting rules that can be applied to a particular tag but the most specifically targeted rules will override less specifically targeted rules.
Specifically targeted? In addition to being able to redefine how a browser should display HTML tags, you can also use CSS to target tags that are inside of other tags, like a tag inside of an P tag for example. Additionally, you can assign classes and IDs to particular HTML tags and use CSS to target a tag based on these criteria as well.
Basically, many things that used to be done in HTML with images and weird hacks can now be done more simply via CSS, saving designers time and speeding up page load times by lowering the amount of data that needs to be downloaded for a page to properly display.
PHP
So, HTML formats a webpage and CSS defines how that formatting should be displayed. Sounds like that is all we need to make a nice website, so what is PHP for? I am glad you asked! PHP, as you recall, stands for PHP Hypertext Preprocessor and it does what its name implies: it preprocesses hypertext.
But what does it mean to preprocess hypertext? Basically, PHP scripts run on the web server before the webpage is sent to your browser. It can be used to assemble an HTML document on the fly from a number of different pieces, write it all into cohesive HTML or CSS and send it to your web browser for display.
PHP is very convenient for making page templates for a website, so that if you want to change a common element of a site such as the header or navigation, you only have to change it once instead of on every page of the entire website. This significantly lowers the chances of making a mistake or missing an instance that needs to be updated.
So, there it is in a nutshell. HTML is the basic and original programming language for web designers while CSS and PHP have come along over time to improve the ease of creating webpages and increase the speed of websites. I hope this has been informative for you and not too terribly boring or nerdy.
Do you have another burning internet marketing or web development question? Contact us online today and we would be happy to answer it.
Чем css отличается от php
Это самая популярная связка технологий для создания сайтов. Около 90% всех сайтов работает именно благодаря этому набору технологий. Давайте разберемся, что они обозначают и как же они работают?
Каждая из этих технологий имеет различное предназначение, цели и функции. Но бо́льшую ценность они представляют, когда работают вместе, а не по отдельности. Давайте теперь отдельно разберем каждую из этих технологий.
HTML
HTML (Hypertext Markup Language) — это язык гипертекстовой разметки. Эта разметка создается с помощью тегов (то есть с помощью «меток») — наборов символов, входящие в угловатые скобки. Например, основной тег страницы html пишется следующим образом — . Любая страница в интернете состоит из множества тегов. Конечно, это не то, что мы привыкли видеть, когда заходим в интернет. Каждый из этих тегов играет определенную важную роль.
Чтобы упростить задачу понимания этой технологии, давайте представим себе обычный дом. Увидев дом, мы видим его экстерьер, то есть то, из чего сделан дом. Теги на странице можно рассматривать как небольшие кирпичики, с помощью которых построен дом. Важно, чтобы эти кирпичи аккуратно и красиво были разложены, иначе дом будет криво смотреться, а может и вообще он будет непригоден для использования. Также и на страницах, при составлении структуры страницы важно уделить особое внимание тегам.
Рассмотрим общую структуру любой страницы в интернете:
Любая веб страница начинается с . Этот тег дает браузеру понять, что далее представлен код html последней [пятой] версии.
Затем пишется парный тег . Это основной тег страницы, который обязательно должен присутствовать и содержать в себе других 2 основных тега, это head и body.
Внутри парного тега необходимо написать заголовок страницы (тег title), который отображается во вкладке браузера. Так же в контейнере обычно находятся различные мета-теги для поисковых систем, подключение различных файлов к странице (например, стили) и т.д. В этой секции находится информация, которая важна для страницы, но не отображается на ней.
Внутри тега находится всё, что должно быть на странице. Это любые из существующих тегов, текст, картинки, элементы работы с данными и так далее. Всё, что вы видите на страницах в интернете, всегда находится в теге body.
В приведенном выше примере в теге body находятся 2 элемента — тег h1 и тег p. Тег h1 обозначает заголовок на странице, а тег p — абзац. У каждого html тега есть свое предназначение. К тому же все элементы имеют стандартное форматирование браузера, это значит, что размер текста в заголовке по умолчанию будет больше, чем в абзаце. Из таких тегов и составляется страница, которую вы видите в браузере. Однако без графического оформления эти элементы совсем не презентабельные, именно поэтому нужен CSS.
CSS
CSS — Cascading Style Sheets — это каскадные таблицы стилей. С помощью разметки мы создали структуру и наполнение документа, а теперь будем внешне оформлять. Вот для этого и служат каскадные таблицы стилей. Чтобы здесь тоже упросить задачу с понятием CSS, вернемся к нашему примеру с домом. После постройки дома он выглядит совсем не презентабельно, поэтому, чтобы придать красивый вид, его раскрашивают. Подъезд покрашен в один цвет, балконы в другой и так далее. Это и есть графическое оформление. Так же и со страницей: без стилей элементы имеют только стандартное оформление браузера. Но с помощью стилей вы меняете на странице размер текста, его цвет, шрифт и так далее.
Вернемся к нашему примеру кода страницы html. Для тега h1 можно задать красный цвет текста следующим образом:
Как видите, ничего сложного в такой записи нет. Сначала мы указываем к чему нужно применить блок стилей. Далее в фигурных скобках мы описываем стили для этого элемента h1. В этом блоке мы можем задать любые из имеющихся стилей и все они применятся к элементу h1.
Теперь, разобравшись со стилем текста, давайте постараемся это все оживить. Тут нам придется прибегнуть к помощи JavaScript.
JavaScript
JavaScript — это язык программирования, сокращенно «JS». Изначально его создали для того, чтобы «оживить» веб-приложения и веб-сайты, то есть, чтобы элементы интерфейса (всплывающие окна, анимации, кнопки и т.д.) реагировали на действия пользователей. Однако сейчас этот язык программирования применяют не только для оживления страниц, но и на стороне сервера, для создания мобильных приложений, веб-сервисов и так далее.
Если вернуться к примеру с домом — то JavaScript это лифт, который доставляет пользователей на нужный этаж. Пользователь заходит в дом, ему нужно попасть на конкретный этаж, он нажимает на кнопку этажа и далее лифт автоматически доставляет пользователя на нужный этаж. Так же и на странице, пользователь нажимает на кнопку, а JavaScript выполняет нужное действие. Конечно, человек всегда может подняться по лестнице, так же как и сайт может работать без JavaScript, но, согласитесь, именно лифт делает дом лучше, так же как и JavaScript делает лучше веб-страницу.
PHP
Ну и последняя технология в этой связке — PHP. PHP (от англ. Hypertext Preprocessor) — это серверный язык программирования. Как мы уже отметили, если JavaScript работает на стороне клиента (браузера пользователя), то PHP — на стороне сервера (компьютер, где располагается сайт). PHP не зависит от скорости компьютера пользователя или его браузера, он полностью работает на сервере. PHP позволяет соединить все страницы в единое целое и предоставить сайту функции, без которых эти страницы не будут работать как единое целое: авторизоваться на сайте, подать заявку на бронирование, добавить товары в корзину и сделать заказ. PHP работает с базой данных, которая хранит всю динамическую (изменяющуюся) информацию на сайте.
Если вернуться к нашему примеру с домом, то PHP можно представить как водопроводную систему, электричество и т.д. То есть это то, что работает «под капотом» дома. Чтобы лифт работал, в доме нужно электричество. И это более важная составляющая дома, нежели лифт. Когда жилец дома тратит электричество, то все эти показания записываются в «базу данных» дома. Так же и с сайтом, когда пользователь нажимает на кнопку отправки заявки на бронирование, JavaScript отправляет данные на сервер, где PHP обрабатывает эту информацию и записывает в базу данных.
Умея работать с этими технологиями в связке, можно создавать любые сайты, от простых лендингов до огромных интернет-магазинов либо же сложных веб-сервисов с большим количеством данных. Спрос на такие технологии не падает, а это значит, что в ближайшие годы вы точно сможете хорошо зарабатывать, используя эти технологии.
Если вы еще только планируете изучение этих технологий, то рекомендуем рассмотреть обучение на нашем курсе «Веб-верстальщик», в котором подробно изучаются такие технологии, как HTML, CSS и JavaScript. Этих трех технологий вполне достаточно, чтобы создавать сайты. А при необходимости можно заняться освоением языка PHP, чтобы делать более мощные и большие сайты.