type

Eine Webseite zu erstellen, geschieht primär durch das Schreiben von Text. Wir schreiben die Inhalte in eine Datei und nutzen HTML – Hyper Text Markup Language – um diese Inhalte entsprechend ihrer Bedeutung zu strukturieren. Dafür verwenden wir „Tags“. Mit diesen Tags können wir beispielsweise Überschriften, Absätze, Links, Listen usw. auszeichnen und Bilder oder Videos einfügen:

<h1>Ich bin die wichtigste Überschrift</h1>

<p>Ich bin ein Absatz.</p>

In diesem Beispiel steht h1 für die wichtigste Überschrift (heading 1) und p für einen Absatz (Paragraph).

Eigentlich wird HTML nur dazu verwendet, den Inhalt zu strukturieren und um Inhalte einzubetten. Das Aussehen einer Seite wird mit der Sprache CSS – Cascading Style Sheets – beschrieben. Wir wollen jedoch zwei Tags verwenden, mit denen wir auch gestalten können (obwohl diese beiden Tags selten genutzt oder gar obsolet sind):

pre (preformatted Text)
zeigt Text genau so an, wie er eingetippt wurde, inkl. Leerzeichen und Zeilenumbrüchen; wird überlicherweise verwendet, um Code darzustellen
marquee
Lauftext; eigentlich obsolet, macht aber immer noch Spaß

   #    #     # #######  #####     #    ######  ####### 
  # #   #     # #       #     #   # #   #     # #       
 #   #  #     # #       #        #   #  #     # #       
#     # #     # #####   #  #### #     # ######  #####   
####### #     # #       #     # ####### #     # #       
#     # #     # #       #     # #     # #     # #       
#     #  #####  #        #####  #     # ######  #######

Erstellt in Zweierteams mindestens zwei animierte ASCII-Art-Webseiten/-Kompositionen, in dem ihr das pre- und das marquee-Tag kombiniert.

Wechselt nach jeder Webseite/Komposition die Rolle (wer sitzt an der Tastatur)

Verwendet bei den ersten beiden kein fremndes/gefundenes Material.

Vorbereitung

Legt auf Codepen einen Account an
Erstellt ein neues Pen
Gebt eurem Pen einen Namen (oben links, Stiftsymbol)
Speichert das Pen ab

ASCII

Wikipedia: ASCII Art
Sofia Guidis Sammlung auf Are.na
Google Bildersuche zu Ruth Wolf Rehfeldt
A very sheep game von Adel Faure
Your World Of Text (Einfach etwas an die URL anhängen, um eine neue „World“ zu starten oder eine schon existierende World zu finden)

<marquee> Beispiele

<pre> Beispiele

Einfaches Beispiel

<pre> + <marquee> Beispiele

=> marquee & pre
=> marquee & pre 2

¯(°_o)/¯