Baustein 07 grundlagen-html-css-php

1,123 views
961 views

Published on

Zusatzinformationen zum Social Media-Lehrgang Teil 01: Grundlagen HTLM + CSS / PhP-Einsatz für WordPress

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,123
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Baustein 07 grundlagen-html-css-php

  1. 1. Grundlagen HTML – CSS - PHP
  2. 2. • 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
  3. 3. Grundprinzip modernem Webdesigns Grundlagen HTML | CSS | PHP - M.Kollmannsberger
  4. 4. HTML - Grundlagen Website-Struktur
  5. 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. 6. Wie ist eine Webseite aufgebaut? http://www.seiserhof.de Grundlagen HTML | CSS | PHP - M.Kollmannsberger
  7. 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. 8. Grundaufbau einer Website <DOCTYPE HTML> <head> Inhalte des Kopfbereiches </head> <body> Seiteninhalt </body> </html> Grundlagen HTML | CSS | PHP - M.Kollmannsberger
  9. 9. Hintergrund Seiteninhalte Grundlagen HTML | CSS | PHP - M.Kollmannsberger LogoSeiteninhaltsbereich Navigation Navigation Seitenleiste Slider Seitenkopf
  10. 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
  11. 11. Grundgerüst einer Website <DOCTYPE HTML> <html> <head> </head> <body> • Hintergrund • Seiteninhaltsbereich • Seitenkopf • Logo-Bereich • Navigation • Navigation / Seitenleiste • Slider • Seiteninhalte </body> </html> Grundlagen HTML | CSS | PHP - M.Kollmannsberger Quellcode – Verarbeitung durch Browser
  12. 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. 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. 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. 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. 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&uuml;nchen steht ein Hofbr&auml;uhaus. Dort gibt es Bier aus Ma&szlig;kr&uuml;gen.
  17. 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. 18. CSS - Grundlagen das Aussehen unserer Website mit Hilfe von Cascading Style Sheets
  19. 19. CSS ZEN GARDEN - http://www.csszengarden.com Grundlagen HTML | CSS | PHP - M.Kollmannsberger
  20. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  33. 33. 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 Grundlagen HTML | CSS | PHP - M.Kollmannsberger
  34. 34. CSS Transformationen Grundlagen HTML | CSS | PHP - M.Kollmannsberger Transformationen bei CSS
  35. 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
  36. 36. PHP und WordPress Personal Home Page Tool Hypertext Preprocessor
  37. 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. 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. 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. 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
  41. 41. WordPress - Design Warum wir ein Child-Theme verwenden sollten?
  42. 42. 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! Grundlagen HTML | CSS | PHP - M.Kollmannsberger 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
  43. 43. WordPress Child-Theme Erstellen wir nun unser eigenes Child-Theme… Grundlagen HTML | CSS | PHP - M.Kollmannsberger
  44. 44. Anpassungen Theme Webfonts / google fonts
  45. 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. 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. 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

×