Internetadressen zum HTML- und CSS-Kurs von L. Oberwinkler

"HTML 5 - Grundlagen der Erstellung von Webseiten" http://www.herdt.de/artikel/HTML5/HTML5/

Programme HTML CSS CSS - Spezielles Layout Barrierefreiheit Responsive Webdesign Hintergrundinformation mehr Werkzeuge Textquellen Bilderquellen Designvorlagen Beispielseiten CMS

Programme

Browser: Firefox http://portableapps.com/de/apps/internet/firefox_portable/
Browser: Opera http://www.opera-usb.com/
HTML-Editor: Phase 5 Editor http://www.phase5.info
HTML-Editor: Bluefish http://www.heise.de/download/bluefish.html
HTML-Editor: NVU http://www.nvu.com/ - deutscher Download Version 1.0 bei Chip
Liste von HTML-Editoren bei Wikipedia http://de.wikipedia.org/wiki/Liste_von_HTML-Editoren
Text-Editor: Notepad++ https://notepad-plus-plus.org/ - deutscher Download bei Chip
FTP-Programm: Filezilla FTP http://www.heise.de/download/filezilla.html
FTP-Programm: SmartFTP http://www.smartftp.com
Grafik-Programm: IrfanView http://www.irfanview.com
Grafik-Programm: XnView https://www.xnview.com/de/xnview/
Grafik-Programm: GIMP http://www.gimp.org/
Grafik-Programm: GIMP - Benutzer/innen-Handbuch http://docs.gimp.org

HTML

SelfHTML von Stefan Münz http://www.selfhtml.net/ - direkt zur Doku: http://de.selfhtml.org/
HTML 5 Handbuch von Stefan Münz, Clemens Gull (ISBN-10: 3645600795) http://webkompetenz.wikidot.com/docs:html-handbuch
HTML Character Entities Cheat Sheet https://www.cheatography.com/davechild/cheat-sheets/html-character-entities/
XHTML Character Entity Reference http://www.digitalmediaminute.com/reference/entity/index.php
andere Sprachen codieren (auf englisch) http://symbolcodes.tlt.psu.edu/bylanguage/index.html
kyrillische Webseiten http://www.moosburg.org/design/kyrill.html8

CSS

CSS bei SelfHTML von Stefan Münz http://de.selfhtml.org/css/index.htm
CSS The Styleworks - Grundlagen, Referenz und Tutorials http://www.thestyleworks.de/
Positionierung mit CSS bei SelfHTML von Stefan Münz https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung
position richtig verwenden von Matthias Apsel http://selfhtml.apsel-mv.de/position/position.html
Zusammenhang zwischen display, position und float von The Styleworks http://www.thestyleworks.de/basics/disposfloat.shtml
CSS Cheat Sheet https://www.cheatography.com/davechild/cheat-sheets/css2/
CSS Zen Garden (engl.) viele schöne Beispiele http://www.csszengarden.com/

CSS - spezielles Layout

CSS-Workshop: Layout ohne Tabellen http://barrierefrei.e-workers.de/workshops/workshop1/index.html
CSS Technik http://www.css-technik.de/
Menüs und Sitemaps mit CSS http://barrierefrei.e-workers.de/workshops/tricks/menues.php
waagrechte Liste mit css (engl.) http://www.designdetector.com/tips/horizontal-list-demo-2.php
Listamatic - noch mehr Listen mit css (engl.) http://css.maxdesign.com.au/listamatic/

Barrierefreiheit

Barrierefreies Webdesign ein behindertengerechtes Internet gestalten http://www.barrierefreies-webdesign.de/
Arbeiten mit CSS: Webdesign ohne Barrieren http://barrierefrei.e-workers.de/
Barriere-Kompass http://www.barrierekompass.de/
Benutzerführung durch gezielte Textorganisation von Karin Büchner http://www.k-buechner.de/beraten/werkstatt/benutzerfuehrung.html
Lesbarkeit von Bildschirmtext von Karin Büchner http://www.k-buechner.de/beraten/werkstatt/bildschirmtext.html
Barrierefreiheit im Internet - technische Aspekte von Werner Schweibenz http://www.jurpc.de/aufsatz/20040193.htm

Responsive Webdesign

Was ist Responsive Webdesign? http://www.responsive-webdesign.mobi/
Wikipedia: Responsive Webdesign http://de.wikipedia.org/wiki/Responsive_Webdesign
Vorsprung durch Webstandards - Responsive Design Workflow http://www.vorsprungdurchwebstandards.de/theory/responsive-design-workflow-probleme/
responsive Webdesign bei SelfHTML von Stefan Münz https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign
Adaptive Website vs. Responsive Website von kulturbanause-Blog https://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website/
9 basic principles of responsive web design von Froont-Blog (engl.) http://blog.froont.com/9-basic-principles-of-responsive-web-design/
Responsive Webdesign mit HTML5 und CSS3, Grundlagen von t3n digital pioneers http://t3n.de/news/responsive-webdesign-html5-css3-grundlagen-335305/
3 Säulen für Responsive Webdesign von konversionsKRAFT https://www.konversionskraft.de/trends/die-3-saeulen-des-responsive-webdesign.html
Media Queries bei SelfHTML von Stefan Münz https://wiki.selfhtml.org/wiki/Media_queries#.C3.9Cbersicht_der_Medienmerkmale
Responsive Webdesign: Viewport, Media Queries, Kontrolle im Browser, Bilder, Videos, Footer, Toggle Menü von HTML-Seminar http://www.html-seminar.de/responsive-webdesign.htm
Ein horizontales Dropdown-Menü responsive gestalten von Oliver Gast http://www.olivergast.de/blog/2015/05/22/css-ein-horizontales-dropdown-menue-responsive-gestalten/
Warum das Hamburger-Icon die Conversion killt von Claudia Heinze https://userlutions.com/blog/ux-design/hamburger-icon-killt-conversion/
Rankings durch Responsive Design von seo-nerd https://www.seo-nerd.com/de/responsive-design
Responsive Webdesign - weitere interessante Artikel von t3n digital pioneers http://t3n.de/tag/responsive-webdesign
Hands-on CSS3 - Free CSS layouts, A collection of free Responsive Bootstrap templates (engl.) http://css.maxdesign.com.au/
Responsive Webdesign Test - Screenfly http://quirktools.com/screenfly/

Hintergrundinformation

Farben und Farbgestaltung mit Forum http://www.farbtipps.de
Farbe und Screendesign von Karin Büchner http://www.k-buechner.de/beraten/werkstatt/farbeundscreen.html
Tutorial: Farben im Webdesign http://www.metacolor.de/
Meta-Tags bei Google https://support.google.com/webmasters/answer/79812?hl=de
Impressumspflicht von Daniel Rehbein http://www.bahnhof-hamburg.de/impressum.html
Haftungsausschluß (Disclaimer) allgemein von Daniel Rehbein http://www.mein-dortmund.de/disclaimer.html
Haftungsausschluß (Disclaimer) zum Urtail des Landgerichts von Daniel Rehbein http://www.daniel-rehbein.de/urteil-landgericht-hamburg.html
Warum Frames out sind von Michael Nahrath http://www.subotnik.net/html/frames.html
Vorsprung durch Webstandards - Ein Herz für Tabellen http://www.vorsprungdurchwebstandards.de/ein_herz_fuer_tabellen.html
Webfonts - Die aktuelle Verbreitung von Schriftarten von Karin Wehle http://www.webmasterpro.de/design/news/2009/02/02/verbreitung-von-schriftarten-im-web.html

Hintergrundinformation - Urheberecht

Lizenzfreie Bilder/Fotos - Was beachten bei Bilder-Nutzung? (Infografik) http://www.bildersuche.org/lizenzfreie-bilder-was-beachten-infografik.php
Urheberecht und kreatives Schaffen in der digitalen Welt http://irights.info/
Broschüre "Spielregeln im Internet - Durchblicken im Rechtedschungel" (Teil 1) mit den Themen: Abmahnung + Anwalt · Datenschutz · Filesharing + Streaming · In eigener Sache · Musik + MP3 · Unterricht · Urheberrecht http://irights.info/2012/08/17/wieder-erhaltlich-spielregeln-im-internet-durchblicken-im-rechtedschungel/4550 - direkt zum pdf
Broschüre "Spielregeln im Internet - Durchblicken im Rechtedschungel" (Teil 2) mit den Themen: Zitieren · Veröffentlichen · Einkaufen · Betrug · digital gekaufte Musik · Online-Betrug · Online-Auktionen · Marken- und Titelschutz bei Webauftritten http://irights.info/rechtsfragen-im-netz-beantwortet-folge-2-der-broschure-spielregeln-im-internet-erschienen - direkt zum pdf
Broschüre "Mein digitales Leben" mit den Themen: Urheberrecht, Verbraucher- und Datenschutz, Persönlichkeitsrecht, Werbestrategien von kommerziellen Anbietern im Internet und mit Tipps zum Umgang mit Daten im Netz, Tipps zur Nutzung von Youtube und sozialen Netzwerken wie Facebook, von Smartphones und dem Betreiben von Fanseiten http://irights.info/2013/04/03/neue-broschure-%E2%80%9Emein-digitales-leben-veroffentlicht/13691 - direkt zum pdf

mehr

"Vorsprung durch Webstandards", ein Webzine zu Webstandards, Barrierefreiheit und Usability http://www.vorsprungdurchwebstandards.de
Lingulo - eine Quelle für Webentwickler http://www.lingulo.com/de/
Usability, Psychologie, Ergonomie, Kommunikation http://www.kommdesign.de/
verschiedene hilfreiche Texte (weiter unten auf der Seite) http://daniel.rehbein.net/
Dr. Web Magazin mit mehreren Tausend Artikel http://www.drweb.de/
Regeln für schlechtes HTML http://www.karzauninkat.com/Goldhtml/
weitere Tutorials http://loubna.de/prog rund ums Internet
Ins Internet - mit Sicherheit! vom Bundesamt für Sicherheit in der Informationstechnik (BSI) http://www.bsi-fuer-buerger.de/
klicksafe.de - eine EU-Initiative für mehr Sicherheit im Netz http://www.klicksafe.de/themen/
Hitchhiker's Guide to the Internet von Ingo Blechschmidt sehr viele technische Informationen zum Internet http://linide.sourceforge.net/theguide2/theguide.html

Werkzeuge

Cheatography - ganz viele Spickzettel, teils auch auf deutsch https://www.cheatography.com/
Farbcodierung umrechnen http://start.farben.rehbein.net/
Farben auswählen http://colorblender.com/
Farben auswählen http://www.colorschemer.com/online.html
Hintergrundfarbe testen color cube http://www.kuksnet.de/dateien/hintergrund/farbtafel.htm
Web Developer Toolbar für den Mozilla Firefox https://addons.mozilla.org/de/firefox/addon/60/
Pixel-Lineal http://www.ww-a.de/pixellineal.html
Blindtextgenerator http://www.blindtextgenerator.de/
Webimpressum-Assistent http://www.impressum-generator.de/impressum-generator/
HTML-Validator des W3C http://validator.w3.org/
CSS-Validator des W3C http://jigsaw.w3.org/css-validator/
Sehbehinderungs-Simulator http://www.absv.de/sehbehinderungs-simulator
Barrierefreiheit prüfen siehe Artikel Barrierefreiheit im Internet - technische Aspekte
Barriere-Check von Barriere-Kompass http://www.barrierekompass.de/check.php
Lynx Viewer http://www.delorie.com/web/lynxview.html
Xenu's Link Sleuth Broken Links erfassen Tool: http://home.snafu.de/tilman/xenulink.html,
deutsche Anleitung von Christian Holm: http://www.aspheute.com/artikel/20010518.htm

Textquellen*

Bilderquellen*

Bildersuche.org - Hintergrundinformation zu lizenzfreien und kostenlosen Bilder http://www.bildersuche.org/
Bildersuche.org - Liste mit Quellen von kostenlosen Bildern http://www.bildersuche.org/lizenzfreie-gratis-fotos.php
viele Quellen http://de.wikipedia.org/wiki/Wikipedia:Public-Domain-Bilderquellen
Fotos http://openphoto.net/
Fotos (nach Anmeldung) http://www.pixelio.de/
Fotos (englisch) http://www.morguefile.com/
Fotos (englisch) http://www.public-domain-photos.com/
Cliparts http://openclipart.org/
Cliparts http://graphicsbydezign.com/
Cliparts http://www.public-domain-photos.com/free-cliparts/

Designvorlagen*

nach Anmeldung http://www.htmlopen.de/templates/
free Responsive Bootstrap templates (engl.) http://css.maxdesign.com.au/

* Bei Texten, Bilder und Designvorlagen das Urheberrecht beachten!
Beim Speichern die Lizenz mitspeichern (z.B. über einen Bildschirmabdruck).

Beispielseiten

He.du. Natur-Erlebnis-Pädagogik http://hedu-natur.de
kampe coaching http://kampe-coaching.de/
AGNUS-Jugend Weingarten e.V. http://agnus-weingarten.de/
Bäckerei Visel http://baeckerei-visel.de
ViVA Restaurant http://viva-restaurant.de
Dr. Ruth Feldhoff, Praxis für Psychotherapie http://psychotherapie-dr-feldhoff.de/
Umweltstiftung Rastatt http://umweltstiftung-rastatt.de/

CMS, Galerie, etc.

CMS + Blog: Wordpress https://de.wordpress.org/ oder http://wpde.org
CMS: TYPO3 http://typo3.org/ (englisch)
Liste von freien CMS bei Wikipedia http://de.wikipedia.org/wiki/Kategorie:Freies_Web-Content-Management-System
Bildergalerie: Gallery http://galleryproject.org/
Bildergalerie und mehr: Koken http://koken.me/
Artikel: Koken: Das Portfolio-CMS für Designer und Fotografen http://t3n.de/news/koken-portfolio-cms-designer-447219/
Bilder-Slideshow: Lightbox http://www.lokeshdhakar.com/projects/lightbox2/
Lightbox - Beschreibung zum Einbinden http://www.html-seminar.de/bildergalerie-mit-lightbox.htm

Eine Email an oberwinkler@eva-computer.de