Website - HTML und PHP

- - - - HTML - - - -


Inhalt


Hinweis :

In diesem Guide findest du alles mögliche was ich zum Thema HTML weiß. Jede Website im Internet basiert auf der Hypertext Markup Language. HTML ist leicht zu lernen / verstehen, also setzt dich doch einfach gleich ran. :) Übrigens, ich versuche die Überschriften und Verlinkungen für Anfänger verständlich zu machen, also "Box und Text" anstatt "Div-Tag".

Protipp :

Halte deinen Code sauber!! Als Beispiel kannst du dir gerne den Code meiner Website angucken (rechtsklick -> Seitenquelltext anzeigen). Scroll einfach mal durch, du wirst sehen, dass ich ein Element das in einem anderen beginnt (z.B. der Body in HTML oder Elemente im Body) mit der Tabulator Taste nach rechts verschoben habe und Platz zwischen nicht zusammenhängenden neuen Elementen gelassen habe. Dies hilft mir Elemente in meinem Code schnell zu finden, falls ich z.B. etwas daran ändern will.


Grundgerüst

So sollte eine HTML Seite aufgebaut sein, diesen Aufbau findet man normalerweise auf jeder Seite. Ich habe in den Header die Menüleiste (das dunkle oben auf meiner Seite und im Footer habe ich die dunkle Linksleiste unten.



Import Style.css

Hiermit kannst du dein Stylesheet mit der Seite verbinden, füge diese Datei im Head Element ein. Sobald du den Stylesheet mit der Website verknüpfst sucht er dort nach den Klassen und IDs die du auf deiner Seite angegeben hast.

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


Seitentitel

Der Seitentitel wird einerseits auf sämtlichen Suchmaschienen groß und als Überschrift angezeigt, aber auch in der Seitenleiste deines Browsers (sowie in Einblendungen wie z.B. bei Discord). Für öffentliche Seiten unverzichtbar!

<title> Der neuste Titel des Tages </title>


Beschreibung

Die Beschreibung ist wie der Titel für öffentliche Seiten ein muss. Sie wird nicht nur in der Suchmaschiene sondern auch bei einblendungen wie auf Discord angezeigt (wenn vorhanden). Gebe hier eine nicht all zu lange Auskunft über den Seiteinhalt.

<meta name="description" content="Beschreibung und ihre wichtigkeit...">


Keywords / Schlüsselwörter

Die Keywords sind für eine Suchmaschiene nicht gerade wenig von bedeutung. Auch hier geht eine Empfehlung raus an jeden öffentlichen Seitenbesitzer der gefunden werden will. Sehen tut man Keywords nicht.

<meta name="keywords" content="html,website,superduperdeftigheftigwichtig">


Zeichencodierung

Damit alle Buchstaben oder Zeichen richtig angezeigt werden musst du verdeutlichen welche Codierungsart du nutzen willst. Im deutschen Raum ist es oft utf-8.

<meta charset="utf-8">


Sprachenangabe

Mithilfe der Sprachangabe im html-Tag kannst du deine Seite für die Suchmaschiene optimieren. Einen anderen Einfluss hat es nicht.

<html lang="de">


Absatz und Abstand

Den br-Tag benutzt wird für Zeilenumbrüche oder um Abstände zwischen Elementen herzustellen. Zum Teil muss man auch (wie zum Beispiel in P-Tags) ein Leerzeichen und dann "/" benutzen um den br-Tag nutzen zu können.

<br>
<br />


Zentrieren

Den Center Tag benutzt man um z.B. eine große Menge an Elementen alle in die Mitte zu verschieben, dies ist ein leichter und unkomplizierter Weg. Ansonsten muss man styles / klassen / id's (evtl .css) benutzen.

<center> Irgendwelche Elemente </center>


- Unter der Anzeige gehts weiter -

Text und Box

Divs kannst du zum schreiben von Text aber auch (hauptsächlich) zum erstellen von Boxen benutzen. Ein Beispiel dafür ist die Hinweis Box ganz oben auf der Seite, damit habe ich z.B. den Hintergrund definiert.

<div> Deine Elemente / Text </div>


Nur Text (mit Absatz)

Mit dem P-Tag kanst du alles mögliche schreiben, ich benutze bis auf die Überschrift und die Links den nur den P-Tag.

<p> Dein Text </p>


Section Tag

Den Section Tag benutzt du um mit Verlinkungen auf bestimmte Elemente der Seite zu verweisen, sodass ein bestimmte Bereich gleich angezeigt wird. Dies ist nützlich wenn du z.B. auf einen Text weit unten verweisen willst der nicht leicht zu finden ist oder bei dem man lange scroll muss.

<section id="beispiel"> </section>


Span Tag

Den Span Tag benutzt man um bestimmte Wörter im Text zu verändern. Im unten gegebene Beispiel würde das Wort "grün" jetzt die Farbe Grün haben. Dies kann sehr hilfreich sein wenn man bestimmte Wörter hervorheben möchte und seine Texte schöner gestalten will.

<p> Ich bin <span style="color: green;"> grün </span> </p>


Weiterleitung

Um auf eine Seite weiterzuleiten benutze einen Meta-Tag im Head deiner Seite. Die Zahl 3 steht in diesem Fall dafür, dass die Weiterleitung nach 3 Sekunden erfolgt. Ich empfehle auch einen kleinen Text mit verlinkung zum Ziel zu erstellen, damit Leute bei denen es nicht geht auch auf die Zielseite gelangen.

<meta http-equiv="refresh" content="3; URL=https://www.beispiel.de">



- Unter der Anzeige gehts weiter -

- - - - PHP - - - -


Inhalt


Hinweis :

Achtung! Dein Browser weiß nicht was PHP ist, dementsprechend brauchst du einen Server damit dein PHP angezeigt wird. Zum Beispiel localhost/datei.php (ein kostenloses Programm wäre xampp). Falls du also deine Codes angezeigt bekommst hast du wahrscheinlich die Datei einfach so geöffnet (z.B. bei Notepad++ "mit Firefox öffnen").

So benutzt du PHP :

<?php
Dein Code
?>

PHP kannst du einfach in HTML einbinden, dass heißt in einer PHP Datei funktionieren die HTML Befehle auch.


Echo

Echo benutzt du um alles mögliche auf deine Website auszugeben, dies kann sowohl eine Variable als auch ein Text oder ein Links sein.

echo "Text oder $variable";







Es ist was falsch? Bitte E-Mail an: service@kilihd.de !

Letztes Update: 24.05.2019 (17:34 Uhr)