As you can see above, those multiple lines of code are HTML. But what is HTML exactly, and what is the difference between HTML and CSS?
HTML stands for "Hyper Text Markup Language". It is the markup language used for creating web pages. As mentioned above, HTML acts as the structure for web pages using its various elements. The webpages read the HTML elements and act according to their instruction.
They are displayed and written as "tags" with the following format: <'instruction'>content to be modified<'/instruction'> (without the apostrophes).
• For example, in order to bold a piece of text, one would have to type <'b'>text<'/b'>. If I remove the apostrophes, this is how it looks: text.
Here's a closer look at the structure of an HTML document.
On the other hand, CSS cannot work on its own, as you will see.
CSS is part of HTML. Css stands for "Cascading Style Sheets". It determined the way that HTML elements on a page are displayed on a screen; their style, in short. CSS can be added to HTML in three different ways: as part of the HTML element directly using the 'style' function (which is how I am currently styling this paragraph), the 'style' tag within the head of a document, or an external styling file that the document access every time it loads.
• An example of how CSS would look styling an HTML element 'inline', or, as part of the element directly: <'p style='font-weight: bold; color: black;'>
CSS is particularly helpful and useful because it allows you to style different parts of many HTML elements at once, without having to go through each one, when you use the external or internal placing of CSS within the documents. In the example above, if it had been placed internally in the head or externally as an independent CSS file, it would have looked like this:
p { font-weight: bold; color: black; }
and would have affected all of the paragraphs within the page, not just a single element.
Here is a closer look at the way a CSS page looks:
With HTML and CSS, you have limited fonts available for use by default, so if you want to use a different font, you would have to upload it yourself to a server and link to it from there. Luckily, Google has developed a page where hundreds of fonts are available for free, already uploaded to a server for you, and all you have to do is link to them in order to display them on your webpage.
In order to change a font in an CSS style, as shown above, you have to use the parameters 'font-style: 'Fontname';' this of course, links to a source. So, in your page's header (it is important to know that even though it is a style and uses CSS, the linking has to be done within the HTML document, and not the style tags), you have to determine what font that is and where it's coming from. You do this with the following input:
<'link href='LINK-TO-THE-FONT-SOURCE' rel='stylesheet' type='text/css'>
This lets your HTML document know that it needs to gather information from an external page. For example, in this page, I am using the font 'Lato' for my body paragraphs (such as this one), so in my document header I have the following:
Coding languages are the makeup of computers and what we see on screens. They are the building blocks for screen-based design, and with them, anything can be reproduced. HTML and CSS are coding languages that can be used in order to create malleable designs -- or, designs that are not static, that can be interacted with, or that can be built upon. They are the most basic coding languages and not very difficult to learn.
Personally, I have been learning how to use HTML and CSS for several years now, just by exploring the internet and finding codes, reshaping them and analysing them on my own to see how they work, so I have a good understanding of them, and considerable skill, though by no means advanced.
A website that I discovered a few years back, and that we were also shown in class, that teaches you these coding languages in an easy-to-follow manner, and free of charge, is called CodeAcademy (www.codeacademy.com), and I have since used it to refresh my memory on certain things. Below are some screenshots of me following a tutorial on HTML in CodeAcademy.