Hier finden Sie uns
Siedler- und Eigenheimervereinigung Regensburg e.V.
Brandlberger Str. 169
93057 Regensburg
Letzte Änderung:
28.04.2024
Willkommen zur Anleitung "Wie baue ich mir meine eigene Webseite"
In dieser Anleitung, die von unserem geschätzten Mitglied "Netfuchs" erstellt wurde, erfahren Sie, wie Sie Schritt für Schritt Ihre eigene Webseite entwickeln können. Netfuchs hat sich dazu entschieden, anonym zu bleiben, aber er stellt sich gerne auf indirektem Wege Ihren Fragen. Sie können diese an unsere SEVR (Support- und Kontaktstelle) senden, indem Sie eine E-Mail an homepage@eigenheimervereinigung.net schicken. Wir leiten Ihre Fragen dann diskret weiter.
Diese Anleitung ist nicht nur für Anfänger gedacht, sondern bietet auch Fortgeschrittenen wertvolle Einblicke und Ideen zur Verbesserung ihrer Webprojekte.
Egal, ob Sie ein eigenes Projekt erstellen möchten, mehr über Webentwicklung erfahren oder einfach nur neugierig sind – wir laden Sie herzlich ein, diese großartige Ressource zu nutzen und Ihre Kreativität im Webdesign zu entfalten.
Die Siedler- und Eigenheimervereinigung Regensburg e.V. dankt Netfuchs herzlich für diese wertvolle Beitrag zur Gemeinschaft.
Ich baue mir meine eigene Webseite.
Mit diesem kleinen Lehrgang wenden wir uns speziell an die junge Generation in der Konradsiedlung. Jeder kann mitmachen. Auch Eltern sind dazu herzlich dazu eingeladen. Wir verwenden kein Baukastensystem, sondern frei verfügbare Computersprachen (HTML, css, yavascript). Der Aufbau der Webseite wird in leicht nachvollziehbaren Schritten erklärt. Da es für jedes Problem mehrere Lösungen gibt, werden wir auch mehrere Lösungsvorschläge erarbeiten.
Eine kurze Einführung und Erklärung warum eine der Sprachen
(html, css, yavascript) verwenden. Zuerst unterscheiden wir unter “HTML”(”Hyper Text Markup Language”)bei dieser Sprache handelt es sich um keine Programmiersprache sondern um eine Auszeichnungssprache. “Css”(”Cascading Style Sheets”) ist eine Stylesheet- Sprache. Bei Javascript handelt es sich um eine Programmiersprache. Im laufe des Kurses werden wir genau herausfinden wo sich die einzelnen Sprachen unterscheiden, und warum eine ohne die andere nicht auskommt. Genug geschrieben jetzt geht`s zur Sache. Zuerst lädst du dir bitte mit Erlaubnis deiner Eltern das kostenlose Programm “Visual Studio Code” aus dem Internet herunter. Nach dem Download Speicherst du das Programm ab. Wenn du es jetzt aufrufst, erscheint eine leere Seite. Mit einer Befehlszeile. Oben rechts findest du einen Button mit Datei. Hier wählst du “neue Textdatei” aus. Nun erscheint auf dem Bildschirm ein kleines Kästchen. Hier klickst du auf “Sprache auswählen”. Daraufhin öffnet sich ein weiteres Fenster. Dort skrollst du runter und wählst“html” aus. Jetzt bist du startklar für die erste Seite deiner Webse.
Du schreibst in die erste Zeile ersten Befehl. In der Fachsprache wird dieses Tag genannt. Das “Tag” beginnt immer mit dem Kleinerzeichen< und endet mit dem Größerzeichen >. Bei deinem ersten Tag handelt es sich bereits um eine Ausnahme. <!DOCTYPE> Es ist genau genommen kein Tag, sondern stellt eine Deklaration dar, die dem Browser anzeigt, welche Sprache du zur Gestaltung der Seite verwendest. Alle Tags die du auf der Seite verwendest stehen innerhalb des Anfangstags <html> und dem Endtag</html>. Außer <!DOCTYPE>.
Aufbau der Seite:
<!DOCTYPE>
<html>
<head>
</head>
<header>
</header>
<body>
</body>
<footer>
</footer>
</html>
Man kann auf Meta-Elemente verzichten oder beliebig viele nutzen. Jedes Meta-Element setzt sich dabei zumindest aus Attributen zu „Eigenschaft“ und „Inhalt“ zusammen.
Ein sehr wichtiges Meta- Element ist das meta charset=”utf8” dies ist die Standard-Codierung im Netz da mit ihr auch Umlaute Dargestellt werden können.
Wie du im Screenshoot sehen kannst stehen die Meta-Tags alle im head. Der head, wie es sein Name sagt ist das Gehirn der Webseite. Alles was im head steht ist auf der Webseite nicht sichtbar.
Kommen wir zum header. Das header-Tag umschließt die Kopfzeile. In der Kopfzeile ist auch die Navigation untergebracht. Um uns ein wenig zurecht zu finden habe ich im header in das Tag <h1>Meine erste selbstgebaute Webseite</h1> geschrieben. Das h in diesem Tag ist keine Zuordnung zum header. <h1> ist ein Tag wie jedes andere. Es gibt an, dass es sich hier um eine Überschrift handelt. Insgesamt gibt es sechs <h>Tags. Von <h1>bis <h6> der Unterschied ist die Schriftgröße. Von <h1> mit der größten Schrift bis <h6> mit der kleinsten Schrift. Mit dem head werden wir uns jetzt dann ausführlich beschäftigen.
Vorher noch den Body. Es ist der Körper der Webseite. Wie du siehst habe ich das <h2> Tag verwendet. Darunter steht ein weiterer Satz in einem <p> Tag. Ein <p> Tag ist ebenfalls eine Angabe für eine Schriftfeld.
Wenn du jetzt alles so eingegeben hast speichere es ab. Dabei ist es wichtig, dass du es in einer html Datei speicherst. Ich habe siedlerweb.html verwendet. Bitte mit einem Kleinbuchstaben am Anfang schreiben, da es sonst beim Aufruf der Seite zu Problemen kommen kann. Keine Angst dazu nachher noch mehr. Schließe die Datei und gehe auf Datei öffnen. Suche nach deinem Dateinamen und lege einen Ordner nur für deine Homepage an. Dort hinein verschiebst du deine Datei.
Jetzt hast du alle Vorbereitungen getroffen um dir das kleine Kunstwerk einmal anzusehen. Du rufst die Seite auf und gehst. Oben in der Eingabeleiste erscheint dein Dateiname. Klicke mit der rechten Maustaste darauf. Es öffnet sich ein Fenster. Hier gehst du auf “Im Datei Explorer anzeigen.” Du wirst weitergeleitet auf deinen Ordner mit all deinen Dateinamen die in diesen Ordner gehören. Klicke deine Datei an. Deine erste Seite wird sichtbar.
Soviel erstmal zu ein paar HTML-Eigenschaften. Im folgenden Abschnitt werden wir die ganze Seite mit der Einbindung von CSS auf Vordermann bringen. Ich denke ein wenig Farbe tut gut. Du gehst wieder auf die Seite mit deinem Quelltext.
Zum gestalten der Seite allgemein ob mit Farbe oder Größe, gehen wir in den head. Unterhalb der meta-Tags habe ich ein neues Tag eingefügt <style></style>. Alle Anweisungen innerhalb dieses Tags werden auf der Seite ausgeführt. Dein header soll Farbe bekommen. Dazu geben wir ohne<> im head in das style Tag header ein. Und setzen dahinter eine geschweifte Klammer. Das geht, wenn du Strg, Alt und gleichzeitig das Klammerzeichen auf der Taste mit der 7 drückst. Das Wort header erscheint nun gelb unterstrichen. Lass dich nicht verwirren, das sagt nur, dass in den gelben Klammern noch nichts geschrieben steht. Wenn du der gleichen Meinung bist die Überschrift gehört in die Mitte dann gibst du in die Klammer folgendes ein.: text-align: center; Ganz wichtig vergiss das Semikolon( ; ) am Ende des Befehls nicht. Sonst wird deine Anweisung nicht ausgeführt. Das Platzieren der Texte auf der Webseite, an von dir gewählten Plätzen gehen wir in weiteren Abschnitten ausführlich durch. Die nächste Anweisung: color: blue, ändert die Schriftfarbe. Um die Hintergrundfarbe zu ändern, gibst du background-color: orangered; ein. Das sind meine Farbvorschläge. Gehe jetzt mal mit dem Mousezeiger auf die Farben. Es öffnet sich ein Fenster mit einer Farbscala. Führe die Maus auf dieses Fenster und du kannst die Farben deinen Vorstellungen anpassen.
Das Gleiche machen wir nun mit dem <body>. Im Body-Tag haben wir zwei Tags <h2> und <P>. Jede der beiden Schriften soll eine eigene Farbe bekommen. Dazu musst du jedes Tag einzeln ansprechen. Dazu gibt es wie ich von Anfang an gesagt habe mehrere Möglichkeiten. Entweder wir geben die Anweisung direkt in den Tag ein:
<h2 style ”color:blue”;>Text</h2>.
<p style “color: green”;.> Text</p>
Wie du im Screenshot sehen wirst, habe ich den Text mit Text-align:center in die Mitte gesetzt. So wie ich das jetzt gemacht habe ist eine Möglichkeit.
Oder eine weitere Möglichkeit ist, dass wir den Befehl in den Head verlagern und mit einer Zuweisung den jeweiligen Tag gestalten.
body{background-color: maroon;}
h2 {color: white;
text-align:center;}
p {color: red;
text-align: center;}
Speichere diese Anweisungen ab und sie dir dein Kunstwerk an.
Im folgenden Abschnitt werde ich dir die Gestaltung der Seite mit css Techniken etwas genauer zeigen.
Einstieg in CSS
Neue Inhalte 19.11.2023
Neue Inhalte 21.12.2023 !
Hallo und willkommen jetzt in der Welt des Programmierens. JavaScript ist die bekannteste Programmiersprache der Welt. Sie ist relativ einfach jedoch Fehler darf man sich keine erlauben. Denn sonst kann es passieren das gar nichts was du programmiert hast funktioniert. Was ist wichtig beim Programmieren? Zuerst brauchen wir eine Idee. Ich habe mir ein Spiel ausgedacht. Das heißt Zahlenraten. Der Computer denkt sich eine Zahl und du musst sie erraten. Wenn es der Computer auch nie zugeben würde, stimmt es doch er vergisst sehr schnell. Also brauchen wir etwas was es uns ermöglicht dem Computer ein Gehirn zu geben in dem er sich Eingaben merkt. Dafür gibt es Variablen.
Jeder Variablen wird eine Bedeutung zugeordnet (Deklaration)
Jetzt überlegen wir uns welche Variablen benötigen wir.
1- Der Computer soll sich eine Zahl ausdenken.
Diese Variable nennen wir: var die gedachteZahl;
2- Der Spieler rät eine Zahl.
Diese Variable nennen wir: var gerateneZahl;
3- Wir wollen wissen wieviel Versuche der Spieler beötigt um die richtige
Zahl zu erraten.
Diese Variable nennen wir: var anzahlderVersuche;
4- Nun brauchen wir noch die höchste Zahl die sich der Computer als geheime höchstmögliche Zahl ausdenkt.
Diese Zahl nennen wir : var höchstmöglicheZahl;
Nach jeder Eingabe soll uns der Computer sagen ob die eingegebene Zahl zu hoch oder zu niedrig oder sogar richtig ist.
Wenn die Zahl zu niedrig ist soll in der Anzeige "Die Zahl ist zu niedrig" erscheinen.
Wenn die Zahl zu hoch ist soll in der Anzeige "Die Zahl ist zu hoch" erscheinen.
Wenn es die richtige Zahl ist soll in der Anzeige "Richtig geraten, du hast X Versuche benötigt" erscheinen.
So sieht der erste Teil unser Javascript-anweisung aus.
Anwendung der Deklaration der Variablen
var diegedachteZahl;
var gerateneZahl ;
var anzahlderVersuche = 0;
var höchstmöglicheZahl = 100;
Wir sehen hinter den Variablen diegedachteZahl; und gerateneZahl; steht kein Wert. Diese Variablen haben keine festen Werte.
Der Wert der Variablen diegedachteZahl wird vom Computer jedes Mal neu per Zufallsgenerator ausgewählt. Sie bleibt nur bis zum Ende des Spieles gespeichert.
Der Wert der Variabel gerateneZahl hat eine noch kürzere Verweildauer auf dem Rechner. Sobald der Rechner festgestellt hat, welche der drei Aussagen auf die Zahl zutrifft zeigt er dies im Fenster oben an und die Eingabe verschwindet vom Computer.
Die Variablen höchstmöglicheZahl hat einen konstanten Wert. Den habe ich auf 100 festgelegt . Dieser Wert bleibt für den Spieler nicht einsehbar.
Der Computer soll sich eine Zahl ausdenken.
Da ein Computer strunz dumm ist wie ich bereits erwähnte, wird es ihm sicher nicht möglich sein sich eine Zahl auszudenken. Ohne dass man ihm genaue Vorgaben macht. Also geben wir ihm die nötige Hilfe. Zuerst verwenden wir den Befehl: Math.random(). Dieser Befehl sucht eine Zufallszahl zwischen 0 und 1 aus. Da unsere höchstmöglicheZahl 100 sein soll müssen wir die Zufallszahl mit 100 multiplizieren. Jetzt bauen wir auf unsere Variable höchstmöglicheZahl ein. Als Anweisung schreiben wir:
diegedachteZahl = Math.random()* höchstmöglicheZahl;
* ist das Zeichen für die Multiplikation
Jetzt erhalten wir eine Zahl zwischen 0 und 99 mit jeder Menge Kommastellen dahinter. Da ich mir aber eine ganze Zahl von 1 bis 100 für das Spiel in den Kopf gesetzt habe, verwende ich einen weiteren Befehl: Math.round(). Dieser Befehl sagt dem Computer dass er die Zahl nach den mathematischen Regeln auf- oder ab- runden soll. Hier haben wir die nächste Schwierigkeit. Es könnte die Zahl 0 als diegedachteZahl vorkommen. Darum addieren wir 0,5 mit diegedachteZahl. Die Summe der daraus lassen wir durch die Funktion Math.round zu einer ganzen Zahl runden.
diegedachteZahl = Math.round(diegedachteZahl+0,5);
Die ganze Funktion sieht nun so aus.:
diegedachteZahl = Math.random()* höchstmöglicheZahl;
diegedachteZahl = Math.round(diegedachteZahl+0,5);
Jetzt beginnen damit den Ablauf des Ratens zu steuern.
Wir können exakt zu 99% davon ausgehen dass der Spieler das erste mal falsch liegt mit seiner Vermutung. Dass der Computer die richtigen Antworten geben kann, und die richtigen weiterführenden Anweisungen geben kann, verwenden wir die Funktion der do-while Schleife. In Fachbüchern auch do-while loop genannt. Wir beginnen mir dem Schlüsselwort do. Zuerst soll der Spieler eine Zahl eingeben. Moment wo soll er die hinschreiben? Dazu haben wir die Eingabe prompt. Die Befehle setzen wir wieder in eine geschwungene Klammer. Bei aufrufen der Seite soll sich ein Dialogfenster öffnen. In diesem soll stehen. Rate bitte eine Zahl bis 100. Nach Eingabe der Zahl soll soll der Computer vergleichen ob die gedachteZahl richtig, höher oder niedriger ist als die gerateneZahl. Dazu verwenden wir die if-Funktion.( if =wenn ) Hier kommt wieder ein neuer Befehl dazu. alert er sagt dem Computer, dass er seinen Komentar im Dialogfenster ausgeben soll. Der Computer gibt dir so lange Bescheid bis du die richtige Zahl eingibst. Das heisst bis er die Schleife durchlaufen hat. Jedes mal zählt er bei der Variablen anzahlderVersuche 1 dazu. Bei Eingabe der richtigen Zahl ist die Schleife durchlaufen, da die Bedingung gerateneZahl != diegedachteZahl erfüllt ist. Er zeigt an richtig geraten.
do{
gerateneZahl = prompt("Rate bitte","Eine Zahl bis" + höchstmöglicheZahl);
if( gerateneZahl> diegedachteZahl){
alert("Deine Zahl ist zu groß");
}
if( gerateneZahl < diegedachteZahl){
alert("Deine Zahl ist zu klein");
}
anzahlderVersuche = anzahlderVersuche + 1; }
while(gerateneZahl != diegedachteZahl);
if (gerateneZahl == diegedachteZahl){
alert("richtig geraten");
}
alert("Du hast"+ anzahlderVersuche + "Mal geraten");
Hier der komplette Quelltext
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SPIELE Zahlen raten</title>
</head>
<header>
<h1>SPIELE Zahlen raten</h1>
</header>
<body>
<table>
<thead>
<script>
// Anwendung der Deklaration der Variablen//
var diegedachteZahl;
var gerateneZahl;
var anzahlderVersuche = 0;
var höchstmöglicheZahl = 100;
// Nun soll sich der Computer eine Zahl ausdenken//
diegedachteZahl = Math.random()* höchstmöglicheZahl;
diegedachteZahl = Math.round(diegedachteZahl+0,5);
// Nun beginnen wir mit der do-while-Schleife//
do{
//Hier findet- in der Schleife - das Raten statt//
gerateneZahl = prompt("Rate bitte","Eine Zahl bis" + höchstmöglicheZahl);
if( gerateneZahl> diegedachteZahl){
alert("Deine Zahl ist zu groß");
}
if( gerateneZahl < diegedachteZahl){
alert("Deine Zahl ist zu klein");
}
anzahlderVersuche = anzahlderVersuche + 1;
//das Ende der Schleife :ist deine geratene Zahl ungleich
//der ausgedchten Zahl, geht es oben nach dem 'do' erneut los
}
while(gerateneZahl != diegedachteZahl);
// Die Ausgabe am Ende des Spieles
if (gerateneZahl == diegedachteZahl){
alert("richtig geraten");
}
alert("Du hast"+ anzahlderVersuche + "Mal geraten");
</script>
<button><li><a href="Spiel Zahlenraten.html">neues Spiel</a></li></button>
</body>
Druckversion 