So finden Sie Fehler im CSS-Code. Überprüfen der Gültigkeit von CSS mithilfe des CSS-Validierungsdienstes. Schaltflächen interaktiv gestalten
Wenn Sie einen Webcode auf Gültigkeit prüfen, überprüfen Sie ihn auf Übereinstimmung mit den W3C-Standards und -Zertifikaten.
Das W3C (World Wide Web Consortium) ist der technische Gesetzgeber des Web, der Standards und Richtlinien für die Codierung entwickelt. W3C-Zertifikate und -Standards sind für alle, die im Web arbeiten, obligatorisch. Es sind einheitliche Standards für die Rechtschreibung von Code erforderlich, damit alle Webanwendungen in einem einzigen Sprachraum in Standardsprachen kommunizieren und sich bei der Arbeit mit Webdokumenten verstehen.
Das W3C erstellt nicht nur Netzwerkstandards, sondern fördert deren Umsetzung aktiv.
Das W3C verfügt über Onlinedienste zur Überprüfung der Gültigkeit von HTML / XHTML- und CSS-Code.
Das Überprüfen Ihres Codes anhand von W3C-Standards mithilfe von W3C-Validatoren ist der beste Ausweg.
Kostenlose Online-Dienste von W3C zur Überprüfung des Codes auf Gültigkeit.
W3C-Validatoren verfügen über eine intuitive Benutzeroberfläche. Es ist einfach und unkompliziert, mit ihnen zu arbeiten.
Die Dienste ermöglichen das Einchecken in drei Modi und haben dementsprechend nur drei Tasten:
Überprüfen Sie die URL
(Zur Überprüfung müssen Sie die Adresse einer beliebigen Seite der Website angeben, die im Web verfügbar ist.)
Überprüfen Sie die hochgeladene Datei
(Zur Überprüfung müssen Sie den Pfad zur gescannten Datei angeben.)
Überprüfen Sie den eingegebenen Text
(Zur Überprüfung müssen Sie den verifizierten Code kopieren und in das Validierungsfenster einfügen.)
Die letzten beiden Methoden sind besonders nützlich, wenn Sie Webdokumente oder Texte auf lokalen Computern überprüfen. Dies können Webseiten sein, die entweder bereits vom Web auf einen lokalen Computer heruntergeladen oder von Engines generiert wurden, die sich auf lokalen Servern wie "Denver" befinden. Im Fall von Denver müssen Sie die Seite über den Browser als Datei mit der Erweiterung .html speichern und dann als separate Datei überprüfen oder den Quellcode der Webseite direkt aus dem Browser kopieren und als eingegebenen Text überprüfen.
Verwendung der W3C-Online-Validatoren.
wir wenden uns an den Validator unter:
(http://validator.w3.org/ - zur HTML- oder XHTML-Validierung
http://jigsaw.w3.org/css-validator/ - zur CSS-Validierung)
wählen Sie im geöffneten Validierungsfenster eine von drei Überprüfungsmethoden aus
(Site-Seiten-URL, lokale Datei oder eingegebener Text)
gehen Sie zur entsprechenden Registerkarte
geben Sie das zu überprüfende Objekt an
(Geben Sie die URL der überprüften Webseite ein.
oder den Pfad zur Datei auf dem lokalen Computer,
oder geben Sie den verifizierten Code ein)
drücken Sie die Taste "Prüfen" und sehen Sie sich das Ergebnis der Prüfung an
Dienste vom W3C überprüfen den Code auf Gültigkeit und zeigen sofort Fehler an, falls vorhanden. Jeder Fehler wird kommentiert. Die Kommentare sind leider in englischer Sprache. Google Translate ist also da, um Ihnen zu helfen. Sie müssen lediglich den Code korrigieren und ihn gegebenenfalls erneut auf Konformität überprüfen.
W3C-Validatoren sind völlig kostenlos und automatisiert. Daher können Sie sie mit Ihrer Arbeit an Fehlern für eine lange Zeit und ungestraft hämmern. Hierzu werden diese Dienste erstellt.
Eine normale Alternative zu W3C-Validatoren.
Zusätzlich zu den Online-Servern für die W3C-Webcode-Validierung liefert die HTML Validator-Erweiterung für den Mozilla Firefox-Browser sehr gute Ergebnisse. Das Vorhandensein eines solchen Add-Ons im Browser erleichtert die Arbeit des Webmasters und beweist erneut, dass Mozilla Firefox der "Steuerungsbrowser" ist.
Sie können die Duster-Erweiterung hier herunterladen: http://users.skynet.be/mgueury/mozilla/
Sie können die Erweiterung folgendermaßen installieren:
- Starten Sie Firefox.
Weiter: Menü - Extras - Add-Ons - Erweiterungen.
Ziehen Sie einfach die heruntergeladene Datei (xpi-Erweiterung) mit der Maus in das geöffnete Fenster.
Danach wird die Erweiterung automatisch installiert.
oder (zweiter Weg):
- Starten Sie Firefox.
Weiter: Menü - Datei - Datei öffnen - Geben Sie den Pfad zur heruntergeladenen Datei an.
Danach wird die Erweiterung wieder automatisch installiert.
Nach Abschluss der Installation müssen Sie den Browser neu starten.
Beim Neustart wird ein Fenster mit einer Auswahl der Methode zum Scannen von Webseiten angezeigt:
"HTML Tidy" oder "SGML Parser" oder "Serial"
Wir wählen die "SGML Parser" -Methode als die bequemste und akzeptabelste Option. Klicken Sie auf die entsprechende Schaltfläche. Jetzt wird im Browserfenster ein Verknüpfungssymbol für das Add-On angezeigt. Daneben befindet sich die Menüschaltfläche für die Add-On-Einstellungen.
Ich habe - oben und rechts:
Der HTML Validator für Mozilla Firefox funktioniert vollautomatisch. Ihm muss nicht gezeigt werden, was er überprüfen soll. Es überprüft alle Dokumente, die in Mozilla Firefox geöffnet werden. Es ist sehr bequem. Es reicht aus, die Farbe des Programmetiketts zu betrachten, um zu verstehen, ob das geöffnete Dokument ein Problem aufweist oder nicht.
Abhängig von den Ergebnissen der Überprüfung kann die Farbe des Symbols grün, gelb oder rot sein, was Folgendes bedeutet:
grün - "keine Fehler", alles ist "OK"
gelb - "keine Fehler, aber Warnungen"
rot - "es gibt fehler"
Wenn Sie auf die Verknüpfung klicken, wird ein Fenster mit dem Quellcode der angezeigten Seite mit Erläuterungen und Kommentaren zu etwaigen Fehlern und Warnungen geöffnet.
Etwas wie das.
Willkommen zurück! Also gingen wir zu Ende. Es liegt ein ganzes Jahr fruchtbarer Arbeit vor uns, viele interessante Ideen wurden skizziert, und jetzt müssen sie nur noch zum Leben erweckt werden. Sie können den Verlauf der Ereignisse verfolgen und sehen, wie Gedankenfreiheit in Aktion zum Ausdruck kommt - abonnieren Sie einfach den Blog, ich versichere Ihnen, es wird nicht viel Zeit in Anspruch nehmen ...
Heute ist es meine Aufgabe herauszufinden, ob und wie viel der richtige Quellcode, der den Test bestanden hat, irgendetwas beeinflusst. Und wie immer warte ich in den Kommentaren auf Ihre Meinung zu diesem Thema.
Letztes Jahr habe ich in meinen Veröffentlichungen einem Begriff wie Gültigkeit viel Aufmerksamkeit geschenkt. Es ist Zeit herauszufinden, welche es sind. vorteile von gültigem HTML... Zuvor haben wir gemeinsam mit Ihnen herausgefunden, wie die Gültigkeit überprüft werden kann, sowie Kanäle und einige andere interessante Punkte.
Vier Hauptfaktoren für eine gültige Website
Erstens können wir mit hundertprozentiger Sicherheit sagen, dass Seiten, die den Validator-Test bestanden haben, in absolut allen modernen Browsern korrekt angezeigt werden - und das ist nicht weniger wichtig als. Stimmen Sie zu, es ist nicht sehr angenehm, das Layout mit verzerrten Elementen vor sich zu sehen. Und es ist unwahrscheinlich, dass der Besucher zu einem solchen Blog zurückkehrt, in dem sein Autor das Aussehen und die Verachtung verachtet.
Zweitens reduzieren wir, selbst wenn Sie logisch denken und unnötige Tags und anderen "Müll" entfernen, das Seitengewicht und damit die Ladezeit der Seiten, und Browser verbringen weniger Zeit mit der Verarbeitung solcher Seiten. Wissen Sie, es gibt ein solches Sprichwort: "Weniger Wörter, mehr Aktion". Wenn Sie es umschreiben und auf die Site-Erstellung anwenden, erhalten Sie so etwas wie "Weniger Tags - mehr Wörter".
Und dies sind keine leeren Worte. Jeder, der jemals auf Probleme mit Yandex gestoßen ist, erhielt eine Antwort vom technischen Support: Verbessern Sie die Website und arbeiten Sie daran. In der Yandex Webmaster-Symbolleiste finden Sie beispielsweise Hilfe für den Abschnitt, der Empfehlungen zum Erstellen von Websites enthält.
Wenn Sie dieses Dokument sorgfältig studieren, enthält Absatz 3 "Layout" Folgendes:
Versuchen Sie, Ihr Seitenlayout auf dem neuesten Stand zu halten
Drittens, wenn Sie mit der Erstellung von Websites beschäftigt sind, um diese zu bestellen oder zu bewerben, müssen Sie wahrscheinlich die Sprachen HTML und CSS kennen, und wenn ja, warum sollten Sie dann absichtlich Fehler erstellen? Darüber hinaus stellen Kunden dem Auftragnehmer manchmal eine Aufgabe: die Verwendung eines gültigen Codes, und dementsprechend sind die Preise für die durchgeführten Arbeiten viel höher.
Und schließlich spielt viertens der psychologische Faktor eine wichtige Rolle. Es ist schön zu wissen, dass die geleistete Arbeit bestimmte Kriterien und Standards erfüllt, in unserem Fall die Standards des World Wide Web Consortium. Und wie Sie wissen, ist Psychologie eine großartige Sache! Also ignoriere sie nicht.
Eh, es ist so schön, eine solche Inschrift zu sehen 😉
Hallo alle zusammen!
Die Überprüfung der Gültigkeit des HTML-Codes ist erforderlich, da Suchroboter nur HTML-Code sehen. Aus diesem Grund ist es ratsam, den Site-Code vollständig zu ordnen. Dabei werden wir von speziellen Onlinediensten unterstützt, die die Codeüberprüfung durchführen und speziell auf Fehler hinweisen.
Ein solcher Dienst ist der validator.w3.org-Validator, der wahrscheinlich der beste ist. Es ist vollständig in Englisch, so dass einige Leute Probleme bei der Arbeit haben können, aber seien Sie nicht beunruhigt: Der Validator zeigt Ihnen sowohl die Zeilennummer als auch den Fehler selbst an.
Ein gültiger Code ist ein Code, der alle Standards erfüllt.
Für die Lektion benötigen Sie folgendes Material:
Der oben genannte Onlinedienst überprüft den HTML-Code online auf der gesamten Website. Sie müssen nur die Domain Ihrer Site angeben und auf die Schaltfläche "Überprüfen" klicken, damit Sie den HTML-Code der Site überprüfen können.
Außerdem bietet der Validator eine sehr interessante Funktion - das Überprüfen von Site-Dateien vom lokalen Computer. Meiner Meinung nach ist dieses Tool nützlich für diejenigen, die Websites auf Bestellung erstellen. Bevor Sie die Bestellung aufgeben, müssen Sie alles noch einmal überprüfen, da Sie immer mit Ihrer Arbeit zufrieden sein möchten. Sie können die Dateien überprüfen, indem Sie auf die Registerkarte "Validate by File Upload" gehen: 
Wie behebe ich Fehler im HTML-Code?
Der Validator W3c-Dienst hat mich auf zwei Fehler hingewiesen und 8 Warnungen ausgegeben. Ich werde versuchen, sie zu reparieren und Ihnen zu zeigen, wie es in einem Stück gemacht wird. 
Wir beheben den Fehler „Elementstil als untergeordnetes Element von div in diesem Kontext nicht zulässig. (Unterdrückung weiterer Fehler aus diesem Teilbaum.) ”. Dieser Fehler sagt mir, dass im HTML-Code nämlich das Tag
Der Validator gibt auch an, wo sich der Fehler befindet: 
Auf diese Weise können Sie HTML-Codefehler finden und beheben. Websites bestehen jedoch nicht nur aus Markup-Code, sondern auch aus CSS. Daher überprüfen wir auch die kaskadierenden Stylesheets der Webressource.
Überprüfen des CSS-Codes auf Gültigkeit
Der W3c-Validator kann auch den CSS-Code auf Gültigkeit überprüfen. Sie können dies unter diesem Link tun. Das Funktionsprinzip ist dasselbe: Geben Sie die URL der Site an oder wählen Sie eine Datei auf Ihrem Computer aus und klicken Sie auf die Schaltfläche "Überprüfen".
Im Gegensatz zum gleichen HTML-Validator ist der CSS-Validator auf Russisch.
CSS-Fehler und Warnungen
Bei der Überprüfung der Gültigkeit des CSS-Codes gibt der Dienst eine große Anzahl von Fehlern und Warnungen aus. Ich habe 23 Fehler und 281 Warnungen erhalten. Auf den ersten Blick scheint dies eine Menge zu sein und kann sogar beängstigend sein. Die meisten der angezeigten Fehler und Warnungen werden jedoch nur angezeigt, weil der Dienst bestimmte Eigenschaften, die für verschiedene Browser gelten, nicht kennt.
In meinem Fall sind die meisten der 281 Warnungen CSS-Eigenschaften, die normalerweise in verschiedenen Browsern angezeigt werden:
Der Service positioniert Tags wie "unbekannte Lieferantenerweiterung". Wenn Sie daher beim Überprüfen Ihrer CSS-Dateien eine große Anzahl solcher Fehler feststellen, werden Sie nicht alarmiert. Es ist in Ordnung.
Ich werde nicht die häufigsten Fehler und Möglichkeiten auflisten, um sie zu beseitigen, da alle Lösungen unterschiedlich sein können und Sie sich den HTML-Code selbst ansehen müssen, um zu verstehen, was falsch ist.
Wenn Sie einen Fehler nicht beseitigen können, teilen Sie das Problem in den Kommentaren zur Lektion mit. Vielleicht finden wir gemeinsam eine Lösung.
Ich hoffe, dass die Lektionen, die in dieser Woche herauskamen, für Sie nützlich waren und bei der Lösung bestimmter Probleme geholfen haben.
Nun, auf Wiedersehen!
Vorheriger ArtikelNächster Artikel
2016-12-29
Wir animieren die Schaltflächen und überprüfen die Site auf die Gültigkeit des HTML- und CSS-Codes
Hallo lieber Besucher!
Heute werden wir am Beispiel einer erstellten Webseite prüfen, wie Sie die Website auf ihre Gültigkeit überprüfen können, nämlich auf die Einhaltung der festgelegten Spezifikationen der HTML- und CSS-Sprachen.
Darüber hinaus werden wir vor dem Überprüfen einige Änderungen am CSS-Stylesheet in dem Teil vornehmen, der sich auf das "Animieren" der Seitenleistenschaltflächen bezieht. Dort werden die statischen Schaltflächen interaktiv gestaltet und ihr Erscheinungsbild je nach Status geändert - passiv, aktiv und gedrückt.
- Tasten volumetrisch machen
- Schaltflächen interaktiv gestalten
- Benötigen Sie eine Validierung?
- So validieren Sie HTML-Code
- So validieren Sie CSS-Code
- Site-Quelldateien
Tasten volumetrisch machen
Im vorherigen Artikel haben wir den Hauptinhaltsbereich so gestaltet, dass er dem Layout der Startseite entspricht. Gleichzeitig befinden sich im Moment Schaltflächen in der Seitenleiste, die statisch sind und wie ein normales flaches braunes Rechteck mit abgerundeten Ecken aussehen.
Unten sehen Sie ein Fragment einer Seitenleiste mit solchen Schaltflächen.
Um die Schaltflächen zu "animieren", geben wir ihnen zunächst mithilfe von CSS-Stilen etwas Volumen. Dazu verwenden wir die lineare Gradienteneigenschaft, die zuvor beim Entwurf der Rotator-, Such- und Abonnementblöcke verwendet wurde.
Wir definieren die linearen Gradientenwerte wie folgt:
1. Die Farbtöne werden von unten nach oben eingestellt, beginnend mit einer dunkleren Farbe als die Hauptfarbe der Schaltfläche. Um zu bestimmen, welche Farbe zu Beginn des Verlaufs verwendet werden soll, verwenden wir das Werkzeug eines Grafikeditors, in diesem Fall Photoshop.
Wählen Sie dazu bei einem geöffneten Design-Layout-Dokument den "Farbwähler" aus, bewegen Sie den Cursor über den gewünschten Bereich der Schaltfläche, definieren Sie die Hauptfarbe und wählen Sie dann mit den Werkzeugen "Farbwähler" eine dunklere Farbe mit demselben Braunton aus. In unserem Fall nehmen wir eine Farbe mit dem Wert "653939". Wie das geht, zeigt der Screenshot unten.
2. Definieren Sie als Nächstes die Stoppposition des Verlaufs, an der die anfängliche, dunklere Farbe in die Hauptfarbe übergeht. Wir werden unsere Stoppposition ungefähr in der Mitte platzieren. Gleichzeitig verschieben wir die Stoppposition leicht nach oben und definieren ihren Wert, z. B. 70% der Höhe, um eine gesättigte Farbe zu erzielen.
3. Als letztes müssen Sie dem Verlauf Eigenschaften zuweisen, indem Sie eine hellere Farbe als die Grundfarbe definieren, mit der die Schaltflächen oben gefärbt werden. Dies erfolgt auf die gleiche Weise wie beim Definieren der anfänglichen Verlaufsfarbe. In diesem Fall nehmen wir den Wert dieser Farbe als "b88686".
3. Fügen Sie basierend auf den empfangenen Daten einen linearen Verlauf zu den zuvor generierten CSS-Eigenschaften der Schaltflächen hinzu.
eingang: {
höhe : 30px;
rand-unten : 10px;
randradius : 5px;
hintergrund : # a76d6d;
textausrichtung : Center;
schriftgröße : Fett gedruckt;
farbe : #F f f;
schweben : Recht;
hintergrundbild
Es ist zu beachten, dass bei der Bestimmung der Extremfarben Stopppositionen hier nicht angegeben sind, da dies bei Werten von 0% und 100% nicht erforderlich ist.
Jetzt aktualisieren wir den Browser und sehen das Ergebnis.
Wie Sie sehen können, haben die Tasten eine leichte Ausbuchtung bekommen. Jetzt können Sie sie "revitalisieren".
Schaltflächen interaktiv gestalten
Um vollständig mit den Tasten arbeiten zu können, werden sie interaktiv gestaltet, wodurch ihre drei Hauptzustände visuell wiedergegeben werden: passiv (die Taste befindet sich im Ausgangszustand), aktiv (der Cursor bewegt sich über der Taste) und gedrückt (wenn der Cursor bewegt wird, wird die Maustaste gedrückt und gehalten).
Dies geschieht mithilfe einer Kombination aus Schatten- und Randeigenschaften. Das Wesentliche dieser Technik ist, dass Sie durch Ändern der Farbe des Schattens und der Ränder von verschiedenen Seiten eine Nachahmung der Änderung des Status der Schaltflächen erzielen können.
Lassen Sie uns dies zunächst für den passiven Zustand tun und versuchen, ihn so darzustellen, dass die Tasten über die Oberfläche steigen.
Wir wählen die Farben der Ränder und Schatten auf die gleiche Weise wie in den vorherigen Fällen.
Der CSS-Code nach den entsprechenden Ergänzungen hat die Form.
eingang: {
höhe : 30px;
rand-unten : 10px;
randradius : 5px;
hintergrund : # a76d6d;
textausrichtung : Center;
schriftgröße : Fett gedruckt;
farbe : #F f f;
schweben : Recht;
hintergrundbild : linearer Gradient (nach oben, # 653939, # a76d6d 50%, # b88686);
box Schatten : 2px 2px 4px 0px # 422a2a;
rahmenbreite : 2px;
rand-Stil : solide;
randfarbe : #ddbebe # 241616 # 241616 #ddbebe;
Hierbei ist zu beachten, dass Ränder durch eine Kombination von Eigenschaften dargestellt werden, die die Dicke bestimmen (Randbreite mit dem Wert 2px ), ein Stil (Rahmenstil) mit einem Wert, der einen festen Rand und Farben (Rahmenfarbe) auf jeder der vier Seiten definiert.
Lassen Sie uns den Browser aktualisieren und sehen, wie die Schaltflächen jetzt aussehen.
Wie Sie sehen können, scheinen die Tasten in diesem Zustand angehoben zu sein.
Versuchen wir nun, die Tasten wie einen gedrückten Zustand aussehen zu lassen. Dazu entfernen wir den Schatten und ändern die Farbe der Ränder. In diesem Fall verwenden wir einen speziellen Pseudoklassen-Selektor: Hover, der dem aktiven Zustand entspricht.
Das CSS für den aktiven Status der Schaltflächen sieht folgendermaßen aus.
eingang: schweben {
box Schatten : keiner;
randfarbe : # a76d6d # a76d6d # a76d6d # a76d6d;
In diesem Fall ändern wir die Farbe der Ränder erneut und fügen einen Schatten hinzu. Nur in diesem Fall ist er intern und ohne Verschiebung. Der Pseudoklassen-Selektor ändert sich ebenfalls in: aktiv, entsprechend dem gedrückten Zustand.
Der CSS-Code für den gedrückten Zustand lautet wie folgt.
eingang: aktiv {
box Schatten : 0px 0px 7px 2px # 422a2a Einschub;
randfarbe : # 777 #fff #fff # 777;
Die Schaltfläche "Suchen" wird unten zum Vergleich angezeigt, wo Sie deutlich sehen können, wie sich das Erscheinungsbild je nach Status ändert.
Abb. 8 Passiver Zustand
Hier haben wir das Layout der Hauptseite fertiggestellt und in ein Formular gebracht, das dem Designlayout entspricht. Und jetzt sollten wir es wie zuvor in jeder Phase auf Kreuzkompatibilität in verschiedenen Browsern überprüfen. Lassen Sie uns jedoch vorher die Seite auf Validierung überprüfen, da der Status des Codes die Kreuzkonsistenz in gewissem Maße beeinflussen kann. Daher werden wir jetzt diese sehr notwendige Operation durchführen.
Benötigen Sie eine Validierung?
Die Validierung ist die Überprüfung des Codes anhand etablierter Standards. Unterscheiden Sie zwischen der Validierung auf Richtigkeit von HTML- und CSS-Code. Es ist klar, dass in einem Fall der HTML-Code überprüft wird, in dem anderen der CSS-Code.
Wahrscheinlich werden es viele seltsam finden, zu fragen, ob eine Validierung erforderlich ist. Wenn Sie jedoch im Internet nachsehen, können Sie feststellen, dass es viele gibt, die glauben, dass gültiger Code optional ist, dass dies Zeitverschwendung ist, da Browser auch bei allen Arten von Fehlern gut funktionieren.
Natürlich können Websites in vielen Fällen gut mit ungültigem Code arbeiten, aber in solchen Fällen kann keine gegenseitige Konsistenz garantiert werden. Schließlich gibt es Standards für die Programmiersprachen selbst, aber für die Tatsache, dass Browser Fehler auf die gleiche Weise korrigieren, ist und kann ein solcher Standard dies natürlich nicht sein. Daher können verschiedene Browser Fehler auf unterschiedliche Weise behandeln, was zu einer unterschiedlichen Anzeige von Seiten führen kann.
Und im Allgemeinen ist nicht klar, warum manche Menschen eine so figurative Haltung gegenüber ihrer Arbeit haben, nach dem Prinzip "es wird genau das tun". Wenn jemand der Meinung ist, dass er den Code nicht auf Gültigkeit prüfen muss, ist dies sein Recht, und er kann kaum vom Gegenteil überzeugt werden, und es besteht keine Notwendigkeit.
Lassen Sie uns nun die Gültigkeit der Codes direkt überprüfen, zuerst HTML, dann CSS.
So validieren Sie HTML-Code
Tatsächlich ist die Überprüfung der Codeüberprüfung selbst recht einfach, wie jetzt zu sehen ist. Die Beseitigung von Fehlern dauert jedoch normalerweise eine gewisse Zeit. Wenn der Code aus mehreren Zeilen besteht, können hier natürlich Schwierigkeiten auftreten. Aber wenn es Hunderte und Tausende von ihnen gibt, müssen Sie möglicherweise hart arbeiten, alles hängt davon ab, wie gut der Code kompiliert wurde. Daher ist es besser, dies häufiger mit einer gemeinsamen Kreuzvergleichsprüfung durchzuführen.
Hier betrachten wir die einfachste und häufigste Option zur Überprüfung der Gültigkeit - dies ist die Verwendung der Website "W3C Consortium", die mit Unterstützung von Browser-Entwicklern Spezifikationen für die Codes von Webseiten entwickelt.
Um den HTML-Code zu überprüfen, folgen Sie einfach dem Link https://validator.w3.org/, wo eine Seite mit einem Feld zur Eingabe der Adresse der zu überprüfenden Seite geöffnet wird.
screenshot 51
Nach dem Drücken der "Check" -Taste erhalten wir das Check-Ergebnis.
In diesem Fall ist der HTML-Code gültig, es wird jedoch empfohlen, das lang-Attribut mit dem Wert zu verwenden "ru" , da die Seite Russisch verwendet.
Das lang-Attribut ist für Browser vorgesehen, um bestimmte Zeichen, z. B. Anführungszeichen, abhängig von der verwendeten Sprache korrekt anzuzeigen. Daher ist es für uns nicht überflüssig, es in den HTML-Code aufzunehmen. Und wir werden dies im HTML-Tag tun, damit dieses Attribut das gesamte Dokument beeinflussen kann.
Wie Sie diesen Zusatz vornehmen, erfahren Sie in der folgenden Tabelle.
"ru" >
. . .
Und jetzt, wenn wir eine zweite Überprüfung durchführen, können wir sehen, dass der Code ohne Kommentare vollständig gültig geworden ist.
Auf diese Weise haben wir die im Internet veröffentlichte Datei überprüft. Wenn die Seite jedoch noch nicht im Web veröffentlicht wurde, können Sie ihre Gültigkeit auf andere Weise überprüfen. Laden Sie die Datei entweder über die Schaltfläche "Durchsuchen" hoch oder kopieren Sie den HTML-Code über das Formular direkt.
Der Screenshot zeigt die letzte Option, wenn der Webseitencode zur Validierung direkt in das Formular kopiert wird.
Nach Durchführung der Prüfung erhalten wir ein ähnliches Ergebnis, und der geprüfte Code wird auch hier angezeigt. Falls Fehler gefunden werden, werden sie hervorgehoben, um die Suche zu vereinfachen, was die Arbeit zur Beseitigung erheblich vereinfacht.
So validieren Sie CSS-Code
Wir haben die Überprüfung der HTML-Validierung behandelt. Die CSS-Code-Validierung erfolgt in genau derselben Reihenfolge. Nur in diesem Fall müssen Sie eine andere Validierungsseite verwenden, die sich in einem solchen Fall unter http://jigsaw.w3.org/css-validator/ befindet.
Öffnen Sie es und geben Sie wie beim vorherigen Mal die Adresse der zu überprüfenden Seite ein und klicken Sie dann auf die Schaltfläche "Überprüfen".
Das Ergebnis dieser Überprüfung wird im Screenshot angezeigt.
Wie Sie sehen können, entspricht unser CSS-Code ohne Fehler vollständig der Spezifikation, was ein gutes Ergebnis ist.
Die Reihenfolge der anderen Überprüfungsmethoden für diesen Fall stimmt vollständig mit ähnlichen Überprüfungen für HTML-Code überein. Daher werden wir uns hier nicht wiederholen, und hier werden wir die Prüfung der Validierungsprüfungen beenden.
Danach überprüfen wir unsere Seite auf Kreuzvergleiche und stellen sicher, dass sie in allen Browsern gleich angezeigt wird. Anschließend vervollständigen wir das Layout der Hauptseite der Website.
Und wir werden uns unmittelbar nach den Neujahrsferien darum kümmern.
Und abschließend können Sie allen ein frohes neues Jahr wünschen! Und wünschen Ihnen Gesundheit, Liebe, Freude, Wohlstand und natürlich viel Erfolg bei der Erstellung Ihrer eigenen Website für die Möglichkeit einer erfolgreichen Arbeit im Internet im neuen Jahr!
Site-Quelldateien
Die Quelldateien der Site mit den in diesem Artikel vorgenommenen Aktualisierungen können aus dem Anhang heruntergeladen werden zusätzliche Materialien.