Baustein 07 grundlagen-html-css-php

• Planung
• konkrete Überlegungen
• Ideensammlung
• Aufgabenliste – „Pflichten- Lasten-Heft“
• Womit wird umgesetzt?
• Techniken
• Programmsprachen
• HTLM
• PHP / Java-Script
• CSS
Womit beginnt Webdesign?
Grundlagen HTML | CSS | PHP - M.Kollmannsberger

Grundprinzip modernem Webdesigns

HTML - Grundlagen
Website-Struktur

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>

Wie ist eine Webseite aufgebaut? http://www.seiserhof.de

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>

Grundaufbau einer Website
<DOCTYPE HTML>
<head>
Inhalte des Kopfbereiches
</head>
<body>
Seiteninhalt
</body>
</html>

Hintergrund
Seiteninhalte
LogoSeiteninhaltsbereich
Navigation
Navigation
Seitenleiste
Slider
Seitenkopf

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

Grundgerüst
einer Website
<DOCTYPE HTML>
<html>
<head>
</head>
<body>
• Hintergrund
• Seiteninhaltsbereich
• Seitenkopf
• Logo-Bereich
• Navigation
• Navigation / Seitenleiste
• Slider
• Seiteninhalte
</body>
</html>
Quellcode – Verarbeitung durch Browser

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'>
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

interne und externe Verlinkung
Ankertexte
<a id="top"></a>
<h2>Überschrift 2</h2>
<ol>
<li><a href="#Ankertext1">Topic 01</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>
<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>
<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>
http://wi537.2fcommunication.de/ankertexte-nutzen-und-erstellen/

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

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>

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.
In München steht ein Hofbräuhaus.
Dort gibt es Bier aus Maßkrügen.

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!
http://webkompetenz.wikidot.com/docs:html-handbuch

CSS - Grundlagen
das Aussehen unserer Website
mit Hilfe von Cascading Style Sheets

CSS ZEN GARDEN - http://www.csszengarden.com

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

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)

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;
} }

CSS - Elemente
allgemeine Selektoren
Die HTML-Elemente zur
Inhaltsgliederung kommen auch
bei CSS zum Tragen.
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>

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;
}

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>

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
#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

CSS
Klassen-Selektoren .beliebig {
font-size: 120%;
color: gelb;
}
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

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

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
Umrechnungstabelle: pixels-to-ems

CSS -
Farbangaben
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%)

CSS3-Farben
mit HSL-Farbschema
Die Farben werden über einen Farbkreis
definiert, wobei 3 Faktoren zum Tragen
kommen.
Hue (Farbton)
Saturitation (Sättigung)
Lightness (Helligkeit)

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)

Box-Modell
zur Positionierung margin
border
padding
width
height
margin-top
margin-right
margin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left
padding: auto;
padding: 10px 20px 10px 20px;
äußerer Abstand
Rand
innerer Abstand

CSS
Transformationen
Transformationen bei CSS

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.
http://webkompetenz.wikidot.com/docs:html-handbuch

PHP und WordPress
Personal Home Page Tool
Hypertext Preprocessor

PHP
Syntax
<?php
echo 'Dies ist ein Test';
?>
Jede PHP-Anweisung schließt mit einem ; ab!
PHP-Tutorial

PHP
Aufbau und Funktionsweise WordPress
WordPress-Installation wp-content
Verwaltungs-
bereich
Inhalte
WordPress
Core
Root
Sprachdateien
Funktions-
erweiterungen
Theme / Design
eigene Dateien
Mediathek

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.

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.
HTML-Seitenaufbau PHP-Seitenaufbau
header.php
content.php
sidebar.php
footer.php

WordPress - Design
Warum wir ein Child-Theme verwenden sollten?

WordPress
Child-Theme
Inhalt – style.css
@charset "UTF-8";
/*
Theme Name: theme-name-child
Description: Child-Theme
Author:
Author URL:
Version: 1.0
Text Domain: child-theme-ordner
Template: theme-name
*/
benötigte Dateien:
• styles.css
• functions.php
• screenshot.png oder screenshot.jpg
Am Besten verwenden wir die auf der
Lernplattform bereit gestellte Vorlage!
zur Vorlage auf der Lernplattform
Inhalt – functions.php
<?php
add_action('wp_head','load_parent_style',0);
function load_parent_style()
{ wp_register_style('theme-name',
get_bloginfo('template_directory').'/style.css');
wp_enqueue_style('theme-name'); }
?>
screenshot.png

WordPress
Child-Theme
Erstellen wir nun unser eigenes Child-Theme…

Anpassungen Theme
Webfonts / google fonts

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.

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

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

Baustein 07 grundlagen-html-css-php

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Baustein 07 grundlagen-html-css-php

Ähnlich wie Baustein 07 grundlagen-html-css-php (20)

Baustein 07 grundlagen-html-css-php