Ich lerne HTML und CSS und werde bald auch dafür zertifiziert. Ich dachte, es wäre eine gute Idee, ein Tutorial darüber zu veröffentlichen, wie Sie mit dem Entwerfen Ihrer eigenen Website mit HTML und ein wenig CSS beginnen können. ..

HTML ist eine Abkürzung für Hyper Text Markup Language .

CSS ist eine Abkürzung für Cascading Style Sheets .

HTML wird tatsächlich verwendet, um die Webseite und den Inhalt, den sie enthält, wie die Bilder und das Schreiben, zu erstellen.

CSS wird verwendet, um die Webseite zu gestalten und die Schrift und Bilder an einem bestimmten Ort anzuordnen, z. B. ein Bild oben auf der Seite, ein anderes in der Mitte usw.

"Alles im Internet kann einfach mithilfe von HTML und CSS geändert, gelöscht oder hinzugefügt werden! Auch auf instructables.com!"

Das Beste ist ...

Alles was Sie brauchen ist ein Computer!

Beginnen wir also mit unserer Reise ins Webdesign ...

Schritt 1: Woraus besteht eine Website?

Wenn Sie im Internet surfen und eine Website interessant und cool finden und herausfinden möchten, was und wie sie erstellt wurde oder welche HTML-Codierung sie verwendet haben, müssen Sie lediglich Folgendes tun:

• Klicken Sie mit der rechten Maustaste auf einen leeren Bereich auf der Webseite.

• Klicken Sie auf Seitenquelle anzeigen

• Dies öffnet ein neues Fenster oder eine Registerkarte entsprechend Ihren Einstellungen, in der der HTML-Code angezeigt wird, auf dem die Website ausgeführt wird.

HINWEIS: Einige Websites wie Instructables, Google, Youtube usw. verwenden viel Javascript in ihrer Codierung. Machen Sie sich also keine Sorgen. Nachdem Sie dieses Instructable gelesen haben, können Sie leicht verstehen, was HTML und CSS sind und welche grundlegenden Tags es gibt .

Schritt 2: HTML, was ist das?

HTML wie gesagt schon ist

Hyper Text Markup Language ...

Alles in HTML funktioniert mithilfe von 'Tags' . Tags sind Elemente in einem HTML-Dokument, die dem Schreiben oder den Bildern oder Audio- oder Videodateien Befehle geben, was zu tun ist, wo usw. auf einer Website platziert werden soll ...

In HTML haben Tags immer "<" vor und ">" nach dem Tag ...
ex- (Dieses Tag macht den Text fett)

Alle HTML-Dokumente beginnen und enden mit




Diese Tags teilen den Browsern mit, dass diese Datei eine Webseite und nicht nur eine gewöhnliche Textdatei ist ...

Schritt 3: Was brauchen Sie?

Um Webseiten zu erstellen, benötigen Sie lediglich:

Ein Worteditor. ..wie Notizblock.

Viele Leute, die Websites erstellen, verwenden Programme wie "Dreanweaver" und "Microsoft Frontpage", da sie das Erstellen von Websites erleichtern und bei der Codierung helfen.

Der beste Weg, um HTML zu lernen, besteht darin, die Grundlagen zu verwenden ... Editor und sobald Sie die Grundlagen gelernt haben, können Sie mit den Bearbeitungsprogrammen fortfahren ...

Schritt 4: Grundstruktur eines HTML-Dokuments

Alle HTML-Dokumente haben ein "Head" - und ein "Body" -Tag ...

Alle HTML-Dokumente haben also eine ähnliche Struktur ...

(Starten des HTML-Dokuments)
(Starten des Head Tags)
(Beenden der Kopfmarke)
(Starten des Body-Tags)
(Beenden des Body-Tags)
(Beenden des HTML-Dokuments)

HINWEIS: Bei HTML-Tags wird nicht zwischen Groß- und Kleinschreibung unterschieden. Dies bedeutet, dass es keine Rolle spielt, ob Sie sie mit Großbuchstaben oder Kleinbuchstaben schreiben ...

Jedes HTML-Tag hat ein öffnendes und ein schließendes Tag sowie jeglichen Inhalt zwischen diesen Tags und gibt diesem Inhalt die Eigenschaft, die das Tag befiehlt ... Beispiel: ... (Dies dient zum Fettdruck des Textes)
Einige HTML-Tags haben das öffnende und das schließende Tag im selben Tag ... Beispiel:
(Dies ist, um die Linie zu brechen)

Was auch immer in den Body-Tags enthalten ist, wird direkt auf der Webseite angezeigt, und was auch immer in den Head-Tags enthalten ist, sie definieren und geben Informationen über die Webseite, die nicht angezeigt werden, wenn Sie die Seite in einem Webbrowser anzeigen.

Schritt 5: HTML-Überschriften-Tags

In HTML gibt es 6 Sätze von Tags, die für Überschriften verwendet werden ...
Diese Tags gehen alle in die Body-Tags ...

Dies ist die größte Überschrift

Dies ist die kleinste Überschrift

HINWEIS: Die meisten Benutzer machen einen Fehler bei der Verwendung dieser Tags, um den Text zu vergrößern oder zu verkleinern. Dies sollte nicht erfolgen, da Suchmaschinen die Seite anhand dieser Überschriften definieren, um herauszufinden, welche Teile der Seite was sind ... und nur Wenn Sie es für die Schriftgröße verwenden, erhalten die Suchmaschinen keine gute Definition für die Seite ...

Schritt 6: Textelemente (Tags) in HTML

In HTML gibt es ungefähr 5 Tags, die Text auf der Webseite definieren.
Diese Tags befinden sich im Hauptteil des HTML-Dokuments.

Alles hier wird als neuer Absatz aufgeführt

Dies fügt einen Zeilenumbruch hinzu (es ist wie das Drücken der Eingabetaste auf der Tastatur während der Eingabe)

---

Dadurch wird an einer beliebigen Stelle im Dokument eine Linie hinzugefügt (horizontale Regel).

 Alles hier wird so angezeigt, wie es eingegeben wurde ... alle Leerzeichen und "Eingaben" beim Eingeben werden auf der Webseite angezeigt 

Die häufigsten Tags von diesen sind die und
Tags, wie sie in fast jeder Webseite verwendet werden ...
Das Pre-Tag ist großartig, wenn Sie faul sind und nur möchten, dass die Leerzeichen und Eingaben so sind, wie Sie es möchten, anstatt die anderen Textelemente hinzuzufügen. Dann wird es für Browser und Suchmaschinen wieder schwierig sein, Ihre Seite zu analysieren ...

Schritt 7: Logische Stile für Text in HTML

Diese Elemente werden wieder in die Body-Tags eingefügt, da sie Text definieren, der auf der Webseite angezeigt wird ...
Es gibt 3 logische Hauptstile für Text in HTML ....

Text in here is emphasized
Text in here is strong
Computer code is put in here

Das Hervorhebungs-Tag macht den Text nur kursiv, aber etwas verbogener als normale kursive Schrift ...
Das starke Tag macht den Text fett, macht ihn aber auch etwas enger, da der Buchstabenabstand verringert wird.
Das Code-Tag definiert Computercode, der für die Anzeige auf der Webseite benötigt wird. Es hat eine andere Schriftart und der Abstand und die Größe der Schriftart sind klein ...

Schritt 8: Physische Stile für Text in HTML

Es gibt heutzutage nur zwei gängige physische Stile für Text in HTML ....
Diese Tags werden auch in den Hauptteil des Dokuments eingefügt.

This text is bold
Dieser Text ist kursiv

Diese Tags sind sehr, sehr häufig, da sie von allen verwendet werden, selbst in Textbearbeitungsprogrammen wie Microsoft Word ...
Das fette Tag macht den Text dicker und breiter und etwas länger ...
Durch das kursive Tag wird der Text etwas nach rechts gebogen .

Schritt 9: Hinzufügen von Bildern in HTML

Dies ist eine der einfachsten Aufgaben in HTML ...
Dieses Tag wird auch in den Hauptteil des Dokuments eingefügt ...

Das obige Tag fügt Ihrer Seite ein Bild hinzu ... und wenn Sie es ausrichten möchten, müssen Sie nur Folgendes hinzufügen:

align="right"
align="letf"
align="center" /

Fügen Sie eine dieser Optionen direkt nach dem Schließen der Anführungszeichen und vor dem Zeichen "Größer als" hinzu

Hinweis: Das Bild, das Sie hinzufügen, sollte sich in demselben Ordner befinden, in dem Ihr HTML-Dokument gespeichert ist. Andernfalls müssen Sie den Dateipfad zum Bild angeben.

Schritt 10: Listen in HTML

In HTML gibt es zwei Arten von Listen:
1) Aufzählungszeichen oder ungeordnet
2) Nummeriert oder bestellt

Diese gehen wieder in den Hauptteil des Dokuments.

Jedes Element in der Liste wird mit dem angegeben

Listenpunkt

Etikett.


First list item
Second list item
Third list item



First list item
Second list item
Third list item

1. 
First list item
Second list item
Third list item



First list item
Second list item
Third list item


First list item
Second list item
Third list item



First list item
Second list item
Third list item

2. 
First list item
Second list item
Third list item



First list item
Second list item
Third list item


First list item
Second list item
Third list item



First list item
Second list item
Third list item

3. 
First list item
Second list item
Third list item



First list item
Second list item
Third list item


First list item
Second list item
Third list item



First list item
Second list item
Third list item



First list item
Second list item
Third list item



First list item
Second list item
Third list item



First list item
Second list item
Third list item



First list item
Second list item
Third list item

• 
First list item
Second list item
Third list item



First list item
Second list item
Third list item


First list item
Second list item
Third list item



First list item
Second list item
Third list item

• 
First list item
Second list item
Third list item



First list item
Second list item
Third list item


First list item
Second list item
Third list item



First list item
Second list item
Third list item

• 
First list item
Second list item
Third list item



First list item
Second list item
Third list item


First list item
Second list item
Third list item



First list item
Second list item
Third list item


Die erste ist eine geordnete Liste, die die Liste mit Zahlen von 1, 2, 3 usw. anzeigt ...
Die zweite ist eine ungeordnete Liste, die die Liste mit Aufzählungszeichen zeigt ...

Schritt 11: Links in HTML

In HTML gibt es drei Haupttypen von Links:
1) Gewöhnlicher Link, um auf eine andere Online-Website oder auf eine andere Webseite Ihres Computers zu verlinken.
2) Link "Bilder", um ein Bild selbst als anklickbaren Link zu verwenden.
3) Mailto-Link, um einen Link zu erstellen, der einen E-Mail-Client öffnet.

Diese Tags werden auch in das Body-Tag des Dokuments eingefügt

Ein gewöhnlicher Link:
Jump to Google

Ein Bildlink:

Ein Mailto-Link:
Send email

Definiert einen Anker, wird er in allen Links und Inline-Links verwendet, da er überall dort einen Anker bildet, wo er in den Code eingefügt wird.
Die Eigenschaft "href" / im Tag weist den Anker an, in einigen Fällen auf welche Website oder einen anderen Anker selbst zu verlinken ...

Schritt 12: Ankerverknüpfung in HTML

Haben Sie diese coolen Websites gesehen, deren Index auf verschiedene Teile ihrer Seite verweist? wie Wikipedia?

//en.wikipedia.org/wiki/HTML (siehe Inhaltsteil)

Um diese zu erstellen, verwenden wir die Ankertags und verknüpfen 2 Ankertags miteinander.
Diese Tags werden auch im Hauptteil des Dokuments verwendet ...

Step 5
Jump to step 5

Das erste Tag gibt an, dass der Text Schritt 5 mit dem Namen "Schritt 5" im Dokument verankert ist.
Das zweite Tag ist das Link-Tag, das den Text "Zu Schritt 5 springen" zu einem Link macht, der auf den zuvor erstellten Schritt 5-Anker verweist ...

Die Verwendung dieses Tags ist für Websites mit vielen Informationen wie Wikipedia unbedingt erforderlich :)

Schritt 13: Tabellen in HTML

Tabellen sind Hauptbestandteile, wenn Ihre Website auf Statistiken und Details basiert. Die Tabellen sehen wie Microsoft Excel-Tabellen aus, aber Sie können sie interessanter gestalten, indem Sie sie in CSS bearbeiten, auf das wir später in dieser Anleitung eingehen werden.

Tabellen bestehen aus 3 Dingen ... oder mehr wie 3 Tags ...

Alle diese Tags werden auch in den Hauptteil des Dokuments aufgenommen ...

Die Tabellen-Tags teilen dem Dokument mit, wo die Tabelle beginnt und endet
Die tr-Tags fügen der Tabelle eine Zeile hinzu (Tabellenzeile)
Die td-Tags fügen der Tabelle Zellen hinzu (Tabellenbeschreibung)

Schauen Sie sich die Bilder an, um besser zu verstehen, wie Tabellen funktionieren ... da Tabellen einer der schwierigsten Teile in HTML sind ...

Schritt 14: Frames und IFrames in HTML

Frames und IFrames sind dasselbe, da sie verwendet werden, um eine Webseite in einer Box wie auf einer anderen Webseite anzuzeigen.

IFrame wird verwendet, wenn Sie nur eine Webseite haben, die Sie auf Ihrer Webseite in einer kleinen Box anzeigen möchten ...


Dies zeigt www.google.com in einem kleinen Rahmen auf Ihrer Website ...












Frames befinden sich immer in einem und Tags, da diese Tags die Frames gruppieren ... genau das Gleiche tun wie Sie werden jedoch verwendet, wenn Sie mehr als einen Frame (Webseite) anzeigen möchten und nach Tags gruppiert sind. Wie viele Frames Sie einfügen, werden im selben Browserfenster angezeigt und gleichmäßig aufgeteilt.

Wenn Sie Frames verwenden, können Sie die Tags nicht verwenden. Sie können also nur mehr als eine Webseite in einem Browserfenster anzeigen. Durch Hinzufügen der Tags funktionieren die Tags nicht mehr

Eine einfache Möglichkeit, sich zu merken, welches ist, iframe ist für einzelne Frames, da "I Frame" wie "Independent Frame" / klingt
Diese Tags sind auf den meisten Websites nicht sehr verbreitet. Einige Websites verwenden diese Tags jedoch immer noch ...

Schritt 15: Allgemeine HTML-Entitäten

Wenn Sie in HTML Text wie © usw. einfügen möchten, verwenden Sie häufig HTML-Entitäten, um die Symbole anzuzeigen, damit sie nicht mit Tags im Dokument verwechselt werden.

Alle Entitäten beginnen mit einem & -Zeichen ...

< = <(Kleiner als Symbol)
> => (Größer als Symbol)
© = © (Copyright-Symbol)
= (Non-Breakable Space) (HTML löscht alle zusätzlichen Leerzeichen, die Sie beim Schreiben hinzufügen, also in a

Tag Wenn Sie 10 Leerzeichen haben, wird nur 1 Leerzeichen angezeigt, da der Rest gelöscht wird. Wenn Sie möchten, dass alle diese Leerzeichen angezeigt werden, fügen Sie die Entität zu Ihrem hinzu

Tag und das wird 1 dauerhaften Speicherplatz zu Ihrem hinzufügen

Etikett...

Es gibt zwei Möglichkeiten, wie Sie eine Entität schreiben können: eine mit dem Zeichencode wie in den ersten beiden Beispielen und die andere mit dem Zahlencode wie im dritten Beispiel ... (Zahlenentitäten haben "#" vor sich)

Diese Entitäten sind wichtig, wenn Sie möchten, dass Ihr HTML-Dokument alles so anzeigt, wie Sie möchten, und nicht usw. mit den Tags verwechselt wird ...

Schritt 16: Anführungszeichen und Blockzitat-Tags

Diese beiden Tags werden verwendet, um Zitate anzuzeigen ...

Das Quotation Tag wird verwendet, um kurze Zitate anzuzeigen.
Das Zitat-Tag wird verwendet, um lange Zitate anzuzeigen

Das Tag fügt Anführungszeichen vor und nach seinem Inhalt hinzu ("Inhalt")
Das Quotation Das Tag trennt den Text von der Umgebung, indem es ihn zu einem Block macht und ein wenig einrückt, wie wir es in Aufsätzen tun, um lange Zitate in einem anderen Absatz zu blockieren

DIESER TEXT WURDE BLOCKIERT (Dies ist ein Blockzitat).
Das Tag ist sehr nützlich, da es den Inhalt einrückt, aber das Tag ist nicht so nützlich, da wir einfach selbst Anführungszeichen hinzufügen könnten, aber es macht den Text organisierter ...

Schritt 17: Titel der Webseite in HTML

Zur Abwechslung wird dieses Tag im Abschnitt des Dokuments hinzugefügt. Dieses Tag gibt an, wie der Titel Ihres Dokuments lautet. Dies wird auf der Registerkarte oder dem Seitentitel Ihrer Webseite angezeigt. Schauen Sie sich die Bilder an um ein besseres Verständnis zu bekommen.


THIS IS THE TITLE OF THE PAGE!


Dies ist kein optionales Element einer Webseite, jede einzelne Webseite muss einen Titel haben, sonst wird der Dateiname als Kachel angezeigt ...

Schritt 18: Meta-Tags in HTML

Dies ist ein weiteres Kopfelement ...
Es gibt eine Beschreibung Ihrer Website im Internet.




Das erste Tag ist ein Meta-Tag für die Beschreibung und der Inhalt beschreibt Ihre Website ...
Das zweite Tag ist ein Keyword-Meta-Tag und der Inhalt enthält Keywords zu Ihrer Website ...

Es gibt andere Meta-Tags, die für verschiedene Dinge wie "Meta-Autor" usw. verwendet werden, aber dies sind die häufigsten ...

HINWEIS: Suchmaschinen und Website-Ranking-Software suchen nach dem Meta-Tag, um zu verstehen, worum es auf der Website geht und zu welchem ​​Kateogary sie gehört ...

Schritt 19: CSS, was ist das?

CSS steht wie gesagt für Cascading Style Sheets
Diese Stile, die wir anwenden, entscheiden, wie die HTML-Elemente angezeigt und platziert werden.

Es gibt drei Möglichkeiten, wie wir Stile auf unser HTML-Dokument anwenden können:
1) Externes Stylesheet
2) Internes Stylesheet
3) Inline-Stile

CSS wurde eingeführt, weil HTML nur erstellt wurde, um die Informationen mit Tags wie zu notieren

etc...
CSS sollte HTML alle benötigten Stile geben ...

Befehle in CSS werden als "Regeln" wie "Tags" in HTML-Dokumenten bezeichnet ...

Schritt 20: Syntax in CSS

Jede CSS-Regel besteht aus 2 Teilen:

1) Selektor (Jede Regel kann nur 1 Selektor haben)
2) Erklärung (Jede Regel kann mehr als eine Erklärung haben)

Selector ist das eigentliche HTML-Tag, das Sie formatieren und bearbeiten möchten. Wenn Sie also das Aussehen von a ändern möchten

Tag dann

Selektor = h1
Deklaration = Farbe: lila Schriftgröße: fett
(Diese Deklarationen werden verwendet, wenn Sie etwas in der enthalten möchten

Tag, um in lila Farbe zu sein und in Fettdruck zu sehen)

In Deklarationen ist der erste Teil die Eigenschaft "CSS-Eigenschaft" (Farbe, Schriftgröße) und der zweite Teil der "Wert" (lila, fett).

Schritt 21: Hinzufügen von Kommentaren in CSS

Wenn Ihre CSS-Datei viele Regeln enthält, können Sie Kommentare verwenden, um alles zu schreiben, was Sie möchten, und es wird nicht angezeigt oder die CSS-Regeln werden unterbrochen ...

/*Kommentar*/

Auf diese Weise wird ein Kommentar in CSS hinzugefügt, viel einfacher als HTML ( )

Sie können eingeben, was einige Regeln tun, wenn Sie sich nicht sicher sind. Dann können Sie sie online nachschlagen und dann einen Kommentar hinzufügen, der besagt, was diese bestimmte Regel bewirkt ...

Schritt 22: CSS-ID und CLASS-Regeln

Nehmen wir an, Sie möchten rechts auf Ihrer Seite ein Feld erstellen, in das Sie Text einfügen können. Dann müssten Sie ein eigenes Tag erstellen und es über CSS definieren, damit dies geschieht.

Wir verwenden ID- und CLASS-Selektoren, um die Arbeit für uns zu erledigen ...

Wir benutzen sie so:

HTML-Datei