Help´w`THING
Navigation Navigation Navigation Navigation Navigation Navigation Navigation














HTML Grundkenntnisse


HTML Grundkenntnisse für Einsteiger :
__________________________________________________________________________________________________

Gliederung :

1. Einführung
2. Grundbefehle
3. Anwendung auf Clanplanet bezogen
- Inhalte mit Texten
- Bilder einfügen (bewegen)
- Alles rund um die Startseite
- Einstiegsseite
- Hintergrund
4. News Template
5. Schriftarten

__________________________________________________________________________________________________

1. Einführung :

HTML (HyperText Markup Language) ist eine plattformunabhängige
Dokumentbeschreibungssprache, in der Web-Seiten geschrieben sind.
Jeder HTML-Tag wir geöffnet <center> und geschlossen </center>
( "/" Kenzeichnet das der Tag geschlossen ist)
HTML kann genutzt werden um Bilder,Videos und Sonstiges einzubetten.
Außerdem kann man damit Texte verändern (Farbe,Schriftgröße,Schriftart)

__________________________________________________________________________________________________

2. Grundbefehle :

Eine Liste der Häufigsten HTML-Tag´s
<br> = Zeilenumbruch
<center>....</center> = Zentriert (z.B.: Bild oder Text)
<div align="left">...</div> = Linksbündig
<div align="right">...</div> = Rechtsbündig
<div align="center"...</div> = Zentriert
<p>...</p> = Setzt texte in Paragraphen ( Bestimmter Abstand von oben und unten)
<font>...</font> = Schrift verändern (Bewirkt noch nichts, es fehlen genaue Befehle)
color="Farbe" = Farbe in Englisch eingeben (Bewirkt nur was in Kombination mit <font>)
size="Größe" = Größe in Zahlen: 1 2, 3, usw. (Bewirkt nur was in Kombination mit <font>)
face="Schriftart" = Schriftart des Textes (Bewirkt nur was in Kombination mit <font>)

Text beispiel : <font color="red" size="3" face="Arial">Ich liebe Design4You</font>
Dieser Text würde rot Dargestellt werden mit der Größe 3 und der Schriftart Arial

<a href="Link für die Homepage"> Name(Sichtbar) </a> = Verlinkung zu einer Beliebigen Seite
<img src="Link von einem Bild"> = Bild einfügen
<a href="Link für die Homepage"><img src="Link von einem Bild" title="Titel "></a> =Verlinkung mit Bild

__________________________________________________________________________________________________

3.Anwendung auf Clanplanet bezogen :

- Inhalte mit Texten ;

Clanintern --> Eigene Inhalte -->Neuen Inhalt anlegen-->HTML-->Verlinkt im Menü
-->Titel-->Oben rechts Optionen und auf den Stift klicken

Jetzt kannst du einen Text deiner Wahl eingeben z.b.:

""Ich esse nie wieder Pommes mit meinem Hund, denn er sabbert so viel""

Diesen Text werden wir jetzt Gestalten, nämlich wie folgend ;
- Schriftfarbe : rot
- Schriftgröße : 4
- Schriftart : Georgia

<font color="red" size="4" face="Georgia">
Ich esse nie wieder Pommes mit meinem Hund, denn er sabbert so viel
</font>

(Kopier dir diesen Text und betrachte das Ergebnis )

Du kannst auch den Text an verschiedenen Stellen bearbeiten

<font color="red" size="4" face="Georgia">
Ich esse nie wieder
<font color="white" size="4" face="Georgia">Pommes </font>
mit meinem Hund, denn er sabbert so viel
</font>

(Kopier dir diesen Text und betrachte das Ergebnis )

- Bilder einfügen (bewegen) ;

Clanintern --> Eigene Inhalte -->Neuen Inhalt anlegen-->HTML-->Verlinkt im Menü/Ausgabe Direkt im Menü
-->Titel-->Oben rechts Optionen und auf den Stift klicken

<img src="Bild-URL"> = Ein einfaches Bild das einem angezeigt wird

<a href="Beliebiger Link"><img src="Bild-URL"></a>
= Ein Bild das beim Anklicken einen auf die jeweilige Seite weiterleitet (gleicher Tab)

<a href="Beliebiger Link" target="blanket"><img src="Bild-URL"></a>
= Ein Bild das beim Anklicken einen auf die jeweilige Seite weiterleitet (neuer Tab)

Um Bilder von Oben nach Unten zu bewegen wird dieser Code ganz oben eingefügt

<marquee height="200" onMouseOver="this.stop()" onMouseOut="this.start" direction="up" scrollamount="5" scrolldelay="0">

Ganz unten schreibt ihr dann </marquee>

Erläuterung :
- scrollamount="Zahl" = Geschwindigkeit
- height="Zahl" = Höhe
- direction=" " = Richtung ( up , down , left , right)


Alles rund um die Startseite ;

Clanintern --> Eigene Inhalte -->Neuen Inhalt anlegen-->HTML-->Seitenzusatz
-->Oben rechts Optionen und auf den Stift klicken

Alles was du hier eingibst wird auf der Startseite angezeigt : ( Oft genutze Elemente)
- Chatbox ; http://xat.com/web_gear/?cb
- Flash Texte; http://www.flashvortex.com/


Einstiegsseite ;

Clanintern --> Eigene Inhalte -->Neuen Inhalt anlegen-->HTML-->Als vorgeschaltete Einstiegsseite
-->Oben rechts Optionen und auf den Stift klicken

Code für die Einstiegsseite ;

<html>
<head>
<title> Name der Website </title>
</head>

<body bgcolor="black">
<center>
<a href=" Link zur Website " ><img src=" Bild-Url " title=""></a>

</center>

</body>

</html>


- Hintergrund :

Den folgenden Code fügt ihr in einen Inhalt im HTML Format und als Modul.
Der Code funktioniert nur auf dem linken/rechten Außenmenü
auf der Startseite darf der Code auch nicht eingeben werden,
da der Hintergrund dann nur auf der Startseite zu sehen ist und nicht auf anderen Inhalten wie Gästebuch

Code:

<style type="text/css">

body {

background-image: url( Link des Bildes );
background-repeat: no-repeat;
background-position: center top ;
background-attachment: free ;
}

</style>

__________________________________________________________________________________________________

4. News Template

Clanintern --> HTML Templates -->Template für Abschnitt: Newsbeitrag
-->Oben rechts Optionen und auf den Stift klicken

<style type="text/css">
.news_
{
width : 550px; /* Breite der News */
margin : auto;
font-family : Verdana, Arial;
font-size : 12px;
color : #ffffff; /* Textfarbe der gesamten News */
}

.news_head
{
width : 100%;
height : 100px; /* Höhe des gesamten Kopfes ( news_header(titel...) + news_pic ) */
}

.news_header
{
width : 100%;
height: : 25px;
background : url('Link zum Bild') no-repeat; /* Link zum Bild einfach austauschen durch den Link zum Bild */
line-height : 25px;
text-align : left;
}

.news_header > div
{
padding-left : 4px;
}

.news_pic
{
width : 100%;
height : 75px;
background : url('Link zum Bild') no-repeat; /* Link zum Bild einfach austauschen durch den Link zum Bild */
}

.news_bg
{
width : 100%;
background : url('Link zum Bild') repeat-y; /* Link zum Bild einfach austauschen durch den Link zum Bild */
}

.news_bg > div
{
width : 95%;
overflow : hidden;
paddin-left : 2.5%;
}

.news_footer
{
width : 100%;
height : 20px;
line-height : 20px;
text-align : center;
background : url('Link zum Bild') no-repeat; /* Link zum Bild einfach austauschen durch den Link zum Bild */
}
</style>
<div class="news_">
<div class="news_head">
<div class="news_header">
<div><a href="$linkURL$">$titel$</a></div>
</div>
<div class="news_pic"></div>
</div>
<div class="news_bg">
<div>
$text$
</div>
</div>
<div class="news_footer">
<font>
Geschrieben von $name$ am $zeitpunkt$
</font>
</div>
</div>

__________________________________________________________________________________________________

5. Schriftarten

Im Web gibt es einige Schriftarten (Fonts) die sich auf den meisten Browsern darstellen lassen.
Dazu zählen u.a.: Times New Roman, Arial, Verdana, Helvetica und Courier New.
Standardschrift für Internet Explorer und Mozilla Firefox sind Times New Roman (Serifenschrift mit "Füßchen"),
Arial (Serifenlose Schrift ohne "Füßchen" (sans-serif)).
Es ist ratsam nur Standard Schriftarten zu benutzen.
Denn sollte ein Besucher nicht die verwendete Schriftart haben benutzt der Browser eine Standard Schrift.
Dadurch kann die ganze Seite anders aussehen.

Die Schrift "Verdana", die Sie höchstwahrscheinlich gerade lesen wurde extra für den Einsatz am Bildschirm entwickelt.

Die folgenden Schriftarten sind auf jeden Fall auf dem Computer des Besuchers (Ihrer Webseiten) und können auf dem so dargestellt werden, wie bei Ihnen (unter Windows).

Alle Standardschriftarten im Überbblick :

Schriftart;

Times New Roman
Arial
Tahoma
Helvetica
Lucida Sans
Verdana
Courier
Courier New
Fixedsys
Georgia
Comic Sans MS











Datenschutzerklärung | Powered by Clanplanet - www.clanplanet.de