Build a simple website using HTML, CSS, and Javascript<\/a>\u2019 let\u2019s take a look at what they actually, and how they can be used creatively.<\/p>\n <\/p>\n
What is HTML?<\/h2>\n HTML is probably the most familiar of the three, having been cooked up by internet inventor Sir Tim Berners-Lee back in the 80s. This is the standard mark-up for websites, and you can see it in action just by right-clicking on any site and select Inspect to see how a webpage is put together in HTML.<\/p>\n
To anyone who has no interest in code, it\u2019s a baffling series of numbers, letters, and unknown punctuation marks. Like a foreign language. Which is precisely what it is (HTML stands for Hypertext Markup Language, fact-hounds).<\/p>\n
Each line of code informs the website how it should be structured. This includes the use of HTML elements \u2013 think of these as the building blocks of website creation, in which commands are bracketed on either side by <>. This will start the tag. To end it, you\u2019d add a stroke, so the code is <\/>.<\/p>\n
Let\u2019s say you want to tell a website to place your text in bold<\/strong>, you\u2019d use <b><\/code>, type your text, then end the bold effect with <\/b><\/code>. If you wanted to turn text or image into a hyperlink, on the other hand, the tag would read something like <a href=http:\/\/www.bing.com><\/code>. At the end of your linked text, you\u2019d type <\/a>,<\/code> to tell the website to end that command.<\/p>\nThese tags are then \u2018translated\u2019 and displayed on websites.<\/p>\n
<\/p>\n
What is CSS?<\/h2>\n CSS stands for Cascading Style Sheet, the brainchild of Hakom Lie and Bert Bos. It works especially well with HTML, but you don\u2019t need to use them together, as it works with any XML-based mark-up language. However, when used together, it lets you tweak a website\u2019s overall design without altering the HTML mark-up on every page, which would be a massive task.<\/p>\n
At its most basic, CSS dictates the website\u2019s look and feel, such as the background and font colours. You can also use it to change how a website is displayed depending on the size of the screen \u2013 pretty useful in our mobile-friendly world.<\/p>\n
So, you\u2019ve got you HTML-coded content, like <H1>My Awesome Website<\/H1><\/code>. On its own, that\u2019s going to look pretty drab on the page. What you\u2019d need to do is dip into the CSS to code a line that looks like: H1 {\u00a0 color:blue;\u00a0 font-size:48px}<\/code>.<\/p>\nHere, the \u2018H1\u2019 tells the CSS which part of the website to alter. Both \u2018color\u2019 \u2013 to ensure your website works, it\u2019s best to use the American spelling \u2013 and \u2018font-size\u2019 determine how the text should be presented.<\/p>\n
But, how do you get this code to complement your HTML?<\/p>\n
The first method is to add this directly to your HTML code. However, the downside of this is that the CSS will only apply to that particular line of code. If you re-designed your website, you\u2019d need to go in and change it by hand.<\/p>\n
The best way to get your CSS and HTML to play nicely together is to write your code into a text editor, then save it as a .css document. You can then link to this document in your website\u2019s header section.<\/p>\n
<\/p>\n
What is JavaScript?<\/h2>\n JavaScript has its roots in the early days of the programming language Java. If you\u2019ve ever played a game in your browser, or used an app on your phone, then you\u2019ve seen JavaScript in action. It\u2019s a little more high-level than either the design-focused CSS and the structural HTML, dynamically changing HTML and CSS elements on the page.<\/p>\n
For instance, if you wanted to add a picture slideshow to your website, them using HTML aand CSS, you\u2019d have every static image displayed on the page at once. But, with the right code, JavaScript then jumps in and says, \u2018ok, cycle through all of these images one at a time\u2019. This helps make your website look even more amazing (not to mention professional). It also means users don\u2019t have to keep refreshing the page to see new pictures.<\/p>\n
This is the final building block for your website \u2013 and arguably the most powerful \u2013 but you\u2019ll need to nail down your HTML and CSS before deploying it. Helpfully, though, it can be written straight into your HTML code. And JavaScript isn\u2019t just limited to graphical elements. It also has useful applications such as auto-fill text fields, making it extremely functional in today\u2019s modern web use.<\/p>\n
<\/p>\n
Now you\u2019re ready to begin your Microsoft Learn journey \u2013 learn how to combine these three tools to build your own website in our free online course<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"HTML, CSS, and JavaScript are the building blocks of the internet, transforming code into something that\u2019s visual and interactive. But while they might all play their part in the online experience, each of them are unique.<\/p>\n","protected":false},"author":430,"featured_media":16713,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ep_exclude_from_search":false,"_classifai_error":"","footnotes":""},"categories":[594],"post_tag":[681,519],"content-type":[],"coauthors":[813],"class_list":["post-16683","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technetuk","tag-coding","tag-technet-uk"],"yoast_head":"\n
Coding Week: HTML, CSS, and JavaScript: What\u2019s the difference? - Microsoft Industry Blogs - United Kingdom<\/title>\n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n \n \n \n\t \n\t \n\t \n