Was du als Nächstes lernen kannst

Herzlichen Glückwunsch zum Erlernen der Grundlagen von HTML und CSS! Jetzt verstehst du schon viel, was in den Webseiten, welche du im Internet siehst, abläuft. Und hoffentlich bist du in der Lage, dir diese Webseiten anzuschauen und zu erkennen, welche HTML-Tags und CSS-Eigenschaften sie verwenden.

Es gibt aber noch eine ganze Menge mehr über HTML und CSS zu lernen. Lies weiter!

Weitere HTML tags

Form tags: Es gibt mehrere Tags, die verwendet werden, um Webformulare zu erstellen, wie<button>s und <input>s. Sie werden in der Regel verwendet, um Daten zurück an einen Server zu senden, was wir auf der Khan Academy nicht erlauben. Sie können auch mit JS verwendet werden, um ein Spiel zu programmieren, was wir z.B. im HTML/JS-Kurs zeigen. Zu Formulartags kannst du in dieser Slideshows mehr lernen. Serverseitige Sprachen wie PHP, Python, Ruby kannst du auf der Codecademy lernen.
Iframes: Der <iframe> Tag ist eine Möglichkeit, eine andere Webseite innerhalb deiner Seite zu gestalten und ist praktisch für Dinge wie das Einbetten von YouTube-Videos, Google Maps, etc. Dieser Tag ist an der Khan Academy derzeit aus Sicherheitsmassnahmen deaktiviert, kann aber an anderer Stelle ausprobiert werden. Diese Slides zeigen dir mehr dazu.
Multimedia tags: Die <audio> und <video> Tags werden in modernen Browsern unterstützt, um Audio- und Videodateien auf Webseiten abzuspielen. Wie das <iframe>-Tag sind sie derzeit auf der Khan Academy deaktiviert, können aber anderswo verwendet werden. Diesen Slides zeigen dir mehr.
Neue semantische Tags: In den letzten Jahren wurden als Teil der "HTML5"-Spezifikation, neue semantische Tags hinzugefügt, welche anstelle von <div>s verwendet werden können wie z. B. <article>, <aside>, <nav>, etc. Es gibt viele Artikel darüber, darunter dieses praktische flowchart, um zu entscheiden, wann sie verwendet werden sollen.

Mehr CSS-Selektoren und Eigenschaften

Diese solltest du alle auf der Khan Academy ausprobieren können:

CSS3: Wir haben den Teil von CSS behandelt, welcher schon seit Jahren von den Webbrowsern unterstützt wird. Aber es gibt viele neue CSS-Eigenschaften und -Selektoren, bekannt als "CSS3". Die Webbrowser unterstützen diese in den neuen Versionen immer besser. Lerne mehr dazu in diesen Folien und Folien zu CSS3 Eigenschaften. Überprüfe auf caniuse.com welcher Browser was unterstützt.
Media Queries: Dies ist eine Technik, mit der du verschiedene CSS für verschiedene Situationen, z. B. wenn deine Webseite in einer kleineren Größe angezeigt oder gedruckt wird, verwenden kannst. Lerne mehr dazu von W3C.
CSS Frameworks: Ein Framework ist eine Sammlung von CSS-Regeln und Klassen. Viele Entwickler verwenden CSS-Frameworks, um schneller CSS schreiben zu können. Das bekannteste ist Twitter Bootstrap, aber es bit auch ZURB foundation, Pure CSS, Topcoat und andere.

JS in Webseiten verwenden

Webentwickler verwenden JavaScript, um Webseiten interaktiv zu machen, auf Benutzerereignisse zu reagieren und Daten dynamisch vom Server zu laden. Sie tun dies, indem sie Javascript mit dem <script>-Tag im HTML-Code einbetten. Ihr JS-Code verwendet dann die "DOM-API", eine Reihe von Funktionen, welche die Webbrowser auf jeder Seite zur Verfügung stellen, um Entwickler die Webseite modifizieren zu lassen.

Dies bedeutet, dass, wenn du interaktive Webseiten entwickeln willst, du sowohl die Grundlagen der Sprache JavaScript (was du hier auf Khan Academy machen kannst) als auch die DOM-API (in diesem Kurs hier) lernen musst).

Webseiten außerhalb der Khan Academy entwickeln

Wir lieben es, wenn du hier coole Webseiten erstellst und mit der Community teilst, was du lernst. Aber wir empfehlen dir auch andere Editoren, Entwicklungsumgebungen und vor allem auch die Funktionen, welche wir deaktiviert haben, auszuprobieren. Wenn du weiterhin im Webbrowser entwickeln willst (vor allem wenn du ein ChromeBook verwendest), kannst du JSBin.com, JSFiddle.net oder Cloud9 IDE ausprobieren.

Wenn du ohne Webbrowser programmieren willst, kannst du eine IDE installieren und deine Webseiten als ".html"-Datei speichern. Beliebte IDEs sind Notepad++ (nur Windows), Visual Studio Code, SublimeText, Adobe Klammern, Coda und TextWrangler.

Webseiten auf einem Server hosten

Wir hosten die Webseiten, die du hier auf der Khan Academy erstellst, auf unserem eigenen Server. Aber vielleicht möchtest du ja deine eigene Web-Präsenz einrichten.

Zuerst musst du eine Firma finden, welche deine Seite hostet. Es gibt viele Hosting-Anbieter mit unterschiedlichem Grad an Flexibilität und Preis.

Dann möchtest du sicher auch einen Domain-Namen wie "mycoolname.com", erstellen, damit deine Webseite ein Teil deiner Identität wird. Manchmal kannst du dies mit deinem Hosting-Provider machen. Aber oft musst du eine separate Firma für die Registrierung deiner Domain verwenden. Lerne mehr dazu mit diesen Slides.

Sobald du einen Web-Host hast, kannst du deine Dateien mit einem FTP-Client wie FileZilla zum Server übertragen. Dieses Programm verbindet sich mit dem Server und erlaubt dir, die Dateien auf dem Server anzuzeigen, herunterzuladen und neue Dateien hochzuladen. Vielleicht kannst du dich auch per SSH auf dem Server einloggen und die Dateien direkt auf dem Server editieren.

Lerne weiter

HTML und CSS entwickeln sich laufend weiter, da die Webbrowser immer neue Versionen mit Verbesserungen produzieren und die Webentwicklungs-Community sehr aktiv ist. Wir halten uns gerne aktuell, indem wir den Newsletter Frontend Focus abonnieren, darin stehen viele Links zu Artikeln und Demos. Immer wenn du etwas Neues lernst, solltest du es sofort ausprobieren, um wirklich zu verstehen, wie es funktioniert.

Übe, übe, übe immer weiter!

Willst du an der Diskussion teilnehmen?

Anmelden

Sortiere nach:

Noch keine Beiträge.

Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.