Accentsconagua

Der Anfängerleitfaden für Webdesign Teil 1

Code
Share

In dieser Serie erfahren Sie, wie Sie eine Website mit den neuesten Techniken des Webdesigns (HTML5 & CSS3) erstellen. Diese Serie richtet sich an Personen, die keinerlei Kenntnisse des Webdesigns besitzen.

Auch in dieser Serie erhältlich:

  1. Der Anfängerleitfaden für Webdesign: Teil 1
  2. Das Einsteigerhandbuch für Webdesign: Teil 2
  3. Der Anfängerleitfaden für Webdesign: Teil 3

Moderner Webbrowser

Da wir unsere Webseiten nach den neuesten Standards (HTML5 und CSS3) erstellen, benötigen wir einen modernen Webbrowser, der die neuesten Webtechnologien beherrscht.

Versionen des Microsoft Internet Explorer-Browsers unter IE8 lassen es einfach nicht zu. Wenn Sie IE7 oder niedriger verwenden, laden Sie einen der folgenden Webbrowser herunter.

Wenn Sie bereits einen anderen Webbrowser verwenden, überprüfen Sie, ob die Mindestanforderungen für eine optimale Leistung erfüllt werden.

  • Mozilla Firefox 3+
  • Google Chrome
  • Apple Safari 4+
  • Opera 10+
  • Microsoft Internet Explorer 8

"Warum brauche ich einen bestimmten Browser?" Sie können fragen. Da HTML5 relativ neu ist, verstehen ältere Browser nicht, wie sie den Code lesen und richtig in eine Webseite verwandeln.

Texteditor

HTML-Dateien sind einfach Textdateien mit der Erweiterung .html. Sie benötigen keine spezialisierte oder teure Software wie Dreamweaver, um sie zu erstellen. Ihr Computer wird bereits mit Software vorinstalliert, mit der Sie Webseiten unter "Notepad" unter Windows oder "TextEdit" (im "Nur-Text-Modus") unter Mac schreiben können.

Während die Software auf Ihrem Computer vorinstalliert ist Wird besorgt, Es ist weit weg vom Besten. Ich empfehle den Download von Notepad ++, wenn Sie unter Windows oder TextWrangler unter Mac arbeiten. Beide Programme sind vollständig kostenlos und bieten eine Reihe von Funktionen, die für Webentwickler nützlich sind, z. B. Syntaxhervorhebung, Bearbeitung von Registerkarten und Zeilennummerierung.

Für Mac-Benutzer empfehle ich dringend den Kauf von TextMate, Coda oder Espresso. Windows-Benutzer, versuchen Sie es mit E-TextEditor.



Einführung in HTML

Jede Website im Internet ist in Hyper-Text Markup Language (HTML) geschrieben. Die HTML-Sprache ist im Laufe der Jahre gewachsen und erweitert worden, da das Internet immer mehr an Bedeutung gewinnt und Websites neue Funktionen benötigen.

Die HTML-Sprache wird vom World Wide Web Consortium (W3C) verwaltet. Die neueste Spezifikation ist derzeit HTML 5, die der Sprache eine Reihe neuer Funktionen hinzugefügt hat und dazu beiträgt, den Weg zu interaktiveren und funktionsreichen Webseiten zu ebnen.

Eine einfache HTML-Seite sieht folgendermaßen aus:

    Hallo Welt!   
Hallo und herzlich willkommen auf meiner Website.

Der obige Code erstellt die folgende Website, wenn sie in einem Webbrowser geöffnet wird:


HTML ist eine sehr einfache Sprache zum Lernen. Sie fügen einfach "Tags" in Ihren Inhalt ein, die beschreiben, wie jedes Teil des Inhalts in einem Webbrowser angezeigt werden soll.
Sie fügen beispielsweise Tags in Ihre Seite ein, an denen neue Textabsätze beginnen sollen, um Text zu einer Überschrift innerhalb des Dokuments zu machen, Bilder, Links zu anderen Seiten Ihrer Website oder an anderer Stelle im Internet usw. einzufügen.

HTML-Tags werden darin eingeschlossen < > spitze Klammern. Wenn Sie das vorige Beispiel betrachten, werden Sie feststellen, dass jedes 'Tag' ein Paar ist. Wir haben an der Spitze und unten.
informiert den Webbrowser darüber, dass alles innerhalb des Tag-Paares HTML-Code ist. Das Tag sagt dem Browser, dass der HTML-Inhalt beendet wurde. Der "Schrägstrich" im letzten Tag kennzeichnet dies als "schließendes" Tag.

HINWEIS: Das Die Zeile muss am Anfang eines HTML5-Codes stehen, damit sie als "gültiger" Code angesehen wird. In dieser Zeile wird dem Webbrowser der Dokumenttyp der restlichen Seite angegeben. Mit anderen Worten, in welcher HTML-Version das Dokument markiert ist, damit der Browser das Dokument korrekt wiedergeben kann.

Das … Direkt im folgenden Abschnitt werden Informationen über die Webseite eingefügt, die nicht auf der Hauptseite selbst angezeigt werden, sondern Metadaten zu Ihrer Seite für den Browser enthalten.

In der Abschnitt haben wir den Text "Hallo, Welt!" innen gewickelt … Stichworte.
enthält wörtlich den Titel der aktuellen Webseite, die vom Webbrowser zur Benennung des Fensters / Registers verwendet wird:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_4.png"><br> <p>Nach dem <head> Abschnitt haben wir <body>. Hier wird der tatsächliche Inhalt für Ihre Webseite platziert. Im Körper haben wir eine <p> Etikett mit einem kleinen Begrüßungstext.<br><p> Markieren Sie einen Absatz auf Ihrer Seite. Zum Beispiel:</p> <pre> <p>Es war einmal in einem weit entfernten Land eine Prinzessin, die seit jeher glücklich lebt.</p> <p>Das Ende.</p></pre> <p>Markiert zwei Absätze Text. Wenn wir das in einem Browser anzeigen würden, sehen wir Folgendes:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_5.png"><br> <p>Sie fragen sich vielleicht, warum wir diese brauchen <p> und </p> Tags, um einen Absatz anzuzeigen. Nun, wenn nicht, und schrieb die Webseite so:</p> <pre> Es war einmal in einem weit entfernten Land eine Prinzessin, die seit jeher glücklich lebt. Das Ende.</pre> <p>Die Seite sieht in einem Browser so aus:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_6.png"><br> <p>Wie Sie sehen, ignoriert der Browser alle Formatierungen, die wir in der Datei vornehmen. Wir könnten unsere Beispielwebseite wie folgt schreiben und diese wird im Browser angezeigt:</p> <pre> <!doctype html><html><head><title>Hallo Welt!

Hallo und herzlich willkommen auf meiner Website

Der Browser interessiert sich nur für das, was die HTML-Tags ihm sagen. Alle Leerzeichen, die Sie in das Dokument aufnehmen, werden ignoriert (zusätzliche Leerzeichen, Tabulatoren, neue Zeilen usw.).

Eine einfache Webseite erstellen


Jetzt verstehen Sie die Grundlagen von HTML. Lassen Sie uns unsere erste Webseite erstellen! Das Bild oben ist, wie diese Seite letztendlich aussehen wird.

Erstellen Sie irgendwo auf Ihrem Computer einen neuen Ordner, und nennen Sie ihn "html-from-scratch". Erstellen Sie mit Ihrem bevorzugten Texteditor eine neue leere Datei und speichern Sie sie in diesem Ordner als "my-first-webpage.html"..
Geben Sie folgendes in Datei ein:

    HTML von Grund auf

Das obige ist ein grundlegendes HTML 5-Dateilayout. Wir haben den Dokumententyp in der ersten Zeile deklariert und Tags und legen Sie "HTML From Scratch" als Titel für die Seite fest. Wir schließen dann den Kopf und öffnen den Körper.

In Zeile 7 haben wir einen Kommentar eingefügt. Verwenden Sie Kommentare, um zusätzliche Informationen in Ihrem Code zu hinterlassen, die nicht auf Ihrer Webseite angezeigt werden. Markieren Sie einen Kommentar, indem Sie Ihren Text darin einbetten Stichworte.

Schließlich schließen wir unsere geöffneten body- und html-Tags, um das Dokument zu beenden.

Header

Entferne das Zeile aus Ihrem Quellcode und geben Sie Folgendes ein:

  
HTML von Grund auf

Das Tag ist ein neues Element, das in HTML5 eingeführt wurde. Es ist vorhanden, um den Abschnitt "Header" einer Webseite zu markieren und zu strukturieren. Die Kopfzeile ist der obere Abschnitt einer Webseite, normalerweise dort, wo sich der Name der Site befindet.

Vor HTML5 haben wir verwendet

und
(oder ähnliches), aber ich werde nicht auf ältere Spezifikationen von HTML eingehen, da wir den neuesten Standard lernen.

WICHTIG: ist nicht mit zu verwechseln . Sie sind beide völlig verschiedene Tags.

In unserem Header enthalten wir eine

Etikett. H1 wird verwendet, um die Hauptüberschrift auf Ihrer Seite zu markieren (in diesem Fall den Namen unserer Website). HTML enthält Header-Tags von 1-6 mit

der größte und wichtigste Titel auf der Seite

.


Navigation

Als Nächstes markieren wir das Navigationsmenü für die Website. Nach dem Schließen , Geben Sie folgendes ein:

Dieser Codeabschnitt mag ein wenig beängstigend wirken, aber brechen wir ihn auf. Der Block oben markiert einen Navigationsbereich (