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.

The tags

To let the browser understand that we have inserted a tag, we use symbols < is >. 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: .

The attributes

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.

Doctype declaration

html>

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...

The tag 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.

The goal tag description is important for SEO: on the Google search results page, it appears below the title. This gives the visitor an idea of ​​the content of the page.

Author indicates the name of the author of the site.

css" href="https://websitesareus.co.uk/css/style.css" />

The tag 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

In head we have entered information on the page that remains "hidden". Now with the we define the section in which to insert the elements that make up the web page.

In order to manage the structure of a web page more comfortably, some have been introduced tag which have the function of indicating which function has a certain section of the page. Let's see what they are.

...testata della pagina...

In the section

we insert the main title of the site and the logo.

This part will be intended to contain a list of links, which will constitute the main menu.

Header is nav they are managed with WordPress with various systems. The header can be customized from the Customize panel, while menus are created from the section Appearance> Menu.

Customize WordPress panel

...contenuto principale della pagina...

We use the

to indicate the main contents.

The content you enter with the WordPress editor, in reality, only constitutes a section that is located within main.

L'