Grundlagen des Webdesigns (HTML und CSS)

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

    2. 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

    4. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    5. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    6. 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


    This content goes into the box on the right hand side of the page


    This content goes into the box on the right hand side of the page




    CSS-Datei

    # MYFIRSTDIVID
    {
    float:right;
    height:100px;
    width:100px;
    border: 2px solid black;
    }
    MYFIRSTDIVID
    {
    float:right;
    height:100px;
    width:100px;
    border: 2px solid black;
    }


    Um die von Ihnen erstellten Div-IDs zu formatieren, verwenden Sie das "#" - Zeichen in der CSS-Datei ...
    Um von Ihnen erstellte Div-Klassen zu formatieren, verwenden Sie ein "." (Punkt) in der CSS-Datei

    IDs werden verwendet, wenn Sie es wie ein ganz anderes Tag erstellen, wie im obigen Beispiel. CLASSES werden jedoch verwendet, wenn Sie Dinge in einem anderen Tag wie z

    HTML-Datei

    This text is styled by div class...

    This text is styled by div class...



    CSS-Datei

    .MYFIRSTDIVCLASS
    {
    font-style:italic;
    font-weight:bold;
    font-color:yellow;
    }


    Klassen werden also verwendet, wenn Sie die spezifische div-Klasse in einem anderen HTML-Tag haben (ausgenommen HTML-, Body- und Head-Tags).
    Vordefinierte Elemente wie (h2, p, h1, br, em, i, b usw.) werden mit der div-Klassenfunktion bearbeitet, da sie im Dokument häufig wiederholt werden und daher a sein müssen Klasse div ...
    Div-IDs werden verwendet, wenn Sie das Stilelement nur einmal im HTML-Dokument verwenden ...

    Schritt 23: 3 Arten von Stylesheets ...

    Wenn Sie ein externes Stylesheet für CSS verwenden, müssen Sie das Stylesheet mit dem HTML-Dokument im head-Tag verknüpfen







    Das Attribut "href" sollte den Dateinamen Ihrer CSS-Datei haben ... und alle externen CSS-Dateien müssen mit dem Dateityp ".css" enden.
    CSS-Dateien sollten keine HTML-Tags wie enthalten

    etc...

    Wenn Sie ein internes Stylesheet verwenden, schreiben Sie Folgendes in die Head-Tags:



    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx



    Das xxxxxxxx sollte alles enthalten, was Ihr externes Stylesheet enthielt ... also sollte es alle Regeln enthalten ...

    Wenn Sie einen Inline-Stil verwenden, müssen Sie Folgendes tun:

    Wenn Sie das stylen möchten

    Tag mit einem Inline-Stil,
    Dann müssen Sie ein Attribut "Stil" hinzufügen und alle Ihre Regeln gehen dort ein ...

    Dies ist eine Überschrift.



    HINWEIS: Inline-Stile sollten so wenig wie möglich verwendet werden, da CSS so erstellt wurde, dass das HTML-Dokument kein Styling enthält. Wenn also überall in Ihrem Dokument Inline-Stile vorhanden sind, ist dies eine Verschwendung, da Ihr HTML-Dokument ein Styling enthält. ..

    Schritt 24: CSS-Textstile

    Es gibt einige Textstile, die Sie Texten in beliebigen Tags zuweisen können ...

    Farbe des Textes:

    Ex:
    p {color:black;)
    p {color:#000000;)


    In den obigen Beispielen wird der gesamte Text in den Absatz-Tags in schwarzer Farbe angezeigt.

    Textdekoration:

    Ex:
    p {text-decoration:none;}
    p {text-decoration:underline;)


    Im ersten Beispiel werden Unterstreichungen, Überstriche usw. entfernt und der Text wird normal angezeigt. Dies ist nützlich, wenn Links keine Unterstreichungen enthalten sollen.
    Das zweite Beispiel fügt jedem Text im Text eine Unterstreichung hinzu

    Dieser Text ist unterstrichen

    Stichworte.

    Texteinzug:

    Ex:
    p {text-indent:30px;)

    Dadurch wird die erste Zeile des eingerückt

    Tag von 30 px ...

    Texttransformation:

    Ex:
    p {text-transform:uppercase;)

    Dadurch wird der gesamte Text eingefügt

    Dieser Text ist in Großbuchstaben

    Tags in Großbuchstaben.

    Schritt 25: Schriftstile in CSS

    Wenn Sie die Schriftart von Text in einem Tag ändern möchten, verwenden Sie die Auswahl für die Schriftfamilie ...

    Ex:

    p {font-family:Arial;}
    p {font-family:Verdana;}


    Im ersten Beispiel wird der gesamte Text in der Tags werden in Arial sein ...
    Im zweiten Beispiel wird der gesamte Text in der Tags werden in Verdana sein ...

    Schriftart:

    Ex:

    p {font-style:italic;}
    p {font-style:oblique;}


    Im ersten Beispiel ist der Text in der Tags werden kursiv dargestellt ...
    Im zweiten Beispiel ist der Text in der Tags werden schräg gestellt (schräge Schrift ist der kursiven Schrift sehr ähnlich)

    Schriftgröße :

    Ex:

    p {font-size:16px;}
    p {font-size:1em;}


    Im ersten und zweiten Beispiel ist die Schriftgröße in der Tags ist 16px ...

    1em = 16px
    "em" wurde aufgrund eines Größenänderungsproblems mit Internet Explorer eingeführt.

    Schritt 26: CSS-Hintergrund-Styling

    Ihr Hintergrund kann entweder ein Bild oder nur eine Farbe als Hintergrund haben ...

    Geben Sie Ihrem Hintergrund eine Farbe:

    Ex:

    body {background-color:#000000;}
    body {background-color:black;}


    Beide Beispiele geben Ihrem Hintergrund eine schwarze Farbe

    Legen Sie ein Bild als Hintergrund fest:

    Ex:

    body {background-image:url( animals.jpg );}

    Im obigen Beispiel wird das Bild "animal.jpg" als Hintergrund festgelegt und so oft wie nötig wiederholt, um es an den Hintergrund anzupassen ...

    Schritt 27: Überprüfen, Zusammenfassen und Fertigstellen

    Ich werde 2 Editor-Dateien anhängen, die Zusammenfassungen von CSS und HTML enthalten. Ich habe alle Informationen gesucht und gesammelt und bearbeitet, um eine gute Zusammenfassung zu erstellen ...

    In dieser Anleitung habe ich das Thema HTML 4.01 und nicht HTML 5.0 behandelt, da es sich noch in der Entwicklung befindet und viele Tags noch geändert, entfernt usw. werden. Deshalb habe ich beschlossen, Ihnen das stabilere HTML 4.01 beizubringen
    Ich habe CSS 3.0 behandelt, da es die neueste Version ist und ziemlich stabil ist ...

    Wenn Sie Fragen haben, dann posten Sie diese in den Kommentaren, ich werde gerne Ihre Zweifel klären ...
    Wenn du tatsächlich eine Website erstellen willst, dann poste, sobald du sie erstellt hast, einen Kommentar mit dem Code :) Ich würde gerne sehen, welche Art von coolen Websites du machst!

    Ich habe HTML von einigen Websites und in der Schule gelernt ...

    //htmldog.com/
    //www.littlewebhut.com/
    //www.w3.org/
    //www.htmlgoodies.com/

    W3C ist das World Wide Web Consortium, das alle Webstandards für HTML sowie alle Tags und deren Werte festlegt
    w3.org ist ihre Website wie oben erwähnt

    Was nun?

    • Nachdem Sie die Grundlagen von HTML und CSS kennen, können Sie online nach fortgeschritteneren Tutorials suchen (YouTube bietet einige sehr gute Tutorials). Sobald Sie glauben, diese Sprachen beherrscht zu haben, können Sie eine Zertifizierung beantragen ... und Sobald Sie zertifiziert sind, können Sie Ihre eigenen Websites erstellen und Ihren Lebensunterhalt verdienen ... wenn Sie Website-Designer werden ... nennen wir es "Webmaster" ...
    • Lernen Sie Javascript oder eine andere Skriptsprache, um Ihre Website interaktiver zu gestalten
    • Beginnen Sie mit dem Erlernen von AJAX, PHP usw., um Informationen von Benutzern wie Anmeldungen usw. zu sammeln.
    • Entscheiden Sie sich für die härteren und fortgeschritteneren Programmiersprachen C, C ++, Java oder andere leistungsstarke Programmiersprachen, um Programmdesigner und nicht nur Webdesigner zu werden.


    Anhänge

    • CSS-Eigenschaften Reference.rtf Download
    • HTML 4.01 Summary.rtf herunterladen

    Ähnlicher Artikel