Grundgerüste

Ein Kommentar / html, Informatik / Von /

Die meisten Dateien, die „programme“ oder „Webseiten“ darstellen, sind nichts anderes als Textdateien. Sie können mit jedem beliebigen Texteditor bearbeitet werden. Damit Browser und andere verarbeitende Software erkennt, um was für eine Art von Datei es sich handelt, nutzt man zum einen die Dateiendung, viel wichtiger aber ein standardisiertes Grundgerüst, an dem alle wichtigen Daten erkennbar sind.

Wichtige Dateien, mit denen ich für Web-Projekte arbeite, sind html-Dateien, css-Dateien und php-Dateien. (Im großen und ganzen sind dies die Hauptseiten, die Dateien, die das Aussehen bestimmen und Dateien, die Aktionen und Interaktionen händeln.)

Das Grundgerüst einer html-Seite
Code Erklärung 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" 
     content="width=device-width, 
     initial-scale=1.0" />
    <title>Titel</title>
  </head>
  <body>

  </body>
</html>
 Der Typ des Domumentes ist hmtl.
Das html-Dokument ist auf Deutsch.
Im Head werden wichtige Metadaten und Hinweise gespeichert. Er wird als erstes ausgelesen.
Das Set an Zeichen wird gesetzt.
Viewport ist eine Einstellung, die die Anzeige auf Mobilgeräten optimieren kann.
Der Titel erscheint zB oben im Browsertab.
Im Body steht der eigentliche Inhalt.


Zum Schluss wird das Dokument geschlossen.
Eine css-Datei

Eine css-Datei beinhaltet alle Anweisungen, wie bestimmte Elemente zu formatieren sind. Man bindet die Datei im head der zugehörigen html-Dateien ein:

<link rel="stylesheet" href="stylesheet.css">

Dabei bedeutet das rel-Attribut, dass hier ein Sytlesheet-Link eingebunden wird. Das href-Attribut muss den Pfad zur css-Datei beinhalten. Die css-Datei selber hat anders als die html-Datei keinen einleitenden Doctype oder einen head, sie fasst einfach Blöcke (sogenannte Regelsätze) zusammen.

Anweisungen können dabei das Format @… „..“; haben, zum Beispiel @charset „ISO-8859-1“; (Man beachte das Semikon, das ist wichtig!) Üblicherweise ist es aber eher so, dass der Name des zu formatierenden Elements genannt wird und dann in geschweiften Klammern die gewünschten Eigenschaften angegeben werden, z.B.

h1 {   color: red; }
Es können vorne mehrere Elementnamen stehen (auch selbst definierte) und es können auch viele verschiedene Eigenschaften in den geschweiften Klammern stehen.
Eine php-Datei
Php besteht aus verschiedenen Einzeltzeilen. Die Dateien beginnen mit <?php , danach wird direkt „losgelegt“.
Oft ist es so, dass man in einer Datei eine bestimmte Funktion definiert und beschreibt, die dann von anderen Programmteilen (also Dateien) aufgerufen werden.
Die Synatx von php legt fest, dass $name eine Variable darstellt. Befehle enden immer mit einem Semikolon. Es gibt feste Klassen von Funktionen, die manchmal auch über externe Bibliotheken eingebunden werden, man muss also viele Funktionen gar nicht mehr selber schreiben.

Php-Dateien haben kein festgesetzten End-Befehl, aber man kann php und html mischen. (Das ist für Anfänger ok, aber nicht so ganz sauber.) Wenn man mischt und mit html anfängt, dann beginnt man den php Block mit <?php und beendet ihn mit ?> . Möchte man im php-code html aufrufen (weil Zum Beispiel eine html-Tabelle aufgebaut werden soll), nutzt man den php-Befehl

 echo "html-code";

zum Einfügen.

1 Kommentar zu „Grundgerüste“

  1. Marina

    Ergänzung zu php:
    Der Echo-Befehl nutzt doppelte Anführungszeichen. Dann kann in dem html- oder css-Code nicht wieder „“ benutzt werden. z.B.
    echo "<a href="google.de" rel="nofollow ugc"> Link </a >"
    wird nicht funktionieren. Man weicht dann innen auf einfache Anführungszeichen (Windows-Tastatur neben der Raute) aus:
    echo " <a href="google.de" rel="nofollow ugc"> Link </a >"

Kommentar verfassen