modul:m293:learningunits:lu04:styleguide

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

modul:m293:learningunits:lu04:styleguide [2024/03/28 14:07] – created - external edit 127.0.0.1modul:m293:learningunits:lu04:styleguide [2024/05/13 07:11] (aktuell) – msuter
Zeile 4: Zeile 4:
  
 ===== Dateinamen in Kleinbuchstaben schreiben ===== ===== Dateinamen in Kleinbuchstaben schreiben =====
-Einige Webserver (Apache, Unix) unterscheiden bei Dateinamen zwischen Groß- und Kleinschreibung: Auf "london.jpg" kann nicht als "London.jpg" zugegriffen werden.+Einige Webserver (Apache, Unix) unterscheiden bei Dateinamen zwischen Gross- und Kleinschreibung: Auf "london.jpg" kann nicht als "London.jpg" zugegriffen werden.
  
-Andere Webserver (Microsoft, IIS) unterscheiden nicht zwischen Groß- und Kleinschreibung: auf "london.jpg" kann als "London.jpg" zugegriffen werden.+Andere Webserver (Microsoft, IIS) unterscheiden nicht zwischen Gross- und Kleinschreibung: auf "london.jpg" kann als "London.jpg" zugegriffen werden.
  
-Wenn Sie eine Mischung aus Groß- und Kleinbuchstaben verwenden, müssen Sie sich dessen bewusst sein. Wenn Sie von einem Server, der Groß- und Kleinschreibung nicht beachtet, zu einem Server wechseln, der Groß- und Kleinschreibung beachtet, werden selbst kleine Fehler Ihre Applikation zerstören!+Wenn Sie eine Mischung aus Gross- und Kleinbuchstaben verwenden, müssen Sie sich dessen bewusst sein.  
 +Wenn Sie von einem Server, der Gross- und Kleinschreibung nicht beachtet, zu einem Server wechseln, der Gross- und Kleinschreibung beachtet, werden selbst kleine Fehler Ihre Applikation zerstören!
  
 Um diese Probleme zu vermeiden, sollten Sie Dateinamen immer in Kleinbuchstaben schreiben! Um diese Probleme zu vermeiden, sollten Sie Dateinamen immer in Kleinbuchstaben schreiben!
Zeile 14: Zeile 15:
  
 ==== Elementnamen in Kleinbuchstaben schreiben ==== ==== Elementnamen in Kleinbuchstaben schreiben ====
-HTML erlaubt die Mischung von Groß- und Kleinbuchstaben in Elementnamen.+HTML erlaubt die Mischung von Gross- und Kleinbuchstaben in Elementnamen.
  
 Wir empfehlen jedoch, Elementnamen in Kleinbuchstaben zu verwenden, denn: Wir empfehlen jedoch, Elementnamen in Kleinbuchstaben zu verwenden, denn:
  
-  * Die Vermischung von Groß- und Kleinbuchstaben sieht schlecht aus+  * Die Vermischung von Gross- und Kleinbuchstaben sieht schlecht aus
   * Entwickler verwenden normalerweise Kleinbuchstaben   * Entwickler verwenden normalerweise Kleinbuchstaben
   * Kleinbuchstaben sehen sauberer aus   * Kleinbuchstaben sehen sauberer aus
Zeile 42: Zeile 43:
  
 ==== Kleinbuchstaben für Attributnamen verwenden ==== ==== Kleinbuchstaben für Attributnamen verwenden ====
-HTML erlaubt die Mischung von Groß- und Kleinbuchstaben in Attributnamen.+HTML erlaubt die Mischung von Gross- und Kleinbuchstaben in Attributnamen.
  
 Wir empfehlen jedoch die Verwendung von Attributnamen in Kleinbuchstaben, denn: Wir empfehlen jedoch die Verwendung von Attributnamen in Kleinbuchstaben, denn:
  
-  * Die Vermischung von Groß- und Kleinbuchstaben sieht schlecht aus+  * Die Vermischung von Gross- und Kleinbuchstaben sieht schlecht aus
   * Entwickler verwenden normalerweise Kleinbuchstaben   * Entwickler verwenden normalerweise Kleinbuchstaben
   * Kleinbuchstaben sehen sauberer aus   * Kleinbuchstaben sehen sauberer aus
Zeile 54: Zeile 55:
 **Good:** **Good:**
 <code html4strict> <code html4strict>
-<a href='https://www.w3schools.com/html/'>Visit our HTML tutorial</a>+<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
 </code> </code>
 **Bad:** **Bad:**
 <code html4strict> <code html4strict>
-<a HREF='https://www.w3schools.com/html/'>Visit our HTML tutorial</a>+<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
 </code> </code>
 </WRAP> </WRAP>
  
 ==== Attributwerte immer in Hochkomma setzen ==== ==== Attributwerte immer in Hochkomma setzen ====
-HTML erlaubt Attributwerte ohne Hochkomma((In den Kursunterlagen verwenden wir Hochkomma, da wir dies von Python gewohnt sind. Sie dürfen auch Anführungszeichen verwenden, nutzen Sie aber immer den gleichen Codingstyle.))  oder Anführungszeichen.+HTML erlaubt Attributwerte ohne Anführungszeichen (double quotes) oder Hochkomma (single quote).
  
-Wir empfehlen jedoch, Attributwerte in Hochkomma zu setzen, denn:+Wir empfehlen jedoch, Attributwerte in Anführungszeichen zu setzen, denn:
  
-  * Entwickler sind es sich gewohnt Attributwerte in Hochkomma zu setzen +  * Entwickler sind es sich gewohnt Attributwerte in Anführungszeichen zu setzen 
-  * in Hochkomma gesetzte Werte sind leichter zu lesen +  * In Anführungszeichen gesetzte Werte sind leichter zu lesen 
-  * Sie MÜSSEN sowieso Hochkomma verwenden, wenn der Wert Leerzeichen enthält+  * Sie **müssen** sowieso Anführungszeichen verwenden, wenn der Wert Leerzeichen enthält
  
 <WRAP center round box 60%> <WRAP center round box 60%>
 **Good:** **Good:**
 <code html4strict> <code html4strict>
-<table class='striped'>+<table class="striped">
 </code> </code>
 **Bad:** **Bad:**
Zeile 86: Zeile 87:
 </WRAP> </WRAP>
  
-==== Alle HTML-Elemente schließen ==== +==== Alle HTML-Elemente schliessen ==== 
-In HTML müssen Sie nicht alle Elemente schließen (zum Beispiel das ''<p>''-Element).+In HTML müssen Sie nicht alle Elemente schliessen (zum Beispiel das ''<p>''-Element).
  
-Wir empfehlen jedoch dringend, alle HTML-Elemente zu schließen, etwa so:+Wir empfehlen jedoch dringend, alle HTML-Elemente zu schliessen, etwa so:
  
 <WRAP center round box 60%> <WRAP center round box 60%>
Zeile 111: Zeile 112:
 Geben Sie immer das ''alt''-Attribut für Bilder an. Dieses Attribut ist wichtig, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann. Geben Sie immer das ''alt''-Attribut für Bilder an. Dieses Attribut ist wichtig, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann.
  
-Geben Sie außerdem immer die Breite ''width'' und Höhe ''height'' von Bildern an. Dies verringert das Flackern, da der Browser vor dem Laden Platz für das Bild reservieren kann.+Geben Sie ausserdem immer die Breite ''width'' und Höhe ''height'' von Bildern an. Dies verringert das Flackern, da der Browser vor dem Laden Platz für das Bild reservieren kann.
  
 <WRAP center round box 60%> <WRAP center round box 60%>
 **Good:** **Good:**
 <code html4strict> <code html4strict>
-<img src='html5.gif' alt='HTML5' width='128px' height='128px'>+<img src="html5.gif" alt="HTML5" width="128px" height="128px">
 </code> </code>
 **Bad:** **Bad:**
 <code html4strict> <code html4strict>
-<img src='html5.gif'>+<img src="html5.gif">
 </code> </code>
 </WRAP> </WRAP>
Zeile 130: Zeile 131:
 **Good:** **Good:**
 <code html4strict> <code html4strict>
-<link rel='stylesheet' href='styles.css'>+<link rel="stylesheet" href="styles.css">
 </code> </code>
 **Bad:** **Bad:**
 <code html4strict> <code html4strict>
-<link rel = 'stylesheet' href = 'styles.css'>+<link rel = "stylesheet" href = "styles.css">
 </code> </code>
 </WRAP> </WRAP>
Zeile 145: Zeile 146:
 ==== Leerzeilen und Einrückungen ==== ==== Leerzeilen und Einrückungen ====
 Fügen Sie keine Leerzeilen, Leerzeichen oder Einrückungen ohne Grund ein. Fügen Sie keine Leerzeilen, Leerzeichen oder Einrückungen ohne Grund ein.
-Fügen Sie zur besseren Lesbarkeit Leerzeilen ein, um große oder logische Codeblöcke zu trennen.+Fügen Sie zur besseren Lesbarkeit Leerzeilen ein, um grosse oder logische Codeblöcke zu trennen.
 Fügen Sie zur besseren Lesbarkeit zwei Leerzeichen als Einrückung ein.  Fügen Sie zur besseren Lesbarkeit zwei Leerzeichen als Einrückung ein. 
  
-**Hinweis**: Webstorm ersetze einen Tabulator automatisch mit Leerzeichen+**Hinweis**: Webstorm ersetzt je nach Einstellung einen Tabulator automatisch mit Leerzeichen
  
 <WRAP center round box 60%> <WRAP center round box 60%>
  • modul/m293/learningunits/lu04/styleguide.1711631267.txt.gz
  • Zuletzt geändert: 2024/03/28 14:07
  • von 127.0.0.1