What Is HTML and CSS? A Few Things You Should Know

Have you ever looked at looked visited a website and said: how did they do that? Well, part of that comes from a coding language that is known as HTML.

Its Meaning and Use

HTML (Hypertext Markup Language) was created in 1990 and it is the language that tells any browser where place content on your website and is essentially the backbone structure or text of a website. It is now known as html5 after the updates that have been applied to it.

Computers aren't wizards that magically knows everything, a developer has to teach a computer how to perform certain tasks.

For example, whenever you learn a new language at first you think: what is this? but after you learn the language you are able to speak it.

The same thing occurs with computers, they have to be able to recognize your code in order for it to run.

Structure of HTML

An html document is composed of five opening and closing tags: html, head, body, div, and footer. For example, take a look at the image at the above.

Whenever you see tags like this they are called elements and with these elements we will be able to decorate any webpage; more on that later. From the image example above, we are using a div tag, which divides a webpage into parts and assigning it a class to refer to later in CSS.

 A class is a way of identifying a specific block of code and we can decorate anything in this code block by using (.code) in our css file.

Next, have an h1 element which stands for header (used to create headers); we can go from an h1 header to h6 and from one to six our text gets smaller.

The text “Hello World” will print on our html document and notice there is a closing that immediately follows it.

Below we have a hr element which stands for for horizontal rule, allowing us to insert a horizontal line to run across the page for whenever you want transition into another topic. We then close everything using the closing tag of div.

Another thing worth mentioning is that the document type should always be: !DOCTYPE html with opening and closing tags because this how a browser is able to recognize an html document.

Next up, there is the head tag which where we have: the title of a website, SEO (Search Engine Optimization), and all of work being performed behind the scenes such as a stored username and password.

For example, think about shopping online on Black Friday; your username and password are stored in a database for whenever you come back.

Then, comes the body tag and this pretty much where all content that is visible to the viewer. This post would fall under that category and as well as any images on a website are placed in the body tag.

Another tag used frequently with html is the div tag, which divides a webpage into sections; think of this as a way of organizing content neatly on a new line.

Below the body tag is the footer, which is basically the bottom of a web page and a few things that would be included here is: social media links, copyrights, or even links to other pages on a website.

What is CSS?

Then there is CSS (Cascading Style Sheets), in simplest terms allows us to style all text on your webpage. It was created in 1996 and it has been updated to what is now known as css3.

That's not all though, we can also add borders, grids with columns and rows, change the background color of a webpage, change color of any text, alter the size of text, animations, make shapes, images, videos, and much more.

By the image above you could probably tell what a few of these properties do just by looking.

CSS uses the name of an element again and from there we can we be able to style the element using the properties defined in css. Basically, it accepts properties and values that are enclosed in curly braces. For every property (on the left in the picture above) you will have a value (on the right).

I want to share with you a few samples I made just to give you an idea of how powerful html and css is combined:

The first one divides all posts on the webpage into two rows and columns. And the second image uses animations for the cars and the street lights fade into colors of red, yellow, and green.

If you have any questions on how html and css works I will be happy to answer them.

Thank you for reading.
Powered by Blogger.