Nach Inkrafttreten der Datenschutz-Grundverordnung (DSVGO) müssen auch Website-Betreiber auf die Einhaltung der Bestimmungen der DSVGO achten, besonders, wenn von den BesucherInnen personenbezogene Daten erfasst und verarbeitet werden. Die Betreiber müssen in einer Datenschutzerklärung anführen, wo und wie personenbezogene Daten von den BesucherInnen erfasst werden.

Diese sollte folgende Erklärungen enthalten:

Essentiell

• Allgemeine Erklärung über das Anliegen des Datenschutzes
• Automatische Datenspeicherung: wie und ob der Webserver Besucherdaten speichert (IP-Adresse der BesucherInnen, besuchte Seiten und Unterseiten, Uhrzeit, davor besuchte Website, ob die Site durch eine Suchmaschine gefunden wurde)
• Speicherung persönlicher Daten: ob persönliche Daten erfasst werden, z. B. in Kontaktformularen, Kommentaren
• Rechte der BesucherInnen: Rechte auf Auskunft, Berichtigung, Löschung, Einschränkung, Datenübertragbarkeit, Widerruf und Widerspruch
• TLS-Verschlüsselung mit https: dass die Daten verschlüsselt übertragen werden
• Cookies: ob und wie Cookies verwendet werden
• Google-Maps Datenschutzerklärung: ob Google-Maps verwendet wird und dass in diesem Fall Daten an Google übertragen werden
• Google-Fonts Datenschutzerklärung: ob Google-Fonts verwendet werden und welche Daten in diesem Fall an Google übertragen werden (verwendete Fonts, CSS)

Website-Analyseprogramme

• Google-Analytics Datenschutzerklärung: ob mit Google-Analytics Besucherdaten erfasst und verarbeitet werden
• andere Analytik-Programme

Social Media

• Facebook-Datenschutzerklärung: ob durch das Einbinden von Facebook-Funktionen (Plugins) Daten von BesucherInnen an Facebook übertragen und verarbeitet werden
• Das Gleiche gilt für Youtube, Twitter, Instagram, Google+ usw.

Einen Datenschutzgenerator als Hilfe gibt es auf https://www.firmenwebseiten.at/datenschutz-generator/

Man wählt die zutreffenden und somit notwendigen Erklärungen aus und der Generator stellt den Text zusammen.

Beispiele für Datenschutzerklärungen:

► www.hlwhollabrunn.ac.at
► https://unterricht.ertl.today

Syntax von Selektoren || (1) Universal-Selektoren || (2) Typ-Selektoren || (3) Class-Selektoren (Klassen) || (4) ID-Selektoren

Syntax (Schreibweise)

Selektoren stellen die Verbindung zwischen den zentralen Formaten im Head-Bereich oder der externen Datei und den Elementen innerhalb der Seite dar, die formatiert werden sollen. Der Aufbau ist immer gleich: Selektor, geschweifte Klammer auf, Eigenschaft, Wert, geschweifte Klammer zu:

Selektor {Eigenschaft:Wert;}

Selektor{
   Eigenschaft1: Wert;
   Eigenschaft2: Wert;

   ...

}

1. Universal-Selektoren

Universal-Selektoren verknüpfen jedes vorhandene Element mit Stylesheetangaben. Wird z. B. die Schrift durch einen Universal-Selektor auf 18 px festgelegt, so ist die Schrift jedes Elementes mit 18 px formatiert.

* {
   font-size:14px;
   color:#ff0000;
}

2. Typ-Selektoren

Typ-Selektoren verknüpfen einen Elementtyp, also ein HTML-Tag mit einer Formatierung.

h1 {
   font-size:14px;
   font-style:italic;
}

p {
   color:#ff0000;
}

3. Class-Selektoren (Klassen)

Klassen sind Selektoren mit beliebigen Namen.

h1.gerahmt {
   border:1px solid #aaaaaa;
}

In diesem Beispiel wir zunächst H1 definiert; dann wird die Klasse h1.gerahmt festgelegt (Rahmen). Wird Sie angewandt, bekommt H1 zusätzlich einen Rahmen: Diese Klasse funktioniert nur in einem H1-Tag.

.gerahmt {
   border:1px solid #aaaaaa;
}

.einfachertext {
   font-size:14px;
}

Diese zwei Klassen in jedem Tag, weil vor dem Punkt (.) kein Tag angegeben ist.

4. ID-Selektoren

ID-Selektoren verknüpfen Elemente über das ID-Attribut mit einer Formatierung. ID-Selektoren beginnen mit einer # (Raute).

div#kopfbereich {
   position:absolute;
   top:100px; left:100px;
   width:120px; height:80px;
   background-color:#000;
}

div#inhaltsbereich {
   position:absolute;
   top:150px; left:300px;
   width:120px; height:80px;
   border: 6px red solid;
}

Damit werden zwei Bereiche (Boxen) erzeugt, die mit Inhalten gefüllt werden können. Ihre Eigenschaften sind:

• position (die Art wie ihre Position am Bildschirm festgelegt wird)
• top (Abstand vom oberen Bildschirmrand)
• left (Abstand vom linken Bildschirmrand)
• width (Breite der Box)
• height (Höhe der Box)
• background-color (Hintergrundfarbe)
• border (Rahmen um die Box)

Vorgaben || Layout programmieren (CSS) || Erste Seite anlegen || Fotos vorbereiten || Kopfbild einfügen und Seite vervielfältigen || Seiten verlinken || Die Inhalte der Seiten einfügen || Hyperlinks formatieren || Fotos in die Inhaltsboxen einfügen || Fotos per Klasse ausrichten || Schriftformatierungen

Vorgaben

Ziel

Ziel ist, eine Website mit drei einzelnen Seiten nach obigem Muster zu programmieren. Die einzelnen Seiten und ihre Inhalte:

Fotodownload

Das Layout programmieren (CSS)

• Den Stammordner für die Website anlegen: affen
• Im Ordner affen den Unterordner fotos anlegen
• Auf gleicher Ebene wie affen einen Ordner für Materialien anlegen: affen_materialien (für unvorbereitete Fotos, Texte)
• In Dreamweaver eine Site definieren: Site / Neue Site / Site-Name: Affen / Lokaler Site-Ordner: den Ordner affen auswählen
• Neue Datei vom Seitentyp CSS anlegen und als style.css speichern
• Die 3 Boxen kopf, navigation und inhalt definieren

@charset "utf-8";
/* CSS Document */

/* Boxen */

div#kopf{
	position:relative;
	width:800px; height:300px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
}

div#navigation{
	position:relative;
	width:796px; height:26px;
	border:2px #F90 solid;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
}

div#inhalt{
	position:relative;
	width:796px; height:600px;
	border:2px #F90 solid;
	background-color:#FFC;
	margin-left:auto;
	margin-right:auto;
}

• Zeile 4: ist ein Kommentar (kann genützt werden, um Überschriften oder Bemerkungen einzufügen)
• Zeile 6: erzeugt die Box
• Zeile 7: Positionierungsart (gibt an, wie man die Position der einzelnen Boxen am Bildschirm festlegt); relative (die Boxen werden der Reihe nach eingefügt, von oben nach unten; die genauere Positon wird mit margin-left, margin-right, margin-top, margin-bottom, float usw. bestimmt)
• Zeile 9: bewirkt, dass die Box navigation von kopf um 10 px abrückt
• Zeilen 10 und 11: zentriert die Box horizontal am Bildschirm
• Zeile 16: Der Rahmen von 2 px vergrößert die Box auf 804 x 34 px; damit sie die endgültige Größe von 800 x 30 px erhält, müssen diese 4 px von der Breite und Höhe abgezogen werden (800 – 2 – 2 = 796) (30 – 2 – 2 = 26) Vgl. auch https://unterricht.ertl.today/layout-mit-dem-boxmodell/

Erste Seite (HTML) anlegen

• In Dreamweaver eine neue Seite vom Typ HTML anlegen und als index.html speichern
• Oben den Titel für diese Seite eintragen: Affenarten (wird im Webbrowser im Registerblatt oder in der Titelleiste angezeigt)
• Im Eigenschaftsfenster rechts das Stylesheet anfügen
• Über das Menü Einfügen / Layoutobjekte / Div-Tag / ID die Box Kopf einfügen
• Den Mauszeiger rechts von der Kopfbox stellen
• Die Box navigation einfügen
• Den Mauszeiger rechts von der Box navigation stellen
• Die Box inhalt einfügen
• In der Box kopf den Mustertext restlos löschen
• Speichern (Strg + S)

Die Fotos vorbereiten

Für die Box kopf: 800 x 300 px Die Auflösung des Bildes kann unverändert bleiben (spielt am Bildschirm keine Rolle). Wenn es sich, wie hier, um ein Foto handelt, wird es im JPG- oder PNG-Format im Foto-Ordner gespeichert. Die Dateigröße soll so klein wie möglich sein. Für die Box inhalt: 400 x 300 px

Kopfbild einfügen und die Seite vervielfältigen

• Das Foto kopf.jpg aus dem Dateienfenster rechts in die Box kopf ziehen, dabei einen Alternativtext eingeben
• Die Seite in einem Webbrowser (Internet-Explorer, Firefox, Chrome) öffen und prüfen, ob sie korrekt angezeigt wird
• Die Seite vervielfältigen: Menü Datei / Speichern unter / gorillas.html Menü Datei /Speichern unter / paviane.html
• Speichern

Die drei Seiten verlinken

• In der Seite index.html den Mustertext aus der Box navigation löschen und ersetzen durch : Affen // Gorillas // Paviane
• Das Wort Affen markieren und im Eigenschaftsfenster unten mit dem Symbol “Auf Datei zeigen” ins Dateienfenster ziehen zu5 index.html
• Im Eigenschaftsfenster unter Ziel _self auswählen
• Ebenso mit Gorillas und Paviane verfahren (Gorillas -> gorillas.html; Paviane -> paviane.html)
• Speichern
• Die gesamte Navigation kopieren (Markieren und Strg + C) und auf den zwei weiteren Seiten einfügen (Strg + V)
• Im Webbrowser die Links testen

Die Inhalte der drei Seiten einfügen

• Den Text für die index.html kopieren (hier von der Webseite, oben), in Dreamweaver über das Menü Bearberiten / Inhalte einfügen / Nur Text einfügen
• Die Absätze, die beim Einfügen verloren gegangen sind, einfügen und „Affen“ als Überschrift 1 formatieren
• Speichern
• Bei den weiteren zwei Seiten ebenso verfahren
• Bei gorillas.htm noch den Seitentitel „Gorillas“ eintragen, bei paviane.html „Paviane“

Hyperlinks formatieren

Hyperlinks können vier verschiedene Zustände haben, die jeweils anders formatiert werden können:

• Ursprünglicher Link (a)
• besuchter Link (a:visited)
• Hover-Effekt (a:hover)
• Aktiver Hyperlink (a:active)

Beim ursprünglichen Hyperlink (wenn eine Seite erstmals geöffnet wird) werden alle gewünschten Eigenschaften formatiert. Bei den weiteren Zuständen wird nur formatiert, was anders werden soll (typischerweise die Farbe).

/* Hyperlinks formatieren */

a{
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:16px;
	color:#900;
	margin-left:10px;
	text-decoration:none;}
	
a:visited{
	color:#9C0;}
	
a:hover{
	color:#C06;}

Fotos in die Inhalts-Boxen einfügen

Die Fotos affen.jpg, gorillas.jpg und paviane.jpg sind schon vorbereitet worden (s. o.) und liegen bereits im Fotoordner.

• Gehe zur Seite index.html
• Ziehe das Foto affen.jpg aus dem Dateienfenster rechts an den Beginn des Textes.
• Trage einen passenden Alternativtext ein.
• Verfahre ebenso auf den zwei weiteren Seiten

Fotos per Klasse ausrichten

Eine Klasse ist CSS-Code, der bei Bedarf angewandt werden kann, z. B. um ein Foto links auszurichten. Die Klassen beginnt mit einem Punkt (.), gefolgt vom frei zu wählenden Klassennamen und den Eigenschaften mit den gewünschten Werten. Das Stylesheet wird um folgenden Code erweitert:

/* Klasse zum Ausrichten von Fotos */

.bild_links{
	float:left;
	margin-right:10px;
	margin-top:4px;
	margin-bottom:6px;
}

• Die Eigenschaft float schiebt das Fotos nach links und lässt den Text rechts vorbeifließen.
• Die margins halten einen Abstand zwischen Foto und Text.

Die Klasse den Fotos zuweisen:

• Jetzt muss die Klassen noch den drei Fotos zugeweisen werden.
• Dazu wird das erste Foto (index.html) angeklickt und unten im Eigenschaftsfenster die Klasse .bild_links zugewiesen.
• Ebenso wird auf den zwei weiteren Fotos verfahren.

Weitere Schriftformatierungen

/* Schriftformate */

h1{
	font-family:Arial, Helvetica, sans-serif;
	font-size:32px;
	color:#009;
	margin-left:10px; margin-right:10px;}
	
p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#033;
	margin-left:10px; margin-right:10px;}

• h1 ist die größte Überschrift (h1 bis h6 sind möglich). p ist die normale Absatztext.
• margin-left und margin-right bewirkt, dass der Text vom Rand der Box abrückt.

Kommentare hier

Hier ein Muster-Layout für ein 2-Spalten-Layout mit horizontaler Zentrierung:

CSS

div#container{
 width:820px;
 height:auto;
 margin-left:auto; margin-right:auto;
 }

div#kopf{
 position:relative;
 width:820px; height:110px;
 margin-bottom:5px;
 background-color:#CFF;
 }

div#inhalt{
 position:relative;
 width:655px; height:500px;
 background-color:#3F0;
 float:left;
 }

div#navi{
 position:relative;
 width:160px; height:500px;
 background-color:#3F0;
 float:right;
}

Erklärungen:

Container

wird zur Zentrierung gebraucht und nimmt die anderen Boxen kopf, inhalt und navi auf. Er muss genauso breit sein, wie die Seite werden soll, hier 820 px.
Height kann man auf “auto” oder “100%” stellen, oder die Höhe wie sonst in px angeben (so hoch, dass die drei Boxen von der Höhe her Platz haben: hier 110 px + 5px + 500 px = 615 px; man kann die Box aber auch höher machen, da sie unsichtbar ist).

Inhalt

soll im Container links ausgerichtet werden und bekommt daher ein float:left.

Navi

soll im Container rechts ausgerichet werden und bekommt daher ein float:right.
Die Breite von navi ergibt sich aus: 655 px + 5px + ??? = 820 px.

HTML

div id="container">
   <div id="kopf"> …</div>
   <div id="inhalt"> … </div>
   <div id="navi"> … </div>
</div>

Erklärung

Zuerst wird container eingefügt. Dann folgt kopf (der Mauszeiger steht dazu in container!), dann inhalt (der Mauszeiger steht in container, aber nicht in kopf), dann navi (der Mauszeiger steht in container, aber nicht in kopf und inhalt).
Wenn das in der Entwurfsansicht nicht möglich ist, in die Codeansicht wechseln und dort die Boxen einfügen.

Internetzugang

Diese Leistung besteht aus der Bereitstellung von Internet-Konnektivität, also dem Transfer von IP-Paketen in und aus dem Internet. Ohne diese Leistung kann man das Internet nicht benutzen. Die Verbindung kann mit Funktechnik, Wählleitungen, Standleitungen oder Breitbandleitungen umgesetzt werden.

Manche dieser Provider betreiben nur globale Internetleitungen (Backbones), andere betreiben überregionale Leitungen und wieder andere nur lokale. Die kleinen Anbieter mieten sich Leistungskapazitäten bei den großen.

Links:

>Seekabel MS

>Seekabel Infos

>Interaktive Karte der Seekabel

Hosting

Webhosting (Webspace-Provider)

Webhoster (z. B. World4you, one.com, easyname.com, 1&1) stellen gegen Bezahlung Webserver mit Anbindung ans Internet zur Verfügung. Das beginnt mit einfachem Speicherplatz für Webseiten mit Bildern und geht über Datenbanken bis zu Web-Content-Management-Systemen (z. B. WordPress, Typo3). Die Webserver-Software (Apache, Internet Informaton-Server) nimmt Anfragen nach Seiten entgegen und liefert diese aus.

Die Kunden bekommen einen Zugang zu ihrem Bereich am Webserver (Benutzername, Passwort), sodass sie ihre Inhalte auf den Server hochladen können oder Web-Anwendungen (z. B. WordPress) installieren können.

Im billigsten Fall (aber einigen Euros pro Monat) teilt man sich einen Webserver mit vielen anderen Kunden, was die Performance bremst. Im besseren Fall mietet man sich einen virtuellen Webserver (auf einem physischen Server laufen mehrere virtuelle Webserver) mit einem bestimmten Prozessor, Speicherplatz und Arbeitsspeicher. Im besten und teuersten Fall mietet man einen oder mehrere physische Server und hat deren gesamte Leistung für sich allein.

Links:

>Easyname Webhoster

Mail-Hosting

Mail-Hoster stellen Mail-Dienste von Mailservern zur Verfügung (z. B. Google, GMX, Microsoft, Yahoo, posteo.de (kostenpflichtig), protonmail.com (kostenpflichtig)). Meist bieten Webhoster auch Mail-Dienste an. Diese Dienste enthalten im Kern das Versenden und Empfangen von Emails (durchgeführt mittels Email-Client-Programmen oder über das Webinterface) und können auch Spam- und Virenschutz beinhalten.

Server-Hosting

Server-Hosting ist der Betrieb von virtuellen und dedizierten, also physischen, Servern (z. B. Webservern), optional mit wichtigen Zusatzleistungen wie Wartung und Datensicherung. Diese Server mieten üblicherweise nur Firmen. Als privater Websitebetreiber teilt man sich aus Kostengründen einen Server mit anderen Kunden.

Domain-Hosting

Domain-Hosting (Registrierung und Anbieten einer Domain) umfasst die Registrierung und meist zusätzlich auch den Betrieb von Domains innerhalb des Domain Name Systems (die Domain-Hoster stellen die Verbindung zwischen der IP-des Webservers und der Domain her, sodass der Webserver mit der Website gefunden werden kann).

Links:

>Godaddy Domainhoster

Content-Provider (Inhaltsanbieter)

Content-Provider stellten eigene redaktionelle Beiträge und Inhalte zur Verfügung oder veröffentlichen Inhalte von anderen.

Application Service-Provider

Ein Anwendungs-Anbieter (Application Service-Provider) stellt Anwendungen im Internet zur Verfügung (z. B. Office im Internet, Datenbankanwendungen).

[

>Siehe Cloud-Dienste

]

Links:

Vgl.: https://de.wikipedia.org/wiki/Internetdienstanbieter

Urheberrechtliche Dinge

Ein Webdienstleister (Firma, die Websites gestaltet) kann sein Copyright-Vermerk auf einer Website anbringen, sofern diese Werkcharaker hat. Er muss es jedoch nicht, weil man als Schöpfer eines Werkes automatisch UrheberIn von diesem ist.

Wenn ein anderer Webdienstleister eine Website zur weiteren Betreuung übernimmt, darf er das Copyright-Vermerk des Urhebers nicht entfernen (solange das ursprüngiche Werk bestehen bleibt), kann aber den Zusatz “Bearbeitet von …” hinzufügen.

Haftung für Links zu anderen Websites

Links sind generell unbedenklich, soweit sie nicht den irreführenden Eindruck erwecken, der Inhalt der gelinkten Seite gehöre zur eigenen Website. Um das sicher zu gewährleisten, lässt man das Linkziel in einem neuen Browserfenster öffnen (target=”_blank”), was aber rechtlich nicht notwenig ist, oder man nennt im Linktext den Fremdanbieter (z. B. “Humanberuflich Schulen” auf hum.at). Letzteres empfiehlt sich bei Links auf PDF-Dateien.

Man darf grundsätzlich auch auf Musik-Dateien verlinken, wenn einem nicht bekannt ist, dass diese unerlaubt online gestellt sind. Wird einem das bekannt, muss man die Links löschen. Ähnlich verhält es sich mit Links auf Seiten mit rechtswidrigen Inhalten (illegale Downloadseiten, Seiten mit Tools zur Umgehung des Kopierschutzes). Hier kann man aber eher der Beihilfe zur Rechtsverletzung bezichtigt werden.

Zusammenfassend kann gesagt werden, dass mit Vorsatz und wissentlich auf unrechtmäßige Inhalte verlinken muss, um strafrechtlich belangt zu werden.

Haftung und Klage bei Urheberrechtsverletzungn

Man kann wegen Urheberrechtsverletzungen sofort geklagt werden, ohne vorher darauf hingewiesen zu werden (Unterlassungsaufforderung), auch wenn man das betreffend Werk sofort entfernt, weil automatisch Wiederholungsgefahr angenommen wird. Auch Unwissenheit (nicht Wissen, dass man gegen die Urheberschaft von jemandem verstößt) schützt nicht vor Strafe.

WordPress war ursprünglich eine Blogsoftware, die auf einem Webserver installiert ist und über einen Webbrowser bedient wird. Inzwischen ist WordPress so weiterentwickelt und um Funktionen ergänzt worden, dass Websites für jeden Zweck erstellt werden können, denen man den Tagebuchcharakter nicht ansieht.

Bei WordPress werden im sogenannten Backend die Inhalte erstellt, das Frontend zeigt die Seiten für den Besucher an. Inhalt und Layout sind getrennt. Das Layout wird durch Themes festgelegt. Themes können mit wenigen Mausklicks installiert werden. Es gibt Tausende gratis. Sie können angepasst werden. Widgets (z. B. Meta) und Plugins (z. B. Facebook-Members) erweitern WordPress um Funktionen. Auch diese sind großteils gratis.

Ein Theme installieren

Das Theme Chateau soll installiert werden. Es kommt mit einem hellen und dunklen Farbschema und einem anpassbaren Kopfbereich. Einzelne Farben können verändert werden. Es bietet sechs Widget-Bereiche (einen in der Sidebar, fünf im Fuß-Bereich). Der Seitenhintergrund kann angepasst werden.

Mit HTML werden Inhalte strukturiert. Mit CSS wird der strukturierte Inhalt formatiert.

CSS ist eine Stilsprache, die das Aussehen von HTML-Dokumenten definiert. CSS kann man z. B. zum festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern, für fortgeschrittener Positionierung und viele andere Sachen benutzen. Kurz: Mit CSS wird der Inhalt einer Seite formatiert und das Layout (Anordnung der einzelnen Elemente) festgelegt.

Mit HTML werden die Inhalte bloß stukturiert (durch Überschriften, Aufzählungen etc.).

CSS war eine Revolution im Webdesign. Es brachte viele Vorteile:

• Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-Sheet-Datei heraus; das Layout und die Formate werden in die Style-Sheet-Datei geschrieben; die einzelnen HTML-Seiten bekommen einen Verweis auf die Style-Sheet-Datei (<link rel=”stylesheet” type=”text/css” href=”style/style.css” />)
• präzisere Kontrolle über das Layout;
• verschiedene Layouts für verschiedene Medientypen (Bildschirmanzeige, Druck, Smartphone, IPad etc.);
• eine Vielzahl von fortgeschrittenen und anspruchsvolle Techniken.

Die Syntax von CSS ist immer die gleiche (hier: die Hintergrundfarbe wird auf rot eingestellt):

Selektor {Eigenschaft: Wert;}

body {
   background-color: #FF0000;}

• HTML bedeutet Hypertext Markup Language. Es handelt sich dabei um die im World Wide Web verwendete Seitenbeschreibungssprache.
• HTML-Dokumente sind reine Textfiles (plain-text) und können daher mit jedem beliebigen Texteditor (z. B. der Editor von Windows) erzeugt werden.
• Zum Betrachten der HTML-Seiten wird ein sogenannter Browser (=Client), wie z. B. MS Internetexplorer, Firefox, Maxthon benötigt.
• Die HTML-Seite muss aber zuvor entweder von einem WWW-Server bereitgestellt werden (z.B. http://www.reli4you.info) oder lokal auf einer Festplatte vorliegen (z. B. file:///E:/schule/ainf1213/baumgartner_neu/index.html).
• HTML-Dokumente bestehen aus einzelnen Elementen, die stets in spitzen Klammern (TAGs) <…> eingeschlossen sind und überwiegend paarweise auftreten. Die Wirkung eines Elementes erstreckt sich nur auf den Text oder die Grafik zwischen den Einzelelementen der paarweise auftretenden Elemente.
  <h1>Felix Baumgartner</h1>

Ein HTML-Dokument wird grundsätzlich mit dem Kommando <HTML> begonnen und mit dem Kommando </HTML> abgeschlossen.
Im Prinzip besteht ein HTML-Dokument aus zwei Teilen. Im Header (umschlossen von <HEADER> … </HEADER>) wird das Dokument selbst beschrieben und im Body (umschlossen von <BODY> … </BODY>) sein Inhalt.
Der HEADER enthält den Titel des Dokuments, der in der Titelleiste des Webbrowsers angezeigt wird, und einige Festlegungen, z. B. zur Zeichencodierung.

Seitenaufbau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HLW Hollabrunn</title>
</head>

<body>
<h1>Die fünfjährige Höhere Lehranstalt </h1>
<p/>Die fünfjährige Lehranstalt für wirtschaftliche Berufe führt zur Matura. … </p>

<h1>Die dreijährige Fachschule</h1>
<p>Die dreijährige Form mündet in die Abschlussprüfung. … </p> 
</body>
</html>

Ergibt:

Auf der Site http://codebeautify.org/htmlviewer/ kannst Du experimentieren. Im linken Fenster trägst Du HTML-Code ein, klickst in der Mitte auf RUN und siehst rechts das Ergebnis.

HTML-Elemente zur Text-Strukturierung: Näheres siehe auf http://de.selfhtml.org/html/text/index.htm

• <h> (h1 – h6)
  Überschriften auf 6 Ebenen
  Jede Überschrift ist eine eigener Absatz, es braucht daher davor und danach kein eigener Absatz eingefügt werden.
• <p>
  Textabsatz
  Ein Absatz ist ein Textabschnitt, der einen Abstand davor und danach hat.
• <br>
  erzwungener Zeilenumbruch
  Ein bloßer Zeilenumbruch erzeugt keinen Abstand wie ein Absatz.
• <em>
  zeichnet einen Text als betont aus
• <strong>
  zeichnet einen Text als stark betont aus
• <b>
  zeichnet einen Text als fett aus
• <i>
  zeichnet einen Text als kursiv aus
• <u>
  zeichnet einen Text als unterstrichen aus
• <sup>
  zeichnet einen Text als hochgestllt aus
• <sub>
  zeichnet einen Text als tiefergestellt aus
• <div>
  damit wird ein Block (Box) erzeugt

Eine umfassende Liste aller HTML-Tags findest Du auf https://wiki.selfhtml.org/wiki/Referenz:HTML