Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

12 Schritt:Schritt 1: Was Sie benötigen Schritt 2: Setzen Code in Ihre Instructable Schritt 3: Tische Schritt 4: Forms Schritt 5: Die Verknüpfung zwischen den Schritten Schritt 6: Organisieren Teilschritte Schritt 7: Verwenden der Premade Sheets Schritt 8: HTML-Lehre Schritt 9: Liste der Unterstützte HTML-Tags Schritt 10: Styling mit CSS Schritt 11: Beispiel Instructable Schritt 12: Zusammenfassung und Referenzen

Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

Instructables sind eine fantastische Weise, Ihr Wissen zu teilen und von anderen lernen. Manchmal ist eine Menge von Text in einem Instructable kann einschüchternd sein, oder eine Instructable sieht einfach nicht sehr interessant. Um dies zu lösen, können Sie verwenden, HTML und CSS.

HTML ist nützlich für die Organisation Ihrer instructable in Abschnitte (lesen Sie mehr auf Wikipedia ).
Dazu gehören Dinge wie: Listen, einfache Text-Formatierung, Links, Tabellen und vieles mehr.

CSS wird verwendet, um die HTML ansprechend und leichter (mehr Info auf gelesen aussehen Wikipedia ).
Dazu gehören Dinge wie: Abstand, Farbe, Schriftart, Ausrichtung, Hintergründe und vieles mehr.
Dank für die Annahme, die Schaffung dieses Instructable theedisoneffect.

HINWEIS: Es tut uns leid mobile Anwender arbeitet am meisten von diesem Zeug nur auf einem Computer :-(

Schritt 1: Was Sie benötigen

  1. Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

    Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

    Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

    Es gibt nur eine Voraussetzung für diese instructable: einen Instructables Wie zur Verbesserung Ihrer Instructables Verwendung von HTML
    Konto.
    Es gibt ein paar Möglichkeiten, um ein Pro-Konto zu erhalten:
    • Kauf Eins
    • Bekommen es, Ihnen begabt. Jemand anderes eine Pro-Mitgliedschaft zu schicken!
    • Der Erwerb einer über eine funktionsfähige Instructable: Erste Schritte
      Verwenden Sie dies als Ermutigung, um eine Instructable machen, wenn Sie nicht bereits haben! =)

Schritt 2: Setzen Code in Ihre Instructable


  1. Der Code-Box mit dem Arduino blinken Beispiel Skizze:
      / *
       Blinken
       Schaltet eine LED für eine Sekunde auf, dann für eine Sekunde wiederholt.
     
       Dieses Beispiel-Code ist in der Public Domain.
      * /
     
     // Pin 13 hat eine LED auf den meisten Arduino-Boards verbunden.
     // Ihm einen Namen geben:
     int geführt = 13;
    
     // Die Setup-Routine läuft einmal, wenn Sie Reset drücken:
     Leere setup () {                
       // Initialisierung der digitalen Stift als Ausgang.
       pinMode (LED, Ausgang);     
     }
    
     // Die Schleifenroutine läuft immer und immer wieder für immer:
     Leere Schleife () {
       digital (LED, hohe);  // Leuchtet die LED auf (HIGH ist der Spannungspegel)
       Verzögerung (1000);  // Warten, für eine zweite
       digital (LED, LOW);  // Drehen die LED aus, indem sie die Spannung LOW
       Verzögerung (1000);  // Warten, für eine zweite
     }
    

    Dieser Kasten wird mit dem pre-Tag formatiert: Whitespace halten, wie ist, verwenden Sie die gleiche Schriftart Arduino tut, die Breite auf 600px, die Höhe auf 300px, stellen Sie die Schriftgröße 11px, erstellen Sie einen grauen Rand, und erstellen Sie eine hellgrau zu füllen.
    Code
      <Pre style = "font-family: Monaco; width: 600px; height: 300px; font-size: 11.0px; border: solid # 1.0px 6E6E6E; overflow-y: auto; background-color: # F2F2F2;">
     PUT CODE HIER
     HINWEIS: zwischen dem "/" und dem "pre" unter Entfernen Sie das Leerzeichen
     </ Pre>
    

    Wenn die Höhe definiert ist, wird eine Bildlaufleiste automatisch erzeugt, wenn der Code erstreckt sich über die schraffierte Fläche. Andernfalls wird die schattierte Fläche herum wickeln Sie den gesamten Text, egal wie groß oder klein.

Schritt 3: Tische


  1. Tabellen sind super geeignet als Materialien Veranstalter oder die Anzeige von Daten. HTML organisiert Tabellen mit einer Vielzahl von Tags:
    Anhänger Beschreibung
      <Table> 
    Tabelle: Definiert den Anfang und das Ende einer Tabelle
      <Tbody> 
    Tischkörper: Ein optionales Tag, um den Körper einer Tabelle zu definieren
      <Tr> 
    Tabellenzeile: Erstellt eine neue Zeile in der Tabelle
      <Th> 
    Tabellenkopf: Legt die Kopfzeile einer Spalte
      <Td> 
    Tabellendaten: Definiert eine normale Zelle

    Beispiel (mit ein bisschen CSS etwas aufzupeppen):
    Teil Quelle
    2x 10 k Widerstände Sparkfun , Radioshack
    2x 220Ω Widerstände
    Sparkfun , Radioshack
    2x 10-47μF Kondensatoren
    Sparkfun , Radioshack
    2x LEDs
    Sparkfun , Radioshack
    2x PNP-Transistoren
    Sparkfun , Radioshack

    ~~ = Diese gemeinsamen Teil kann von fast alles, was gerettet werden
    ~~ = Sie können diese zu retten, oder wenn es gekauft haben, wird es Reste sein
    Code
      <Table border = "1" style = "border-color: rgb (189.189.189); border: 1.0px Fest rgb (189.189.189);">
              <Tbody>
                 <Tr>
                    <Th> Teil </ th>
                    <Th> Quelle </ th>
                 </ Tr>
                 <Tr>
                    <Td style = "background-color: rgb (212.255.215);"> 2x 10 k Widerständen </ td>
                    <Td> <a href="https://www.sparkfun.com/products/10969" rel="nofollow"> Sparkfun </a>, <a href = "http://www.radioshack.com/product /index.jsp?productId=2062330 "rel =" nofollow "> Radioshack </a> </ td>
                 </ Tr>
                 <Tr>
                    <Td style = "background-color: rgb (212.255.215);"> 2x 220Ω Widerständen </ td>
                    <Td>
                       <P> <a href="https://www.sparkfun.com/products/10969" rel="nofollow"> Sparkfun </a>, <a href = "http://www.radioshack.com/product /index.jsp?productId=2062317 "rel =" nofollow "> Radioshack </a> </ p>
                    </ Td>
                 </ Tr>
                 <Tr>
                    <Td style = "background-color: rgb (231.222.255);"> 2x 10-47μF Kondensatoren </ td>
                    <Td>
                       <P> <a href="https://www.sparkfun.com/products/523" rel="nofollow"> Sparkfun </a>, <a href = "http://www.radioshack.com/product /index.jsp?productId=12448323 "rel =" nofollow "> Radioshack </a> </ p>
                    </ Td>
                 </ Tr>
                 <Tr>
                    <Td style = "background-color: rgb (231.222.255);"> 2x LEDs </ td>
                    <Td>
                       <P> <a href="https://www.sparkfun.com/products/10969" rel="nofollow"> Sparkfun </a>, <a href = "http://www.radioshack.com/product /index.jsp?productId=12611319 "rel =" nofollow "> Radioshack </a> </ p>
                    </ Td>
                 </ Tr>
                 <Tr>
                    <Td> 2x PNP-Transistoren </ td>
                    <Td>
                       <P> <a href="https://www.sparkfun.com/products/522" rel="nofollow"> Sparkfun </a>, <a href = "http://www.radioshack.com/product /index.jsp?productId=2062585 "rel =" nofollow "> Radioshack </a> </ p>
                    </ Td>
                 </ Tr>
              </ Tbody>
           </ Table>
    

Schritt 4: Forms


  1. Überraschenderweise Instructables können Sie ein Formular in Ihre Instructable integrieren. Wenn Sie einen Server Skriptsprache wie wissen PHP oder ASP, können Sie ein Formular, um Informationen von Ihren Lesern wieder machen (neben Kommentare natürlich!).
    Dies ist eine Form von gemacht w3schools die das Eingangssignal wieder:
    Mögen Sie Instructables.com? Ich liebe es! Ja Kann Sein Nein
    Einreichen
    Code
      <Form action = "http://www.w3schools.com/tags/demo_form.asp" id = "Do_you_like_the_Instructables"> Mögen Sie Instructables.com?         
     <Select name = "Do_you_like_Instructables">    
     <Option value = "Oh_Yeah"> Ich liebe es!       
     <Option value = "Yes"> Ja    
     <Option value = "Maybe"> Vielleicht    
     <Option value = "How_can_you_not_like_Instructables"> Nein </ select>
     <P> <button type = "submit"> Senden </ button> </ p> </ form>
    

Schritt 5: Die Verknüpfung zwischen den Schritten


  1. In HTML gibt es so etwas wie ein Anker, der eine Verbindung ist, dass Schriftrollen bis zu einem bestimmten Element auf dem Bildschirm. Es durchsucht das Dokument für die ID, die Sie suchen und Schriftrollen, die für Sie!
    Eingang Ausgabe
      <P id = "Hallo"> Das ist ein Absatz mit der id "Hallo." </ P> 

    Dies ist ein Absatz mit der id "Hallo."

      <a href="#hello" rel="nofollow"> diesen Link sendet Sie "#Hello" </a> 
    Dieser Link sendet Sie "#Hello"

    Hinweis: Instructables 'Menüleiste schneidet den oberen 100px der Seite.
    Die praktische Verwendung für einen Dübel andere Schritte innerhalb Instructable Ihr (oder jemand anderes) Referenz:
    Scrollt zu "#Kommentare"
    Scrollt zu "# stepanchor-Schritt 11" meiner Fingerabdruck-Scan-Garagentüröffner Instructable

Schritt 6: Organisieren Teilschritte


  1. Die fieldset-Tag ist eine gute Möglichkeit, etwas von Materialien für die Schaffung eines Code-Abschnitt an der Unterseite einer Stufe zu organisieren.
    Zum Beispiel:
    Materialien
      Arduino Widerstände LEDs Etc. Tools
        Zangen Klebeband Lötkolben Etc. Code
          // Kodex durch Nodcah
        
         Leere setup () {
             Serial.begin (9600);
         }
         Leere Schleife () {
             Serial.println ("Code");
             Verzögerung (100);
         }
         </ Pre> <fieldset>                
         <Legend> Code </ legend> <pre style = "font-size: 11.0px; width: 600.0px; height: 300.0px; border: 1.0px punktiert black;"> <fieldset>
        	 <Legend> <strong> Materials </ strong> </ legend>
        	 <Ul class = "lockig">
        	 <Li> Arduino </ li> <li> Widerstände </ li> <li> LEDs </ li> <li> etc. </ Li> </ ul>
         </ Fieldset>
         <Fieldset>
        	 <Legend> <strong> Werkzeuge </ strong> </ legend>
        	 <Ul class = "lockig">
        	 <Li> Zangen </ li> <li> Duct tape </ li> <li> Lötkolben </ li> <li> etc. </ Li> </ ul>
         </ Fieldset>
         <Fieldset>
        	 <Legend> <strong> Code </ strong> </ legend>
        	 <Pre style = "font-size: 11.0px; width: 600.0px; border: 1.0px punktiert black;"> // Kodex durch Nodcah
        
         Leere setup () {
             Serial.begin (9600);
         }
         Leere Schleife () {
             Serial.println ("Code");
             Verzögerung (100);
         }
         </ Pre> </ fieldset>
        

Schritt 7: Verwenden der Premade Sheets


  1. Es gibt viele vorformatierte Klassen dürfen Sie auf Instructables.com des Stylesheets (hier und hier) zu verwenden.
    Einige der nützlichen Klassen:
    Class Name Verwenden Beispiel
    nichtig Verbergen etwas zu einem Browser, aber nicht auf ein Mobilgerät oder Instructables app Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

    HTML-Tags hat viele, aber nur wenige können in einem Instructable verwendet werden. Ich habe mein Bestes getan, um alle nützlichen unterstützten Tags unten zeigen, aber wenn ich verpasste, lassen Sie es mich wissen!
    Input-Tag Ausgabe
      <Button> 
    Ich tue nichts!
      <Img> 
      <Samp> 
    Beispielcomputerausgang
      <Font> 
    Warnung: "Schriftart" ist eine veraltete tag
    Aber dies ist die einzige Möglichkeit, Text auf Handy Farbe
      <Fieldset> 
    Siehe Schritt 6
      <Form>, <select>, <option> 
    Siehe Schritt 4
      <Pre> 
      Siehe Schritt 2 für eine mögliche Nutzung 
      <a href="URL"> 
    Ein Link zu meinem letzten Instructable siehe Schritt 5 für eine andere Nutzung
      <Sup> 
    Normaler Text Dieser Text wird hochgestellt
      <Sub> 
    Normaler Text Dieser Text wird tief
      <Strong> oder <b> 
    Normaler Text Dieser Text ist stark (fett)
      <Em> oder <i> 
    Normaler Text Dieser Text wird hervorgehoben (kursiv)
      <U> 
    Normaler Text Dieser Text ist unterstrichen
      <Blockquote> 
    Normaler Text
    Dieser Text ist in einer blockquote
      <H1>, <h2>, ..., <h6> 

    h1

    h6
      <Code> 
    This can be used to show code (see step 2 for another way)
      <Ul> 
    Ungeordnete Liste Punkt 1 Ungeordnete Liste Punkt 2
      <Ol> 
      Geordnete Liste Punkt 1 geordnete Liste Punkt 2
      <Table>, <tr> <th> <td> 
    Siehe Schritt 3
      <Hr> 
    Ein Text über die horizontale Linie
    Einige Text unterhalb der horizontal rule
      <Span> 
    Dies kann verwendet werden, um etwas Stil oder tragen Sie eine Klasse, um Text sein. Aber eine Klasse muss definiert werden (es kann eine, die es noch nicht gibt sein)

    Für weitere Informationen über die Tags sollten Sie sich w3schools . Dieser gibt Auskunft über alle HTML-Tags und wie man sie benutzt.

    Schritt 10: Styling mit CSS

    1. Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

      CSS ist, wo Sachen bekommt cool! Sie können eine Menge verschiedener Dinge mit CSS zu tun, mit nur sehr wenige, die hier aufgelistet.
      CSS-Code Beispiel Beschreibung und Hinweise
        Cursor: zu bewegen; 

      Dieser Text ist styled

      Ändert der Cursor Blick
        color: red; 

      Dieser Text ist styled

      Ändert die Farbe des Textes
      Schauen Sie sich diese Seite für vordefinierte Farbnamen
        font-size: 1.2em; 

      Dieser Text ist styled

      Legt die Größe der Text
      Kann verwendet werden in diesen Formaten
        font-family: Lucida Console; 

      Dieser Text ist styled

      Legt die Schriftart des Textes
      Klicken Sie hier für weitere Schriftarten
        height: 120px;  width: 120px; 

      Dieser Text ist styled

      Definiert die Abmessungen des Elements
      (Hintergrund ist schwarz umrandet)
        padding: 5px; 

      Dieser Text ist styled

      Lässt Raum um ein Element
      (Hintergrund ist schwarz umrandet)
        overflow: auto;  height: 10px; 

      Dieser Text ist styled

      Schafft eine Bildlaufleiste, wenn die Text erstreckt sich über die definierte Höhe und / oder Breite
        border: 2px solid gray; 

      Dieser Text ist styled

      Erstellt eine Grenze
      Mehr Informationen zu der Eigenschaft border hier
        background-color: # C6D7DE; 

      Dieser Text ist styled

      Ändert die Hintergrundfarbe
        text-align: center; 

      Dieser Text ist styled

      Richtet den Text auf der rechten Seite, in der Mitte oder links
        text-decoration: underline; 

      Dieser Text ist styled

      Unterstreichungen oder Überstriche Text
        text-shadow: 2px 2px 1px red; 

      Dieser Text ist styled

      Erzeugt einen Schatten auf der Grundlage des Text
      Mehr Infos auf der text-shadow Eigenschaft hier
        font-variant: Small Caps; 

      Dieser Text ist styled

      Macht jedes Zeichen in Großbuchstaben, aber kleiner.

      Verwenden von Inline-CSS:
        <P style = "CSS_CODE_HERE"> Styled Text hier </ p> 

    Schritt 11: Beispiel Instructable


    1. Diese Mini-Instructable nutzt einige der Artikel, die Sie gelernt haben. Die Schritte werden unter Verwendung mehrerer fieldset-Tags getrennt. Die Bilder werden mit Hilfe der IMG-Tag eingeführt.

      Machen Sie eine Blinky Kreis


      Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

      Diese einfache Schaltung blinkt zwei LEDs.
      Schwierigkeit: e a n y .. Sie müssen in der Lage zu lesen, eine schematische sein
      Schritt 1: Materialien
      Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

      Um diesen Kreislauf zu machen, werden Sie ein paar Komponenten:
      Teil Quelle (Bilder sind anklickbar!)
      2x 10 k Widerstände Wie zur Verbesserung Ihrer Instructables Verwendung von HTML
      Wie zur Verbesserung Ihrer Instructables Verwendung von HTML
      2x 220Ω Widerstände
      Wie zur Verbesserung Ihrer Instructables Verwendung von HTML
      Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

      2x 10-47μF Kondensatoren
      Wie zur Verbesserung Ihrer Instructables Verwendung von HTML
      Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

      2x LEDs
      Wie zur Verbesserung Ihrer Instructables Verwendung von HTML
      Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

      2x PNP-Transistoren
      Wie zur Verbesserung Ihrer Instructables Verwendung von HTML
      Wie zur Verbesserung Ihrer Instructables Verwendung von HTML


      ~~ = Diese gemeinsamen Teil kann von fast alles, was gerettet werden
      ~~ = Sie können diese zu retten, oder wenn es gekauft haben, wird es Reste sein
      Werkzeuge:
        Breadboard 3.5-5.5V Stromversorgung Jumper Drähte Schritt 2: Der Stromkreis
        Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

        Die Schaltung besteht aus Widerständen, Kondensatoren und LEDs. Die 10 k Widerstände und die Kondensatoren die Arbeit der Führung eines gleichmäßigen Tempo, während die Transistoren zum Einschalten die LED on / off verantwortlich.
        Siehe Schritt 1 für eine Liste von Materialien für diesen Kurs erforderlich.
        Schritt 3: Aufbau und Anschluß
        Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

        Schließen Sie alle Komponenten, wie in der schematischen gesehen und beobachten Sie es wegzublinzeln! =)

    Schritt 12: Zusammenfassung und Referenzen

    1. Wie zur Verbesserung Ihrer Instructables Verwendung von HTML

      Lernen alles, was in diesem Instructable sofort ist fast unmöglich. Dieser wurde geschaffen, um die Verwendung von HTML / CSS in Ihrem Instructable inspirieren und als Referenz, wenn Sie verwenden, sie zu tun.
      Denn es gibt so viel zu decken, kann ich etwas verpasst haben oder etwas nicht sehr gut erklären, so wenden Sie sich bitte Fragen stellen oder lassen Sie Feedback!
      Referenzen: