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
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
-
Es gibt nur eine Voraussetzung für diese instructable: einen Instructables
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
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
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 , Radioshack2x 10-47μF Kondensatoren
Sparkfun , Radioshack2x LEDs
Sparkfun , Radioshack2x 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
Ü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
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
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
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
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
-
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 Farbnamenfont-size: 1.2em;
Dieser Text ist styled
Legt die Größe der Text
Kann verwendet werden in diesen Formatenfont-family: Lucida Console;
Dieser Text ist styled
Legt die Schriftart des Textes
Klicken Sie hier für weitere Schriftartenheight: 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 hierbackground-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 hierfont-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
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
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
Um diesen Kreislauf zu machen, werden Sie ein paar Komponenten:Teil Quelle (Bilder sind anklickbar!) 2x 10 k Widerstände
2x 220Ω Widerstände
2x 10-47μF Kondensatoren
2x LEDs
2x PNP-Transistoren
~~ = 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
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ß
Schließen Sie alle Komponenten, wie in der schematischen gesehen und beobachten Sie es wegzublinzeln! =)
Schritt 12: Zusammenfassung und Referenzen
-
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:- W3schools HTML-Tag-Referenz
- W3schools CSS-Eigenschaft Referenz
- W3schools Tryit Editor (versuchen Sie den Code, bevor Sie es in einer Instructable)
- Instructable.com die Stylesheet
- Ein weiteres Stylesheet
Danke fürs Lesen! = D
-