Basic HTML - Getting Started with Your Website
Mit Ihrer Website zu beginnen kann eine entmutigende Aufgabe sein. Dies gilt besonders, wenn Sie nur begrenzte Erfahrung mit dem Erstellen von Websites haben. Um Ihnen den Einstieg zu erleichtern, bietet Dynadot kostenloses Einseiten-Hosting mit jedem Domain-Kauf. Unser One-Page-Hosting verfügt über einen "wizard", um Menschen zu helfen, die HTML nicht kennen, beim Erstellen ihrer Websites. Unser Wizard erlaubt Ihnen jedoch nicht, so viel für Ihre Website zu tun wie HTML, also hier einige Grundlagen, um Ihnen den Einstieg zu erleichtern*:
<b>fett</b>
<i>kursiv</i>
<u>unterstrichen</u>
Schriftgröße
Der einfachste Weg, die Schriftgröße zu ändern, ist mit diesen Tags:
<big>erhöht die Schriftgröße um eine Stufe</big>
<small>verringert die Schriftgröße um eine Stufe</small>
Wenn Sie Ihre Schrift noch größer oder kleiner machen müssen, können Sie diese spezifischeren Tags verwenden:
<font size="+2">erhöht die Schriftgröße um die Zahl in den Anführungszeichen</font>
<font size="-2">verringert die Schriftgröße um die Zahl in den Anführungszeichen</font>
Sie können auch noch spezifischer mit Ihrer Schriftgröße sein, indem Sie eine Zahl von 1 bis 7 als Schriftgröße angeben, wobei 1 die kleinste Größe und 7 die größte ist:
<font size="1">kleinste Schrift 8 pt</font>
<font size="7">größte Schrift 36 pt</font>
Eine weitere Option für die Schriftgröße ist die Verwendung von Überschriften-Tags 1-6, die auch Abstand um den Text einfügen:
<h1>größte Überschrift</h1>
<h6>kleinste Überschrift</h6>
Schriftfarbe
Zusätzlich zum Ändern der Schriftgröße können Sie auch die Farbe anpassen.
<font color="blue">blau</font>
<font color="red">rot</font>
Wenn Sie einen anderen Rot- oder Blauton verwenden möchten, können Sie eine sechsstellige Hexadezimalzahl anstelle des Wortes "red" oder "blue." eingeben. Alle Farben bestehen aus Rot, Blau und Grün, und jede Farbe hat ihren eigenen "code." Die ersten beiden Zahlen (oder manchmal Buchstaben) des Codes repräsentieren Rot, dann die nächsten zwei Grün und die letzten zwei Blau. Sie können herunterladen Farbauswahl für PC oder Digitales Farbmessgerät für Mac zu verwenden und diese Produkte zu nutzen, um über jede Farbe auf Ihrem Bildschirm zu fahren, und es gibt Ihnen den Code, den Sie benötigen. Zum Beispiel, wenn Sie den Code für das oben gesehene Blau verwenden würden, würde es so aussehen:
<font color="#0000FF">gleiches Blau</font>
<font color="#3DC6EA">und hier ist ein Beispiel für einen anderen Blauton, den Sie mit dem Code wählen können</font>
Schriftart
Schließlich können Sie die Schriftart ändern. Sie können Microsoft Word verwenden, wenn Sie Ideen benötigen.
<font face="arial">Arial-Schrift</font>
<font face="comic sans ms">Comic Sans MS-Schrift</font>
<font face="lucida handwriting">lucida handwriting</font>
Jetzt müssen Sie alles zusammenfügen. Für alles mit dem Wort "font" können Sie einfach alle Informationen in einem Tag angeben. Wenn Sie die Header-Tags verwenden oder Fett, Kursiv oder Unterstreichung hinzufügen möchten, können Sie das in ihrem eigenen Tag hinzufügen.
<font size="4" color="376E1E" face="calibri">Sie können alles zusammenfügen</font>
<b><font size="4" color="376E1E" face="calibri">Sie können alles fett machen</font></b>
<font size="4" color="376E1E" face="calibri">oder Sie können fett schreiben <b>Teil</b> davon</font>
Abstand
Jetzt, da Sie Ihre Schrift anpassen können, möchten Sie wahrscheinlich Absätze, Zeilenumbrüche erstellen, und in einigen Fällen müssen Sie möglicherweise manuell Leerzeichen hinzufügen:
<p>mit den Absatz-Tags wird Ihr Text in einem eigenen Absatz platziert...</p>
<p>...und in der nächsten Zeile</p>
Zeilenumbrüche verwenden ist wie...<br>
...die Eingabetaste drücken, um zur nächsten Zeile zu gelangen, und im Gegensatz zu allem anderen auf dieser Seite benötigt es keinen schließenden Tag (dies ist ein schließendes Tag </p>). Sie können es einfach erneut eingeben...<br>
...um wieder in die nächste Zeile zu gehen.
Sie müssen keinen Code für Leerzeichen zwischen Text (wie von der Leertaste) verwenden, es sei denn, Sie möchten zusätzliche Leerzeichen hinzufügen, da HTML nur eines erkennt, selbst wenn Sie mehr als eines mit Ihrer Leertaste eingeben. Um Abstand zwischen Text zu schaffen, können Sie den Code verwenden:
Links
Eine Sache, die Sie wahrscheinlich zu Ihrer Website hinzufügen möchten, sind Links zu anderen Seiten auf Ihrer Website oder sogar zu anderen Websites. Links lassen sich leicht mit diesem Code hinzufügen:
<a href="http://www.dynadot.com">dieser Link führt zur Dynadot-Startseite</a>
Sie werden vielleicht bemerken, dass, wenn Sie auf den obigen Link klicken, dieser je nach Ihren Browsereinstellungen in einem separaten Tab oder Fenster in Ihrem Browser geöffnet wird. Dies ist einfach hinzuzufügen und wird empfohlen, wenn Sie von Ihrer Website weg verlinken oder nicht möchten, dass Besucher auf einer bestimmten Seite (wie einem Blog) verloren gehen, da diese Seite für Ihre Kunden offen bleibt, um zurückzukehren, ohne auf die Zurück-Schaltfläche im Browser klicken zu müssen. Alles, was Sie tun müssen, ist target="_blank" nach Ihrem Link hinzuzufügen:
<a href="http://www.dynadot.com" target="_blank">dieser Link führt zur Dynadot-Startseite</a>
Bilder
Schließlich möchten Sie vielleicht Bilder zu Ihrer Website hinzufügen. Um ein Bild mit HTML hinzuzufügen, müssen Sie es irgendwo hosten. Wenn Sie keinen eigenen Ort haben, um das Bild zu hosten, können Sie einen Dienst wie Tiny Pic.com das Ihnen erlaubt, Ihre Bilder kostenlos hochzuladen und den HTML-Tag für Sie generiert. Wenn Sie kein Konto erstellen möchten, können Sie einfach den generierten HTML-Code speichern (speichern Sie ihn nur nicht in Microsoft Word, da Word manchmal Dinge hinzufügt, die den Code nicht mehr funktionieren lassen). Beachten Sie, dass einige Bilder sehr groß sind und Sie sie möglicherweise optimieren möchten, damit sie weniger Speicherplatz beanspruchen. Es gibt einige kostenlose Bildoptimierer, die Sie verwenden können, um die Dateigröße Ihrer Bilder zu reduzieren, wie z.B. Image Optimizer.net. Hier ist ein Beispiel für ein einfaches Bild-Tag:
<img src="https://i45.tinypic.com/9bkglk.jpg"> was so aussieht: 
Sie können auch Rahmen zu Ihrem Bild hinzufügen, die Größe ändern und Abstand darum einfügen:
<img src="https://i45.tinypic.com/9bkglk.jpg" border="2" width="100" height="30" vspace="10" hspace="20" align="left">
Wie Sie sehen können, hat das Bild einen Rahmen, ist breiter und kürzer und wurde oben, unten, rechts und links umrandet. Es ist auch links ausgerichtet, sodass der Text jetzt neben dem Bild erscheint.
Sie können auch einen Link zu Ihrem Bild hinzufügen. Sie müssen nur die Link-Tags um das Bild-Tag setzen, wie folgt:
<a href="http://www.dynadot.com" target="_blank"><img src="https://i45.tinypic.com/9bkglk.jpg" border="0"></a>
Jetzt können Sie auf dieses Bild klicken und es führt Sie zu unserer Homepage: 
Dies fügt manchmal einen Rahmen um das Bild in der blauen Farbe hinzu, die Sie bei Textlinks sehen. Um ihn zu entfernen, fügen Sie einfach border="0" zu Ihrem Bild-Tag hinzu. Sie werden vielleicht auch bemerken, dass der von Tiny Pic.com generierte HTML-Code alt="Image and video hosting by Tiny Pic" innerhalb des Bild-Tags hat. Sie können dies verwenden, um Text mit Ihrem Bild zu versehen, falls es im Browser einer Person nicht richtig angezeigt wird. Das Hinzufügen von Alternativtext kann auch bei der Suchmaschinenoptimierung (SEO) helfen.
Jetzt, da Sie hoffentlich besser mit HTML vertraut sind, können Sie Ihre Fähigkeiten auf Ihrer Website testen. Aber bevor Sie mit möglicherweise unvollkommenem HTML speichern, empfehlen wir, Ihr HTML mit einem kostenlosen Dienst wie onlinehtmleditor.net. Es gibt sogar einige einfache HTML-Schaltflächen oben, die Ihnen helfen. Jetzt müssen Sie nur noch Ihre Domain wenn Sie noch keinen haben und noch heute mit Ihrer Website loslegen!
*Bitte beachten Sie, dass das Font-Tag veraltet ist und möglicherweise nicht in allen Browsern korrekt angezeigt wird. Es ist am besten, den Schriftstil in CSS zu definieren, was wir in einem späteren Blogbeitrag behandeln werden.
Beitrag von Robyn Norgan