In this tutorial, I am going to teach you how to layout an article or post, using HTML and CSS from scratch. We are going to start from the "raw" text, and we are going to format and design it so that it is irresistibly attractive to read. We'll add a couple of illustrations, and reuse some parts to make standout sentences.
At first, the idea of this tutorial was to offer some tips and advice to ensure that an article or post looks professional, using the editor of our CMS: WordPress or whatever, because we can do this either using a classic visual editor of the so-called WYSWYG, like a modern block editor, Gutenberg, Elementor and all these "builder composers" that are available on the market.
But I finally decided to do it pure and simple code. The reason for this decision is that if you follow the tutorial, you will learn basics of Html and css basics that will be of great help to you even if in your daily life (it is also in mine) you work with a visual editor. Because you will understand much better how the structure, presentation and behavior of what you insert so easily in your article works.
As a developer, I deliver websites and blogs to clients whose content will be inserted later by them. Obviously, the use of CMS with its themes and templates does not imply that the person who uses them necessarily has technical knowledge; Anyone can write a post on a blog or social network adding photos, etc.
But I can show you that the result can be spectacular if you dedicate a little care to what you do, much more than taking the Word article, pasting the title and content, putting a photo and marking four bold letters (if you get there). to the latter).
Start laying out the article
Let's fuck this article about artificial intelligence which I have outlined using precisely one of them. We start, as you see, from the pure and simple text with just a few line breaks.
Add HTML markup
If you have previewed the text in your browser (you can drag the txt file into the browser to do this), you may have noticed that the accents don't look right. They're fine, don't worry, but at the moment, they don't look good. For example, download the file, and open it in your Notepad (quick mode, right click on the file and "open with..."), Textedit, in Visual Studio Code, or the text editor of your choice.
Once the file is open, before doing anything, you are going to save it as "el-boom-de-las-ia.html". Or with whatever name you want, but make sure you save it as an html file type.
Now, let's start adding our HTML markups. The first one you must add is, at the beginning of the entire file: <html> and at the end of everything, </html>. This is the root opening and closing tag of a valid html document (if it does not have these tags, it is no longer valid). The HTML language consists of opening markups (example <marca> and closing marks </marca>. You mark things as <desde aquí>my content</hasta_aqui>, to define what each block is.
Remember that HTML is a representative language: It is used to mark and structure data, but it is NOT a programming language. You cannot program anything in HTML.
Next, we start by adding labels to the text. The first line is the main title of the article, so we are going to mark it as the main heading (heading 1) with the H1 tag:
The boom of AI in consumer technologiesWe are going to label the rest of the paragraphs, as they are, with the P tag for "paragraph", like this:
The artificial intelligence boom refers to an ongoing period of rapid and unprecedented development in the field of artificial intelligence, with the generative AI race being a key component of this boom, which began in earnest with the founding of OpenAI. in 2016 or 2017¹. AI is already the main driver of emerging technologies such as big data, robotics and IoT, not to mention generative AI, with tools such as ChatGPT and AI art generators gaining widespread attention, and will continue to act as a technological innovator in the foreseeable future.So, everyone the same with <p> and </p>. When we write text in HTML, although in our editor we can simply press enter and make as many line breaks as we want, when we preview the file in the browser, these line breaks will be ignored. In HTML, the line break occurs either after the closing of a block (The closing of a paragraph with </p> , for example) or we can also create forced line breaks, "break a line" with the tag <br> (abbreviation of break, line-break).
The label <br> it writes itself. That is, it does not have to be written as <br></br>. BR is a “self-sealing” label. There are other labels that go alone without closure such as IMG, INPUT, but you will learn this little by little.
If we wanted to force one or more line breaks in the middle of a paragraph, it would be as shown below:
The AI boom refers to an ongoing period of rapid and unprecedented development in the field of artificial intelligence, with the generative AI race being a key component of this boom, which began in earnest with the founding of OpenAI. in 2016 or 2017¹.
<!-- Estas dos etiquetas
fuerzan 2 saltos de línea -->
AI is already the main driver of emerging technologies such as big data, robotics and IoT, not to mention generative AI, with tools such as ChatGPT and AI art generators gaining widespread attention, and will continue to act as a technological innovator in the foreseeable future.Do you see that clear text that is preceded by « » ? That's a brand too. A comment mark. It is used to put what you want in your code, without it being interpreted. In this way, we add our notes to the code, without that text appearing on the screen.
Depending on the context and morphology of our writing, we may need a simple line break, or close another paragraph. There is a visual difference: A line break skips the same space occupied by any additional line. On the other hand, a paragraph creates (and must create) a space with respect to the previous paragraph.
When we have finished determining and marking all our paragraphs, we will mark one of them as a secondary title (a subtitle that will act as a separator for the second part of the article). In an HTML page there should never be more than one H1 tag, which is why we use H2 like this, on the line you see:
As for the long term, it is difficult to predict exactly what this technology will have in store for us. However, it is clear that AI is constantly changing our world and will continue to do so in the future.
What could the future of humanity hold for us living with AI.
There are many hypotheses and ideas about what it will be like to live with AIs in the future. An expert on the subject, Idoia Salazar, president and founder of the Observatory of the Social and Ethical Impact of Artificial Intelligence (Odiseia), has stressed that "we must learn to live" with this technology and "put certain ethical standards so that this coexistence be healthy.”At this point, our code should look as shown below. The number of paragraphs can be whatever we want, depending on whether we have made our divisions.
It is advisable for text that is going to be read on the screen, that we give rest to the reading with more or less short paragraphs (unlike paper, reading on the screen has a different speed for the human eye and is much more tiring). It is also not necessary for the text to look like a telegram, let's not go overboard. I leave it to your free will, but it should be something like this:
https://cachitoswp.com/tutoriales/maquetacion-articulo-html-css/maquetacion-articulo-html-css-1.html
<html>
The boom of AI in consumer technologies
The AI boom refers to an ongoing period of rapid and unprecedented development in the field of artificial intelligence, with the generative AI race being a key component of this boom, which began in earnest with the founding of OpenAI. in 2016 or 2017¹.
AI is already the main driver of emerging technologies such as big data, robotics and IoT, not to mention generative AI, with tools such as ChatGPT and AI art generators gaining widespread attention, and will continue to act as a technological innovator in the foreseeable future.
In the short term, generative AIs can already answer questions, write poetry, generate computer code, and hold conversations. They are being implemented in conversational formats such as ChatGPT and Bing. But that won't last long. Microsoft and Google have already announced plans to incorporate these AI technologies into their products. You can use them to draft an email, automatically summarize a meeting, and perform many other cool tricks.
In the medium term, many experts believe that AI will make some workers, including doctors, lawyers and computer programmers, more productive than ever.
They also believe some workers will be replaced. "This will affect tasks that are more repetitive, more formulaic, more generic," said Zachary Lipton, a professor at Carnegie Mellon who specializes in artificial intelligence and its impact on society. "This may free up some people who are not good at repetitive tasks. At the same time, there is a threat to people who specialize in the repetitive part."
As for the long term, it is difficult to predict exactly what this technology will have in store for us. However, it is clear that AI is constantly changing our world and will continue to do so in the future.
What could the future of humanity hold for us living with AI.
There are many hypotheses and ideas about what it will be like to live with AIs in the future. An expert on the subject, Idoia Salazar, president and founder of the Observatory of the Social and Ethical Impact of Artificial Intelligence (Odiseia), has stressed that "we must learn to live" with this technology and "put certain ethical standards so that this coexistence be healthy.”
As far as science fiction ideas go, there are many films that explore the theme of artificial intelligence and how it could affect our lives in the future.
For example, in the movie "Her" (2013), the protagonist falls in love with an operating system voiced by Scarlett Johansson.
In "The Matrix" (1999), humans are controlled by evil machines.
In "Ex Machina" (2015), a programmer is invited to administer a Turing test to a humanoid robot with advanced artificial intelligence.
</html>Finishing structuring the HTML document is vital so that it is interpretable properly for a web browser. We are going to add the minimums, that is, within the html document, add and separate the header data (head) from the document body data (body). A well-structured web page must have its HEAD part and its BODY part. Until now, we had simply been adding things within the html tag, our titles and paragraphs. If we preview the previous code in the browser, it will be displayed as is, nothing happens, there is no error message (html never gives errors, simply a website is fine, or it is not, it looks good, or it doesn't look good. )
Below I add the structure that is missing from the document, and I summarize what we have done using comments; This way we will have a more global view of the document:
<html Lang="is">
<head>
</html></span><span style="color: #D8DEE9FF">The boom of AI in consumer technologies</span><span style="color: #81A1C1">
<meta yam="description" content="How artificial intelligence has burst into our daily lives, and what we can obtain from them in the near future">
</head>
<body>
The boom of AI in consumer technologies
The boom in artificial intelligence refers to...
Our 2nd level subtitle...
(...) to a humanoid robot with advanced artificial intelligence.
</body>
</html>Note that so that you have better readability, and for a better visual reference of "where" and "to where" the labels go, as well as "what goes inside what", I am making use of tabs, and some jumps of extra line.
When you work with code, this is sacred so as not to end up with presbyopia. Not only must you know at all times how you are "nesting" the labels, but you must also be as neat as possible for when you return to this project and must reposition yourself. It could be you or, in the work context, another person.
No matter how simple a representation markup language like HTML may be, in which, as we mentioned, there is no programmatic logic, when there are many marks and a lot of content, it can become convoluted.
That said, let's analyze the previous fragment. Let's go first with the HEAD part and an addition that I have put in the initial HTML tag:
<html Lang="is">
<head>
</html></span><span style="color: #D8DEE9FF">The boom of AI in consumer technologies</span><span style="color: #81A1C1">
<meta yam="description" content="How artificial intelligence has burst into our daily lives, and what we can obtain from them in the near future">
</head>
<body>In HTML I have added the lang=»es», to tell the browser that the content of this page is in Spanish. This is necessary, although it seems very automatic, which should be like autodetection, we must say in what language what is written is.
Right below we have added the HEAD. Between and , are added:
- Metadata of the document, data NOT directly visible on the web page, but that helps to classify the information.
- CSS language styles required for the correct display of the HTML document. These can be written directly into the file, like the rest of the text, or linked to an external file.
- Javascript language scripts: Javascript is the programming language that Internet browsers interpret to apply logic and interactivity to HTML web pages. Like CSS, scripts can be written in the same file.
Let's go with the first, and then with the second, we are going to leave the third for now, since for our layout at the moment scripts are not necessary.
HEAD metadata
The metadata is not visible on the page. They will not appear in our design. Imagine that the page is a closed dossier in a file in a megalibrary. Well, the metadata would be a label in the dossier, the typical little tab that stands out in a classifier.
Thanks to the metadata, and in combination with the context and content of the article that the web page contains, it can be found automatically by search engines (They are like Google, but there are thousands of them 😁).
I have added, as you can see, title (which is a tag with opening and closing) and the meta description; METAs do not have a closure in their syntax, they are used like this:
<meta yam="description" content="Short and concise description of the page content">Where is this information seen?
On the one hand, the TITLE (which can be the same or different from what we have put in the H1 tag) will appear in the browser tab when we have the document or page loaded open. It will also be used as the name of the "bookmark" if we add the page to our favorites:
On the other hand, if our site is indexed by search engine robots, which crawl the web as if they were millions of spiders moving through the global web of the Internet, our title and description would appear like this in the results of a search:
The page that a search engine returns to us when we have made a query, the results page, is called by the acronym SERP (Search Engine Result Page). And the little piece that we show with our title and meta description is the SERP Snippet.
Many people believe that this snippet is generated automatically, but this is not entirely true. I won't delve into the topic today, but get used to the idea that adding TITLE and META DESCRIPTION at a minimum to your page's metadata is SACRED.
Returning to the layout: The LAYOUT of the document
Having understood the not directly visible part of the website, we return to our document, which currently, if we open it with the browser, looks more or less like this:
Poor design, right? Well, one thing that is certain is that it is perfectly readable. But what the browser is doing is using some style rules that are built in by default (and depending on the browser, these may differ slightly). These rules are therefore a default font (Times New Roman or "serif font") and pre-assigned font sizes, line spacing and bodies (normal, bold) for paragraphs and titles. Default text alignment to the left, and as you can see, no margin or maximum paragraph length (which is VERY annoying)
Did you know? The lines of text should not contain more than approximately 13-15 words, because otherwise the person will get lost and have a hard time knowing which line they were on.
How fonts work on web pages
Basically, for the browser to be able to display the page in a specific font, this font must be installed on the computer or phone from which the page is being requested.
The Times font or a similar type always comes pre-installed on any operating system (Windows, Apple, Linux, Android...).
If we now went to our file explorer, and deleted this font, the browser would use another available one.
This is called "fallback"; We can tell you, in our CSS styling language:
«We are going to use this font, and if it is not there, use this other one, and if not, this other one, and if not, finally the one you find available»
What we do here is define a FONT-STACK, or a stack of fonts to use.
Getting started with CSS
We are going to add in the HEAD part of the code, before the closure of HEAD, the tag </head> <body>
Leave a Reply