Mit CSS < li > in einer Zeile mittig ausrichten

Zur Erstellung von Menüs wird fast immer die <ul><li> Aufzählung in HTML verwendet. Damit dan das Ganze in einer Zeile bekommt und auf der Seite in der Mitte zentriert ist, kann man folgendes Beispiel verwenden. Mit CSS < li > in einer Zeile mittig ausrichten weiterlesen

CSS DIV in die Mitte stellen

In fast jedem Layout einer Webseite gibt es das wrapper DIV. Der Wrapper kommt aus den Englischen und bedeutet Verpackung oder Hülle. Man darf dieses DIV natürlich nennen wie man möchte. Es hat sich jedoch in fast jedem Layout der Name wrapper etabliert.

Dieses <div> sorgt dafür, das der DIV Container in der Mitte von der Webseite erscheint. CSS DIV in die Mitte stellen weiterlesen

CSS Datei in HTML Dokument einbinden

Bei der Webprogrammirung werden die, für das Aussehen verantwortliche Dateien oft über CSS formatiert. Dies sind die Stylescheets.

Das Stylescheet, die CSS Datei mit den Formatierungen wird in die HTML oder PHP Datei im Bereich <head> </head> (Kopfbereich) eingebunden. CSS Datei in HTML Dokument einbinden weiterlesen

HTML Teil 21 HTML Responsive Webseiten

Responsive Webseiten sind Webseiten, die für verschiedene Anzeigegeräte optimiert werden. Für einen Computer, für ein Smartphone, Für ein Tablet und für normale Telefone.
Alle diese Geräte verwenden verschiedene Bildschirm- Auflösungen und somit muss man für jedes Gerät ein eigenes Layout erstellen, bzw das Layout so erstellen, dass sich dieses automatisch an alle Größen anpassen kann.

Einfaches Beispiel:
Hier werden die DIV Container auf eine Größe von 300px mal 300px eingestellt. Der Browser zeigt so viele DIV Container nebeneinander an, wie möglich. Reicht der Platz nicht mehr, so wird da nächste nach unten Verschoben. HTML Teil 21 HTML Responsive Webseiten weiterlesen

HTML Teil 20 HTML Block

Ein <div> </div> erstellt einen Block / Container. Jede Webseite wird ins solche Blöcke eingeteilt.

Üblicherweise werden die <div> Container im CSS oder <style> formatiert. So kann man den <div> Container eine eigene Klasse (class=““) zuweisen. HTML Teil 20 HTML Block

Container

weiterlesen

HTML Teil 18 Anleitung HTML Tabellen

Um eine HTML Tabelle zu erstellen gibt es diese Tags:

<table> </table> Erstellt den Rahmen der Tabelle außen.
<tr> </tr> Erstellt ein Zeile in der Tabelle.
<td> </td> Erstellt eine Spalte in der Tabelle.
<th> </th> rstellt die Überschrift einer Spalte.
<caption> </caption> Erstellt eine Überschrift für die Tabelle.

Aufteilung der Tabelle in 3 Bereiche.

Man kann eine Tabelle auch in drei Teile, Kopf <thead>, Hauptbereich <tbody> und eine Fußzeile <tfoot> im <table> Tag aufteilen. Die Reihenfolge im Code ist egal, es wird immer in der Reihe 1 <thead> 2 <tbody> 3 <tfoot> angezeigt. HTML Teil 18 Anleitung HTML Tabellen weiterlesen

HTML Teil 17 Anleitung HTML Bilder (Images)

HTML Bilder werden mit dem Tag <img> eingefügt.

Die <img> Attribute:

src= Ist der Verweis zum Bild
alt= Beschreibung des Bildes (wird von Sreen Readers vorgelesen)
style= Hier wird die Größe und Position des Bildes definiert.
Man kann die Größe auch ohne dem Attribut style angeben. (Ist aber nicht empfohlen) HTML Teil 17 Anleitung HTML Bilder (Images) weiterlesen

HTML Teil 16 Anleitung HTML Links

Links werden mit dem <a> tag erstellt.

Die CSS Formatierung für die HTML Links

Dazu gibt es 4 Syles:
link = Farbe des Links.
visited = Farbe eines Links, der schon besucht wurde.
hover = Farbe des Links, wenn man mit der Maus darüber fährt.
active = Die Farbe, wenn man auf den Link klickt. HTML Teil 16 Anleitung HTML Links weiterlesen