HTML Elements

An element in HTML begins and ends with an HTML tag. The content is inserted between the tags.

<tagname>Here is the content</tagname>

The element designates the entire section from the beginning of the tag to its end. Within elements, there can be subordinate elements.

<parentElement>
<subordinateElement>Here is content</subordinateElement>.
</parentElement>

Headings

In HTML, there are several ways to assign headings. Typically, the headings <h1> to <h6> are used.

<h1> marks here the most important heading

<h6> marks the least important heading

Each HTML heading has a default size, but you can adjust it with the "style" attribute of CSS, see the example below and the CSS element "font-size".

Flexible headings: works with |*GFV*|in the title.

Text blocks

Text blocks are marked in HTML with the <p> tag.

<p>Here is your text block</p>.

Paragraphs

You can use the <br> tag to insert a paragraph. This works as follows:

<p>Here is your<br> text block</p>

This is then displayed like this:

Here is your
Textblock

The tag <br> is an exception, as it does not need to be closed.

Backgrounds

There are several ways to set a background.

To set the background color, you can use the CSS property background color and the element value is set with an RGB code or hex code.

<body style="background-color: #efefef;">

Here <body> is an HTML element that drives the entire page and style is the code word that opens the way for CSS formatting. The CSS formatting then takes place between the quotes.

To set a background image use the CSS property background-image and the element value is then set with the URL of the image.

<body style="background-image: url('https://datalion.net/bild.jpg')">

Text formatting

Texts can also be displayed and formatted differently in HTML. The structure of the formatting is similar to that of the backgrounds.

The basic structure is again the following:

<tagname style="property:value;">

Property and value are CSS elements, which are explained in the CSS section.

Colors: With the CSS property color you can set the text color.

<h1 style="color: #ee2f12;">Here is your text</h1>

Result:

Here is your text

Fonts: The CSS property pointing to the fonts is font-family. Then instead of value, insert the font name.

<h1 style="font-family:verdana;">Here is your text</h1>

Text size: CSS property: font-size CSS value: percentage specification / specification in pixels.

<h1 style="font-size:300%;">Here is your text</h1>

<h1 style="font-size:12px;">Here is your text</h1>

Text-align: CSS property: text-align CSS values: {center, left, right, justify}

<h1 style="text-align:center;">Here is your text</h1>

Embed links

Links are marked in HTML with the <a> tag. Typically, a link embed looks like this:

<a href="https://www.ihre-url.com">Here is your link text</a>

The link text can be formatted like any text with colors, text types, text sizes, and alignments.

<a href="https://www.ihre-url.de" style="color: #ee2f12); font-weight:bold">Your text</a>

Buttons

Buttons were created in HTML with the following tag:

<button type="button">your text on the button</button>

These buttons can in turn be formatted with CSS. To do this, use the .button selector. The properties for the button selector are listed under the important properties.

Example of the CSS of a button. You can implement these adjustments in the project settings in the Tab Content at the subitem "Custom CSS Styles".

.button {
  background-color: #4CAF50;
  border: none;
  color: #ffffff;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}

Various HTML Elements

Here is your text

Kommentare