Share
Das Erlernen einer neuen Fertigkeit ist zunächst oft einschüchternd; Zu wissen, wo man anfangen soll, wen man hören sollte, was man ignorieren sollte - es kann ein schwieriger Prozess sein, sich zu bewegen. Dafür ist dieser Beitrag da. Es hilft Ihnen zu planen, was Sie lernen sollen und in welcher Reihenfolge, was die große Hürde hoffentlich viel niedriger macht, Sie interessiert und Sie dazu ermutigt, weiter zu lernen!
Dies ist der wichtigste Teil eines jeden Lernprozesses. Sobald Sie die Entscheidung getroffen haben, Ihren Horizont zu erweitern, indem Sie eine neue Fähigkeit erlernen, sind Sie über die erste Hürde hinaus! Vielleicht sind Sie Designer und möchten nicht nur Stift, Papier und Photoshop, sondern Sie haben bisher nichts mit dem Web zu tun. Jetzt Sie möchten Webseiten erstellen und mit Hilfe der unten aufgelisteten Ressourcen knacken Sie in kürzester Zeit HTML.
Zu Beginn sprechen wir sehr wortwörtlich über die Grundlagen von HTML. Anschließend betrachten wir Ressourcen und Aufgaben, um den Ball am Laufen zu halten.
Es ist wichtig, dass Sie wissen, was HTML ist. Hier eine kurze Definition des World Wide Web Consortium (W3C), die unermüdlich auf ein standardisiertes Web hinarbeiten:
HTML ist die Veröffentlichungssprache des World Wide Web.
Das Ende. Das war einfach, richtig? 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 eines Dokuments. Sie können festlegen, welche Bits des Dokuments Überschriften sind, welche Bits Absätze sind, einfache Beziehungen zwischen den Inhalten herstellen und sogar ein bestimmtes Grundverhalten festlegen.
Beginnen wir mit Ihrer ersten HTML-Datei. Sie benötigen einen Nur-Text-Editor (z. B. den Standard-TextEdit unter OS X oder den Windows-Editor). Jetzt:
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 noch andere), wird Ihre index.html-Datei mit Sicherheit in Ihrem Browser Ihrer Wahl standardmäßig geöffnet.
Wichtig ist, dass ein Browser, wenn er feststellt, dass er eine .html-Datei verarbeitet, den Inhalt als HTML verarbeiten kann. Technisch gesehen haben wir hier keinen korrekten HTML-Code bereitgestellt, aber Browser werden Ihnen viel Zeit sparen - die bloße Anwesenheit der .html-Dateierweiterung 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 jetzt keine Sorgen über dieses Debugging-Fenster, es dient nur dazu, unseren Standpunkt zu veranschaulichen.
Das macht den ersten Schritt in HTML! Sie verstehen jetzt, was es ist, was es braucht, um mit dem Schreiben zu beginnen, und beginnen zu verstehen, was Browser damit tun.
Bevor wir in die Ressourcen eintauchen, müssen wir ein paar weitere Grundprinzipien unter die Lupe nehmen. Erinnern Sie sich an die zusätzlichen Code-Teile, die unser Browser anscheinend hinzugefügt hat? Das waren HTML-Tags, die Bausteine des HTML-Markups. Ein Tag beschreibt ein Element und hebt diese Tatsache mit spitzen Klammern hervor. Dies ist das öffnendes 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 beenden es dann mit einem Begleitdokument schließendes Tag:
Sehen Sie den Schrägstrich im zweiten Tag? Das ist, was ein schließendes Tag kennzeichnet. Alles, was wir zwischen den öffnenden und schließenden HTML-Tags einfügen, ist unser HTML-Dokument. Und das ist das erste Prinzip von HTML-Tag-Paaren. sie verpacken Inhalte in irgendeiner Form. Diese beiden umfassen 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 bezeichnet Verschachtelung. 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 Matryoshka-Puppen…
Auf diese Weise können wir Abschnitte einer Webseite aufbauen. eine Kopfzeile, 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 ist das HTML-Markup, darunter ist eine visuelle Darstellung, wie die Elemente ineinander verschachtelt sind.
Nachdem wir die absoluten Grundlagen verstanden haben, ist es an der Zeit, weiterzugehen und ein festes Verständnis der HTML-Grundlagen zu erlangen. Es gibt ein paar Kurse, von denen ich empfehle, dass sie sich diese ansehen absolut frei und es lohnt sich, von Anfang bis Ende zu folgen.
Genug Wissenschaft für den Moment, machen wir eine Pause und prüfen einige Tools, um unsere HTML-Codierung zu erleichtern. Bisher habe ich nur einfache Texteditoren zur Erstellung Ihrer HTML-Dateien vorgeschlagen. Diese sind vollkommen in Ordnung, aber es gibt Code-Editoren, die intuitiver zu verwenden sind.
Die wichtigsten Vorteile der Verwendung eines speziell entwickelten Code-Editors sind:
Es gibt viele weitere Vorteile, die jedoch deutlich werden, wenn Sie sich mehr mit dem Schreiben von Code beschäftigen. Also, was sind deine Optionen? Hier sind nur einige davon:
Weitere Informationen zu den vielen zur Verfügung stehenden Code-Editoren finden Sie in Ein Web Designer-Handbuch zum Codieren von Apps und in 18 Wonderful IDEs für Windows, Mac und Linux.
Es ist höchste Zeit, dass Sie sich die Hände schmutzig gemacht haben und Ihre neu entdeckten Fähigkeiten einsetzen. Fordern Sie sich selbst heraus, indem Sie die HTML-Markup-Struktur für Folgendes erstellen:
Accentsconagua
!doctype, das </code>, <code><meta></code> Tags und <code><link></code> Stichworte.</li> <li> <strong>Ein Blogartikel</strong>: Typografisch kann ein Artikel alle wichtigen Player des HTML-Markups enthalten. Beginnen Sie mit einem <code><article></code> selbst vielleicht ein <code><h2></code> Überschrift, <code><p></code> Tags natürlich gepunktet mit <code><em></code> Tags für die Hervorhebung oder <code><strong></code> Text. Sie können sogar weniger offensichtliche Markierungen verwenden wie a <code><blockquote></code> und eine horizontale Regel <code><hr></code>.</li> <li> <strong>Portfolio-Miniaturansichten</strong>: Die Dinge können jetzt etwas komplexer werden, aber vergessen Sie nicht. Sie gestalten nichts davon, Sie versuchen nur, die Bausteine so sauber und logisch wie möglich zu gestalten. In diesem Fall können Sie eine ungeordnete Liste verwenden <code><ul></code>, mit Listenelementen <code><li></code> um jedes der Thumbnails zu halten. Jede Miniaturansicht würde wahrscheinlich ein Bild umfassen <code><img></code> (Dies gibt Ihnen die Chance, mit den Attributen "src" und "alt" zu spielen), die in einen Anker gehüllt sind <code><a></code> was zu einer größeren Version führt. Viel Verschachtelung gibt es dort.</li> </ul> <p>Halten Sie Ihre Markierung sauber und rücken Sie verschachtelte Tags ein, um die Lesbarkeit zu verbessern. Gewöhnen Sie sich auch daran, Kommentare zu hinterlassen, um anderen zu helfen, die möglicherweise mit Ihrem Code arbeiten müssen:</p> <pre><div> <p>Dies ist der Inhalt des Testdiv.</p> </div><!-- end of test div --></pre> <h3>Überprüfe deine Arbeit</h3> <p>Nachdem Sie etwas in HTML erstellt haben, ist es an der Zeit, dies 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. Wenn Sie jedoch auf den großen grünen Schlag auf den Rücken zielen, können Sie Ihre Standards auf einem hohen Niveau halten.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_9.png"> <h3>Bonus!</h3> <p>Wenn Sie sich sicher fühlen, eine imaginäre Struktur aufzubauen, wenden Sie sich an ein reales Design. Sehen Sie sich ein Layout-Design an und stellen Sie sich vor, wie es in Bezug auf Markup gestaltet wird.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_10.png"><br>Artikel von Brijan über Dribbble <hr> <h2>Aufgabe 4: Auf Markup einspielen</h2> <blockquote><p>Es ist wichtig, dass Sie lernen, wo Sie welche Elemente verwenden</p></blockquote> <p>Jetzt können Sie die HTML-Struktur bequem erstellen, es ist an der Zeit, Ihren Wortschatz zu verbessern. Beim Schreiben von Markups benötigen Sie so viele Element-Tags wie möglich (und es gibt einige)..</p> <p>Es ist wichtig, dass Sie lernen, wo welche Elemente verwendet werden sollen, nicht zum Gestalten, sondern um Ihren Seiteninhalt auf die am besten geeignete Weise zu beschreiben. Dies wird als Semantik bezeichnet.</p> <p>Wenn ein Textabschnitt ein Absatz innerhalb Ihres Layouts sein soll, verwenden Sie a <code><p></code> tag zum einschließen. Verwenden Sie keine <code><div></code>, zum Beispiel. Die Verwendung von Semantic Markup macht Ihre Webseiten effizienter und für Browser, Bildschirmleser, Suchmaschinen und andere Geräte, die noch nicht erfunden wurden, zugänglicher! Achten Sie darauf, Ihre Inhalte richtig zu beschreiben und Sie helfen dem Web dabei, an einem besseren Ort zu wachsen, glauben Sie mir.</p> <p>Hier einige solide Ressourcen, die sich auf HTML-Elemente und ihre beabsichtigten Zwecke beziehen:</p> <ul> <li> html5doctor.com ist eine Kollaboration einiger der besten Köpfe der Branche und macht deutlich, wie wir semantisches HTML verwenden sollten.</li> <li> HTML-Elemente unter Mozilla. Beachten Sie das kleine <strong>5</strong> Icons von einigen Elementen? Sie zeigen an, dass es sich bei diesen Elementen um neue Ergänzungen der HTML-Spezifikation handelt, die derzeit als HTML5 bezeichnet werden.</li> </ul> <hr> <h2>Aufgabe 5: Ein Buch lesen</h2> <p>Bücher zur Hand zu haben ist immer gut, um Dinge zu referenzieren oder sogar (überraschenderweise) von Titel zu Titel zu lesen. Nehmen Sie sich in dieser Phase Ihrer HTML-Reise Zeit, um ein paar Nachschlagewerke zu erhalten. Ich empfehle:</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_11.png"> <ul> <li> HTML & CSS Design and Build Websites - es lohnt sich unter anderem für die Präsentationsqualität.</li> <li> HTML5 von Rockable Press entschlüsseln - Dieses Buch bietet einen großen Einblick in die politischen Hintergründe von HTML-Standards.</li> <li> HTML5 FÜR WEB DESIGNER von A Book Apart - Wenn Sie noch keine A Book Apart-Publikation besitzen, ist dies eine gute Gelegenheit, sich vorzustellen.</li> <li> Die Einführung von HTML5 von Bruce Lawson und Remy Sharp - wird in Bezug auf andere Funktionen, die HTML5 bietet, etwas komplexer, aber dies ist ein HTML-Buch, das sich definitiv lohnt.</li> </ul> <hr> <h2>Aufgabe 6: Nehmen Sie an der Gemeinschaft teil</h2> <p>Hier ist der beste Teil eines Web-Profis: Community. Wann immer Sie eine Frage oder ein Problem haben, gibt es immer jemanden, der dasselbe erlebt hat und bereit ist, Ihnen zu helfen. Treten Sie in Foren und Kreativgemeinschaften bei, bitten Sie um Hilfe und geben Sie Ratschläge, sobald Sie sich zuversichtlich genug fühlen!</p> <p>Machen Sie mit, indem Sie an folgenden Communities teilnehmen:</p> <ul> <li> Stack Overflow: Die beste technische Q & A-Community. Sie lernen HTML? Es sind schon einige Threads im Gange ... </li> <li> Forrst: Ein großartiger Ort für kreatives und technisches Feedback zu Projekten, an denen Sie gerade arbeiten. Es ist nur einladen, wenn Sie mitmachen wollen, aber lange genug in den Fluren hängen bleiben und jemand Sie hereinlassen wird. </li> <li> GitHub: In erster Linie ein offenes Online-Repository zum Speichern und Versionieren Ihres eigenen Codes. GitHub bietet Lernmöglichkeiten, indem Sie sehen, wie andere Benutzer dies tun. Viele der Projekte auf GitHub sind für HTML-Anfänger einschüchternd, aber für die Zukunft sollten Sie dies berücksichtigen.</li> <li> Creattica: ist eine Online-Community für Kreative. Geben und erhalten Sie Feedback zu Ihren neuesten HTML-Projekten.</li> </ul> <p>Abgesehen von den Communities sind soziale Netzwerke die perfekte Möglichkeit, um mit Ihren HTML-Helden zu interagieren, Fragen zu stellen und Meinungen abzugeben. Hier sind ein paar Twitterer, die es wert sind, für ihre HTML-Kenntnisse zu folgen:</p> <ul> <li>@ html5doctor</li> <li>@brucel</li> <li> @wdtuts natürlich… </li> <li> @nettuts natürlich… </li> <li>@LeaVerou</li> <li>@Zeldman</li> <li>@meyerweb</li> <li>@smashingmag </li> </ul> <hr> <h2>Aufgabe 7: Beschleunigen Sie Ihren Markup-Workflow</h2> <p>Zu diesem Zeitpunkt haben Sie einen Überblick darüber, was HTML ist, welche Elemente derzeit verwendet werden, wie Sie das semantische Markup strukturieren, wer die Branchenakteure sind und Sie für die nächste Herausforderung bereit sind! Der nächste logische Schritt wäre die Konzentration auf CSS. das HTML-Markup gestalten, das Sie jetzt schriftlich beherrschen. Sehen wir uns jedoch zunächst an, ob wir unseren Markup-Workflow mit ein paar alternativen Ansätzen beschleunigen können. </p> <h3>Markdown</h3> <blockquote><p>Markdown ermöglicht das Schreiben in einem einfach zu lesenden, einfach zu schreibenden Klartextformat.</p></blockquote> <p>Markdown ist eine lesbarere Methode zum Schreiben von HTML-Inhalten. Durch die Umstellung des ganzen Unsinns auf weniger komplexe Syntax wird eine große Menge Tag-Codierung vermieden. Nachdem Sie Ihr Markdown-Dokument geschrieben haben, führen Sie es durch einen Parser (z. B. Dingus), um das bekannte HTML-Äquivalent herauszuarbeiten.</p> <p>Zum Beispiel sind wir jetzt mit diesen HTML-Überschriften vertraut:</p> <pre><h1>Dies ist eine H1</h1> <h2>Dies ist ein H2</h2> <h6>Dies ist ein H6</h6></pre> <p>Das Markdown-Äquivalent wäre:</p> <pre># Dies ist ein H1 ## Dies ist ein H2 ###### Dies ist ein H6</pre> <p>Das bedeutet, dass Sie sich keine Sorgen um das Schließen von Tags machen müssen - und die eingerückten Markdown-Überschriften machen die Hierarchie visuell viel klarer und für das menschliche Auge lesbarer.</p> <p>Markdown wird immer beliebter und ist in Code-Editoren und Content-Management-Systemen integriert. In Bezug auf das Schreiben von Webinhalten ist es ideal. Schauen Sie sich die Syntaxseite an, um weitere Informationen zu erhalten, oder sehen Sie sich unser aktuelles Tutorial an. Schnelle und einfache Dokumentation mit Markdown.</p> <h3>Emmet</h3> <p>Emmet beschleunigt Ihre Markierungscodierung durch Analysieren und Konvertieren von abgekürztem Code. Anstelle manuell einzugeben:</p> <pre><div> <ul> </ul> </div></pre> <p>Sie würden die abgekürzte Form verwenden:</p> <pre>div> ul> li * 4</pre> <blockquote><p>Emmet (früher bekannt als Zen Coding) ist ein Toolkit für Webentwickler, das Ihren HTML- und CSS-Workflow erheblich verbessern kann:</p></blockquote> <p>Was dies wörtlich sagt, ist "Ausgabe eines Div, das eine ungeordnete Liste enthält, die vier Listenelemente enthält".</p> <p>Abhängig von der verwendeten Anwendung würden Sie (beispielsweise) TAB drücken, und Emmet würde diese abgekürzte Syntax verarbeiten und HTML-Markup wie im ursprünglichen Beispiel ausgeben. Das Zeiteinsparungspotenzial sollte bereits sehr klar sein, und Emmet tut dies <em>viel</em> mehr als unser einfaches Beispiel hier.</p> <p>Emmet kann mit einer Reihe von Code-Editoren und -Anwendungen verwendet werden. Weitere Informationen finden Sie unter Verbessern der Produktivität: Kurze Tipps für die Zen-Codierung und 7 fantastische Emmet-HTML-Tipps zum Zeitsparen, um weitere Informationen zu erhalten.</p> <hr> <h2>Fazit</h2> <p>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 Fähigkeit öffnet Türen, wer weiß, wohin diese Fähigkeit Sie führen wird?</p> <p><strong>Nächster Schritt:</strong> Sie haben jetzt einige HTML-Kenntnisse im Griff, werfen Sie einen Blick auf The Best Way to Learn CSS.</p> <p>Anregungen zum Lernen sind sehr willkommen - bitte in den Kommentaren ausrufen!</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/webdesign">Web-Design</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/the-best-way-to-learn-javascript.html">Der beste Weg, um JavaScript zu lernen</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_26_1/the-best-way-to-learn-javascript_2.jpg');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/webdesign/the-best-way-to-learn-css.html">Der beste Weg, um CSS zu lernen</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_19/the-best-way-to-learn-css_17.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Suche...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>