Bureaucrats, emailconfirmed
1,221
edits
FK:Kunst-Technik-Labor/WebmakerXRay (view source)
Revision as of 13:15, 23 October 2013
, 23 October 2013no edit summary
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
HTML und CSS, das sind die Computersprachen mit denen, beschreiben wird, wie eine Website aussieht. | HTML und CSS, das sind die Computersprachen mit denen, beschreiben wird, wie eine Website aussieht. | ||
==1. Was | ==1. Was sind diese Computersprachen?== | ||
Mit | Mit den "Computersprachen" oder "Code" ist es wie mit der Matrix: Es gibt eine normale aussehende Welt und es gibt all das nochmal als Computercode. Die normale Welt, die wir meistens sehen, sind die Websites in unserem Browser. Aber all diese Websites werden durch Code, also Text, den ein Computer verstehen kann, beschreiben. Ändern wir doch einfach ein bisschen was davon, schliesslich ist es nur Text! | ||
Gehe dazu auf https://goggles.webmaker.org/en-US und ziehe den Button "Activate X-Ray Goggles" in deine Bookmarksleiste. | Gehe dazu auf https://goggles.webmaker.org/en-US und ziehe den Button "Activate X-Ray Goggles" in deine Bookmarksleiste. | ||
| Line 9: | Line 9: | ||
Wenn du auf einer Website bist, kannst du nun diesen "Activate X-Ray Goggles"-Link anklicken und damit ein kleines Werkzeug öffnen. Es ermöglicht dir, zu sehen, wie eine Website aufgebaut ist, und diese auch zu verändern. ''Die Änderungen passieren nur an deinem Computer, und nur bis du die Seite ein nächstes mal lädst.'' '''Du kannst also nichts kaputtmachen!''' (auch nicht, wenn du auf den "Publish"-Button klickst) | Wenn du auf einer Website bist, kannst du nun diesen "Activate X-Ray Goggles"-Link anklicken und damit ein kleines Werkzeug öffnen. Es ermöglicht dir, zu sehen, wie eine Website aufgebaut ist, und diese auch zu verändern. ''Die Änderungen passieren nur an deinem Computer, und nur bis du die Seite ein nächstes mal lädst.'' '''Du kannst also nichts kaputtmachen!''' (auch nicht, wenn du auf den "Publish"-Button klickst) | ||
Gehe auf Wikipedia.de und klicke den "Activate X-Ray Goggles" in deiner Linkleiste. | Gehe auf Wikipedia.de und klicke den "Activate X-Ray Goggles" in deiner Linkleiste. | ||
Wen du jetzt mit der Maus über die Seite gehst, siehst du, das immer ein Kasten farblich hervorgehoben wird, und das ein oder mehrere Buchstaben darin stehen. Die Buchstaben sind ein "Tag". Tags sieht man nicht auf der Website, nur im Code. Ein Tag ist wie eine Klammer: Alles was im Code zwischen dem Anfangs- und dem Endtag ist, bekommt eine bestimmte Eigenschaft (eine Farbe, eine bestimmte Größe etc.). | Wen du jetzt mit der Maus über die Seite gehst, siehst du, das immer ein Kasten farblich hervorgehoben wird, und das ein oder mehrere Buchstaben darin stehen. Die Buchstaben sind ein "Tag". Tags sieht man nicht auf der Website, nur im Code. Ein Tag ist wie eine Klammer: Alles was im Code zwischen dem Anfangs- und dem Endtag ist, bekommt eine bestimmte Eigenschaft (eine Farbe, eine bestimmte Größe etc.). Eine öffnendes Tag besteht immer aus <code> <tagname> </code>, ein schließendes aus <code> </tagname> </code> | ||
[[File: | [[File:ActivateGoggles.png]] | ||
Wenn wir die Maus über "Kunst und Kultur" bewegen, sehen wir einen Kasten um den Text und den Buchstaben "a". Wir schauen uns das mal genauer an… | Wenn wir die Maus über "Kunst und Kultur" bewegen, sehen wir einen Kasten um den Text und den Buchstaben "a". Wir schauen uns das mal genauer an… | ||
…und klicken auf "Kunst und Kultur". Es geht ein | …und klicken auf "Kunst und Kultur". Es geht ein Fenster auf. darin steht. "<code><a title…</code>". Das ist das öffnende Tag, es endet mit "<code>></code>". Dann kommt Text, "Kunst und Kultur", dann kommt "<code></a></code>", das schließende Tag. Alles zwischen dem öffnenden und schließenden Tag wird auf der Website angezeigt, also der Text "<code>Kunst und Kultur</code>". | ||
Wir können den Text, sowohl die Tags als auch "Kunst und Kultur" einfach ändern. Erstmal ändern wir nur den Text zwischen den Tags, denn der muss (anders als die Tags) keine Regeln befolgen, damit der Computer weiß was gemeint ist. | Wir können den Text, sowohl die Tags als auch "Kunst und Kultur" einfach ändern. Erstmal ändern wir nur den Text zwischen den Tags, denn der muss (anders als die Tags) keine Regeln befolgen, damit der Computer weiß was gemeint ist. | ||
Schreiben wir also "Freie" vor "Kunst und Kultur" und klicken auf "save". Das schliesst das Tag-Fenster und macht deine Änderung sichtbar. | Schreiben wir also "Freie" vor "Kunst und Kultur" und klicken auf "save". Das schliesst das Tag-Fenster und macht deine Änderung sichtbar. | ||
[[File:ChangeGoggles.png]] | [[File:ChangeGoggles.png]] | ||