<![CDATA[support.rohil.it - Portal]]> https://support.rohil.it/ Wed, 10 Jun 2026 07:14:52 +0000 MyBB <![CDATA[Festplattenprobleme]]> https://support.rohil.it/thread-10.html Thu, 22 Jun 2023 09:10:26 +0200 rohilit]]> https://support.rohil.it/thread-10.html Festplattencrashs / Problemen.

Aber auch um die eindeutigen Signale, wenn es bereits zu spät ist.

Der Dramatik halber fangen wir jedoch mit dem geringsten Schmerzniveau an.


1.1 Festplattenprobleme frühzeitig erkennen

Wir haben verschiedene Möglichkeiten Festplattenprobleme frühzeitig zu erkennen:

1.) via S.M.A.R.T Funktion des BIOS / auch in Windows auslesbar.

Self-Monitoring, Analysis and Reporting Technology (SMART bzw. S.M.A.R.T., deutsch System zur Selbstüberwachung, Analyse und Statusmeldung) ist ein Industriestandard zur Überwachung von Festplattenlaufwerken (HDD) und Solid-State-Drives (SSD) und dient der Vorhersage eines möglichen Ausfalls des Speichermediums.

Voraussetzung für die Nutzung dieser Funktion:

S.M.A.R.T ist BIOS-seitig aktiviert
BIOS via F2 oder ENTF vor dem Booten des Systems öffnen und dann folgendermaßen navigieren:
S-ATA oder Festplattenmenü -> Status oder Health-Optionen suchen -> SMART finden und aktivieren, sofern deaktiviert.
Danach das BIOS verlassen und die Einstellungen übernehmen.
Beim erneuten Hochfahren des Systems sollte der SMART Status aller Festplatten angezeigt werden.

Über Samsung Magican Tools oder andere Festplattendienstprogramme kann der SMART Status jederzeit auch über Windows,
also im laufenden Betrieb geprüft werden. Hier gibt es eindeutige Warnsignale wie Temperatur z.B, welche oftmals rot oder auffallend markiert
dargestellt werden, sofern es sich dort um problematische Werte handeln sollte.]]> Festplattencrashs / Problemen.

Aber auch um die eindeutigen Signale, wenn es bereits zu spät ist.

Der Dramatik halber fangen wir jedoch mit dem geringsten Schmerzniveau an.


1.1 Festplattenprobleme frühzeitig erkennen

Wir haben verschiedene Möglichkeiten Festplattenprobleme frühzeitig zu erkennen:

1.) via S.M.A.R.T Funktion des BIOS / auch in Windows auslesbar.

Self-Monitoring, Analysis and Reporting Technology (SMART bzw. S.M.A.R.T., deutsch System zur Selbstüberwachung, Analyse und Statusmeldung) ist ein Industriestandard zur Überwachung von Festplattenlaufwerken (HDD) und Solid-State-Drives (SSD) und dient der Vorhersage eines möglichen Ausfalls des Speichermediums.

Voraussetzung für die Nutzung dieser Funktion:

S.M.A.R.T ist BIOS-seitig aktiviert
BIOS via F2 oder ENTF vor dem Booten des Systems öffnen und dann folgendermaßen navigieren:
S-ATA oder Festplattenmenü -> Status oder Health-Optionen suchen -> SMART finden und aktivieren, sofern deaktiviert.
Danach das BIOS verlassen und die Einstellungen übernehmen.
Beim erneuten Hochfahren des Systems sollte der SMART Status aller Festplatten angezeigt werden.

Über Samsung Magican Tools oder andere Festplattendienstprogramme kann der SMART Status jederzeit auch über Windows,
also im laufenden Betrieb geprüft werden. Hier gibt es eindeutige Warnsignale wie Temperatur z.B, welche oftmals rot oder auffallend markiert
dargestellt werden, sofern es sich dort um problematische Werte handeln sollte.]]> <![CDATA[Typische Drucker und Scanner Probleme]]> https://support.rohil.it/thread-9.html Sat, 04 Jun 2022 09:40:37 +0200 rohilit]]> https://support.rohil.it/thread-9.html Die typischsten Drucker und Scannerprobleme unter Windows

1.1 Druckerprobleme der einfachen Art

Wenn der Drucker bei einem Druckauftrag hängt oder einfach nicht drucken will, gibt es mehrere Möglichkeiten, das Problem zu beheben. Einerseits kann es ein Hardwareproblem sein, wie z.B ein Papierstau oder ein defektes USB Kabel. Andererseits kann es auch an hängengebliebenen Druckaufträgen liegen, die die Druckwarteschlange blockieren. Hier nun erstmal mehr zu diesen doch recht simpel zu behebenden Problemen.]]> Die typischsten Drucker und Scannerprobleme unter Windows

1.1 Druckerprobleme der einfachen Art

Wenn der Drucker bei einem Druckauftrag hängt oder einfach nicht drucken will, gibt es mehrere Möglichkeiten, das Problem zu beheben. Einerseits kann es ein Hardwareproblem sein, wie z.B ein Papierstau oder ein defektes USB Kabel. Andererseits kann es auch an hängengebliebenen Druckaufträgen liegen, die die Druckwarteschlange blockieren. Hier nun erstmal mehr zu diesen doch recht simpel zu behebenden Problemen.]]> <![CDATA[Wordpress Sicherheit]]> https://support.rohil.it/thread-8.html Sat, 04 Jun 2022 09:38:33 +0200 rohilit]]> https://support.rohil.it/thread-8.html Wordpress Sicherheitskonzepte

1.1 Wordpress Plugin "Wordfence"

Das Wordpress Plugin Wordfence sichert eine Wordpress Installation gegen Angriffe aus dem Internet ab, muss allerdings erstmal korrekt eingestellt werden, damit es seinen vollen Schutz entfalten kann. Zudem sollte man regelmäßig auch manuelle Scans ausführen und natürlich auch mit einem Backup Plugin regelmäßige manuelle oder automatisierte Backups machen. Das Plugin kann im Backend (Admin-Bereich) von Wordpress unter Plugins, Plugins installieren, "Wordfence" eingeben installiert werden.
]]> Wordpress Sicherheitskonzepte

1.1 Wordpress Plugin "Wordfence"

Das Wordpress Plugin Wordfence sichert eine Wordpress Installation gegen Angriffe aus dem Internet ab, muss allerdings erstmal korrekt eingestellt werden, damit es seinen vollen Schutz entfalten kann. Zudem sollte man regelmäßig auch manuelle Scans ausführen und natürlich auch mit einem Backup Plugin regelmäßige manuelle oder automatisierte Backups machen. Das Plugin kann im Backend (Admin-Bereich) von Wordpress unter Plugins, Plugins installieren, "Wordfence" eingeben installiert werden.
]]> <![CDATA[Oft genutzte Plugins und Themes]]> https://support.rohil.it/thread-7.html Sat, 04 Jun 2022 09:30:51 +0200 rohilit]]> https://support.rohil.it/thread-7.html Übersicht der wichtigsten Plugins und Themes


Plugins:

  • Classic Editor (ersetzt den Block Editor)

  • Page Builder von SiteOrigin (erweitert den Editor um viele Funktionen)

  • SiteOrigin Widgets Bundle (weitere Editierfunktionen)

  • Contact Form 7 (Erstellen eines Formmailers resp. Kontaktformulars)

  • Wordfence (Website-Absicherung)

  • All-in-One WP Migration (Backup Tool)
]]> Übersicht der wichtigsten Plugins und Themes


Plugins:

  • Classic Editor (ersetzt den Block Editor)

  • Page Builder von SiteOrigin (erweitert den Editor um viele Funktionen)

  • SiteOrigin Widgets Bundle (weitere Editierfunktionen)

  • Contact Form 7 (Erstellen eines Formmailers resp. Kontaktformulars)

  • Wordfence (Website-Absicherung)

  • All-in-One WP Migration (Backup Tool)
]]> <![CDATA[Netwerk Basics]]> https://support.rohil.it/thread-6.html Sat, 04 Jun 2022 00:57:57 +0200 rohilit]]> https://support.rohil.it/thread-6.html Netwerk Basics und der Einstieg ins Thema

Was ein Netzwerk ist brauche ich nicht zu erklären, denke ich.

Dafür muss es hier aber darum gehen, welche verschiedene Formen von Netwerken es gibt und welche Vor und Nachteile diese haben. Ebenso möchte ich gerne die entsprechenden Fachbegriffe erklären und einige grundlegende Dinge und Voraussetzungen von gut funktionierenden und stabilen Netzwerken ausführen.]]> Netwerk Basics und der Einstieg ins Thema

Was ein Netzwerk ist brauche ich nicht zu erklären, denke ich.

Dafür muss es hier aber darum gehen, welche verschiedene Formen von Netwerken es gibt und welche Vor und Nachteile diese haben. Ebenso möchte ich gerne die entsprechenden Fachbegriffe erklären und einige grundlegende Dinge und Voraussetzungen von gut funktionierenden und stabilen Netzwerken ausführen.]]> <![CDATA[Wordpress Basics]]> https://support.rohil.it/thread-5.html Sat, 04 Jun 2022 00:38:49 +0200 rohilit]]> https://support.rohil.it/thread-5.html Wordpress Basics und mehr


Was ist Wordpress eigentlich?

Wordpress ist ein sogenanntes CMS. Das steht für Content Management System. Muss ich das wirklich übersetzen? Ich tue es einfach mal: Inhaltsmanagementsystem. Inhalts Management System. Sprich es ist genau Folgendes:

Ein einfaches System um Inhalte (seien es Texte, Bilder, Kategorien und Blogposts etc) zu managen. Wie geschieht das genau? Wordpress nutzt eine sogenannte MySql Datenbank zum speichern der ganzen Daten und basiert nicht auf HTML sondern auf PHP. Daher braucht es einen Webserver auf dem eine aktuelle und stabile Version von PHP läuft und ebenso eine MySql Datenbank, um überhaupt zu laufen. Das erledigen wir über unseren Hoster All Inkl bzw. unsere Einstellungen dort. Zuerst wird der Webspace registriert. Dann wird die Software installiert und gleichzeitig eine entsprechende Datenbank (MySql Datenbank) angelegt. Anschließend loggen wir uns in das ACP (Admin Control Panel) ein und beginnen schon mit den ersten Schritten. Installation der wichtigsten Plugins und Widgets sowie der Wahl eines entsprechenden Themes. Und jetzt muss ich erklären, was Plugins sind, was Widgets sind und was Themes sind. Oder?
Ja! Das muss ich.


Plugins

Ein Plugin ist eine Erweiterung für das System Wordpress, welches dafür sorgt, dass erweiterte Funktionen implementiert werden. Vereinfacht ausgedrückt erweitert so ein Plugin den Funktionsvielfalt des Systems. Es bringt Wordpress die gewünschte Funktion(en), die benötigt werden, aber noch nicht in der Standartinstallation inklusive sind. Das kann z.B ein Kontaktformular sein, über welches der User einfach und schnell Kontakt zum Webseitenbetreiber aufnehmen kann. Oder eine schöne Galerie mit den schönsten Fotos.

Widgets

Ein Widget ist ein eigenes Element, welches in der Sidebar (der Seitenleiste) platziert werden kann oder eben im Footer (der untere Bereich einer Website)
Man kann hier z.B ein seperates Menü hinzufügen, oder eine Auflistung der aktuellen Blog Einträge. Oder eine Schlagwort-Wolke. Oder was auch immer.


Themes

Ein Theme ist das "Thema" der Webseite, allerdings nur visuell betrachtet. Es bestimmt die Farbgebung, die Schriftart und Größe, sprich das gesamte
Aussehen der Website. Es gibt für so ziemlich jeden Zweck ein passendes Theme und mit etwas Können kann man diese fertigen Themes auch nochmals
an die eigenen Bedürfnisse anpassen. Man kann auch sagen, dass ein Theme so etwas ist, wie ein Anstrich eines Hauses oder die Klamottenauswahl eines Menschen.]]> Wordpress Basics und mehr


Was ist Wordpress eigentlich?

Wordpress ist ein sogenanntes CMS. Das steht für Content Management System. Muss ich das wirklich übersetzen? Ich tue es einfach mal: Inhaltsmanagementsystem. Inhalts Management System. Sprich es ist genau Folgendes:

Ein einfaches System um Inhalte (seien es Texte, Bilder, Kategorien und Blogposts etc) zu managen. Wie geschieht das genau? Wordpress nutzt eine sogenannte MySql Datenbank zum speichern der ganzen Daten und basiert nicht auf HTML sondern auf PHP. Daher braucht es einen Webserver auf dem eine aktuelle und stabile Version von PHP läuft und ebenso eine MySql Datenbank, um überhaupt zu laufen. Das erledigen wir über unseren Hoster All Inkl bzw. unsere Einstellungen dort. Zuerst wird der Webspace registriert. Dann wird die Software installiert und gleichzeitig eine entsprechende Datenbank (MySql Datenbank) angelegt. Anschließend loggen wir uns in das ACP (Admin Control Panel) ein und beginnen schon mit den ersten Schritten. Installation der wichtigsten Plugins und Widgets sowie der Wahl eines entsprechenden Themes. Und jetzt muss ich erklären, was Plugins sind, was Widgets sind und was Themes sind. Oder?
Ja! Das muss ich.


Plugins

Ein Plugin ist eine Erweiterung für das System Wordpress, welches dafür sorgt, dass erweiterte Funktionen implementiert werden. Vereinfacht ausgedrückt erweitert so ein Plugin den Funktionsvielfalt des Systems. Es bringt Wordpress die gewünschte Funktion(en), die benötigt werden, aber noch nicht in der Standartinstallation inklusive sind. Das kann z.B ein Kontaktformular sein, über welches der User einfach und schnell Kontakt zum Webseitenbetreiber aufnehmen kann. Oder eine schöne Galerie mit den schönsten Fotos.

Widgets

Ein Widget ist ein eigenes Element, welches in der Sidebar (der Seitenleiste) platziert werden kann oder eben im Footer (der untere Bereich einer Website)
Man kann hier z.B ein seperates Menü hinzufügen, oder eine Auflistung der aktuellen Blog Einträge. Oder eine Schlagwort-Wolke. Oder was auch immer.


Themes

Ein Theme ist das "Thema" der Webseite, allerdings nur visuell betrachtet. Es bestimmt die Farbgebung, die Schriftart und Größe, sprich das gesamte
Aussehen der Website. Es gibt für so ziemlich jeden Zweck ein passendes Theme und mit etwas Können kann man diese fertigen Themes auch nochmals
an die eigenen Bedürfnisse anpassen. Man kann auch sagen, dass ein Theme so etwas ist, wie ein Anstrich eines Hauses oder die Klamottenauswahl eines Menschen.]]> <![CDATA[HTML Basics - Die wichtigsten Befehle]]> https://support.rohil.it/thread-4.html Sat, 04 Jun 2022 00:29:21 +0200 rohilit]]> https://support.rohil.it/thread-4.html HTML Befehle: Übersicht nach Gruppen geordnet

HTML-Befehle werden als Tags und Attribute bezeichnet. Tags bilden ein Element und bestehen – bis auf wenige Ausnahmen – jeweils aus einem öffnenden und einem schließenden Tag. Das schließende Tag beinhaltet einen Schrägstrich:

Code:
[color=#ffffff][size=1][font=Courier]Beispiel: [size=1]<[color=#f5c26b]p[/color]>[/size] Das ist ein Absatz [size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]

Das Tag teilt dem Browser mit, welche Information sich innerhalb dessen befindet. Im gezeigten Beispiel handelt es sich um ein Absatz-Tag.
Einem Element kann neben dem Tag auch ein Attribut zugewiesen werden: Dieses gibt zusätzliche Informationen über ein bestimmtes Element. Es besteht aus einem Attribut-Namen und der spezifischen Bezeichnung.


Code:
[color=#ffffff][size=1][font=Courier][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]Beispiel: [size=1]<[color=#f5c26b]p[/color] class=[color=#f5c26b]"content"[/color]>[/size] Das ist ein Absatz. [size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]

Dem zuvor definierten p-Element wurde nun zusätzlich das [i]class[/i]-Attribut mit dem Namen „content“ zugeordnet. Durch die Bestimmung von Attributen können weitere Informationen im HTML-Doc definiert oder später im CSS darauf zurückgegriffen werden.
[i]Nachfolgend finden Sie eine nach Gruppen geordnete Übersicht der wichtigsten HTML-Befehle:[/i]

Grundstruktur

TAG

BEDEUTUNG

<!DOCTYPE html>
<html> </html>
  • Eröffnet das HTML5-Dokument.
  • Kann in älteren Versionen anders aussehen.
<head> </head>
  • Enthält in der Regel Informationen über die Seite.
  • Beinhaltet das Title-Element.
<meta>
  • Zusatzangaben für die Verwaltung des HTML-Dokuments.
  • Befindet sich im [i]head[/i].
<title> </title>
  • Enthält den Titel der Seite.
  • Wird in der Titelleiste oben im Browser ausgegeben.
<body> </body>
  • Hauptfenster im Browser (außer Titel und Header).
<header> </header>
  • Bereich für den Kopf, also den Beginn der Seite ([i]nicht[/i] [i]head![/i]).
<nav> </nav>
  • Navigationsbereich.
<section> </section>
  • Kann genutzt werden, um Elemente zu einer Gruppe zusammenzufassen.
<article> </article>
  • Inhaltsbereich.
<footer> </footer>
  • Fußbereich der Seite.

Beispiel: Grundgerüst für ein HTML-Dokument

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]  [size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]    [size=1]<[color=#f5c26b]title[/color]>[/size][size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]  [size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]  [size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]  [size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]

Textelemente
Textelemente können sowohl struktureller als auch semantischer Natur sein. Strukturelle Tags zeichnen Elemente wie etwa Überschriften oder Absätze aus und können diese oberflächlich gestalten. Mit semantischen Tags hingegen werden zusätzliche Informationen über die Art des Inhaltes gegeben (z. B. Zitat).

Strukturelles Markup

TAG

BEDEUTUNG

<h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5>, <h6> </h6>
  • h-Tags zeichnen Überschriften aus.
  • h1 ist die Hauptüberschrift, h2 bezeichnet Zwischenüberschriften.
  • Tags werden nach Rangordnung unterschiedlich groß dargestellt.
  • h6 ist am kleinsten.
<p> </p>
  • Kennzeichnet einen Absatz.
 
<b> </b>
  • Fettschrift (bold).
  • Kann für einzelne Wörter oder ganze Absätze genutzt werden.
<i> </i>
  • Kursiv ([i]italic)[/i].
  • Kann für einzelne Wörter oder ganze Absätze genutzt werden.
<sup> </sup>
  • Hochgestellte Zeichen z.B. 22
<sub> </sub>
  • Tiefgestellte Zeichen z.B. H2O
<br>
  • Erzwingt Umbruch.
<hr>
  • Erzeugt optische Trennlinie zwischen Inhalten.

Beispiel für strukturelles Markup:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h1[/color]>[/size]Das ist eine Überschrift[size=1]</[color=#f5c26b]h1[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h2[/color]>[/size]Das ist eine Zwischenüberschrift[size=1]</[color=#f5c26b]h2[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size]Das ist ein [size=1]<[color=#f5c26b]b[/color]>[/size]Absatz.[size=1]</[color=#f5c26b]b[/color]>[/size][size=1]</[color=#f5c26b]p[/color]>[/size][size=1]<[color=#f5c26b]hr[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size] Hier wird ein [size=1]<[color=#f5c26b]br[/color]>[/size] Umbruch erzwungen.[size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[Bild: strukturelles-Markup-html.png?width=1099...p-html.png]

Semantisches Markup

TAG

BEDEUTUNG

<strong> </strong>
  • Zeichnet besonders wichtigen Inhalt aus.
  • Wird meist fett angezeigt.
<em> </em>
  • Kennzeichnet eine semantische Hervorhebung.
  • Wird oft [i]kursiv[/i] angezeigt.
<blockquote> </blockquote>
  • Kennzeichnet ein Zitat (ganzen Absatz).
<q> </q>
  • Kennzeichnet ein Zitat innerhalb des Textes.

Beispiel für semantisches Markup:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h1[/color]>[/size]Das ist eine Überschrift[size=1]</[color=#f5c26b]h1[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h2[/color]>[/size]Das ist eine Zwischenüberschrift[size=1]</[color=#f5c26b]h2[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size]Das ist ein [size=1]<[color=#f5c26b]strong[/color]>[/size]Absatz.[size=1]</[color=#f5c26b]strong[/color]>[/size][size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size] Hier folgt eine [size=1]<[color=#f5c26b]em[/color]>[/size] Hervorhebung.[size=1]</[color=#f5c26b]em[/color]>[/size][size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]blockquote[/color]>[/size] "Hier folgt ein Zitat." [size=1]</[color=#f5c26b]blockquote[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[Bild: semantisches-Markup-html.png?width=898&n...p-html.png]
Listen und Tabellen

Listen unterscheiden sich in HTML in geordnete, ungeordnete sowie Definitionslisten. Sie lassen sich auch ineinander verschachteln. Neben Listen können Sie mit HTML auch Tabellen konfigurieren.

TAG

BEDEUTUNG

<ol> </ol>
  • Geordnete Liste.
  • Wird mit Ordnungszahlen ausgewiesen.
<ul> </ul>
  • Ungeordnete Liste.
  • Wird mit Aufzählungszeichen ausgewiesen.
<li> </li>
  • Listeneintrag.
  • Jedes Element einer Liste wird mit li-Tag angeführt.
<dl> </dl>
  • Definitionsliste.
<dt> </dt>
  • Definitionsbegriff.
<dd> </dd>
  • Definitionsbeschreibung.
<table> </table>
  • Eröffnet eine Tabelle.
<caption> </caption>
  • Definiert eine Tabellenüberschrift.
<tr> </tr>
  • Tabellenzeile.
  • Steht zu Beginn jeder neuen Tabellenzeile.
<td> </td>
  • Tabellendaten.
<th> <th>
  • Überschrift in einer Tabellenzeile.

Beispiel für die Verschachtelung einer geordneten und ungeordneten Liste:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]ol[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]li[/color]>[/size] Erster Punkt [size=1]</[color=#f5c26b]li[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]li[/color]>[/size] Zweiter Punkt [size=1]</[color=#f5c26b]li[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]ul[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]li[/color]>[/size] Anfang [size=1]</[color=#f5c26b]li[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]li[/color]>[/size] Ende [size=1]</[color=#f5c26b]li[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]ul[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]ol[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[Bild: html-Verschachtelung-einer-geordneten-un...-Liste.png]
Verlinkungen
Links können mit HTML in vielfältigen Ausführungen gesetzt werden. Die Verlinkungen können sowohl auf interne und externe Seiten führen. Sie können außerdem neue Browserfenster öffnen, zu einem bestimmten Bereich der Seite springen oder das Email-Programm öffnen.

TAG

BEDEUTUNG

<a> </a>
  • Erstellt ein Link-Element.
  • Muss immer das href-Attribut enthalten.
href="[i]URL[/i]"
  • Attribut, das den Link enthält.
mailto:
  • Email-Link, der das E-Mail-Programm öffnet und Email-Adresse beinhaltet.
target="_blank"
  • Öffnet Link in neuem Browser-Fenster.
Id="[i]ID-NAME[/i]"
  • Attribut zur Kennzeichnung eines einzelnen Elements.
  • ID kann genutzt werden, um zu einem bestimmten Punkt einer Seite zu springen.
index.html
  • Kann für interne Links genutzt werden.
#[i]ID-NAME[/i]
  • ID-Selektor, der genutzt wird, um an eine bestimmte ID zu springen.

Beispiel für Verlinkungen:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h1[/color]>[/size] HubSpot Website [size=1]</[color=#f5c26b]h1[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h2[/color]>[/size] Kontaktdaten [size=1]</[color=#f5c26b]h2[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size] Kontaktieren Sie uns [size=1]<[color=#f5c26b]a[/color] href=[color=#f5c26b]"mailto:beispiel@email.com"[/color]>[/size] hier[size=1]</[color=#f5c26b]a[/color]>[/size].[size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h2[/color]>[/size] Weitere Informationen [size=1]</[color=#f5c26b]h2[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size] Hier kommen Sie zu unserer [size=1]<[color=#f5c26b]a[/color] href=[color=#f5c26b]"https://www.hubspot.de/?hubs_signup-url=www.hubspot.de/&hubs_signup-cta=hsg-nav__linkWebseite."[/color] target=[color=#f5c26b]"_blank"[/color]>[/size] Website [size=1]</[color=#f5c26b]a[/color]>[/size][size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[Bild: html-Beispiel-fu%CC%88r-Verlinkungen.png...kungen.png]
Grafiken und Bilder
Bilder und Grafiken werden auf Webseiten idealerweise in den Formaten .jpg, .gif oder .png eingebunden. Die Auflösung sollte dabei 72 Pixel pro Zoll sein, um die beste Darstellung auf Computerbildschirmen zu gewährleisten.

TAG

BEDEUTUNG

<img>
  • Bild-Tag.
scr=“[i]BILD-URL[/i]“
  • Attribut sagt dem Browser, wo die Bilddatei gefunden werden kann.
alt=“[i]BESCHREIBUNG[/i]“
  • Alternativtext.
  • Beschreibung des Bildes für sehbehinderte Menschen.
title=“[i]TITEL[/i]“
  • Attribut definiert zusätzliche Informationen des Elementes.
 
height=“[i]PIXEL[/i]“
  • Höhe des Bildes (in Pixeln).
width=“[i]PIXEL[/i]“
  • Breite des Bildes (in Pixeln).

Beispiel für Logo-Einbindung:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]img[/color] src=[color=#f5c26b]"https://www.hubspot.com/hubfs/assets/hubspot.com/style-guide/brand-guidelines/guidelines_the-logo.svg"[/color] alt=[color=#f5c26b]"Logo Hubspot Schriftzug"[/color]/>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]

[Bild: HTML-Beispiel-Logo-Einbindung.png?width=...indung.png]
Besondere HTML-Tags

TAG

BEDEUTUNG

<!-- -->
  • Kommentar.
  • sinnvoll, um langen Code zu strukturieren.
<div> </div>
  • Elemente werden in einem Block gruppiert; beginnen in einer neuen Zeile.
<span> </span>
  • Enthält ein Inline-Element und kann durch Attribute wie class oder id definiert werden.
class="[i]CLASS-NAME[/i]"
]]> HTML Befehle: Übersicht nach Gruppen geordnet

HTML-Befehle werden als Tags und Attribute bezeichnet. Tags bilden ein Element und bestehen – bis auf wenige Ausnahmen – jeweils aus einem öffnenden und einem schließenden Tag. Das schließende Tag beinhaltet einen Schrägstrich:

Code:
[color=#ffffff][size=1][font=Courier]Beispiel: [size=1]<[color=#f5c26b]p[/color]>[/size] Das ist ein Absatz [size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]

Das Tag teilt dem Browser mit, welche Information sich innerhalb dessen befindet. Im gezeigten Beispiel handelt es sich um ein Absatz-Tag.
Einem Element kann neben dem Tag auch ein Attribut zugewiesen werden: Dieses gibt zusätzliche Informationen über ein bestimmtes Element. Es besteht aus einem Attribut-Namen und der spezifischen Bezeichnung.


Code:
[color=#ffffff][size=1][font=Courier][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]Beispiel: [size=1]<[color=#f5c26b]p[/color] class=[color=#f5c26b]"content"[/color]>[/size] Das ist ein Absatz. [size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]

Dem zuvor definierten p-Element wurde nun zusätzlich das [i]class[/i]-Attribut mit dem Namen „content“ zugeordnet. Durch die Bestimmung von Attributen können weitere Informationen im HTML-Doc definiert oder später im CSS darauf zurückgegriffen werden.
[i]Nachfolgend finden Sie eine nach Gruppen geordnete Übersicht der wichtigsten HTML-Befehle:[/i]

Grundstruktur

TAG

BEDEUTUNG

<!DOCTYPE html>
<html> </html>
  • Eröffnet das HTML5-Dokument.
  • Kann in älteren Versionen anders aussehen.
<head> </head>
  • Enthält in der Regel Informationen über die Seite.
  • Beinhaltet das Title-Element.
<meta>
  • Zusatzangaben für die Verwaltung des HTML-Dokuments.
  • Befindet sich im [i]head[/i].
<title> </title>
  • Enthält den Titel der Seite.
  • Wird in der Titelleiste oben im Browser ausgegeben.
<body> </body>
  • Hauptfenster im Browser (außer Titel und Header).
<header> </header>
  • Bereich für den Kopf, also den Beginn der Seite ([i]nicht[/i] [i]head![/i]).
<nav> </nav>
  • Navigationsbereich.
<section> </section>
  • Kann genutzt werden, um Elemente zu einer Gruppe zusammenzufassen.
<article> </article>
  • Inhaltsbereich.
<footer> </footer>
  • Fußbereich der Seite.

Beispiel: Grundgerüst für ein HTML-Dokument

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]  [size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]    [size=1]<[color=#f5c26b]title[/color]>[/size][size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]  [size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]  [size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier]  [size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]

Textelemente
Textelemente können sowohl struktureller als auch semantischer Natur sein. Strukturelle Tags zeichnen Elemente wie etwa Überschriften oder Absätze aus und können diese oberflächlich gestalten. Mit semantischen Tags hingegen werden zusätzliche Informationen über die Art des Inhaltes gegeben (z. B. Zitat).

Strukturelles Markup

TAG

BEDEUTUNG

<h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5>, <h6> </h6>
  • h-Tags zeichnen Überschriften aus.
  • h1 ist die Hauptüberschrift, h2 bezeichnet Zwischenüberschriften.
  • Tags werden nach Rangordnung unterschiedlich groß dargestellt.
  • h6 ist am kleinsten.
<p> </p>
  • Kennzeichnet einen Absatz.
 
<b> </b>
  • Fettschrift (bold).
  • Kann für einzelne Wörter oder ganze Absätze genutzt werden.
<i> </i>
  • Kursiv ([i]italic)[/i].
  • Kann für einzelne Wörter oder ganze Absätze genutzt werden.
<sup> </sup>
  • Hochgestellte Zeichen z.B. 22
<sub> </sub>
  • Tiefgestellte Zeichen z.B. H2O
<br>
  • Erzwingt Umbruch.
<hr>
  • Erzeugt optische Trennlinie zwischen Inhalten.

Beispiel für strukturelles Markup:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h1[/color]>[/size]Das ist eine Überschrift[size=1]</[color=#f5c26b]h1[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h2[/color]>[/size]Das ist eine Zwischenüberschrift[size=1]</[color=#f5c26b]h2[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size]Das ist ein [size=1]<[color=#f5c26b]b[/color]>[/size]Absatz.[size=1]</[color=#f5c26b]b[/color]>[/size][size=1]</[color=#f5c26b]p[/color]>[/size][size=1]<[color=#f5c26b]hr[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size] Hier wird ein [size=1]<[color=#f5c26b]br[/color]>[/size] Umbruch erzwungen.[size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[Bild: strukturelles-Markup-html.png?width=1099...p-html.png]

Semantisches Markup

TAG

BEDEUTUNG

<strong> </strong>
  • Zeichnet besonders wichtigen Inhalt aus.
  • Wird meist fett angezeigt.
<em> </em>
  • Kennzeichnet eine semantische Hervorhebung.
  • Wird oft [i]kursiv[/i] angezeigt.
<blockquote> </blockquote>
  • Kennzeichnet ein Zitat (ganzen Absatz).
<q> </q>
  • Kennzeichnet ein Zitat innerhalb des Textes.

Beispiel für semantisches Markup:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h1[/color]>[/size]Das ist eine Überschrift[size=1]</[color=#f5c26b]h1[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h2[/color]>[/size]Das ist eine Zwischenüberschrift[size=1]</[color=#f5c26b]h2[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size]Das ist ein [size=1]<[color=#f5c26b]strong[/color]>[/size]Absatz.[size=1]</[color=#f5c26b]strong[/color]>[/size][size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size] Hier folgt eine [size=1]<[color=#f5c26b]em[/color]>[/size] Hervorhebung.[size=1]</[color=#f5c26b]em[/color]>[/size][size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]blockquote[/color]>[/size] "Hier folgt ein Zitat." [size=1]</[color=#f5c26b]blockquote[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[Bild: semantisches-Markup-html.png?width=898&n...p-html.png]
Listen und Tabellen

Listen unterscheiden sich in HTML in geordnete, ungeordnete sowie Definitionslisten. Sie lassen sich auch ineinander verschachteln. Neben Listen können Sie mit HTML auch Tabellen konfigurieren.

TAG

BEDEUTUNG

<ol> </ol>
  • Geordnete Liste.
  • Wird mit Ordnungszahlen ausgewiesen.
<ul> </ul>
  • Ungeordnete Liste.
  • Wird mit Aufzählungszeichen ausgewiesen.
<li> </li>
  • Listeneintrag.
  • Jedes Element einer Liste wird mit li-Tag angeführt.
<dl> </dl>
  • Definitionsliste.
<dt> </dt>
  • Definitionsbegriff.
<dd> </dd>
  • Definitionsbeschreibung.
<table> </table>
  • Eröffnet eine Tabelle.
<caption> </caption>
  • Definiert eine Tabellenüberschrift.
<tr> </tr>
  • Tabellenzeile.
  • Steht zu Beginn jeder neuen Tabellenzeile.
<td> </td>
  • Tabellendaten.
<th> <th>
  • Überschrift in einer Tabellenzeile.

Beispiel für die Verschachtelung einer geordneten und ungeordneten Liste:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]ol[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]li[/color]>[/size] Erster Punkt [size=1]</[color=#f5c26b]li[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]li[/color]>[/size] Zweiter Punkt [size=1]</[color=#f5c26b]li[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]ul[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]li[/color]>[/size] Anfang [size=1]</[color=#f5c26b]li[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]li[/color]>[/size] Ende [size=1]</[color=#f5c26b]li[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]ul[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]ol[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[Bild: html-Verschachtelung-einer-geordneten-un...-Liste.png]
Verlinkungen
Links können mit HTML in vielfältigen Ausführungen gesetzt werden. Die Verlinkungen können sowohl auf interne und externe Seiten führen. Sie können außerdem neue Browserfenster öffnen, zu einem bestimmten Bereich der Seite springen oder das Email-Programm öffnen.

TAG

BEDEUTUNG

<a> </a>
  • Erstellt ein Link-Element.
  • Muss immer das href-Attribut enthalten.
href="[i]URL[/i]"
  • Attribut, das den Link enthält.
mailto:
  • Email-Link, der das E-Mail-Programm öffnet und Email-Adresse beinhaltet.
target="_blank"
  • Öffnet Link in neuem Browser-Fenster.
Id="[i]ID-NAME[/i]"
  • Attribut zur Kennzeichnung eines einzelnen Elements.
  • ID kann genutzt werden, um zu einem bestimmten Punkt einer Seite zu springen.
index.html
  • Kann für interne Links genutzt werden.
#[i]ID-NAME[/i]
  • ID-Selektor, der genutzt wird, um an eine bestimmte ID zu springen.

Beispiel für Verlinkungen:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h1[/color]>[/size] HubSpot Website [size=1]</[color=#f5c26b]h1[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h2[/color]>[/size] Kontaktdaten [size=1]</[color=#f5c26b]h2[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size] Kontaktieren Sie uns [size=1]<[color=#f5c26b]a[/color] href=[color=#f5c26b]"mailto:beispiel@email.com"[/color]>[/size] hier[size=1]</[color=#f5c26b]a[/color]>[/size].[size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]h2[/color]>[/size] Weitere Informationen [size=1]</[color=#f5c26b]h2[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]p[/color]>[/size] Hier kommen Sie zu unserer [size=1]<[color=#f5c26b]a[/color] href=[color=#f5c26b]"https://www.hubspot.de/?hubs_signup-url=www.hubspot.de/&hubs_signup-cta=hsg-nav__linkWebseite."[/color] target=[color=#f5c26b]"_blank"[/color]>[/size] Website [size=1]</[color=#f5c26b]a[/color]>[/size][size=1]</[color=#f5c26b]p[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier] [/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[Bild: html-Beispiel-fu%CC%88r-Verlinkungen.png...kungen.png]
Grafiken und Bilder
Bilder und Grafiken werden auf Webseiten idealerweise in den Formaten .jpg, .gif oder .png eingebunden. Die Auflösung sollte dabei 72 Pixel pro Zoll sein, um die beste Darstellung auf Computerbildschirmen zu gewährleisten.

TAG

BEDEUTUNG

<img>
  • Bild-Tag.
scr=“[i]BILD-URL[/i]“
  • Attribut sagt dem Browser, wo die Bilddatei gefunden werden kann.
alt=“[i]BESCHREIBUNG[/i]“
  • Alternativtext.
  • Beschreibung des Bildes für sehbehinderte Menschen.
title=“[i]TITEL[/i]“
  • Attribut definiert zusätzliche Informationen des Elementes.
 
height=“[i]PIXEL[/i]“
  • Höhe des Bildes (in Pixeln).
width=“[i]PIXEL[/i]“
  • Breite des Bildes (in Pixeln).

Beispiel für Logo-Einbindung:

Code:
[color=#ffffff][size=1][font=Courier][color=#f2545b][size=1]<!DOCTYPE [color=#f2545b]html[/color]>[/size][/color][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]html[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]title[/color]>[/size]Seitentitel[size=1]</[color=#f5c26b]title[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]head[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]<[color=#f5c26b]img[/color] src=[color=#f5c26b]"https://www.hubspot.com/hubfs/assets/hubspot.com/style-guide/brand-guidelines/guidelines_the-logo.svg"[/color] alt=[color=#f5c26b]"Logo Hubspot Schriftzug"[/color]/>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]body[/color]>[/size][/font][/size][/color]


[color=#ffffff][size=1][font=Courier][size=1]</[color=#f5c26b]html[/color]>[/size][/font][/size][/color]

[Bild: HTML-Beispiel-Logo-Einbindung.png?width=...indung.png]
Besondere HTML-Tags

TAG

BEDEUTUNG

<!-- -->
  • Kommentar.
  • sinnvoll, um langen Code zu strukturieren.
<div> </div>
  • Elemente werden in einem Block gruppiert; beginnen in einer neuen Zeile.
<span> </span>
  • Enthält ein Inline-Element und kann durch Attribute wie class oder id definiert werden.
class="[i]CLASS-NAME[/i]"
]]> <![CDATA[Alles zum Hoster All Inkl.]]> https://support.rohil.it/thread-3.html Fri, 03 Jun 2022 21:14:32 +0200 rohilit]]> https://support.rohil.it/thread-3.html Wichtige Infos zum Hoster "All inkl."

1. Unser Hoster all inkl ist unter folgender Adresse im Web erreichbar: All inkl Login
    Nutzername / Nummer ist bereits im Chrome / Opera gespeichert

2. Neue Domain registrieren    
    Einloggen-> Domain(s) verwalten-> Um eine Domain zu beantragen ...
    Domainname eintragen (ohne www oder *.de) und auf weiter drücken
    Wenn die Domain frei ist, diese registrieren. Sofern möglich als Inklusivdomain.

3. Technische Verwaltung
    Im linken Menü nach dem Einloggen bei All inkl auf Technische Verwaltung gehen.
    Dann auf "Kas Login". Es öffnet sich ein neuer Tab / neues Fenster und man ist dort.
    In der technischen Verwaltung kann man Subdomains anlegen. z.B testadresse.rohil.it
    Unter dem Menüpunkt Software Installation kann man dort auch direkt Wordpress installieren.
    Unter dem Menüpunkt E-Mail kann man E-Mails für Kunden einrichten und notfalls diese lesen.
    ]]> Wichtige Infos zum Hoster "All inkl."

1. Unser Hoster all inkl ist unter folgender Adresse im Web erreichbar: All inkl Login
    Nutzername / Nummer ist bereits im Chrome / Opera gespeichert

2. Neue Domain registrieren    
    Einloggen-> Domain(s) verwalten-> Um eine Domain zu beantragen ...
    Domainname eintragen (ohne www oder *.de) und auf weiter drücken
    Wenn die Domain frei ist, diese registrieren. Sofern möglich als Inklusivdomain.

3. Technische Verwaltung
    Im linken Menü nach dem Einloggen bei All inkl auf Technische Verwaltung gehen.
    Dann auf "Kas Login". Es öffnet sich ein neuer Tab / neues Fenster und man ist dort.
    In der technischen Verwaltung kann man Subdomains anlegen. z.B testadresse.rohil.it
    Unter dem Menüpunkt Software Installation kann man dort auch direkt Wordpress installieren.
    Unter dem Menüpunkt E-Mail kann man E-Mails für Kunden einrichten und notfalls diese lesen.
    ]]> <![CDATA[Das A-Z des einfachen IT-Supports]]> https://support.rohil.it/thread-2.html Fri, 03 Jun 2022 20:04:03 +0200 rohilit]]> https://support.rohil.it/thread-2.html Grundlegende Dinge, die zu prüfen sind, BEVOR man ans Eingemachte geht


1. Ist das Gerät überhaupt mit Strom verbunden?

    Stecken alle Stecker? Sind alle Schalter auf 1 bzw an?


2. Wenn der Rechner langsam ist oder hängt

    Ist ein Avira Produkt installiert? Kaspersky? Norton? McAffee?
    Sind die Treiber überhaupt installiert oder werden Standart / generische Treiber verwendet?
    Sind die Treiber aktuell? Falls eine SSD installiert ist, ist diese korrekt eingestellt?
    Welche Programme und Dienste werden automatisch geladen? Stichwort: msconfig
    Wie warm wird die CPU (Prozessor) ? Ist genug RAM installiert? SSD oder HDD?
    Gegebenenfalls mit chkdsk das Laufwerk prüfen, auf welchem Windows läuft.
    Sind seltsame Programme installiert? Malware etc? Prüfen mit Malwarebytes oder Spybot


3. Wenn der Rechner (zu) laut ist

    Wie warm ist die CPU (Prozessor) ? Falls er zu warm ist (über 70 Grad) dann Folgendes prüfen:

    1. Ist der Lüfter verstaubt, verdreckt oder dreht nicht mehr rund? -> reinigen oder austauschen
    2. Sind die Kühlrippen des passiven Aluminium Kühlers unter dem aktiven Kühler frei und sauber?
    3. Ist die Wärmeleitpaste noch gut genug? zu wenig? zu viel? -> Kühler reinigen und Neue auftragen.]]> Grundlegende Dinge, die zu prüfen sind, BEVOR man ans Eingemachte geht


1. Ist das Gerät überhaupt mit Strom verbunden?

    Stecken alle Stecker? Sind alle Schalter auf 1 bzw an?


2. Wenn der Rechner langsam ist oder hängt

    Ist ein Avira Produkt installiert? Kaspersky? Norton? McAffee?
    Sind die Treiber überhaupt installiert oder werden Standart / generische Treiber verwendet?
    Sind die Treiber aktuell? Falls eine SSD installiert ist, ist diese korrekt eingestellt?
    Welche Programme und Dienste werden automatisch geladen? Stichwort: msconfig
    Wie warm wird die CPU (Prozessor) ? Ist genug RAM installiert? SSD oder HDD?
    Gegebenenfalls mit chkdsk das Laufwerk prüfen, auf welchem Windows läuft.
    Sind seltsame Programme installiert? Malware etc? Prüfen mit Malwarebytes oder Spybot


3. Wenn der Rechner (zu) laut ist

    Wie warm ist die CPU (Prozessor) ? Falls er zu warm ist (über 70 Grad) dann Folgendes prüfen:

    1. Ist der Lüfter verstaubt, verdreckt oder dreht nicht mehr rund? -> reinigen oder austauschen
    2. Sind die Kühlrippen des passiven Aluminium Kühlers unter dem aktiven Kühler frei und sauber?
    3. Ist die Wärmeleitpaste noch gut genug? zu wenig? zu viel? -> Kühler reinigen und Neue auftragen.]]> <![CDATA[Die wichtigsten und häufigsten Begriffe]]> https://support.rohil.it/thread-1.html Fri, 03 Jun 2022 20:01:02 +0200 rohilit]]> https://support.rohil.it/thread-1.html Die wichtigsten und häufigsten Begriffe zum Thema IT (Support)

1.1 Server und Client

der Server ist immer der "Hauptcomputer" in einem Verbund mit mehreren sogenannten "Clients"
Hier beziehen die Clients oftmals Datenbankinhalte oder andere wichtige Informationen über das 
lokale Netzwerk, bzw das "Intranet" vom Server. Ist der Server ausgeschaltet oder defekt, so kann
keiner der Clients die entsprechenden Programme oder Aktionen ausführen.


1.2 Peripherie

Peripheriegeräte sind grundsätzlich Geräte, welche periphär an den Computer angeschlossen sind,
also Drucker, Scanner, Tastaturen, Mäuse und Dergleichen.


1.3 Fake E-Mails und Phishing / Social Engineering

Fake E-Mails können z.B einen seriösen Absender vortäuschen und somit fischen / phishen (Phishing) sie
durch ihre augenscheinliche Glaubwürdigkeit sensible Daten vom Nutzer ab.
Social Engineering sind generelle soziale Aktionen, um durch Symphatie oder sexuelle Spielereien an
sensible Daten zu gelangen. Z.B. könnte sich ein Hacker als eine hübsche Frau ausgeben, ein wenig flirten
und hätte innerhalb kürzester Zeit somit bestimmt 50 verschiedene Möglichkeiten um ein persönliches
und einfaches Passwort zu kombinieren. Name der Katze und Geburtsjahr der Mutter als Beispiel. Etc, pp.]]> Die wichtigsten und häufigsten Begriffe zum Thema IT (Support)

1.1 Server und Client

der Server ist immer der "Hauptcomputer" in einem Verbund mit mehreren sogenannten "Clients"
Hier beziehen die Clients oftmals Datenbankinhalte oder andere wichtige Informationen über das 
lokale Netzwerk, bzw das "Intranet" vom Server. Ist der Server ausgeschaltet oder defekt, so kann
keiner der Clients die entsprechenden Programme oder Aktionen ausführen.


1.2 Peripherie

Peripheriegeräte sind grundsätzlich Geräte, welche periphär an den Computer angeschlossen sind,
also Drucker, Scanner, Tastaturen, Mäuse und Dergleichen.


1.3 Fake E-Mails und Phishing / Social Engineering

Fake E-Mails können z.B einen seriösen Absender vortäuschen und somit fischen / phishen (Phishing) sie
durch ihre augenscheinliche Glaubwürdigkeit sensible Daten vom Nutzer ab.
Social Engineering sind generelle soziale Aktionen, um durch Symphatie oder sexuelle Spielereien an
sensible Daten zu gelangen. Z.B. könnte sich ein Hacker als eine hübsche Frau ausgeben, ein wenig flirten
und hätte innerhalb kürzester Zeit somit bestimmt 50 verschiedene Möglichkeiten um ein persönliches
und einfaches Passwort zu kombinieren. Name der Katze und Geburtsjahr der Mutter als Beispiel. Etc, pp.]]>