5. Wie funktioniert HTML?
HTML = Hyper Text Markup Language
Was brauchen wir?
• allgemein gültige Markierungselemente
• allgemein gültige Regeln zur Darstellung der Elemente
Wie funktioniert die Markierung?
• Markierungselemente – Tags - treten in der Regel paarweise auf
zu jedem öffnendem Element - <tag> - gibt es ein passendes schließendes
Element - </tag>
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
6. Wie ist eine Webseite aufgebaut? http://www.seiserhof.de
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
7. Grundelemente einer Website
Deklaration (unsichtbar)
Über die Deklaration wird dem jeweiligen Browser mitgeteilt, um welche Art von Dokument es
sich handelt.
<!Doctype HTML>
Kopfbereich (unsichtbar)
Bevor eine Website angezeigt werden kann, ist es erforderlich einige technische und informelle
Informationen für den Browser bereit zustellen. Unter anderem finden hier die Angaben für
CSS-Dateien und meta-Informationen zum Seitenaufbau und –inhalt Platz.
<head> ……. </head>
Körper
Hier befindet sich der eigentliche Inhalt unserer Webseite, der vom Browser ausgegeben wird.
<body> ……. </body>
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
8. Grundaufbau einer Website
<DOCTYPE HTML>
<head>
Inhalte des Kopfbereiches
</head>
<body>
Seiteninhalt
</body>
</html>
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
10. die verschiedenen Bereiche | DIV-Container
Die Inhalte auf unserer Website werden also durch Bereiche gegliedert!
Bereichskennzeichner:
<html> …. </html> Bereich der Website
<head> …. </head> unsichtbarer Bereich für Zusatzinformationen
<body> …. </body> sichtbarer Bereich unserer Website
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
12. Inhaltsgliederung
durch Container
Unsere Seiteninhalte können wir in einzelne
Bereiche unterteilen.
Bereich = Division <div>
Um die einzelnen Bereiche Unterscheiden zu
können, ist es erforderlich diese zu
benennen.
z.Bsp.:
Seitenkopf <div id='header'>
Logo-Bereich <div id='logo'>
Navigation <div id='navigation'>
Seitenleiste <div id='sidebar'>
Seiteninhalt <div id='content'>
Fußzeile <div id='footer'>
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
Der Seiteninhalt wird durch verschiedene Markierungs-
elemente (Selektoren) gegliedert.
Die wichtigsten Selektoren zur Textgliederung:
Absatz <p> …. </p>
Zeilenschaltung <br/>
Überschriften <h1> …. </h1>
h1, h2, h3, h4, h5, h6
geordnete Liste <ol> ….</ol>
ungeordnete Liste <ul> …. </ul>
Listenpunkt <li> …. </li>
Hyperlink <a href:"URL">Linktext</a>
Inhaltskennzeichnung
durch Markierungselemente
13. interne und externe Verlinkung
Ankertexte
<a id="top"></a>
<h2>Überschrift 2</h2>
<ol>
<li><a href="#Ankertext1">Topic 01</a></li>
<li><a href="#Ankertext2">Topic 02</a></li>
<li><a href="#Ankertext3">Topic 03</a></li>
</ol>
<a id="Ankertext1"></a>
<h3>Topic 01 (Überschrift 3)</h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et</p>
<a id="Ankertext2"></a>
<p style="text-align: right;"><a href="#top">zum Textanfang</a></p>
<h3>Topic 02</h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
odio dignissim qui blandit praesent luptatum zzril aliquam erat volutpat.</p>
<a id="Ankertext3"></a>
<p style="text-align: right;"><a href="#top">zum Textanfang</a></p>
<h3>Topic 03</h3>
Hyperlinks werden zur Verknüpfung der
jeweiligen Angebote benötigt.
Im HTML stellt sich dies so dar:
<a href="http://website.xy">linktext</a>
Für Sprünge innerhalb einer Seite kommen
Ankertexte zum Einsatz.
Festlegung Ankertext:
<a id="Ankertext">Textstelle</a>
Seiteninterne Verlinkung
<a href="#Ankertext">Text des Links</a>
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
http://wi537.2fcommunication.de/ankertexte-nutzen-und-erstellen/
14. Grundlagen HTML | CSS | PHP - M.Kollmannsberger
Tabellen auf Websites
Tabellen in HTML bestehen aus verschiedenen Elementen:
<table>
<tbody>
<tr>
<th> Überschrift erste Spalte</th><th> Überschrift zweite Spalte</th>
</tr>
<tr>
<td>Inhalt erste Spalte</td><td>Inhalt zweite Spalte</td>
</tr>
</tbody>
</table>
<table> … </table> Tabellenbereich
<tbody> … </tbody> Tabellenkörper
<tr> … </tr> Zeilenbeginn / Zeilenende
<th> … </th> Tabellenheader / Überschriftseintrag Spalte
<td> … </td> Spalteninhalt
Tabellenkopf
Tabellenzelle
15. inline – frames
externe Seiteninhalte
Externe Inhalte können in unserer Website mittels
einem i-Frame wiedergegeben werden.
Google-Maps
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m
8!1m3!1d10936.536807392573!2d11.648275!3d46.742536
!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477804f8c4df7d9
f%3A0x9692866425774705!2sBildungshaus+Kloster+Neustif
t!5e0!3m2!1sde!2sde!4v1399897214147" width="800"
height="600" frameborder="0" style="border:0"></iframe>
YouTube-Video
<iframe width="560" height="315"
src="//www.youtube.com/embed/SL6ugQ4gQFw"
frameborder="0" allowfullscreen></iframe>
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
16. HTML
und Umlaute Um Sonderzeichen zu erhalten, sollten wir unsere Website unter
Zeichensatz ISO 8859-1 oder UTF-8 verwenden.
Am einfachsten lässt sich dies per Vereinbarung im Kopfbereich der
Website erreichen.
Sollte die nicht möglich sein, so können wir die benötigten Zeichen auch
per HTML-Kodierung erhalten:
Übersetzen wir diesen Satz:
Umlaute und Sonderzeichen sind auf
Websites nicht immer ohne Probleme
darstellbar.
Die meisten Webanwendungen basieren auf
den ASCII-Zeichensatz.
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
In München steht ein Hofbräuhaus.
Dort gibt es Bier aus Maßkrügen.
17. HTML - Literatur
HTML5 ist die Sprache des Web 2.0.
Und das HTML5-Handbuch von Stefan Münz und
Clemens Gull ist die Grammatik dazu.
Wie einst die von Stefan Münz mitbegründete
Onlinereferenz SELFHTML beantwortet dieses Buch
alle Fragen zum neuen Internetstandard,
angefangen vom Erstellen einfacher
HTMLDokumente über die Gestaltung
anspruchsvoller Layouts, das Einbinden von
JavaScript-Programmen sowie Audio- und
Videodaten bis hin zu Mikrodaten und
Mikroformaten. Das unverzichtbare Standardwerk
für jeden Webprofi!
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
http://webkompetenz.wikidot.com/docs:html-handbuch
18. CSS - Grundlagen
das Aussehen unserer Website
mit Hilfe von Cascading Style Sheets
19. CSS ZEN GARDEN - http://www.csszengarden.com
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
20. CSS im Allgemeinem
Was bringt uns CSS?
einheitliche Formatierung
Was können wir mit CSS formatieren?
alle Elemente unserer Website
Was ist CSS?
eine Beschreibungssprache
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
21. CSS – in HTML-Seiten einbinden
3 Möglichkeiten gibt es, HTML und CSS zu verknüpfen:
• In-Line,
also direkt im Quellcode (inline Attributstil)
• In-Dokument
also am Anfang der HTML-Datei
(als Style-Block in den Header -> TAG-Style)
• Extern
ausgelagert in eine eigenständige CSS-Datei (design.css)
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
22. CSS – Aufbau von Formatanweisungen
Bei welchem Element
soll welche Eigenschaft
welchen Wert annehmen?
zu formatierendes Element { .wp-pagenavi {
Eigenschaft 1: Wert; text-align: center;
Eigenschaft 2: Wert; font-size: 16px;
Eigenschaft 3: Wert; color: red;
} }
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
23. CSS - Elemente
allgemeine Selektoren
Die HTML-Elemente zur
Inhaltsgliederung kommen auch
bei CSS zum Tragen.
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
Die wichtigsten Selektoren zur Textgliederung:
Absatz <p> …. </p>
Überschriften <h1> …. </h1>
h1, h2, h3, h4, h5, h6
geordnete Liste <ol> ….</ol>
ungeordnete Liste <ul> …. </ul>
Listenpunkt <li> …. </li>
Hyperlink <a href:"URL">Linktext</a>
24. CSS Anweisung ein Beispiel
Textverarbeitung
Formatieren wir einen Absatz, wie folgt:
• Schrifthöhe 18 Punkt
• Schriftfarbe: blau
• Zeilenhöhe: 1,5 Zeilen
• Hintergrundfarbe: Hellgrau / Silber
CSS - Anweisung
p {
font-size: 18pt;
color: blue;
line-height: 150%;
background-color: silver;
}
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
25. CSS – DIV und Span
DIV - Bereiche
div ist ein blockbildendes Element auf unserer Website.
Div-Bereiche werden zur Positionierung der einzelnen Website-Elemente verwendet.
Span - Bereiche
span ist ein geschlossenes inline-Element.
z.Bsp.:
<p>Das ist ein <span style="strong"> fett</span> geschriebenes Wort.</p>
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
26. Dazu werden die HTML-TAGs um das
Attribut id="idname" erweitert.
ID-Selektoren dürfen auf einer Webseite
nur einmal verwendet werden.
#wrapper
#content
#footer
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
#wrapper {
background-color: #568721
font-family: "Open Sans", Arial, Sans-serif;
}
CSS - ID-Selektoren
CSS-Anweisung
DOCTYPE HTML
<html>
<head>Inhalt Kopfbereich
</head>
<body>
<div id=wrapper>Inhalt Wrapper
</div>
</body>
</html>
HTML-Anweisung
27. CSS
Klassen-Selektoren .beliebig {
font-size: 120%;
color: gelb;
}
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
Dazu werden die HTML-TAGs um das
Attribut class="klassenname" erweitert.
Klassen-Selektoren können mehrfach
auf einer Website verwendet werden.
zum Beispiel:
.beliebig
CSS-Anweisung
HTML-Anweisung
<p> Das ist ein normal geschriebener Text,
<span class="gelb">der ab jetzt größer und mit gelber
Schriftfarbe dargestellt wird</span> und dann wieder
normal fortgesetzt wird.</p>
Das ist ein normal geschriebener Text, der ab jetzt
größer und mit gelber Schriftfarbe dargestellt
wird und dann wieder normal fortgesetzt wird.
Darstellung Frontend
28. CSS
Schriften + Attribute Festlegung der jeweiligen Schriftart:
font-family: Arial, Helvetica,"sans-serif";
Themeanpassung:
Die erste Überschrift soll eine Schriftgröße von 28
Pixel haben und in Tahoma oder Verdana mit
kursiver Schrift dargestellt werden?
h1 {
font-family: Tahoma, Verdana, sans-serif;
font-size: 28px;
font-style: italic;
}
Schriften werden über folgende
Einstellungen in CSS beschrieben:
Schriftart font-family
Schriftlage font-style
Schriftgewicht font-weight
Schriftgröße font-size
Kapitälchen font-variant
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
29. Größenangaben
in CSS - Anweisungen CSS – Beispiel:
body { fontsize: 100%;
color: #fff; }
p { font-size: 0.875em; }
Wie groß ist die Schrift für normale Absätze in Pixel?
100% -> 16 Pixel -> 1.0em
0.875em -> 16*0.875 = 14 Pixel
absolute Größenangaben
• cm, mm oder in
• pc Pica ≈ 12 Punkt Schrift
• pt Punkt ≈ 1/72 Inch oder 0,35 mm
relative Größenangaben
• 100% entspricht bei den meisten
Browsern einer Schriftgröße von 16 Pixel
• em
relativ und absolut zur gleichen Zeit
px Pixel
Bezogen auf das jeweilige Ausgabegerät, also
der Pixeldicht des jeweiligen Bildschirmes
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
Umrechnungstabelle: pixels-to-ems
30. CSS -
Farbangaben
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
Farbnamen
Farbbezeichnungen greifen auf definierte
Listen zurück, um Farben anzeigen zu können.
Hexadezimal-Wert
Farben werden über eine Buchstaben /
Ziffernfolge definiert.
#000000 = Schwarz
#ffffff = weiss
#fff = weiss
RGB-Werte
rot-grün-blau – additives Farbverfahren
Die Farben werden über die Farbanteile
des jeweiligen Mischverhältnis
angegeben.
rgb(20%,35%,40%)
31. CSS3-Farben
mit HSL-Farbschema
Die Farben werden über einen Farbkreis
definiert, wobei 3 Faktoren zum Tragen
kommen.
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
Hue (Farbton)
Saturitation (Sättigung)
Lightness (Helligkeit)
32. CSS3 –
Transparenz erzeugen
opacity
Jedem Element kann eine Transparenz zugeordnet werden.
.box1 { width: 250px;
height: 250px;
backgroundcolor: red;
opacity: 50%, }
Transparenz über Farbcodierung
Transparenz wird bei Farbangaben durch Hinzufügen eines
Alpha-Kanals erzeugt.
HSLA-Farbschema
hsla(300,100%,60%,0.5)
RGBA-Farbschema
rgba(20%,30%,78%,0.5)
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
35. CSS - Literatur
HTML5 und CSS3 sind die Sprachen des Web 2.0.
In diesem Handbuch werden die Möglichkeiten der
Gestaltung durch CSS3 ausführlich behandelt, so
dass auch dieses Werk als Wissensreferenz für CSS
und CSS3 angesehen werden kann.
Ein unverzichtbare Standardwerk für jeden
Webdesigner.
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
http://webkompetenz.wikidot.com/docs:html-handbuch
37. PHP
Syntax
<?php
echo 'Dies ist ein Test';
?>
Jede PHP-Anweisung schließt mit einem ; ab!
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
PHP-Tutorial
38. PHP
Aufbau und Funktionsweise WordPress
WordPress-Installation wp-content
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
Verwaltungs-
bereich
Inhalte
WordPress
Core
Root
Sprachdateien
Funktions-
erweiterungen
Theme / Design
eigene Dateien
Mediathek
39. PHP
Aufbau eines WordPress-Themes
Theme twentyfourteen
• Jedes Theme besteht aus einer Vielzahl an Dateien.
• Welche Ordner und Dateien zur Verfügung stehen ist abhängig vom jeweiligem Theme.
• Die im Frontend angezeigten Seiten werden modular erzeugt.
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
40. PHP + WordPress
Seitenaufbau durch
modulare Verknüpfung
<html>
<head>
</head>
<body>
<div id=wrapper>
<div id=content>
</div>
<div id=sidebar>
</div>
<div id=footer>
</div>
</div>
</body>
</html>
Vorteile durch Module
• Seiten werden in kleinere Einheiten
zerteilt.
• Anpassungen können einfacher
durchgeführt werden.
• Datenmenge wird insgesamt kleiner
• neue Formatvorlagen sind einfacher zu
erstellen
• Funktionen können leichter eingefügt
werden.
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
HTML-Seitenaufbau PHP-Seitenaufbau
header.php
content.php
sidebar.php
footer.php
45. WordPress
Verwendung von Webfonts für Themes
Vorteil von Webfonts
• größere Schriftauswahl für das
Webdesign
• Unabhängigkeit von der User-
Umgebung
• CI-Vorgaben lassen sich leichter
umsetzen
Quellen
• http://fontsqirrel.com
kostenfrei und auch kommerziell nutzbar
• http://dafont.com
nur teilweise kommerziell nutzbar
• http://fontriver.com
nur teilweise kommerziell nutzbar
Achtung!
Die Schriften müssen vorher für das Web
umgewandelt werden und dann auf dem Server
im Webverzeichnis installiert werden.
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
46. WordPress
Verwendung von Google-Fonts für Themes
Verfügbarkeit und Auswahl
http://google.com/fonts
• große Auswahl
zur Zeit 635 font-families zur Auswahl
• keine Kosten
• kommerziell nutzbar
• hohe Verfügbarkeit, da auf Google-
Server gehostet
Hinweis zu TAG: font-family
Was passiert bei Serverausfällen oder Störungen
im Netz?
Legen wir daher "Fallback"-Schriften fest.
font-family: Raleway,Helveticva,sans-serif;
bevorzugte Schrift: Raleway
alternative Schrift: Helvetica
Fallback-Schrift: serifenfreie Schrift
Grundlagen HTML | CSS | PHP - M.Kollmannsberger
47. WordPress
Einbinden von Google
Font
Methoden zum Einfügen der Schriften:
• Referenzlink in die Kopfzeile der jeweilige Seite einfügen
WordPress -> header.php
• Importanweisung direkt in der CSS-Datei unseres Themes
WordPress -> Child-Theme
• per Javascript
Erzeugt einen zusätzlichen Script, der aufgerufen werden
muss – geht zu Lasten der Ladezeit der Website.
Nicht vergessen!
Eintragung der neuen zur Verfügung stehenden Schrift in der
CSS Datei bei den Selektoren, die mit der neuen Schrift
formatiert werden sollen.
Was ist zu beachten:
• nur so wenige Varianten laden, als
unbedingt benötigt werden
– Ladezeit
• bei bestehenden Themes
Überprüfung, welche externen
Schriften geladen werden
• Im Bedarfsfall Reduzierung der
Anzahl der Schriften und
Schriftschnitte
Grundlagen HTML | CSS | PHP - M.Kollmannsberger