HTML for Dummies

Igitt, HTML!
Das ist doch sicher furchtbar kompliziert!

Sind das so eure Gedanken? Macht nix. Ich habe bis vor zwei Jahren auch so gedacht. Vor meinem Studium konnte ich nichts. Und das als Medien-Mensch…!
Aber ich habe HTML (kennen) gelernt und so schlimm ist es gar nicht. JavaScript und PHP, das ist wirklich furchtbar… Aber ich schweife ab.

Marion hatte in ihrem Post nach dem einbinden von Bilder gefragt: “Gibt’s auch eine Anleitung für Dummies?”
Wie man Bilder über das wordpress Dashboard hochlädt und einbindet, habe ich dort in einem Kommentar kurz erklärt. Aber, wenn man öfter im Web schreibt, empfiehlt es sich doch mal, dass nicht nur im “Visuell”-Modus zu machen, sondern auch mal auf “Text” zu klicken.

Screenshot1

Dann gelangt man zu dieser Ansicht.
Alles, was HTML-Code ist, habe ich in diesem Bild mal markiert.

Screenshot2

Wie ihr oben im Text sehen könnt, habe ich Marions zitierte Frage kursiv markiert. Im HTML-Code steht dafür:

 <em> "Gibt's auch eine Anleitung für Dummies?" </em>

Und so wie <em> einen Text als kursiv auszeichnet, sorgt <strong> für eine Auszeichnung als bold. Soweit zu den Textauszeichnungen. Nun ging es ja aber eigentlich um Bilder.
Also: Auch dafür gibt es natürlich einen “tag” (so heißen die Angaben in den spitzen Klammern.) Oben in dem zweiten Bild kann man unten, in dem Absatz, in dem ich alles markiert habe, sehen wie ein eingefügtes Bild (das obere meiner beiden) im HTML-Code aussieht.
Das eigentliche Bild ist innerhalb des <img>-tags eingefügt. Zu den <a>-tags komme dann ich gleich noch.

 <img class="aligncenter size-full wp-image-202" alt="Screenshot1" src="http://blogs.rpi-virtuell.de/medienreligionbildung/wp-content/uploads/sites/53/2013/11/Screenshot1.png" width="974" height="921" />

img ist die Kurzbezeichnung für image, also Bild.
Als nächstes folgt im Code class=”aligncenter”. Das bedeutet, dass mein Bild zentriert im Post steht. Entsprechend steht “class=”alignleft” für ein linksbündiges, class=”alignright” für ein rechtsbündiges Bild. (Das size-full wp-image-202 dahinter sind wordpress-spezifische Dinge, die automatisch mit eingefügt werden, die man aber auch weg lassen könnte.)
Die nächste Angabe ist alt=”Screenshot1″. Alt ist der sog. Alternativ-Text. Der Text, der manchmal angezeigt wird, wenn man den Cursor länger auf’s Bild hält oder wenn man das Bild weiter verlinkt. Der dürfte aber in der Mehrheit der Fälle relativ egal sein. Ich würde darauf achten, dass er kurz und knapp ist, damit der Code übersichtlicher bleibt. Der alt-Text kann in der “Dateien hinzufügen”-Oberfläche eingegeben werden, wird aber sonst automatisch aus dem Namen des Bildes generiert.
Dann kommt die eigentlich Verlinkung: src=”http://blogs.rpi-virtuell.de/medienreligionbildung/wp-content/uploads/sites/53/2013/11/Screenshot1.png”. Ein ziemlicher langer Link, der aber nun mal so entsteht, wenn man hier Bilder in die Mediathek hinzufügt. Wenn man externe Bilddateien verlinken möchte, kann man dort nun den Link einfügen, der direkt auf das BIld verweist. Sprich, dieser Link muss auf .png/.jpg/.gif oder eine ähnliche Dateiendung enden.
Zum Schluss kommen noch Angaben zur Größe des Bildes. width=”974″ ist die Breite von 974 Pixeln, height=”921″ entsprechend die Höhe von 921 Pixeln. Die Größe entstand automatisch, da ich in der “Dateien hinzufügen”-Oberfläche ausgewählt habe, dass das Bild in der vollen Größe angezeigt werden soll. (Wobei es, glaube ich, im Blog doch etwas kleiner angezeigt wird, nämlich passend zur Breite des Artikels.)
Hier kann man aber nach Belieben auch andere Werte eintragen. Größere Werte als das Original-Bild empfehlen sich nicht, da es dann natürlich unscharf und pixelig wird. (WordPress lässt es zu, nur die width-Angabe zu ändern und die height-Angabe zu löschen, was einem das mühsame rechnen erspart!)

Screenshot3

Könnt ihr noch?
Dann machen wir weiter. Kommen wir jetzt zur Verlinkung. Den tag dafür seht ihr im zweiten Screenshot sogar zweimal:

<a href="http://blogs.rpi-virtuell.de/mholzhueter/2013/11/04/der-weihnachts-blog-na-ja-beinahe">in ihrem Post </a>
<a href="http://blogs.rpi-virtuell.de/medienreligionbildung/wp-content/uploads/sites/53/2013/11/Screenshot1.png"> </a>

In der ersten Verlinkung weise auf Marions Post hin, in der zweiten ist die Verlinkung des Bildes angegeben.
Wie man sieht, ist der grundlegende tag zum verlinken <a>.
href=”[LINK]” ist dann die Angabe, wohin verlinkt werden soll. Wenn ich dort, beim Bild, etwas anderes einsetzen würde, würdet ihr beim klicken nicht mehr auf die vergrößerte Ansicht des Bildes kommen, sondern zum Beispiel auf einer anderen Webseite, bei einem anderen Bild oder oder…

Es gibt immer einen öffnenden und einen schließenden tag. Beim öffnenden steht die Angabe allein in spitzen Klammen (<a>), beim schließenden kommt zusätzlich der Schrägstrich hinzu (</a>), der eben bedeutet, dass hier das Ende ist. Normalerweise steht zwischen diesen Klammer-Angaben etwas. Beim Bild ist das anders, dort folgt der Schrägstrich direkt am Ende der ersten spitzen Klammern (<img […] />), da es dort nicht weitergehen muss. Theoretisch könnte man aber auch zweimal spitze Klammern aufführen, das andere ist nur die Kurzschreibweise.
Und natürlich darf man nie nie nie die Anführungszeichen vor und hinter Angaben wie der Größe oder des Links vergessen. Ich spreche da aus leidvoller Erfahrung ;)

Hui. Ich glaube, das wären für’s erste die allerwichtigsten Grundbegriffe und -befehle.
Falls es dazu noch Fragen gibt oder ich vor lauter Betriebsblindheit irgendwelche einführenden Dinge vergessen habt und ihr gar nicht wisst, wo ihr anfangen wollt oder wenn ihr mehr wissen wollt…… Schreibt es einfach alles in die Kommentare – ich versuche es dann zu beantworten!

blog2_name

6 Kommentare » Schreibe einen Kommentar

  1. Grooooßartig! Vielen lieben Dank – in der ersten freien Minute werde ich das alles ausprobieren.
    So viel so schnell so schön hab ich schon ganz lange nicht mehr gelernt – ist ein bisschen wie Lesenlernen, und das war das Schlüsselerlebnis meines Lebens ;-)
    Bis gespannt, wo das noch hinführt – macht jedenfalls Spaß, immer noch.
    Liebe Grüße, Marion

  2. Hi Elena, hast du was dagegen, wenn ich deine Anleitung zum Texte-Editieren mit in die openreli-Anleitung “Kursblogs erstellen” mit aufnehme?

    • Hallo!

      Nein, das kann gerne dorthin übernommen werden.
      Gerne natürlich mit einer kleinen Notiz, dass ich das zusammengeschrieben habe :)

      Lieben Gruß, Elena

  3. Pingback: Google Drive for Dummies | Was mit Medien, Religion & beruflicher Bildung.

  4. Pingback: HTML for Dummies | openreli

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.