So erstellen Sie Ihre eigene Website

Eine einfache Website kann mithilfe von HTML (HyperText Markup Language) erstellt werden. Die Skripte können je nach verwendetem Betriebssystem im Editor oder in einem Textdokument geschrieben werden. Die grundlegenden Tools zum Erstellen einer Website beginnen mit der Verwendung von HTML- Tags und HTML- Elementen . Die ersteren werden häufig verwendet, um Informationen über die Einheit des Inhalts weiterzugeben, und die letzteren werden verwendet, um Tools für die Webseite zu formatieren. Während der Codierung werden die HTML- Attribute und -Werte verwendet, um Informationen wie Platzierung, Höhe usw. für den Inhalt bereitzustellen. Darüber hinaus können Sie Farb-, Bild- und HTML- Unterteilungstags verwenden, um eine lebendige Webseite zu erstellen.

So erstellen Sie Ihre eigene Website

Was ist HTML?
Bedarf
- Beispiel 1:
HTML-Tags
HTML-Elemente
Grundlegende zu merkende HTML-Tags
- Beispiel 2
HTML-Attribute und -Werte
- Beispiel 3
Farbetiketten
- Beispiel 4
Textformatierung
- Beispiel 5
HTML-Unterteilungstags
- Beispiel 6
Bild-Tags
- Beispiel 7
Tags verknüpfen
- Beispiel 8
Tabellen-Tags
- Beispiel 9
HTML-Frame-Tags
- Beispiel 10
WYSIWYG-Software

Beim Erstellen einer Website lassen sich viele Leute häufig von einem Webdesigner helfen. Es gibt jedoch einfache Möglichkeiten, um zu lernen, wie Sie eine einfache Website selbst erstellen, und diese werden in diesem Artikel erläutert.

Was ist HTML?

Um eine Website zu erstellen, müssen Sie die Grundlagen von HTML erlernen. HTML ist die Abkürzung für HyperText Markup Language. Hierbei handelt es sich um die Programmiersprache, mit der Hypertext-Dokumente im World Wide Web erstellt werden. Die Sprache besteht aus einer Reihe von Codes und Symbolen, die Text, Bilder, Töne, Rahmen und Animationen auf Ihren Browserseiten erzeugen.

Zwei gängige Möglichkeiten zum Starten Ihrer Website sind:

Erstellen Sie Ihre eigenen Codes in einem einfachen Texteditor und speichern Sie sie als HTM-Datei
HTML-Generator-Software verwenden

Bedarf

Öffnen Sie unter Windows zunächst ein neues Notepad- Dokument.

Öffnen Sie für Benutzer mit MAC ein neues SimpleText- Dokument.

Öffnen Sie für OSX- Benutzer TextEdit und nehmen Sie die folgenden Änderungen vor:

1. Öffnen Sie Ihr "Format" -Menü und wählen Sie "Nur Text"

2. Öffnen Sie im Menü "Textbearbeitung" das Fenster "Einstellungen" und wählen Sie die Option "Rich-Text-Befehle in HTML-Dateien ignorieren".

Beispiel 1:

Sobald Sie Ihr leeres Dokument haben, können Sie Folgendes eingeben:

Dies ist der Titel Ihrer Seite

Hier werden alle Ihre Inhalte angezeigt

Hinweis:

1. Speichern Sie Ihre Dokumente immer mit der Erweiterung .htm oder html, um sie in Ihrem Webbrowser anzuzeigen. (zB index.htm).

2. Um Ihr Quelldokument zu bearbeiten, wählen Sie die Option "Ansicht" in Ihrer Symbolleiste im Browserfenster und wählen Sie "Quelle".

3. Vergessen Sie nicht, alle an Ihrem Dokument vorgenommenen Änderungen zu speichern.

4. Um die am Dokument vorgenommenen Änderungen im Browserfenster anzuzeigen, aktualisieren Sie die Seite mit der Taste F5.

HTML-Tags

Ein HTML-Tag ist als Markup definiert, das einem HTML-Dokument hinzugefügt wird, um weitere Informationen zum Inhalt bereitzustellen. Ein HTML-Tag wird in eckige Klammern gesetzt und benötigt ein schließendes Tag. (z.B ).

HTML-Elemente

Elemente sind Markup-Tags, die zum Formatieren einiger Abschnitte einer Webseite verwendet werden. Ein Beispiel für ein HTML-Element ist das Tag, mit dem der im Browser angezeigte Text fett dargestellt wird.

wird verwendet, um Ihrem Browser mitzuteilen, dass die Datei aus HTML-codierten Daten besteht. wird ganz am Ende des Dokuments verwendet, um Ihrem Browser mitzuteilen, dass der HTML-Inhalt dort endet.

Enthält den ersten Teil des Dokuments und ist der Ort, an dem sich der Titel Ihrer Browserseite befindet. Es kann auch die Befehle enthalten, mit denen die Anzeige Ihres Browsers formatiert wird (z. B. CSS-Aufrufe). wird dann verwendet, um diesen Abschnitt zu beenden. Dieser Teil wird in Ihrem Browser nicht angezeigt.

wird verwendet, um Ihre Website zu beschriften. wird daher verwendet, um das Ende dieses Befehls anzuzeigen.

Definiert den gesamten Inhalt, der in Ihrem Browser angezeigt wird.

Grundlegende zu merkende HTML-Tags

Überschriften

Überschriften werden verwendet, um das Thema des folgenden Inhalts auf Ihrer Webseite anzugeben. In HTML können sie in der Größe variieren, von

Absätze

Absätze werden verwendet, um Textblöcke auf Ihrer Webseite zu trennen. In HTML werden sie mit definiert

Etikett. Ein Absatz wird mit einem Eröffnungs-Tag versehen

und ein schließendes Tag

In diesem Abschnitt wurden HTML-Tags definiert

Zeilenumbrüche

In HTML benötigen Zeilenumbrüche KEIN schließendes Tag. Daher werden sie einfach mit dem definiert

Etikett.

In diesem Abschnitt wurden HTML-Tags definiert

Bemerkungen

Kommentare werden in eine HTML-Seite eingefügt, um die verschiedenen Abschnitte auf einer Webseite durch den Designer zu lokalisieren. Sie werden mit definiert Etikett. Kommentar-Tags werden im Browser nicht angezeigt und können daher überall im Dokument verwendet werden, ohne das Format der Webseite zu beeinflussen.

Beispiel 2

Alles über HTML

HTML ist die Abkürzung für HyperText Markup Language

HTML-Attribute und -Werte

HTML-Attribute sind Informationen, die den Elementen hinzugefügt und verwendet werden, um den HTML-Elementen ein bestimmtes Merkmal hinzuzufügen. HTML-Attribute werden immer zusammen mit einem Wert (zB name = "value" ) geschrieben und am Starttag eines HTML-Elements platziert.

Wenn Sie beispielsweise möchten, dass die Überschrift nicht standardmäßig links angezeigt wird, sondern in der Mitte der Seite angezeigt wird, können Sie dem Tag das Attribut align hinzufügen:

HTML ist die Abkürzung für HyperText Markup Language

Farbetiketten

Mit Farbtags können Sie die Farbe des Texts ändern, der im Browserfenster angezeigt wird. ist ein Beispiel dafür, wie Sie die Textfarbe ändern können, wenn Sie dies möchten.

In HTML können Sie auch Farbcodes verwenden, um mithilfe von Hexadezimalcodes bestimmte Farben zu erhalten. Sogenannte hexadezimale Triplets entsprechen den Farben Rot, Grün und Blau (RGB). Daher sieht das Farbkennzeichen in hexadezimaler Schreibweise ungefähr so aus . Sie können die Farbcodes und Namen unter folgendem Link abrufen: //www.computerhope.com/htmcolor.htm

Sie können auch Farbtags verwenden, um die Hintergrundfarbe Ihrer Website zu ändern, indem Sie das Attribut BGCOLOR hinzufügen. Daher, ändert die Hintergrundfarbe von seinem Standardweiß.

Beispiel 4

Alles über HTML

HTML ist die Abkürzung für HyperText Markup Language

Hinweis:

1. Es ist ratsam, für Ihren Text keine auffälligen Farben wie Gelb oder Rosa zu wählen, da diese Farben die Augen stören

2. Versuchen Sie auch, maximal 4 leicht passende Farbtöne zu verwenden, die der Atmosphäre Ihrer Website entsprechen, um ein besseres Harmonisierungsergebnis zu erzielen.

3. Machen Sie keine umständlichen Farbübereinstimmungen wie rosa Text auf blauem Hintergrund für formelle Websites, da dieser seltsam aussehen wird.

Textformatierung

Mit Textformatierungs-Tags können Sie Ihre Textanzeige im Browserfenster ändern. Wenn Sie beispielsweise einen Text fett formatieren möchten, können Sie das Symbol verwenden Etikett. (zB Dieser Text wird fett gedruckt ). Unten finden Sie eine Liste der gängigen Textformatierungs-Tags, mit denen Sie Ihre Textanzeige ändern können:

1. Fettdruck

Dieser Text wird fett gedruckt

2. Kursivschrift

Dieser Text wird kursiv gedruckt

3. Tag unterstreichen

Dieser Text wird unterstrichen

4. Tag hervorheben

Dadurch wird Ihr Text hervorgehoben

5. Starke Marke

Dieser Text wird stark sein

6. Big Tag

Dies definiert großen Text

7. Kleines Etikett

Dies definiert kleinen Text

8. Index-Tag

_{Dieser Text wird tiefgestellt}

9. Hochgestelltes Tag

Dieser Text wird hochgestellt

10. Tag zentrieren

Dieser Text wird zentriert

11. Linke Markierung

Dieser Text wird auf der linken Seite des Bildschirms angezeigt

12. Richtiges Tag

Dieser Text wird auf der rechten Seite des Bildschirms angezeigt

13. Ungeordnetes Listentag

Dies ist eine ungeordnete Liste

Dies ist eine ungeordnete Liste

14. Bestellte Liste Tag

Dies ist die Nummer 1 auf meiner Liste

Dies ist Nummer 2 auf meiner Liste

Hinweis:

1. Diese Tags können auch kombiniert werden. Wenn Sie einen unterstrichenen Fettdruck wünschen, können Sie verwenden Dieser Text ist fett und unterstrichen

2. Schließen Sie jedoch immer das erste Tag, das Sie zuletzt geöffnet haben. Im obigen Beispiel wird die wurde ZUERST vor dem Tag, wurde aber zuletzt geschlossen.

Beispiel 5

Alles über HTML

HTML ist die Abkürzung für HyperText Markup Language

Die Sprache besteht aus einer Reihe von Codes und Symbolen, die Folgendes erzeugen:

Text,

bilder,

Geräusche,

Frames

Animation auf Ihren Browserseiten.

Es gibt zwei Möglichkeiten, um Ihre Website zu starten:

Erstellen Sie Ihre eigenen Codes in einem einfachen Texteditor und speichern Sie sie als HTM-Datei. oder

Verwenden Sie eine HTML-Generator-Software.

HTML-Unterteilungstags

Horizontale Regel

Horizontale Regeln werden zum Teilen oder Unterteilen von Abschnitten Ihrer Webseite verwendet. Das

Das Tag wird zum Erstellen einer horizontalen Linie verwendet und kann geändert werden, um verschiedene Linientypen zu erstellen, indem Größe, Farbe oder Breite geändert werden.

Z.B

oder

Durchgezogene Linie

Das

Tag wird verwendet, um eine durchgezogene Linie zu erstellen. Es weicht geringfügig vom Tag für horizontale Linien ab, da es die Linie ohne den 3D-Ausschnitt erzeugt, der vom erzeugt wird

Etikett.

Beispiel 6

Alles über HTML

HTML ist die Abkürzung für HyperText Markup Language

Die Sprache besteht aus einer Reihe von Codes und Symbolen, die Folgendes erzeugen:

Text,

bilder,

Geräusche,

Frames

Animation auf Ihren Browserseiten.

Es gibt zwei Möglichkeiten, um Ihre Website zu starten:

Erstellen Sie Ihre eigenen Codes in einem einfachen Texteditor und speichern Sie sie als HTM-Datei. oder

Verwenden Sie eine HTML-Generator-Software.

Bild-Tags

In HTML-Dokumenten können Sie Bilder mithilfe von Bild-Tags einfügen. Sie können ein Bild entweder über eine Online-URL oder von Ihrem eigenen Computer aus durchsuchen. Das Image-Tag steht für "Bildquelle"; Daher sollte der Bildpfad nach dem Attribut definiert werden. Befindet sich das Bild im selben Ordner wie Ihr Quelldokument, müssen Sie nicht das gesamte Pfadverzeichnis eingeben.

Z.B

oder oder

Ausrichtungs-Tag

Sie können das ALIGN- Attribut erneut verwenden, um das Bild entweder in der Mitte, auf der rechten oder auf der linken Seite Ihres Browsers anzuzeigen.

Eg1

Hinweis: Es kann jedoch vorkommen, dass Ihr Browser dieses Tag nicht unterstützt. Sie können daher das Tag direkt vor dem Bildtag verwenden, um Ihr Bild im Browser zu zentrieren.

Eg2

Bildgröße

Die Größe Ihres angezeigten Bildes kann mithilfe der Attribute WIDTH und HEIGHT geändert werden. Sie können entweder den Prozentsatz oder die Pixel verwenden, um die Größe Ihres Bildes zu bestimmen.

Eg1

Eg2

Bildrand

Wenn Sie Ihrem Bild einen Rahmen hinzufügen möchten, können Sie das BORDER- Attribut verwenden.

Z.B

Runaround Space

Der umlaufende Raum bezieht sich auf die Lücke um das Bild. Dies ist ein sehr nützliches Tag, wenn Sie Text um Ihr Bild haben. Sie wird mit dem VSPACE- Attribut für die obere und untere Seite definiert, und das HSPACE- Attribut wird für die linke und rechte Seite verwendet.

Z.B

Beispiel 7

Alles über HTML

HTML ist die Abkürzung für HyperText Markup Language

Die Sprache besteht aus einer Reihe von Codes und Symbolen, die Folgendes erzeugen:

Text,

bilder,

Geräusche,

Frames

Animation auf Ihren Browserseiten.

Es gibt zwei Möglichkeiten, um Ihre Website zu starten:

Erstellen Sie Ihre eigenen Codes in einem einfachen Texteditor und speichern Sie sie als HTM-Datei. oder

Verwenden Sie eine HTML-Generator-Software.

Farbcodes

Sie können von Theodora bereitgestellte hexadezimale Farbcodes verwenden, um eine eigene Website-Atmosphäre zu erstellen

Dies ist das Beispiel, das Sie mit den Attributen vspace und hspace haben

Tags verknüpfen

In HTML werden Verknüpfungs-Tags verwendet, um von einem Abschnitt der Seite zu einem anderen oder von einer Seite zu einer anderen zu springen. Sie werden als interne Links bezeichnet, wenn Sie von einem Abschnitt oder der Seite Ihrer eigenen Website zu einem anderen springen können, und als externe Links, wenn Sie ein neues Browserfenster von einer anderen Website aus öffnen. Der Hauptvorteil der Verknüpfung von Tags besteht darin, dass Sie mit ihnen eine dynamische Website erstellen können, anstatt eine scrollende Webseite zu erstellen.

externer Link

zeigt den "Webadressen-Link" als Hyperlink auf Ihrer Webseite an. Wenn der Benutzer auf den Text klickt, wird die Seite www.webaddress.com geladen

Interner Link

Es gibt zwei Möglichkeiten, einen internen Link einzufügen:

1. Von der aktuellen Seite zu einer anderen Seite auf derselben Website springen

2. Um vom aktuellen Abschnitt der Seite zu einem anderen Abschnitt auf derselben Seite zu springen.

Um von einem Abschnitt zu einem anderen springen zu können, müssen Sie dem Abschnitt zunächst einen Namen geben, damit das Tag ihn finden kann, wenn es aufgerufen wird. Wenn beispielsweise der Abschnitt zu HTML-Links im oberen Bereich der Webseite direkt über der Überschrift "HTML-Links" eingefügt werden muss, fügen Sie das Tag ein . Der Wert "links" bezieht sich auf den Abschnitt, der lokalisiert werden muss. Wenn also ein Abschnitt Ihrer Webseite auf Katzen basiert, fügen Sie das Tag ein direkt über der Überschrift für Katzen.

Nach diesem Vorgang sollten Sie auch den Link einfügen, von dem Sie springen möchten. Wenn Sie in diesem Beispiel vom oberen Rand der Seite zum Speicherort von "HTML-Links" springen möchten, der sich im unteren Teil der Seite befindet, fügen Sie Verknüpfungs-Tags ein . Der mit einem Hyperlink versehene Text "Linking Tags" wird angezeigt, und wenn der Benutzer darauf klickt, springt er von seiner aktuellen Position zum angegebenen Abschnitt.

Beispiel 8

Alles über HTML

Farbcodes

Tags verknüpfen

HTML ist die Abkürzung für HyperText Markup Language

Die Sprache besteht aus einer Reihe von Codes und Symbolen, die Folgendes erzeugen:

Text,

bilder,

Geräusche,

Frames

Animation auf Ihren Browserseiten.

Es gibt zwei Möglichkeiten, um Ihre Website zu starten:

Erstellen Sie Ihre eigenen Codes in einem einfachen Texteditor und speichern Sie sie als HTM-Datei. oder

Verwenden Sie eine HTML-Generator-Software.

Farbcodes

Sie können von Theodora bereitgestellte hexadezimale Farbcodes verwenden, um eine eigene Website-Atmosphäre zu erstellen

Dies ist das Beispiel, das Sie mit den Attributen vspace und hspace haben

Wenn Sie auf diesen Link klicken, finden Sie nützliche Informationen zum Besuch der Microsoft-Website

Tags verknüpfen

In diesem Abschnitt erfahren Sie, wie wichtig das Verknüpfen von Tags auf Ihrer Website ist.

Hinweis:

Dies sind nur Beispiele, wie Sie die Verknüpfungs-Tags verwenden können. Sie können die Platzierung natürlich ändern, um Ihre Website benutzerfreundlicher und attraktiver zu gestalten.

Zielfenster

Das Zielfenster lädt die verknüpfte Seite in ein anderes Browserfenster, sodass der Benutzer auf der aktuellen Seite Ihrer Website bleiben und die verknüpfte Adresse in einem anderen Browser anzeigen kann.

Tabellen-Tags

Das Einfügen von Tabellen in Ihre Website kann sehr nützlich sein, um die Informationen ordnungsgemäß anzuzeigen. Außerdem können Sie Ihre Texte und Grafiken präziser verarbeiten.

Das Eröffnungs-Tag

wird verwendet, um Ihrem Browser mitzuteilen, dass die Tabelle auf der Seite dort beginnt und mit dem Symbol endet

Etikett. Sie können auch die Farbe, Größe und Rahmengröße Ihrer Tabelle ändern.

Die Größe der Tabelle kann mit der Taste geändert werden

Etikett. Sie können entweder die Pixel oder den Prozentsatz verwenden, um die Größe der Tabelle zu ändern.

Sie können das Tag verwenden

Zum Beispiel, um in Ihrem Browser einen unsichtbaren Rahmen zu erstellen.

Das

tag wird verwendet, um eine Lücke zwischen dem Text und der inneren Linie des Tabellenrandes zu machen.

Das

tag wird verwendet, um eine Lücke zwischen der inneren und äußeren Linie der Tabellenränder einzufügen.

Eine Tabelle besteht aus Zellen, die durch die Spalten und Zeilen in der Tabelle definiert sind. Eine Zelle ist der Bereich, in den Ihre Inhalte eingefügt werden. Das Spalten-Tag ist definiert als

Tags und die Zeilen werden als definiert undStichworte. Mit der Taste können Sie die Zellenbreite ändern Fügen Sie zum Ausrichten einer Spalte das Tag ein

und

Etikett. Die Größe kann entweder in Prozent oder in Pixel eingestellt werden.

Sie können Ihre Zeilen und Spalten auch ausrichten, indem Sie das ALIGN-Attribut in Ihre Tags einfügen. Fügen Sie daher zum Ausrichten einer bestimmten Zeile beispielsweise das Tag ein

Um Ihre Zelle auszurichten, können Sie das Attribut VALIGN verwenden .

Platziert die Zelle in der oberen Mitte Ihrer Seite.

Um eine Spalte zu überspannen, können Sie das Tag verwenden

um die Anzahl der Spalten festzulegen, die die Zelle umfassen soll. Beachten Sie, dass der Standardwert auf 1 festgelegt ist.

Wenn Sie eine Zelle auf mehrere Zeilen verteilen möchten, verwenden Sie die

Etikett.

Beispiel 9

Alles über HTML

Farbcodes

Tabellen-Tags

HTML ist die Abkürzung für HyperText Markup Language

Die Sprache besteht aus einer Reihe von Codes und Symbolen, die Folgendes erzeugen:

Text,

bilder,

Geräusche,

Frames

Animation auf Ihren Browserseiten.

Es gibt zwei Möglichkeiten, um Ihre Website zu starten:

Erstellen Sie Ihre eigenen Codes in einem einfachen Texteditor und speichern Sie sie als HTM-Datei. oder

Verwenden Sie eine HTML-Generator-Software.

Farbcodes

Sie können die von Theodora bereitgestellten hexadezimalen Farbcodes verwenden, um eine eigene Website-Atmosphäre zu erstellen.

Mehr Text kann hier hinzugefügt werden.

Tabellen-Tags

In diesem Abschnitt erfahren Sie mehr über Tabellen-Tags

Überschrift
Dies ist ein weiterer Teil des Inhalts
Spalte 1	Spalte 2	Spalte 3
Zellenübergreifend in 3 Zeilen (2. und 3. zusammengeführt)	Zellaufteilung in 2 Zeilen (1. und 2. Zelle zusammengeführt)	1st Cell
		2. Zelle
		3rd Cell
	3rd Cell	4th Cell

HTML-Frame-Tags

Mit HTML-Frames können Sie unabhängige Fenster innerhalb einer Webseite erstellen. Sie sind sehr nützlich, da Sie damit mehr als ein Dokument auf einer Webseite anzeigen können.

Um die Frames nutzen zu können, müssen Sie über mindestens zwei verschiedene HTM-Dateien verfügen, von denen eine den Namen index.htm trägt . In der Datei index.htm werden alle Fenster angezeigt. Das Frame-Tag ist definiert als und das tag wird verwendet, um die Gruppe von Frames zu definieren, die in der Datei index.htm verwendet werden.

Beispiel 10

Probieren Sie die Frame-Tags aus

Legt die Größe der Zeilen fest, die in Ihrem Browser angezeigt werden.

Legt die Größe der Spalten fest, die in Ihrem Browser angezeigt werden.

Das Das Tag benennt den Frame und wird verwendet, um ihn mit dem Hauptfenster zu verknüpfen.

Das Tag wird verwendet, um einen Rahmen für Ihre Frames festzulegen. Wenn Sie den Wert auf 0 setzen, wird sichergestellt, dass er mit allen Browsern kompatibel ist.

Legt ein Leerzeichen zwischen den nächsten Frames fest.

Legt den Breitenabstand auf beiden Seiten der Rahmen fest. Die Größe sollte in Pixel angegeben werden.

Legt die Größe des oberen und unteren Rands in Pixel fest.

Das Tag ermöglicht die vertikale oder horizontale Bildlaufleiste in Ihrem Rahmen. Sein Wert muss entweder auf "yes", "no" oder "auto" gesetzt werden.

WYSIWYG-Software

Es gibt Softwareprogramme namens WYSIWYG (was Sie sehen, ist was Sie bekommen), die für Sie codieren. Dies sollte Sie jedoch nicht davon abhalten, ein Minimum an HTML-Konzepten zu erlernen, um unangenehme Überraschungen zu vermeiden! Mit dieser Software setzen Sie den Text und die Bilder ein und die Software generiert gleichzeitig den entsprechenden HTML-Code. Dies erleichtert auch das Einfügen von Animationen oder Skripten. Es sind beispielsweise:

Dreamweaver, nicht kostenlos, aber sehr umfangreich und benutzerfreundlich mit einem gut gestalteten Tutorial

GoLive Photoshop-Editor

Für freies WYSIWYG können wir erwähnen: