preload
basicPlayer

HMTL - Crashkurs

Comunio-cl.com Foren-Übersicht -> Test und Codeschnipsel
Autor Nachricht
Gast





BeitragVerfasst am: 25 März 2009 20:43   Titel: HMTL - Crashkurs Antworten mit Zitat

Ich habe hier noch einmal den alten Crashkurs von --> kliesch <--

Wie bekomme ich die URL des Bildes raus?

Ganz einfach. Mit der rechten Maustaste auf das Bild klicken, dann auf "Eigenschaften" gehen und die dort vermerkte Adresse kopieren.


Wie verändere ich mein Profil richtig?

Natürlich ist es ziemlich kompliziert eine HTML Beschreibung in ein kleines Beschreibungsfenster zu texten. Deshalb bauen erfahrene Programmierer zuerst ein Grundgerüst auf der eigenen Festplatte und verändern den Code dort bis er ihnen gefällt. Dann kommt er erst in den Beschreibungskasten. Das macht das ganze viel einfacher. So gehts:

1. Ihr ändert euer leeres Profil, indem ihr bei Beschreibung einfach ein Wort eingebt. (zb. Hochhaus) Dann geht ihr in euer Profil und drück die rechte Maustaste und geht dann auf "Quelltext anzeigen". Nun habt ihr dieses Wirrwarr-Zeug da stehen. Ihr geht jetzt aber oben auf "speichern unter" und speichert es am besten auf dem Desktop als "profil.htm" ab.
Wichtig ist nur, dass ihr die Endung ".htm" einsetzt.

2. Nun könnt ihr alles schließen und geht zu der gerade erstellten Datei. Ihr öffnet sie und seht nun euer Profil. Wieder lasst ihr euch den Quelltext anzeigen und geht oben bei "bearbeiten" auf "Suchen". Nun sucht ihr nach eurem Wort. In diesem Fall ist es Hochhaus. Wenn ihr es erstmal gefunden habt, löscht ihr es. Es hat einfach nur als "Lesezeichen" gedient, damit wir die Stelle finden, wo wir unseren HTML-Code einsetzen können.

3. Wo vorher das Wort stand lasst ihr nach unten und oben am besten ein paar Zeilen platz, damit ihr auch Platz habt um euren Code zu schreiben, ohne mit dem schon Bestehenden durcheinander zu kommen. Und nun gehts los.

4. Wenn ihr was verändert, speichert ihr ab und schaut euch an wie es aussieht. Dann kann man weiterarbeiten. Wenn man zufrieden ist, kopiert man seinen Code (nicht alles, sondern nur das was man dazugeschrieben hat. Sollte man an den leeren Zeilen darüber und darunter aber gut erkennen, falls ihr diese gesetzt habt.) einfach in das "Beschreibung" Fenster und kann sich zufrieden zurücklehnen.



Wie lasse ich Bilder von meiner Festplatte anzeigen?

Die Bilder müssen erstmal hochgeladen werden. Dazu benutzt ihr Webspace. Diesen gibt es zb. bei http://www.lima-city.de/ umsonst. Einfach dort anmelden und schon kann man seine Dateien hochladen. Dann einfach wie oben beschrieben die URL kopieren und wie bei "Bild einfügen" einsetzen. So einfach! Übrigens solltet ihr nur *.jpg oder *.gif Dateien nehmen, denn bmp's sind einfach zu groß.


Was bedeuten die Farbcodes?

Farbcodes bestehen aus 6 Zahlen. Im Gegensatz zu den normalen Begriffen (red, blue, green, usw) muss vor den Zahlencode immer ein # gesetzt werden. Die verschiedenen Farbcodes findet man hier:
http://www.mediaevent.de/tutorial/farbcodes.html


HTML - CODES:

Textattribute ändern

Texteigenschaften sind meist mit ein paar Zeichen geändert. Die meisten Befehle müssen mit einem entsprechenden Schlussbefehl wieder beendet werden. So könnt ihr die Befehle einsetzen:

Code:

Fetter Text
<b> Text </b>

Kursiver Text
<i> Text </i>

Unterstrichen
<u> Text </u>

Zeilenwechsel
<br>

Leerzeichen
&nbsp;

Zentriert
<center> Text </center>

Ausgerichteter Text
<p> Text </p> (* steht für left, right, center oder justify (Blocksatz))

Textfarbe, -Größe und -Stil
<font> Text </font> (* steht für size="Zahl", color="red", face="arial")

Bei color kann ein Farbcode (#123456, siehe oben) oder der englische Name der Farbe stehen. Bei face kann natürlich auch eine andere Schriftart verwendet werden.




Bildeinbau

Ein Bild kann sowohl in Tabellen, als auch einfach auf dem Hintergrund eingefügt werden. Der normale Code ist einfach aufgebaut:

Code:

<img src="URL">

Bei URL kommt die Adresse des Bildes hinein. Für die Fortgeschrittenen gibt es auch noch einen umfangreicheren Code, der die Änderung einiger Eigenschaften zulässt:


Code:

<img src="URL" border="0" width="" height="" alt="">

Bei "Border" wird der Rahmen bestimmt. Wenn dort eine 0 eingetragen ist, verschwindet der Rahmen automatisch. Bei einer 2 ist der Rahmen schon etwas größer. Mit "width" und "height" bestimmt man die Breite und Höhe des Bildes. Bei "alt" wird eine Beschreibung eingegeben, die erscheint, wenn man mit der Maus über das Bild fährt.




Links

Die Verlinkung einer anderen Seite ist relativ einfach:
Code:

<a href="URL"> TEXT </a>



Bei URL kommt die Adresse der gesuchten Seite rein. Bei TEXT steht dann das, wo man nachher raufklicken soll. Natürlich kann man auch ein Bild als Link verwandeln. Hierbei wird einfach bei TEXT der Code für das Bild eingesetzt. Mit "Border="0" könnt ihr dann den störenden Rahmen entfernen.


Code:

<img src="URL" border="0" width="" height="" alt="">

Bei "Border" wird der Rahmen bestimmt. Wenn dort eine 0 eingetragen ist, verschwindet der Rahmen automatisch. Bei einer 2 ist der Rahmen schon etwas größer. Mit "width" und "height" bestimmt man die Breite und Höhe des Bildes. Bei "alt" wird eine Beschreibung eingegeben, die erscheint, wenn man mit der Maus über das Bild fährt.



Damit sich die neue Seite extern öffnet und nicht in der aktuellen Seite geöffnet wird, müsst ihr noch einen Target angeben. Wenn der Target einen Namen hat, der noch nicht belegt ist, dann öffnet sich automatisch ein neues Fenster. Als Standard gilt hierfür "_blank". Das ganze sieht dann so aus:

Code:

<a href="URL" target="_blank"> TEXT </a>




Ein durchlaufender Text

Der Durchlaufende Text. Er ist sehr beliebt. Man kann nicht nur Text, sondern auch Bilder oder Links durchlaufen lassen. So gehts: Mit "scrolldelay" und "scrollamount" könnt ihr die Geschwindigkeit verändern. Einfach mal ausprobieren. Innerhalb des marquees kann man natürlich auch noch die Schriftart ändern.

Code:

<marquee>INHALT</marquee>

<marquee>Text geht nach unten</marquee>

<marquee>Text geht nach oben</marquee>

Wenn ihr mehrere Objekte (z.b. Bilder) durchlaufen lassen wollt, dann tut das so:

<marquee><img src="bild1.jpg"><img src="bild2.jpg"><img src="bild3.jpg"></marquee>




Tabellen und ihre Eigenschaften

Tabellen. Sie sind sehr mächtig und können das ganze Profil durcheinander bringen. Sie beginnt immer mit einem <table> und endet mit einem </table. Dazwischen gibt es die Zeilen (<tr>Zeile</tr>) in denen die Spalten (<td>Spalte</td>) zu finden sind. In diese Spalten kommen dann die Inhalte (zb. Bilder oder Text).

Code:

<table>
<tr> <td>Inhalt</td> <td>Inhalt</td> <td>Inhalt</td> </tr>
<tr> <td>Inhalt</td> <td>Inhalt</td> <td>Inhalt</td> </tr>
</table>



In den Tabellen müssen zudem die Schriftart, Größe, Farbe usw. wieder geändert werden.
Falls ihr eine Spalte, Zeile oder gleich die ganze Tabelle farblich ändern wollt, dann geht das so:

Code:

<td bgcolor="FARBE"> oder
<tr bgcolor="FARBE"> oder sogar
<table bgcolor="FARBE">



Natürlich kann man auch statt einer Hintergrundfarbe ein Hintergrundbild in die Tabelle einfügen.

Code:

<table background="FARBE">



Mauszeiger verändern

Wenn ihr wollt, dass sich der Mauszeiger ändert, wenn ihr über ein Element (Text, Bild, Tabelle, was ihr wollt) fahrt, dann nutzt einfach folgende Hilfe. So könnt ihr zb. einen Finger aus eurem Zeiger machen, wenn ihr über einen Link fahrt.

Code:

<span> ELEMENT </span>



Für "x" müsst ihr natürlich das richtige einsetzen. Hier ist eine Liste mit den Möglichkeiten.

help -Fragezeichen
auto - automatischer Cursor
crosshair - Fadenkreuz
pointer - Finger
wait - Sanduhr
text - Textcursor


Desweiteren kann man auch eine eigene Datei als Cursor benutzen.
Einfach statt "x" "url(UrlDesBildes)" eingeben. UrlDerBildes kann eine GIF-,JPG-,PNG-Grafik oder eine Cursor-Datei (*.cur, *.ani) sein. Diese Cursoränderungen funktionieren allerdings erst ab IE 6.0.

Style-sheets sind im Profil leider nicht erlaubt, aber auf einer Homepage dürfte es ohne Probleme klappen.
Nach oben
Gast





BeitragVerfasst am: 25 März 2009 21:01   Titel: Antworten mit Zitat

!WICHTIG!

Der Crashkrus wurde übernommen!
Nach oben
Beiträge der letzten Zeit anzeigen:   
Alle Zeiten sind GMT + 2 Stunden
Seite 1 von 1



Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.


Powered by phpBB © 2001, 2002 phpBB Group