XHTML-Erste-Schritte-Tutorial: Einfache Webseitenerstellung
|
Erstellen Sie Ihre erste Webseite in einer Minute: Versuchen wir, eine einfache Webseite zu erstellen. Ich hoffe, Sie können uns folgen. Es dauert nur eine Minute. Jetzt wissen Sie vielleicht nicht, was diese spitzen Klammern „<>“ und die darin enthaltenen Buchstaben bedeuten, aber keine Sorge, wir erklären es Ihnen im nächsten Tutorial. Starten Sie zunächst den Editor oder erstellen Sie an einer beliebigen Stelle ein neues Textdokument und geben Sie in den Editor folgenden Inhalt ein: Nachfolgend der zitierte Inhalt: <html> <Kopf> <title>Ich bin der Titel dieser Seite</title> </Kopf> <Text> <p>Dies ist meine erste Webseite. </p> </body> </html> Nach der Eingabe speichern Sie die Datei und nennen Sie sie „index.html“. (Klicken Sie auf „Datei“ -> „Speichern unter“. Geben Sie „index.html“ in die Spalte „Dateiname“ ein, wählen Sie „Alle Dateien“ in der Spalte „Dateityp“ und klicken Sie dann auf die Schaltfläche „Speichern“) Nach dem Speichern doppelklicken Sie auf die Datei und der Browser öffnet automatisch die Webseite. Bitte überprüfen Sie, ob Ihre Webseite mit dieser Seite identisch ist. Wenn ja, haben Sie Ihre erste relativ einfache Webseite erfolgreich fertiggestellt. Bitte beachten Sie, dass dies nur eine einfache Seite ist und obwohl sie hinsichtlich der Syntax dem XHTML-Standard entspricht, fehlen dennoch einige Inhalte, um eine vollständige, W3C-konforme XHTML-Webseite zu sein. Die relevanten Inhalte werden in den folgenden Tutorials vorgestellt. Diese Seite dient lediglich der Erläuterung einiger grundlegender XHTML-Kenntnisse. Erklärung der Grundkenntnisse <br />Die Webseite, die wir gerade erstellt haben, beginnt mit <html> und endet mit </html>, was jeweils den Anfang und das Ende der Webseitendatei darstellt. Im Englischen bedeutet „head“ Kopf und „body“ Körper. Die Teile <head></head> und <body></body> einer Webseite stellen jeweils den „Kopf“ und den „Hauptteil“ der Webseite dar. Vielleicht ist Ihnen aufgefallen, dass sich im „Header“ unserer Webseite ein <title></title> befindet. Das Wort „title“ bedeutet Titel, und der Titel der Webseite wird in der Titelleiste über dem Browser angezeigt. Der Hauptteil der Webseite, also der Inhalt zwischen den Tags <body> und </body>, wird im Browser als Haupttext angezeigt. Diese Webseite ist sehr einfach und enthält wenig Inhalt im Kopf und Hauptteil. Wir werden den Inhalt der Webseite in nachfolgenden Tutorials schrittweise erweitern. Aber denken Sie jetzt bitte an ein Konzept: Der Kopf einer Webseite wird für den Browser geschrieben und nicht auf der Seite angezeigt, während der Hauptteil für die Benutzer der Website geschrieben wird und der Inhalt ist, den der Browser anzeigt. Fehlerbeispiele einer XHTML-Parodie für Anfänger <br />Öffnen Sie die folgenden beiden Fehlerbeispiele und sehen Sie sie sich an. Ihr Code weist schwerwiegende Fehler auf, der Browser zeigt jedoch beide Webseiten korrekt an. Beispiel 1: Der Körper ist im Kopf <html> <Kopf> <title>Ich bin der Titel dieser Seite</title> <p>Dies ist meine erste Webseite. </p> </Kopf> <Text> </body> </html> Wenn Sie sich die Webseite oben ansehen, wird der Inhalt zwischen <head> und </head> auf der Seite normal angezeigt. Es ist jedoch ein komischer Fehler, den Körper in den Kopf zu stecken. Beispiel 2: Der Kopf liegt unter dem Hals <html> <Kopf> </Kopf> <Text> <title>Ich bin der Titel dieser Seite</title> <p>Dies ist meine erste Webseite. </p> </body> </html> Die Anpassungsfähigkeit des Browsers ist wirklich beeindruckend; er kann Ihren Kopf erkennen, selbst wenn er sich in Ihrem Körper befindet. Wenn Sie in die Titelleiste schauen, wird der Titel einwandfrei angezeigt. Aber bitte machen Sie bei der praktischen Anwendung nicht so kleine Fehler. Dies kann schwerwiegende Folgen haben: Suchmaschinen listen Ihre Website möglicherweise nicht auf, und Freunde, die Ihre Website mit Mobiltelefonen oder anderen Mobilgeräten durchsuchen, stoßen möglicherweise auf unbekannte Fehler. Lassen Sie uns nun kurz auf die Kerninhalte von XHTML eingehen. |
<<: Eine kurze Einführung in die Basiskomponenten der VUE uni-app
Artikel empfehlen
Idea stellt Remote-Docker bereit und konfiguriert die Datei
1. Ändern Sie die Docker-Konfigurationsdatei des ...
Detaillierte Erläuterung der benutzerdefinierten Anweisungen für die Vue.js-Direktive
Anpassen eines Demo-Befehls Die Syntax der benutz...
So führen Sie eine reibungslose if-Beurteilung in js durch
Inhaltsverzeichnis Vorwort Code-Implementierung I...
Vue Routing gibt die Betriebsmethode zum Wiederherstellen des Seitenstatus zurück
Routenparameter, Routennavigationswächter: Beibeh...
Analyse und Lösung der Ursache für den Verlust des Webseitenstils durch das automatische Ausfüllen von Formularen durch den Browser
Vom Backend zum Frontend: was für eine Tragödie. A...
Detaillierte Beispiele für Docker-Compose-Netzwerke
Ich habe heute mit den Netzwerkeinstellungen unte...
Eine kurze Diskussion über den MySQL B-Tree-Index und die Indexoptimierungszusammenfassung
Die MyISAM- und InnoDB-Engines von MySQL verwende...
Beheben Sie den Fehler während der Verbindungsausnahme in Docker
Wenn Sie Docker zum ersten Mal verwenden, werden ...
Beispielanalyse von Linux-Benutzer- und Gruppenbefehlen [Wechseln, Hinzufügen von Benutzern, Berechtigungskontrolle usw.]
Dieser Artikel beschreibt die Linux-Benutzer- und...
Detaillierte Erklärung zum Erstellen eines FTP-Servers unter Ubuntu (Erfolg garantiert)
1. Heute Nachmittag musste ich aufgrund der Anfor...
Eine kurze Analyse der Wissenspunkte zum Exportieren und Importieren von MySQL-Daten
Oft müssen wir lokale Datenbankdaten exportieren ...
Grafisches Tutorial zu VMware Workstation Pro 16 zum Erstellen eines CentOS8-Clusters für virtuelle Maschinen
Inhaltsverzeichnis Vorbereitung Installieren Sie ...
So verwenden Sie pdf.js zur Vorschau von PDF-Dateien in Vue
Wenn wir auf der Seite eine PDF-Vorschau anzeigen...
Lösung für das Problem „Linux QT Kit fehlt“ und „Version leer“
Derzeit tritt ein solches Problem auf Bei mir war...
Eine Zusammenfassung der Wissenspunkte zur Datenbankindizierung. Alles, was Sie wissen müssen, finden Sie hier.
Ich glaube, jeder ist mit Datenbankindizes vertra...