HTML-Dateien: wie man sie öffnet und eine Website erstellt

Deshalb werden wir heute über die HTML-Datei sprechen. Wir werden wissen, was genau es ist und wofür es verwendet wird, sowie seine Herkunft. Wir werden auch sehen, wie es funktioniert, wie man einfach eine erstellt oder welche Programme die besten sind, um sie zu öffnen und zu bearbeiten.

Was sind HTML-Dateien

Wenn wir über HTML sprechen ( Hypertext-Auszeichnungssprache) Dateien, wir tun dies in einem Hypertext-Marktsprachdateiformat, das als Grundlage einer Webseite verwendet wird. Es wird im Standardtextformat gespeichert und enthält verschiedene Tags, die sowohl für das Design als auch für den Inhalt der Webseite verantwortlich sind, einschließlich des Textes, der Tabellen, Bilder und Hyperlinks, die darauf angezeigt werden. Sie werden hauptsächlich online verwendet und in Webbrowsern angezeigt. Diese Sprache ist leicht zu erlernen und kann in andere wie JavaScript, XML oder CSS übersetzt werden.

wo es entsteht

Es war 1991, als Tim Berners-Lee zusammen mit anderen Ingenieuren am CERN es auf sich nahm HTML-Dateien einführen als eine Möglichkeit für Webbrowser, Webseiten zu interpretieren, zu lesen und anzuzeigen. Seitdem und bis heute ist es ein Standard in der Webentwicklung geworden. Auf dem Weg dorthin gab es verschiedene Revisionen wie HTML 2 (1995), HTML 3 (Januar 1997), HTML 4 (Dezember 1997) und schließlich HTML 5 (2014).

Im Jahr 2004 hat eine Gruppe der wichtigsten Browser-Entwickler, darunter Google, Apple, Mozilla und Firefoxschuf die WAS (The Web Hypertext Application Technology Working Group), was auf Spanisch die Technology Working Group of Web Hypertext Applications wäre. Diese Gruppe ist verantwortlich für die Entwicklung und Weiterentwicklung des HTML-Formats.

Wie funktioniert es

Durch die Auszeichnungssprache, Die HTML-Elemente, aus denen die Strukturen von Webseiten bestehen, werden vorgestellt. Typischerweise enthält jedes Element ein in spitze Klammern eingeschlossenes öffnendes Tag ( ) und ein schließendes Tag, das ebenfalls in eckige Klammern eingeschlossen ist, jedoch mit einem Schrägstrich zwischen den Tags ( ).

Anschließend wurden im Laufe der Zeit andere Webtechnologien wie CSS- (.css) und JavaScript-Code (.js) in aktuelle HTML-Webseiten eingeführt. In der Regel erstellen und bearbeiten die Entwickler die HTML-Dateien und laden sie dann auf die Webserver der Browser hoch, die sind für die Analyse und Interpretation zuständig sie in Sekunden und zeigt uns das Endergebnis, wenn wir die Seite besuchen. Deshalb sehen wir nie den HTML-Quellcode im Browser.

Um die Grundstruktur eines HTML-Dokuments zu erklären, müssen wir wissen, dass es drei Tags gibt, die es beschreiben und durch die einfache Informationen darüber angeboten werden. Diese Tags wirken sich überhaupt nicht auf das Erscheinungsbild des Dokuments aus, sondern rahmen und strukturieren lediglich die HTML-Datei:

• und : Umgeben Sie das Dokument und geben Sie die Sprache an, in der es verfasst ist.
• : Gibt das Vorwort für den Rest der Datei an. Im Inneren befinden sich einige Tags, die den Titel hervorheben die für die Identifizierung des Inhalts der Seite verantwortlich ist. Jedes Dokument darf nur einen Titel haben, und wenn möglich, halten Sie ihn kurz und aussagekräftig. Außerdem sollte in der Kopfzeile kein Text aus dem Dokument stehen.
• : Hier finden wir den Hauptinhalt oder die Ursache des Dokuments. Dies ist der Teil des HTML-Dokuments, der auf dem Computer angezeigt wird.

Zeigen Sie die HTML-Vorschau im Browser an

Wie bereits erwähnt, sind Webbrowser dafür verantwortlich, den HTML-Code zu interpretieren, um uns alle Inhalte grafisch anzuzeigen, sei es als Text, Bilder oder Videos, so wie sie entworfen wurden. Es ist jedoch möglich Sehen Sie sich eine Vorschau einer HTML-Webseite an von jedem Web aus dem Browser, indem Sie bestimmte Schritte befolgen, je nachdem, welchen wir verwenden

• Google Chrome: Klicken Sie im Optionsmenü auf „Weitere Tools“ und „Tools für Entwickler“.
• Mozilla Firefox : Wählen Sie im Optionsmenü „Weitere Tools“ und „Seitenquelle“ aus.
• Microsoft Edge – Durch Klicken auf „Weitere Tools“ und „Entwicklertools“ im Optionsmenü.
• Apple Safari : in seinem Optionsmenü durch Klicken auf „Quellcode anzeigen“.

Dies sind nur einige Beispiele in den gängigsten Browsern, aber praktisch jeder Webbrowser auf dem Markt hat die Möglichkeit, den HTML-Code anzuzeigen.

So erstellen Sie ganz einfach eine HTML-Datei

Wenn wir schnell und einfach eine HTML-Datei erstellen möchten, können wir diese kostenlosen Texteditoren verwenden, mit denen wir sie in Sekundenschnelle erstellen und speichern können.

Notizblock

Es ist ein einfacher Editor integriert Windows, über die kleine Textdokumente wie Notizen geschrieben werden können. Gleichzeitig kann damit auch einfach eine HTML-Datei erstellt werden. Dazu muss es nur über die Suchmaschine des Startmenüs geöffnet werden.

Nach dem Öffnen müssen wir nur noch den benötigten Code schreiben. Sobald wir fertig sind, klicken wir auf die Registerkarte „Datei“, ein Dropdown-Menü wird geöffnet, in dem wir auswählen "Speichern als" .

Jetzt müssen wir auf der Registerkarte Typ am unteren Rand des Fensters die Option „Textdokumente (*.txt)“ auf ändern "Alle Dateien (*.*)" . Auf diese Weise wird unsere Datei als HTML-Dokument gespeichert. Sie müssen nur noch den Speicherort der Datei auswählen und ihr einen Namen mit der Erweiterung „html“ hinzufügen. Jetzt müssen Sie nur noch auf Speichern klicken, um unser Textdokument in eine HTML-Datei umzuwandeln.

NotePad ++

Dies ist möglicherweise der beste alternative Texteditor zu Windows Notepad. Es ist ein kostenloses Open-Source-Programm, das mit verschiedenen Programmiersprachen kompatibel ist, native Unterstützung für Windows bietet und mit dem wir sehr einfach eine HTML-Datei erstellen können. Um loszulegen, laden Sie es einfach herunter von der Entwickler-Website .

Einmal heruntergeladen und installiert, müssen wir es nur noch ausführen, damit seine Benutzeroberfläche angezeigt wird. Wir schreiben den gewünschten Code und klicken anschließend auf die Registerkarte „Datei“. Dies öffnet ein Dropdown-Menü, in dem wir die auswählen "Speichern als" .

In dem neu erscheinenden Fenster gehen wir auf die Registerkarte Typ, wo wir alle Optionen anzeigen und auswählen „Hypertext Markup Language (*.hmtl, *.htm, *.shmtl, *.shtm, *.xhtml, *. xht, *.hta)“ . Jetzt müssen wir nur noch den gewünschten Namen für die HTML-Datei und den Ort eingeben, an dem sie gespeichert werden soll. Klicken Sie abschließend auf „Speichern“.

EditPad Lite

Ein weiteres sehr beliebtes Texteditorprogramm ist EditPad Lite, das eine kostenlose Version für den persönlichen Gebrauch hat. Es hat volle Unicode-Unterstützung und ermöglicht die direkte Bearbeitung von Textdateien mit Windows-Textkodierungen und Zeilenumbrüchen. Trotz der Tatsache, dass die Benutzeroberfläche auf Englisch und einfach und intuitiv ist, können wir unsere HTML-Datei in Sekundenschnelle erstellen. Um dies zu tun, ist das erste, was zu tun ist Laden Sie es von der offiziellen Website herunter .

Wir installieren es und führen es aus, damit seine Benutzeroberfläche angezeigt wird. Hier schreiben wir den benötigten Code und klicken dann auf die Registerkarte Datei. Dies öffnet ein Dropdown-Menü, in dem wir die auswählen Option „Speichern unter“.

In dem neu erscheinenden Popup-Fenster gehen wir zum Abschnitt Typ, der sich unten befindet. Hier zeigen wir die Liste an und wählen aus „HTML-Dokumente (*.html, *.htm, *.shtml, *.hta)“ . Jetzt müssen wir ihr nur noch einen Namen und einen Pfad geben, um die Datei zu speichern. Klicken Sie abschließend auf Speichern und schon haben wir unsere HTML-Datei erstellt.

Beste Programme zum Öffnen und Bearbeiten einer HTML-Datei

Um eine Vorschau der HTML-Dateien sehen zu können, kann unser eigener Webbrowser ausreichen. Wenn wir jedoch HTML-Dateien öffnen und bearbeiten möchten, ist es am besten, verschiedene Arten von Webentwicklungsprogrammen zu verwenden, wie die, die wir unten sehen werden.

Visual Studio Code

Microsoft ist das Unternehmen, das für die Entwicklung dieses Quellcode-Editors verantwortlich ist, der mit mehreren Programmiersprachen funktioniert, einschließlich HTML . Es bietet Unterstützung für das in Git integrierte Steuerelement-Debugging, Syntaxhervorhebung, intelligente Codevervollständigung, Snippets und Code-Refactoring. Es unterstützt auch die Verwendung von Snippets, was uns hilft, den Zeitaufwand für das Schreiben von Code drastisch zu reduzieren. Natürlich ist die Software anpassbar, was es uns ermöglicht, alles vom Arbeitsbereich bis zur HTTP- oder CCS-Konfiguration zu konfigurieren.

Visual Studio Code ist eine Multi-System-Anwendung, die wir können kostenlos herunterladen von seiner Website.

Erhabener Text

Diese Textbearbeitungsanwendung für Profis ist zu einer der besten Optionen geworden HTML- und CSS-Dateien öffnen und bearbeiten , zusammen mit anderen Programmiersprachen. Damit können wir zu Zeichenfolgen oder Symbolen springen, mehrere Syntaxen definieren, Code hervorheben, mehrere Zeilen auswählen und eine geteilte Ausgabe durchführen. Es ist auch mit Tastaturkürzeln kompatibel, was es uns ermöglicht, die Programmier- und Debuggingzeit zu dominieren und zu reduzieren. Es richtet sich insbesondere an fortgeschrittene Benutzer und ist daher nicht für Anfänger geeignet, die mit ihren ersten Programmieraufgaben beginnen.

Sublime Text ist plattformübergreifend und hat eine kostenlose Version, die wir herunterladen können von der Entwickler-Website .

Adobe Dreamweaver CC

Diese Anwendung wurde erstellt und entwickelt von Adobe zu einem der Industriestandards zu werden, wenn es darum geht Entwerfen einer Webseite in HTML , da es über bestimmte Funktionen verfügt, um Seiten mit den neuesten Designinnovationen zusammen mit einem modernen Aussehen zu erstellen und eine gewisse Flexibilität zu ermöglichen, um unsere Arbeit zu erleichtern. Seine Entwicklung im Laufe der Zeit hat dazu geführt, dass diese Software zu einer der bevorzugten Optionen für Webdesigner geworden ist. Wenn wir nicht wissen, wie man codiert, enthält es eine Reihe vordefinierter Module, die uns beim Erstellen von Websites helfen.

Wir können Laden Sie eine Testversion von Dreamweaver herunter von der Adobe-Website. Wenn wir es dauerhaft nutzen wollen, müssen wir ein Abonnement von 24.19 Euro pro Monat bezahlen.