Da ich einen gedruckten Hintergrund habe, bin ich immer bestrebt, Designern aus anderen Bereichen einen Einstieg in Webdesign und grundlegende Entwicklung zu ermöglichen. Aus Erfahrung weiß ich, dass der Übergang äußerst einschüchternd ist, den viele Menschen einfach nicht glauben.

Glücklicherweise kann ich auch bezeugen, dass es wahrscheinlich nicht so schwierig ist, wie Sie vielleicht denken. In der Welt der Hardcore-Codierung rangieren HTML und CSS auf der Zutrittsschranke Rahmen.

Heute beginnen wir eine Serie, die die Grundbausteine ​​der Webentwicklung untersucht. HTML, CSS, JavaScript; Wenn Sie ein absoluter Anfänger sind und vielleicht nicht einmal ein grundlegendes Verständnis dafür haben, was diese Technologien noch viel weniger bedeuten, um sie einzusetzen, dann ist diese Serie genau das Richtige für Sie.

Was ist HTML?

Es gibt eine Million Möglichkeiten, wie ich diese Diskussion beginnen könnte. Wir können uns ein Bild davon machen, wie HTML für Hypertext Markup Language steht oder wie es 1980 vom Physiker Tim Berners-Lee als System zum Teilen von Dokumenten erfunden wurde. All dies können Sie jedoch bei Wikipedia finden. Wenn Sie an der Geschichte des World Wide Web interessiert sind, empfehle ich dringend, das Thema weiter zu untersuchen, aber das hilft uns nicht viel bei der Diskussion, was HTML heute ist und wie Sie es verwenden müssen.

Was Sie wirklich verstehen müssen, ist der konzeptionelle Zweck von HTML. Wofür ist das? Wieso brauchst du es? Wie kann es mit anderen Technologien wie CSS und JavaScript verglichen werden?

HTML: Das Wichtigste

In dieser Hinsicht kann HTML als grundlegender Baustein des Web betrachtet werden, wie Sie es kennen. Es gibt eine zugrunde liegende Architektur komplizierter Technologien, die das Internet ausmacht. Das gute alte WWW ist jedoch weitgehend von HTML abhängig.

In der Tat, technisch Sie benötigen lediglich HTML, um eine Webseite zu erstellen. Ein paar extrem einfache HTML-Zeilen, die auf einen Webserver hochgeladen werden, bilden eine Webseite. Dies ist definitiv nicht etwas, was man für CSS sagen kann, und normalerweise nicht etwas, was man von JavaScript sagen kann. Der Punkt hier ist, dass, obwohl alle diese Technologien eng miteinander verbunden sind, HTML das entscheidende Teil des Puzzles ist.

Nun, bevor Sie zu aufgeregt sind, bedeutet das nicht, dass Sie nur mit HTML lernen können. Sie könnten kaum eine moderne Webseite finden, die zumindest keine Kombination aus HTML und CSS verwendet.

Markup-Sprachen

Um wirklich zu verstehen, was HTML ist, müssen Sie verstehen, was Markup-Sprachen sind und warum es sie gibt (ich schleiche mich immerhin in dieses Problem ein).

Grundsätzlich ist das Web in Klartext geschrieben. Jetzt durch? Klartext? Ich meine nicht nur einen Mangel an Bildern, ich meine einen Mangel an Formatierungen jeglicher Art. Anders als in Microsoft Word, wo Sie leicht kursiven Text in beliebiger Punktgröße erstellen können, ähnelt das Schreiben von Code eher der Verwendung von WriteRoom oder IA Writer. Sie erhalten nur alte Buchstaben und Symbole.

Die Schreibmaschinen-Metapher

Stellen Sie sich vor, Sie schreiben einen Aufsatz auf einer antiken Schreibmaschine und geben ihn dann an jemanden weiter, damit er ihn in einen Computer eingeben kann. Ihre Schreibmaschine hat keine Formatierungsfunktionen, aber wenn Ihr Mitarbeiter Ihren Aufsatz in die moderne Textverarbeitung eingibt, möchten Sie, dass er Überschriften, fetten Text, kursiven Text, Aufzählungslisten und mehr enthält. Wie würden Sie dieser Person mitteilen, wo diese Funktionen implementiert werden sollen?

Die Antwort ist natürlich, dass Sie Ihr Dokument und fügen Sie zusätzliche Kennzeichen ein, wie der Text formatiert werden soll. Diese wären nicht im Endergebnis vorhanden, sondern sollen dem Dolmetscher lediglich sagen, wie alles so aussehen soll, wie Sie es beabsichtigen. Genau so funktioniert eine Auszeichnungssprache. Bei HTML wird dieses Markup über Tags ausgeführt.

Tag, du bist es

Während ich diesen Artikel schreibe, mache ich dies im reinen HTML-Text. Das heißt, wann ich will Fett gedruckt Etwas, ich kann nicht einfach einen Knopf drücken. Stattdessen füge ich ein fettes Tag ein:

Das letzte Wort wird in sein <b>Fett gedruckt</b>.

Sehen Sie, wie ich verwendet habe? um anzugeben, wo der fettgedruckte Text beginnen würde? Beachten Sie auch, wie ich verwendet habe.? um anzugeben, wo der fettgedruckte Text enden würde. Um etwas kursiv zu machen, verwende ich dieselbe Technik.

<i>Dies ist kursiv dargestellt.</i> Das ist nicht

Die eingeklammerten Teile werden als Tags bezeichnet, und jeder Satz von Tags hat einen Start- und Haltepunkt. Mit diesen teilen Sie dem Interpreter, in unserem Fall einem Webbrowser wie Firefox, mit, wie der Inhalt formatiert werden soll. Wenn wir Inhalt zwischen einem Eröffnungs- und einem Schließen-Tag platzieren, sagen wir normalerweise, dass wir es in einem tag.

Beispiel-Tags

Nun, da Sie wissen, was Tags sind, finden Sie hier einige grundlegende Beispiele einiger HTML-Tags:

• Absatz

• Header

  (h2, h3, h4 usw. erzeugen inkrementell kleinere Header)

• kleiner text

Links, Tags und Attribute

Dies ist, wo der? Hypertext? in? Hypertext Markup Language? Teil kommt ins Spiel. Einer der Hauptbereiche beim Schreiben von HTML und generell beim Verwenden des Webs ist das Verknüpfen. So funktioniert das alles richtig? Wenn in Ihrem Browser eine Webseite geladen ist und Sie zu einer anderen Seite gelangen möchten, was tun Sie dann? Klicken Sie auf einen Link! Dieses System ist fantastisch, um alle im Internet gespeicherten Informationen zu verbinden.

Um etwas in HTML zu verlinken, verwenden wir natürlich ein Tag. Dieser Tag wird jedoch etwas komplexer aussehen als die meisten. Sehen wir uns ein Beispiel an, das auf die Design Shack-Homepage verweist.

Lesen Sie täglich Design Shack, um großartige Designqualität zu erhalten.

Hier haben wir nicht nur eine Etikett aber ein Attribut auch. Das Tag () teilt dem Browser mit, dass es einen Link gibt, und das Attribut (href) teilt dem Browser mit, wohin der Link gehen soll. Die Syntax für diese Art von Struktur lautet wie folgt:

Text, Bilder usw.

In unserem vorherigen Beispiel ist irgendetwas zwischen? Tags werden zu einem Link. Also die Worte? Design Shack? wäre ein aktiver Textlink gewesen, der den Benutzer beim Klicken auf die href-URL (Design Shack-Homepage) verwies.

Das Platzieren eines Bildes über HTML funktioniert auf ähnliche Weise. Wir benutzen die? Src? Attribut, um den Browser auf den Speicherort des Bildes zu zeigen und Attribut für Text, der anstelle des Bildes angezeigt wird, wenn es nicht angezeigt werden kann. Beachten Sie, dass die schließende Tag-Struktur dieses Mal ein bisschen anders ist. Info in einem einzigen Tag.

<img src="//lesptitesaffairesdemayl.be/img/images_1/what-is-html-back-to-basics_4.jpg"> <p>Wir haben jetzt eine gute Vorstellung davon, wie HTML eine Auszeichnungssprache ist und was dies bedeutet. Wir wissen, dass es im Grunde eine Möglichkeit ist, dem Browser Klartext zu geben und dafür zu sorgen, dass er reich formatierte und sogar aktive Inhalte enthält, die bis zu einem bestimmten Punkt angeklickt werden können. Das letzte, was wir verstehen müssen, ist, wie es in das Gesamtbild einer fertigen Webseite passt.</p> <p>Wie wir in den obigen Beispielen gesehen haben, HTML <em>meistens</em> bezieht sich auf das direkte Eingeben von Inhalt auf einer Seite. Die eigentliche zugrunde liegende Struktur einer Webseite ist die Art von getaggten Anweisungen, über die wir gerade erfahren haben. Die meisten Texte und Links, die Sie auf einer bestimmten Seite sehen, sowie viele der Bilder werden direkt mit HTML implementiert. </p> <h3>HTML ist langweilig</h3> <p>Wie gesagt, HTML ist technisch alles, was Sie für eine Webseite benötigen. Dieser HTML-Inhalt ist jedoch ziemlich einfach. Beachten Sie, dass wir in den obigen Beispielen nirgends der Seite mitgeteilt haben, welche Hintergrundfarbe wir verwenden möchten, welche Größe der Text haben soll, welche Schriftarten wo angewendet werden sollen, wie breit bestimmte Teile sein sollen und wie sie ausgerichtet werden sollen usw. </p> <p>Wir haben einfach den Inhalt eingefügt, ohne wirklich darüber nachzudenken, wie er aussehen wird. Wenn Sie eine beliebige Seite im Web betrachten, können Sie feststellen, dass hier niemand aufhört. Jede Site hat ein eigenes Erscheinungsbild, ein eigenes Farbschema, Typografie, Layout usw.</p> <p>Stellen Sie sich zum Beispiel vor, dass Ihre lokale News-Site eine Geschichte von Associate Press abruft. Sie könnten die Story wörtlich ausdrucken und hätten daher dieselbe HTML-Struktur für diesen Inhalt, sie würde sich jedoch wahrscheinlich von der Version auf der AP-Site unterscheiden. Warum?</p> <h3>CSS ist die Haut, Haare und Kleidung</h3> <p>Die Antwort ist, dass moderner HTML-Code im Allgemeinen nicht zur Steuerung von ästhetischem Stil und Layout verwendet wird. Dafür haben wir etwas namens Cascading Style Sheets oder CSS übernommen.</p> <p>Ein typischer Webentwickler-Workflow könnte darin bestehen, den gesamten reinen Inhalt zuerst in ein HTML-Dokument einzufügen, dann zu CSS zu springen und diesen Inhalt so zu gestalten, dass er optisch ansprechender und nutzbarer erscheint. Ein Jahr später könnte der Entwickler zurückkommen und eine brandneue CSS-Datei erstellen, durch die die Website völlig anders aussieht, ohne HTML zu berühren. </p> <p>JavaScript springt in dieses Spiel ein, indem es eine aktivere Rolle bei der Gestaltung der Seite spielt <em>verhält</em>. Animationen, Formulareinreichungen, dynamischer Inhalt, das ist die Domäne von JavaScript. In letzter Zeit hat CSS in dieses Gebiet eingedrungen, aber das ist ein Thema für einen anderen Tag. </p> <h2>Was ist HTML5?</h2> <img src="//lesptitesaffairesdemayl.be/img/images_1/what-is-html-back-to-basics_5.jpg"> <p>Bevor wir das zusammenfassen, fragen Sie sich wahrscheinlich, worum es in HTML5 alles geht. HTML5 ist genau das, wonach es klingt: die fünfte große Iteration von HTML.</p> <p>Web-Technologien sind nicht in Stein gemeißelt, sie entwickeln sich ständig weiter und werden ständig erweitert. So wie Printdesigner in der neuesten Version von Photoshop im Allgemeinen mit den neuesten Schnickschnackern Schritt halten müssen, müssen Webdesigner auf Änderungen in den Webstandards achten. </p> <p>HTML5 bringt viele neue Funktionen auf den Tisch, während er unnötiges Fett aus dem vorherigen Teil herausschneidet. Zum Beispiel haben HTML5-Entwickler einige neue Tags, mit denen die grundlegende Struktur einer Webseite logischer wird. </p> <p>Weitere Informationen zu HTML5 finden Sie in unserer vollständigen Serie zum Thema:</p> <ul> <li>HTML5: Die Grundlagen</li> <li>HTML5: Neue Elemente</li> <li>HTML5: Semantische Änderungen</li> <li>HTML5: Lass es heute laufen</li> </ul> <h2>Fazit: Mehr wird kommen!</h2> <p>Dieser Artikel soll Ihnen einen grundlegenden konzeptuellen Überblick über HTML geben. Wenn Sie angefangen haben zu lesen, was HTML ist und wie es verwendet wird, haben Sie hoffentlich ein grundlegendes Verständnis dieser Konzepte.</p> <p>Wenn wir in die Zukunft schauen, werde ich dieses Thema erweitern, durch die grundlegende Anatomie eines HTML-Dokuments gehen und dann auf eine andere wichtige Frage eingehen: Was ist CSS? </p> <p>Schauen Sie sich bald wieder zu diesen Themen an!</p> <p><em>Bildquellen: xlibber, Ryan Amos, Dave Parker</em></p>