Why do you need three languages to create web pages?
What Is HTML?
A simple way to think of how these languages interact is to picture a website as a combination of a skeleton, style, and functionality. Here, HTML or HyperText Markup Language, provides the skeleton. It is the most basic building block of your website and provides the structure of a webpage.
HTML uses markup to annotate text, images, and other content for display on web pages and uses tags to separate the elements from each other. Examples of elements would, for instance, be <p> for a paragraph, or <img> for an image. Between these tags you’ll add your content or images, depending on what tag it is. Keep in mind, though, that there are many more that specify anything from headers, to footers, and section.
To explain how these tags work, it’s easier to use an example. Let’s say you want a list on your website of your favourite sports cars. You further decide that you’ll use bullet points in your list.
In this instance, the HTML code will look like this:
Note that the <ul> tag specifies that you want to create an unordered list, and each <li> tag specifies a list item. Also note that each tag has a closing tag, in this case </ul> and </li>. These tags are generally needed although you get some tags that don’t need them.
The above example will display the following content on the webpage:
How Does HTML Work In Web Design?
Although HTML may seem like the most basic part of your website, without it there wouldn’t be a site. Like we said earlier, it gives your website it’s skeleton where everything else is built from.
But it goes further than that. As it contains all your website’s content, it allows you to use keywords in your content so that people can find your site in search engines. Also, with semantic HTML you can specify the elements on your page very clearly.
These two facts combined, let’s search engines know what your site is about and makes it easier for users to find your site and your content.
What Is CSS?
After the skeleton is laid out, you must style it and that’s where CSS comes in. It is a stylesheet language used to describe the presentation of a document in HTML format. In simple terms, it makes your HTML code look good and if you want your website to look good, you’ll have to use CSS.
To style your HTML elements, you’ll use CSS properties that you set a value for. You then attach these properties to an HTML tag or class. Sounds complicated, doesn’t it? It really isn’t that hard.
Let’s look at an example.
If we look at our favourite sports car list again, suppose we want to make the first Lamborghini item yellow, the second Porsche item blue, and the third Ferrari item red. We’ll do that like this:
Here we give each item a class attribute. For sake of the example, we name the classes the colours we want them to be, but keep in mind that you can name them anything as long as they correspond to your selectors in your CSS file. Yes, that’s right, we’ll set out CSS in a different file that is linked to our HTML file.
In the CSS file, we’ll add colour to our list items like this:
Here you can see that you specify the selector by name. Because it’s a class we add a full-stop before the name and then we add the colour we want the text to be inside the brackets by specifying the value for the colour property.
When done, our list will display on the web page like this:
How CSS Works With HTML
You want your website to stand out from all your competitors so it’s important to create a beautifully designed website. Although we’ve just looked at a very basic example of CSS is action, you could basically do anything with CSS.
You can change text size, colour, and font. You can also work with images, set backgrounds, and overlays. You could even create animations to use on your site. Basically, the options are endless, and with CSS you can create a website to wow your visitors.
With scripting you can add functionality to your website like submit buttons that send users to another page and record their information in your database, form validation, simple calculators, and even animations.
With this code, once the page is opened, an alert will pop up displaying the message above to the user. Clever, right?
This information will then be displayed on screen by using HTML where each laptop will, for instance, be an element on the webpage. You’ll use CSS to style these elements by specifying the font, the colours, and the picture size and borders.
If a user registers on the site, the process will basically be reversed by taking the details the user enters from the HTML form and sending it to the database.