Yeah!

Hahaaaaaaaa, wie geil!

Mit den heutigen Übungen im Kurs konnte ich endlich verstehen wo mein Fehler im html lag. Ich hatte ja in all meinen Seiten immer das Problem, dass mir häufig CSS-Befehle nicht angenommen wurden und irgendwie war niemanden so klar wo das Problem lag.
Da ich heute wieder leicht am Ausrasten- und nahe dran war den PC anzuschreien, rief ich unseren Trainer zurate. Auch er war anfangs ratlos, doch nach ein paar Minuten hatte er die Lösung. Das Problem lag an diesem Befehl im Kopfbereich:

<link href="style.css" rel="stylesheet" type="text/css">

Der schlussendlich so lauten musste:

<link href="style.css" rel="stylesheet">

Boa ey, jetzt kann ich echt all meine Seiten umschreiben, ABER ich hab endlich verstanden was ich ändern muss!
…noch 3 Tage und ich hab Urlaub :D…da gehts dann ab! Gehege bauen und htmllllllllllln ;-P =)

UND ….EIN NEUER PC MUSS HER!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

und…gameguruuuuun!!!

Responsive Design

Ich bin schon das ganze Wochenende dabei eine neue Website zu erstellen. Optisch gefällt sie mir sehr gut, trotzdem habe ich Probleme meine Idee in „Responsive“ umzusetzen. Das nervt mich tierisch, weil ich ansonsten voll zufrieden wäre. 
Wahrscheinlich lässt sich mein Werk noch nicht so ganz verwirklichen, weil ich im Responsive-Design noch kaum Ahnung habe, andererseits könnte ich eine Responsive-Website erstellen, allerdings ohne meinen Menü-Banner. Möglicherweise ist der Menü-hover-Banner noch nicht so ganz ideal für die Art von Seite, die ich erstellen muss, doch ich liebe diesen Effekt! 
Naja, egal… ich werde die Seite so lassen wie sie ist – vielleicht noch ein bisschen rumprobieren – aber im Groben und Ganzen lasse ich sie so und frage dann den Trainer, wie ich vorgehen muss um alles in responsive darstellen zu können. …da bin ich mal gespannt 🙂
Ich denke, dass sich meine Idee mit Javascript besser umsetzen ließe, da ich aber mit jener Scriptsprache noch kaum Ahnung habe, werkle ich noch im HTML sowie CSS rum.

Menü mit Hover-Bilderwechsel

Gestern wollte ich mal schauen, ob es möglich ist eine Slideshow so abzuändern, dass man die Bilder mittels eines Menüs mit Hovereffekt aktivieren kann.
Ich hatte ganz übersehen, dass die Slideshow mit Javascript funktioniert, wodurch ich es dann sein gelassen habe. Es war zwar möglich „onklick“ einfach mit „onmouseover“ zu tauschen, aber die dots konnte ich nicht in ein Menü abwandeln.
Nichtsdestotrotz konnte ich einen Banner erstellen, der über das Menü die Bilder wechselt.
Hier mein Testbeispiel:

Schwer tue ich mich nun, die komplette Seite zu zentrieren und auch das Menü etwas mehr rechts vom Bild zu haben….aber ich werde mich weiter üben^^ Eigentlich wollte ich es rechts unter dem Bild haben, aber irgendwie will es noch nicht so wie ich mir das vorstelle^^ Doch ich bin froh, dass ich zumindest nahe an meiner Vorstellung dran bin 😀
Natürlich muss auch noch der leere Banner etwas an Farbe gewinnen. Er wird sich noch ändern, es war lediglich mal ein Test.

Dienstag

bin wieder zuhause 🙂
ich kann nun tabellen erstellen^^
da muss ich gestehen, dass ich anfängliche schwierigkeiten hatte. vor allem deswegen, weil ich erst checken musste, welcher befehl was auslöst…hat ne weile gedauert, aber ich werde demnächst ein paar tabellen basteln. ich muss immer alles ausprobieren und anschauen, um genau zu verstehen was ich ins html tippe.
– auf jeden fall freue ich mich sehr auf die nächste aufgabe, dabei geht es um die gestaltung bzw. die erarbeitung der eigenen homepage und ich denke, dass ich sehr gerne daran arbeiten- und mit sicherheit ein schlaffreies we haben werde xD
schlaffrei deswegen, weil ich bestimmt wieder irgend welche unrealisierbaren effekte einbauen möchte.
eine idee hab ich schon, doch die ist mit verdammt viel arbeit verknüpft, da ich für dieses projekt noch zu wenig kann. doch ich werde mich draufstürzen und einfach mal mit den möglichkeiten, die ich im moment habe, versuchen der idee näher zu kommen.
ich freue mich riesig darauf, denn ich kann wieder kreativ sein, herumtüfteln, meinen pc anschreien und zuschauen, wie meine idee an farbe gewinnt. und das tolle daran ist, ich erhalte ein feedback, das feedback eines profis und jenes der restlichen teilnehmer des kurses! 🙂
schmett 3

 

html –

Bin gerade dabei an einer Seite zu arbeiten.
Momentan arbeite ich ohne CSS, weil wir es noch nicht durchgenommen haben. Es soll eine einfache Seite mit mehreren, im Menü verlinkten Unterseiten sein. Bis auf das Menü im Footer funktioniert auch alles, leider konnte ich den Fehler noch nicht ausfindig machen. Die Links werden im Footer zwar angezeigt, doch sie lassen sich nicht anklicken 😀
Ich vermute, dass sich irgend etwas beißt, doch fragt mich nicht was^^ Wahrscheinlich sind es die beiden Link-Menüs, doch ich wollte Impressum oder bspw. Datenschutz nicht im top-Menü haben. Ich werde es mir morgen genauer anschauen, ansonsten frage ich den Lehrer, was ich falsch gemacht habe. Vielleicht ist es auch das fixierte Logo??? KA 😀
Mal hoffen, dass ich es noch rauskriege^^

 

html -8-)

Demnächst werde ich eine kleine Website mit einfachen Html-Elementen entwerfen =)
Ich freue mich schon darauf und bin gespannt wie ich das Erlernte anwenden werde. Damit ich alles im Kopf behalte, werde ich versuchen den Html-Code mit Inhalt- zunächst – vom Kopf heraus zu schreiben, denn so lerne ich am besten, in der Hoffnung, dass mir zukünftig alles automatisch von der Hand geht 🙂
Doch bei diesem Lehrer habe ich keine Zweifel, das wird schon hinhauen! Echt klasse!

 

Html – =)

Auch heute gabs wieder einen tollen Unterricht, diesmal durften wir uns mit Block- und Inlineelementen beschäftigen und zudem das Einfügen von Textfeldern sowie Check- und Radioboxen testen. Wir haben viel Rumprobiert und es hat mir extremen Spaß gemacht, auch wenn ich heute sehr müde war! Diesem Lehrer höre ich echt gerne zu, er bringt den nötigen Witz mit in den Unterricht und erklärt echt gut 🙂

html – 2. Unterrichtstag :)

AHHHHHHHHHHHHHHH, MEGA 🙂

Ein echt mega geiler Lehrgang, genau das was ich mir erhofft hatte!
Heute hatten wir mit html angefangen, wobei uns jeder einzelne tag bzw. jeder einzelne Befehl genau erklärt wurde. Natürlich durften wir die ganze Zeit üben und die neu erlernten Befehle ausprobieren.

html_index

Es machte mir wahnsinnig viel Spaß, auch wenn ich jene Übungen schon kannte,  war es eine tolle Wiederholung, weil ich bereits Vieles vergessen hatte, nebenbei weiß ich nun, dass <br> „break“ bedeutet und, dass ich nicht kilometerlange breaks im html setzen muss, sondern deren Höhe im CSS festlegen kann.^^
Ich bin richtig glücklich, diesen Lehrgang besuchen zu dürfen…es ist echt hammer!

party_smiley

Wir arbeiteten nicht mit Notepad++, sondern mit dem Text- und Code-Editor „Adobe Brackets“, den ich mir neben Notepad++ installieren werde, damit ich Zuhause, dasselbe Programm wie im Unterricht benutzen kann. Ich muss jedoch sagen, dass ich auch mit dem Notepad++ immer gut klar kam.
Unser Lehrer ist echt klasse!

 

Javascript Zusammenfassung

Ich fasse für mich zusammen, weil ich auf diese Weise leichter bzw. schneller lerne. Außerdem muss ich zuerst mal verstehen, WARUM gewisse Befehle angegeben werden müssen und welche Funktion sie haben, weil ansonsten verstehe ich nur Bahnhof. Wobei ich natürlich einiges schon kenne, aber trotzdem aufschreiben möchte.
Es wird eine Weile dauern, doch ich werde versuchen diese Zusammenfassung nach und nach zu erweitern.

Einstieg in Javascript

script

Javascript Anweisungen müssen zunächst in den HTML-Code eingebunden werden. Das Script kann entweder im Header- oder im Bodybereich eingefügt werden. Wird das Script bspw. im Header eingebunden, so wird es bevor sich die Website öffnet ausgeführt.
Das Script ist mittels eines -Tags anzugeben und all das was sich in diesen Container befindet ist ein Script. Damit verständlich wird, um welche Scriptsprache es sich handelt, kann man dies über den Parameter „language“ angeben, wodurch der Befehl lautet:

language javascript

Der Script-Typ wird mittels“type“ angegeben.

Beispiel:

type javascript

Wird zum Beispiel eine separate Scriptdatei verwendet, so muss man das ebenfalls im Code angeben und zwar durch das Attribut „src„, das auf den Pfad zur separaten Datei hinweist:
<script language=“javascript“ type=“text/javascript“ src=“meineFunktion.js“>

Elementare Grundstrukturen von Javascript

Variablen
Arrays
Datentypen
Operatoren
Ausdrücke
Anweisungen
Kommentare

Variablen

Variablen werden mit const, let oder var deklariert und sind ein Speicher oder Platzhalter , denen zur Laufzeit eines Scripts über das Gleichzeichen temporär Werte zugeordnet werden können. Angesprochen werden diese Variablen über Namen, die sie vorher zugewiesen bekommen haben.

Hier ein Beispiel zu einer Variable ohne Typ und ohne Wert:

var Hanswurst;

Hier ein Beispiel zu einer Variable mit Wertzuweisung:

var Hanswurst =50;

Die Variable Hanswurst wird somit als Zahl festgelegt und erhält den Wert 50.

Nun ein kleines Übungsbeispiel:

HTML:

javascript_html_hanswurst

Javascript:

javascript var hanswurst

document.write(„<BR>“) legt den Zeilenumbruch fest.

Ergebnis im Browser:
javascript ergebnis browser

Im weiteren Beispiel wird dem Wert eine Zahl hinzugefügt, wodurch sich das Endergebnis ändert, bzw. erhöht:

html Gemüsekiste
javascript rosemadder

Ergebnis:

browser rosemadder

Arrays

Ein Array ist eine Sammlung von Variablen, die jeweils mittels eines Namens gekennzeichnet sind und dienen dazu eine Reihe von gleichartigen Informationen zu speichern, wie zum Beispiel die Tage eines Monats.

Beispiel:

var Dies_ist_Tag_1 = 1;
var So_ein_Tag_2 = 2;
var Noch_ein_Tag = 3;
var Undnocheiner = 4;
var Tag_5 = 5;
var Und_hier_Tag_6 = 6;
var Tag_7 = 7;

var Jetztwirdeszweistellig = 10;
var Tag_11 = 11;

var Tag_28 = 28;
var Tag_29 = 29;
var Tag_30 = 30;

Der Unterschied eines Arrays ist – im Vergleich zu einer herkömmlichen Variable – dass man neben dem Namen, noch die Anzahl von Elementen angeben- oder ein Kennzeichen setzen muss, dass es sich um ein Array handelt. Zudem wird zur Erzeugung dessen ein Schlüsselwort namens „new“ verwendet.

Beispiel:

var Tag_im_April = new Array(30);

Wenn man einem Element eines Arrays einen Wert zuordnen möchte, dann muss man diesen in einer eckigen Klammer angeben:

var Tag_im_April [ 0 ] = 1;
var Tag_im_April [ 1 ] = 2;

var Tag_im_April [ 29 ] = 30;

Die vier Grundtypen von Variablen

  • Object
  • Number
  • Boolean
  • String

Object = Kann einen Wert eines beliebigen Typs enthalten. In der Regel dient „Object“ zum Speichern von Instanzen von Klassen.

Number = Diese Variable kann einen Dezimal- oder einen Gleitkommawert enthalten. Sie angegebenen Zahlen müssen anstelle des Kommas einen Punkt enthalten.

Boolean = Bei diesem Variablentyp wird nur entweder „true“ oder „false“ angegeben.

String = Dieser Typ der Variablen kann normalen Text sowie auch Zahlen beinhalten.

Schlüsselworte

Bei Schlüsselwörtern in Javascript, handelt es sich um sogenannte „reservierte Wörter“ (reserved words), die nicht als Name für einen Bezeichner verwendet werden dürfen, weil ansonsten die Ausführung des Programms verhindert wird. Aus diesem Grund muss man bei der Namensgebung eines Bezeichners darauf achten, dass es sich dabei nicht um ein Schlüsselwort, bzw. um ein reserviertes Wort handelt.

Reservierte Wörter (aus SELFHTML-Wiki)

Reserviertes WortErläuterung
breakTeil einer Abbruchanweisung. Wird verwendet in Schleifen und bei switch.
caseFür Fallunterscheidungen mit switch.
catchWird bei der Fehlerbehandlung mit try und catch verwendet.
classFür die Definition einer Klasse (ES6).
constLeitet die Deklaration einer oder mehrerer Konstanten ein.
continueTeil einer Fortsetzungsanweisung.
debuggerDefiniert einen Haltepunkt im Programm für Debugger.
defaultStandardklausel bei switch. Auch verwendet bei Standardexport in einem Modul.
deleteOperator zum Löschen von Objekteigenschaften.
doFür Schleifen mit do und while.
elseTeil einer bedingten Anweisung mit if.
exportWird bei der Deklaration eines Exports in einem Modul verwendet.
extendsMit dem Schlüsselwort extends kann eine abgeleitete Klasse definiert werden.
finallyKann bei der Fehlerbehandlung mit try und catch verwendet werden.
forWird in verschiedenen Schleifen verwendet.
functionSchlüsselwort zur Definition einer Funktion.
ifFür bedingte Anweisungen.
importWird verwendet bei der Deklaration eines Imports aus einem Modul.
inOperator in einem relationalen Ausdruck. Auch verwendet in einer Schleife mit for.
instanceofHiermit kann geprüft werden, ob ein Objekt eine Instanz eines Konstruktors ist.
newOperator für den Konstruktorenaufruf.
returnTeil der Rückgabeanweisung einer Funktion.
superSchlüsselwort zum Methoden- oder Konstruktorenaufruf in Objekt oder abgeleiteter Klasse.
switchFür Fallunterscheidungen.
thisEingebaute Kontextvariable von Funktionen.
throwErzeugt eine benutzerdefinierte Ausnahme.
tryWird bei der Fehlerbehandlung mit try und catch verwendet.
typeofOperator, der den Datentyp des Operanden zurückgibt.
varSchlüsselwort für die Deklaration einer oder mehrerer Variablen.
voidWertet den Ausdruck auf der rechten Seite aus und gibt standardmäßig undefined zurück.
whileWird bei Schleifen verwendet.
withKann verwendet werden, um mehrere Anweisungen mit einem Objekt durchzuführen.
yieldPausiert die Ausführung einer Generatorfunktion.

Weitere Schlüsselwörter, die nicht als Name für einen Bezeichner  verwendet werden sollten:

Reserviertes WortErläuterung
letLeitet die Deklaration einer oder mehrerer Variablen ein.
staticWird verwendet um innerhalb einer Klasse eine eigene Methode zu definieren.
Reserviertes WortErläuterung
nullRepräsentiert die beabsichtigte Abwesenheit eines Wertes.
falseBoolescher Wert, der für falsch steht.
trueBoolescher Wert, der für wahr steht.

  • implements
  • interface
  • package
  • private
  • protected
  • public

Anweisungen

HTML/CSS: Menü funktioniert! =)

So, jetzt hab ich es endlich geschafft, dass mein Menü nicht zusammenbricht, sobald das Browserfenster verkleinert wird. Ich hätte noch gerne auf jedem Button ein Icon, doch bei längerem Linktext, wie bspw. „Impressum“ rutscht der Text immer unter den Button. Ich hab zwar herausgefunden, wie ich mein Icon positionieren kann, doch es haut irgendwie nicht hin, dass alle Icons mit Schrift einheitlich positioniert sind. Aus diesem Grund gibt es nur das Home-Icon 😀

hier der Link zur Seite:

Dams

– Der Banner muss noch ausgeschmückt werden, außerdem möchte ich noch ein weiteres Menü einsetzen, allerdings anders positioniert und dann müsste ich noch gucken ob es senkrecht oder ebenfalls horizontal erscheinen soll.
Der Name der Site (Dams) ist auf jeden Fall noch wandelbar, denn den Namen gibt es schon…es ist alles noch wandelbar und dient einfach nur dazu, ein Gefühl für html und CSS zu bekommen. Es gibt noch Vieles zu lernen, leider ist das Tutorial nun fertig, ich finde es schade, dass Macjo nicht weitere Tutorials hochgeladen hat, da er wirklich gut und verständlich erklären kann.
Es gibt sicherlich noch x weitere Youtuber, die ähnliche Tutorials anbieten, doch mir wäre es lieber gewesen weiterhin von ihm zu lernen.

HTML/CSS: Kleiner Spaß :-) (Image-Hover-Button)

Letztlich dachte ich mir, dass es cool aussehen könnte, Tastatur-Tasten als Buttons zu benutzen. Schlussendlich hab ich welche gemacht und versucht sie einzusetzen. Leider gefallen sie mir nicht. Sie sehen zwar witzig aus, doch die normalen CSS-Buttons sind deutlich schöner. Aus diesem Grund werden sie nicht zum Einsatz kommen, aber es ist nicht schlecht, dass ich sie gemacht habe, denn so ein Image-hover-Button kann mir vielleicht später mal nützlich sein. Es war jedenfalls eine spaßige Übung, auch wenn ich ziemlich lange daran herumgebastelt habe 🙂

Die Icons von den Tasten-Buttons sind nicht von mir, ich hab sie mir bei deviantart herunter geladen 🙂
Es war nur ein Test, ansonsten hätte ich natürlich selbst welche gezeichnet.

HTML & CSS: Hover Effekt mit Button

Heute konnte ich wieder an meiner Testwebsite arbeiten.
Momentan bin ich am Lernen, wie man Buttons mit diversen Effekten erstellt und wie man mit Schriften arbeitet.
Ab einem gewissen Punkt, wenn ich das Fenster verkleinere, bricht mein Menu zusammen, ich werde daran arbeiten, dass es hinhaut. Es hatte bereits funktioniert, aber ich wollte die buttons erstens nicht ganz oben starten und ihnen auch einen gewissen Abstand verleihen und somit wars dahin^^
Sobald das Fenster eine gewisse Größe erreicht, klappen die buttons nach unten und das ist mega sch…
Ich muss mir das CSS noch ein bisschen genauer angucken.

… LOL, ich habs hinbekommen. Nun sehen die buttons zwar anders aus, aber nun funktioniert es 😀

so, nun passt es, doch zufrieden bin ich nicht, weil jetzt die Schrift zu klein ist…ich musste sie verkleinern, weil sonst der Button-Text nach unten gerutscht wäre

nö…es fuchst immer noch -.- HOPPSALA xD
…ich habs, es ist das LOGO xD, das Logo ist der Grund für die runter springenden Buttons xD…ey -.-

– Wahrscheinlich ist das was ich hier gerade gemacht habe, nicht wirklich möglich 😀
Ich hab da zwei oder 3 verschiedene Tutorials vermischt, also irgendwie umfunktioniert, ohne wirklich schon Ahnung, von einem Button-Menü zu haben, denn im Turorial ging es nur um den Button. Eigentlich käme ein normaler Link oben in die Navigation, aber ich wollte eben den durchsichtigen Navigationsstreifen und ein Button-Menü^^…ich finde das voll cool 🙂 (Morgen schau ich mit einer box zu arbeiten)
Doch ich glaube, dafür muss man andere Befehle geben und die jeweiligen Buttons auch numerieren bzw. ihnen eine class zuteilen. Jo, das is mir aber jetzt echt zu viel, ich hab heute nur 2 Stunden geschlafen. Doch ich werde weiter daran arbeiten und einfach mal die Turorials weiter (der Reihe nach) verfolgen, weil die sind wirklich super!

Tutorial(CSS Tutorial deutsch, CSS3 lernen für Anfänger #1):

CSS Tutorial deutsch, (CSS3 lernen für Anfänger #1 (2018)):

HTML und CSS

Vorgestern hab ich mit html und CSS begonnen, da ich mich auf eine Ausbildung vorbereiten möchte. Es läuft sehr gut, ich konnte bereits eine komplette Seite mit Menü, Links und Bildern erstellen. Mit dem Notepad++ klappt das recht gut, weil man den html- und den css Code nebeneinander legen kann und somit alles gut im Überblick hat. Ein paar Fehler sind noch drin (der Text oder die Bilder passen sich dem Fenster nicht an und das wird bei Handys problematisch. Nebenbei springt die Überschrift hin und her), da mir noch das Wissen dazu fehlt, doch ich werde weiter lernen und daran arbeiten. Ich muss die Positionierung abändern, momentan lautet mein Befehl für den Text so:
margin-left: 400px;
margin-right: 400px; und das führt natürlich dazu, dass sich der Text nicht dem Fenster anpassen kann…doch das muss ich eben noch checken 😀

Es macht richtig Spaß!

Hier meine Test-Website:

Dams

(es ist alles erfunden, auch das Logo ist nur ein Testlogo)

Gameguru hab ich mal zur Seite gelegt, da mein Computer einfach zu alt ist und sich die Gestaltung des Spiels als noch mühevoller als erwartet herausstellt. Ich warte jetzt mal ab, bis die ganzen Neuerungen heraußen sind und bis ich einen neuen, gut funktionierenden PC habe.
Es ist auch so, dass ich des Öfteren an komplett selbst erstellten Objekten arbeite…stundenlang daran arbeite… und dann lassen sie sich aus unerklärlichen Gründen nicht hochladen. Das Sofa, welches ich erst kürzlich erstellt hatte, lässt sich ebenfalls nicht ins Spiel integrieren, nur die Kissen. Das Problem dabei ist, dass ich absolut nicht verstehe wo der Fehler liegt und jo, das nervt! 🙂