Die Community PC-Techniker Portal IoT

FAQs und Tutorials => HTML / PHP / CSS => Thema gestartet von: Hans am Juli 06, 2005, 20:11:28

Titel: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: 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> </p> <p> </p> <h1>Das ist ein ganz einfaches Beispiel</h1> <p> </p> </body> </html>siehe Bild so sieht das ganze dann im Browser aus
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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> </p> <p> </p> <p> </p> <p> </p> <p> </p> <h1 align="center"> </h1> </body> </html>
Jetzt haben wir es Zentiriert in der Mitte
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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> </p> <p> </p> <p> </p> <p> </p> <p> </p> <h1 align="center"> </h1> </body> </html>
Jetzt haben wir es mit einen Farbigen hintergrund
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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> </p> <p> </p> <p> </p> <p> </p> <p> </p> <h1 align="center"> </h1> </body> </html>
Nun haben wir auch schon die Schrift farbig
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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> </p> <p> </p> <p> </p> <p> </p> <p> </p> <h1 align="center"> </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"><font color="#FF0000"><span style="background-color: #FFD700">Das ist ein einfaches Beispiel</span></font></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
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Gesine 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
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: madcat am Juli 07, 2005, 10:35:49: Wofür sind die ganzen <P> Tags in deinem Beispiel?
Die verstehe ich nicht. Genauso wie den unteren <H1> Tag.
gruß madcat
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans am Juli 07, 2005, 10:58:36: Hi das <h1> Steht für eine Standartisierte Überschrift wofür die Größe als Standart dient

<p> 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]
<p> </p> dient rein dafür das jedes wort die gleiche Farbe und gleichen Wert haben soll den was wir oben angeben haben

Gruß Hans
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: manuel 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
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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> </p> <h1 align="center"> </h1> </body></html>Dann einfach wieder speichern

Das ganze sollte dann so aussehen
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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> </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=""> <input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"> <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>  <hr align="center"> <h5>Platz für Angaben zum Verfasser.<br> Copyright © 2005 Computertechnik- Schmidt. Alle Rechte vorbehalten.<br> Stand:   </h5> </body> </html>
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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> </p> <p> </p> <p> </p> <p> </p> <p align="left"> </p> <p align="left"> </p> <p align="left"> </p> <p align="left"> </p> </body> </html>
Das ganze sieht dann so aus:
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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> </p> <p> </p> <p> </p> <p> </p> <p align="left"> </p> <p align="left"> </p> <p align="left"> </p> <br> <p align="left"> </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:
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Gesine 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
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
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
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans am Juli 13, 2005, 17:01:35: oh ja danke ist mir wohl beim eintippen der Fehler unterlaufen danke

Gruß Hans
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: gramanu 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
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Hans 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
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: gramanu 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
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: madcat 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
Titel: Grundlagen
Beitrag von: madcat 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
Titel: Teil 2: Vorbereitung und Konzeption
Beitrag von: madcat 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
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Gesine am November 29, 2005, 08:10:26: Hallo Madcat,

das Konzept ist wirklich Klasse (Und das nicht nur weil auch ich Whisky mag :lol: )

Eine Anmerkung aber noch. Wenn die Seite so wird, wie Du sie Dir vorstellst, dann kannst Du auch stolz darauf sein. Warum setzt Du dann nicht auch noch einen Menü-punkt "Über mich" ?
Für Firmenseiten wäre das dann das Impressum, nur da ist es vorgeschrieben.

Viel Spaß
noch beim Gestallten
Wilfried
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: madcat am Dezember 19, 2005, 19:37:20: Hallöchen,
so nun soll es losgehen und ich werde mich heute mit einigen grundlegenden Tags beschäftigen. Ich will nun die Startseite programmieren. Darauf soll natürlich ein Titel zu finden sein, das Menü und ein einleitender Text.
Den Titel will ich mit einer Graphik gestalten, da diese noch nicht fertig ist werde ich diese erstmal außen vor lassen.
Das Menu mit allen Untermenüs werde ich als Liste erstellen. Dazu benutze ich eine ungeordnete Liste deren Tag ist <UL> </UL>. Natürlich gibt es auch eine geordnete Liste. Der Tag dafür ist <OL></OL>. Der Unterschied zwischen beiden Formen ist, daß die geordnete Liste automatisch durch numeriert wird während die ungeordnete nur Listenpunkte vorangestellt bekommt. Die Form der Numerierung bzw. der Stil (römisch Zahlen, Dezimalzahlen, Großbuchstaben, usw.) kann selbst definiert werden, genauso wie das aussehen der Listenpunkte (Kreis, Quadrat, usw.). Jeder Listenpunkt wird durch das <LI></LI> Tag gekennzeichnet. Das <LI> Tag kann wiederum Listen, Texte, Bilder usw. beinhalten. Die Möglichkeit Listen zu verschachteln werden wir gleich mal nutzen. Es gibt noch eine weitere Listenart, die sich Definitionsliste nennt, dazu kommen wir später wenn ich sie benötige.
Mein Menü soll nun auf weitere Dokumente in diesem Projekt verweisen. Dafür benötigen wir das <A> Tag, welches als Anker Tag bezeichnet wird. Um auf andere Dokumente zu Verweisen brauche ich noch das href-Attribut (hyper-reference). Der Anker zum Dokument Geschichte in dieser Seite müßte dann so aussehen :

<a href=“geschichte.htm“>Geschichte</a>

Die möglichen Attribute eines Tags werden immer innerhalb des Starttags gesetzt. Für das href –Attribut wir immer der vollständige Pfad zum referenzierten Dokument benötigt. Um z.B. auf die PC.Techniker Seite zu referenzieren würde man folgendes schreiben:

<a href=”http://www.pc-techniker.org“>PC-Techniker Portal</a>

Eine weitere nette Möglichkeit mit Ankern zu arbeiten ist die Navigation innerhalb langer Texte. Dazu gibt man dem Anker ein name-Attribut und verweist an gewünschter Stelle auf den Namen.

<h1><a name=“Anfang“>Überschrift</a></h1>

langer text

<p><a href=“#Anfang“>zum Anfang</a></p>

So nun habe ich auch noch schnell die beiden letzten neuen Tags für heute eingeführt. Das Tag <p></p> wird für einfache Textabsätze gebraucht. Dieses Tag ist ausschließlich für Text gedacht. Innerhalb dieses Tags dürfen keine sog. blockerzeugenden Tags wie Überschriften, Listen usw. stehen.
Apropos Überschriften; Dazu verwendet man die Tags <h1></h1> bis <h6></h6>. Man kann also 6 verschieden Überschriften deklarieren. Diese haben schon Textgrößen und Stile vorgegeben und sind hierarchisch zu verstehen h1 ist immer die Überschrift mit der höchsten Ordnungszahl. H6 immer die niedrigste.
Ups, ein Tag hätte ich fast vergessen. Das <div></div> Tag. Dies bezeichnet einen allgemeines Blockelement ohne nähere Inhaltsfestlegung. Jedes andere Tag kann darin enthalten sein. Dieses Tag wird hauptsächlich dazu verwendet Bereich einzuteilen, die man dann separat mit CSS gestalten kann.
Alle aufgeführten Tags kann man natürlich schön Gestalten, mit Farben versehen usw. Doch dazu möchte ich CSS verwenden. Also werde ich mich nun erstmal auf die funktionellen Dinge beschränken und später das Styling bearbeiten. Der Weg ist also noch lang und steinig.

So sieht nun der Code aus:
Code: [Auswählen]
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Stephans Whiskey-Seite </title> </head> <body> <div> <ul> <li><a href="Whiskyhome.htm">Home </a> <li><a href="geschichte.htm">Geschichte </a> <li><a href="herstellung.htm"> Herstellung</a> <ul> <li><a href="herablauf.htm">Herstellungsablauf </a> <li><a href="hersteller.htm">Hersteller </a> <li><a href="abfueller.htm">Abfüller </a> </ul> <li><a href="regionen.htm">Regionen </a> <ul> <li><a href="high.htm">Highlands </a> <li><a href="spey.htm">Speyside </a> <li><a href="low.htm">Lowlands </a> <li><a href="islay.htm">Islay </a> <li><a href="campbell.htm">Campbelltown </a> </ul> <li><a href="mtasti.htm">Meine Tastings </a> <ul> <li><a href="besuche.htm">Tasting-Besuche </a> <li><a href="sammlung.htm">Meine kleine Sammlung </a> </ul> <li><a href="links.htm">Links </a> <li><a href="gast.htm">Gästebuch </a> </ul> </div> <div > <h1>Wilkommen auf meiner Whiskey-Seite </h1> <p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> </body> </html>
Wie die Seite nun aussieht folgt mit dem nächsten Kapitel

gruß madcat
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: saschaz1977 am Juni 04, 2006, 18:29:05: Ich würde auf alle Fälle ein Impressum erstellen. Das wird von vielen Juristen empfohlen.
Titel: Re: Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Andreas am Juni 04, 2006, 20:08:36: Zitat von: saschaz1977 am Juni 04, 2006, 18:29:05
Ich würde auf alle Fälle ein Impressum erstellen. Das wird von vielen Juristen empfohlen.

Impressum ist nur bei gewerblichen Seiten pflicht. Bei privaten nicht.
Was der Hype soll ist mir eh unklar ... Jeder kann über eine einfache WHOIS beim zuständigen Registrar alle Daten einsehen.
Titel: Antw:Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: bagheerah am März 20, 2011, 10:14:44: Da zu diesem Thema bereits sehr viel geschrieben wurde, möchte ich hier nur folgendes beisteuern :

www.selfhtml.org/

Ist ein freier Online-Kursus für Einsteiger, für alle, die mit Euren schon sehr spezifischen Antworten überfordert sind
(mich inklusive - sollte mich mal näher damit beschäftigen *fg*)

lg Dave
Titel: Antw:Wie erstelle ich eine Homepage unter Html (1)
Beitrag von: Ulmens am September 01, 2011, 19:14:23: ich habe mit Netscape 7.1 erstellt mein home page.

ach so und dann kann mit verschidenen ftp programmen das alles hochladen
:mrgreen:

Edit Susanne: Ich habe deine beiden Beiträge zu einen Beitrag zusammengefasst.
Man kann übrigens seinen eigenen Beitrag auch später editieren.