Die Grundlagen von HTML und CSS Coding

11 Schritt:Schritt 1: Einrichten Schritt 2: Überschriften und Absätze Schritt 3: Text Emphasis Schritt 4: Listen Schritt 5: HTML Images Schritt 6: CSS-Grundlagen Schritt 7: Farben, Schriftarten, Hintergründe Schritt 8: CSS: IDs Schritt 9: CSS-Klassen Schritt 10: HTML: Verknüpfungen Schritt 11: Die Grundlagen!

Die Grundlagen von HTML und CSS Coding

Die Grundlagen von HTML und CSS Coding

Haben Sie sich jemals gewünscht, um Ihre eigene Website zu machen, aber die anderen webbuilders zu teuer sind? Suchen Sie nicht weiter für eine Einführung in HTML und CSS Programmierung und Codierung.

Schritt 1: Einrichten

  1. Die Grundlagen von HTML und CSS Coding

    Die Grundlagen von HTML und CSS Coding

    Jedes HTML und CSS-Codierung Seite beginnt mit diesem leeren Blatt, die so genannte Skelett. Dies ist ein sehr wichtiger Schritt.

Schritt 2: Überschriften und Absätze

  1. Die Grundlagen von HTML und CSS Coding

    Die Grundlagen von HTML und CSS Coding

    Überschriften und Absätze sind die ultimative Kern der HTML-Programmierung. Überschriften und Absätze sind, wie Sie Ihren Text einzufügen.
    Es gibt sechs verschiedene Überschriften:
    h1, (um den Titel)
    h2, (etwas kleiner)
    h3, (auch kleinere)
    h4, (kleiner!)
    h5, (zweite bis kleinsten)
    h6, (absolute kleinste)
    Absätze:
    p (etwa so groß wie dieser Text, den Sie gerade lesen)

    Also, wie ich mit Tags zu versehen?


    Jede andere Position hat einen anderen Tag, aber der HTML ist super einfach. Hier sind die Tags, die Sie für den Einsatz
    Überschriften:
    h1: <h1> Text hier </ h1>
    h2: <h2> Text hier </ h2>
    h3: <h3> Text hier </ h3>
    h4: <h4> Text hier </ h4>
    h5: <h5> Text hier </ h5>
    h6: <h6> Text hier </ h6>
    Absätze:
    Absatz: <p> Langtext hier </ p>
    Bild Siehe zum Beispiel der Code

Schritt 3: Text Emphasis

  1. Die Grundlagen von HTML und CSS Coding

    Die Grundlagen von HTML und CSS Coding

    Also, Sie Ihren Text haben. Sagen, hier ist meine Nummer:
    <P> Das Sandwich ich in der Mall hatte schmeckte schrecklich ... </ p>
    Aber ich möchte, dass schreckliche in kursiv zu machen. Es gibt keine kursiv Taste auf eine Codierung Blatt! Was kann ich tun?
    Nun, ich werde zwei neue Tags einführen:
    strong (fett, (<strong> BOLD TEXT HERE </ strong>))
    Schwerpunkt (kursiv, (<em> kursiven Text hier </ em>))
    Siehe Bild oben!
    <P> Das Sandwich hatte ich am schmeckte Zentrum <em> terrible </ em>
    Siehe ???

Schritt 4: Listen

  1. Die Grundlagen von HTML und CSS Coding

    Die Grundlagen von HTML und CSS Coding

    Nun werden wir die Einführung ein paar neuen Tags.
    <Ul>
    <Li> Aufzählung Element </ li>
    <Li> Ein weiterer Punkt </ li>
    <Li> So weiter und so weiter ... </ li>
    </ Ul>
    <Ul> Mittel (ungeordnete Liste, so Aufzählung)
    <Li> bedeutet, zu der Liste Setzen Sie einen Artikel
    <Ol> Mittel (geordnete Liste, so nummerierte Liste)

Schritt 5: HTML Images

  1. Die Grundlagen von HTML und CSS Coding

    Die Grundlagen von HTML und CSS Coding

    Die Grundlagen von HTML und CSS Coding

    Was ist eine Webseite ohne Bilder ?? Nun werden wir einige neue Tags einfügen, und Jazz-up auf unserer Seite mit Bildern !! Yay!
    <Img src = "Legen Sie die Bild-URL here!" alt = "Legen Sie die Bild-URL here!" width = "203"
    Okay, jetzt zu erklären!
    <Img src = ""> ist die Quelle, von wo aus Sie erhalten das Bild. Sage ich ein Bild von einem Hund wollte. Ich würde die Bild-URL setzen, so wie dieses:
    <Img src = " Die Grundlagen von HTML und CSS Coding


    ">
    Das fügt das Bild der Hund in meiner Webseite. Sie können den Hund in der Bilder-Bereich zu sehen!
    <Img src = "" alt = "">
    <Alt = ""> ist nicht notwendig, in einer Web-Seite, aber wenn jemand nicht das Bild zu sehen, wird das alt das Bild zu erklären. Auch für blinde Menschen, die ein Computersystem, das die Seite für sie liest haben, wird das System die Alt lesen, um das Bild zu erklären.
    Also:
    <Img src = " Die Grundlagen von HTML und CSS Coding


    "Alt =" Netter Hund mit großen, wachsam, braune Augen ">
    Jetzt die
    <Width = "230">
    Dies ist ein sehr einfaches Teil. Dieses Tag einfach nur die Größe des Bildes. So die Breite würde jetzt 230 Pixel betragen!
    So, hier ist unsere volle tag:
    <Img src = " Die Grundlagen von HTML und CSS Coding


    alt = "Netter Hund mit großen, wachsam, braune Augen" width = "230">
    Yay !!

Schritt 6: CSS-Grundlagen

  1. Die Grundlagen von HTML und CSS Coding

    CSS ist für Styling verwendet. Anstatt alt, langweilig, Schwarzweiss-Text, können Sie CSS, um Jazz Dinge ein wenig zu benutzen!
    Schauen Sie, wie Sie CSS im oberen Bild hinzuzufügen!
    CSS ist eine ganz andere Sprache als HTML. Zum Glück für uns ist es aber leicht zu merken! So lets get started!
    Beobachten Sie die obere Bild, wo Sie die CSS Tags hinzuzufügen.
    Die Tags auf CSS sieht wie folgt hinzufügen:
    Also in diesem Tag, registriert der Computer alles als CSS! Cool!

Schritt 7: Farben, Schriftarten, Hintergründe

  1. Die Grundlagen von HTML und CSS Coding

    Die Grundlagen von HTML und CSS Coding

    Nun, da wir das <style> Tag gelernt haben, können wir unsere Webseite Art! Lassen Sie uns beginnen, indem Sie lernen, um Farbe in ... sagen wir ... den H1S schreiben! Dies wird Farbe auf alle H1S hinzuzufügen. Hier ist, wie Sie es tun:
    h1 {
    color: blue;
    font-family: Monospace;
    }
    Denken Sie daran, wie ich sagte, dass CSS eine ganz andere Sprache war? Das ist die Sprache der CSS oben!
    Um einen Hintergrund hinzufügen:
    body {
    background-color: red;
    }
    Siehe, einfach !!

Schritt 8: CSS: IDs

  1. Die Grundlagen von HTML und CSS Coding

    Die Grundlagen von HTML und CSS Coding

    Nun, wir haben nur gelernt, wie man all die h1 blauen zu machen, aber sagen, wir wollten nur den Titel, blau zu sein? Dies ist, wo ID ist als nützlich erweisen. IDs sind super einfach zu erlernen, und hier ist der einzige Code, den Sie folgen müssen:
    <H1 id = "title"> Titel </ h1>
    Jetzt:, dies in unsere CSS-Code hinzufügen:
    <Style>
    #title {
    color: red;
    }
    </ Style>
    Denken Sie an die Hash-Zeichen bei der Einnistung in CSS. Dies teilt dem Computer zu identifizieren, dass es sich um einen ID.

Schritt 9: CSS-Klassen

  1. Die Grundlagen von HTML und CSS Coding

    Die Grundlagen von HTML und CSS Coding

    Nun, da wir IDs, was, wenn wir wollen, Gruppe nur eine bestimmte Anzahl von Elementen gelernt? IDs sind gut für die Auswahl einer Position, aber mehr als 1 Einzelteil zu wählen, um Klassen zu verwenden brauchen Sie!
    Der Tag ist super einfach, genau wie IDs. Es sieht so aus:
    <H1 class = "a"> Text <h1>
    Genau wie IDs!

Schritt 10: HTML: Verknüpfungen

  1. Die Grundlagen von HTML und CSS Coding

    Die Grundlagen von HTML und CSS Coding

    Also, stellen Sie begrenzte Informationen, aber Sie möchten die Leser in der Lage sein zu einer Stelle, wo es weitere Informationen hat bekommen. Zeit, um einen neuen Tag vorstellen!
    <a href="URL"> Text Leser sehen </a>
    <a> steht für Anker, das heißt, Sie sind die Verankerung einen Link zu Ihrer Seite. Einfach!

Schritt 11: Die Grundlagen!


  1. So dort haben Sie es! Die Grundlagen von HTML und CSS! Sie können sogar noch mehr auf codeacademy.com oder khanacademy.org lernen! Ich hoffe, Sie genießen! Bitte wie, Liebling, und Stimme! Auch, sagen Sie mir, wie ich mich verbessern kann. Vielen Dank!