Components of a website. From WordPress to Jekyll 2

At previous article I started to explain the differences between three types of tools for creating a blog and why those differences made me decide to abandon the option I was using; WordPress, in favor of a static site builder like Jekyll.

So that the advantages and disadvantages of each are better understood We need to define some terms and illustrate them with an example, a hypothetical blog about gardening.

Components of a website

The three fundamental ingredients of a website are:

• HTML: Provides the basic structure of the site
• CSS: Handles the representation of the content.
• Javascript: Manages the interactivity of different parts of the site.

HTML

HTML stands for HyperText Markup Language: It is called "Markup Language" because uses tags to identify the different types of content and the purposes that each of them has for the web. You can already pass for an expert looking with contempt at those who say it is a programming language.

For example, the current specification, HTML5 uses the following tags

• head to indicate that there is technical information about the document in that space.
• body to frame the content to be displayed on the page.
• article for main content
• aside for secondary content
• footer for the bottom content of the page.

In our alleged gardening blog we would have something like this.

I put it as an image because the security policies of Linux Adictos They do not allow HTML code to be included.

If you copy this text into the text editor and save it as index.html, you will see the text This is my gardening blog.

The first line of the code tells the browser that what follows has to be interpreted as HTML, the second line indicates that the tags begin here, and that the language of the site is Argentine Spanish. Inside head the character set and the blog title are indicated.

In the section body we see that the phrase is enclosed in another label,

This tells the browser that it has to treat it as a paragraph.

In addition to character encoding, the meta parameter allows the incorporation of other types of information that, although not seen in the browser, is useful for search engines.

For example, the meta name author content parameter identifies the author of a page, while the meta name description content parameter summarizes the page content for search engines.

There are two more elements that go inside head, which are the links to the stylesheets and Javascript code.

CSS

If you remember our example web page, only the phrase was displayed "This is my gardening blog." Of course a website has to be more attractive than a stylesheet is needed.

The style sheets are those that establish how the different elements of the page will be displayed.

For example, if we want our text to be displayed with a black background and yellow letters, we create a file called my-style-css.ss and write these lines

p {
background-color: black;
colour: yellow;
}

We change the code of the example page to:

Remember that for it to work, both files must be in the same folder.

javascript

Although today, HTML5 and CSS can give a lot of animation to a site. In case we need more complex interactivity we must resort to Javascript.

javascript is a programming language that allows the content of a website to be modified according to user behavior.

On a website that will remain static, the effort of creating pages from scratch may be offset by low resource consumption and customizability. However, a blog is a special type of website that requires constant attention. And the key is the quantity and variety of the content. Hence, everything that can be automated must be automated. It is true that the information common to all pages can be copied and pasted. But trust me, mistakes are made and they are hard to find.

Note the amount of code needed to display a single line and change its color. An average blog post has 300 words, a couple of captions, and images. And you have to try to make all that look good on different screen formats.

In the next articles we will see how to handle this complexity with WordPress, Jekyll and the framework Bootstrap