Open the contents index
This guide was updated on
Want to learn the bases of theHTML in order to use it within WordPress and customize your site? And you want to find out how to use the wl-thing”>CSS to manage the appearance of all the elements of your page? In this guide HTML is CSS you will find out how to do it, without having to study codes for hours. In addition, I leave you a summary table to be taken as a reference whenever you need it.
You can manage those small changes that drove you crazy, without resorting to the programmer!
If you want to deepen the study of these codes, follow our video courses HTML and CSS.
Ready for this new adventure? Street!
HTML and CSS help
As I mentioned before, L’HTML and the wl-thing”>CSS allow you to manage customizations that are sometimes difficult to achieve with the classic WordPress visual editor.
Open the edit page of any of your articles on your WordPress site. Now, go to the content pane. You will notice that you have two tabs, Visual, which is the selected one, and Text. If you select Text, you will see the coded version of what you did with the visual editor.
If you need to adjust some details that become too complicated with the visual editor, open the tab Text and works directly on the code.
What is HTML
L’HTML it’s a markup language, HyperText Markup Language, and this means that it serves to define what is the function of the various elements of a web page, from the point of view of structure and formatting.
With the’HTML let’s tell the various parts of the text if they are titles, subtitles, paragraphs, lists … or we can add images and links.
What is CSS
The CSS is another code that applies toHTML and is used to define the appearance of the elements of a web page. With the CSS we can establish colors, sizes, positions of the various elements.
The CSS it is therefore what gives shape and color to web pages.
Now that we understand what these codes are for, let’s get into the real one guide HTML is CSS and start to find out how to use them.
HTML Guide: HTML syntax
In order to be correctly interpreted by browsers (Google Chrome, Mozilla, Safari etc.), theHTML must respect a certain syntax. And for this, we have i tag, which mark where a certain element begins and ends.
THE tagtherefore serve to say, for example, “Here begins a paragraph … and here it ends.”.
Let’s see together what i is made up of tag.
To let the browser understand that we have inserted a tag, we use symbols
>. Inside we insert the name of the tag, which must always be in lowercase letters. For example, what defines a paragraph is the letter p:
With this tag, we tell the browser that a paragraph is starting.
To signal to the browser that the paragraph, or any other element, has ended, we use the slash / before the name of the tag:
So here is a complete paragraph:
Ciao! Benvenuto nella nostra guida HTML e CSS!
This kind of tag it is the classic one, that is, it is formed by a tag opening and closing.
But others tag they can be “empty”, that is they have a tag opening, within which all the values we need are inserted, and there is no need for tag closing time. This is the case with tag
, to insert images. It contains the path of the image to be inserted, and then adds a bar / at the end:
Maybe you noticed that when I showed you the tag
, I added a value. In fact, in addition to the name of the tag, I add the attribute src, that is, additional information. The attribute value is entered using the equal symbol and quotation marks:
The structure of a web page
The web page has its own precise structure. At the beginning there are all the information on the page. Then we have the part relating to the contents, inside which we find a further subdivision between head, main part and part at the bottom of the page.
We begin to see the initial section.
The first ever line of a document HTML is the declaration of the document type. Using
html>, we are telling the browser that we will use the version of HTML 5.
<html> ...tutto il contenuto della pagina... html>
From the second row, let’s start immediately with the first tag:
<html>. This identifies the beginning and end of the entire document HTML.
...informazioni sulla pagina...
contains information about the page, such as the title, author or links tag. Let’s see what they are.
The title of the page is shown in the title bar of the browser, but also in the results of searches on Google or other engines.
The meta tag they are all “empty”, that is, they don’t need to tag closing, and their value is defined by the attributes name is content.
The goal tag charset defines the type of characters used on the page. For Latin languages, it is used UTF-8. Setting the charset allows, for example, that accented vowels are displayed correctly.
Author indicates the name of the author of the site.
css" href="https://websitesareus.co.uk/css/style.css" />
it is not used to insert a link, but to link the document HTML to other resources, such as the file CSS. in the attribute href, we indicate the path of the file, so its settings CSS will be applied to our web page.
Other tags from the head section
In head we can then find the tag
, to insert scripts in different languages, or the tag