Stammtisch 2023-12-08 - Versionsgeschichte

HolgerW: /* HTML und CSS - Neubau einer Website */

2023-12-15T20:56:32Z

HTML und CSS - Neubau einer Website

HolgerW: /* HTML und CSS - Neubau einer Website */

2023-12-15T20:55:45Z

HTML und CSS - Neubau einer Website

HolgerW: /* Installation und Verwendung des Editors VS Codium */

2023-12-12T10:56:26Z

Installation und Verwendung des Editors VS Codium

HolgerW: /* HTML und CSS - Neubau einer Website */

2023-12-12T10:52:10Z

HTML und CSS - Neubau einer Website

HolgerW: /* HTML und CSS - Neubau einer Website */

2023-12-12T10:50:38Z

HTML und CSS - Neubau einer Website

HolgerW: /* Installation und Verwendung des Editors VS Codium */

2023-12-09T23:43:57Z

Installation und Verwendung des Editors VS Codium

HolgerW: /* Installation und Verwendung des Editors VS Codium */

2023-12-09T15:28:23Z

Installation und Verwendung des Editors VS Codium

HolgerW: /* Installation und Verwendung des Editors VS Codium */

2023-12-09T15:22:33Z

Installation und Verwendung des Editors VS Codium

HolgerW: /* HTML und CSS - Neubau einer Website */

2023-12-09T15:16:32Z

HTML und CSS - Neubau einer Website

HolgerW: /* HTML und CSS - Neubau einer Website */

2023-12-09T15:13:58Z

HTML und CSS - Neubau einer Website

@@ Zeile 131: / Zeile 131: @@
   /*bewirkt bei Verschmälerung des Bildschirms ein vertikales Stapeln der Nav-Leiste (topnav)*/
-@media screen and (max-width: 760px) {
+ @media screen and (max-width: 760px) {
      .topnav {
         background-color: #333;

@@ Zeile 67: / Zeile 67: @@
 [[Datei:HTML_mit_CSS_SmartphoneBildschirm.png|200px|thumb|center|HTML '''mit''' CSS-Einbindung auf einem Smartphone-Bildschirm]]
 * Hier mal die CSS-Datei, die Julian gemacht hat und in die ich / wir noch kleinere Änderungen eingebaut habe:
-  center {
+  .center {
      max-width: 840px;
      margin: auto;
@@ Zeile 77: / Zeile 77: @@
+  }
   .topnav {
      background-color: #333;
      overflow: hidden;
-     margin-bottom: 18px;
+     /*margin-bottom: 18px;*/
      max-width: 840px;
-     margin-left: auto;
+     display: flex;
-     margin-right: auto;
+    /*margin-left: auto;*/
+  }
   .topnav a {
      float: left;
@@ Zeile 94: / Zeile 95: @@
      padding: 14px 16px;
      text-decoration: none;
-     font-size: 1.2em;
+     font-size: 1.1em;
+  }
   .topnav a:hover {
      background-color: #169f94;
@@ Zeile 113: / Zeile 113: @@
      text-align: center;
      padding: 3px 4px;
-     font-size: 1.1em;
+     font-size: 1.2em;
+  }
-  /*KEINE Klasse (da ohne "." vor Bezeichnung -->für "Fließtext - alle Paragraphen (p) werden nun mit einem seitlichen Rahmen versehen*/
+  /*KEINE Klasse (da ohne "." vor Bezeichnung -->für "Fließtext - alle Paragraphe (p) werden nun mit einem seitlichen Rahmen versehen*/
   p {
      padding-left: 30px;
      padding-right: 30px;
+  }
@@ Zeile 126: / Zeile 127: @@
      padding-left: 60px;
      padding-right: 30px;
+  }
   /*bewirkt bei Verschmälerung des Bildschirms ein vertikales Stapeln der Nav-Leiste (topnav)*/
- @media screen and (max-width: 760px) {
+@media screen and (max-width: 760px) {
      .topnav a {
         float: none;
         display: block;
-        text-align: left;
+        text-align: center;
+     }
+  }
 * Die Seite wird nun durch das CSS mittig platziert, das Banner und Schrift und auch das Layout (z. B. die Navigationsleiste) passen sich dem Bildschirm des Benutzers an (Smartphone, Tablet, Notebook- oder PC-Bildschirm), Farben und Hintergründe werden bestimmt und vieles mehr. Und das Beste: mit nun wenigen Handgriffen ließen sich Farben, Hintergründe, etc. komplett und beliebig oft ändern. Das ist aber nicht angedacht  ;-).
 * Hier, auf dem gleich folgenden Link ist nun ist das fertige Werk auf der Domain des neuen Anbieters netcup: [http://kontakt-vs.de/ KONTAKT e.V. | Startseite]. Ist doch schick geworden, oder?

@@ Zeile 148: / Zeile 148: @@
 ** in der linken Seitenleiste (nicht überladen) nur sieben Elemente für grundlegende Funktionen, wie Suchen, Initialisierung von Repositories (z.B. Git), etc.
 ** man kann viel mit Shortcuts arbeiten
-** man öffnet zum Beispiel mit Strg+O einen kompletten (!) Ordner und alle darin enthaltenen Dateien werden in einzelnen Reitern auf einmal geöffnet
+** man öffnet zum Beispiel mit Strg+O einen kompletten (!) Ordner. Nun kann man die zu bearbeitenden Dateien (mit gedrückter Steg-Taste) markieren und nach Bestätigung mit 'Enter' werden alle darin gewünschten Dateien in einzelnen Reitern auf einmal geöffnet
 ** mit Strg+Umschalttaste+I wird eine Kontrolle durchgeführt (rote Farbe im Code zeigt einen Fehler) und vor allem werden auch alle Tags an der richtigen Tabulatorposition ausgerichtet
 ** wenn man einen Fehler (bspw. in einem Link) gefunden hat, markiert man diesen, kopiert ihn, fügt in in der linken Suchmaske (Lupensymbol) ein; klickt auf einen Pfeil, der dann ein "Ersetzen"-Feld ausklappt und kann nun den Fehler korrigieren. Das Geniale daran ist: nun werden alle Fehler (obwohl nur aus '''''einer''''' der geöffneten Seiten kopiert) in allen geöffneten Seiten des Ordners korrigiert!

@@ Zeile 137: / Zeile 137: @@
+  }
 * Die Seite wird nun durch das CSS mittig platziert, das Banner und Schrift und auch das Layout (z. B. die Navigationsleiste) passen sich dem Bildschirm des Benutzers an (Smartphone, Tablet, Notebook- oder PC-Bildschirm), Farben und Hintergründe werden bestimmt und vieles mehr. Und das Beste: mit nun wenigen Handgriffen ließen sich Farben, Hintergründe, etc. komplett und beliebig oft ändern. Das ist aber nicht angedacht  ;-).
-* Hier, auf dem gleich folgenden Link ist nun ist das fertige Werk auf der Domain des neuen Anbieters netcup: [http://kontakt-vs.de/ e.V. - KONTAKT e.V. | Startseite - zum Ausprobieren Link anklicken]. Ist doch schick geworden, oder?
+* Hier, auf dem gleich folgenden Link ist nun ist das fertige Werk auf der Domain des neuen Anbieters netcup: [http://kontakt-vs.de/ KONTAKT e.V. | Startseite]. Ist doch schick geworden, oder?
 Übrigens hat die Seite noch kein SSL-Sicherheitszertifikat installiert, weswegen vor dem Betreten gewarnt wird. Das kann man aber getrost ignorieren ...

@@ Zeile 137: / Zeile 137: @@
+  }
 * Die Seite wird nun durch das CSS mittig platziert, das Banner und Schrift und auch das Layout (z. B. die Navigationsleiste) passen sich dem Bildschirm des Benutzers an (Smartphone, Tablet, Notebook- oder PC-Bildschirm), Farben und Hintergründe werden bestimmt und vieles mehr. Und das Beste: mit nun wenigen Handgriffen ließen sich Farben, Hintergründe, etc. komplett und beliebig oft ändern. Das ist aber nicht angedacht  ;-).
-* Hier, auf dem gleich folgenden Link ist nun ist das (ziemlich) fertige Werk auf einer vorläufigen Domain des Anbieters netcup zu sehen; später wird auch noch die Domain umziehen (vorher müssen noch die Mail gesichert und auf die neue Domain übertragen werden): [https://kontakt.hosting193189.ae92a.netcup.net/ KONTAKT e.V. - Startseite - zum Ausprobieren Link anklicken]. Ist doch schick geworden, oder?
+* Hier, auf dem gleich folgenden Link ist nun ist das fertige Werk auf der Domain des neuen Anbieters netcup: [http://kontakt-vs.de/ e.V. - KONTAKT e.V. | Startseite - zum Ausprobieren Link anklicken]. Ist doch schick geworden, oder?
 Übrigens hat die Seite noch kein SSL-Sicherheitszertifikat installiert, weswegen vor dem Betreten gewarnt wird. Das kann man aber getrost ignorieren ...

@@ Zeile 142: / Zeile 142: @@
 ===Installation und Verwendung des Editors '''VS Codium'''===
 * Holger hat obige Website bis dato (mühevoll, umständlich) mit dem Bluefish-Editor erstellt. Während Julian Holger hilft, schlägt er vor, den Editor VS Codium [https://www.dotnetpro.de/tools/visual-studio/vscodium-freie-binaries-vs-code-2773184.html] [https://www.dotnetpro.de/tools/visual-studio/vscodium-freie-binaries-vs-code-2773184.html] [https://hackspoiler.de/vscodium-superscharfer-open-source-quelltext-editor/]stattdessen zu installieren. Gesagt, getan; die Anwendung findet Holger im KDE-Softewaremanagemant "Discover", als Flathub-Repository.
-* Und tatsächlich: mit der neuen Anwendung - und Hilfestellung aus der Erfahrung Julians - geht das Umbauen der Website nun richtig fix vonstatten! Julian hilft, noch die deutschen Sprachpakete zu installieren und es geht los. Sehr zu empfehlen.
+* Und tatsächlich: mit der neuen Anwendung - und Hilfestellung aus der Erfahrung Julians - geht das Umbauen der Website nun richtig fix vonstatten! Julian hilft noch die deutschen Sprachpakete zu installieren und es geht los. Sehr zu empfehlen.
 * Die Bedienung ist einfach (wenn auch ungewohnt). Toll ist folgendes:

← Nächstältere Version		Version vom 9. Dezember 2023, 15:28 Uhr
Zeile 151:		Zeile 151:
	** mit Strg+Umschalttaste+I wird eine Kontrolle durchgeführt (rote Farbe im Code zeigt einen Fehler) und vor allem werden auch alle Tags an der richtigen Tabulatorposition ausgerichtet		** mit Strg+Umschalttaste+I wird eine Kontrolle durchgeführt (rote Farbe im Code zeigt einen Fehler) und vor allem werden auch alle Tags an der richtigen Tabulatorposition ausgerichtet
	** wenn man einen Fehler (bspw. in einem Link) gefunden hat, markiert man diesen, kopiert ihn, fügt in in der linken Suchmaske (Lupensymbol) ein; klickt auf einen Pfeil, der dann ein "Ersetzen"-Feld ausklappt und kann nun den Fehler korrigieren. Das Geniale daran ist: nun werden alle Fehler (obwohl nur aus '''''einer''''' der geöffneten Seiten kopiert) in allen geöffneten Seiten des Ordners korrigiert!		** wenn man einen Fehler (bspw. in einem Link) gefunden hat, markiert man diesen, kopiert ihn, fügt in in der linken Suchmaske (Lupensymbol) ein; klickt auf einen Pfeil, der dann ein "Ersetzen"-Feld ausklappt und kann nun den Fehler korrigieren. Das Geniale daran ist: nun werden alle Fehler (obwohl nur aus '''''einer''''' der geöffneten Seiten kopiert) in allen geöffneten Seiten des Ordners korrigiert!
		+	** oder noch was: mit Strg+Umschalttaste+P lässt man sich alle vorhandenen Befehle anzeigen. Nun kann man scrollen und sich diese genauer anschauen; ist ein Shortcut hinterlegt, wird dieser eingeblendet. Wenn nicht, kann man selbst einen erstellen, indem man rechts in der Linie auf das Zahnradsymbol klickt und in das sich geöffnete Fenster links in der ersten Zeile auf das "*" klickt. Nun gibt man die Tastenkombination ein und bestätigt nach Loslassen vorheriger Tasten mit Enter. Schon ist ein neuer Shortcut / eine neue Tastenkombination kreiert.

@@ Zeile 52: / Zeile 52: @@
 ===HTML und CSS - Neubau einer Website===
 '''Uwes Sicht:'''
-* Holger hat eine Webseite, die von einem Webhoster zu einem anderen umziehen soll. Gleichzeitig muss das Design überarbeitet werden. Vor allem macht die Darstellung noch Probleme. Da Holger seinerzeit die Seite nicht selber erstellt hat, sondern entweder den Homepagebaukasten des Providers verwendet hat oder einen Bekannten gebeten hat für ihn die Seite zu erstellen, fehlen ihm Grundlagen und detaillierte Kenntnisse über die Hintergründe und Zusammenhänge. Er hat deshalb gefühlt 2.629 Fragen zu einzelnen Elementen, zu CSS, HTML, zur Struktur, Navigation und zum Design. Eine Aufgabe, an der Holger seit Tagen schon herumlaboriert und nun auf tatkräftige Unterstützung aller Teilnehmer hofft, damit er bald dieses Projekt zu Ende führen kann.
+* Holger hat eine Webseite, die von einem Webhoster zu einem anderen umziehen soll. Gleichzeitig muss das Design überarbeitet werden. Vor allem macht die Darstellung noch Probleme. Da Holger seinerzeit die Seite nicht selber erstellt hat, sondern entweder den Homepagebaukasten des Providers verwendet hat oder einen Bekannten gebeten hat für ihn die Seite zu erstellen, fehlen ihm Grundlagen und detaillierte Kenntnisse über die Hintergründe und Zusammenhänge. Er hat deshalb gefühlt 2.629 Fragen zu einzelnen Elementen, zu CSS[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen], HTML, zur Struktur, Navigation und zum Design. Eine Aufgabe, an der Holger seit Tagen schon herum laboriert und nun auf tatkräftige Unterstützung aller Teilnehmer hofft, damit er bald dieses Projekt zu Ende führen kann.
-* Julian hat bereits jede Menge Tipps und Hinweise gegeben, die Holger schon eingepflegt hat. Dennoch ist noch viel Arbeit übrig. Und scheinbar wirft jede Anwort auf eine Frage drei weitere Fragen auf.
+* Julian hat bereits jede Menge Tipps und Hinweise gegeben, die Holger schon eingepflegt hat. Dennoch ist noch viel Arbeit übrig. Und scheinbar wirft jede Antwort auf eine Frage drei weitere Fragen auf.
-* Damit er in drei Jahren noch weiß, was er sich bei den einzelenen Elementen und der Programmierung gedacht hat, füllt Holger in die CSS- und HTML-Dateien zahlreiche Kommentare zur Erläuterung ein. * Bei der Struktur innerhalb des Ablageortes der Seite sind aber noch Unklarheiten und Fehler enthalten, die man jetzt nochmal genauer ansehen muss und vereinfachen sollte. Es wird mit Schriftgrößen, Abständen und den Unterschieden verschiedener Tags experimentiert.
+* Damit er in drei Jahren noch weiß, was er sich bei den einzelnen Elementen und der Programmierung gedacht hat, füllt Holger in die CSS- und HTML-Dateien zahlreiche Kommentare zur Erläuterung ein. * Bei der Struktur innerhalb des Ablageortes der Seite sind aber noch Unklarheiten und Fehler enthalten, die man jetzt nochmal genauer ansehen muss und vereinfachen sollte. Es wird mit Schriftgrößen, Abständen und den Unterschieden verschiedener Tags experimentiert.
 Und hier noch ergänzend '''Holgers Sicht:'''

@@ Zeile 60: / Zeile 60: @@
 * Reines HTML alleine sieht aber nicht gerade ansprechend aus; im Browser wird einfach nur Text (linksbündig) angezeigt. Der Trick dabei ist, im HTML jetzt keine großen Formatierungen, wie Schriftgröße, Fett-, Kursiv-Schrift, Schriftfarbe, Hintergrundfarben, Rahmen, etc. einzufügen (was durchaus möglich wäre), sondern einfach mal nur das reine HTML zu schreiben.
 * Da gab es natürlich auch kleinere Probleme, das Meiste fand Holger auf obiger Website "selfhtml", aber einiges hatte ihm auch Julian im Matrixchat mitgeteilt.
 * Aber nun, nachdem nach mehrmaligem Nachfragen Ulf's - niemand mehr was beitragen oder erfragen wollte, konnte Holger seine ca. zwanzig ('''nicht''' 2.629 ''';-)''' ) Fragen anbringen und Julian konnte diese "Kleinigkeiten", die aber doch für das Aussehen der Seite so wichtig sind, alle befriedigend klären. '''Vielen Dank, Dir, Julian!!!'''
 * Ach ja, das CSS bewirkt, - es muss natürlich erst mal erstellt werden, was zu über 90 % Julians Werk war! - , dass das schnöde HTML nun ins rechte Licht gerückt wird.
@@ Zeile 138: / Zeile 137: @@
+  }
 * Die Seite wird nun durch das CSS mittig platziert, das Banner und Schrift und auch das Layout (z. B. die Navigationsleiste) passen sich dem Bildschirm des Benutzers an (Smartphone, Tablet, Notebook- oder PC-Bildschirm), Farben und Hintergründe werden bestimmt und vieles mehr. Und das Beste: mit nun wenigen Handgriffen ließen sich Farben, Hintergründe, etc. komplett und beliebig oft ändern. Das ist aber nicht angedacht  ;-).
 * Hier, auf dem gleich folgenden Link ist nun ist das (ziemlich) fertige Werk auf einer vorläufigen Domain des Anbieters netcup zu sehen; später wird auch noch die Domain umziehen (vorher müssen noch die Mail gesichert und auf die neue Domain übertragen werden): [https://kontakt.hosting193189.ae92a.netcup.net/ KONTAKT e.V. - Startseite - zum Ausprobieren Link anklicken]. Ist doch schick geworden, oder?
 Übrigens hat die Seite noch kein SSL-Sicherheitszertifikat installiert, weswegen vor dem Betreten gewarnt wird. Das kann man aber getrost ignorieren ...