10 November 2012

HTML Basis Wissen - Part I


Ich habe mir überlegt, dass ich von nun an jede Woche - wahrscheinlich demnächst immer sonntags - Tutorials bezüglich HTML und CSS online stellen werde. Oder einfach nur Hilfestellungen, damit ihr dieses Durcheinander von Befehlen etwas besser versteht. Im Grunde genommen ist es nämlich gar nicht so schwer wie man denkt und HTML und CSS zählen nicht einmal aus richtige Programmiersprachen ;-) 

Vielleicht einmal allgemein zur Aufklärung: HTML ist das Grundgerüst einer Seite. Mit CSS kann man die ganzen Feinheiten erzeugen, wie zum Beispiel eine andere Schriftart, Textabstand und so weiter. Natürlich lässt sich eine Seite auch nur mit HTML erstellen, allerdings wird sie nur durch die Feinheiten von CSS ansehlich. 

Das HTML-Grundgerüst sieht dabei immer so aus: 

<html>
<head>

<title> Titel der Seite
</head>
<body>

Seiteninhalt
</body>
</html>

Das trifft auf jede Seite zu, euer Layout vom Blog hat es zum Beispiel auch. Wenn ihr hingegen einen Post erstellt und dann auf "HTML" klickt, ist es nicht mehr relevant. Trotzdem will ich ich Vollständigkeitshalber den Aufbau klären: Zwischen <head> und </head> kommt zum Beispiel CSS hin oder Javascript bzw. ein Verweis auf dieses. Sonst würde ich euch empfehlen diesen Bereich nicht zu beachten. Der Inhalt zwischen <body> und </body> ist dagegen, was HTML angeht, mehr von Relevanz. Dort könnt ihr den Text hinschreiben, der später auf eurer Seite angezeigt werden soll, eine Tabelle machen und und und. 

Heute will ich euch ein paar grundlegende HTML-Elemte bzw. Befehle erklären, die ihr im Post gut gebrauchen könnt. Und zwar steht der Inhalt einer HTML Datei immer in Elementen, diese werden durch Tags markiert. Das trifft auf fast alle HTML-Elemente zu, die Tags verweisen quasi auf den Gültigkeitsbereich. Es ist also immer ein einleitendes und abschließendes Tag. Klingt kompliziert? Ist es aber nicht! :) 

Beispiel: 
Das hier ist ein <b>Beispiel</b> für HTML.
 wird dann so angezeigt:
Das hier ist ein Beispiel für HTML.
Der Befehl <b> steht für bold, also fett. Da die spitzen Klammern vor dem Beispiel stehen, wissen wir, dass ab diesem Punkt, der HTML Befehl gilt. Da wir es nach dem Wort Beispiel wieder geschlossen haben,  gilt auch der Befehl nicht mehr.

Eine kleine Übersicht der Befehle:

Fett <b>...</b>
Kursiv <i>...</i>
Unterstrichen <u>...</i>

Ausrichtung nach links <left>...</left>
Ausrichtung zentriert <center>...</center>
Ausrichtung nach rechts <right>...</right>

Trennlinie <hr> (muss nicht geschlossen werden! man kann auch ihre Breite und Höhe bearbeiten) ->

<hr width="BREITE" size="HÖHE=" align="AUSRICHTUNG">

Breite = in Prozent oder Pixel angeben (70%/200px)
Höhe = in Pixel angeben (100px)
Ausrichtung = left / center / right

Überschriften:
<h1>Text 1</h1> ... <h6>Text6</h6> größte und minimale Größe an Überschriften ;)

 <p> neuer Absatz
<br> Zeilenumbruch

So, das war's fürs Erste. Ich finde es einfach wichtig, dass man als Blogger etwas Ahnung von HTML und CSS hat, weil man so ganz einfach Dinge im Layout oder im Beitrag verändern oder verbessern kann bzw. sie den eigenen Wünschen anpassen kann. Im nächsten Teil zeige ich euch, wie man Aufzählungen und Tabellen mit HTML machen kann, was man schon eher fürs Bloggen braucht. 

Schreibt mir bitte, wie ihr die Reihe findet und ob sie euch nützlich erscheint! :*  

Kommentare:

  1. Für mich persönlich ist das nicht nützlich, da ich mir als ich 12 war aus Langeweile ein paar Programmiersprachen zumindest grundlegend selbst beigebracht habe ABER ich kenne so übertrieben viele Leute, die Blogs haben, aber absolut keine Ahnung von HTML, dass ich es generell sehr gut und hilfreich finde! Außerdem finde cih, dass du es sehr gut erklärst :)

    AntwortenLöschen
  2. ich persönlich hatte Informatik als Leistungskurs und muss sagen, auch wenn ich es gehasst habe, bin ich jetzt froh, dass ich das Wissen auf meinem Blog anwenden kann.
    Die Idee hier Bloggern HTML näher zu bringen finde ich aber echt gut :)

    AntwortenLöschen
  3. So als Anmerkung: Die center, left und right Tags sollten eigentlich nicht mehr verwendet werden. Besser ists mit div align=".." wobei das eigentlich auch schon deprecated ist. Selfhtml empfiehlt, mit Stylesheets zu arbeiten... wobei das für die meisten Blogger ohne HTML-Kenntnisse wahrscheinlich schon zu kompliziert wäre.
    Deswegen finde ich den Post trotzdem ziemlich gut und nützlich :)

    Liebe Grüße

    AntwortenLöschen
    Antworten
    1. ich persönlich finde es schon einfacher, kurz mit center, left & right die position zu bestimmen :) zusätzlich css in einem post reinzubauen halte ich einfach für zu umständlich, wie du schon sagtest. das mit den divs wäre natürlich auch eine möglichkeit, diese sind aber eigentlich erst richtig relevant, wenn man css benutzt ^^

      Löschen

Share some Love. Leave a Comment! <3

Related Posts Plugin for WordPress, Blogger...