FK:Kunst-Technik-Labor/WebmakerXRay - Revision history

JanD at 17:40, 15 November 2013

2013-11-15T17:40:06Z

← Older revision		Revision as of 17:40, 15 November 2013
Line 29:		Line 29:

	Willst du den kompletten Code der Website sehen, kannst du die Tasten "Strg" und "U" gleichzeitig drücken. Von diesem Code wird dir, wenn du klickst, immer ein kleiner Ausschnitt angezeigt.		Willst du den kompletten Code der Website sehen, kannst du die Tasten "Strg" und "U" gleichzeitig drücken. Von diesem Code wird dir, wenn du klickst, immer ein kleiner Ausschnitt angezeigt.
			<!--
	==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.
Line 36:		Line 36:

	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.
			-->

JanD: moved FK:Kunst-Technik-Labor/HTMLCSSLernen to FK:Kunst-Technik-Labor/WebmakerXRay: more fitting title

2013-11-15T17:36:12Z

moved FK:Kunst-Technik-Labor/HTMLCSSLernen to FK:Kunst-Technik-Labor/WebmakerXRay: more fitting title

← Older revision	Revision as of 17:36, 15 November 2013
(No difference)

JanD: /* 1. Was sind diese Computersprachen? */

2013-10-27T11:02:46Z

1. Was sind diese Computersprachen?

← Older revision		Revision as of 11:02, 27 October 2013
Line 2:		Line 2:

	==1. Was sind diese Computersprachen?==		==1. Was sind diese Computersprachen?==
	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!		Mit den "Computersprachen" oder "Code" ist es wie mit der [https://de.wikipedia.org/wiki/Matrix_(Film) 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 https://goggles.webmaker.org/en-US] und ziehe den Button "Activate X-Ray Goggles" in deine Bookmarksleiste.

	[[File:SaveGoggles.png\|500px]]		[[File:SaveGoggles.png\|500px]]
Line 28:		Line 28:
	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.

	Willst du den kompletten Code der Website sehen, kannst du die Tasten "Strg" und "U" gleichzeitig drücken. Von diesem Code wird dir, wenn du klickst, immer ein kleiner Ausschnitt angezeigt.		Willst du den kompletten Code der Website sehen, kannst du die Tasten "Strg" und "U" gleichzeitig drücken. Von diesem Code wird dir, wenn du klickst, immer ein kleiner Ausschnitt angezeigt.

	==Selber Code schreiben ==		==Selber Code schreiben ==

JanD at 13:37, 23 October 2013

2013-10-23T13:37:35Z

← Older revision		Revision as of 13:37, 23 October 2013
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.

JanD at 13:36, 23 October 2013

2013-10-23T13:36:07Z

← Older revision		Revision as of 13:36, 23 October 2013
Line 18:		Line 18:
	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 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>".		…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, "<code>Kunst und Kultur</code>", 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.
Line 25:		Line 25:

	[[File:ChangeGoggles.png]]		[[File:ChangeGoggles.png]]

			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.

			Willst du den kompletten Code der Website sehen, kannst du die Tasten "Strg" und "U" gleichzeitig drücken. Von diesem Code wird dir, wenn du klickst, immer ein kleiner Ausschnitt angezeigt.

			==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.
			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.

JanD at 13:15, 23 October 2013

2013-10-23T13:15:18Z

← Older revision		Revision as of 13:15, 23 October 2013
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 ~~ist denn dieser Code~~?==		==1. Was sind diese Computersprachen?==
	Mit ~~dem~~ Code ist es wie mit der Matrix: Es gibt eine normale aussehende Welt und es gibt all das nochmal als ~~Computer-Code~~. 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!		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)

	~~[[File:ActivateGoggles.png]]~~

	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:~~InspectGoggles~~.png]]		[[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 ~~fenster~~ auf. darin steht. "<a title…". Das ist das öffnende Tag, es endet mit ">". Dann kommt Text, "Kunst und Kultur", dann kommt "</a>", das schließende Tag. Alles zwischen dem öffnenden und schließenden Tag wird auf der Website angezeigt, also der Text "Kunst und Kultur".		…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]]

JanD at 13:08, 23 October 2013

2013-10-23T13:08:47Z

← Older revision		Revision as of 13:08, 23 October 2013
Line 3:		Line 3:
	==1. Was ist denn dieser Code?==		==1. Was ist denn dieser Code?==
	Mit dem Code ist es wie mit der Matrix: Es gibt eine normale aussehende Welt und es gibt all das nochmal als Computer-Code. 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!		Mit dem Code ist es wie mit der Matrix: Es gibt eine normale aussehende Welt und es gibt all das nochmal als Computer-Code. 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.

	[[File:SaveGoggles.png]]		[[File:SaveGoggles.png]]

	~~Gehe dazu auf https://goggles.webmaker.org/en-US und ziehe den Button "Activate X-Ray Goggles" in deine Bookmarksleiste.~~

	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)

JanD: Created page with "HTML und CSS, das sind die Computersprachen mit denen, beschreiben wird, wie eine Website aussieht. ==1. Was ist denn dieser Code?== Mit dem Code ist es wie mit der Matrix: Es ..."

2013-10-23T13:07:26Z

Created page with "HTML und CSS, das sind die Computersprachen mit denen, beschreiben wird, wie eine Website aussieht. ==1. Was ist denn dieser Code?== Mit dem Code ist es wie mit der Matrix: Es ..."

New page

HTML und CSS, das sind die Computersprachen mit denen, beschreiben wird, wie eine Website aussieht.

==1. Was ist denn dieser Code?==
Mit dem Code ist es wie mit der Matrix: Es gibt eine normale aussehende Welt und es gibt all das nochmal als Computer-Code. 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!

[[File:SaveGoggles.png]]

Gehe dazu auf https://goggles.webmaker.org/en-US und ziehe den Button "Activate X-Ray Goggles" in deine Bookmarksleiste.

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)

[[File:ActivateGoggles.png]]

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.).

[[File:InspectGoggles.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…

…und klicken auf "Kunst und Kultur". Es geht ein fenster auf. darin steht. "<a title…". Das ist das öffnende Tag, es endet mit ">". Dann kommt Text, "Kunst und Kultur", dann kommt "</a>", das schließende Tag. Alles zwischen dem öffnenden und schließenden Tag wird auf der Website angezeigt, also der Text "Kunst und Kultur".

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.

[[File:ChangeGoggles.png]]