lehrkraefte:snr:informatik:html-erste-schritte [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~NOTOC~~
====== HTML: Erste Schritte ======

===== Einführung: Webgestaltung mit HTML und CSS =====

Vorbemerkung: Das Ziel ist zu lernen, wie man den Inhalt einer Webseite (oder andere Informationen) sinnvoll speichern kann (mit HTML) und wie man dann die konkrete Darstellung beeinflussen kann (mit CSS). An einem Projekt werdet ihr euer Können demonstrieren. Wenn ihr später in eurem Leben Websites erstellen werdet, werdet ihr dies vermutlich (und je nach Geschmack/Programmieraffinität) nicht von Hand (wie hier) machen, sondern mit einem Content Management System, vgl. [[https://de.wikipedia.org/wiki/Content-Management-System]].

Tafelerklärungen: 

  * HTML bedeutet //Hypertext Markup Language//, übersetzt etwa //Auszeichnungssprache für Text mit (Hyper-)Links//
  * CSS bedeutet //Cascading Style Sheets//

Trennung von Inhalt und Struktur einerseits und Darstellung andererseits (vgl. [[https://en.wikipedia.org/wiki/Separation_of_content_and_presentation]]). Ein wichtiger Vorteil (wie wir sehen werden): Eine CSS-Datei beeinflusst simultan das Aussehen einer gesamten Website (= Sammlung zusammengehörender Webseiten); so kann eine Institution relativ leicht den gedamten optischen Web-Auftritt verändern.

Empfohlener Editor: Visual Studio Code (empfohlen, sehr leistungsfähig und state of the art; vgl. [[https://en.wikipedia.org/wiki/Visual_Studio_Code]]). Achtung auf Schulcomputern: Zum Installieren der //User Version// (per "User Installer, 64bit" auf [[https://code.visualstudio.com/Download]]) muss genügend Platz im H-Laufwerk vorhanden sein; wenn nicht, sollte es meist reichen, alle Dateien im Unterverzeichnis Downloads zu löschen - wer unsicher ist, kann diese Dateien zuvor anderswo speichern. Eine alternativer Editor ist NotePad++, vgl. [[https://en.wikipedia.org/wiki/Notepad%2B%2B]].


**Text ab hier bis zur nächsten grossen Überschrift ist zu überarbeiten...**

Gemeinsam erste Webseite geschrieben (sollte genau erklären, wo man es abspeichert, wohl im B-Laufwerk alias cloud).

Struktur von HTML-Element erklärt: start tag (evtl. mit Attribut), content, end tag.

QUELLCODE VON HTML DATEI HIER ANGEBEN.

=== Webseiten inspizieren ===

  * Per F12 (und im Edge-Browser "Web developer tools" erlauben) 
  * oder rechte Maustaste und dann in Firefox "Inspect", in Edge ...

=== Wie man CSS ausschaltet ===

In Firefox: Alt (um das Menü einzublenden), dort View/Ansicht und Page style/Seitenstil.

In Edge (und auch Firefox): Im Inspektionsmodus (wie oben mit F12 eingeschaltet) in der Menüzeile

{{:lehrkraefte:snr:informatik:menue-webpage-inspector.png?600|}} 

auf "Console" klicken (rechts neben "Inspector"), dort

<code text>
$(’style, link[rel="stylesheet"]’).remove()
</code>

eingeben und Return drücken (das habe ich gelernt aus
[[https://stackoverflow.com/questions/44953893/how-to-disable-stylesheets-in-ms-edge-without-plugins]]).

=== Video zum Download und dann Einbinden in HTML ===

  * Roboter-Video: [[https://fginfo.ksbg.ch/~olaf/roboter.mp4|mp4]]

=== Wie man sieht, dass Webseiten aus Boxen bestehen ===

Im Inspektionsmodus in der Menüzeile

{{:lehrkraefte:snr:informatik:menue-webpage-inspector.png?600|}} 

auf das Symbol ganz links klicken. Dann den Mauszeiger über die inspizierte Web-Seite bewegen: Die Box unter dem Mauszeiger wird farblich hervorgehoben und der entsprechende HTML-Code wird markiert.

=== HTML-Validator ===

Wenn man prüfen möchte, ob eine (eigene oder fremde) HTML-Datei gewissen Standards entspricht (also "grammatikalisch korrekt" ist):

[[https://validator.w3.org/]]


==== 10. bzw. 11. Mai 2022 ====

=== Dateien vom letzten Mal ===

<WRAP center round todo 100%>
**Falls letztes Mal nicht bereits geschehen:**

Lege in deinem Informatik-Ordner (vermutlich auf OneDrive) einen Unterordner ''html-und-css'' an.
Jede Webseite (oder Website alias Sammlung von zusammengehörigen Webseiten), die wir erstellen, bekommt darin einen neuen Unterordner (später wird klar, warum das sinnvoll ist). Lege in diesem Unterordner einen weiteren Unterordner an, etwa ''meine-erste-html-seite''.
Speichere die unten verlinkte HTML-Datei vom letzten Mal dort unter dem Namen ''index.html''.

  * HTML-Datei der ersten Doppellektion in der 2aLM: {{ :lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2alm:index-01.html|}}
  * HTML-Datei der ersten (durch Prüfung auf ca. 30 Minuten verkürzten) Doppellektion in der 2dNP: {{ :lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2dnp:index-01.html|}}
</WRAP>
 
Wiederholung: Aufbau von HTML-Elementen: {{:lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2alm:struktur-html-element.jpg?linkonly|}}

Erklärung einiger neuer HTML-Elemente etc. Grobe Liste (teils auch schon erklärt): h1,..., h6, a, ul, li, ol, li, strong, em, code, hr, br (inline vs. block element), html, head, body, header, nav, main, asice, footer, section, article.

Grobe Struktur vieler HTML-Seiten (etwa KSBG, SBB, etc.): {{:lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2alm:struktur-html-datei.jpg?linkonly|}}. Zur Verwendung "semantischer" HTML-Elemente siehe etwa:
  * [[https://html.com/document/#New_Semantic_Tags_Added_by_HTML5]]
  * [[https://www.w3schools.com/html/html5_semantic_elements.asp]]

HTML-Element ''a'' besser verstehen: Erklärungen zur Suche und "Test-Modus" auf [[https://www.w3schools.com/html/default.asp]].

Nun wollen wir ein Video einbinden. Nutze W3Schools. Eventuell Videoeinbindung nicht nur mit ''video'', sondern auch mit ''figure'' Umgebung darum herum erklären.

Audios einbinden geht ähnlich mit dem HTML-Element ''audio''.

Zustand der HTML-Datei in der Doppellektion am 11.05.2022 in der 2aLM (und wohl ähnlich in der 2dNP) vor Bearbeitung der Aufgabe (HTML-video-Element findet das Video natürlich nicht beim Anklicken; Download per rechter Maustaste): {{ :lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2alm:index-02.html}}.

==== Bilder und pdf-Dateien einbinden ====

<WRAP center round todo 100%>
Gehe auf ''www.ksbg.ch''. Speichere per Rechtsklick auf das Kanti-Konzert-Bild die folgenden beiden Dateien in deinem Verzeichnis ''meine-erste-html-seite'':  
  - die pdf-Datei zum Kanti-Konzert ("save link as")
  - die png-Datei zum Kanti-Konzert ("save image as")

Im Verzeichnis ''meine-erste-html-seite'' erstelle eine neue HTML-Seite, etwa mit dem Namen ''konzert.html''. Erinnerung/Information: Wenn du in Visual Studio Code eine neue Datei mit der Namenserweiterung ''html'' öffnest und ''!'' eingibst und danach ''Return''- oder ''Tab''ulatortaste drückst (oder per Maus das vorgeschlagene Ausrufezeichen anklickst), erscheint sofort das Grundgerüst einer HTML-Datei. (Ähnlich kannst du ''html'' eingeben und dann ''html:5'' auswählen.) 

Gib ihr einen Titel, etwa ''Kantikonzert'', und eine Hauptüberschrift, etwa ''Informationen zum Kantonsschulkonzert 2022''.

Ergänze die HTML-Datei so, dass beim Anzeigen im Browser:
  - Das png-Bild aus deinem Verzeichnis als Bild angezeigt wird. Hinweis: HTML-Element ''img'' per W3 Schools kennenlernen.
  - Ein Link mit Beschriftung ''Kantikonzert (pdf)'' zu der pdf-Datei in deinem Verzeichnis führt. Hinweis: Das geht mit dem HTML-Element ''a''

Es ist auch möglich, das png-Bild als anklickbare Link-Beschriftung zur pdf-Datei zu verwenden: Kopiere die Zeile mit dem Link zur pdf-Datei und ersetze die Beschriftung ''Kantikonzert (pdf)'' durch das ''img''-Element mit dem png-Bild.

Verlinke die Konzert-Seite ''konzert.html'' mit der Hautpseite ''index.html'' und umgekehrt.

Füge die beiden Fotos/jpg-Dateien weiter oben auf dieser Informatik-Seite (Struktur von HTML-Element und von HTML-Datei) als Bilder in deine Datei ''index.html'' ein.

Nachträglich eingefügt: Umgib die beiden Bilder jeweils mit einer ''figure''-Umgebung. Finde per W3schools heraus, mit welchem HTML-Element du eine Bildunterschrift vergeben kannst. Wähle als Bildunterschriften ''Struktur eines HTML-Elements'' und ''Struktur einer HTML-Datei''.

Checke deine beiden HTML-Seiten mit dem HTML-Validator [[https://validator.w3.org/]] auf "grammatikalische Korrektheit".

Lerne per W3Schools oder anderweitig im Netz, wie man mit dem ''table''-Element eine Tabelle erstellt und füge eine solche zu deiner Seite hinzu; du kannst etwa eine Sport-Tabelle verwenden (bzw. die ersten Zeilen davon). Dabei wirst du HTML-Elemente namens ''th'', ''tr'' und ''td'' kennenlernen und verwenden. Was bedeuten diese Namen? (Beim Verwenden von CSS später sind auch ''thead'', ''tbody'', ''tfoot'' nützlich.)

Ergänze deine HTML-Seite ''index.html'' am Ende mit nützlichen Links:
  - ein Link zu W3Schools oder genauer dort zum HTML-Bereich
  - ein Link zum HTML-Validator
  - ein Link zum deutschen HTML-(und CSS- und PHP-)Tutorial [[http://de.html.net/]] (das verwenden manche Kollegen; teils scheint es mir etwas langatmig)
  - eventuell ein Link zur umfangreicheren englischen Version [[http://html.net/]]

Wer mag: Geh auf [[https://www.w3schools.com/html/default.asp]], stöbere dort in der linken Spalte und füge etwas Neues in deine HTML-Datei(en) ein.
</WRAP> 

==== Wer noch Zeit hat: Eigene HTML-Seite als Startseite im Browser ====

<WRAP center round todo 100%>
Ich habe als Home-Seite in meinem Browser eine eigene HTML-Seite mit Links zu den Seiten, die ich häufig besuche, damit ich nicht ständig die Adressen dieser Seiten eingeben oder nach ihnen suchen muss.

Wenn du willst, kannst du dir mit deinem jetzigen Wissen leicht eine solche HTML-Seite mit deinen Lieblingslinks (inkusive Lieblings-Online-Games) schreiben. Wie man sie zur Startseite deines Browsers macht, findet man leicht im Internet (suche etwa nach "change browser home page in edge/firefox/safari/..."). Du kannst die Seite natürlich durch Überschriften strukturieren: Schule (ksbg.ch), Freizeit, Reisen (sbb.ch), Wetter, Musik, Spiele etc.
</WRAP>

===== Einführung in CSS =====

==== Beispiele: Dieselbe HTML-Datei, verschiedene CSS-Dateien ====

Die Stylesheet-Sprache [[https://en.wikipedia.org/wiki/CSS|CSS]] dient dazu, die Darstellungsweise von HTML-Dateien festzulegen. Dieselbe HTML-Datei kann in verschiedenen, durch CSS-Dateien festgelegten Darstellungsweisen, sehr verschieden aussehen. Hier sind zwei Links zu Webseiten, die dies eindrücklich demonstrieren:

  * [[https://www.w3schools.com/whatis/demo_css.htm]] (klicke dich durch die 4 (+ 1) Stylesheets)
  * [[http://www.csszengarden.com/]] (rechts kannst du aus der Liste verschiedene Stylesheets auswählen; die Seite, beispielsweise der Link rechts oben, funktioniert bei mir nicht einwandfrei; eventuell einfach am Ende der Adresse eine Zahl ergänzen mit slashes ergänzen, also etwa als Adresse ''http://www.csszengarden.com/211/'' eingeben)

==== Aufgabe: CSS gemeinsam kennenlernen  ====
<WRAP center round todo 100%>

Vorbereitung:
  - Erstelle in deinem HTML-und-CSS-Ordner (vermutlich auf OneDrive) ein neues Verzeichnis namens ''erste-schritte-in-css''.
  - Lege in diesem Ordner zwei weitere Verzeichnisse namens ''css'' und ''pictures'' an.
  - Speichere 5 Bilder aus dem Internet im Ordner ''pictures'' (etwa einige der Bilder unten auf der Seite [[https://www.ksbg.ch/]]).
  - Lege in VS-Code im Verzeichnis ''erste-schritte-in-css'' eine Datei ''index.html'' an, stelle die Sprache auf Deutsch und gib ihr den Titel ''Erste Schritte in CSS''.
  - Erstelle eine Level-1-Überschrift ''Einführung in CSS'' und darunter die folgenden Level-2-Überschriften: ''Weiter Vorbereitungen'', ''CSS-Selektoren'', ''Alle HTML-Elemente sind Boxen'', ''Text mit Float-Bildern'', ...

Ab jetzt: Erklärungen durch mich! 
</WRAP>

=== 2dNP ===

  * 2dNP: Zustand der Dateien am Ende der Doppellektion am 18.05.2022 (Download per rechter Maustaste; die CSS-Datei muss in einem Verzeichnis namens ''css'' unterhalb der html-Datei abgespeichert sein): {{ :lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2dnp:index-03.html}}, {{ :lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2dnp:style-03.css |}}.
  * 2dNP: Zustand der Dateien am Ende der Doppellektion am 25.05.2022: {{ :lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2dnp:index-04.html}}, {{ :lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2dnp:style-04.css |}}.

=== 2aLM ===

  * 2aLM: Zustand der Dateien am Ende der Doppellektion am 17.05.2022 (Download per rechter Maustaste; die CSS-Datei muss in einem Verzeichnis namens ''css'' unterhalb der html-Datei abgespeichert sein): {{ :lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2alm:index-03.html}}, {{ :lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2alm:style-03.css |}}.
  * 2aLM: Zustand der Dateien am Ende der Doppellektion am 24.05.2022: {{ :lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2alm:index-04.html}}, {{ :lehrkraefte:snr:informatik:glf21:html-und-css:dateien-fuer-2alm:style-04.css |}}.
  * 2aLM: Zustand der Dateien am Ende der Doppellektion am 31.05.2022: Fast identisch zu denjenigen der 2dNP am 25.05.2022

=== Nützliche VS-Code Hotkeys: ===
  * ''Ctrl+Space'': Auswahl (also das, was VS-Code manchmal vorschlägt) aktivieren, falls an aktueller Cursorposition vorhanden.
  * ''Ctrl+K Ctrl+C'': aktuelle Zeile aus- bzw. einkommentieren; unter Linux und macOS geht das per ''Ctrl+/''.
  * ''Ctrl+Shift+p'': Befehl suchen.

==== Wie man seine Website auf den Tech-Lab-Server überträgt ====

Werde ich mal vormachen. Ich empfehle, die Website NICHT öffentlich zugänglich zu machen - je nach Inhalt und Copyright-Verletzungen kann das sonst sehr unangenehm werden! Wer sein Passwort ändert, merke sich das neue Passwort bitte gut. Ich habe keine Lust, neue Accounts zu kreieren bzw. kreieren zu lassen.

Deine Website wird sich später befinden in einem geeigneten Unterverzeichnis von [[https://ofi.tech-lab.ch/2022/]].

  * [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf20:webtech-filezilla]]
  * eventuell auch nützlich: [[https://fginfo.ksbg.ch/dokuwiki/doku.php?id=lehrkraefte:blc:informatik:glf20:webtech-vorbereitung]]


==== Anregungen für die eigene Website (vermutlich nur bis Juli 2022 verfügbar) ====

  * Dieselbe HTML-Datei kann in verschiedenen Style-Sheets total verschieden aussehen. Ich habe etwas mit dem oben verlinkten Beispiel dazu von W3Schools herumgespielt: [[https://ofi.tech-lab.ch/2022/teach/0cc6ccab/same-html-different-css/demo1.html]]
  * Hier ist ein anderes Beispiel von der Seite meines Kollegen Urs Sieber: [[https://ofi.tech-lab.ch/2022/teach/ceafb165/beispielHomepage/]]

Du kannst diese Beispiele mit F12 inspizieren oder mit Ctrl-S herunterladen.

  * Wer sein Seiten-Layout genau steuern will, kann z. B. CSS Grids verwenden; hier ist ein nettes Beispiel: [[https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_grid-area_named3]].
====== Projektphase: Websites ======

  * Jeder/jede erstellt eine eigene Website und macht sie auf dem Schulserver für mich zugänglich, wie ich es im Unterricht erklären werde.
  * Du darfst das Thema deiner Website frei wählen.
  * Zweiergruppen sind ebenfalls erlaubt - die beiden vorigen Punkte gelten sinngemäss.

===== Wer von zu Hause aus arbeiten möchte =====

Du kannst einen beliebigen Editor verwenden, um die HTML- und CSS-Dateien zu erstellen. Du kannst aber auch auf deinem Privatrechner Visual Studio Code installieren. VS Code hat den Vorteil, "intelligente" Vervollständigungsvorschläge zu machen.

Das Hochladen deiner Dateien mit FileZilla sollte von zu Hause aus funktionieren - unter den aktuellen Einstellungen ist deine Website aber nur aus dem Schulnetz anzeigbar. Man kann dies ändern, siehe [[https://ofi.tech-lab.ch/2022/teach/0cc6ccab/]]. Beachte dann aber, dass deine Dateien weltweit zugänglich werden und du aufpassen musst, dass du dich nicht strafbar machst (Copyright-Verletzungen etc.).

===== Bewertung der Projekt-Websites =====

(Nächstes Jahr anders machen: Genug Zeit am Ende. Jeder muss hochladen, es muss dort funktionieren. Manche hatten mir ge-zip-te Folder geschickt, wo Bilder/Videos fehlten und die internen Links nicht funktionierten - ich war relativ grosszügig, da alles zeitlich knapp war. Irgendwie ausschliessen, dass Leute Content-Management-Systeme verwenden. Auch sollten nicht zu viele Sachen aus den Vorlagen kopiert werden. Gut wäre, Hintergrund-Bild zu erklären, bei float auf alle Fälle ''clear: both;'' erklären. Punkteraster und Benotung war recht grosszügig.) 

Abgabetermin (in dem Sinne, dass die Website danach nicht mehr geändert werden soll): Mittwoch 22. Juni, 23:59 Uhr.

Ich werde mir die Websites voraussichtlich am 23. Juni (ein Tag vor der Notenabgabe) anschauen, sie bewerten und die Note auf NESA veröffentlichen((Wem dies zu spät ist, teile mir früher mit, dass die Website fertig ist, damit ich sie dann hoffentlich früher benote.)). Bitte ändere deine Seiten an diesem Tag nicht - sonst bewerte ich eventuell eine nicht von dir gewünschte Version. 

Ich suche Eure Websites von 

[[https://ofi.tech-lab.ch/2022/]] 

aus, indem ich von dort in Euer Klassenverzeichnis und dann in Euer Verzeichnis (der Name ist die Zahlen-/Buchstabenkombination, die ihr bekommen habt) wechsle.

**Ist keine Website vorhanden, gibt es die Note 1.0.** Bei Problemen beim Hochladen: Mir per Email alle relevanten Dateien senden.

Bewertungskriterien((motiviert durch das Bewertungsraster auf [[https://www.swisseduc.ch/geschichte/methodik/webseiten/]])); Maximalpunktzahl 30; voraussichtlich reichen 25 Punkte für Note 6.0:

  * **Bei Partnerarbeit:** Die gemeinsam erstellte Seite wird von einem Partner veröffentlicht, der andere setzt auf seiner Seite einen Link auf die gemeinsam erstellte Seite. 
  * Bewertungskriterium A, 5 Punkte: Mindestens zwei HTML-Seiten sind vorhanden, unter ihnen die Hauptseite ''index.html'', die durch sinnvoll beschriftete und gut erkennbare Links miteinander verbunden sind.
  * B, 3 Punkte: Mindestens zwei Links zu Websites anderer Schüler oder Schülerinnen existieren und funktionieren; sie müssen sinnvoll beschriftet und erkennbar sein. Diese Links sollen sich in einem neuen Tab öffnen.
  * C, 2 Punkte: Mindestens zwei Links zu anderen Websites im Internet existieren.
  * D, 5 Punkte: Titel (im HTML-Element ''title''), Überschriften und Text (im HTML-Element ''p'') sind auf jeder Seite (= web page) der Website (web site) vorhanden. Insgesamt sind mindestens zwei der folgenden Elemente eingebunden (zwei Bilder tun's beispielsweise auch): ein Bild (oder eine Grafik), ein Video, ein Audio. (Diese bisher genannten Bedingungen sichern ab, dass mindestens 5 verschiedene HTML-Elemente verwendet werden.)
  * E, 5 Punkte: Die Gestaltung funktioniert über eine (oder mehrere) CSS-Dateien. Mindestens 5 verschiedene CSS-Selektoren werden verwendet. 
  * F, 6 Punkte: Die Website ist ansprechend gestaltet (was immer das genau heisst ...), was Inhalt und Form angeht. Dabei geht es um das Aussehen in einem Browser in einem maximal grossen Fenster bei "normaler" Schriftgrösse.
  * G, 2 Punkte: Die HTML- und CSS-Dateien sind "grammatikalisch" korrekt - die Validatoren [[https://validator.w3.org/]] und [[https://jigsaw.w3.org/css-validator/]] liefern keine Fehler (höchstens Warnungen).
  * H, 2 Punkte: Am Ende deiner Hauptseite ''index.html'' befindet sich ein ''footer''-Element (siehe [[https://www.w3schools.com/tags/tag_footer.asp]]), in dem du als Autor genannt bist. Ausserdem gibst du dort an, wie viele Punkte du für jedes der obigen Bewertungskriterien für angemessen hältst und welche Gesamtpunktzahl das ergibt. Wenn du willst, kannst du auch eine Note vorschlagen.

Beispiel: A5, B3, C2, D5, E0, F0, G0, H0; Gesamtpunktzahl 15 Punkte; Notenvorschlag: 4.0

(Der Notenvorschlag wurde hier mit der Formel $1+5 \cdot\frac{\text{erreichte Punktzahl}}{\text{Punktzahl für Note $6.0$}}$ berechnet: $1+ 5 \cdot \frac {15}{25}=4$.)


===== Ehrlichkeit  =====
alias "Abschreiben verboten" alias (an der Uni) "wissenschaftlich korrektes Arbeiten"

  * Jeder/jede bearbeitet sein/ihr Projekt eigenständig. Ausdrücklich erlaubt ist es, Hilfe von Lehrpersonen, Klassenkameraden, Verwandten, Freunden etc. einzuholen, solange diese "beratend" ist. 
  * Inspiration darf man sich überall holen. Wesentliche Inspirationsquellen müssen aber offen benannt werden, etwa durch einen Kommentar im Programm. (Etwa: "Die Idee für diesen Programmteil kommt von der folgenden Web-Seite." oder "Dieser Programmteil ist wesentlich beeinflusst von ...". Kommentare in HTML schreibt man per ''<nowiki><!-- Kommentar --></nowiki>'', in CSS per ''/* Kommentar */''.) 
  * Verboten ist es beispielsweise, einfach Code-Fragmente ohne Angabe der Quelle aus dem Internet zu kopieren (Plagiat). Statt stupidem Kopieren empfehle ich zumindest "mitdenkendes Abschreiben mit kleinen Veränderungen" samt Angabe der Quelle.
  * "Lehrbuchwissen" darf ohne Angabe der Quelle verwendet werden (Kopien längerer Codefragmente etwa von [[https://www.w3schools.com/html/default.asp]] müssen aber gekenzzeichnet werden).
  * Wer Sachen kopiert, muss mir Fragen zum Code beantworten können; zumindest sollte klar sein, was passiert, wenn man den Code leicht variiert.