Schreibe deine erste Webseite mit HTML

1. Editor öffnen

Das Notepad bzw. der Editor ist bei Windows vorinstalliert. Es gibt aber auch für den Mac sehr ähnliche Programme, wie z.B. TextWrangler, welches man sich jedoch zuerst aus dem Mac App Store runterladen muss. Der HTML Code kann wie in einem Word Dokument einfach in Notepad oder TextWrangler geschrieben werden. Natürlich kannst du auch andere HTML Editoren verwenden

2. HTML Code schreiben

Zuerst müssen wir angeben, dass wir die Webseite mit der neusten Version HTML5 kreieren möchten . Das machen wir, indem wir innerhalb von spitzen Klammern <!DOCTYPE html> schreiben. Als nächstes schreiben wir den HTML-Start- und den HTML-Endtag --> <html>...</html>.
Diesen schliessen wir, genau wie alle anderen Tags, mit einem Schrägstrich (slash).
Jetzt kommt es zum eigentlichen positionieren der Inhaltselemente. Dafür separieren wir zwischen <head> und <body>.
In den <head> Bereich schreiben wir Informationen über das Dokument, welche im Browser nicht angezeigt werden. Ausserdem platzieren wir dort den Titel <title> der Webseite, der z.B. auf der Titelleiste des Browser oder als Suchergebnis von Suchmaschinen angezeigt wird.
In den <body> Bereich schreiben wir den darzustellenden Inhalt. Also das, was man auf der Webseite später sehen wird.
Im Folgenden Beispiel haben wir zwei Verschiedene Darstellungs Tags verwendet. Im ersten, dem <h1> haben wir eine Überschrift gesetzt, welche ein freundliches Hallo an die Welt ausgibt. Im zweiten, dem <p> haben wir normalen Text hinzugefügt. Als Beispiel: den Text, den ihr euch gerade auf CodeStarter durchlest, ist ebenfalls in einem solchen Tag eingebettet.
Des Weiteren haben wir ein Bild in die Webseite eingefügt.
Das Machen wir wie folgt -> <img src="Dateiname.Dateiformat">
WICHTIG! -> Achtet darauf, dass ihr die Tags jeweils mit einem Schrägstrich (slash) abschliesst.
 Beispiel: </body>

<!DOCTYPE html>
<html> 
    <head> 
        <title> Meine Webseite  </title> 
    </head>
    <body> 
        <h1> Hello World </h1> 
        <p> Das ist meine erste Webseite :) </p> 
<img src="bild.png"> </body> </html>


3. Datei Speichern

Dazu müssen wir auf Datei -> Speichern unter... klicken und die Datei dann mit der Dateierweiterung .html speichern. z.B helloworld.htm. Dieser Vorgang kann von Editor zu Editor verschieden sein.

4. Resultat

Die Datei wird mittels Doppelklick im Standartbrowser geöffnet und das sollte ungefähr so aussehen:

bildschirmfoto2016-09-12um205508png

Der Code erklärt:

<!DOCTYPE html> Definiert die Dokumentart
<html> Definition html
<head> beinhaltet Dokumentinformationen
<title> Text in Browsertab oder Suchmaschine
<body> Seiteninhalt
<h1>Überschrift
<p>Paragraph (Text)


 
 

Gefällt dir CodeStarter?

Blog-Kommentare werden über Disqus bereitgestellt