Apropos
Alle Artikel,  Informatik

Eine eigene Internetseite erstellen – Die Basics von HTML und CSS – Teil 1

Du wolltest schon immer mal eine eigene Website gestalten, hast aber keinen Plan von Programmieren? Dann zeige ich euch hier die Grundlagen, die du benötigst um ohne viel Vorwissen voll durchzustarten! Heute zeige ich dir die Basics rund um HTML.


1. Was sind HTML und CSS?

Zunächst einmal sollten wir die wichtigsten Begriffe klären. Wir Menschen können mithilfe unserer Sprache kommunizieren. Computer aber verstehen diese Sprache nicht, deswegen muss man spezielle formale Sprachen verwenden, damit sie unsere Befehle verstehen.

Bei HTML, der Abkürzung von “Hypertext Markup Language”, handelt es sich um eine so genannte “Auszeichnungssprache”, welche die Grundstruktur einer Website definiert, also vorgibt, welche Elemente sich darin befinden. Du kannst sie dir wie ein Skelett vorstellen, ohne jeglich Dekoration oder Positionsbestimmung der einzelnen Elemente.

Mit der “Stylesheet-Sprache” CSS, kurz für “Cascading Style Sheets”, kann man diesem Skelett anschließend bestimmte Attribute verleihen, wie die Farbe ‘gelb’, die Größe ‘400 Pixel’ oder die Position ‘mittig’. Sie gibt deiner Seite den letzten Schliff.


2. Apps zum Programmieren:

Um Seiten mit HTML zu erstellen benötigst du ein spezielles Programm, das euch das Programmieren erleichtert. Ich kann dir das Programm “Atom” (unbezahlte Werbung!) empfehlen. Auch wenn die Hauptsprache Englisch ist, bietet es eine einfach Benutzeroberfläche und ist leicht zu bedienen. Lade dir die App auf deinen Computer runter und installiere sie.


3. Die erste HTML-Seite erstellen:

Klicke im Dateimanager in dem Ordner “Desktop” mit dem rechten Mausklick und gehe auf “Neu” > “Ordner” um einen neuen Ordner zu erstellen. Benenne ihn nun am besten “Atom” damit du ihn schnell wiederfindest. Öffne den Ordner mit doppeltem Linksklick und erstelle darin eine Datei mit dem Namen “index.html” und eine namens “style.css”, indem du einmal mit der rechten Maustaste klickst und auf “Neu” > “Textdokument” gehst. Lösche hierbei die Dateiendung und gehe auf “Okay”, wenn eine Warnung erscheint. Die kannst du einfach ignorieren.

Um es später einfacher zu haben, erstelle in dem Ordner “Atom” noch einen Ordner und nenne ihn “pictures” (deutsch “Bilder”). Dort hinein kannst du später alle Fotos hineinspeichern, die auf deiner Website zu sehen sein sollen.

Starte als nächstes Atom. Wenn das Programm deine Datei “index.html” nicht automatisch öffnet, gehe oben auf “File” > “Open Folder…”, suche nach deinem Ordner “Atom” und gehe auf “Ordner auswählen”. Das Ganze sollte nun so aussehen:

Klicke jeweils doppelt mit der linken Maustaste auf “index.html” und “style.css”, sodass sich beide Fenster öffnen.


4. Grundgerüst der HTML:

Wie bereits gesagt, ist HTML eine Sprache, die der Computer lesen können soll. Deswegen gibt es ein paar Regeln, die man beachten muss.

  1. Die einzelnen Strukturbefehle in HTML werden immer in “<” und “>” geschrieben. Möchtest du zum Beispiel den Kopfteil deiner Seite definieren schreibst du <header>.
  2. Ein neuer Abschnitt wird immer mit <…> eingeleitet und mit </…> abgeschlossen, dazwischen kommen untergeordnete Befehle. Am Anfang des Kopfteiles schreibst du also <head>, dann kommen darunter alle anderen einzelnen Elemente, die in den Kopfteil gehören (z. B. eine Überschrift) und dann schließt du den Kopfteil wieder mit </header> ab.
  3. Untergeordnete Strukturen werden immer eine Zeile unter ihrem “Elternelement” mit einem Absatz nach innen versetzt geschrieben. Soll in deinem Kopfteil also beispielsweise eine Überschrift stehen, dann ist <head> der Elternbefehl von <h1>, dem Befehl für eine Überschrift. <h1> muss hierbei eine Zeile unter <head> stehen und mit der Tabulatortaste (der, mit dem Pfeil nach rechts und links übereinander) einmal eingerückt werden.
  4. Zwischen den Beginn und das Ende von Befehlen kann ein beliebiger Text geschrieben werden, der auf der Internetseite erscheinen soll. Möchtest du also die Überschrift “Schule ist super” definieren, schreibst du diesen Text zwischen den Anfang des Überschrift befehls <h1> und dem Abschluss </h1>. Am Ende sieht das also so aus: <h1>Schule ist super</h1>

Damit dein Browser die Seite richtig darstellen kann und das Programm die HTML richtig programmieren kann, musst du zu Beginn deiner Datei ein paar allgemeine Dinge hineinschreiben (nur das, was zwischen den An- und Ausführungszeichen steht):

    • “<!DOCTYPE html>”: Dieser Befehl zeigt deinem Programm an, dass es sich um ein HTML-Dokument handelt.
    • [einmal eingerückt] “<html lang=”de”>”: Hiermit beginnst du offiziell die HTML-Seite und definierst die Sprache der Website als Deutsch.
    • [nochmal eingerückt] “<head>”: Damit definierst du den ‘Kopf’ der Seite, den nur das Programm und nicht der Besucher deiner Seite sieht.
    • [nochmal eingerückt] “<meta charset=”utf-8″>”: Mithilfe dieses Befehls wird deinem Programm gesagt wie es die einzelnen Zeichen kodieren soll.
    • [darunter] “<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>”: Dieser Befehl führt dazu, dass deine Seite auch auf einem mobilen Endgerät wie Handy oder Tablet betrachtet werden kann.
    • [darunter] “<title>…</title>”: Hier kannst du anstatt der Punkte den Titel deiner Website festlegen, der in deinem Browser oben auf dem Tab geschrieben steht.
    • [darunter] “<link href=”style.css” rel=”stylesheet” type=”text/css”>”: Diese Anweisung wird später wichtig, wenn es ums CSS geht. Hierüber sagst du dem Programm, dass es die Datei “style.css” ansehen soll, wenn es wissen will, wie genau es aussehen soll. ACHTUNG! Pass auf dass du die Datei “style.css” niemals umbenenennst, oder wenn du sie umbenennst, auch in deinem Programm die Bezeichnung “style.css” durch den neuen Titel ersetzt. Auch auf das Verschieben der Datei “style.css” solltest du als Anfänger vorerst verzichten.
    • [darunter] “<link href=”pictures/…” rel=”icon” sizes=”64×64″>”: Wenn neben dem Titel deiner Website noch ein kleines Bildchen angezeigt werden soll, dann kannst du dieses in deinem zuvor erstellten Ordner “pictures” speichern und die drei Punkte in dem Befehl durch die Bezeichnung der Bilddatei ersetzen (mit Dateiendung). Achte am besten darauf, dass das Bild quadratisch ist, ansonsten wird es verzerrt dargestellt.
    • [eins zurück] “</head>”: Mit diesem Befehl schließt du das Strukturelement “Kopf” wieder.
    • [eins zurück] “</html>”: Diese Anweisung muss stets ganz unten am Ende in deinem Programm stehen, da sie die HTML-Seite abschließt und dem Computer sagt “hör hier auf weiterzulesen”. Alles was auf deiner Seite zu sehen sein soll muss also zwischen die Befehle </head> und </html>.

Wenn das jetzt zu kompliziert erklärt war, hier ein Foto, wie es aussehen sollte:


5. Inhalt der Seite definieren:

Und schon kannst du anfangen in die Seite hineinzuschreiben! Da zu jedem Skelett ein Körper gehört, beginne mit dem Befehl <body> unter </head>. Damit du nicht vergisst, den Befehl auch wieder abzuschließen, rate ich dir, auch gleich die Endung darunterzuschreiben. Etwa so:

Zwischen die Befehle <body> und </body> kannst du nun weitere Elemente einfügen. Lass uns einmal mit einer einfachen Überschrift anfangen. Diese schreibst du wie bereits zuvor erwähnt zwischen <h1> und </h1> eine Zeile unter <body> und um einen Tabstopp nach innen versetzt. Hier nochmal ein Bild zur Vereinfachung:

Vergiss nicht, zwischendurch oben links auf “File” > “Save” oder mit der Tastenkombination “Strg” und “s” zu speichern. Lass uns die Seite doch mal anschauen! Gehe wieder in den Dateimanager, klicke einmal links auf deine “index.html”-Datei und dann nochmal rechts. Gehe auf “Öffnen mit” und wähle deinen favorisierten Browser (z. B. Chrome, Firefox, Opera, Internetexplorer). Nun sollte sich deine HTML in einem neuen Tab öffnen. In Firefox sollte sie ungefähr so aussehen (es ist möglich, dass eine andere Schriftart verwendet wird):

Toll oder? Aber noch ein bisschen langweilig meiner Meinung nach… Um das Ganze ein bisschen aufzupeppen und deinem HTML-Skelett ein hübschen Aussehen zu verleihen kommt als nächstes CSS ins Spiel. Für heute war das aber erstmal genug, die Erklärung wie CSS funktioniert gibt’s morgen. Ich würde mich freuen, wenn du dann nochmal vorbeischaust!

Unter deine Überschrift kannst du nun Tabellen, Unterüberschriften, Texte usw. ganz nach deinem Belieben einfügen. Probier dich gerne aus so lange du auf den Beitrag zu CSS wartest!


6. Die nützlichsten Elemente für deine HTML-Seite:

Im folgenden siehst du ein paar Elemente, die man oft auf Websites findet. Das erste Bild zeigt die HTML, während du auf dem unteren die Darstellung im Browser sehen kannst.

 

1. Textblöcke: <p>Hier kommt ein Beispieltext rein</p>

 

2. Überschriften: <h1>erste Überschrift</h1>; <h2>zweite Überschrift</h2>; <h3>dritte Überschrift</h3>; <h4>vierte Überschrift</h4>; <h5>fünfte Überschrift</h5>; <h6>sechste Überschrift</h6>

 

 

3. Listen:

    • Liste mit Anstrichen (unsortierte Liste): <ul> (Anfang der Liste); <li>Text 1</li> (Listenelement 1); <li>Text 2</li> (Listenelement 2); …; </ul> (Ende der Liste)

 

    • Liste mit Zahlen (sortierte Liste): <ol> (Anfang der Liste); <li>Text 1</li> (Listenelement 1); <li>Text 2</li> (Listenelement 2); …; </ol> (Ende der Liste)

 

4. Tabellen: (Bei HTML-Tabellen geht man immer Zeilenweise vor um die Inhalte zu definieren) <table> (Anfang der Tabelle); <tr></tr> (Tabellenzeile); <th>Überschrift 1</th> (Tabellenkopfinhalt 1); <th>Überschrift 2</th> (Tabellenkopfinhalt 2); <td>Inhalt 1</td> (Tabellenfeldinhalt 1); <td>Inhalt 2</td> (Tabellenfeldinhalt 2); </table> (Ende der Tabelle)


Ich denke das war erstmal genug für heute, wenn du noch mehr über HTML lernen möchtest, dann kann ich dir folgende Seiten empfehlen:

Hat dir diese Seite geholfen? Dann würden wir uns über einen netten Kommentar freuen!

Hallo! Mein Name ist Olivia und ich habe dieses Jahr die Leitung der Schülerzeitung Apropos übernommen. In meinen Artikeln widme ich mich vorrangig Themen rund um den Fernöstlichen Raum, aktuelle News und Schulhilfen. Außerdem teile ich gerne meine Begeisterung für's Kochen und Backen hier und versorge euch mit Rezepten und anderen Foodie-Infos.

Leave a Reply

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.