Forum - Tutorials - Tutorial: Contentgestaltung mit HTML


zurück zur Übersicht
Beiträge 1 - 10 (34)  Seite: 1 | 2 | 3 | 4 weiter  
Zeige 

Tutorial: Contentgestaltung mit HTML link
Erstellt vonBeiträge
  
aNTiXgepostet: 06.04.2007 00:33 link

User-Rating:
Oft bin ich schon in der Shoutbox oder sonnst wo darauf angesprochen worden wie man denn das mit HTML im Content macht, wie man seinen Hintergrund einfärbt, wie man Hintergrundbilder in den Content bekommt und so weiter ...
Da sowas meist mühsam zu erklären ist, vorallem wenn das Gegenüber nix von HTML versteht, hab ich mich entschlossen dieses Tutorial zu erstellen.

Dieses Tutorial zeigt wie man ohne große HTML-Vorkenntnisse einen Content auf HTML-Basis erstellt dabei gehe ich in drei Abschnitten genauer auf die Themen Textformatierung, Verwendung von Tabellen und Hintergründen ein.


Inhaltsverzeichnis

- Einfache Textformatierung
- Verwendung von Tabellen / Grafikeinbindung
- Hintergrundfarbe und -bild

Für User ohne HTML-Kenntnisse ist es ratsam das Tutorial von Vorne nach Hinten durchzugehen und nicht gleich zu den Hintergründen zu springen


Einfache Textformatierung

Bevor man mit dem ganzen Hintergrund-Schnickschnack anfängt sollte man erstmal wissen wie die Textformatierung mit HTML aussieht um später unerfreulichen Überaschungen aus dem Weg zu gehen. Auserdem lassen sich hierdurch leicht die Basics erklären.

Im folgenden Bild ist der Orginal HTML-Text und die dazugehörige Grafische Darstellung zu sehen. Wichtig ist, dass der HTML-Modus ausgewählt ist !



Das grau Geschriebene ist vorerst nicht von Bedeutung (daher hab ich es auch grau gemacht^^), ich werde später genauer darauf eingehen.

Erstmal werde ich versuchen das ganze HTML-Gemüse verständlich zu machen.
Ein HTML-Tag ist immer von "" umramt. Manche Tags, wie der br-Tag sind Eigenständig, andere, wie der p-Tag müssen geöffnet und geschlossen werden. Warum das so ist wird bei der genaueren Erklärung klar.

Der p-Tag ist eine einfache Methode ganze Texte oder Testteile in einer bestimmten weise zu Formatieren. Dabei wird er einfach wie im Beispiel um den entsprechenden Textteil herumgelegt. Dabei kommen in die Klammer, welche p eröffnet die ganzen Befehle.
Im ersten p-Abschnitt des Beispiels steht dort align="center". Das heißt, dass der Inhalt von p in der Mitte des zur verfügung stehenden Bereichs angeordnet werden soll. Alternativ dazu kann align="left" oder align="right" verwendet werden, wobei ersteres die Standarteinstellung ist.

Der b-Tag bedeutet, wie im BBcode auch, dass der Text darin Fett ausgegeben werden soll.

br bedeutet Zeilenumbruch. Anders als im normalen Text muss in HTML der Zeilenumbruch br geschrieben werden. Bei Zeilenumbrüchen mit der "Enter" Taste führt HTML dies in einem Fliestext weiter. Der Einfachheit halber vor jede Zeile ein br setzen .

Im zweiten p-Tag des Beispiels befindet sich ein style=" "-Befehl. Dieser signalisiert die Einbindung von Stylesheet-Befehlen in den HTML-Code.
Stylsheet ist eine Sprache die im Prinzip ausschlieslich der Optik der späteren HTML-Ausgabe dient. Via Stylecheet kann also ein Text schnell und leicht in Form und Farbe verändert werden.

Im Beispiel ist hier der Befehlt color:#33B200; enthalten. Dieser besagt das der Text im p-Bereich die Farbe #33B200 haben soll.
#33B200 ist ein HTML-Farbcode. Mit seiner hilfe lassen sich alle Farben in 6 Zeichen fassen. Photoshop-User können diesen Code bei der im Fenster zur Farbbestimmung ablesen.
Als Normalsterblicher bedient man sich einfach solch einer Seite: http://www.html-php-mysql.de/generatoren/colors.php
Für die, die es genauer wollen, diese Seite hier (danke MaikBey): http://wellstyled.com/tools/colorscheme2/index-en.html

Natürlich gibt es im style-Tag noch andere Befehle zur Formatierung der Schrift.
Hier eine kleine Liste mit oft benutzten Befehlen:

- Color:#000000; Textfarbe bestimmt mit dem HTML-Farbcode
- font-size:18px; Gibt die größe des Textes in Pixel an
- font-family:Arial, Helvetica, sans-serif; Gibt die Schriftart an (falls die erste nicht vorhanden ist wird automatisch die zweite verwendet)
- font-style:italic; Der Schriftstiel: italic = kursive; oblique = schräggestellt; normal = normal

Wichtig: Die einzelnen Befehler im style-Tag werden immer durch den Strichpunkt ";" getrennt. Auch bei einzelnen Befehlen muss er dahinter stehen !


Tabellen und Grafikeinbindung

Tabellen benutzt man um Auflistungen oder eben Tabellen zu erstellen. Im Content sind sie z.B. dann zu gebrauchen wenn links ein Wort oder eine Grafik und rechts der Dazugehörige Text stehen soll. Für eine lineare Darstellung sind dabei Tabellen von Vorteil.

Hier eine kurze Erklärung, wie eine Tabelle aufgebaut ist:

Eine Tabelle besitzt einen umfassenden table ... /table-Tag. Im Einleitenden Tag wird bestimmt welche Breite, Position, Randstärke usw. die Tabelle haben soll.
Mit tr.../tr wird eine neue Zeile geöffnet und geschlossen die dann mit td.../td in einzelne Spalten unterteilt wird.
Im einleitenden td-Tag kann wie im p-Tag ein style-Bereich mit Textformatierung eingebunden werden.



In diesem Beispiel sieht man also eine Typische Tabelle.

Erklärung der Befehle im Einzelnen:
width="80%" im einleitenden table-Tag bestimmt die Breite der Tabelle. Hier 80% des zur vefügung stehenden Platzes. Pixelangaben gehen auch ... z.B. width="400".
Die Höhe wird mit dem Befehl height=" " bestimmt.

tr zur Einleitung einer neuen Zeile.

Dannach td für eine neue Spalte. align="center" besagt dass der Text in der Spalte in der Mitte stehen soll. colspan="2" besagt, dass diese Spalte über 2 Spalten gehen soll, da die Zeilen darunter Jeweils zwei Spalten aufweisen. style="..." dürfte klar sein.

Im nächsten td-Tag wird die Breite (width="35") und die Höhe (height="50") fest angegeben. Auserdem wird die Grafik http://gcclanpage.gc.funpic.de/PPpics/Tutorial/tut-haus.gif eingebunden.
Grafiken werden mit dem img-Tag eingebunden. Im Tag steht src="url-der-bildes" zum festlegen der URL des Bildes und eventuell noch weite Befehle wie border="1" für einen Rand der stärke 1 Pixel was aber im Beispiel nicht gebraucht wird.

Alle anderen Befehle des Beispiels sollten mitlerweile klar sein.


Hier noch eine Liste mit Befehlen, welche in den Einleitenden table-Tag gesetzt werden können:
- width="300" / height="50%" für Höhe und Breite
- align="center" für die horizontale Position (möglich sind center, left und right)
- valign="top" für die vertikale Position (möglich sind top, middle und bottom)
- border="2" für die Randstärke der Tabelle in Pixel (auch der Rand zwischen Zeilen und Spalten)
- cellspacing="10" / cellpadding="10" für den Abstand der Zellen untereinander und des Inhalts zum Zellenrand.

Letzteres wird durch diese Grafik schön gezeigt:

(Quelle: http://de.selfhtml.org/)

Im td-Tag sind neben Breite und Höhe die gleichen Befehle wie im p-Tag anwendbar.


Hintergrundfarbe und -bild

Der vorerst Letzte und wichtigste Teil dieses Tutorials: Die Hintergründe.
Hier wird vorallem der Teil, der im ersten Abschnitt grau gefärbt war wichtig. Aber zuerst der Scrren.



Wie schon gesagt wird jetzt der umrahmende table-Tag mit dem style-Bereich wichtig. Der table-Tag sollte so angelegt werden wie im Beispiel gezeig, also am Anfang table width="100%" tr td sowie am Ende /td /tr /table.

style type="text/css" ...hier kommen die entscheidenden Informationen zum Hintergrund rein. Angelegt wird er wie im Beispielbild zu sehen.
background-color:#65e5fe; ...hier wird dei Hintergrundfarbe bestimmt mithilfe des HTML-Farbcodes (zur erinnerung, diese seite:http://www.html-php-mysql.de/generatoren/colors.php).
background-image:url(url-des-hintergrundbildes); ...hier wird die URL für das Hintergrundbild definiert.
In meinem Tutorial habe ich dieses Bild verwendet: http://gcclanpage.gc.funpic.de/PPpics/Tutorial/tutorial_bg.jpg
background-position:center; ...Bestimmung für die Position des Hintergrundbilds. Horizontale und Vertikale angaben werden dabei hintereinander geschrieben (z.B. background-position:right top;).
background-repeat:no-repeat; ...Und zu guter letzt wird bestimmt ob und/oder wie der Hintergrund wiederholt wird.
Möglich sind folgende Befehle:
repeat = wiederholen (Voreinstellung).
repeat-x = nur "eine Zeile lang" waagerecht wiederholen.
repeat-y = nur "eine Spalte lang" senkrecht wiederholen.
no-repeat = nicht wiederholen, nur als Einzelbild anzeigen.

Möglich sind diese Befehle auch im td style=" ... "-Tag ... dadurch kann z.B. für jede Tabellenspalte ein extra Hintergrund definiert werden.

Zuzüglich zu den oberen Befehlen gibt es auch noch den Befehl background-attachment: mit dem das Verhalten des Hintergrundbilds kontrolliert wird.
Erlaubt ist eine der folgenden Angaben:

scroll = mitscrollen (Voreinstellung), orientiert sich an der Position des jeweiligen Elements
fixed = Hintergrundbild bleibt stehen, orientiert sich am Viewport (ein anschauliches Beispiel mit background-attachment:fixed; ist hier zu sehen:unknown)



Noch ein Paar abschliesende Worte

Natürlich gibt es andere Möglichkeiten das Ganze umzusetzen und p-Tags sowie n haufen br's als Platzeinteilung zu verwenden ist sicher nicht die eleganteste Methode einen HTML-Content zu gestalten. Aber ich hab hier versucht die einfachste Methode zu zeigen um es leicht verständlich zu machen ... ob es das letztendlich is kann ich nich sagen *g*
Auserdem hab ich kein Kapitel mit div-Tags eingebaut, obwohl diese hier in PP sehr oft verwendet werden. Aber ich denk das werd ich bei zeit Nachrüsten.
Also wie gesagt es ist sicher kein perfektes Tutorial, aber es ist sicherlich eine Hilfe für User ohne HTML-Vorkenntnisse.

Noch n kleiner Zusat: Rechtschreibfehler sind Bugs im Board

  
Mr. Blackgepostet: 13.04.2007 13:50 link

User-Rating:
schmuggelt da still und heimlich n super tutorial ein... guck mal auf deinen kontostand

  
aNTiXgepostet: 15.04.2007 21:39 link

User-Rating:
vielen dank
ich hoff das tutorial wird einigen usern helfen

  
gelöschter Benutzergepostet: 05.05.2007 23:07 link

User-Rating:
eine frage:
was ist die textfarbe für rot ? also dieses #

  
gelöschter Benutzergepostet: 05.05.2007 23:20 link

User-Rating:
ok rot hat sich geklärt -
aber der background kommt bei mir nicht ganz hin

  
50pixelgepostet: 07.05.2007 15:58 link

User-Rating:
für mich ist dieses tutorial eine große hilfe (obwohl ich schon viele HTML-codes kenne)
ist wirklich gut und leicht verstehbar geworden!
nur das mit den tabellen ist etwas schwer zu kapieren(damit kam ich früher auch schon nicht klar)

  
MaikBeygepostet: 21.05.2007 17:48 link

User-Rating:
hie hab da einen super link wenn ihr die farben wissen wollt:

Hex-Farben nenne ich das mal

  
3TageBartgepostet: 30.06.2007 03:32 link

User-Rating:
Schlagschatten für Schrift





  
1Lysgepostet: 24.07.2007 19:09 link

User-Rating:
Ungültige HTML-Tags und/oder JavaScript-Befehle wurden entfernt.


Tabellen werden anscheinend nicht akzeptiert oder was?
Hatte schonmal Problem das die Tabellen hier nicht laufen.. sry das ich den Thread hochhol

Natoll, jetzt geh ich auf "übernehmen" und der ganze Text ist weg. Danke du blödes System -.-

  
gelöschter Benutzergepostet: 24.07.2007 19:24 link

User-Rating:
klar werden tabellen akzeptiert
aber manchmal ist es besser, wenn man die sachen in einer externen datei bei sich auf dem pc hat und von dort auch immer kopiert...
denn manches wird ja geparst und erscheint dann hinterher anders

  
Beiträge 1 - 10 (34)  Seite: 1 | 2 | 3 | 4 weiter  
Zeige 

Um das Forum zu benutzen musst Du registriert und eingeloggt sein