Blogger 101 // Understand your HTML // HTML verstehen


UNDERSTAND HTML



Wer wie ich noch relativ neu im Bloggergeschäft ist, für den sind HTML-Codes wohl chinesische Schriftzeichen. Doch wer sein Layout ändern möchte oder ein paar extra Gadgets in sein Blog integrieren möchte, der sollte wenigsten die Grundbegriffe des HTML kennen.



Vorab, mein vorheriges Layout habe ich blöderweise geschrotet, da ich mein HTML unwiederruflich verändert hatte. Also meine Lieben, bevor ihr was an eurem Layout-HTML ändert, bitte unbedingt ein Backup machen. "Vorlagen" -> rechts oben "Backup/Wiederherstellung" -> "Vollständige Vorlage herunterladen". Wenn ihr dies getan habt, ist die akutelle Vorlage herunterladen und kann notfalls wieder aufgespielt werden.

1.  Leerzeichen zwischen zwei Elemente
Wenn ihr Bilder hochladet ist es oft so, dass Sie direkt hintereinander gereiht erscheinen, um dies zu verhindern setzt ihr im HTML-Code &NBSP. Dadurch wird ein Leerzeichen zwischen Wörter, Bilder oder sonstige Elemente erzeugt. Wenn ihr &NBSP&NBSP doppelt hintereinanderreiht, wird ein Doppelleerschritt erstellt.
&NBSP


2. Zeilenumbruch einfügen
Wenn die Enter-Taste kein Erfolg zeigt, fügt im HTML den Code <br /> ein. Dieser erzeugt ein Zeilenumbruch an jeder beliebigen Stelle. Für mehrere Umbrüche einfach mehrere <br /> hintereinanderreihen.
<br />


3. Wörter FETT oder kursiv setzen
 Um Wörter in Widges oder Posts fett zu schreiben, fügt vor dem Wort <b> ein und hinter dem Wort </b>.
Dieser Schrägstrich ist sehr wichtig, da sonst der komplette Text fett geschrieben wird. Er ist eine Art Begrenzung für Befehle im HTML. Weitere Befehlen wären noch:
Beispiel <i> Beispiel </i>
Beispiel <strike> Beispiel </strike>
Beispiel <u> Beispiel </u>


4. Links einfügen
Dieser Befehl gilt nicht nur für den eigenen Blog, sondern auch für Kommentare die man auf anderen Posts hinterlässt. Mit diesem Code ist es für andere viel einfacher auf dein Blog zu gelangen, da man einfach nur auf den Link klicken und nicht die URL markieren und dann in die Befehlszeile einfügen muss.
<a href="URL">DEIN TEXT</a>


5. NoFollow-Links setzen
Zuerst einmal, was heißt NoFollow und DoFollow? Grundlegend hat es dem Googleranking zu tun. Je mehr DoFollow Links von einem selbst auf anderen Websites verankert sind, desto höher kommt man in den Suchmaschinenergebnissen weiter nach oben. Viele Firmen bezahlen sogar Geld, damit eine Website bzw. Blog seinen Link DoFollow verlinkt.
<a href=”URL” rel=”nofollow”>DEIN TEXT</a>


6. Bilder manuell einfügen
Wie auch beim vorangegagenen Tipp, kann man auch diesen in Kommentare einfügen. Dadurch werden Bilder von einer bestimmten Bild-URL angezeigt
Einfaches Bild einfügen   <img src=”Bild-URL”>
Bild mit Link einfügen    <a href=”URL”><img src=”Bild-URL”></a>


7. Größe der Bilder manuell verändern
Natürlich ist die einfachste Methode seine Bilder zu vergrößern, bzw. zu verkleinern die durch Blogger vorgegeben Werte wie klein, große oder x-large zu verwenden. Doch um seine Bilder auf die gewünschte Größe zu bringen, kann man manuell im HTML die Größe (in Pixel) ändern. Sucht dafür einfach folge Positionen:
height="xxx" und width="xxx"


8. Grundbegriffe des Layoutaufbaus
Der Blog ist im Grunde, in verschiedene Bereiche aufgeteilt. Standardmäßig ist er wie folgt aufgebaut:


hier eine richtig gute Seite, mit Tutorial und sogar Beispielen, an denen man selbst testen kann: W3Schools



9. Linien unter Überschriften oder als Trennlinien
Um den Blog ein wenig zu gliedern und übersichtlicher zu gestalten, werden oft Trennlinien verwendet. Zudem lässt ein feiner Strich, über oder unter eine Überschrift, das Gesamtbild schicker und aufgeräumter wirken. Dabei ist zu beachten das eurer Blogname meist die Überschrift <h1> ist, Sidebarüberschriften <h2> und Posttitle <h3>.
Öffent das HTML eures Blogs, sucht da zum Beispiel .post h3 und fügt darunter folgendes ein
unter der Überschrift:  border-bottom: 1px solid #000000; 
über der Überschrift:   border-top: 1px solid #000000;
"1 px" gibt die Stärke der Linie an
"solid" erzeugt eine durchgezogene einfache Linie,
"dotted" eine gepunktete,
"double" eine doppelte durchgezogenen,
"dashed" eine gestrichelte,
dann noch "groove", "ridge", "inset" und outset.
#000000 ist der Farbcode für schwarz



10. Nutzt das Entwickler-Werkzeug von Mozilla
Ich kann euch gar nicht sagen, wie oft ich dadurch schon mein Layout geändert habe. Wenn ihr dieses Werkzeug benutzt, seht ihr in Echtzeit wie die vorgenommen Änderungen aussehen und das Beste daran ist, die Änderungen verschwinden einfach wieder, wenn man die Seite aktualisiert.
Wenn ihr Mozilla verwendet, Rechtsklick auf das zu ändernde Element, z.B. die Überschrift unter der Ihr die Linie setzen wollt. Rechts erscheint dann





Kommentare

  1. Da habe ich beim Lesen auch noch was gelernt. Mit HTML habe ich ich vor ein paar Monaten auch etwas intensiver beschäftigt, um beispielsweise meine Datumsfähnchen hinzubekommen. War anfangs etwas knifflig, aber ich mag sie immer noch sehr gern und werde mal ein paar deiner Tipps ausprobieren!

    AntwortenLöschen
  2. Sehr hilfreicher Post ! Hatte vorher gar keine Ahnung von html, jetzt hab ich sogar noch was gelernt :)
    Danke für den guten Post !
    Allerliebste grüße , Lisa

    AntwortenLöschen
  3. Schöne Beschreibung !
    Gut gemacht Nicole!

    AntwortenLöschen
  4. Schöne Beschreibung. Ich hoffe vielen hilft es!

    AntwortenLöschen
  5. Super Anleitung für Anfänger! Aber ein kleiner Fehlerteufel hat sich eingeschlichen und zwar heißt es korrekterweise  , also das ; fehlt noch. :)

    AntwortenLöschen
  6. Great blog♥

    How about follow each other?
    I follow your blog. Waiting for you♥
    My Blog: http://juliemcqueen.blogspot.com

    AntwortenLöschen
  7. Html ist schon eine Klasse für sich.. Ich kann nur mit einem großen Berg Süßikeiten am HTML arbeiten. Aber jetzt wird auch mir einigees ersichtlicher. Habe schon länger auf solch einen Pos gewartet!

    bunte Grüße für dich!,
    Jule von www.feuer-fangen.blogspot.de

    AntwortenLöschen
  8. So lovely post! Love your style

    Master-class in brand new Kiev restaurant:
    http://starlingdays.blogspot.com/2014/11/blog-post_13.html

    AntwortenLöschen
  9. that looks awesome! ♥ hopefully we can follow each other, and let me know if you did. So I can follow you back too. Much love! ♥♥♥

    http://sartorialwackoe.blogspot.com/

    AntwortenLöschen
  10. Those are actually really useful tips. Thanks for stopping by my blog. Sure I'd like to follow each other. Now following you via GFC, Bloglovin and Google+. I'd be happy to see you follow back! x

    FASHIONISTA LOOKS
    MY LATEST POST
    Facebook
    Instagram
    bloglovin
    Twitter
    Youtube

    AntwortenLöschen
  11. thank you so much dear! followed you back both on GFC and Bloglovin.. :D

    http://sartorialwackoe.blogspot.com/

    AntwortenLöschen
  12. Super blog! :) Thanks for follow my blog :) I follow you too! <3

    AntwortenLöschen
  13. Toll erklärt aber was dofollow und nofollow is check ich nich aber sonst top, danke:)

    AntwortenLöschen
  14. Der letzte Tipp mit Mozilla ist ja mal richtig toll, danke :)

    AntwortenLöschen
  15. Hi there, nice tips =)
    Thank you for your comment on my blog. I follow you now on GFC and Bloglovin..would you mine to follow me to? And to like my facebook page, please? ^_^ Thank you

    Have a sweet day,
    Michael
    www.ontheleaf.net / facebook / Bloglovin

    AntwortenLöschen
  16. Hello lovely, great post and thanks for sharing! <3

    I'm your newest follower, please follow me back if you can? :)

    http://electricsunrise.blogspot.co.uk

    x

    AntwortenLöschen
  17. Toller Post, das hilft sicher einigen weiter :)

    AntwortenLöschen
  18. very good and useful post :)
    I am your new follower on bloglovin :)

    AntwortenLöschen
  19. Hello beautiful! Thank you very much for visiting my blog. I liked your post, it is very useful and interesting! I follow via GFC :) Kisses!

    www.onlydacostaa.com

    AntwortenLöschen
  20. Just as an FYI, I follow you on GFC. Thanks for the visit and comment!

    Kreyola Jounerys | Instagram

    AntwortenLöschen
  21. Great post! This was really really helpful, I feel I understand html a bit more. You have a lovely blog, I would love to follow each other. I already followed you on g+, gfc and bloglovin. Checkout my blog and if you like it follow me back. Let's keep in touch! :D

    http://perlasancheza.blogspot.com/

    AntwortenLöschen
  22. really useful <3


    Eea

    www.eeapetrescu.com

    AntwortenLöschen
  23. You're right, It's so helpful to make a backup!

    xoxo,
    http://petitemaisonoffashion.blogspot.com/ ♥

    AntwortenLöschen
  24. Thanks for stopping by. Followed you on GFC, Bloglovin & Google+!
    Please follow me back on GFC & keep in touch!



    X
    http://subhamrai.blogspot.in/

    AntwortenLöschen
  25. Thank you for visiting my blog lovely ��. Love your posts x x x
    www.nadjetluisa.blogspot.co.uk

    AntwortenLöschen
  26. Hi Colli! Thanks for visiting my blog! Your blog's layout is absolutely lovely! HTML is definitely an important thing to know as a blogger. I must admit I haven't really worked with HTML for a while, and you've convinced me to start learning it again!
    I followed you on GFC and Bloglovin'. If you'd like to return the favor, that would be appreciated!
    manicpixiegirl

    AntwortenLöschen
  27. Great tips.

    <a href="http://www.kindoflovely.com”>www.kindoflovely.com || AUS Fashion/Lifestyle</a>

    AntwortenLöschen
  28. Hey girl!
    Thanks for your comment on my blog!
    I would love to follow each other on GFC!
    I'm following & waiting for you!

    Kisses,

    http://fashionscrown.blogspot.gr/

    AntwortenLöschen
  29. Wow this is really nice an helpful post! Great tips! Thanks for sharing!
    xx
    cvetybaby.com
    Bloglovin
    Instagram

    AntwortenLöschen
  30. Great tips !! Enjoyed this blog post !! Thank you so much for your very wonderful comment on my blog !! Followed you on GFC !! Hoping for your Followback ! :)

    xo
    Molly
    corinnemolly.blogspot.com

    AntwortenLöschen
  31. Hi I loved your blog I will follow him if you want to follow my also be very happy Blogdabarbiegirll.blogspot.com

    AntwortenLöschen
  32. Fantastischer Post!
    Ohne sowas wäre ich echt aufgeschmissen haha :D :)
    Liebe Grüße
    Luise ♥


    http://my-little-beauty-secrets.blogspot.de/

    AntwortenLöschen
  33. Great tips, Nicole! T. http://tickledpinkwoman.blogspot.com

    AntwortenLöschen
  34. I learned HTML a while back it's kind of fun :D
    Thanks for stopping by my blog :)
    Following you

    Neal Kind
    Daily Diaries

    AntwortenLöschen
  35. Hiya,

    Thanks for following me and Ive now followed you back. I'm your #362 follower.

    vivianista.com

    AntwortenLöschen
  36. thank you so much for visiting my blog i really appreciate your comment
    i followed you already follow back http://vaxanatheonly1.blogspot.com

    AntwortenLöschen
  37. Great post!

    Thank you for your lovely comment on my blog and thank you for following me! I'm following you too!
    xx

    www.theblackblush.blogspot.pt

    AntwortenLöschen
  38. очень интересно и полезно)))
    thank you
    gladly signed up, waiting to visit
    http://mosaictrends.blogspot.com/

    AntwortenLöschen
  39. Korrekterweise bräuchte das & nbsp noch ein ; am Ende.
    Aber ansonsten wirklich hilfreiche Tipps für HTML-Einsteiger denke ich.

    LG
    Pingu

    AntwortenLöschen