Artikelformat

Webdesign für Anfänger: Grundlagen & Grundgerüst unserer Seite

HTML ist keine Programmiersprache. Du kannst damit keine interaktiven Programme (Gästebuch, Abstimmungen etc.) oder dynamische Websites (z. b. Uhrzeit) erstellen. Dafür benötigst du eine Script-Sprache wie PHP. Aber ohne HTML nützt dir auch PHP nichts, denn PHP kann das nicht, was HTML kann und umgekehrt

PHP Scripte werden von einem Webserver ausgeführt und generieren letztendlich HTML Code, der dann an den Browser geschickt wird. Soviel dazu, aber in dieser Tutorialreihe geht es um HTML für absolute Einsteiger. Dazu jetzt einige Grundlagen:

  • Eine HTML Seite besteht immer aus zwei Dateien. Der .html und der .css Datei.
  • In der .html steht nur der Inhalt der Seite.
  • In der .css wird beschrieben, wie der Inhalt aussehen soll.
  • Diese beiden Dateien kannst du problemlos mit jedem beliebigen Texteditor bearbeiten.
  • Für etwas mehr Komfort empfehle ich spezielle Software. Ich verwende dazu Scriptly.

Für unser Design erstelle ich in einem Ordner jetzt die Dateien index.html und style.css.
Die style.css bleibt heute leer, aber in der index.html können wir schon mal das Grundgerüst zusammenbasteln.

Erklärung:

  • <!DOCTYPE html> – Teilt dem Browser den Dateityp mit
  • <html> – Öffnet den HTML-Tag (Die komplette Seite)
  • <head> – Öffnet den Head-Tag (Infos über die Website)
  • <title>Max Musterman – Die offizielle Seite</title> – Der <title> wird oben im Browser und in Google angezeigt.
  • <link rel=“stylesheet“ type=“text/css“ href=“style.css“ /> – Bindet unsere style.css Datei ein.
  • </head> – Schließt den Head-Tag wieder
  • <body> – Öffnet den Body-Tag (Das, was dann wirklich auf der Seite zu sehen ist)
  • </body> – Schließt den Body-Tag
  • </html> – Schließt den HTML-Tag und damit den HTML-Code

Die Datei besteht hauptsächlich aus zwei Elementen: Dem <head> und dem <body>.
Im Head stehen wichtige Informationen über die Seite, die aber nicht zu sehen sind.
Und im Body steht logischerweise das, wes man dann auch auf der Website sehen kann.

Tags:

<head>, <body>, <html> etc. sind sogenannte HTML-Tags. Ein Tag wird im Normalfall mit dem Tag (z. b. <html>) geöffnet, und mit SLASH-Tag (z. b. </html>) wieder geschlossen. Alles was zwischen dem Anfangs-Tag und dem End-Tag steht, steht innerhalb dieses Tags (Das wird später beim Design eine Rolle spielen).

Der <link /> Tag hat dabei die Besonderheit, dass er nicht aus einem Anfangs- und einem End-Tag besteht, sondern alle Informationen direkt im Tag untergebracht werden. Er wird dann einfach mit /> geschlossen. Das wird uns später auch bei Bildern wieder begegnen.

Weiter geht´s mit unserem Layout.

Bewerte diesen Artikel
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne

14 Bewertung(en), durchschnittlich: 5,00 von 5

Loading...

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.