Start:
Notepad++
Jedes Betriebssystem (BS) verfügt über einen intergirierten Text-Editor.Mit diesem lassen sich sämtliche Quell-Codes wie HTML, CSS, JS etc. «von Hand» schreiben und abspeichern. Was natürlich mehr Zeit in Anspruch nimmt und «fehleranfälliger» sein wird.
Deswegen wäre es ratsam, seine eigenen Skripte jeweils beim Standard für www, dem Validierungsdienst W3C per Direkt-Link (fals bereits online), oder unter Quellcodes einfügen und überprüfen bzw. validieren zu lassen, bevor wir das Skript online schalten.
Eine bessere Wahl wäre, sich den Notepad++ als Freeware installieren zu lassen. Er verfügt über weitere Möglichkeiten, wie zB. die Quellcodes farblich darzustellen.
Wie das Ganze aussieht, zeigt euch der eingefügte Screenshot. Das Skript, habe ich dementsprechend als html-Datei abgespeichert. Mein Beispiel, zeigt euch eine Fehler-Seite 404, die dann im Browser, dementsprechend ohne Design ausgegeben wird. Wie das Skript mit Design zusammen funktioniert, habe ich Euch weiter unten im Web-Browser aufgeführt. Zusätzlich wurde der Link zur weiteren Veranschaulichung resp. Demo-Zwecken eingefügt.weiterführende Links:
Editoren:
- Notepad++ Editor
- weitere Editoren bei IT Magazine swiss
- RAPIDPHPPHP Editor DE
PDF-Dateien:
- AMI-BIOSDiagnose LED's
- Win11 instal.Anleitung
- TPM 2.0 TPM 2.0 Module
- Entities Sonderzeichen
- Zyxel Firmware Anleitung
- Image-Datei auf DVD-ROM brennen
Hinweis:
Im Internet finden sich weitere Editoren, die ich nicht zusätzlich erwähnen werde. Für welchen Editor ihr euch entscheidet, liegt im eigenen Ermessen, Budge, Bedürfnis. Zu Test-Zwecken dürft ihr gerne meine Webseite über W3C auf Fehler überprüfen, bzw. validieren lassen.Cascading Style Sheets
Nachdem die HTML-Datei über Notepad++ angelegt wurde, fehlt nun das entsprechende Design dazu.
Diese wird ebenfalls im Editor angelegt und als .css Datei abgespeichert.
Somit können wir die Kodierung des Designs «extern», mittels <link-tag> im head Bereich, der html Datei einbinden lassen.
<head>
<link rel="stylesheet" type="text/css" href="css/wl.css">
<⁄head>Info:
Im Browser-Fenster lassen sich die Quellcodes mittels rechts Klick der Maus über Seiten Quelltext anzeigen, oder über die Tastenkombination STRG & U einsehen. Die Tastenkombination funktioniert sowohl für Firefox, wie auch in Edge und IE.Sonderzeichen werden in manchen Browsern rot markiert, sind aber keine Fehler im herkömmlichen Sinne.
Web-Browser
Das Ergebnis mit eingebundenem Stylesheet, kann anschliessend über die Ansicht im Broser, überprüft und getestet werden.
Hier werden weitere Browser aufgelistet, die je nach Instalation einem zur Verfügung stehen. Andernfalls sollte man sich als Entwickler zusätzliche Browser installieren,
um gegebenenfalls Fehler in der Darstellung ausschliessen zu können.
<head>
<meta http-equiv="refresh" content="15; URL=eigeneSeite.php">
<⁄head>Wer sich etwas mehr mit der Fehlermeldung 404 befassen möchte, der kann sich auf Wikipedia, oder anderen Web-Seiten, erkundigen lassen. Es gibt noch weitere Seiten die euch aufzeigen, wie man richtig mit Fehler-Seiten umgeht, oder wie sie im Web-Server richtig einegbunden werden.
weiterführende Links:
verschiedene Browser:
weitere Links über 404:
- Wikipedia Erklärung zu Fehler 404
- GoDaddy Erklärung über 404
- Ryte Magazine wie man damit umgeht
- dr.web 404 Seite bauen
Beispiele und FTP:
- FTP Client FileZilla
- html Elements englischsprachige Seite
- selfhtml wiki.org de
- mozilla.org Docs in EN
- FTP Client WinSCP
Info:
Safari Browser für Windows wurde bis Version 5.1.7 unterstützt. Jetzt wurde der Support jedoch eingestellt. Das heisst, wir können den Browser in Win 11 nicht mehr nutzen, um unsere Skripte dementsprechend auf Tauglichkeit zu testen. So können wir nicht sehen, ob unser Skript für Safari Nutzer geeignet ist?
Da ich mein Skript nicht für ältere Browser ausgelegt habe, solltet ihr bitte immer die neuste Version eures Web-Browsers verwenden.
Box-Modell
Am Anfang mag es für unerfahrene Web-Entwickler schwierig erscheinen, welcher Abstand, was für Auswierkungen hat.
So werden kurzerhand sämtliche Innen- und Aussen-Abstände, mittels universal Selector ∗ auf Null gesetzt.
/∗ selektiert alle Elemente ∗/
∗ { margin: 0px; padding: 0px; } Allerdings werden unter anderem auch Text-Blöcke <p> dabei an den Rand gesetzt, was nicht gerade zur schöneren Ansicht beiträgt.
Nachträgliches ändern des Wertes, quitiert der Browser in seiner eigenen Box-Modell Ansicht mit durchgestrichenem Text, da das Element zuvor als übergeordnetes Tag auf Null gesetzt und somit an weitere Kind-Elemente vererbt wurde.
Sämtliche Angaben, die wir im CSS-Skript auskommentiert haben, werden ebenfals im Browser durchgestrichen.
Hinzu kommen die Standardwerte des Browsers. Werden zum Beispiel Textgrössen, oder auch Color etc. verändert, kann das Box-Model auch hier einen durchstrichenen Wert ausgeben.
Das Box Modell im Browser selbst, kann mittels rechts Klick der Maus, im Kontextmenü unter Untersuchen geöffnet werden. Auf der rechten Seite unterhalb, wird das Box-Model des Browsers ausgegeben.
Je nach Element, werden die Angaben im Box-Model des Browsers mit den entsprechenden Abstand-Angaben angezeigt. Fährt man mit der Maus über die Box, werden die Angaben im Fenster farblich maskiert.
Da das head-Element nur für Link- und Meta-Tag Angaben vorgesehen ist, wäre es nicht nötig dieses Element als Box-Modell darstellen zu wollen. Gehört natürlich zur DOM-Ansicht dazu. So bleiben die Anagben im Box-Model dementsprechend leer.
Wie eine Verschachtlung funktioniert, lässt sich anhand der Border gut erkennen. Hier seht ihr wie die Elemente ineinandergreifen, oder nebeneinander dargestellt werden.
Deswegen sollte man zu Testzwecken gelegentlich den Border des entsprechenden Elementes ausgeben lassen.
So sollte nachvollziehbar sein, wie die Abstände des jeweiligen Elementes gesetzt wurden. Als weiteres Beispiel zeige ich euch mein eigener Screenshot.
Hier ist klar zu sehen, wie die roten Border im Abstand zu einander stehen und sich nicht überschneiden.
Für eine normale Ansicht des Bildes, können die Screenshots jeweils angeklickt werden. Dabei wird eine kleine Galerie gestarte, die ohne JAVA– oder PHP–Skript funktioniert.Gästebuch:
Wer gerne etwas Musik hört, kann hier mein Player verwenden.