Advertisement
  1. Web Design
  2. HTML & CSS

Der beste Weg, um HTML zu lernen

Scroll to top
Read Time: 14 min

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Das Erlernen einer neuen Fähigkeit ist zunächst oft einschüchternd. Zu wissen, wo man anfangen soll, wem man zuhört, was man ignoriert - es kann schwierig sein, sich in Bewegung zu setzen. Dafür ist dieser Beitrag gedacht. Es wird Ihnen helfen, zu planen, was und in welcher Reihenfolge gelernt werden soll, und hoffentlich eine große Hürde zu verringern, Sie interessiert zu halten und Sie zu ermutigen, weiter zu lernen!


Vor allem anderen: Den Sprung wagen

Dies ist der wichtigste Teil eines Lernprozesses - sobald Sie die Entscheidung getroffen haben, Ihren Horizont durch das Erlernen einer neuen Fähigkeit zu erweitern, haben Sie die erste Hürde überwunden! Vielleicht sind Sie Designer und möchten über Stift, Papier und Photoshop hinausgehen. Vielleicht hatten Sie zuvor nichts mit dem Web zu tun, das spielt keine Rolle. Jetzt möchten Sie Webseiten erstellen und mit Hilfe der unten aufgeführten Ressourcen können Sie HTML in kürzester Zeit knacken.

Zunächst werden wir sehr wörtlich über die Grundlagen von HTML sprechen. Anschließend werden wir uns Ressourcen und Aufgaben ansehen, um den Ball am Laufen zu halten.


Grundlagen verstehen: Ihre erste HTML-Datei

Es ist wichtig, dass Sie wissen, was HTML ist. Hier ist eine kurze Definition des World Wide Web Consortium (W3C), das unermüdlich auf ein standardisiertes Web hinarbeitet:

HTML ist die Veröffentlichungssprache des World Wide Web.

Das Ende. Das war einfach, oder? Mit HTML (HyperText Markup Language) können Sie Dokumente erstellen, die zur Veröffentlichung im Web bereit sind. Gut geschriebenes HTML-Markup (wie es genannt wird) beschreibt die Struktur des Inhalts innerhalb eines Dokuments. Sie können angeben, welche Bits des Dokuments Überschriften sind, welche Bits Absätze sind, einfache Beziehungen zwischen Inhalten herstellen und sogar ein bestimmtes Grundverhalten festlegen.

Beginnen wir jedoch mit Ihrer ersten HTML-Datei. Sie benötigen einen Nur-Text-Editor (z. B. den Standard-TextEdit unter OS X oder Windows Notepad). Jetzt:

  • Starten Sie eine neue Datei.
  • Geben Sie einen Text ein (wie die klassische "Hallo Welt").
  • Speichern Sie die Datei beispielsweise auf Ihrem Desktop als "index.html" (die Erweiterung .html ist hier ziemlich wichtig, aber Sie haben das erkannt.)

Jetzt benötigen Sie Ihre zweite Anwendung, einen Webbrowser. Es gibt mehrere Hauptakteure auf dem Browsermarkt, aber unabhängig davon, ob Sie Internet Explorer, Google Chrome, Firefox, Safari oder Opera verwenden (und es gibt andere), wird Ihre index.html-Datei mit ziemlicher Sicherheit standardmäßig in einem Browser Ihrer Wahl geöffnet.

Wichtig ist, dass ein Browser, wenn er feststellt, dass es sich um eine HTML-Datei handelt, den Inhalt als HTML verarbeiten kann. Technisch gesehen haben wir hier keinen korrekten HTML-Code angegeben, aber Browser werden Ihnen viel Spielraum lassen - das bloße Vorhandensein der Dateierweiterung .html sagt unserem Browser genug. Wir haben nur eine einfache Textzeile geschrieben, aber schauen Sie sich an, wie der Browser sie tatsächlich interpretiert:

Machen Sie sich vorerst keine Sorgen um dieses Debugging-Fenster, es wird nur verwendet, um unseren Standpunkt zu veranschaulichen.

Damit ist Ihr erster Schritt in HTML erledigt! Sie verstehen jetzt, was es ist, was es braucht, um mit dem Schreiben zu beginnen, und beginnen zu verstehen, was Browser damit machen.


Grundlagen verstehen: HTML-Tags

Bevor wir uns mit Ressourcen befassen, müssen wir noch ein paar Grundprinzipien in den Griff bekommen. Erinnern Sie sich an die zusätzlichen Codeteile, die unser Browser hinzuzufügen schien? Das waren HTML-Tags, die Bausteine des HTML-Markups. Ein Tag beschreibt ein Element und hebt diese Tatsache in spitzen Klammern hervor. Dies ist das Eröffnungs-Tag des HTML-Elements, das wir zuvor gesehen haben:

Abgesehen von der sogenannten Doctype-Deklaration verwenden wir das HTML-Tag, um unser Dokument zu starten, und schließen unser Dokument mit einem zugehörigen schließenden Tag ab:

Sehen Sie den Schrägstrich im zweiten Tag? Das ist es, was ein schließendes Tag bezeichnet. Alles, was wir zwischen den öffnenden und schließenden HTML-Tags platzieren, ist unser HTML-Dokument. Und das ist das erste Prinzip von HTML-Tag-Paaren. Sie verpacken Inhalte. Diese beiden umschließen den Inhalt eines Absatzes:

Okay, wir werden noch einmal auf unsere ursprüngliche index.html-Datei zurückblicken, dann verspreche ich, dass wir tatsächlich über Lernressourcen sprechen werden. Sie sehen, wie die HTML-Tags um andere Tags gewickelt werden? Das wird als Verschachtelung bezeichnet. Tags können andere Tags umschließen. Dann können diese Tags sogar mehr Tags umschließen, und diese Verschachtelung kann unbegrenzt fortgesetzt werden. Wie exponentielle Matroschka-Puppen.

Auf diese Weise können wir Abschnitte einer Webseite erstellen. eine Überschrift, die Überschriften und horizontale Regeln enthält. Absätze, die Anker und Spannweiten enthalten. Fußzeilen, die Listen enthalten, die dann Links enthalten. Dies ist die Grundlage für die Erstellung einer HTML-Struktur.

Schauen Sie sich diese Abbildung an. Oben befindet sich das HTML-Markup, darunter eine visuelle Darstellung, wie die Elemente ineinander verschachtelt sind.


Aufgabe 1: Folgen Sie einem Anfängerkurs

Nachdem Sie die absoluten Grundlagen verstanden haben, ist es Zeit, weiterzumachen und die Grundlagen von HTML genau zu verstehen. Es gibt ein paar Kurse, die Sie sich unbedingt ansehen sollten. Beide sind absolut kostenlos und es lohnt sich, sie von Anfang bis Ende zu verfolgen.

  • Codeacademy Web Fundamentals ist ein ansprechender, interaktiver Kurs, der sich mit HTML für Anfänger befasst, bevor Sie sich anderen Dingen (wie CSS) zuwenden. Sie werden feststellen, dass alle Kurse an der Codeacademy sehr überzeugend sind, wenn Sie auf dem Bildschirm bauen und dabei solide Theorie lernen. Das Sammeln von Punkten und Abzeichen erhöht die Herausforderung und Wettbewerbsfähigkeit. Die Erinnerungs-E-Mails geben Ihnen einen zusätzlichen Schub, wenn Sie zu irgendeinem Zeitpunkt den Fokus verlieren!
Verfolgen Sie jeden Aspekt Ihrer Erfolge, während Sie lernen
  • Tuts+ Premium 30 Tage zum Erlernen von HTML und CSS ist eine Reihe von Screencasts, die von Jeffrey Way präsentiert werden. Machen Sie es sich bequem, indem Sie einen Monat lang jeden Tag zehn oder fünfzehn Minuten Zeit einplanen und jeweils einen mundgerechten Screencast ansehen. Wie der Kurs selbst besagt, "hat jeder das Recht zu lernen, wie man wundervolle Dinge im Web baut".
Jeffrey führt Sie durch alle Aspekte der HTML-Grundlagen

Aufgabe 2: Wählen Sie einen Code-Editor

Genug der akademischen Welt, machen wir eine Pause und sehen uns einige Tools an, um unsere HTML-Codierung zu vereinfachen. Bisher habe ich nur einfache Nur-Text-Editoren zum Erstellen Ihrer HTML-Dateien vorgeschlagen. Diese sind vollkommen in Ordnung, aber es gibt Code-Editoren, die viel intuitiver zu bedienen sind.

Die Hauptvorteile der Verwendung eines speziell entwickelten Code-Editors sind:

  • Hervorheben der Syntax: Wenn Ihre HTML-Tags in einer Farbe angezeigt werden, Ihr Inhalt in einer anderen, Kommentare und die verschiedenen anderen Aspekte des HTML-Markups in einer anderen, wird das Dokument viel klarer. Die meisten Code-Editoren bieten eine Reihe verschiedener Farbschemata zur Auswahl. manche dunkel auf hell, manche hell auf dunkel, manche subtil, manche... weniger. Oft stellen Mitglieder der Community auch ihre eigenen Farbschema vor. Gehen Sie mit allem, was für Sie funktioniert.
  • Code-Vervollständigung und Hinweise: Was ist das richtige Tag für eine Tabellenkopfzeile? Ich vergesse immer. Glücklicherweise schlagen viele Code-Editoren Tags und Syntax für Sie vor, sobald Sie mit der Eingabe beginnen. Einige bieten auch eine umfangreiche Sprachdokumentation, sodass Sie nachschlagen können, worüber Sie verwirrt sind.
  • Projektmanagement: Wenn Sie ein Webprojekt erstellen, ist es immer hilfreich, alle Dateien zur Hand zu haben. Die meisten Code-Editoren zeigen Ihnen Ihre Projektdateistruktur an, sodass Sie Ordner aufschlüsseln, Assets überprüfen und Dateien schnell verwalten können.
  • Zeilennummern: Ein subtiler Vorteil für einen einfachen Texteditor, aber zu sehen, welche Codezeile sich in welcher Zeilennummer befindet, hilft enorm, insbesondere bei der Suche nach Fehlern.

Es gibt viele weitere Vorteile, die sich jedoch bemerkbar machen, wenn Sie sich mehr mit dem Schreiben von Code befassen. Welche Möglichkeiten haben Sie dann? Hier nur einige:

  • Sublime Text 2 $59. Sublime Text 2 ist heutzutage möglicherweise die beliebteste Wahl unter Entwicklern und hat den massiven Vorteil, dass eine umfangreiche Community dahinter steht. Schauen Sie sich den kostenlosen Perfect Workflow in Sublime Text 2-Kurs von Tuts+ Premium an, um mehr zu erfahren.
  • Coda 2 $75. Ich fürchte, nur OS X, aber immer noch ein sehr beliebter Code-Editor. Wir haben uns vor einiger Zeit mit der Verbesserung Ihrer Produktivität befasst: Schnelle Tipps für Coda auf Webdesingtuts+
  • Brackets Open Source. Dies ist eines der neuesten Projekte von Adobe zur Unterstützung von HTML-, CSS- und JavaScript-Standards. Ein Code-Editor, der mit genau diesen Technologien erstellt wurde. Es ist noch früh für diesen Code-Editor, aber er sieht sehr vielversprechend aus und verwendet interessante Ansätze für einige Schnittstellenaspekte.
  • TextMate $53. Wieder OS X, sorry, aber schon lange der bevorzugte Editor von Code-Junkies.

Weitere Informationen zu den vielen verfügbaren Code-Editoren finden Sie im A Web Designer-Handbuch zum Codieren von Apps und in 18 wunderbaren IDEs für Windows, Mac und Linux.


Aufgabe 3: Etwas erstellen!

Es ist höchste Zeit, dass Sie sich die Hände schmutzig machen und Ihre neu entdeckten Fähigkeiten in die Praxis umsetzen. Fordern Sie sich selbst heraus, indem Sie die HTML-Markup-Struktur für die folgenden Dinge erstellen:

  • Eine leere HTML-Seite: Das klingt vielleicht nicht sehr interessant, aber wenn Sie eine leere Seite erstellen, werden Sie mit einem Standard-HTML-Dokument und seinen Komponenten vertraut gemacht. Denken Sie an den !doctype, das <html>-Tag und den <body>. Konzentrieren Sie sich auf das <head>-Tag und alles, was darin verschachtelt ist, z. B. die Tags <title>, <meta> und <link>.
  • Ein Blog-Artikel: Typografisch gesehen kann ein Artikel alle wichtigen Akteure des HTML-Markups enthalten. Beginnen Sie mit einem <article> selbst, möglicherweise einer <h2> Überschrift, natürlich <p>-Tags, möglicherweise mit <em>-Tags zur Hervorhebung oder <strong> Text. Sie könnten sogar weniger offensichtliche Markups wie ein <blockquote> und eine horizontale Regel <hr> verwenden.
  • Portfolio-Miniaturansichten: Die Dinge können jetzt etwas komplexer werden, aber vergessen Sie nicht; Sie stylen nichts davon, sondern versuchen nur, die Bausteine so sauber und logisch wie möglich zu strukturieren. In diesem Fall können Sie eine ungeordnete Liste <ul> mit Listenelementen <li> verwenden, um die einzelnen Miniaturansichten zu speichern. Jedes Miniaturbild würde wahrscheinlich ein Bild <img src="" alt=""> enthalten (das Ihnen die Möglichkeit gibt, mit den Attributen src und alt zu spielen), das in einen <a href=""> Anker eingewickelt ist, der mit einem größeren verknüpft ist Ausführung. Viel nistende Güte dort.

Halten Sie Ihr Markup sauber und rücken Sie verschachtelte Tags ein, um die Lesbarkeit zu verbessern. Gewöhnen Sie sich außerdem an, Kommentare zu hinterlassen, um anderen zu helfen, die möglicherweise mit Ihrem Code arbeiten müssen:

Überprüfen Sie Ihre Arbeit

Nachdem Sie etwas in HTML erstellt haben, ist es Zeit, es zu überprüfen. Gehen Sie zu validator.w3.org und führen Sie Ihre Arbeit durch den Validator. Es ist nicht immer wichtig, dass Ihr Markup zu 100% gültig ist, aber das Streben nach diesem großen grünen Schlag auf den Rücken ist eine großartige Möglichkeit, um Ihre Standards hoch zu halten.

Bonus!

Wenn Sie sich sicher sind, eine imaginäre Struktur aufzubauen, wenden Sie sich an ein tatsächliches Design. Schauen Sie sich ein Layout-Design an und stellen Sie sich vor, wie es in Bezug auf das Markup gebildet wird.

Artikel von Brijan über Dribbble

Aufgabe 4: Swot up auf Markup

Es ist wichtig, dass Sie lernen, wo Sie welche Elemente verwenden können

Jetzt können Sie problemlos eine HTML-Struktur erstellen und Ihren Wortschatz verbessern. Beim Schreiben von Markups benötigen Sie so viele Element-Tags wie möglich (und es gibt einige).

Es ist wichtig, dass Sie lernen, wo Sie welche Elemente verwenden müssen, nicht für Stylingzwecke, sondern um Ihren Seiteninhalt so gut wie möglich zu beschreiben. Dies wird als Semantik bezeichnet.

Wenn ein Textblock ein Absatz in Ihrem Layout sein soll, verwenden Sie ein <p>-Tag, um ihn einzuschließen. Verwenden Sie zum Beispiel kein <div>. Durch die Verwendung von semantischem Markup werden Ihre Webseiten effizienter und für Browser, Bildschirmleser und Suchmaschinen zugänglicher - sogar für andere Geräte, die noch nicht erfunden wurden! Beschreiben Sie Ihre Inhalte sorgfältig und helfen Sie dem Web, sich zu einem besseren Ort zu entwickeln. Glauben Sie mir.

Hier sind einige solide Ressourcen, die HTML-Elemente und ihre beabsichtigten Zwecke abdecken:

  • html5doctor.com ist eine Zusammenarbeit einiger der schärfsten Köpfe der Branche, die klar macht, wie wir semantisches HTML verwenden sollten.
  • HTML-Elemente unter Mozilla. Beachten Sie die kleinen 5 Symbole bei einigen Elementen? Sie weisen darauf hin, dass es sich bei diesen Elementen um neuere Ergänzungen der HTML-Spezifikation handelt, die derzeit als HTML5 bezeichnet wird.

Aufgabe 5: Lesen Sie ein Buch

Bücher zur Hand zu haben ist immer großartig, um Dinge zu referenzieren oder sogar (überraschenderweise) von vorne bis hinten zu lesen. Nehmen Sie sich zu diesem Zeitpunkt Ihrer HTML-Reise Zeit, um sich einige Nachschlagewerke zu besorgen. Ich empfehle:

  • HTML- und CSS-Design- und Build-Websites - unter anderem wegen der Präsentationsqualität einen Besuch wert.
  • Dekodierung von HTML5 aus Rockable Press - Dieses Buch bietet einen großartigen Einblick in die politischen Abläufe hinter HTML-Standards.
  • HTML5 FÜR WEBDESIGNER von A Book Apart - Wenn Sie noch keine A Book Apart-Publikation besitzen, ist dies der beste Zeitpunkt, um sich vorzustellen.
  • Die Einführung von HTML5 von Bruce Lawson und Remy Sharp wird in Bezug auf andere Funktionen, die HTML5 bietet, etwas komplexer, aber dieses HTML-Buch ist definitiv einen Besuch wert.

Aufgabe 6: Nehmen Sie an der Community teil

Das Beste daran, ein Webprofi zu sein: Community. Wann immer Sie eine Frage oder ein Problem haben, gibt es immer jemanden da draußen, der auf dasselbe gestoßen ist und bereit ist, Ihnen zu helfen. Nehmen Sie an Foren und kreativen Communities teil, bitten Sie um Hilfe und geben Sie Ratschläge, sobald Sie sicher genug sind, dies zu tun!

Beteiligen Sie sich an folgenden Communities:

  • Stack Overflow: Die beste technische Q&A-Community da draußen. Lernen Sie HTML? Es sind bereits einige Themen im Gange.
  • Forrst: Ein großartiger Ort für kreatives und technisches Feedback zu Projekten, an denen Sie arbeiten. Es ist nur eine Einladung, wenn Sie teilnehmen möchten, aber lange genug in den Korridoren herumhängen und jemand wird Sie hereinlassen.
  • GitHub: GitHub ist in erster Linie ein offenes Online-Repository zum Speichern und Versionieren Ihres eigenen Codes. Viele der Projekte auf GitHub sind für HTML-Anfänger einschüchternd fortgeschritten, aber denken Sie an dieses für die Zukunft.
  • Creattica: ist eine Online-Community für Kreative. Geben und erhalten Sie Feedback zu Ihren neuesten HTML-Projekten.

Abgesehen von den Communitys sind soziale Netzwerke die perfekte Möglichkeit, mit Ihren HTML-Helden zu interagieren, Fragen zu stellen und Meinungen abzugeben. Hier sind einige Twitterer, die es wert sind, aufgrund ihrer HTML-Kenntnisse verfolgt zu werden:


Aufgabe 7: Beschleunigen Sie Ihren Markup-Workflow

Zu diesem Zeitpunkt haben Sie einen Überblick darüber, was HTML ist, welche Elemente derzeit verwendet werden, wie semantisches Markup strukturiert wird, wer die Akteure der Branche sind und Sie sind bereit für die nächste Herausforderung! Der nächste logische Schritt wäre, sich auf CSS zu konzentrieren. Wenn Sie das HTML-Markup gestalten, können Sie jetzt gut schreiben. Lassen Sie uns zunächst sehen, ob wir unseren Markup-Workflow mit einigen alternativen Ansätzen beschleunigen können.

Abschlag

Mit Markdown können Sie in einem einfach zu lesenden und einfach zu schreibenden Nur-Text-Format schreiben.

Markdown ist eine besser lesbare Methode zum Schreiben von Markups für HTML-Inhalte. Es verringert die Tag-Codierung erheblich, indem der ganze Unsinn auf eine weniger komplexe Syntax umgestellt wird. Wenn Sie Ihr Markdown-Dokument geschrieben haben, führen Sie es durch einen Parser (z. B. Dingus), um das bekannte HTML-Äquivalent zu erhalten.

Zum Beispiel sind wir jetzt mit diesen HTML-Überschriften-Tags vertraut:

Das Markdown-Äquivalent wäre:

Dies bedeutet, dass Sie sich keine Gedanken über das Schließen von Tags machen müssen - und die eingerückte Art der Markdown-Überschriften macht die Hierarchie visuell viel klarer und für das menschliche Auge besser lesbar.

Markdown wird immer beliebter und ist in Code-Editoren und Content-Management-Systemen integriert. In Bezug auf das Schreiben von Webinhalten ist es ideal. Weitere Informationen finden Sie auf der Syntaxseite oder in unserem aktuellen Tutorial Schnelle und einfache Dokumentation mit Markdown.

Emmet

Emmet beschleunigt Ihre Markup-Codierung, indem es abgekürzten Code analysiert und konvertiert. Zum Beispiel, anstatt manuell zu tippen:

Sie würden die abgekürzte Form verwenden:

Emmet (früher bekannt als Zen Coding) ist ein Toolkit für Webentwickler, mit dem Sie Ihren HTML- und CSS-Workflow erheblich verbessern können:

Was dies wörtlich sagt, ist "ein div ausgeben, das eine ungeordnete Liste enthält, die vier Listenelemente enthält".

Abhängig von der von Ihnen verwendeten Anwendung würden Sie dann (zum Beispiel) TAB drücken und Emmet würde diese abgekürzte Syntax verarbeiten und HTML-Markups wie im Originalbeispiel ausgeben. Das zeitsparende Potenzial sollte bereits klar sein, und Emmet leistet hier viel mehr als unser einfaches Beispiel.

Emmet kann mit einer Reihe von Code-Editoren und -Anwendungen verwendet werden. Weitere Informationen zum Einstieg finden Sie unter Verbessern Ihrer Produktivität: Schnelle Tipps für die Zen-Codierung und 7 Awesome Emmet HTML-Tipps zur Zeitersparnis.


Abschluss

Wenn Sie einem solchen Lernplan folgen und die genannten Ressourcen optimal nutzen, werden Sie auf dem Weg zum HTML-Erfolg sein. Das Erlernen einer neuen Fertigkeit öffnet Türen. Wer weiß, wohin diese Fertigkeit Sie führen wird?

Nächster Schritt: Nachdem Sie einige HTML-Kenntnisse erworben haben, werfen Sie einen Blick auf den besten Weg, um CSS zu lernen.

Lernvorschläge sind herzlich willkommen - bitte in den Kommentaren!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.