html-projekt-7

Entdecke die Welt der Webseiten!

HTMLganz einfach

Los gehts!

HTML-Intro

Links erstellen

Bilder einfügen

HTML-Tools

Grund-funktionen

Aufgabe 1: Steckbrief

Text bearbeiten

Aufgabe 2: Wiki

Start

HTML-Intro

Was HTML eigentlich ist ...

... und wozu es gut ist:

HTML steht für HyperText Markup Language. Es ist also eine Sprache (language), die durch sogenannte Auszeichnungen (markup) einen digitalen Text mit weiteren Informationen (hypertext) ausschmückt. Zu diesen weiteren Informationen gehören hauptsächlich Verweise (Links) auf andere digitale Texte und Seiten oder Medien wie Bilder. Die Sprache besteht aus Tags, die in spitzen Klammern vor und hinter den Text geschrieben werden, der verändert oder beschrieben werden soll. Ein Beispiel: <a href="name.html">Hier drauf klicken!</a> Im Webbrowser wird dann ein Text "Hier drauf klicken!" angezeigt, den man anklicken kann, um auf eine andere Seite mit dem Namen "name.html" zu kommen. Vor und nach dem Text erkennst du die Tags in den spitzen Klammern. Außerdem kann man mit HTML einen Text auch ganz grundlegend formatieren, also das Aussehen verändern. Moderne Webseiten verwenden dafür aber in der Regel nicht HTML, sondern sogenannte Stylesheets.

Das ganze Internet besteht im Grunde aus undenkbar vielen Multimediadateien: Kombinationen aus Texten und Bildern, Audios oder Videos. Diese sind jeweils auf Computern (Servern) gespeichert und von anderen Computern oder ähnlichen Geräten aus abrufbar. Die einzelnen Dateien oder Seiten findet man in der Regel, indem man einen Link anklickt. Auch die Ergebnisse einer Suchmaschinensuche sind ja nur eine lange Liste von Vorschlägen, wo man die gesuchten Inhalte finden könnte! Diese Links sind also das Wichtigste, was HTML zu bieten hat. Sie helfen uns außerdem beim Einfügen von Bildern oder Videos. Außerdem legen wir beim Erstellen der HTML-Datei fest, welche Struktur unser Text hat, ob es also Überschriften, Absätze, Leerzeilen oder Stichpunkte darin gibt. Auch das grundlegende Aussehen des Textes und der Bilder können wir in HTML beschreiben, aber bei größeren Webseiten wäre das zu viel Arbeit und zu viel Code. Daher verwendet man hierfür CSS, Cascading Style Sheets. Wenn es dich interessiert, findest du bei der Textgestaltung weitere Informationen dazu!

Womit arbeiten wir?

Programme ...

... und ein Online-Editor:

Das Schöne an HTML ist, dass es ja einfach nur ganz normaler Text mit ein paar Extra-Angaben ist. Daher reicht das simpelste Textprogramm, das ein Computer bieten kann, schon aus, um komplette Webseiten zu gestalten. In Windows ist das zum Beispiel "Notepad", für macOS "TextEdit". Die haben nur einen Nachteil - man sieht nicht sofort, wie es dann "in echt" aussieht, sondern muss erst die HTML-Datei speichern und sie in einem Webbrowser wie Chrome, Firefox, Edge oder Safari wieder öffnen. Daher arbeiten wir mit dem Programm "KompoZer": Hier siehst du mit einem Klick, wie der Computer deinen HTML-Code "übersetzt" und wie deine Webseite dann aussieht. Man nennt diese Programme auch "WYSIWYG-Editoren": What you see is what you get! Wenn du lieber am Tablet arbeitest, findest du in der Zusatzinfo einen Online-HTML-Editor, den du im Browser benutzen kannst.

HTML-Grundfunktionen

Das Schachtelprinzip

Die HTML-Datei

HTML-Tags

HTML-Code ist immer nach dem gleichen Schema aufgebaut. Ein Prinzip ist dabei besonders wichtig: SCHACHTELN. Die meisten HTML-Tags stehen vor UND hinter dem Text. Man nennt sie deswegen auch Container-Tags, denn sie "beinhalten" den Text, den sie näher beschreiben. Wenn mehrere Tags zusammenkommen, schachtelt man sie ebenfalls. Genauso wie eine kleine Schachtel in einer größeren Schachtel in einer noch größeren Schachtel Platz hat, genauso wie Matrjoschka-Puppen ineinander gestapelt werden oder die Klammern in der Mathematik - innen die runden, dann die eckigen, außen die geschweiften. <u>unterstrichen</u> --> unterstrichen <i>schräggedruckt</i> --> schräggedruckt In Kombination: <u><i>schrägunterstrichen</i></u> oder <i><u>unterstrichenschräg</u></i> --> schrägunterstrichen oder unterstrichenschräg

Eine HTML-Datei besteht aus drei Teilen: Der HTML-Tag sagt dem Browser, dass diese Datei HTML-Informationen enthält. Geht auch ohne, aber manchmal sind Computer nicht sonderlich intelligent ... Wenn wir bei dem Bild mit den Schachteln bleiben, enthält die HTML-Schachtel zwei kleinere Schachteln, die nebeneinander drinliegen: HEAD und BODY. Der Head-Tag enthält Informationen ÜBER die Seite. Dazu gehört zum Beispiel der Titel der Seite, der oben in den Browserfenstern oder Tabs angezeigt wird. Der Body-Tag enthält den eigentlichen Text (und die anderen Medien) der Seite. Probiers mal aus und kopiere diesen Mini-HTML-Teil in KompoZer! <html> <head> <title>Meine erste Webseite</title> </head> <body> <h1>Die Überschrift</h1> <p>... und normaler Text!</p> </body> </html>

Du erinnerst dich, dass die meisten HTML-Tags vor UND hinter dem Text stehen: <h3>Überschrift</h3> --> Überschrift Bestimmt siehst du auch den kleinen Unterschied: der Schlusstag wird immer mit einem Schrägstrich / markiert. Im vorderen Tag ist außerdem noch Platz für weitere Angaben, sogenannte "Attribute". Dazu später mehr, hier nur ein kleines Beispiel: <h3 style="color:green;">Überschrift</h3> Hier wird nicht nur beschrieben, dass es die drittgrößte Überschrift sein soll (h3), sondern außerdem soll das Aussehen geändert werden (style), und zwar die Farbe (color) in grün (green). Am Ende siehts so aus: --> ÜberschriftDer Schlusstag enthält NIEMALS weitere Angaben.

Textfunktionen

Aussehen formatieren

Extra: CSS

Textstruktur festlegen

Unter Textformat versteht man das Aussehen eines Textes, also seine Größe, Farbe, Ausrichtung (linksbündig, zentriert, rechtsbündig oder Blocksatz) und seinen Schriftschnitt (fettgedruckt, kursiv bzw. schräggedruckt, unterstrichen oder durchgestrichen). HTML kann diese Angaben aber nur für einzelne Elemente deiner Webseite beschreiben. Man müsste diese Angaben für jeden einzelnen Absatz und jede einzelne Überschrift neu machen. Unsere Übungsseite ist kurz genug, um damit zu arbeiten. Wenn du aber eine komplette eigene Webseite bauen möchtest, empfehle ich dir - so wie es auch die Profis machen - CSS. Eine kleine Einführung dazu findest du hinter der Glühbirne!

Diese Tags brauchst du für die verschiedenen Textformate: Schriftschnitt: <b> </b> steht am Anfang und am Ende von fettgedrucktem Text (Bold)<i> </i> steht am Anfang und am Ende von kursivem / schräggedrucktem Text (Italic)<u> </u> steht am Anfang und am Ende von unterstrichenem Text (Underline) Die folgenden Änderungen sind schon ein Teil von CSS, gewissermaßen die "Light-Version" davon, die wir innerhalb einer HTML-Datei verwenden können. Dafür brauchen wir eine Zusatzangabe, ein sogenanntes Attribut, im Starttag des Textes. Der Tag ist immer folgendermaßen aufgebaut: <h3 style="color:blue;font-family:Arial;font-size:60px; text-align:center;">Überschrift</h3> Zuerst kommt im Starttag also die Art von Text (hier Überschrift 3), dann die Style-Änderung mit style="...", und in den Anführungszeichen die Änderungen, die wir machen wollen. Nach jeder Angabe (auch wenn es nur eine ist!) setzen wir einen Strichpunkt. Größe: font-size:60px; Die Schriftgröße wird in Pixel angegeben. Einfach ausprobieren! Farbe: color:green; Am einfachsten für Einsteiger ist es, die Namen der Farben auf Englisch anzugeben. Profis können auch die HEX-Codes der Farben verwenden! ;-) Ausrichtung: text-align:center; left für linksbündig (das ist aber Standard und kann weggelassen werden), center für zentriert (mittig), right für rechtsbündig und justify für Blocksatz.

Jedes internetfähige Gerät ist anders, hat eine andere Größe, verwendet andere Programme, arbeitet schneller oder langsamer. Dennoch soll jedes Gerät die gleichen Inhalte aus dem Internet laden und anzeigen können. Deswegen ist ein wichtiger Punkt in HTML, dass nur die "Aufgaben" des Textes programmiert werden. Eine Überschrift soll größer als der normale Text sein. Also programmieren wir die Aufgaben "Überschrift" und "normaler Text". Ein Browser auf dem Handy macht daraus eine 1-Zentimeter-Überschrift und 0,5-Zentimeter-Text, dein Computer zeigt den gleichen Text vielleicht doppelt so groß an. So wird sichergestellt, dass möglichst alle Inhalte an allen Geräten lesbar sind.

Diese Tags brauchst du für die verschiedenen Textebenen: Normaler Text: <p> </p> steht am Anfang und am Ende eines Absatzes (Paragraph) Überschriften: <h1> </h1> steht am Anfang und am Ende von einer Überschrift, h1 ist die größtmögliche, h6 die kleinstmögliche Überschrift (Header) Zeilen: <br> macht einen Zeilenumbruch, beginnt also eine neue Zeile (BReak) (Aufgepasst: du siehst, dass dieser Tag kein Container ist, es gibt keinen Schlusstag!) Linien: <hr> erzeugt eine waagerechte Linie im Text, die du zur Trennung von Absätzen verwenden kannst Listen: <ul> </ul> steht am Anfang und am Ende einer Liste von Stichpunkten (Unordered List), <ol> </ol> steht am Anfang und am Ende einer nummerierten Liste (Ordered List), und <li> </li> steht am Anfang und am Ende jedes einzelnen Punktes in einer Liste (List Item). <ul> <li>erstes Beispiel</li> <li>nächstes Beispiel</li> <li>letztes Beispiel</li> </ul> ergibt:

• erstes Beispiel
• nächstes Beispiel
• letztes Beispiel

Bilder in HTML

Bilder auf Webseiten ...

... einfügen und verwenden

Extra: Bilder auf Pixabay

Bilder machen eine Webseite interessanter und abwechslungsreicher. Wenn wir sie in unserem Projekt verwenden wollen, gibt es aber viele Dinge, die wir beachten müssen:

• Herkunft der Bilder: Wir können nur Bilder verwenden, die wir auch ins Internet stellen dürfen. Daher müssen wir das Urheberrecht und das Persönlichkeitsrecht beachten. Für diese Übung empfehle ich dir deswegen die Webseite Pixabay. Die dort veröffentlichten Bilder dürfen ohne weitere Bedingungen für unsere Zwecke verwendet werden. Auch für Referate und ähnliches ist sie gut geeignet! Du findest sie unter der Glühbirne.
• Größe der Bilder: Leider sind viele Fotos nicht so einfach "automatisch" an die Größe einer Webseite anzupassen wie Texte. Das müssen wir in diesem Projekt selbst tun. Ich zeige dir aber einen "Trick", wie es ohne Rechnen funktioniert.
• Alternativtext: Es ist sinnvoll, Bilder auf Webseiten und auch in sozialen Medien mit einer kurzen Beschreibung zu versehen. Dieser Text wird angezeigt, wenn ein Bild nicht geladen werden kann, oder wenn eine Person mit Sehbehinderung die Webseite betrachtet.

Der Tag <img> wird für Bilder in HTML gebraucht (IMaGe). Auch dieser Tag ist ein Einzeltag und hat keinen Schlussteil. Er wird immer durch mehrere Attribute erweitert: <img src=“hamster.jpg“ width=“300“ height=“200“ alt=”Bild von einem Hamster“>fügt ein Bild ein, das im gleichen Ordner wie die Webseite liegt, den Dateinamen „hamster.jpg“ hat, 300 Pixel breit und 200 Pixel hoch ist. Wenn das Bild nicht angezeigt werden kann oder eine blinde Person es sich beschreiben lässt, wird der Beschreibungstext „Bild von einem Hamster“ ausgegeben. src="..." ist die Quelle des Bildes (source). Zwischen den Anführungszeichen steht entweder der Dateiname des Bildes, wenn du es selber ins Internet hochlädst, oder die URL, wenn du ein bereits im Internet hochgeladenes Bild verwendest. width="..." beschreibt die Breite des Bildes auf deiner Webseite. Du kannst sie entweder in Pixel oder in Prozent angeben, und das Original wird dann entsprechend kleiner angezeigt. Probier gerne unterschiedliche Prozentwerte aus! height="..." beschreibt die Höhe des Bildes auf deiner Webseite -- sei vorsichtig, hier schleichen sich ganz oft Tippfehler ein. Ist aber auch ein seltsames Wort. alt="..." liefert dir einen kurzen Text zur Bildbeschreibung. Ein Satz reicht vollkommen aus.

Verweise in HTML

Vorbereitung ist wichtig

Links erstellen

Verweise oder Links machen einzelne HTML-Dateien auf einzelnen miteinander verbundenen Computern überall auf der Welt zu dem, was wir heute als Internet kennen. Sie sind also das Wichtigste, was HTML zu bieten hat, und sind zum Glück ganz einfach zu erstellen. Wir müssen nur wissen, was wir womit verbinden wollen. Bevor wir also Links auf unseren Seiten einbauen, brauchen wir alle Ziele für die Verweise. Wenn wir alle Steckbriefe einer Klasse miteinander vernetzen wollen, müssen die einzelnen Seiten fertig sein. Wenn wir Quellenangaben oder Bilder für unsere Seite brauchen, müssen wir vorher die URLs recherchiert haben. Wenn du dafür bereit bist, gehts los!

Der Tag <a> </a> steht am Anfang und am Ende von Verweisen auf andere Seiten (Anchor). Im Starttag steht IMMER mindestens die Angabe href="...", mit der man die Zielseite angibt, zu der man kommt, wenn man auf den Link klickt. Man kann noch zusätzliche Angaben machen, hier zwei nützliche Beispiele: target="_blank" öffnet den Link in einem neuen Fenster oder Browsertab title="..." ergänzt noch einen "Tooltip", also einen Text, der angezeigt wird, wenn man den Mauszeiger auf den Link bewegt aber noch nicht klickt Man kann zwischen den Start- und Schlusstag dann entweder Text zum Draufklicken oder ein Bild (mit dem <img>-Tab) einfügen. <a href=“http://www.arnold-gymnasium.de“ target=”_blank”>AG-Webseite</a>fügt einen Link auf die Webseite des Arnold-Gymnasiums ein, der sich in einem neuen Fenster oder Tab öffnet, wenn man auf den Text „AG-Webseite“ klickt. <a href=“http://www.hamster.de“> <img src=“hamster.jpg“> </a>fügt einen Link auf die Webseite hamster.de ein, der sich im gleichen Fenster oder Tab öffnet, wenn man auf das hochgeladene Bild mit dem Hamster klickt. Wenn man nicht auf eine externe Webseite (also eine andere als die eigene), sondern auf eine weitere "eigene" interne Seite verweisen möchte, braucht man nur den Dateinamen, nicht die ganze URL. Das ist für unsere Projekte wichtig! Daher haltet euch bitte bei den Projekten an die Angaben, damit diese Links nach dem Hochladen auch funktionieren.

Aufgabe 1: Steckbriefe

Beschreibung

To-Do-Liste

Tipps und Tricks

In eurer Gruppe erstellt ihr eine kleine Webseite, auf der ihr euch vorstellt. Diese beinhaltet eine Hauptseite und Steckbriefe als Unterseiten. Jedes Gruppenmitglied erstellt einen Steckbrief über sich selbst, den ihr selbst gestalten dürft. Es gibt Steckbrief-Pflichtelemente, die vorhanden sein müssen. Ihr findet sie auf eurer To-Do-Liste. Die Hauptseite muss Verweise auf jeden einzelnen Steckbrief enthalten. Jeder Steckbrief muss einen Verweis auf die Hauptseite enthalten. Ihr könnt euch auch untereinander verlinken (also in eurem Steckbrief Links auf andere Steckbriefe einfügen). Viel Spaß!

Folgende Aufgaben müsst ihr lösen:

• jedes Mitglied erstellt einen Steckbrief über sich mit folgenden Angaben:
  • Name
  • Hobbys
  • EIN Bild zu einem Hobby, das ihr von pixabay verlinkt
  • Lieblingssport ODER Lieblingstier
  • EIN Bild zum Lieblingssport oder -tier, das ihr von pixabay verlinkt
  • Link-Tipp: Wenn ihr Mitglied in einem Verein seid, verlinkt die Webseite des Vereins, so dass sie sich in einem neuen Fenster öffnet.Wenn ihr keinen Verein habt, verlinkt unsere Schulwebseite, so dass sie sich in einem neuen Fenster öffnet.
• ihr erstellt gemeinsam eine Hauptseite
  • ihr stellt euch als Gruppe kurz vor
  • die Seite enthält Links zu jedem einzelnen Steckbrief

Eure Steckbriefe dürfen auch noch ausführlicher sein! Außerdem dürft ihr in euren Steckbriefen auch Links zu den anderen Gruppenmitgliedern einfügen. Die oben genannten Punkte sind aber für alle Pflicht.

So geht ihr vor:

1. Macht euch Notizen auf einem Blatt Papier, wie euer Steckbrief aussehen soll: Überschrift, Pflichtpunkte, wo müssen Bilder und Links hin?
2. Erstellt eine leere HTML-Datei in KompoZer oder nutzt den Online-Editor. Speichert sie unter vorname.html ab.
3. Schreibt erst mal die Pflicht-Stichpunkte ohne HTML in eure Datei.
4. Bearbeitet den Text, indem ihr die Tags für Überschriften oder andere Farben verwendet.
5. Sucht Bilder auf Pixabay und fügt ihre URLs an den richtigen Stellen in euren Steckbrief ein.
6. Fügt die Links zu Verein/Schule ein.
7. Erstellt gemeinsam eine Übersichtsseite und erstellt die Links zu euren Steckbriefen.
8. Überprüft gegenseitig eure Seiten und ob alles so aussieht, wie ihr es euch vorstellt.
9. Schickt alle Dateien an eure Lehrkraft.

Aufgabe 2: Wiki

Beschreibung

To-Do-Liste

Tipps und Tricks

Ein Wiki ist eine Art Lexikon, in dem sich Informationen zu einem Thema befinden, die untereinander verlinkt sind. In eurer Gruppe erstellt ihr ein Mini-Wiki zu einem Thema eurer Wahl. Diese beinhaltet eine Hauptseite und Artikel als Unterseiten. Jedes Gruppenmitglied erstellt einen Artikel, den ihr selbst gestalten dürft. Es gibt Pflichtelemente, die vorhanden sein müssen. Ihr findet sie auf eurer To-Do-Liste. Die Hauptseite muss Verweise auf jeden einzelnen Artikel enthalten. Jeder Artikel muss einen Verweis auf die Hauptseite sowie mindestens einen Verweis auf einen weiteren Artikel enthalten. Alles Weitere ist ein bisschen themenabhängig, deswegen sprecht es bitte mit eurer Lehrkraft ab. Viel Spaß!

Folgende Aufgaben müsst ihr lösen:

• in eurer Gruppe findet ihr ein Thema, zu dem alle etwas beitragen können. Wenn ihr nicht weiter wisst, wendet euch an eure Lehrkraft! Beispiele:
  • unsere Lieblingsvereine
  • unsere Lieblingstiere
  • unsere Urlaubstipps
• jedes Mitglied erstellt einen Artikel mit folgenden Elementen:
  • Überschrift
  • Einleitungssatz
  • kurze Beschreibung eures Themas
  • eure Meinung bzw. eine Erklärung, was euch daran begeistert
  • ZWEI Bilder, die ihr von pixabay verlinkt und die mit eurem Artikel zu tun haben (z.B. ein Strandfoto und ein Hotelfoto), an unterschiedlichen Stellen im Text
  • zwei Link-Tipps:Findet eine Webseite, die weitere Informationen zu eurem Artikel beinhaltet. Verlinkt sie so, dass sie sich in einem neuen Fenster öffnet.Verlinkt außerdem einen weiteren Artikel aus eurer Gruppe.
• ihr erstellt gemeinsam eine Hauptseite
  • ihr stellt euer Thema kurz vor
  • die Seite enthält Links zu jedem einzelnen Artikel

So geht ihr vor:

1. Macht euch Notizen auf einem Blatt Papier, wie euer Artikel aussehen soll: Überschrift, Pflichtpunkte, wo müssen Bilder und Links hin?
2. Erstellt eine leere HTML-Datei in KompoZer oder nutzt den Online-Editor. Speichert sie unter vorname.html ab.
3. Schreibt erst mal die Pflicht-Texte ohne HTML in eure Datei.
4. Bearbeitet den Text, indem ihr die Tags für Überschriften oder andere Farben verwendet.
5. Sucht Bilder auf Pixabay und fügt ihre URLs an den richtigen Stellen in euren Steckbrief ein.
6. Fügt den Link-Tipp ein.
7. Erstellt gemeinsam eine Übersichtsseite und erstellt die Links zu euren Artikeln.
8. Überprüft gegenseitig eure Seiten und ob alles so aussieht, wie ihr es euch vorstellt.
9. Schickt alle Dateien an eure Lehrkraft.