Neu! Aktualisierung der Webseite!
Zur aktualisierten Webseite geht es hier:
HTML
-
HTML und HTML5
Den HTML-Code (Hypertext Markup Language) setzen Browser um: In Layout, Schriftarten, Hervorhebungen, Farben. Innerhalb des HTML-Codes können Grafiken, Fotos, Multimedia-Module geladen und Programme angestoßen werden - sowohl client- als auch serverseitig.
HTML Befehle umschließen den jeweiligen Text: Beginn und Ende einer Anweisung werden mit < > und </> gekennzeichnet:
<strong>dies ist wichtig</strong> bewirkt z.B. die Hervorhebung von dies ist wichtig.
-
HTML - Grundlegende Struktur der Anzeige
Herkömmliche HTML Dokumente sind strukturiert durch
Meta-Angaben über die Webseite <head> </head>
Browser-Titel der Webseite <title> </title>
eigentlicher Inhalt der Webseite <body> </body>
Innerhalb des eigentlichen Inhalts:
Überschriften: <h1>.....</h1>, <h2>......</h2>,<h3>.....</h3> bis <hn>............</hn>
Zeilen:<div>............</div>
Bereiche:<span>........</span>
-
HTML5 - Grundlegende Struktur der Anzeige
In HTML5 kommen folgende Strukturelemente hinzu, die der typischen Aufteilung von Vorlagen entsprechen.
<header> Kopf der Webseite
<nav> Navigation/Menü
<section> Gruppe von Elementen
<figure>Anmerkungen, Codebeispiele, Abbildungen, Zeichnungen, Fotos und Videos
<article> der eigentliche Inhalt der Webseite
<aside> Zusatz zum Inhalt der Webseite
<footer>Fuß der Webseite -
HTML5-Grundgerüst
<!DOCTYPE html>
<!-- Die DOCTYPE Angabe erklärt dem Browser, welche HTML-Version verwendet wird. in diesem Fall die neueste Version HTML5 -->
<html lang="de">
-
HTML5 Grundgerüst zum Kopieren
<!DOCTYPE html>
<html lang="de">
<head>
<META name="robots" content="index, follow">
<meta charset="UTF-8"><title>Titel Ihrer Webseite</title>
<meta name="description" content="hier Beschreibung Ihrer Webseite einfügen"><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> -
HTML und CSS
Sie können Stylesheet-Angaben innerhalb eines HTML-Dokuments machen, aus Sicherheits- und praktischen Gründen sollten Sie die Angaben jedoch in eine eigene .css Datei schreiben.
-
Das Box-Modell
CSS-Elemente können eine definierte Breite, Höhe, einen Innenabstand, Rahmen und einen Außenabstand haben.
-
Positionieren mit CSS - Beispiel: zwei Spalten
Zwei Spalten nebeneinander positionieren mit position:absolute,
-
Editoren
Wordpad, Windows Editor, Word können Sie für HTML und CSS Code nicht verwenden. Sie benötigen einen Editor, der im Format utf-8 abspeichert.
-
Tabellen mit HTML
Tabellen werden in Zeilen und Spalten definiert. Breite und Höhe kann relativ in px oder absolut in % angegeben werden. Vergleich zu Excel: Spaltenkennzeichnung A,B,C... Zeilenkennzeichnung 1,2,3, Sie sagen dem Browser Zeile1, Spalte A,B,C...., Zeile2,Spalte A,B, C...Zeile 3, Spalte A,B,C...
-
Unterschiedliche Anzeige in unterschiedlichen Browsern
Mit HTML5 und CSS3 gibt es wieder eine Reihe potentiell unterschiedliche Umsetzungen von Webseiten in Browsern, die im Code abgefangen werden müssen, will man, dass die Webseite zuverlässig in gleicher Weise in allen Browsern angezeigt wird. Ganz wird man es nie schaffen.
Browser und Browser-Versionen richten sich nach den verwendeten Geräten und ihren Betriebssystemen. Sie finden die aktuelle Verbreitung von Browsern in Deutschland hier:
www.browser-statistik.de -
E-Mail Link
Ein E-mail Link funktioniert wie ein externes Link mit dem Befehl mailto:. Voraussetzung ist, dass die Mail des Anwenders mit dem Browser des Benutzers verknüpft ist.
-
Vorlagen, Templates, Themes
Bei einem einfachen Webauftritt mit HTML und CSS kopieren Sie für jede Webseite die HTML Vorlage bestehend aus .html Struktur (einschließlich der Menülinks) und .dem Verweis im Head auf das css Layout,
-
Doctype Deklaration, HTML Version
Zuständig für Internet Standards ist die W3C.org
Browser erkennen anhand der Doctype Angabe im <HEAD>, wie sie HTML-Angaben interpretieren sollen.
Wenn Sie mit CSS arbeiten wollen, ist folgende Angabe sinnvoll:
-
Responsive Design - HTML und CSS für mobile Geräte
Sie können ein anderes Layout für Ihre Webseite für mobile Geräte mit folgenden Anweisungen erzeugen:
HTML
fügen Sie in den Head des Dokuments folgendes ein:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
Dies setzt die Breite des mobilen Gerätes als Anzeigebreite der Webseite
Sie können ein eigenes mobiles Stylesheet mobile.css einbinden mit
<link rel=”stylesheet” media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” />
-
Was ist was - HTML, XML, XHTML, SGML
SGML - Standard Generalized Markup Language - komplexer und umfangreicher grundlegender ISO-Standard für elektronische Dokumente, von Runen zu technischer Dokumentation, von Patientendateien zu Musiknoten.
-
formatierter Text
<pre> ......</pre> formatiert Text so wie eingegeben.
-
HTML und CSS überprüfen - Tools des w3c.org
-
Javascript, DHTML, Ajax, Jquery
Javascript ist eine clientseitige Programmiersprache, mit der Sie vor allem die Anzeige von HTML-Seiten
-
Tabellen - Webseite zentrieren
Achtung: HTML Layout-Tabellen gelten als veraltet und nicht barrierefrei. Webseiten sollten durch CSS positioniert werden.
-
Elemente Positionieren mit Flexbox
Das Eltern-Element muss im Stylesheet mit display:flex; bezeichnet werden. flex-wrap: wrap; erzeugt einen Umbruch. Als Richtung kann row oder column gesetzt werdenflex-direction: column; Die Elemente lassen sich zentrieren mit justify-content: center;
Mehr bei https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox
Beispiel:
-
Links: seiteninterne Sprünge, Anker
Sie können innerhalb einer Seite Ihres Webauftritts mit Links springen: Dies ist sinnvoll bei sehr langen Seiten, wenn Sie an den Anfang ein Inhaltsverzeichnis setzen
Sie definieren zuerst den sogenannten "Anker", d.h. wohin bei Aufruf des Links gesprungen werden soll:
<a name="hierhin">da wollen Sie hin</a>Anschließend können Sie Links setzen:
-
HTML5 Audio-Dateien einbinden
-
E-Mail Link
Ein E-mail Link funktioniert wie ein externes Link mit dem Befehl mailto:. Voraussetzung ist, dass die Mail des Anwenders mit dem Browser verknüpft ist.
<a href="mailto:ich@meineseite.de">Meine E-Mail-Adresse</a>
Vom Browser unabhängige E-Mail-Funktionalität lässt sich nur mit serverseitigen Skripten erstellen, z.B. mit .cgi oder .php.
-
Tabellen zum Kopieren
-
Bilder mit Links hinzufügen
Eine detaillierte Beschreibung des HTML-Codes zum Einfügen von Grafiken finden Sie hier:
-
Kommentare
Kommentare schaffen Übersichtlichkeit im Quelltext
.html
-
Musik einbinden
Alt - ältere Browser-Versionen
Mit den Anweisungen <bgsound> und <embed> können Sie einfach Musikdateien einbinden:
http://de.selfhtml.org/html/dateiweit/hintergrundmusik.htm
Allerdings funktioniert diese Lösung nicht in allen Browsern.
Eine bessere Lösung ist es, das weit verbreitete Flash-Plugin zu verwenden z.B. mit Hilfe des "Einfachen Musicplayers für Flash" EMFF.
Eine Beschreibung, wie das funktioniert, finden Sie hier:
-
SVG Grafik erklärt - zum Kopieren
<svg height="300px" width="600px">
<!-- Größe des Grafikbereichs--> -
Lizenzfreie, kostenlose Geräusche und Musik
Eine Übersicht lizenzfreier, kostenlos erhältlicher Musikstücke und Geräusche-Sammlungen finden Sie hier
www.medienpaedagogik-praxis.de/kostenlose-medien/freie-musik