TL;DR: Überblick über HTML, CSS und Javascript Befehle

HTML, CSS und Javascript sind die drei Säulen moderner Webseiten. HTML bildet das Grundgerüst, indem es Inhalte strukturiert. CSS sorgt für das Aussehen, steuert Farben, Abstände und Layouts. Javascript bringt Bewegung hinein, sorgt für Interaktionen und dynamische Inhalte, etwa Slideshows oder Formularprüfungen. Wer Webseiten gestalten möchte, sollte zumindest die wichtigsten Befehle kennen.

Für Einsteiger lohnt es sich, mit HTML-Tags zu starten, dann CSS-Selektoren und Eigenschaften zu verstehen. Javascript kann am Anfang kompliziert wirken, doch einfache Funktionen und Event-Handler sind schnell gelernt. Gerade in Nürnberg und Bayern erlebt man eine lebendige Entwickler-Community, die Programmier-Anfänger unterstützt – ob in Meetups oder Online-Kursen.

HTML: Das Grundgerüst jeder Webseite

HTML (HyperText Markup Language) ist keine Programmiersprache, sondern eine Auszeichnungssprache. Sie definiert, welche Inhalte auf einer Webseite stehen – Überschriften, Absätze, Bilder oder Links.

Wichtige HTML-Befehle (Tags) sind:

• <h1> bis <h6>: Überschriften verschiedener Ebenen


• <p>: Absätze für Fließtext


• <a href="">: Hyperlinks


• <img src="" alt="">: Bilder mit Alternativtext


• <ul>, <ol>, <li>: Ungeordnete und geordnete Listen


• <div> und <span>: Container für Gruppierung und Inline-Inhalte

Diese Tags strukturieren deine Webseite semantisch sinnvoll – wichtig für Barrierefreiheit und SEO.

CSS: So gelingt das Design deiner Webseite

CSS (Cascading Style Sheets) definiert das Aussehen deiner Seite. Schriftarten, Farben, Abstände und sogar Animationen werden hier festgelegt.

Im Kern nutzt CSS sogenannte Selektoren, um HTML-Elemente anzusprechen. Dann folgen Eigenschaften mit Werten:

• Selektoren: Elementnamen (z. B. p), Klassen (.klasse) oder IDs (#id)


• Eigenschaften: Beispielsweise color, background-color, margin, padding


• Werte: Farben (wie #FF0000, rgb(255,0,0), Namen wie „red“), Größen in Pixeln (px) oder Prozent (%)

Klassischer Aufbau einer CSS-Regel:

selector {
  eigenschaft: wert;
}

Beispiel:

h1 {
  color: darkblue;
  margin-bottom: 15px;
}

Wer in Nuremberg an Events wie die „Webweek“ teilnimmt, trifft oft Entwickler, die diese Grundlagen täglich nutzen.

Javascript: So wird deine Webseite lebendig

Javascript ist eine Programmiersprache, die im Browser läuft. Sie ermöglicht Interaktionen – vom einfachen Klick auf einen Button bis zur komplexen Slideshow.

Einfache Javascript-Befehle umfassen:

• Variablen anlegen: let name = "Maria";


• Funktionen schreiben: Mit dem Schlüsselwort function


• Ereignisse auslösen: Zum Beispiel Klicks mit .addEventListener("click", function)


• Daten abfragen oder ändern: Zugriff auf HTML-Elemente via DOM (Document Object Model) mit Methoden wie document.getElementById()

Klar: Javascript kann am Anfang verwirrend sein. Doch einfache Beispiele helfen enorm. Eine Slideshow etwa nutzt oft nur wenige Zeilen Code für Bildwechsel beim Klick.

Anfänger können auf Plattformen wie MDN Web Docs oder lokal bei Meetups in Bayern praktische Unterstützung finden.

Praxisbeispiel: Slideshow mit HTML, CSS und Javascript

Slideshows gehören zu den Klassikern der Webprogrammierung. Sie zeigen Bilder oder Inhalte nacheinander – ideal für Portfolios oder Eventseiten.

HTML-Grundstruktur für die Slideshow

<section class="slideshow">
  <img src="bild1.jpg" alt="Bildbeschreibung 1">
  <img src="bild2.jpg" alt="Bildbeschreibung 2">
  <button id="prev"><<<<<<<<<<<<<< </button>
  <button id="next">>>>>>>>> </button>
</section>

CSS fürs Layout und die Optik

.slideshow {
  position: relative;
  width: 600px;
  height: 400px;
}

.slideshow img {
  width: 100%;
  height: auto;
  display: none;
}

.slideshow img.active {
  display: block;
}

.slideshow button {
  position: absolute;
  top: 50%;
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
}

#prev {
  left: 10px;
}

#next {
  right: 10px;
}

Javascript für die Steuerung der Slideshow

const slides = document.querySelectorAll('.slideshow img');
let current = 0;

function showSlide(index) {
  slides.forEach((slide) => slide.classList.remove('active'));
  
  if(index >= slides.length) current = 0;
  else if(index < 0) current = slides.length -1;
  else current = index;
  
  slides[current].classList.add('active');
}

document.getElementById('next').addEventListener('click', () => {
  showSlide(current +1);
});

document.getElementById('prev').addEventListener('click', () => {
   showSlide(current -1);
});

// Erste Folie anzeigen
showSlide(current);

Tipp: Wer lokal experimentiert, sollte darauf achten, dass Bilder im richtigen Ordner liegen und der Browser Javascript erlaubt.

Mehr zu JavaScript lernen in Nürnberg erfahren Sie hier.

Tipps für den Einstieg in HTML, CSS und Javascript

• Klein anfangen: Erst mal einfache Webseiten bauen. Zum Beispiel nur HTML mit etwas CSS.


• Tutoren suchen: Lokale Gruppen in Nürnberg oder Online-Communities helfen beim Verstehen von Problemen.


• Lernen mit Projekten: Ein kleines Projekt wie eine Slideshow motiviert mehr als nur trockene Theorie.


• Browsertools nutzen: Entwicklerwerkzeuge im Chrome oder Firefox zeigen live an, wie Änderungen wirken.


• Nicht verzweifeln: Programmieren fühlt sich am Anfang oft kompliziert an – dranbleiben lohnt sich!

Noch ein kleiner Abschweifer: Wussten Sie, dass Nürnberg seit Jahren einen starken Fokus auf Digitalisierung hat? Viele Startups hier setzen auf JavaScript-basierte Lösungen – also sind Sie mit diesen Skills gut unterwegs!

Zudem finden regelmäßig Webentwickler-Treffen statt. Ein Besuch lohnt sich fast immer – gerade wenn man schnell weiterkommen will.

Fazit: All diese Befehle machen Webseiten erst möglich

Dreht man das Ganze zurück auf den Alltag – eine Webseite besteht nicht einfach aus Text und Bildern. Sie lebt durch HTML-Struktur, bekommt Form durch CSS und Funktion durch Javascript.

Klar ist es eine Menge Lernstoff. Aber man sieht oft schon nach wenigen Tagen erste Ergebnisse. Gerade wenn man am Laptop sitzt und eigene Ideen zum Leben erweckt, macht das Freude.

Sollten Sie in Nürnberg wohnen oder arbeiten, gibt es viele Möglichkeiten, sich weiterzubilden – sowohl online als auch offline. Die Region Bayern ist digital aktiv und unterstützt Einsteiger gern mit Workshops oder Meetups.

Mehr Infos rund um JavaScript gibt’s hier.