Bloggen

HTML & CSS – so einfach sind die Grundlagen

Hier bloggt neontrauma / Anne:

Ich bin Anne Schwarz, 29 Jahre alt. Ich arbeite in Köln und wohne mit meinem Mann, Hund und Katze noch in Leverkusen, bald wieder auf dem Land. Das ♥ schlägt für die Fotografie & das Schreiben. Möchtest du mehr erfahren?

34 Kommentare

  1. Einfach und verständlich für Einsteiger erklärt. Wenn ich noch daran denke wie ich mit HTML anfing und selfhtml als einzigen HILFEPUNKT hatte.
    Super!!!

  2. Liebe Anne,
    es ist toll, wie viel Mühe du dir mit diesem Artikel gemacht hast. Für jemanden, der regelmäßig mit HTML und CSS zu tun hat, ist vieles selbstverständlich – obwohl mir das Auffrischen der Grundlagen auch mal wieder gut getan hat ;) Ich weiß nicht, ob ich es so gut auf den Punkt bringen könnte. Aber du hast es toll geschafft, Licht ins Dunkel zu bringen für all jene, für die das Ganze noch ein Mysterium ist. :)
    Alles Liebe,
    Anne von http://chevre-culinaire.blogspot.de/

    1. Autor

      Oh, hallo Namensvetterin. ;)
      Freut mich, dass dir der Artikel gefällt! :)

  3. Liebe Anne,

    vielen Dank für die Einstiegserklärung, ich bin da völlig unerfahren bisher und nutze halt die Vorgaben, die mir das Theme bietet, auch wenn es mich nervt, weil es nicht so aussieht wie ich es gerne hätte :-)
    Vielleicht schaffe ich es ja nach deiner Reihe meinen Blog so anzupassen wie ich ihn gerne hätte… Darf man denn das Theme, das man nutzt, einfach so abändern?

    Liebe Grüße
    Ines

    1. Autor

      Hallo Ines,

      das kommt immer auf das Theme an und die Lizenz, unter der es veröffentlicht wurde. Meistens darfst du es ändern. Oft muss – oder sollte – der Link zum ursprünglichen Autoren aber beispielsweise im Footer stehen bleiben. Guck mal im Ordner deines Themes, ob da eine license.txt liegt, in der du Angaben zur Lizenz findest. Teilweise findest sich auch ganz zu Beginn der style.css ein Hinweis darauf, was du damit anstellen darfst und was nicht.

  4. Es ist schon echt Ewigkeiten her, dass ich mich damit intensiver beschäftigt hatte, in den letzten Jahren ist mein Wissen da ganz schön eingerostet. – Umso besser, dass du da jetzt drüber bloggst!

  5. Auch wenn ich das, was du beschreibst, schon kenne: sehr gut und verständlich erklärt! Ich freue mich schon auf die weiteren Beiträge zu dem Thema :)

  6. Super informativ, danke dafür! :) Ich kann zwar ein bisschen HTML & CSS, muss aber immer noch viel lernen und ständig googlen. :D

    1. Autor

      *psshht*… manchmal google ich auch nach bestimmten „Mensch, wie ging das noch gleich“s… :D

  7. Oh gott ich liebe deinen Blog. Ich hab vor HTML und CSS leider nicht so viel Ahnung. Glaube aber da ich erst vor kurzem begonnen habe, ist das nicht so schlimm. Auch wenn die ganzen Codes noch verwirrend sind, weiß ich jetzt zumindest wofür HTML und CSS eigentlich gebraucht wird. Dankeschön :)

    1. Autor

      Hallo Sabine,
      na klar, am Anfang sieht das erstmal nach einem riesigen Wust an komischem Code aus, aber keine Sorge – mit der Zeit bekommt du da einen Überblick. :)

  8. Liebe Anne,

    vielen Dank für diesen super Post :)
    Mir fällt es immer noch schwer HTML und CSS zu verstehen, geschweige denn anzuwenden, da kommt dein Post gerade recht.
    Ich freue mich schon auf den nächsten um noch mehr Licht ins Dunkel zu kriegen.

    Liebe Grüße
    Sarah

    1. Autor

      Hallo Sarah,

      der nächste Artikel ist schon „in der Mache“! :)

  9. Oh wow, endlich hab auch ich das halbwegs verstanden :D Ich musste bisher immer die, die mein Theme designed hat belästigen, wenn ich was geändert haben wollte. Ich hoffe inständig, dass ich das jetzt vielleicht allein hinbekomme (meine Zitate sehen z.B. aus wie ganz normaler Text und das möchte ich jetzt endlich mal allein ändern) – ich denke, hier noch viel lernen zu können =)

    Liebe Grüße
    Julia

    1. Autor

      Hallo Julia,

      mal explizit auf das Stylen von Zitaten einzugehen, ist eine tolle Anregung – da werde ich definitiv mal einen Artikel drüber schreiben! :)

  10. Du mutierst immer mehr zu meinem Lieblingsblog. Danke für die tollen Posts zum Bloggen. Jetzt habe ich den Unterschied zwischen Html und Css auch mal verstanden.
    LG Steffi


  11. Super Artikel! sehr anschaulich erklärt – ich freue mich schon sehr auf die anderen Themen!


  12. Schön einfach und gut erklärt!
    Großes Lob dafür!

    Liebe Grüße,
    Lisa

  13. Hallo Anne,

    vielen Dank! Das ist wirklich super erklärt! Ich hatte mit dem Thema erst kürzlich zu kämpfen. Bei meinem Theme war ich bei dem <code> Tag nicht ganz glücklich mit der Schriftgröße. Als ich dann beim Support angefragt habe, ob und wie ich das ändern kann.

    Kam als Antwort „Ja, das geht es erfordert nur elementare Kenntnisse der CSS“. Die habe ich damals allerdings leider noch nicht gehabt.

    Ich kann also aus eigener Erfahrung bestätigen, dass know how in diesem Bereich sehr nützlich ist.

    Viele Grüße
    Kim



  14. Mensch gut, dass ich deine Seite gefunden habe. Echt klasse Tipps. Die helfen mir auch echt weiter, habe allerdings auf meinem Blog das Problem, dass ich meine Socialmediabuttons geändert habe und sie einfach nicht mehr in die Waagrechte bekomme. Leider sind sie untereinander angeordnet, was mich nervt. Finde darüber keinen Beitrag im Netz. Kannst du da helfen? Mach weiter so, ich schaue regelmäßig rein, und hoffe so dass mein Blog etwas besser wird.
    LG Caro

    1. Autor

      Hallo Caro,

      wie genau hast du deine Icons denn eingebaut? Einfach als HTML-Gadget? Du müsstest da nämlich etwas am HTML-Code ändern. :)

      Wenn du dir deinen Quellcode anguckst (Rechtsklick auf die Icons –> „Element untersuchen“, dann wird dir direkt die entsprechende Stelle angezeigt), siehst du, dass jedes der Icons in einem Div-Container liegt. Die brauchen wir nicht, das geht viel einfacher. ;)
      (Hintergrund zu Divs: Divs sind sogenannte Block-Elemente, die von Natur aus nicht nebeneinander rutschen, sondern sich die ganze zur Verfügung stehende Breite schnappen. Das a-Tag beispielsweise ist ein sogenanntes Inline-Element, das standardmäßig mit anderen Inline-Elementen in eine Zeile wandert. Man kann dieses Verhalten mit CSS ändern, aber das brauchen wir hier gar nicht.)
      Du kannst die Div-Container also alle löschen und gibst dann nur den a-Tags, die für die Verlinkung zuständig sind, ein bisschen Abstand zur Seite, damit die Icons nicht alle nebeneinander kleben:


      <a href="https://www.facebook.com/Kreacaro"><img src="deinbild.jpg" alt="kreacaro auf facebook" style="margin-right: .5em;"></a>
      <a href="https://www.flickr.com/photos/109164433@N05/"><img src="deinbild.jpg" alt="flickr" style="margin-right: .5em;"></a>

      Noch eleganter ist es, wenn du nicht bei jedem a-Tag das style-Attribut verwendest, sondern dort nur eine Klasse setzt und dann in deinem Stylesheet die Formatierung vornimmst:

      Im Gadget…

      <div class="social">
      <a href="https://www.facebook.com/Kreacaro"><img src="deinbild.jpg" alt="kreacaro auf facebook"></a>
      <a href="https://www.flickr.com/photos/109164433@N05/"><img src="deinbild.jpg" alt="flickr"gt;</a>
      </div>

      … und im CSS (Vorlage –> Anpassen –> Erweitert –> CSS hinzufügen) :

      /* alle Icons innerhalb des social-Containers sollen etwas Abstand nach rechts bekommen... */
      .social a {
      margin-right: .5em;
      }

      /* ... nur das letzte Icon braucht ja keinen Abstand nach rechts */
      .social a:last-child {
      margin: 0;
      }

      Leider ist der Bereich in deiner Sidebar sehr schmal, sodass immer nur 3 Icons nebeneinander passen und das vierte in die Zeile darunter verrutscht.
      Das zu ändern, würde ein paar mehr Anpassungen an deinem Layout erfordern.
      Erstmal so weit also.

      Ich hoffe, das war verständlich und hat dir weitergeholfen. :)

      Liebe Grüße
      Anne



  15. Uiuiuiui, da hast du aber ganz schön viel Licht ins Dunkel gebracht :) Um diese Themen drücke ich mich ja meistens *grins* Ich danke dir, dass du mit diesem informativen Artikel bei meiner April-Link-Party dabei warst! Vielleicht hast du im Mai wieder Lust, mitzumachen und einen Beitrag aus dem letzten Jahr zu zeigen? Die Partys werden in Zukunft immer ab dem 15. zur Monatsmitte stattfinden :) Liebe Grüße! Kea

    1. Autor

      Hallo Kea,

      Freut mich, dass dir der Artikel gefällt.
      Bei deiner nächsten Linkparty bin ich doch gerne mit dabei! :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *