Unterrichten von HTML-CSS-Programmierung von Grund auf. Grundlegendes HTML für Anfänger in einfacher Sprache

Vom Autor: Hallo alle. Wir alle möchten die Website-Erstellung besser verstehen, um uns an interessanten Projekten zu beteiligen und unsere Ideen zum Leben zu erwecken. Aber was ist, wenn Sie ein absoluter Anfänger sind? Unser HTML-Tutorial für Dummies mit praktischen Lektionen wird Ihnen dabei helfen, endlich einen so wichtigen Durchbruch bei der Website-Erstellung zu erzielen, von der Nullebene bis hin zu zumindest einem grundlegenden Verständnis.

Beim Erlernen der Website-Erstellung ist, wie in fast jedem anderen Unternehmen auch, Übung wichtig. Sie können das Rezept für Borschtsch 1000 Mal noch einmal lesen, aber das wird Sie nicht dazu bringen, es zu kochen. Sie können die Grundprinzipien des Autofahrens erlernen, aber bis Sie sich ans Steuer setzen, hängt alles von der Glühbirne ab. Es ist zweifellos von Vorteil, die Theorie zu kennen, aber nicht so sehr wie echte Fertigkeiten.

Wenn wir also über das Erlernen von HTML sprechen, dann gibt es zwar auch Theorie, aber auch Praxis. Die Theorie besteht in diesem Fall nur aus einer Art Artikelserie, Lektionen zum Thema Sprache, grundlegenden Tags und deren Anwendung usw.

Das Üben beginnt für Sie, wenn Sie selbst eine HTML-Datei erstellen, dort den Startcode schreiben und anfangen, mit Ihren eigenen Händen zu lernen, wie das alles funktioniert. Habe einen Tag geschrieben und geschaut, wie es funktioniert. Ein Bild eingefügt - überprüft. Einige Attribute usw. hinzugefügt. Es ist Übung, die es ermöglicht, die wichtigsten Tags schnell zu verstehen und sich daran zu erinnern. Dann schreiben Sie sie einfach auf die Maschine und müssen sich nicht eine halbe Stunde lang merken, wie man eine Liste erstellt.

Nun, für seltene Tags sollten Sie immer ein Wörterbuch verwenden. Ich glaube, niemand, kein einziger Super-Layout-Designer und Web-Entwickler, kennt alle Tags auswendig. Es ist einfach nicht notwendig. Wenn Sie einen Tag alle 10 Jahre verwenden, warum sollten Sie ihn dann im Kopf behalten? Ich denke, es ist verständlich.

Aber ich würde eine solche Übung einfach als eine Art Sandkastenspiel bezeichnen. Sie schreiben einfach verschiedene Tags und versuchen, alles so detailliert wie möglich zu behandeln, aber alles für was? Es muss einen Zweck geben. Normalerweise werden HTML und CSS studiert, um dann eigene Webseiten und vollwertige Websites zu erstellen.

Die beste Vorgehensweise besteht also darin, ein vorgefertigtes Website-Layout zu nehmen und es zu gestalten. Beim Layout handelt es sich lediglich um den Prozess der Erstellung von Webseiten aus einer mehrschichtigen Zeichnung unter Verwendung der Sprachen HTML und CSS. Sie können während des Layouts auch Frameworks, Javascript und Anwendungsbibliotheken verwenden, aber das ist ein Thema für ein anderes Gespräch. Das alles ist eine Ergänzung. HTML ist eine grundlegende Technologie, die sehr gut verstanden werden muss.

Aber ich werde Ihnen gefallen – es ist einfach, es ist das Einfachste. Es ist sehr einfach zu lernen, wie bestimmte Tags funktionieren und wie man sie anwendet. In HTML gibt es keine komplexen Algorithmen, Funktionen, Methoden, Klassen, wie es in Programmiersprachen der Fall ist. Dies ist eine Auszeichnungssprache, es reicht aus, sie ein wenig zu studieren, und alles wird sehr klar sein.

Wie lernt man die Sprache und wo kann man sie üben?

Auch hier spreche ich von einfachem Lernen, nur wenn man den richtigen Weg geht. Das heißt, schauen Sie sich sinnvolle Video-Tutorials an, in denen die notwendigen Dinge Schritt für Schritt erklärt werden, von einfach bis komplex. Wenn Sie sich Lektionen ansehen, die nicht nach diesem Format aufgebaut sind, werden Sie höchstwahrscheinlich den größten Teil des Materials einfach nicht verstehen.

Glücklicherweise sind auf unserer Website alle Lektionen strukturiert und angeordnet, von einfach bis komplex. Wenn Sie also HTML gemäß unseren Lektionen lernen, wird es keine Probleme mit der Beherrschung des Materials geben.

Ich kann Ihnen versichern, dass es mehr Spaß macht, CSS zu lernen! Und in mancher Hinsicht sogar noch einfacher. Erstens hat CSS auch eine ganze Reihe von Eigenschaften und Regeln, die Sie sich merken müssen. Zweitens hat diese Sprache eine sehr einfache Syntax, sodass selbst Anfänger keine Probleme damit haben, Code darin zu schreiben. Drittens: Da CSS für das Erscheinungsbild der Seite verantwortlich ist, werden Sie zunächst erfreut sein, dass Sie die Seite rot färben und einen Rahmen für dieses Bild erstellt haben.

Im Allgemeinen ist das Erlernen von CSS einfach und interessant, daher empfehle ich, nicht zu zögern und sofort damit zu beginnen, nachdem Sie mit den Grundlagen von HTML fertig sind.

Ihr letztes Training

Schließlich haben Sie eine Prüfung. Aber keine Sorge, es wird einfach sein. Darüber hinaus müssen Sie es nicht selbst tun, sondern nur gemäß den Anweisungen in den Lektionen. Diese Prüfung ist ein Kurs. Darin erreichen Sie endlich das Hauptzwischenziel – erstellen Sie Ihre erste Site und erhalten Sie ein Verständnis für die Verwendung von HTML und CSS beim Erstellen realer Sites. Lassen Sie es sich um eine einfache Website handeln, aber die gewonnenen Erkenntnisse reichen aus, um weiter zu wachsen und komplexere Layouts zu erstellen.

HTML ist die Hypertext-Auszeichnungssprache, die das Web so gemacht hat, wie wir es kennen und lieben. Dank dieses wunderbaren Tools sehen die Websites schön und modern aus und die Benutzerfreundlichkeit ist ebenfalls gewährleistet. HTML ordnet die Elemente einer Webseite einfach benutzerfreundlich an. Seine Arbeit ist vergleichbar mit der von MS Word oder OpenOffice. Sie verwandeln eine inhaltslose Ansammlung von Buchstaben in ein Dokument mit Absätzen, fettem Text, Kursivschrift, Tabellen und sogar Bildern. Ungefähr dieselbe Sprache funktioniert mit HTML, mit dem einzigen Unterschied, dass ihre Dokumente im Browser angezeigt werden und die Möglichkeiten dieses Tools viel größer sind als die eines Texteditors. Für das Markup werden Tags verwendet – spezielle Befehle, die die Struktur einer Webseite beschreiben. Sie sind in spitze Klammern eingeschlossen -<тег>damit der Browser sie vom Großteil des Textes unterscheiden kann. Als Nächstes behandeln wir die Grundlagen von HTML für Anfänger.

Visuelle Redakteure

Anfänger, die gerade erst den Weg zum Erlernen von HTML betreten, beginnen ihre Arbeit oft mit Programmen, mit denen Sie ohne Vorkenntnisse Websites erstellen können. Darin können Sie die Elemente auf dem Bildschirm einfach so anordnen, wie sie im Browser angezeigt werden. Es scheint, dass es sich hier um eine Quelle ewiger Gnade handelt, die es Ihnen ermöglicht, die meisten Webentwickler loszuwerden. Aber nicht alles ist so einfach, denn visuelle Editoren haben viele Mängel, die ihren Einsatz in ernsthaften Projekten unmöglich machen.

Alle diese Programme erstellen viele unnötige Tags, die die endgültige Version der Seite umständlich und suboptimal machen. Natürlich ist dies im Zeitalter des Hochgeschwindigkeitsinternets weniger wichtig als zuvor, aber es gibt eine Reihe von Gründen, warum sich eine prägnante und gut geschriebene Website als praktischer erweist als ihr Gegenstück, das in einem visuellen Editor erstellt wurde. Eine in einem solchen Programm erstellte Webseite wird von Suchrobotern schlecht verarbeitet, da für sie jedes Kilobyte Code wichtig ist und ihnen umständlicher und unlogischer Code mit einer Menge kaum gefallen wird. Darüber hinaus sind Redakteure oft hinter der Zeit zurück und werden irrelevant, und es lohnt sich nicht, Ressourcen für ihre Entwicklung aufzuwenden, da kein einziger Profi diese Produkte verwendet. Daher sollte jeder, der im Bereich der Erstellung von Websites arbeiten möchte, die Grundlagen von HTML kennen.

Stichworte

Wie oben erwähnt, beschreiben Tags dem Browser die Struktur einer Webseite. Die meisten von ihnen haben ein öffnendes und schließendes Tag, aber nicht alle. Zum Beispiel, ..., wobei der Inhalt anstelle von Punkten steht. Der erste zeigt an, wo das Tag beginnt, und der zweite schließt es. Es können weitere Seitenmarkierungselemente enthalten sein, diese können wie eine Nistpuppe ineinander verschachtelt werden. Es ist wichtig, die Tags rechtzeitig zu schließen, damit die Seite korrekt angezeigt wird.

Es gibt auch einzelne Tags, die nicht geschlossen werden müssen. In ihnen ist der Inhalt enthalten, so wie er für die meisten HTML-Tags geschrieben werden kann und die Eigenschaften des Elements festlegt. Es wird im öffnenden Tag angezeigt und sieht etwa so aus: attribute = „…“, wobei anstelle von Punkten ein Attributwert steht. Die Kenntnis der Tags ist der erste und wichtigste Schritt bei der Beherrschung von HTML. Zu den Grundlagen dieser Kunst gehört auch das Verständnis der Struktur einer Webseite.

Dokumentenstruktur

Jedes HTML-Dokument verfügt über eine entsprechende Erweiterung, beispielsweise Index.html. So kann der Browser verstehen, womit er es zu tun hat, und die Seite korrekt anzeigen. Es empfiehlt sich, alle zum Erstellen der Site verwendeten Dateien in einem Verzeichnis zu speichern, was Ihnen das Leben in Zukunft erheblich erleichtern wird. Die Grundlagen der HTML-Hypertext-Auszeichnungssprache erfordern ein klares Verständnis der Struktur eines Dokuments. Es beginnt mit dem Tag, die dem Browser mitteilt, welche HTML-Version in diesem Dokument verwendet wird. Im Moment ist die fünfte Version der Sprache relevant, sodass Sie nichts erfinden müssen. Sie können das obige Tag sicher am Anfang jeder Seite einfügen.

Dann kommen die wichtigsten Paarstrukturen, die das „Skelett“ der Site bilden. Das erste Tag, in dem alle anderen verschachtelt sind − .... Alles, was darüber hinausgeht, wird vom Browser nicht als Webseite erkannt, daher öffnet er das Dokument und schließt es. Dieses Tag ist für jedes Dokument erforderlich. Es enthält auch einige weitere erforderliche Tags, die weiter unten besprochen werden.

Kopf

Im Etikett ... enthält technische Informationen, die nicht auf der Seite angezeigt werden, aber dennoch ein wichtiger Bestandteil des HTML-Dokuments sind. An dieser Stelle werden die Grundlagen der Site gelegt, hier wird die Kodierung ausgewählt und der Seitenname eingegeben. Es ist in einem erforderlichen Tag enthalten .... Der Name wird oben im Browser angezeigt. Dort können Sie auch ein kleines Symbol platzieren, das den Inhalt der Seite kennzeichnet. Für die korrekte Anzeige empfiehlt es sich, sofort die Kodierung des Dokuments anzugeben. Dies kann mit dem Tag erfolgen . Meta-Tags geben Auskunft über die Struktur der Seite und befinden sich normalerweise im Kopf.

Verknüpfung

Um die Grundlagen von HTML zu kennen, müssen Sie auch kaskadierende Stile oder CSS verwenden. Sie legen die Eigenschaften der Elemente fest, die auf der Seite angezeigt werden. Der moderne Ansatz für diese Aufgabe besteht darin, Merkmale wie Farbe, Höhe und Position des Elements aus einer externen Datei zu entfernen, um die Benutzerfreundlichkeit zu erhöhen. Das Tag wird verwendet, um die CSS-Datei zu verbinden . Wenn es fertig ist, sieht es so aus: , wobei href den Speicherort der Datei und type ihren Typ angibt.

Körper

In diesem Teil des HTML-Dokuments wird der sichtbare Teil der Seite erstellt. Alles, was im „Körper“ geschieht, wird vom Browser angezeigt. IN Es werden sehr viele HTML-Tags verwendet. Die Grundlagen sind Textformatierung, das Arbeiten mit Links und die einfachsten Werkzeuge zur Strukturierung einer Webseite. Um mit HTML zu beginnen, reicht es aus, die grundlegenden Tags zu kennen und sie verwenden zu können. Nachfolgend sind die beliebtesten aufgeführt:

mob_info