Bureaucrats, emailconfirmed
1,221
edits
FK:Kunst-Technik-Labor/WebmakerXRay (view source)
Revision as of 13:37, 23 October 2013
, 23 October 2013no edit summary
No edit summary |
No edit summary |
||
| Line 6: | Line 6: | ||
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. | ||
[[File:SaveGoggles.png]] | [[File:SaveGoggles.png|500px]] | ||
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) | ||
| Line 14: | Line 14: | ||
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> | 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:ActivateGoggles.png]] | [[File:ActivateGoggles.png|500px]] | ||
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… | ||
| Line 24: | Line 24: | ||
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|500px]] | ||
Das kannst du auf allen anderen Websites auch machen – beim überfahren mit der Maus wird dir der Bereich angezeigt den das Tag "kontrolliert"; nach dem Anklicken siehst du das Tag und dessen Inhalt und kannst beides ändern. | Das kannst du auf allen anderen Websites auch machen – beim überfahren mit der Maus wird dir der Bereich angezeigt den das Tag "kontrolliert"; nach dem Anklicken siehst du das Tag und dessen Inhalt und kannst beides ändern. | ||
| Line 32: | Line 32: | ||
==Selber Code schreiben == | ==Selber Code schreiben == | ||
Wir haben gesehen, das die Anzeige von Websites durch Code bestimmt wird und wir haben uns kleine Teile dieses Codes angeschaut und auch geändert. Man kann diesen Code natürlich auch selber schreiben. Glücklicherweise gibt es dafür schon gute Lernmöglichkeiten im Netz. | Wir haben gesehen, das die Anzeige von Websites durch Code bestimmt wird und wir haben uns kleine Teile dieses Codes angeschaut und auch geändert. Man kann diesen Code natürlich auch selber schreiben. Glücklicherweise gibt es dafür schon gute Lernmöglichkeiten im Netz. | ||
Ein guter Einstieg ist [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/2 Web Basics auf Codecademy]. In dem Kurs lernst du nicht nur die wichtigsten Tags und ihre Funktionen, sondern auch direkt wie du dieses Wissen anwendest: Links ist erklärt was du wissen musst, im großen Bereich rechts kannst du ausprobieren und deinen eigenen Code eingeben. | Ein guter Einstieg ist [http://www.codecademy.com/courses/web-beginner-en-HZA3b/0/2 Web Basics auf Codecademy]. In dem Kurs lernst du nicht nur die wichtigsten Tags und ihre Funktionen, sondern auch direkt wie du dieses Wissen anwendest: Links ist erklärt was du wissen musst, im großen Bereich rechts kannst du ausprobieren und deinen eigenen Code eingeben. | ||
Wenn dir das interaktive Lernen nicht liegt, kannst du das [http://htmldog.com/guides/html/beginner/gettingstarted/ Getting Started Tutorial] von HTML Dog machen. Du benötigst dann einen Texteditor, wie [Brackets http://download.brackets.io/]. Die Dateien die du erstellt, speicherst du als "irgendeinname'''.html''" und klickst sie dann an, um sie in deinem Browser zu öffnen. | Wenn dir das interaktive Lernen nicht liegt, kannst du das [http://htmldog.com/guides/html/beginner/gettingstarted/ Getting Started Tutorial] von HTML Dog machen. Du benötigst dann einen Texteditor, wie [Brackets http://download.brackets.io/]. Die Dateien die du erstellt, speicherst du als "irgendeinname'''.html''" und klickst sie dann an, um sie in deinem Browser zu öffnen. | ||