{"id":396,"date":"2019-09-10T15:43:21","date_gmt":"2019-09-10T15:43:21","guid":{"rendered":"http:\/\/coventry.domains\/learn\/?p=396"},"modified":"2019-10-09T10:25:35","modified_gmt":"2019-10-09T10:25:35","slug":"languages-of-the-web","status":"publish","type":"post","link":"https:\/\/coventry.domains\/learn\/languages-of-the-web\/","title":{"rendered":"HTML, CSS and the Languages of the Web"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">You don&#8217;t really need to know any of the languages of the web to create an amazing website. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, it&#8217;s helpful to know what&#8217;s going on in the background as you create a space online. This will empower you as you understand why things may or may not appear as you&#8217;d expect or perhaps inspire you to learn more so you can create unique experiences online. <\/p>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Your Browser is an Interpreter<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-columns alignwide has-2-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">When you\nvisit a website or use a web application, your browser (a programme such as\nChrome, Firefox, Safari, Edge, etc.), is looking at information stored on a\nserver, compiling it and then presenting it to you as a completed web page.&nbsp; <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-coblocks-icon\">\n\t\t\t\t<div class=\"wp-block-coblocks-icon__inner\" style=\"height: 105px; width: 105px;\">\n\t\t\t\t\t<svg fill=\"none\" viewBox=\"0 0 20 20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"m10.8187411 12.8292466-2.30909089-2.2818182.02727273-.0272727c1.58181816-1.76363641 2.70909086-3.79090913 3.37272726-5.93636368h2.6636364v-1.81818182h-6.36363639v-1.81818181h-1.81818182v1.81818181h-6.36363636v1.80909091h10.15454547c-.60909092 1.75454546-1.57272729 3.41818182-2.8818182 4.87272728-.84545454-.93636364-1.54545454-1.96363637-2.1-3.04545455h-1.81818181c.66363636 1.48181818 1.57272727 2.88181818 2.7090909 4.14545456l-4.62727272 4.5636363 1.29090909 1.2909091 4.54545454-4.5454545 2.8272727 2.8272727zm5.1181818-4.60909094h-1.8181818l-4.0909091 10.90909094h1.8181818l1.0181819-2.7272728h4.3181818l1.0272727 2.7272728h1.8181818zm-2.3818181 6.36363634 1.4727272-3.9363636 1.4727273 3.9363636z\" fill=\"currentColor\" \/><\/svg>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Websites typically use information created in three or more languages to present the content you see on your screen. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The three\nmain languages of the web are: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>HTML <\/li><li>CSS<\/li><li>JavaScript<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s a\nquick overview of how your browser works with each of these languages: <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML <\/strong>is used to create the main content of the page (headings, paragraphs, images, etc.) <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CSS <\/strong>dictates how that content should appear to\nthe user (layout, colour, typography, etc.) <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>JavaScript<\/strong> allows users to interact with the\ncontent of the site (clickable buttons, scrolling animations)&nbsp; <\/p>\n\n\n\n<div style=\"height:36px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Client-Side and Server-Side Languages <\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML, CSS and JavaScript are <em>client-side <\/em>languages, so web browsers &#8220;speak&#8221; them and translate them for visitors. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are also <em>server-side <\/em>languages (such as PHP, Python, Java, Ruby, etc) which work with data stored on the server (where the website is hosted) and hand this information to the browser. Server-side languages are needed whenever a website uses a database to store information (such as customer details, blog posts, financial information, etc.). Websites attached to a database are known as <em>dynamic<\/em> and those without them are <em>static<\/em>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress, for example, is a dynamic Content Management System and uses a database to store key information such as users, blog posts, themes, plugins and more, so it needs a server-side language (in this case, PHP). Moodle, the Virtual Learning Environment used at Coventry University, also uses a database and PHP.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Again, it&#8217;s possible to create a great website <em>without knowing a single line of code<\/em> in any of these languages. It&#8217;s just helpful to be aware of what they are and how they relate to each other. <\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>HTML &#8211; Hypertext Markup Language<\/strong><\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img decoding=\"async\" src=\"http:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/HTML.png\" alt=\"\" class=\"wp-image-403\" width=\"188\" height=\"188\" srcset=\"https:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/HTML.png 256w, https:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/HTML-150x150.png 150w\" sizes=\"(max-width: 188px) 100vw, 188px\" \/><figcaption><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:HTML5_logo_and_wordmark.svg\">Image by W3C [CC BY 3.0]<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">HTML is the backbone for anything on the web; it&#8217;s the core information of your site. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Even when your website information is stored in a database in a language other than HTML, a server-side language like PHP collects this information and hands it to your browser <em>as HTML. <\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s an example of the HTML for a page with only a heading and a paragraph. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n  &lt;head>\n    &lt;title>Page Title&lt;\/title>\n  &lt;\/head>\n  &lt;body>\n\n    &lt;h1>This is a Heading&lt;\/h1>\n    &lt;p>This is a paragraph.&lt;\/p>\n\n  &lt;\/body>\n&lt;\/html> <\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If you\never want to go beyond a basic Content Management System, add unique features\nto your site or have a valuable skill to take with you into different\nindustries, learning HTML is the first place to start. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There&#8217;s\nno shortage of free and paid online resources, but one great place to get\nstarted for free is <a href=\"https:\/\/www.w3schools.com\/html\/html_intro.asp\">W3\nSchools<\/a> which contains information, tutorials and practice examples for\nevery major language of the web. <\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>CSS &#8211; Cascading Style Sheets<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In the\nearly days of the web, developers would have to create an element in an HTML\ndocument and add a line of code next to it in order change its style. CSS was\ndeveloped to separate the content from the style in order to keep both of them\nmore organised and work more efficiently.&nbsp;\n<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img decoding=\"async\" src=\"http:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/CSS.png\" alt=\"\" class=\"wp-image-407\" width=\"144\" height=\"203\" srcset=\"https:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/CSS.png 256w, https:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/CSS-213x300.png 213w\" sizes=\"(max-width: 144px) 100vw, 144px\" \/><figcaption><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:CSS3_logo_and_wordmark.svg\">Image by Rudloff [CC BY 3.0]<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">With CSS,\nyou can target one or more elements on a web page (or entire site) and change\ntheir appearance with a short line of code. Rather than, for example, changing\nthe colour of every heading on a website one by one, CSS lets you target every\nmain heading at once and create a rule for what colour they should be. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s\nwhat that would look like in a CSS document: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  color: blue;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s\nit. This rule targeted every heading of that type, and they all become blue at\nonce. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS can\nalso be used to change the font colour, background colour, background images,\nshadows, font-weight, layout and so much more. Modern CSS can even be used to\ncreate animations and advanced effects that previously required a good\nknowledge of JavaScript to implement. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS is probably the most fun language of the web to learn as even a little bit of knowledge will let you make dramatic changes to your site. However, you&#8217;ll need a basic understanding of HTML first in order to know how to use CSS properly.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Even if\nyou plan on using a Content Management System to build your website, it&#8217;s well\nworth learning what you can do with CSS. W3 schools has <a href=\"https:\/\/www.w3schools.com\/css\/css_intro.asp\">some great training material\nfor CSS<\/a> too. <\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>JavaScript <\/strong><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img decoding=\"async\" src=\"http:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/JavaScript.png\" alt=\"\" class=\"wp-image-409\" width=\"218\" height=\"218\" srcset=\"https:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/JavaScript.png 256w, https:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/JavaScript-150x150.png 150w\" sizes=\"(max-width: 218px) 100vw, 218px\" \/><figcaption><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Unofficial_JavaScript_logo_2.svg\">Image by Chris Williams <\/a><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Not to be\nconfused Java (a popular general purpose programming language), JavaScript is\nused to change the behaviour of a webpage when the user interacts with it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript\nis behind interactive elements on a site such as alerts and pop ups, buttons,\nanimations, media players, games, chatbots and more. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML and\nCSS <em>are markup languages<\/em> whereas\nJavascript is <em>a programming language<\/em>.\nThis means you can use it to store variables, carry out mathematical functions\nand perform many advanced functions.&nbsp;&nbsp; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re planning on investing a lot of time in web development, you&#8217;ll find JavaScript will help you add new levels to the function, features and complexity to your site. Because it manipulates the HTML and CSS of a site, it&#8217;s important to have a firm grasp of both of these before you learn JavaScript. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript\nwas created as a programming language which browsers could understand, and it\nremains the only language which can be used to perform both client-side and\nserver-side tasks. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re\nmanaging your site with a CMS,<strong> it&#8217;s unlikely\nyou&#8217;ll ever need to make any changes to your site&#8217;s JavaScript<\/strong>, but if\nyou want to learn more about the language, you can also find <a href=\"https:\/\/www.w3schools.com\/js\/js_intro.asp\">tutorials and practice\nexamples<\/a> at W3 schools. <\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Other Languages<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/15090961835_c4f26e4890_z.jpg\" alt=\"\" class=\"wp-image-400\" width=\"408\" height=\"281\" srcset=\"https:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/15090961835_c4f26e4890_z.jpg 640w, https:\/\/coventry.domains\/learn\/wp-content\/uploads\/2019\/09\/15090961835_c4f26e4890_z-300x206.jpg 300w\" sizes=\"(max-width: 408px) 100vw, 408px\" \/><figcaption>Image by <a href=\"https:\/\/www.flickr.com\/photos\/daniel_iversen\/\">Daniel Iversen<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Other\nlanguages in web development focus on server-side tasks largely to do with the\ncreation, storage and recall of information in databases. Most Coventry Domains\nusers won&#8217;t need to know them, but if you&#8217;re interested in web development, app\ndevelopment or data science, learning to code in one of these languages is a\nvaluable skill to have with great employment prospects.&nbsp; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s a\nquick look at some of the more popular languages associated with the web: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>PHP<\/strong> &#8211; The most popular server-side or <em>scripting <\/em>language. Major CMS platforms like WordPress, Joomla and Drupal are built using PHP<\/li><li><strong>Python<\/strong> &#8211; This is a quickly growing language which is popular in data science and financial tech industries <\/li><li><strong>Java &#8211; <\/strong>This is a popular and robust programming language used by most FTSE100 corporations <\/li><li><strong>Ruby &#8211; <\/strong>Another quickly growing language which was designed to be fun to use. The Ruby on Rails framework has made this language a popular choice for start-ups. <\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">HTML, CSS and JavaScript are the core languages of the web, and the vast majority of the websites today depend on browsers to interpret all three of them. While you don&#8217;t need to know how to code in any of them in order to create a great website, it&#8217;s good to know what these languages are, why they exist, and how learning them can help you develop a unique presence online.&nbsp; <\/p>\n","protected":false},"excerpt":{"rendered":"<p>You don&#8217;t really need to know any of the languages of the web to create an amazing website. However, it&#8217;s helpful to know what&#8217;s going on in the background as you create a space online. This will empower you as you understand why things may or may not appear as you&#8217;d expect or perhaps inspire [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":399,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[22,19],"tags":[],"class_list":["post-396","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-does-the-web-work","category-think"],"_links":{"self":[{"href":"https:\/\/coventry.domains\/learn\/wp-json\/wp\/v2\/posts\/396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coventry.domains\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coventry.domains\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coventry.domains\/learn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coventry.domains\/learn\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":12,"href":"https:\/\/coventry.domains\/learn\/wp-json\/wp\/v2\/posts\/396\/revisions"}],"predecessor-version":[{"id":652,"href":"https:\/\/coventry.domains\/learn\/wp-json\/wp\/v2\/posts\/396\/revisions\/652"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coventry.domains\/learn\/wp-json\/wp\/v2\/media\/399"}],"wp:attachment":[{"href":"https:\/\/coventry.domains\/learn\/wp-json\/wp\/v2\/media?parent=396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coventry.domains\/learn\/wp-json\/wp\/v2\/categories?post=396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coventry.domains\/learn\/wp-json\/wp\/v2\/tags?post=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}