Archiv der Kategorie: HTML/CSS

HTML Grundgerüst / HTML-Escape-Sequenzen

HTML Übersicht

Grundsätzlicher Aufbau einer HTML Datei:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Grundlagen - Titel der Seite</title>
    <meta charset="ISO-8859-1">
    <meta name="description" content="Diese Webpage behandelt...">
    <meta name="author" content="Wolfgang Goethe">
    <meta name="keywords" content="Werther,Glocke,Poet">
  </head>
  <body>
    <h1>Überschrift Eins</h1>
    <h2>Unter-Überschrift</h2>
    <article>
      <p>Phrase, Satz oder wie man es sonst so nennen mag.</p>
      <p><strong>Fettschrift</strong> gibt es auch und <i>kursiv</i> auch.</p>
      <p>Es gibt noch jede Menge weiterer HTML Auszeichnungen.</p>
      <p>Mehr unter <a href="https://wiki.selfhtml.org/">selfhtml.org</a>.</p>
    </article>
  </body>
</html>

Bild mit Link

<a href="link/zu/einer/seite.html"><img src="/link/zum/bild.jpg" width="120" />

Definitionsliste

<dl>
  <dt>Begriff Eins</dt>
  <dd>Erläuterung zum Begriff Eins</dd>
  <dt>Begriff Zwei</dt>
  <dd>Erläuterung zum Begriff Zwei</dd>
  ...
</dl>
Begriff Eins
Erläuterung zum Begriff Eins
Begriff Zwei
Erläuterung zum Begriff Zwei

Tabelle

<table border="1">
  <thead>
    <tr>
      <td>Kopfzeile-Spalte1</td>
      <td>Kopfzeile-Spalte2</td>
      <td>Kopfzeile-Spalte3/td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Reihe1-Spalte1</td>
      <td>Reihe1-Spalte2</td>
      <td>Reihe1-Spalte3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Fusszeile-Spalte1</td>
      <td>Fusszeile-Spalte2</td>
      <td>Fusszeile-Spalte3</td>
    </tr>
  </tfoot>
</table>
Kopfzeile-Spalte1 Kopfzeile-Spalte2 Kopfzeile-Spalte3/td>
Reihe1-Spalte1 Reihe1-Spalte2 Reihe1-Spalte3
Fusszeile-Spalte1 Fusszeile-Spalte2 Fusszeile-Spalte3

Listen

ordered list – Nummerierte Liste

<ol>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
</ol>
  1. Erster Punkt
  2. Zweiter Punkt

unordered list – Punkte-Liste

<ul>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
</ul>
  • Erster Punkt
  • Zweiter Punkt

Geschachtelte Liste

<ol>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
  <ul>
    <li>Erster Unter-Punkt</li>
    <li>Zweiter Unter-Punkt</li>
  </ul>
</ol>
  1. Erster Punkt
    • Erster Unter-Punkt
    • Zweiter Unter-Punkt
  2. Zweiter Punkt

Häufig verwendete Escape-Sequenzen bzw . Entitäten:

escape

 

HTML/CSS / Sprachen-Überblick

Sprachen

Auszeichnungs-Sprachen

Mit Auszeichnungs-Sprachen, engl. Markup Languages (ML) werden Dokument-Elemente gekennzeichnet. Zum Beispiel in HTML wird eine Überschrift mit h1 gekennzeichnet, ein Satz oder Absatz mit p, usw. Dadurch können diese Elemente von entsprechenden Interpretern, wie Browser oder Vorlesegeräte usw. gemäß ihrer Bedeutung behandelt werden. Zum Beispiel wird im Browser eine Überschrift größer dargestellt als Fließtext. Ein fettes Wort kann vom Vorleseapparat besonders betont werden.

Beispiele für ML sind:

  • XML
  • HTML
    Der Standard im Web; wird ergänzt durch CSS, Java-Script und andere.
  • VRML
  • SGML (ursprüngliche Sprache aus den 1960ern)
    sehr kompliziert, wird verwendet zur technischen Dokumentation.

Script-Sprachen

Script-Sprachen brauchen einen Interpreter.

  • Java-Script
    • ist eine ECMA-Sprache (wie bspw. auch Actionscipt aus dem Flash Bereich)
  • Powershell (MicroSoft)

Programmiersprachen

Damit kann man ‚alles‘ machen: auf die Hardware zugreifen, ein Betriebssystem programmieren jegliche Art von Software programmieren. Beispiele:

  • C
  • C++
  • C#
  • Pascal
  • Basic
  • Java

Programmiersprachen werden kompiliert, also in die Maschinensprache übersetzt. Damit werden sie sehr schnell. Java jedoch wird in Bytecode übersetzt und benötigt zur Ausführung die JVM – Java Virtual Machine. Dies ist eine Laufzeitumgebung, welche für viele Betriebssysteme (OS) zur Verfügung gestellt wird. Dadurch muss eine Java-Programm nicht auf ein spezifisches OS angepasst werden. Nachteil gegenüber maschinenlesbarer Programme ist aber eine weniger performante Ausführung.

Autorenssteme

Diese sind nicht mehr sehr verbreitet.

Beispiele:

  • Director
  • Dreamweaver

Game-Engines

Stellen eine sogenannte physikalische Umgebung zur Verfügung in der bestimmte Regeln gelten. Man kann dadurch wesentlich schneller Spielewelten kreieren und sich auf die eigentliche Spielelokig konzentrieren.

  • Unreal-Engine
  • Unity

Visuelle Programmiersprachen

In Schulen und im Medienbereich verbreitet