[HTML] Kalender

Dasher
Ich hab mich mal umgeschaut und gesehen das niemand einen Kalender Tut geschrieben hat! Deswegen schreib ichs jetzt einfach.

Also. Erstmal sollte folgendes Bereitgestellt sein:
  • Grund HTML-Kentnisse
  • HTML-Programm (Editor geht auch)


Na dann mal los:

Damit das ganze am Ende so aussehen kann, müsst ihr folgendes machen:

1. Ihr geht in die "Code"-Ansicht eures Programms und kopiert folgenden Code in den <body>-Tag
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
<table width="261" height="241" border="0" cellpadding="1" cellspacing="0" bgcolor="#FFFFFF" style="border: 1pt solid #000000">
  <tr background="BILD URL">
    <td width="128" height="90" colspan="7" align="center">
      <p align="center"><font face="Tahoma" size="3" color="#000000">Januar 2008</font>
  <tr bgcolor="#ffffff">
    <td width="17" height="16" align="center"><font face="Tahoma" size="2" color="#000000">Mo</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">Di</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">Mi</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">Do</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">Fr</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">Sa</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">So</font></td>
  </tr>
  <tr bgcolor="#000000">
    <td width="17" height="21" align="center"><font face="Tahoma" size="2" color="#FFFFFF"></font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">1</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">2</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">3</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">4</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">5</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">6</font></td>
  </tr>
  <tr bgcolor="#ffffff">
    <td width="17" height="16" align="center"><font face="Tahoma" size="2" color="#000000">7</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">8</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">9</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">10</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">11</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">12</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">13</font></td>
  </tr>
  <tr bgcolor="#000000">
    <td width="17" height="16" align="center"><font face="Tahoma" size="2" color="#FFFFFF">14</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">15</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">16</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">17</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">18</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">19</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">20</font></td>
  </tr>
  <tr bgcolor="#ffffff">
    <td width="17" height="16" align="center"><font face="Tahoma" size="2" color="#000000">21</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">22</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">23</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">24</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">25</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">26</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#000000">27</font> </td>
  </tr>
    <tr bgcolor="#000000">
    <td width="17" height="21" align="center"><font face="Tahoma" size="2" color="#FFFFFF">28</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">29</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">30</font></td>
    <td width="17" align="center"><font face="Tahoma" size="2" color="#FFFFFF">31</font></td>
    <td width="17" align="center">&nbsp;</td>
    <td width="17" align="center">&nbsp;</td>
    <td width="17" align="center">&nbsp;</td>
  </tr>
</table>


Damit hätten wir den Kalender.

2. Damit ihr erstmal ein Bild habt könnt ihr das selbe nehmen wie ich. Speichert es einfach im gleichen Ordner wie eure HTML-Seite ab. (Das Bild)

Nun gut. Sucht im Code die Stelle
code:
1:
2:
3:
<tr background="BILD URL">
    <td width="128" height="90" colspan="7" align="center">
      <p align="center"><font face="Tahoma" size="3" color="#000000">Januar 2008</font>


Ihr müsst "BILD URL" in (wenn ihr mein Bild nehmt) "Unbenannt1aafaf.jpg" ändern. Danach ändert ihr noch die Schirftfarbe von Januar 2008 in "#FFFFFF"

3. Jetzt könnt ihr noch Termine eintragen. Das macht ihr ganz einfach so:

3.1. sucht euch ein Datum (wir nehmen im Beispiel 10) geht in die Code Ansicht und "sucht" die 10

3.2. vor die "10" schreibt ihr
code:
1:
<a title="TERMIN">

und hinter die "10" schreibt ihr </a>
Das TERMIN einfach in euren Termin umbenennen. Am besten macht ihr dann noch um die 10 <b></b>. Dann sieht man den Termin auf Anhieb!

Fertig. Jetzt müsste der Kalender funktionieren. Einziges Problem: Ihr müsst jeden Monat die Zahlen ändern. Oder ihr fragt mich einfach. Dann mach ichs schnell (inklusive Bildänderung)

Abgeleitet von: http://tutorials.icedale.de/
Bild Copyright by Artistic-Arts

Dasher
Indihorse
tolles tut aber es gibt ne area für tuts smile

glg Indihorse
Dasher
Genau! Hab ich schon probiert. Hab auch schon an nen Mod geschrieben.
Tigerlilly
Verschoben Augenzwinkern
Dasher
Danke
*sue
dankee
genau das tut das ich brauche
schnell mal ausprobieren !!!
Dasher
Freut mich. Hoffe das du keine Probleme damit hast.
Saijori
Hey ^^

Tolles Tut Augenzwinkern Ging voll einfach und schnell fröhlich Nur..... (jetzt kommt das 'nur nicht das 'aber' xD) man sieht das Bild net bei mir unglücklich

*klick*
Dasher
Also ich weiß ja nicht. Ich seh das Bild.
Saijori
Oh... vllt spinnt mein PC fröhlich
Hollywood
Zitat:
Original von Lena0112
Oh... vllt spinnt mein PC fröhlich


dann spinnt meiner auch smile
*sue
ich seh bei dir ein bild!
habt ihr IE?

weil bei mir funzts!

LG susi
(konnte noch net gaanz ausprobieren und wie erscheinen dann die termine??)
Dasher
@pferdetreume: <a title="TERMIN">Datum</a>
und dann mit der Maus drüber gehen (nicht klicken)
pfinE
ey, das ist ja ein tolles TUT, wirklich! smile
habe es auch auf Anhieb verstanden und es funktioniert!
danke! fröhlich
LG, Marie
Dasher
Na ja. So schwer zu verstehen bzw. so viel zu verstehen muss man ja nicht Augenzwinkern Aber trozdem danke! Ich nehm so was ja irgendwie immer als Kompliment!
pfinE
So, eine Frage hätte ich dann doch noch:
Was muss man denn dann ändern, wenn man den Kalender z.B. für Februar haben will? Denn der Monat fängt ja nicht mit Di sonder mit Fr an ...
SammyLG
Iselu: Dann lässt man in der ersten Zeile alles bis zur Freitag Spalte frei.
Dasher
@Iselu: Stimmt. Du musst dir den Kalender für jeden Monat neu schreiben. Zu mindestens die Tage. Manchmal musst du unten dann noch eine Zeile anfügen aber meistens sollte das eigentlich reichen!
pfinE
Achso, ok, ich glaube, ich weiß was ihr meint Augenzwinkern
Werde es bei Gelegenheit mal ausprobieren. Danke!
Dasher
Gern geschehen. Mit ein bischen Arbeit kann man den Kalender auch für ein ganzes Jahr umschreiben.