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

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 14 Anleitung HTML Styles

HTML Styles – CSS – Aussehen Stil

Es gibt 3 Möglichkeiten, um HTML Code mit einem Style zu versehen.

  1. Mit einem style Attribute im HTML Element.

    (Inline CSS)Der Style gilt nur für das eine Element.
  2. Mit dem Tag <style>…</style> im <head> </head> Bereich z.B.

    Dadurch wird der style auf alle HTML Elemente im Dokument angewendet.( Internal CSS)
  3. Durch das Einbinden einer externen CSS Datei mit dem Tag <link> im <head> </head> Bereich des Dokuments z.B.

    Auch hier wird der style auf alle HTML Elemente im Dokument angewendet. (External CSS)

HTML Teil 13 Anleitung HTML Kommentare

HTML Comment Tags für Kommentare

Wenn man etwas in den HTML Code einfügen will, das jedoch nicht angezeigt werden soll, so verwendet man den Comment Tag.

Auch wenn mehrer Zeilen zwischen den Pfeilen sind, werden diese nicht angezeigt!
Dies kann man auch verwenden, um Code auszublenden.

HTML Teil 8 Anleitung
 Element

HTML <pre> Element Vorformatierter Text

Wenn man Text in ein HTML Dokument schreibt, so werden keine Zeilenumbrüche oder auch zusätzliche Leerzeichen angezeigt, wenn man dafür nicht spezielle Tags und Codes verwendet. Es steht immer in einer Wurst.
Ausgenommen ist hier der <pre>….</pre> Tag.
Die Formatierung wird in diesem Fall direkt übernommen. HTML Teil 8 Anleitung

 Element

weiterlesen

HTML Teil 5 Anleitung – HTML Absatz (Paragraphs) Links und Bilder (Images)

Der Absatz (Paragraphs) ist in jedem HTML Dokument mehrmals enthalten. So wie bei jedem Dokument entsteht ein Absatz beim drücken der Enter Taste. Im HTML Code wird dieser Absatz mit
<p> eingeleitet und mit </p> wird der Absatz wieder beendet.

Beispiel Absatz (Paragraphs):

Ausgabe:
Mein erster Absatz.
Mein zweiter Absatz.

 

HTML Links einfügen mit dem Tag <a> und dem Attribut href

In jeder Webseite findet man verschiedene Links. Es gibt interne Links zu einer anderen Seite, welche ein anderes Dokument anzeigen oder auch zu einer anderen Webseite führen.
Eingeleitet werden Links mit dem <a> Tag und dem zusätzlichen Attribute href.

Beispiel HTML Link:

Ausgabe:
Mein erster Link

HTML Bilder (Images) hinzufügen

Auf einer Webseite werden meist auch sehr viele Bilder angezeigt. Um im HTML Code Bilder hinzuzufügen, verwendet man den Tag <img> mit dem Attribut src.
Das Attribute src gibt an, wo das Bild liegt.
Zusätzlich benötigt man das Attribute width (für Breite) und height (für Höhe) des Bildes in Pixel.
Meist wird auch noch das Attribut alt eingefügt. Dies ist ein Text, welcher angezeigt wird, wenn das Bild nicht angezeigt werden kann.

Beispiel HTML Bilder:

 

HTML Teil 2 Anleitung –

Was findet man im Kopfbereich einer HTML Seite – im <head> </head> Bereich.

<head> Hier stehen Informationen zum Dokument
<title> Gibt den Titel der Webseite an. Wird selbst nicht angezeigt, steht aber im Browser ganz oben.
<base> Gibt die Basisadresse der Webseite an
<link> Hier wird z.B auf eine CSS Datei verlinkt.
<meta> Hier werden verschiedene Informationen eingefügt wie:Beschreibung, Autor, Sprache der Seite..
<script> Hier kann man einen JavaScripts Code einfügen.
<style> Hier kann den Style (Ausssehen der Webseite) definieren.