In dieser Episode möchte ich dir das Fachbuch „Einstieg in HTML und CSS“ von Peter Müller aus dem Rheinwerk Verlag vorstellen. Der Rheinwerk Verlag ist Medienpartner des nerdcafe und hat mir dieses Rezensionsexemplar zur Verfügung gestellt.
Das Buch beim Rheinwerk Verlag: https://www.rheinwerk-verlag.de/einstieg-in-html-und-css/
Weiterführende Episoden:
Episode 012 – Digitale Barrierefreiheit
Episode 022 – Inhalte barrierearm umsetzen
Episode 035 – Einstieg in WordPress 6
Epsiode 040 – Rheinwerk Partnerschaft
Weiterführender Link:
https://html-und-css.de
Das ist die Website zum Buch mit Updates, Errata und weiteren Infos.
Kontakt:
Fragen zu WordPress, Themenwünsche und Ideen?
espresso@nerdcafe.online
Vernetze dich mit Johannes und komm ins nerdcafe live bei LinkedIn
https://de.linkedin.com/in/johannesmairhofer
Zur nerdcafe Website
https://nerdcafe.online/
Hier findest du den nerdcafe Podcast bei Instagram
https://www.instagram.com/nerdcafepodcast/
Transkript zur Episode:
[00:00:00] Einstieg in HTML und CSS. Das Handbuch von Peter Müller aus dem Rheinweg-Verlag.
[00:00:07] Heute vorgestellt.
[00:00:10] Moin aus Hamburg und herzlich willkommen im Nerdcafé Podcast.
[00:00:19] Den Podcast rund um WordPress, Hosting, CMS und Web. Ich bin Johannes Meyerhofer.
[00:00:26] Ich bin dein Host und ich bin Experte und Trainer für WordPress. Mit diesem
[00:00:33] Podcast helfe ich dir dabei alle Themen, die dich interessieren, wenn du mit einem
[00:00:37] eigenen Webseiten-Projekt starten möchtest, besser zu verstehen. Und jetzt
[00:00:42] wünsche ich dir ganz viel Spaß mit der Podcast-Episode. Mit dem Rheinweg-Verlag
[00:00:47] arbeite ich jetzt schon eine ganze Weile zusammen. Früher einfach als Rätseln
[00:00:52] senden von deren Fachbüchern, aber in diesem Jahr auch mit einer Medienpartnerschaft.
[00:00:58] Wie die aussieht, warum wir das machen und so weiter habe ich in der Episode 40
[00:01:03] einmal ausführlich erklärt. Und auch in der Episode 35 habe ich schon einen
[00:01:08] Buch aus dem Rheinweg-Verlag vorgestellt. Ebenfalls von Peter Müller.
[00:01:12] Das heißt "Einstieg in WordPress 6". Für diesen Podcast wurden mir die Bücher
[00:01:20] zur Verfügung gestellt. Das ist Teil der Partnerschaft mit dem Rheinweg-Verlag.
[00:01:25] Und ich freue mich auch jetzt nochmal ein Buch vorzustellen. Das heißt "Einstieg in
[00:01:29] HTML und CSS aus dem Rheinweg-Verlag" und ebenfalls von Peter Müller.
[00:01:36] Ich bin nicht so der Programmierer, nutze aber natürlich, da ich WordPress-Trainer bin,
[00:01:44] immer wieder auf CSS und kann zumindest HTML und PHP Code lesen. Und finde, dieses
[00:01:53] Buch ist auch, wenn du da jetzt einsteigen willst und Webseiten selber erstellen willst,
[00:01:59] aber auch wenn du WordPress nutzt und einfach ein bisschen an den Code ran willst,
[00:02:03] eine Superergänzung einerseits zu WordPress, aber andererseits auch zu dem Buch
[00:02:09] "Einstieg in WordPress 6". Und jetzt möchte ich dir ja mal ein bisschen was aus dem Buch zeigen.
[00:02:16] Es ist aufgeteilt in mehrere Teile. Teil 1 bezieht sich auf Webseiten HTML und CSS.
[00:02:24] Du hörst das vielleicht, ich habe es auch direkt hier vorliegen. Teil 2, da geht es dann um HTML.
[00:02:31] In Teil 3 geht es um CSS Grundlagen und in Teil 4 um den "Das CSS" Layout. Also alles Themen,
[00:02:43] die dich interessieren, wenn du mit Webseiten Programmierung starten möchtest und vor
[00:02:48] all dem, dass CSS Teil ist für dich interessant, wenn du bei WordPress in dem Customizer Benutzer
[00:02:57] definierten oder Custom CSS heißt, dass du dort einsetzen willst. Denn am Ende ist WordPress ja
[00:03:04] auch nur ein Anführungszeichen, PHP, HTML und CSS. Klar, eine Datenbank ist dabei und ein bisschen,
[00:03:11] was das Ganze so zusammenfügt quasi. Aber du kannst WordPress auch komplett individuell
[00:03:18] ändern. Das ist ja der Schöne daran. WordPress ist open source, das heißt der Code ist offen.
[00:03:24] Und du kannst auch WordPress selber hosten auf deinem Server und dann den Code so weit verändern,
[00:03:31] dass es für dich komplett individuell funktioniert. Passt dazu, möchte ich direkt mal einsteigen
[00:03:37] mit einem Zitat aus dem Buch auf Seite 38. Geht es um Quelltext besteht aus HTML, CSS und JavaScript.
[00:03:45] Und jetzt lese ich ein bisschen was vor. Der Quelltext einer Webseite besteht aus den Sprachen
[00:03:51] HTML, CSS und optional JavaScript, die sich perfekt ergänzen. Das Fundament einer Webseite ist
[00:03:57] HTML. HTML strukturiert eine Webseite und deren Inhalt, das ist nicht hübsch, aber flexibel.
[00:04:04] CSS gestaltet das HTML. Die Schwierigkeit beim Gestalten besteht darin, die Seite attraktiv und
[00:04:11] übersichtlich zu machen, ohne dabei deren natürliche Flexibilität zu verlieren. JavaScript ist
[00:04:18] eine Programmiersprache, mit der man das Verhalten der Website steuern und so zum Beispiel deren
[00:04:23] Bedienung erleichtern kann. Einfache Webseiten kommen fast ohne JavaScript aus. In interaktiven
[00:04:30] Web-Applikationen spielt es in Gegen oft die Hauptrolle. CSS und JavaScript machen die Seite
[00:04:36] also hübscher und besser bedienbar, aber das Fundament ist HTML. Ohne HTML sind CSS und
[00:04:44] JavaScript arbeitslos. Weil dieser Sachverhalt recht abstrakt klingt, möchte ich Ihnen zur
[00:04:50] Zusammenarbeit von HTML und CSS ein konkretes Beispiel zeigen. Dann kommen jetzt tatsächlich
[00:04:56] konkrete Beispiele. Du siehst auch im Buch dann den geschriebenen Code und das Ergebnis,
[00:05:02] wie der Code denn in der Webseite aussehen könnte. Im Buch gibt es auch viele Übungsdateien
[00:05:11] und alle diese Dateien kannst du tatsächlich auch runterladen. Apropos runterladen, du kannst auf
[00:05:17] der Website vom Verlag auch das Inhaltsverzeichnis komplett einsehen und Probekapitel lesen. Ich
[00:05:24] blinke das natürlich in den Shownotes. Du willst jetzt vielleicht direkt loslegen und die erste
[00:05:30] Seite mit HTML erstellen. Dazu lese ich dir auch einen ganz kurzen Abschnitt vor. Seit der 54,
[00:05:37] jede Website hat dein HTML Grund gerüst. Der Quelltext einer jeden Webseite besteht aus vier
[00:05:44] Abschnitten. Erstens, ganz am Anfang in der allerersten Zeile steht der Doktype. Zweitens,
[00:05:51] das Stammelement HTML enthält nur die Elemente Head und Body. Der Vorspann Head enthält wichtige
[00:05:59] Infos über die Webseite. Viertens, Body enthält den Imbrowser sichtbaren Bereich der Webseite.
[00:06:06] Diese vier Abschnitte bilden zusammen das HTML Grundgerüst, das einer Website wie ein Skelett
[00:06:13] eine Struktur gibt und sie im Innersten zusammenhält. Wenn du jetzt sagst, das möchte ich mal sehen,
[00:06:20] kannst du in der nahezu jeder Webseite mit der rechten Maustaste auf die Website am besten
[00:06:26] bei der Homepage drauf gehen und je nach Browser heißt es unterschiedlich, meistens aber Quelltext
[00:06:33] anzeigen. Also, du rufst irgendeine Website auf, gehst mit der rechten Maustaste irgendwo hin in
[00:06:40] der Webseite und sagst dann Quelltext anzeigen. Dann wirst du genau das sehen,
[00:06:46] was hier steht und zwar den Doktype Body und die HTML Text. Schaut es doch gerne schon mal an.
[00:06:53] Moin aus dem Schnitt und ganz kurze Unterbrechung. Wenn dir dieser Episode gefällt, nutzt doch gerne
[00:07:03] die Chance und lasst mir ein Abo da. Wenn du magst, empfehle den Podcast gerne weiter,
[00:07:07] das würde mich sehr freuen. Und würde noch mehr Menschen die Möglichkeit geben,
[00:07:12] WordPress zu verstehen. Jetzt aber weiter mit der Episode. Das dritte Beispiel ist wieder eins,
[00:07:18] was mir persönlich sehr am Herzen liegt und das ist die Barrierefreiheit. Ich finde es cool,
[00:07:23] dass der Peter und auch der Verlag sich dafür einsetzen und das auch hier behandeln. Auch hier
[00:07:30] lese ich einen kurzen Abschnitt vor. Seite 43, Webseiten und Barrierefreiheit. Da geht es jetzt
[00:07:36] eher so ein bisschen allgemein um Barrierefreiheit im Buch insgesamt. Kommt das Thema aber oft vor und
[00:07:43] es gibt auch immer wieder Tipps, welche Codebereiche denn mit Barrierefreiheit zu tun haben und warum
[00:07:49] das denn wichtig ist. Jetzt aber hier eben Buch das Zitat. Barrierefreiheit bezeichnet laut Wikipedia
[00:07:56] die Gestaltung der Umwelt, die es allen Menschen ermöglicht, ohne Hindernisse mit ihrer Umgebung
[00:08:02] zu interagieren. Und das gilt natürlich auch für das World Wide Web. Barrierefreiheit heißt
[00:08:08] dem englischen Accessibility, Wörtlich-Zugänglichkeit und zur barrierefreien Gestaltung von Webseiten
[00:08:15] gibt es die von der Web Accessibility Initiative, erstellten und sehr umfangreichen Web Content
[00:08:21] Accessibility Guidelines, die WCAG. Eine kurze Einführung finden Sie auf der Webseite WCAG2,
[00:08:28] dann kommt so ein Link, den die Sie jetzt nicht vor. Und dann beschreibt der Peter auch sehr gut die
[00:08:34] vier grundlegenden Prinzipien für barrierefreien Webseiten und das ist einmal die Wahrnehmbarkeit,
[00:08:40] die Bedienbarkeit, die Verständlichkeit und die Robustheit. Dazu weiß ich jetzt zufälligerweise
[00:08:47] ziemlich gut Bescheid und habe dazu zwei Episoden schon aufgenommen, mache dazu auch immer
[00:08:53] wieder Vorträge und bin da sehr dran und halte das für sehr relevant. Die beiden Episoden im
[00:09:02] Podcast, wo ich mich damit beschäftigt habe, ist die Episode 12 "Digitale Barrierefreiheit und Episode
[00:09:09] 22 "Inhalte barrierearm umsetzen". Die Episode 12 ist eher so ein bisschen der gesellschaftliche
[00:09:16] Blick und die Episode 22 ist dann die konkrete Umsetzung, wie du deine Webseite Barriereärmer
[00:09:23] gestalten kannst. Zurück zum Buch. Ich finde es wirklich toll, auch egal ob du jetzt wirklich
[00:09:30] komplett zum Webprogrammierer werden willst und alles per Code selbst machen willst oder ob du sagst,
[00:09:37] ne mir reicht es ja, wenn ich Code so einigermaßen lesen kann, so wie ich das zum Beispiel mache
[00:09:42] und vielleicht ein bisschen mit CSS deine WordPress-Seiten anpassen. Da ist für jeden Geschmack
[00:09:50] was dabei. Ich kenne den Peter Müller auch tatsächlich so ein bisschen persönlich. Wir sind
[00:09:56] immer wieder im Austausch über LinkedIn oder Mast zu donnen und ich finde, dass er da eine sehr
[00:10:03] gute Art hat, die Dinge zu beschreiben. Ich kann es persönlich finden, das mit dem Sie ein bisschen
[00:10:09] vor dem Niveau gejammert, aber das finde ich befremdlich, weil ich gar kein Siehtyp bin. Ich bin
[00:10:15] der absolute Do-Typ. Das merkst du ja vielleicht schon. Ich duze ja auch hier im Podcast. Ich duze
[00:10:20] auch 99 Prozent meiner Kund*innen. Ich duze in Social Media, aber einfach in der Geschmacksfrage. Du
[00:10:26] kannst natürlich auch ein Fan des Sieges sein. Es spielt auch keine Rolle. Es ist nur ein bisschen
[00:10:34] komisch für mich, aber der Inhalt ist ja viel wichtiger als die Art und Weise, wie ich hier
[00:10:39] angesprochen werde. Mit dem Buch bekommst du auf jeden Fall einen sehr guten Überblick und Einblick.
[00:10:45] Heißt ja auch Einstieg in HTML und CSS. Ich kann dir empfehlen, auf der Website vom Verlag zu
[00:10:51] schauen. Verlinke ich dir die Show Notes. Da bekommst du nochmal ein Überblick. Du kannst ins
[00:10:56] Buch einblicken, weil Probekapitel online sind und du kannst das Buch sowohl als Print als auch
[00:11:05] digital bestellen. Ich wünschte damit auf jeden Fall viel Spaß. So eine kleine Überraschung habe
[00:11:13] ich aber jetzt doch noch. Weihnachten steht ja vor der Tür und wenn du jetzt noch ein Geschenk
[00:11:18] brauchst, für dich oder zum Weiterverschenken habe ich hier noch eine kleine, kleine nachträgliche
[00:11:24] Überraschung. Der Reinwerkverlag hat mir nämlich drei Exemplare des Buches zur Verfügung gestellt
[00:11:31] als eBook und die darf ich jetzt hier noch vergeben. Ich habe mir eine kleine Aufgabe überlegt und zwar
[00:11:39] freue ich mich hier, wenn der Podcast noch ein bisschen wächst, wenn noch mehr Menschen davon
[00:11:43] erfahren und das funktioniert natürlich gut über Bewertungen. Das heißt, ich würde mich freuen,
[00:11:50] wenn du den Podcast auf einer Plattform deiner Wahl bewertest und mir die Bewertung bzw. ein
[00:11:57] Screenshot davon per E-Mail schickst. Und die ersten drei Bewertungen, die ich hier bekomme,
[00:12:11] die bekommen von mir als Gegenzug das Buch. Ganz einfach, ihr bekommt einen Code, den könnt ihr
[00:12:18] sofort einlösen und wenn alles gut läuft und ihr schnell seid mit dem Zusenden der Bewertung,
[00:12:24] dann habt ihr noch rechtzeitig zu Weihnachten ein eBook in der Hand. Damit jetzt aber wirklich
[00:12:32] tschüss und schöne Weihnachten. Tschüss, das heißt auf Wiedersehen. Ich freue mich, wenn wir uns hier
[00:12:40] sehr bald wiedersehen bzw. hören. Wenn du darauf auch Lust hast, abonnier doch am besten diesen
[00:12:46] Podcast und empfehle ihn auch deinen Freundinnen und Kollegen, denn so wird die Reichweite einfach
[00:12:51] noch mal vergrößert. Bei LinkedIn findet außerdem jede Woche meistens am Donnerstag das Nerdcafé
[00:12:58] live statt. Hier tausche ich mich regelmäßig mit verschiedenen Expertinnen über deren Fachgebiete
[00:13:04] aus. So kann ich meine fachliche Filterbabel erweitern und über den eigenen Tellerrand schauen. Und
[00:13:10] auch du kannst davon profitieren, denn im Nerdcafé live hast du die Möglichkeit, deine Fragen zu
[00:13:15] stellen. Ich hoffe, du konntest heute einiges mitnehmen. Wenn du magst, schick mir doch dein
[00:13:20] Feedback und Themenwünsche an die Espresso@nerdcafé.online. Espresso@nerdcafé.online. Tschüss!
[00:13:28] [Zwischenruf]
[00:13:30] [MUSIK]
