Autor Thema: Wie erstelle ich eine Homepage unter Html (1) (Gelesen 16600 mal)

Hans · « **am:** Juli 06, 2005, 20:11:28 »

Hallo da viele noch keine eigene Homepage haben und einige Mitglieder eine verlinkungsaktion gestartet haben bietet es sich doch an auch gleich eine kleine einführung in HTML zu geben wie wir ja wissen, kann man Homepage mit HTML und PHP usw erstellen viele nutzen auch so Baukasten Homepage oder Office Programme wie zum Beispiel Word,Ecxel, Power Point aber es gibt auch das Office Programm FrontPage das sich auch hervoragend zum erstellen und gestallten von Homepage´s eignet. Aber hier will ich erklären wie man Homepage´s mit Html,php und Java applikationen erstellt. Ich hoffe das ich euer Interesse zum mitmachen geweckt habe. Wenn etwas unklar oder eine Frage ist einfach Posten.

So nun geht es ans eingemachte:

Damit man mit HTML eine Homepage machen kann sollte man schon ein paar gewisse Grundbefehle kenne und Natürlich braucht man auch einen Guten Editor:

Was ist ein HTML-Editor: Ein HTML-Editor ist ein Computerprogramm, mit dem man Internetseiten mit HTML-Code erstellen und abändern kann. Dabei unterscheidet man textbasierte Programme, bei denen direkt der Quellcode editiert wird, und sogenannte WYSIWYG-Editoren, bei denen die Seite beim Bearbeiten so angezeigt wird, wie sie der Browser später darstellt. Häufig ermöglichen WYSIWYG-Editoren, den Quellcode auch direkt zu bearbeiten. Einige Editoren können auch mit auf Webservern eingesetzten Scriptsprachen, wie zum Beispiel PHP, umgehen. Gute HTML-Editoren besitzen eine sogenannte "Syntax-Hervorhebung", welche Tags im Quellcode farblich kenntlich macht. Die besten dieser Programme unterstützen auch Autovervollständigen

Ein guter Editor den ich für diese Projekt empfehlen würde Wäre: PHP Desinger 2005
Hier der download Link: http://www.zdnet.de/downloads/prg/3/0/en10353130-wc.html

So nun haben wir einen Editor und können mit einfachen Beispielen beginnen.

Noch ganz Wichtig vor jeder Anweisung kommt immer diese < Zeichen
und zum beenden der Anweisung kommt immer dieses </> Zeichen

so also erste Übung:

Code: [Auswählen]

<html>

<head>

<body>

<p>&nbsp;</p>
<p>&nbsp;</p>
<h1>Das ist ein ganz einfaches Beispiel</h1>
<p>&nbsp;</p>

</body>

</html>

siehe Bild so sieht das ganze dann im Browser aus

Hans · « **Antwort #1 am:** Juli 07, 2005, 02:04:16 »

So nun haben wir das einfache Beispiel gemacht nun wollen wir das selbe einfache Beispiel mittig zentriet machen :

Code: [Auswählen]

<html>
<body>

<h1 align="center">Das ist ein einfaches Beispiel</h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h1 align="center">&nbsp;</h1>

</body>

</html>

Jetzt haben wir es Zentiriert in der Mitte

Hans · « **Antwort #2 am:** Juli 07, 2005, 02:09:25 »

Jetzt haben wir es schon Mittig zentriert jetz machne wir das ganze noch hinter einen Farbigen hintergrund

Code: [Auswählen]

<html>
<body>

<h1 align="center"><span style="background-color: #FFFF00">Das ist ein einfaches Beispiel</span></h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h1 align="center">&nbsp;</h1>

</body>

</html>

Jetzt haben wir es mit einen Farbigen hintergrund

Hans · « **Antwort #3 am:** Juli 07, 2005, 02:23:28 »

Da man aber nicht alle Farben auswendig wissen kann habe ich hier mal eine farb liste

Tabelle der Farbnamen

Farb-Namen Rot Grün Blau

Code: [Auswählen]

aliceblue F0 F8 FF
antiquewhite FA EB D7
aqua 00 FF FF
aquamarine 7F FF D4
azure F0 FF FF
beige F5 F5 DC
bisque FF E4 C4
black 00 00 00
blanchedalmond FF EB CD
blue 00 00 FF
blueviolet 8A 2B E2
brown A5 2A 2A
burlywood DE B8 87
cadetblue 5F 9E A0
chartreuse 7F FF 00
chocolate D2 69 1E
coral FF 7F 50
cornflowerblue 64 95 ED
cornsilk FF F8 DC
crimson DC 14 3C
cyan 00 FF FF
darkblue 00 00 8B
darkcyan 00 8B 8B
darkgoldenrod B8 86 0B
darkgray A9 A9 A9
darkgreen 00 64 00
darkkhaki BD B7 6B
darkmagenta 8B 00 8B
darkolivegreen 55 6B 2F
darkorange FF 8C 00
darkorchid 99 32 CC
darkred 8B 00 00
darksalmon E9 96 7A
darkseagreen 8F BC 8F
darkslateblue 48 3D 8B
darkslategray 2F 4F 4F

darkturquoise 00 CE D1
darkviolet 94 00 D3
deeppink FF 14 93
deepskyblue 00 BF FF
dimgray 69 69 69
dodgerblue 1E 90 FF
firebrick B2 22 22
floralwhite FF FA F0
forestgreen 22 8B 22
fuchsia FF 00 FF
gainsboro DC DC DC
ghostwhite F8 F8 FF
gold FF D7 00
goldenrod DA A5 20
gray 80 80 80
green 00 80 00
greenyellow AD FF 2F
honeydew F0 FF F0
hotpink FF 69 B4
indianred CD 5C 5C
indigo 4B 00 82
ivory FF FF F0
khaki F0 E6 8C
lavender E6 E6 FA
lavenderblush FF F0 F5
lawngreen 7C FC 00
lemonchiffon FF FA CD
lightblue AD D8 E6
lightcoral F0 80 80
lightcyan E0 FF FF
lightgoldenrodyellow FA FA D2
lightgreen 90 EE 90
lightgrey D3 D3 D3
lightpink FF B6 C1
lightsalmon FF A0 7A
lightseagreen 20 B2 AA
lightskyblue 87 CE FA
lightslategray 77 88 99

Farb-Namen Rot Grün Blau

Code: [Auswählen]

lightsteelblue B0 C4 DE
lightyellow FF FF E0
lime 00 FF 00
limegreen 32 CD 32
linen FA F0 E6
magenta FF 00 FF
maroon 80 00 00
mediumaquamarine 66 CD AA
mediumblue 00 00 CD
mediumorchid BA 55 D3
mediumpurple 93 70 DB
mediumseagreen 3C B3 71
mediumslateblue 7B 68 EE
mediumspringgreen 00 FA 9A
mediumturquoise 48 D1 CC
mediumvioletred C7 15 85
midnightblue 19 19 70
mintcream F5 FF FA
mistyrose FF E4 E1
moccasin FF E4 B5
navajowhite FF DE AD
navy 00 00 80
oldlace FD F5 E6
olive 80 80 00
olivedrab 6B 8E 23
orange FF A5 00
orangered FF 45 00
orchid DA 70 D6
palegoldenrod EE E8 AA
palegreen 98 FB 98
paleturquoise AF EE EE
palevioletred DB 70 93
papayawhip FF EF D5
peachpuff FF DA B9
peru CD 85 3F
pink FF C0 CB
plum DD A0 DD
powderblue B0 E0 E6

Farb-Namen Rot Grün Blau

Code: [Auswählen]

purple 80 00 80
red FF 00 00
rosybrown BC 8F 8F
royalblue 41 69 E1
saddlebrown 8B 45 13
salmon FA 80 72
sandybrown F4 A4 60
seagreen 2E 8B 57
seashell FF F5 EE
sienna A0 52 2D
silver C0 C0 C0
skyblue 87 CE EB
slateblue 6A 5A CD
slategray 70 80 90
snow FF FA FA
springgreen 00 FF 7F
steelblue 46 82 B4
tan D2 B4 8C
teal 00 80 80
thistle D8 BF D8
tomato FF 63 47
turquoise 40 E0 D0
violet EE 82 EE
wheat F5 DE B3
white FF FF FF
whitesmoke F5 F5 F5
yellow FF FF 00
yellowgreen 9A CD 32

So nun haben wir alle Farben zur auswahl

Hans · « **Antwort #4 am:** Juli 07, 2005, 02:29:38 »

Da wir jetzt alle Farben zur Auswahl haben wollen wir das ganze Farbig machen und die Schrift auch Frabig machen

hier im Beispiel fall nemmen wir wieder den gelben Hintergrund und machen die Schrift blau

Code: [Auswählen]

<html>
<body>

<h1 align="center"><span style="background-color: #FFFF00"><font color="#0000FF">Das ist ein einfaches Beispiel</font></span></h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h1 align="center">&nbsp;</h1>

</body>

</html>

Nun haben wir auch schon die Schrift farbig

Hans · « **Antwort #5 am:** Juli 07, 2005, 03:07:29 »

Jetzt wo wir einen Farbigen Hintergrund und eine Farbige Schrift haben machen wir doch gleich noch den ganzen Seiten Hintergrund Farbig
in unseren Beispiel werde ich den Hintergrund Blau machen und die Schrift rot

Code: [Auswählen]

<html>
<body bgcolor="#0000FF">

<h1 align="center"><font color="#FF0000"><span style="background-color: #FFD700">Das ist ein einfaches Beispiel</span></font></h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h1 align="center">&nbsp;</h1>

</body>

</html>

Erklärung:

durch diese eingabe <body bgcolor="#0000FF"> haben wir fest glegt das der Hintergrund der Seite Blau sein soll
Durch dies eingabe
<h1 align="center">Das ist ein einfaches Beispiel</h1>
Haben wir fest gelgt das sich die über schrift in der mitte also im Center sein soll das die schriftfabe Rot sein soll und der hintergrund der Schrift Gold faben sein soll

Jetzt Speichern wir noch das Ganze ab als einfaches Beispiel

Gesine · « **Antwort #6 am:** Juli 07, 2005, 08:41:29 »

Hallo Hans,

also ich benutze für meine Homepages immer HTML-Kit zum editieren
www.chami.com/html-kit/ (http://www.chami.com/html-kit/)
Besonders schön an dem Programm finde ich, dass man sich aus einer Liste aller Tags den richtigen heraussuchen kann, und dann in einem Fenster alle passenden Erweiterungen angeboten bekommt. Fehler in der Sytax sind damit schon fast ausgeschlossen.

Gruß
Wilfried

Hans · « **Antwort #7 am:** Juli 07, 2005, 10:11:16 »

Hi

Ja mit Html Kit ist man auch gut bedient bei PHP Desinger 2005 hat man auch die Funktionen mit Taks und Syntax Fehler suche sind schon gute Helfer

Gruß Hans

madcat · « **Antwort #8 am:** Juli 07, 2005, 10:35:49 »

Wofür sind die ganzen Tags in deinem Beispiel?
Die verstehe ich nicht. Genauso wie den unteren <H1> Tag.
gruß madcat

Hans · « **Antwort #9 am:** Juli 07, 2005, 10:58:36 »

Hi das <h1> Steht für eine Standartisierte Überschrift wofür die Größe als Standart dient

 ist für den innen Bereiches eines Blockes zuständig also wie hier in unseren Beispiel sollen ja die Wörter farbig sein auf farbigen Hintergrund
Also muss das auf jedes Wort des Textes Bezogen sein den man könnte auch jedes Wort unter schielich farbig machen

diese Bezeichnung

Code: [Auswählen]

  dient rein dafür das jedes wort die gleiche Farbe und gleichen Wert haben soll den was wir oben angeben haben

Gruß Hans

manuel · « **Antwort #10 am:** Juli 07, 2005, 15:56:14 »

Hi,
es ist sicherlich gut, wenn man sich mit html auskennt, aber die meisten Programme ersparen es uns mittlerweile die manuelle Eingabe.
Frontpage u.ä. arbeiten nach den WYSIWYG-Prinzip, also praktisch wie World: Passage markieren, Farbe und ggf Größe auswählen... fertig!!!!

Da muss man sich nicht mehr mit html Befehle quälen.

Gruß,
Manuel

Hans · « **Antwort #11 am:** Juli 07, 2005, 16:07:06 »

Hi

Das ist schon richtig. Aber ich denke es ist nie verkehrt wenn man Homepages auch nur mit Hilfe von Html Quelltexten erstellen kann
den auf manchen Systemen gibt es kein Frontpage und der gleichen, z.B bei MAC os wenn man da eine Interetpresänz haben will hat man nur die möglichkeit mit html und php zuarbeiten.

Gruß Hans

Hans · « **Antwort #12 am:** Juli 10, 2005, 15:26:55 »

Jetzt nach dem wir das vorrige gespeichert haben öffnen wir wieder ein neues Fenster

und machen das ganz gleiche wieder nur das wir diesmal nicht das ist ein einfaches Beispiel schreiben sonder wir schreiben Links als über schrift
wie sich dann als Qulltext so ansieht:

Code: [Auswählen]

<html>
<body bgcolor="#0000FF">

<h1 align="center"><font color="#FF0000"><span style="background-color: #FFD700">Links</span></font></h1>
<p>&nbsp;</p>
<h1 align="center">&nbsp;</h1>

</body></html>

Dann einfach wieder speichern

Das ganze sollte dann so aussehen

Hans · « **Antwort #13 am:** Juli 10, 2005, 15:37:41 »

Jetzt wo wir die Seite wo wir Links als überschrift stehen haben auch abgespeichert haben am besten unter dem Namen Links
öffenen wir wieder eine leere Seite und machen das Selbe wie bei Links wieder nur diesmal nehmen wir als Überschrift Kontakt
also sieht das ganze dann als Quelltext so aus

Code: [Auswählen]

<html>
<body bgcolor="#0000FF">

<h1 align="center"><font color="#FF0000"><span style="background-color: #FFD700">Kontakt</span></font></h1>

</body>

</html>

und Speichern es wieder als Kontakt ab, das ganze machen wir dann noch mal mit der Überschrift Impressum und Speichern dieses auch wieder als Impressum ab

Hans · « **Antwort #14 am:** Juli 10, 2005, 15:58:41 »

Jetzt wo wir alles gespeicher Haben öffnen wir wieder eine Neue lere Seite und Nennen diese Gästebuch die wir dann auch als Gästebuch Speichern das Ganze sollte dann als Quelltext so aussehen :

Code: [Auswählen]

<html>
<body>

<p><!--webbot bot="PurpleText"
Preview="Gästebuch -- Verwenden Sie dieses Formular, um Reaktionen von Besuchern auf Ihre Website zu sammeln. Alle eingeschickten Kommentare werden standardmäßig auf einer neuen Seite &quot;guestlog.htm&quot; gespeichert. Diese Seite wird am Ende dieses Formulars eingefügt. Wenn Sie einen anderen Dateinamen zur Aufnahme der Kommentare verwenden wollen, ändern Sie den Dateinamen im Dialogfeld &quot;Formulareigenschaften&quot; und im Seiten-URL der FrontPage-Komponente &quot;Einschließen&quot; unter dem Formular."
-->
</p>
<hr align="center">
<p>Ihre Meinung zu unserer Website ist uns wichtig. Bitte hinterlassen Sie Ihre
Kommentare in diesem Gästebuch, damit wir Ihre Meinung anderen Gästen
mitteilen können.</p>
<form action="--WEBBOT-SELF--" method="POST" onSubmit="">
  <!--webbot bot="SaveResults" startspan U-File="guestlog.htm"
  S-Format="HTML/DL" S-Label-Fields="TRUE"
  S-Builtin-Fields="Date Time REMOTE_USER" S-Form-Fields --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot
  bot="SaveResults" endspan -->
  <h2><strong>Tragen Sie Ihre Kommentare bitte hier ein:</strong></h2>
  <p><textarea name="Kommentare" rows="8" cols="52"></textarea></p>
  <p><input type="submit" value="Kommentare abschicken"> <input type="reset" value="Formular zurücksetzen"><br>
  <br>
  <em>Nachdem Sie Ihre Anmerkungen eingeschickt haben, aktualisieren Sie diese
  Seite in Ihrem Browser, damit die von Ihnen vorgenommenen Eintragungen
  angezeigt werden.</em></p>
</form>
<!--webbot bot="Include" TAG="BODY" U-INCLUDE="guestlog.htm" -->

<hr align="center">
<h5>Platz für Angaben zum Verfasser.<br>
Copyright © 2005 Computertechnik- Schmidt. Alle Rechte vorbehalten.<br>
Stand: <!--webbot bot="TimeStamp" S-TYPE="Edited"
S-FORMAT="%d. %B %Y %H:%M:%S %Z" -->
&nbsp;</h5>

</body>

</html>

Hans · « **Antwort #15 am:** Juli 13, 2005, 15:32:30 »

So jetzt wo wir alle seiten erstellt und gespeichert haben machen wir uns ans Gestallten es soll ja auch nach was aussehen und nicht wie gewollt aber nicht gekonnt.

Ich würde sagen wir beginnen gleich wieder mit der Seite das ist ein einfaches Beisspiel

also öffnen wir die Seite und fangen an ich denke den Banner den wir jetzt haben sieht nicht sonderlich gut aus also machen wir einfach einen anderen , ich würde so einen vor schlagen hier mal der Quelltext

Code: [Auswählen]

<html>
<body bgcolor="#000080">


<div align="center">
  <center>
  <table border="1" width="44%" height="56" bgcolor="#00FFFF">
    <tr>
      <td width="100%" height="50"><span style="background-color: #FFD700"><font face="Arial Black" color="#FF0000" size="6">Das
ist ein einfaches Beispiel</font></span></td>
    </tr>
  </table>
  </center>
</div>


<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>


</body>

</html>

Das ganze sieht dann so aus:

Hans · « **Antwort #16 am:** Juli 13, 2005, 15:50:48 »

Nun wo wir ein etwas schöneres Banner Haben legen wir den Randbereich fest und erstellen eine Naviations liste

was dann als Quelltext so aussehen könnte

Code: [Auswählen]

<html>
<body bgcolor="#000080">


<div align="center">
  <center>
  <table border="1" width="50%" height="56" bgcolor="#00FFFF">
    <tr>
      <td width="100%" height="50">
        <p align="center"><span style="background-color: #FFD700"><font face="Arial Black" color="#FF0000" size="6">Das
ist ein einfaches Beispiel</font></span></p>
      </td>
    </tr>
  </table>
  </center>
</div>


<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>


<br>
<p align="left">&nbsp;</p>
<div align="left">
  <table border="1" width="9%" bgcolor="#5CDCE2">
    <tr>
      <td width="100%">
        <p align="center"><b><font color="#FF0000" size="3"><a href="file:///C:/Dokumente%20und%20Einstellungen/Hans-Peter%20Schmidt/Eigene%20Dateien/Eigene%20Webs/Homepage%20Sylvia/home.htm">HOME</a></font></b></td>
    </tr>
  </table>
</div>
<table border="1" width="9%" bgcolor="#5CDCE2">
  <tr>
    <td width="100%">
      <p align="center"><b><font color="#FF0000" size="3"><a href="file:///C:/Dokumente%20und%20Einstellungen/Hans-Peter%20Schmidt/Eigene%20Dateien/Eigene%20Webs/Homepage%20Sylvia/kontakt.htm">KONTAKT</a></font></b></td>
  </tr>
</table>
<table border="1" width="9%" bgcolor="#5CDCE2">
  <tr>
    <td width="100%">
      <p align="center"><b><font color="#FF0000" size="3"><a href="file:///C:/Dokumente%20und%20Einstellungen/Hans-Peter%20Schmidt/Eigene%20Dateien/Eigene%20Webs/Homepage%20Sylvia/impressum.htm">IMPRESSUM</a></font></b></td>
  </tr>
</table>
<table border="1" width="9%" bgcolor="#5CDCE2">
  <tr>
    <td width="100%">
      <p align="center"><b><font color="#FF0000" size="3"><a href="file:///C:/Dokumente%20und%20Einstellungen/Hans-Peter%20Schmidt/Eigene%20Dateien/Eigene%20Webs/Homepage%20Sylvia/links.htm">LINKS</a></font></b></td>
  </tr>
</table>
<table border="1" width="9%" bgcolor="#5CDCE2">
  <tr>
    <td width="100%">
      <p align="center"><b><font color="#FF0000" size="3"><a href="file:///C:/Dokumente%20und%20Einstellungen/Hans-Peter%20Schmidt/Eigene%20Dateien/Eigene%20Webs/Homepage%20Sylvia/gästebuch.htm">GÄSTEBUCH</a></font></b></td>
  </tr>
</table>

</body>

</html>

Wie ihr hier schon gut sehen könnt habe ich auch schon alles verlinkt

das ganze sieht dann so aus:

Gesine · « **Antwort #17 am:** Juli 13, 2005, 16:30:24 »

Hallo Hans,

entschuldige, wenn ich Dich berichtige, aber in dem Listing ist mindestens ein Kinken, der dazu führen könnte, dass die Seite nicht so wie Du es möchtest auf allen Browsern dargestellt wird.
Du schliesst die Seite nämlich zwei mal ab. Einmal in der Mitte mit </body> und </html> und ganz am Ende noch einmal. Das in der Mitte solltest du ersatzlos streichen.

Ausserdem leuchtet mir nicht ganz ein, weshalb Du bei den ganzen Leerzeilen
 
 
 
 
 
 
 
die letzten drei mit einmal links ausgerichtet sind, obwohl man sie doch eh nicht sieht.

Damit soll meine Kritik heute ersteinmal genügen, obwohl da noch so einiges ist, was meiner Meinung nach überflüssig, und damit in einem "Grundlehrgang" verfehlt ist.

Gruß
Wilfried

Hans · « **Antwort #18 am:** Juli 13, 2005, 17:01:35 »

oh ja danke ist mir wohl beim eintippen der Fehler unterlaufen danke

Gruß Hans

gramanu · « **Antwort #19 am:** August 09, 2005, 22:18:11 »

Hallo Hans,

ich hoffe du führst das Thema noch zu Ende,es ist eine gute Idee von dir.
Die Verbesserungsvorschläge und Berichitigungen kannst du ja so mit übernehmen,das find ich gar nicht
schlimm.
Wenn man sich in ein Thema einarbeitet lernt man so am besten.Also ich meine es hat sein Ziel überhaupt nicht
verfehlt,dann ist es halt ein Gemeinschaftsprojekt.

gruß,gramanu

Hans · « **Antwort #20 am:** August 10, 2005, 17:17:04 »

Hi ja ich werde das Thema noch weiter machen nur bin ich zur Zeit einfach total zeitlich ausgelastet so bald wieder ein bisschen mehr Zeit zurverfügung steht führe ich das Thema weiter und noch mal danke für das Lob

Gruß Hans

gramanu · « **Antwort #21 am:** August 10, 2005, 17:24:36 »

Schönes Ding!!(Wir sind doch alle keine vom Himmel heruntergefallene "Superkracks")

Und konstruktive Kritik ist doch was geniales!!

gruß,gramanu

madcat · « **Antwort #22 am:** November 10, 2005, 11:51:48 »

Hallöchen alle miteinander,
ich weiß ich habe mich lange nicht hier blicken lassen bzw. nicht in der regelmäßigkeit wie man es von mir gewohnt war. Das liegt einfach daran, daß ich ersteinmal lernen musste Familie, Beruf, eigene kleine Firma und die Lernerei für Weber unter einen Hut zu kriegen ohne dabei meine Freizeit und Hobbys auf Null zu reduzieren. Nachdem ich das jetzt eine Zeit lang geübt habe hoffe ich nun mal wieder öfter hier am Ball zu sein. Apropos Lernerei. Ich habe micht nicht darauf beschränkt was für Weber zu tun, sondern habe mich in der letzten Zeit intensiv mit der Programmierung von Homepages beschäftigt.
Lange Rede kurzer Sinn: Ich wußte ja das Hans hier mit dem Thema angefangen hat und habe nun gemerkt, das die Geschichte eingeschlafen zu sein scheint. Deshalb würde ich ganz gerne da weitermachen wo Hans aufgehört hat und damit auch für mich selbst eine Wiederholung des Gelernten haben. (Ich habe gemerkt, daß ich mir am besten was merken kann, wenn ich Versuche es jemand anderem zu erklären).
@ Hans
Ich würde mich freuen wenn du auch wieder einsteigst oder zumindest dann und wann etwas dazu steuerst. Kontaktiere mich gerne per Mail, damit wir nichts doppelt erklären.
@ alle anderen
Ich sehe dies hier nicht als Soloveranstaltung. Jeder, der hier etwas beitragen kann ist dazu aufgerufen es auch zu tun. Wenn ich irgendwo Fehler mache möchte ich bitte korrigiert werden. Ich will ja schließlich auch was lernen.
Was ich besonders toll fände. Wenn sich jemand des Themas Javascript annehmen würde. Da kenn ich leider nur die gebräuchlichsten Event-Handler und das wars dann auch schon. Von PHP mal ganz zu schweigen.

Ich selbst werde mich auf HTML und CSS (als kleinen Vorgucker was mit CSS alles Möglich ist empfehle ich: www.csszengarden.com (http://www.csszengarden.com) beschränken, aber dies sind beides auch schon verdammt umfanreiche Themen.

So das wars es jetzt an Vorankündigung. Die erste Lektion folgt in Kürze.
gruß madcat

madcat · « **Antwort #23 am:** November 18, 2005, 16:05:27 »

Hallöchen,
so hier nun der erste Teil des Tutorials zum Thema HTML/CSS.

Zuerst will ich mal die Grundlagen kurz zeigen und erklären.

1. Jedes HTML Dokument beginnt mit der Document-Type Declaration. In dieser wird deklariert mit welcher Version von HTML wir es im folgenden zu tun haben.
Die Einzelheiten und Unterscheidungen kommen später.

2. Das Grundelement einer jedem Dokument ist das html-TAG. Dies ist das sog. Wurzelelement und zeigt an: ab hier kommt HTML-Code. Das Dokument endet mit dem entsprechenden End-TAG.

3. Zwischen den Html-TAGS ist das Dokument in einen Header-Teil und einen Body-Teil unterteil.

4. Im Header werden u.a. der Titel des Dokuments festgelegt. sowie Metaangaben gemacht, die dafür sorgen, daß eine Suchmaschine die Seite findet . Im einzelen dazu später mehr.

5. Im Body geschieht dann die eigentliche Gestaltung der Webseite.

Code: [Auswählen]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/transitional.dtd">
<html>
   <head>
     <titel>Titel der Seite</titel>
     <meta name="autor" o.ä.> 
   </head>
   <body>
   </body> 
</html>

So sieht dann das Grundgerüst eines "normalen" Html-Dokuments aus.
Dieses Grundgerüst werde ich dann demnächst mit ein bischen Leben füllen und auch verschiedene Layoutmöglichkeiten zeigen.
gruß madcat

madcat · « **Antwort #24 am:** November 29, 2005, 00:04:06 »

Hallöchen,

so nun soll es wieder ein wenig weitergehen mit dem HTML-Tutorial. Also ich habe mir in den letzten Tagen einige Gedanken darüber gemacht, wie ich das Pferd aufzäumen soll ohne das bei mir oder euch da Langeweile aufkommt. Ich will nicht nur ein paar Tags erklären und mit kurzen Beispielen die Funktion zeigen, sondern ich habe mir überlegt ein kleines Projekt zu starten und dieses auch Online gehen zu lassen. Da ich ein echter Fan von schottischen Single-Malt Whisky bin (obwohl ich es noch nicht geschafft habe dieses Land mal zu bereisen), habe ich mir das als Thema ausgesucht und hab auch gleich eine Domain dafür angemeldet. Unter www.stephans-kleine-whisky-seite.de (http://www.stephans-kleine-whisky-seite.de) wird hoffentlich bald eine nette private Homepage zum Thema Whisky stehen.
Somit stellt sich die Frage was man mit so einer Seite erreichen will (Bei den meisten von euch wird es wahrscheinlich die eigene Fimenseite sein oder auch irgendein interessantes Hobby). Auf meiner Seite will ich den Leuten die Geschichte des Whiskys, die Herstellung, die Whiskyregionen und meine eigene sehr bescheidene Sammlung vorstellen.
Um mir darüber klar zu werden wie das ganze aufbereitet werden soll habe ich mir grobe Bleistiftskizzen gemacht (wegen meiner äußerst bescheidenen Zeichenfähigkeiten erspare ich euch Details) und mir dann ein Schema erstellt wie das Menü und damit die Navigation aufgebaut sein soll. Dabei habe ich fast völlig auf optische bzw. designtechnische Elemente verzichtet sondern bin rein schematisch vorgegangen.
Vorneweg steht natürlich die Home-Seite, die dafür sorgen soll, daß sich der Besucher für den weiteren Inhalt interessiert und auf der das Menü zu finden ist.
Es wird folgende Menüpunkte geben (kann sich im laufe der Zeit vielleicht noch ändern)

1. Geschichte (keine Unterpunkte)
2. Hestellung (3 Unterpunkte)
a.   Herstellungsablauf
b.   Hersteller
c.   Abfüller
3. Regionen (6 Unterpunkte)
a.   Region 1
b.   Region 2
c.   Usw
4. Meine Tastingnotes (2 Unterpunkte)
a.   Tasting-Besuche
b.   Meine kleine Sammlung
5. Links
6. Gästebuch

Ich bin immer froh wenn ich auf einer Seite lande wo ich von jedem Punkt, den ich erreicht habe auch an jeden anderen der Seite komme, deshalb wird dieses Menü auf jedem Dokment sichtbar sein und man wird sich nicht in unübersichtlichen Unterpunkten verstricken. Natürlich werde ich in nicht sofort alle Texte fertig geschrieben haben, deshalb werde ich erstmal mit den üblichen Blindtexten „Lorep ipsum….“ Arbeiten, was ja an der Programmierung nichts ändert. Ich hoffe, das ich möglichst viele HTML- Dinge daran zeigen kann. Was auf alle Fälle zu sehen sein wird ist die Textgestaltung (Überschriften, Absätze, Zitate, usw.), Farbgebung, Listen, Tabellen, Formulare, Verweise und Graphiken.

So nun wißt ihr was ich vor habe. Ich bitte um Verständnis wenn es immer mal ein wenig dauert bis der nächste Teil kommt, aber ich will ja auch was Vernünftiges auf die Beine stellen, damit wir alle was davon haben und daran lernen können. Beim nächsten Mal geht’s dann ans Eingemachte.
gruß madcat

Neuigkeiten:

Autor Thema: Wie erstelle ich eine Homepage unter Html (1) (Gelesen 16600 mal)