Webplayer
 
Wunsch/Gruß
Private Nachrichten
Benutzername:

Passwort:

(Passwort vergessen ?)

Boardsuche
Board durchsuchen:

Links
zur Linkliste
- Anime
- Festivals und Events
- Games
- Root
- Sonstiges
Staff only
Ihnen fehlen die Rechte um diese Funktion zu nutzen oder Sie sind nicht angemeldet.

UR-Radio » UR Root » Sendungen » UR the Web » 25.04.2017 Special: Let's Code together - HTML5 » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen
Zum Ende der Seite springen 25.04.2017 Special: Let's Code together - HTML5
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
Heindal Heindal ist männlich
UR Root Moderator


images/avatars/avatar-3063.gif

Dabei seit: 27.06.2010
Beiträge: 724
Gästebuch: aktiviert
Level: 40 [?]
Erfahrungspunkte: 1.977.182
Nächster Level: 2.111.327

134.145 Erfahrungspunkt(e) für den nächsten Levelanstieg

25.04.2017 Special: Let's Code together - HTML5       Zum Anfang der Seite springen

UR the Web wird am 25.04.2017 seinem Namen gerecht - denn du bist das Netz. Zum Bauen von Webseiten, Programmen und sogar Apps kommt HTML 5 zum Einsatz. Wir coden gemeinsam eine Standalone Webseite.

Da ich dazu noch ein bisschen Zeit brauche, erst am 25.04.2017. Ihr lernt oder (wiederholt) dabei den Umgang mit HTML5, J a v a s c r i p t und CSS und solltet dann in der Lage sein das selbst zu erweitern. Alles was ihr braucht ist ein Texteditor und ein bisschen Zeit, ich empfehle für den Anfang Notepad++ das kostenlos erhältlich ist.

Bis dann!
______________

UR the Web will be more than just a name, because "You are the web"! To code websites, programs or apps html5 is used. We will code a standalone website which will teach you the basics of HTML5, J a v a s c r i p t and CSS.

I will need some time to prepare this show, that's why it will be streamed on the 25th of April. To code you will need a simple texteditor - i recommend notepad++, which is free.

Stay connected.

__________________
The future belongs to those, who believe in the beauty of their dreams.

Dieser Beitrag wurde 6 mal editiert, zum letzten Mal von Heindal: 05.06.2017 21:45.

18.04.2017 17:49
Die Betreiber von UR-Radio distanzieren sich hiermit ausdrücklich von dem, durch Heindal am 18.04.2017 um 17:49 verfassten Beitrag.
Sollte dieser Beitrag Ihre Rechte verletzen bitten wir um Benachrichtigung
Heindal Heindal ist männlich
UR Root Moderator


images/avatars/avatar-3063.gif

Dabei seit: 27.06.2010
Beiträge: 724
Gästebuch: aktiviert
Level: 40 [?]
Erfahrungspunkte: 1.977.182
Nächster Level: 2.111.327

134.145 Erfahrungspunkt(e) für den nächsten Levelanstieg

Themenstarter Thema begonnen von Heindal
      Zum Anfang der Seite springen

So hier ein kleiner Teaser für euch. Das werden wir heute gemeinsam coden:
So let's give you a little teaser. This is what will code together:



Connect Yourself - UR the Web 25.04.2017 - 20:00.

__________________
The future belongs to those, who believe in the beauty of their dreams.
25.04.2017 00:25
Die Betreiber von UR-Radio distanzieren sich hiermit ausdrücklich von dem, durch Heindal am 25.04.2017 um 00:25 verfassten Beitrag.
Sollte dieser Beitrag Ihre Rechte verletzen bitten wir um Benachrichtigung
Heindal Heindal ist männlich
UR Root Moderator


images/avatars/avatar-3063.gif

Dabei seit: 27.06.2010
Beiträge: 724
Gästebuch: aktiviert
Level: 40 [?]
Erfahrungspunkte: 1.977.182
Nächster Level: 2.111.327

134.145 Erfahrungspunkt(e) für den nächsten Levelanstieg

Themenstarter Thema begonnen von Heindal
      Zum Anfang der Seite springen

Das sind die Dinge die wir für die heutige Sendung brauchen.
These are the things we will need for todays show.



Hero/Held: https://opengameart.org/content/flare-po...pack-number-one by Justin Nichol: CC-BY-SA 3.0.



Wolf: https://opengameart.org/content/smiling-husky-dog-portrait by Gaspard (Submitted by qubodup) - CC-BY-SA 3.0.



Hintergrundbild von mir (Heindal) aus Photoshop erstellt.



---- kopiert alles unterhalb dieser Zeile in eine Datei und speichert sie als HTML // copy everything after this line and create a new file and save it as html ---

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>UR the Web - Let's Code Together 25.04.2017</title>

<!-- II. CSS zur Gestaltung von Elementen / to design elements -->

<style type="text/css">

</style>

<!-- III. yavascr!pt - für Funktionen / - for functions -->

<script>

</script>


</head>
<body>
<!-- HTML - I. hier wird der Körper unseres Programms gebaut / I. here we will build the body for our program -->




</body>
</html>

__________________
The future belongs to those, who believe in the beauty of their dreams.

Dieser Beitrag wurde 3 mal editiert, zum letzten Mal von Heindal: 25.04.2017 14:19.

25.04.2017 14:16
Die Betreiber von UR-Radio distanzieren sich hiermit ausdrücklich von dem, durch Heindal am 25.04.2017 um 14:16 verfassten Beitrag.
Sollte dieser Beitrag Ihre Rechte verletzen bitten wir um Benachrichtigung
Heindal Heindal ist männlich
UR Root Moderator


images/avatars/avatar-3063.gif

Dabei seit: 27.06.2010
Beiträge: 724
Gästebuch: aktiviert
Level: 40 [?]
Erfahrungspunkte: 1.977.182
Nächster Level: 2.111.327

134.145 Erfahrungspunkt(e) für den nächsten Levelanstieg

Themenstarter Thema begonnen von Heindal
      Zum Anfang der Seite springen

--- Teil I / Part I: fügt den Code unten im body ein/ insert this source code into the <body> after this "<!-- HTML - hier wird der Körper unseres Programms gebaut / - here we will build the body for our program -->" HIER/HERE ---

<h1>UR the Web - Let's Code Together 25.04.2017</h1>

<h2>Held vs Wolf / Hero vs Wolf</h2>

<div id="container1" class="container">

<h3>Hero</h3>

<img id="hero" class="image" src="hero2.png">

<br/><br/>

Hitpoints: <span id="hitpoints1">50</span>

<br/><br/>

<button onclick="attack1();">Attack</button>

<button onclick="healing();">Healing</button>


</div>

<div id="container2" class="container">

<h3>Wolf</h3>

<img id="wolf" class="image" src="wolf2.png">

<br/><br/>

Hitpoints: <span id="hitpoints2">50</span>

<br/><br/>

<button onclick="attack2();">Attack</button>
<button onclick="claws();">Claws</button>

</div>


<div id="container3" class="last">
<br/><br/>

Source: <a href="http://www.ur-radio.de/thread.php?threadid=14740" target="_blank">UR Radio - UR the Web</a>

<br/><br/>

Hero: <a href="https://opengameart.org/content/flare-portrait-pack-number-one" target="_blank">Justin Nichol - CC-BY-SA 3.0</a>

<br/><br/>

Wolf: <a href="https://opengameart.org/content/smiling-husky-dog-portrait" target="_blank">Gaspard (Submitted by qubodup) - CC-BY-SA 3.0</a>

<br/><br/>
Background: made by Heindal using photoshop
</div>

__________________
The future belongs to those, who believe in the beauty of their dreams.

Dieser Beitrag wurde 2 mal editiert, zum letzten Mal von Heindal: 25.04.2017 20:24.

25.04.2017 20:23
Die Betreiber von UR-Radio distanzieren sich hiermit ausdrücklich von dem, durch Heindal am 25.04.2017 um 20:23 verfassten Beitrag.
Sollte dieser Beitrag Ihre Rechte verletzen bitten wir um Benachrichtigung
Heindal Heindal ist männlich
UR Root Moderator


images/avatars/avatar-3063.gif

Dabei seit: 27.06.2010
Beiträge: 724
Gästebuch: aktiviert
Level: 40 [?]
Erfahrungspunkte: 1.977.182
Nächster Level: 2.111.327

134.145 Erfahrungspunkt(e) für den nächsten Levelanstieg

Themenstarter Thema begonnen von Heindal
      Zum Anfang der Seite springen

--- Part II / Teil II Makeup:

Insert Code HERE / den nachfolgenden Code HIER einfügen

<style type="text/css">

HERE / HIER

</style>

---

body {
background:url(hintergrund.png);
font-family:Arial, Helvetica, sans-serif;

}

button { border:1px solid black; width:100px;

}

img { width:200px; height:200px; border:1px solid black;

}

.container { float:left; width:30%;

}

.last { float:left; width:100%;

}

__________________
The future belongs to those, who believe in the beauty of their dreams.

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Heindal: 25.04.2017 20:49.

25.04.2017 20:44
Die Betreiber von UR-Radio distanzieren sich hiermit ausdrücklich von dem, durch Heindal am 25.04.2017 um 20:44 verfassten Beitrag.
Sollte dieser Beitrag Ihre Rechte verletzen bitten wir um Benachrichtigung
Heindal Heindal ist männlich
UR Root Moderator


images/avatars/avatar-3063.gif

Dabei seit: 27.06.2010
Beiträge: 724
Gästebuch: aktiviert
Level: 40 [?]
Erfahrungspunkte: 1.977.182
Nächster Level: 2.111.327

134.145 Erfahrungspunkt(e) für den nächsten Levelanstieg

Themenstarter Thema begonnen von Heindal
      Zum Anfang der Seite springen

--- Part III / Teil III - Computer do something!

Place code HERE / Füge den Code HIER ein

<script>

HERE/HIER

</script>

---

// das ist ein einzeiliger Kommentar im yavascr!pt - one line comment within yavascr!pt
/* mehrzeiliger Kommentar im yavascr!pt - comment with several line in yavascr!pt

var hp1 = 50; definiert eine Variable namens hp1 die 30 ist / defines a variable named hp1 that is 30
*/

var hp1 = 50;
var hp2 = 50;

/* das ist eine funktion die aufgerufen wird, wenn ein button gedrückt wird / this defines a function that is called when you press the button */

function attack1(){

hp2=hp2-10; // this is changing the variable hp2 - the hitpoint of the wolf
document.getElementById('hitpoints2').innerHTML = hp2; //this will change the variable on our website

if(hp2 < 1)
{alert("Held hat gewonnen! / Hero has won!");reset();}

//das prüft ob die Lebenspunkte des Wolfes kleiner als 0 sind, wenn das so ist, gibt er eine Nachricht aus (einen Alert) und führt dannach die Funktion "reset" aus
//this is checking if the hp of the wolf is smaller than 1, if so it will give out a message (an alert) and after that it calls the function "reset"

}

function healing(){

hp1=hp1+10;
document.getElementById('hitpoints1').innerHTML = hp1;

}

function attack2(){

hp1=hp1-5;
document.getElementById('hitpoints1').innerHTML = hp1;


if(hp1 < 1)
{alert("Wolf hat gewonnen! / Wolf has won!");reset();}

}

function claws(){

hp1=hp1-12;
document.getElementById('hitpoints1').innerHTML = hp1;


if(hp1 < 1)
{alert("Wolf hat gewonnen! / Wolf has won!"); reset();}

}

function reset(){

hp1 = 50;
hp2 = 50;
document.getElementById('hitpoints1').innerHTML = hp1;
document.getElementById('hitpoints2').innerHTML = hp2;

}

__________________
The future belongs to those, who believe in the beauty of their dreams.
25.04.2017 21:01
Die Betreiber von UR-Radio distanzieren sich hiermit ausdrücklich von dem, durch Heindal am 25.04.2017 um 21:01 verfassten Beitrag.
Sollte dieser Beitrag Ihre Rechte verletzen bitten wir um Benachrichtigung
Heindal Heindal ist männlich
UR Root Moderator


images/avatars/avatar-3063.gif

Dabei seit: 27.06.2010
Beiträge: 724
Gästebuch: aktiviert
Level: 40 [?]
Erfahrungspunkte: 1.977.182
Nächster Level: 2.111.327

134.145 Erfahrungspunkt(e) für den nächsten Levelanstieg

Themenstarter Thema begonnen von Heindal
      Zum Anfang der Seite springen

--- Complete Project with comments / Komplettes Projekt mit Kommentaren ---

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>UR the Web - Let's Code Together 25.04.2017</title>

<!-- CSS zur Gestaltung von Elementen / to design elements -->

<!--
man kann entweder ein html element wie body oder button ansprechen, aber auch elemente mit Klassen oder IDs indem man . oder # davorsetzt.
you can either design an html element such as body or button, or an element with a class using . or an id using # before the element -->

<style type="text/css">

body {
background:url(hintergrund.png);
font-family:Arial, Helvetica, sans-serif;

}

button { border:1px solid black; width:100px;

}

img { width:200px; height:200px; border:1px solid black;

}

.container { float:left; width:30%;

}

.last { float:left; width:100%;

}

</style>


<!-- yavascr!pt - für Funktionen / - for functions -->

<script>

// das ist ein einzeiliger Kommentar im yavascr!pt - one line comment within yavascr!pt
/* mehrzeiliger Kommentar im yavascr!pt - comment with several line in yavascr!pt

var hp1 = 39; definiert eine Variable namens hp1 die 30 ist / defines a variable named hp1 that is 30
*/

var hp1 = 50;
var hp2 = 50;

/* das ist eine funktion die aufgerufen wird, wenn ein button gedrückt wird / this defines a function that is called when you press the button */

function attack1(){

hp2=hp2-10; // this is changing the variable hp2 - the hitpoint of the wolf
document.getElementById('hitpoints2').innerHTML = hp2; //this will change the variable on our website

if(hp2 < 1)
{alert("Held hat gewonnen! / Hero has won!");reset();}

//das prüft ob die Lebenspunkte des Wolfes kleiner als 0 sind, wenn das so ist, gibt er eine Nachricht aus (einen Alert) und führt dannach die Funktion "reset" aus
//this is checking if the hp of the wolf is smaller than 1, if so it will give out a message (an alert) and after that it calls the function "reset"

}

function healing(){

hp1=hp1+10;
document.getElementById('hitpoints1').innerHTML = hp1;

}

function attack2(){

hp1=hp1-5;
document.getElementById('hitpoints1').innerHTML = hp1;


if(hp1 < 1)
{alert("Wolf hat gewonnen! / Wolf has won!");reset();}

}

function claws(){

hp1=hp1-12;
document.getElementById('hitpoints1').innerHTML = hp1;


if(hp1 < 1)
{alert("Wolf hat gewonnen! / Wolf has won!"); reset();}

}

function reset(){

hp1 = 50;
hp2 = 50;
document.getElementById('hitpoints1').innerHTML = hp1;
document.getElementById('hitpoints2').innerHTML = hp2;

}

</script>
<!-- yavascr!pt -->

</head>
<body>
<!-- HTML - hier wird der Körper unseres Programms gebaut / - here we will build the body for our program -->

<!-- Das ist ein Kommentar - das macht also gar nichts smile / That's a comment - it does nothing but look nice -->
<h1>UR the Web - Let's Code Together 25.04.2017</h1>
<!-- Das da ist eine Überschrift Kategorie 1, die größte Überschrift. Wie man sieht öffnet <h1> das Element </h1> beendet es. Diese Elementen werden Tags ("Täggs") genannt.
/ That's a headline category 1, it's the biggest. As you see <h1> is opening this element </h1> is closing it. These are so called "tags". -->

<h2>Held vs Wolf / Hero vs Wolf</h2>
<!-- Das da ist eine Überschrift Kategorie 2, ist kleiner als h1 aber größer als h3. Da gibt es doch bestimmt eine versteckte Logik?! / That's a headline category 2, it's smaller than 1 but bigger than 3. You proably see a hidden logic. -->

<div id="container1" class="container">
<!-- das ist ein Container, er enthält Dinge. In diesem Fall unseren Helden Informationen. / that's a container that ... contains things. In our case our Heroinformation. -->

<h3>Hero</h3>
<!-- h3 ^^ -->
<img id="hero" class="image" src="hero2.png">
<!-- das ist ein bild, src="" sagt welche Datei angesprochen wird / that's an image the src="" says which file it is -->

<br/><br/>
<!-- br / br stands for breaks and each will move the button for one line -->

Hitpoints: <span id="hitpoints1">50</span>
<!-- span ist ein Container der innerhalb von Zeilen verwendet werden kann - das nennt man "inline" / span is a container that can be used in a line - "inline" -->

<br/><br/>
<!-- br umbricht und sorgt dafür das der Button zwei Zeilen nach unten rutscht / br stands for breaks and each will move the button for one line -->

<button onclick="attack1();">Attack</button>
<!-- das ist ein button in dem "Attack" steht und lädt die Funktion attack1 wenn man darauf klickt / this is a button which loads function attack1 -->

<button onclick="healing();">Healing</button>
<!-- wie "Attack" aber lädt die Funktion Heilung / like attack but loads healing function -->

</div>

<div id="container2" class="container">
<!-- hier nochmal ein Container diesmal enthält er unseren Wolf / this is annother container, now it contains our wolf -->

<h3>Wolf</h3>

<img id="wolf" class="image" src="wolf2.png">

<br/><br/>

Hitpoints: <span id="hitpoints2">50</span>

<br/><br/>

<button onclick="attack2();">Attack</button>
<button onclick="claws();">Claws</button>

</div>


<div id="container3" class="last">
<br/><br/>
Source: <a href="http://www.ur-radio.de/thread.php?threadid=14740" target="_blank">UR Radio - UR the Web</a>
<!-- das ist ein Link target="_blank" öffnet ihn in einem neuen Fenster / that a link, target="_blank" opens it in annother window -->
<br/><br/>
Hero: <a href="https://opengameart.org/content/flare-portrait-pack-number-one" target="_blank">Justin Nichol - CC-BY-SA 3.0</a>
<br/><br/>
Wolf: <a href="https://opengameart.org/content/smiling-husky-dog-portrait" target="_blank">Gaspard (Submitted by qubodup) - CC-BY-SA 3.0</a>
<br/><br/>
Background: selfmade using photoshop
</div>
</body>
</html>

__________________
The future belongs to those, who believe in the beauty of their dreams.
25.04.2017 21:19
Die Betreiber von UR-Radio distanzieren sich hiermit ausdrücklich von dem, durch Heindal am 25.04.2017 um 21:19 verfassten Beitrag.
Sollte dieser Beitrag Ihre Rechte verletzen bitten wir um Benachrichtigung
Pichiko Pichiko ist weiblich
UR-Supporter


images/avatars/avatar-3122.jpg

Dabei seit: 22.09.2007
Beiträge: 178
Gästebuch: aktiviert
Level: 34 [?]
Erfahrungspunkte: 665.750
Nächster Level: 677.567

11.817 Erfahrungspunkt(e) für den nächsten Levelanstieg

      Zum Anfang der Seite springen

Here is a example from me, implemented in a Website, what has already a design.
Click here
As you may see, the background-picture get down and the picture are still stretched and so on. This cause,because my website is a building website with Design-templates and so on.
On a website there you only write your HTML, this will not occur...



Hier ist ein Beispiel von mir, in einer Website von mir eingebundenen,das schon ein Design so hatte.
Klick hier
Wie ihr vielleicht sieht, ist der Background ganz nach unten gerutscht und die Bilder sind imemr noch gestreckt und so weiter. Das passiert halt nur bei Webseiten, die Designvorlagen schon haben. Bei einer Website wo ihr nur HTML schreibt, passiert das nicht...

__________________

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Pichiko: 26.04.2017 05:33.

25.04.2017 21:29 AIM-Name von Pichiko: - YIM-Name von Pichiko: -
Die Betreiber von UR-Radio distanzieren sich hiermit ausdrücklich von dem, durch Pichiko am 25.04.2017 um 21:29 verfassten Beitrag.
Sollte dieser Beitrag Ihre Rechte verletzen bitten wir um Benachrichtigung
Heindal Heindal ist männlich
UR Root Moderator


images/avatars/avatar-3063.gif

Dabei seit: 27.06.2010
Beiträge: 724
Gästebuch: aktiviert
Level: 40 [?]
Erfahrungspunkte: 1.977.182
Nächster Level: 2.111.327

134.145 Erfahrungspunkt(e) für den nächsten Levelanstieg

Themenstarter Thema begonnen von Heindal
      Zum Anfang der Seite springen

Part IV / Teil IV: Changing Turn

Changing a function like this will change the turn of the hero to the wolf, by increasing a new variable "turn" by one. Turn 2 means its the wolfs turn. So you will have to change all the wolfs attacks as well, to reduce the turn variable by 1 and

Mit der Veränderung der Funktion könnt ihr auch zwischen den Zügen wechseln. Diese Veränderung bewirkt das die turn Variable um 1 steigt. Das heißt der Wolf ist dann am Zug. Beim Wolf müsst ihr es genauso anpassen, nur dass dort nach turn 2 gefragt wird und sich die turn variable dort um 1 reduzieren muss.


Change the code as follows - bold
Änderung im Code fett

__________________


var hp1 = 50;
var hp2 = 50;
var turn = 1;


function attack1(){


if(turn === 1)
{

hp2=hp2-10;
document.getElementById('hitpoints2').innerHTML = hp2;

if(hp2 < 1)
{alert("Held hat gewonnen! / Hero has won!");reset();}

turn=turn+1;
}
else
{
alert("Wolf ist am Zug! / It's the wolf turn!");
}


}

__________________
The future belongs to those, who believe in the beauty of their dreams.
25.04.2017 21:42
Die Betreiber von UR-Radio distanzieren sich hiermit ausdrücklich von dem, durch Heindal am 25.04.2017 um 21:42 verfassten Beitrag.
Sollte dieser Beitrag Ihre Rechte verletzen bitten wir um Benachrichtigung
Heindal Heindal ist männlich
UR Root Moderator


images/avatars/avatar-3063.gif

Dabei seit: 27.06.2010
Beiträge: 724
Gästebuch: aktiviert
Level: 40 [?]
Erfahrungspunkte: 1.977.182
Nächster Level: 2.111.327

134.145 Erfahrungspunkt(e) für den nächsten Levelanstieg

Themenstarter Thema begonnen von Heindal
      Zum Anfang der Seite springen

Hier nun meine Version zum nachspielen und nachbauen.

http://www.heindal.de/urtheweb/Letscodetogether_1.html

Viel Spaß

__________________
The future belongs to those, who believe in the beauty of their dreams.
27.04.2017 12:58
Die Betreiber von UR-Radio distanzieren sich hiermit ausdrücklich von dem, durch Heindal am 27.04.2017 um 12:58 verfassten Beitrag.
Sollte dieser Beitrag Ihre Rechte verletzen bitten wir um Benachrichtigung
Baumstruktur | Brettstruktur
Gehe zu:
UR-Radio » UR Root » Sendungen » UR the Web » 25.04.2017 Special: Let's Code together - HTML5
Please visit our Sponsor
Please visit our Partner

Impressum

Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH