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 19 HTML Aufzählungen / Listen

Es gibt 2 Arten von Listen: Gerordnete und Ungeordnete.

  • Ungeordnete
  • Punkt
  1. Gerordnete
  2. Punkt

 

 

Aufzählungssymbole Ungerordnete Liste: HTML Teil 19 HTML Aufzählungen / Listen 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

HTML Teil 15 Anleitung CSS Fonts (Schriften) und Boxes (Schachteln)

Für Schriften gib es 3 Style Möglichkeiten (CSS Fonts)
color = Farbe der Schrift
font-family = Schriftart
font-size = Schriftgröße

Im CSS style werden diese dann so geschrieben:
Beispiel für Überschrift h1 un p Absatz

CSS Box –Schachteln / Rahmen

HTML Teil 15 Anleitung CSS Fonts (Schriften) und Boxes (Schachteln) 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 12 Anleitung HTML Computer Code

Wenn man Computer Code auf eine Webseite darstellen möchte, so soll dieser nicht durch die HTML Ausgabe verändert werden. Damit das nicht geschieht, gibt es einige HTML Tags.
Die HTML Tags sind:
HTML <kbd>..</kbd> Tastatur eingabe
HTML <samp>..</samp> Computer Ausgabe
HTML <code>..</code> Computer Programmcode
Zeilenumbrüche und Leerzeichen werden ignoriert. Möchte man auch die Formatierung übernehmen, muss man zusätzlich ein <pre>
einfügen.