Website erstellen

[wanne]

Bei wysiwyg wie mit BlueGriffon Gestalter sieht man sofort was einem passt. LibreOffice-Writer-HTML und ApacheOpenOffice-Writer-HTML liefern übrigens auch sehr gute Resultate

Wenn du dein Zeug ausschließlich an deinem Bildschirm anguckst kannst du's auch gleich als PDF abspeichern. Auf anderen Geräten ist das wysiwyg generierte Zeug erfahrungsgemäß meist weitestgehend unlesbar.
(Muss allerdings sagen, dass Kompzer so das letze war wo ich Seiten gesehen habe die damit erstellt wurden. Kann sein, dass sich da mittlerweile einiges verbessert hat.)

[Revod]

Bei wysiwyg wie mit BlueGriffon Gestalter sieht man sofort was einem passt. LibreOffice-Writer-HTML und ApacheOpenOffice-Writer-HTML liefern übrigens auch sehr gute Resultate

Wenn du dein Zeug ausschließlich an deinem Bildschirm anguckst kannst du's auch gleich als PDF abspeichern. Auf anderen Geräten ist das wysiwyg generierte Zeug erfahrungsgemäß meist weitestgehend unlesbar.
(Muss allerdings sagen, dass Kompzer so das letze war wo ich Seiten gesehen habe die damit erstellt wurden. Kann sein, dass sich da mittlerweile einiges verbessert hat.)

Ich würde vorschlagen,versetze Dich als "Anfänger" und bastle eine Web mit drei, vier Seiten einmal mit BlueGriffon und einmal die selbe mit LibreOffice-Writer-HTML und mit den verschiedene Browser angucken und von Bekannten aus ihren Rechner... ich denke dann bekommst eine realistische Antwort...

Kompozer und Co. von damals waren wirklich unbrauchbar (sogar Frontpage), hatten noch etliche Bugs und Dank diese alte fehlerhafte Konzepte haben für die Generierer von heute viel dazu beigetragen.

Wenn Du Dir nach Generierung nur in wysiwyg bearbeitet, danach den Quelltext anguckst erkennst Du, dass es nicht nur aus mein Monitor toll aussieht (ganz klar, Schriften Regeln müssen eingehalten werden, arial, sans, verdana)

[Revod]

Schon wieder ich....

Ein interessante Anleitung und mit Beispiele zum herunterladen um sehr leicht mit einen HTML / PHP Editor zu erlernen, am besten mit "bluefish" die Dateien öffnen. Kleine php Code in Kombination mit HTML geht auch, muss nicht immer reines PHP sein (ich denkeda wird Patsche auch keine Probleme damit haben).

http://webbausteine.de/blog/php/seiten_ ... tellen.php

Wie kann es nur sein, habe auch eine sehr günstige "shareware" Version gefunden, die für Webgestaltung Neulinge nützlich sein könnte, "quickandeasywebbuilder" Linux Version.

(Amaya startet mit PCLinuxOS nicht mehr, wollte wieder mal die Soft testen).

Edit:

Nun habe ich für eine lange Zeit wieder genug vom www Webside builder Suche und Tests...

[xT440s]

Ich würde an deiner Stelle Initializr verwenden.

Initializr ist kein CMS, sondern einfach nur ein paar Dateien, mit denen man auf Knopfdruck eine standardkonforme Webseite erstellen kann. Man kann sich auf der Homepage selektiv zusammenstellen, was man braucht:

- HTML5boilerplate (auch eine sehr wichtige Seite um moderne Webseites zu erstellen. Beinhaltet zahlreiche sinnvolle Hacks von Profis, sollte jeder Webdesigner mal gesehen haben)
- Das schon erwähnte Twitter Bootstrap
- jQuery
- Modernizr

Meiner Erfahrung nach ist das die beste Grundlage für jede selbstgestaltete Webseite ohne CMS

Wenn du es total simpel haben möchtest, nimm nur HTML5boilerplate. Ich denke aber Initializr zahlt sich aus.

[novalix]

- Das schon erwähnte Twitter Bootstrap

OK, ich gebe mich geschlagen.
Will ja nicht gegen das Gesetz aufbegehren.

[wanne]

Nja, Bootstrap ist noch nichit vorgeschrieben. (Und btw. ist cross-domain CSS IMHO schlechter Stiel.) Aber align ist aus HTML5 halt tatsächlich rausgeflogen:
https://www.w3.org/TR/html-markup/td.html
https://wiki.whatwg.org/wiki/Presentati ... attributes
Das gliche gilt auch überall anders (p,div,hn...).

[Revod]

Ein Freund von "bootstrag" und ähnliches werde ich wohl nicht werden, definitiv nicht.

Bin mit meinen altes Notebook, 512 RAM und 1.GHz Singel Core unterwegs. Die letzten 2 Tage war ich mit "etwas" stärkere Rechner unterwegs.... für Downloads, entpacken, testen usw. muss es blitzartig gehen....

Habe eben ein paar bootstrap Seiten Beispiele, Theme usw. besucht. Das CPU ist ständig auf 90% Last oben, die 512 RAM sind mit den jqueris, json usw. auch rasch ausgenutzt.

Was mir persönlich nicht passt sind die Querverbindungen im Header, wie "bootstrapcdn, httpdoppelpunkt // google.com/xyordner/jS//jquery-minim.js" und noch 2 bis 3 solcher Header Verlinkungen, auch für gewisse css Dateien.

Nöö kein bootstrap und alternativen..... man kann definitiv für vieles auf Javas und JavaScripte verzichten, Linkmenu sind auch mit css3 machbar sogar für Photos und somit kann der HTML Code sehr schlank gehalten werden.

Das bedeutet

- keine google-statisk durch jquery Querverbindungen im verlinktes Header der Seiten

- Meine Webseiten Dateien kann ich "10x " kleiner im Code gestalten

- dadurch sehr schnell im Browser aufgebaut

- Keine "aufgezwungene nur das kannst / darfst du nutzen" Standards Theme (hatten wir schon)

- Mit BlueGriffon und Bluefish weiss ich genau was meine eigene "von Hand" erstellte Dateien bewirken, nämlich für den Besucher seine Info zu liefern ohne ca. 4 MB Kram, Querverbindungen im Hintergrund zu laden.

- und noch ein paar Kleinigkeiten....

Nja, Bootstrap ist noch nichit vorgeschrieben. (Und btw. ist cross-domain CSS IMHO schlechter Stiel.) Aber align ist aus HTML5 halt tatsächlich rausgeflogen:
https://www.w3.org/TR/html-markup/td.html
https://wiki.whatwg.org/wiki/Presentati ... attributes
Das gliche gilt auch überall anders (p,div,hn...).

Ausnahmsweise sind w3 Konsortium "Päpste" und ich einer Meinung....

[AndreK]

Nja, Bootstrap ist noch nichit vorgeschrieben.

Bruuuuuaäh!!

- und noch ein paar Kleinigkeiten....

Hier noch ein paar Kleinigkeiten die eigentlich jeder df Leser weiss und seriöse Webseitenbauer sowieso wissen, die aber hier noch nicht erwähnt wurden - was mich erstaunt:

1. Jede moderne Webseite benötigt Javascript Bestandteile. Javascript ist "das nächste große Ding" wie es ein df Forum user einst schrieb.
2. Wenn die Seiten dann endlich stehen, sollten die Inhalte ausschliesslich über https dem staunenden Publikum dargeboten werden. http ist unbedingt zu meiden.

[Patsche]

Sooo, erstmal vielen Dank für die rege Beteiligung an meiner Frage. Ich habe mir jetzt verschiedene Programme angeguckt und muss sagen, dass es garnicht so einfach ist eine ansprechende Seite selbst zu schreiben. Auch mit WYSIWYG-Editoren ist es ziemlich schwer seine genaue Idee genau umzusetzten. Das ist jedenfalls meine Meinung. Fertige Joomla oder Wordpress Themes, die man dann anpasst, sind deutlich einfacher und schneller zu handeln. Ich habe mal eine Beispielseite gebastelt:
-> http://patsche2014.cwsurf.de/
Ich denke meine Fähigkeiten sind derzeit zu begrenzt, als das ich solch eine Seite selbst schreiben könnte. Vielleicht kann mir noch jemand beschreiben, wie ich beispielsweise eine CSS-Klasse anlege. Muss die direkt im html-code definiert werden, oder werden soclhe Stylesheets in einer extra Datei gehalten? Ich hätte es hier beispielsweise gerne, dass die Schaltfläche in die Vertiefung geht, wenn man ihn drückt. Ein bisschen stehe ich da auf dem Schlauch . Hat jemand schonmal mit Wordpress gearbeitet? Und noch eine Frage. Kann jemand eine Empfehlunf für Webspace geben? Am liebsten auch SSL verschlüsselten mit Zertifikat. Vielen Dank an euch.

[Revod]

Classen sind Style Variablen und Du solltest den Sinn davon verstehen... hier kannst Du damit üben und lernen... weil ansonsten immer wieder die gleiche Frage auftaucht, vlt etwas mehr googeln mit "css class" - "css selber schreiben" usw... es gibt viele gute Lekturen im Netz.

http://www.html-seminar.de/class_und_id.htm

http://css3clickchart.com/#box-sizing

....

- und noch ein paar Kleinigkeiten....

Hier noch ein paar Kleinigkeiten die eigentlich jeder df Leser weiss und seriöse Webseitenbauer sowieso wissen, die aber hier noch nicht erwähnt wurden - was mich erstaunt:

1. Jede moderne Webseite benötigt Javascript Bestandteile. Javascript ist "das nächste große Ding" wie es ein df Forum user einst schrieb.
2. Wenn die Seiten dann endlich stehen, sollten die Inhalte ausschliesslich über https dem staunenden Publikum dargeboten werden. http ist unbedingt zu meiden.

Wenn mir jemand objektiv, logisch (keine Subjektive Ansichtspunkte) erklären kann warum dies- und das "modern" ist und überhaupt was "modern" ist, dann kann ich mich vlt. damit anfreunden.

Was ich bisher von "bootstrap" gesehen habe ist praktisch alles mit css3 machbar, inkl. der schönen Button Grafiken bei der "onmouseover, in css3 ist das hoover" Druckeffekte vorzutäuschen. Bilder Gallery können auch mit css3 gelöst werden, einzig dann halt keine automatische Slideshow - wie schööööön....

Mit unerwähnte ....ein paar Kleinigkeiten ist meine persönliche Meinung beinhaltend, die aber eben subjektiv ist und daher niemandem interessiert.

Was modern ist spüre ich ab und an wenn ich was im Netz suche mit meinen "schwachbrüstiges" altes Notebook. Es kann doch nicht sein, dass eine einzige "moderne" Seite ohne grosse Werbeinhalte und Bilder die CPU mehr belasten als Gimp in Arbeit, laufendes Audaciaous, und ein offenes Bluefish Programm mit einer Webseite zu editieren und noch zwei offene Thunar Fenster und die RAM auch mehr belegt werden als die hier offene Anwendungen?

Wie sehen denn moderne Buchstaben aus.... muss man dafür nochmals zur Schule um dessen Bedeutung lesen zu können łĸjµ↓ŧ← ħŋđ¶ð€łþµ”ŋ@# ?

Ich finde es wirklich schade aus sogenannte alte, gute Sachen nicht erkennen zu können und gar diese ausser Bord der Gemeinschaft geworfen werden und nicht mehr produziert werden, Verkennung der Dinge nenne ich das, sage das dem jenigen der in ein Forum sagt / bestimmt was modern sei. Für mich hat einen faden Beigeschmack, irgend wie habe ich das Gefühl dass wenn man nicht mehr weiss was man in einer Entwicklung verbessern irgend was mit "modernes Ausdruck" durchsetzen will. Ich finde, übrigens die ganze Style der "modernen" Webseite echt unschön und wirklich unpraktisch. Ich klickte die paar Tage als ich mich mit dem ganzen "bootstraps" Zeug nach ca. 2 Min. vergebliche Suche auf , und wo ghts weiter?... einfach weg, weil 1. bin nicht blind und 2. einen Kurs um auf einer Webseite rum zu klicken besuchen will ich jetzt nun wirklich nicht noch tun... zu dem wäre dieser Kurs in ca. 6 Jahre überholt, weil dann plötzlich was anderes "modern" ist. Die Kleidermode ist übrigens ein Beispiel direkt vor der Nase, immer wieder von neuem Kleiderstyle aus einen irgend eines Jahr und die Medien setzen / schreiben dann einem vor was Mann / Frau zu tragen hat um blablabla inn zu sein.... Wenn wegen der "Moderne" sich den Ar.... abfrieren will, oder das "Spiessrutenlauf" mit machen will usw. von mir aus, soll er / sie, doch bitte, definiert und wägt stets ab zwischen Vorteile und Nachteile...

Für erneuerte und verbesserte Sachen, die dann weniger Nachteile als das "alte" haben bin ich auch dafür, nur ich erkenne und sehe in der ganze "bootstrap moderne" nichts derartiges, im Gegenteil... und mit HTML und CSS weiss nun wirklich bescheid.... und vlt. bastle ich eine Beispiel Seite, die wie die "Moderne" aussieht ohne js, jquerys usw... menno ich könnte über das im Minim. eine dickere Broschüre darüber schreiben, doch an dieser Stelle muss ich aufhören....

Nun weisst Du was u. a. mit ....ein paar Kleinigkeiten gemeint ist, ist so ziemlich OT und daher....

PS: "Skreibfeller sind nicht patentiert, kann sie jeder haben " ....

[wanne]

Vielleicht kann mir noch jemand beschreiben, wie ich beispielsweise eine CSS-Klasse anlege. Muss die direkt im html-code definiert werden, oder werden soclhe Stylesheets in einer extra Datei gehalten?

Man kann beiedes Defakte wird eigentlich immer die seperate Datei gewählt.

Ich hätte es hier beispielsweise gerne, dass die Schaltfläche in die Vertiefung geht, wenn man ihn drückt.

In CSS kannst du mit :hover sagen, wie etwas aussehn soll, wenn du drücber fährst. Da malt man dann per Default einen hellen Rand und sonst einen dunklen auf der anderen Seite. Gibt bei Google tausende Beispile zum kopieren und anpassen. Bootstrap bietet auch massenhaft vorlagen.

Am liebsten auch SSL verschlüsselten mit Zertifikat.

Kostenlos? Mit Werbung? Eigene Domain?

[Revod]

@wanne

Kann mir täuschen, das drücken "onmousedown" beherrscht auch das css3 noch nicht, nur mit der Maus darüber, also "hoover im html tag als browser eigenes js nutzen mit onmouseover"

@patsche

Im Linkcode kann man einen Befhl ohne JavaScript zu implementieren auslösen, weil die Browser selbst js für die Standards bereits beinhalten.

das wäre ein Beispiel in eine Link Sequenz

Code: Alles auswählen

<a href="webseite1.htm" onclick="normalesbild-button01.png.display='none'; kleinesbildbutton01.png.display=''">webseite1</a>

Mit den Ziffern "01" kässt sich dann eine lange Sequenz einbauen in Kombination mit anderen Links, die das gleiche Bild fortlaufend nummeriert werden können, das das "onclick oder "onmousedown" Befehl weiss wann es welches Bild nun auszutauschen ist.

Wie gesagt, im Netz danach suchen und lernen mit den Keywords die Du als Frage hier stellen würdest. Drückknöpfe mit kleine Bilder waren immer etwas spezielles (damals musste ich auch für meinen Gusto anhand der Beispiele düfteln - mit Codesequenzen experimentieren und heute auch wieder)

[Patsche]

Kostenlos? Mit Werbung? Eigene Domain?

Ne darf was kosten und ohne Werbung. Derzeit werden 2 Domainnamen für meinen Kollegen freigehalten. Hörte aber, dass er dafür 80 Taler im Jahr hinlegt. Wurde besimmt über's Ohr gehauen, oder aber er hat schon Webspace mitgebucht. Anders kann ich mir das nicht vorstellen. Also darf Kosten, mit SSL, Wordpress muss derzeit installiert werden können , 2 Domains (de / com hat er glaube ich)
Hab übrigens ein super Plugin für Wordpress entdeckt.
-> https://wordpress.org/plugins/shortcodes-ultimate/
Damit ist das Button erstellen kinderleicht

[wanne]

Damit ist das Button erstellen kinderleicht

Ich weiß nicht: Ich sehe da als erstes mal 12Minuten Erklärvideo...

Wenn ich bei Google CSS und button angebe bekomme ich 0,47Sekunden das:
http://css3buttongenerator.com/
DAS ist kinderleicht...

[novalix]

Vielleicht kann mir noch jemand beschreiben, wie ich beispielsweise eine CSS-Klasse anlege. Muss die direkt im html-code definiert werden, oder werden soclhe Stylesheets in einer extra Datei gehalten?

CSS-Klassen definierst Du sinnvoll in einer Stylesheet-Datei. Diese wird im head der HTML-Dateien bzw. in den Template-Dateien referenziert.
Weiterhin werden CSS-Klassen innerhalb des HTML-Baums den jeweiligen Elementen zu gewiesen, sonst liegen sie in der .css nur nutzlos rum.

Code: Alles auswählen

<div class="frob">
<nav class="foo bar baz frobnicate-em-all">$DeineNavList</nav>
</div>

Das Element "div" hat die Klasse "frob" und das Element "nav" die Klassen "foo", "bar", "baz" und "frobnicate-em-all" zugewiesen bekommen.
Sinnvollerweise sind diesen Klassen auch Stylezuweisungen zu geordnet.

Code: Alles auswählen

.frob {
position: relative;
}

.frobnicate-em-all {
font-family: "HeavyMetall Neue", DesasterSerif;
font-style: fucked-up;
}

Schau Dir mal in Ruhe den Aufbau von HTML5-Bolerplate und anderen verlinkten leichtgewichtigen Grids an.

[Revod]

hier ein Beispiel mit dem "hoover" css3

Den code als hooverbilder.html Datei speichern

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>horizontal menü mit mouse hover bild effekten</title>
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <ul id="navmenu">
     <li id="link1"><a href="index.html"></a></li>
     <li id="link2"><a href="produkte.html"></a></li>
     <li id="link3"><a href="impressum.html"></a></li>
  </ul>
</body>
</html>

hier die css Datei als style.css speichen

Code: Alles auswählen

#navmenu li
{
    width: 150px;     /* breite der verwendeten bilder (für alle gleich)*/
    list-style-type: none;
    float: left;
}
#navmenu li a
{
    height: 113px;    /* höhe der verwendeten bilder */
    display: block;
}
 
#link1
{
    /* hintergrundbild des links 1 */
    background: url(1_normal.png) no-repeat;
}
 
#link1:hover
{
    /* hintergrundbild des links 1 beim mouse over*/
    background: url(1_hover.png) no-repeat;
}
 
#link2
{
    /* hintergrundbild des links 2 */
    background: url(2_normal.png) no-repeat;
}
 
#link2:hover
{
    /* hintergrundbild des links 2 beim mouse over*/
    background: url(2_hover.png) no-repeat;
}
 
#link3
{
    /* hintergrundbild des links 3 */
    background: url(3_normal.png) no-repeat;
}
 
#link3:hover
{
    /* hintergrundbild des links 3 beim mouse over*/
    background: url(3_hover.png) no-repeat;

alles im gleichen Ordner damit Du Mal das Effekt siehst. Stelle fest welche Ausdrücke des CSS auch im HTML Code vorkommen um ein kleines Verständnis zu gewinnen.

gucke genau wie die Bilder im css Code genannt sind und dann kannst Du mit dem "hoover" Befehl das Selbe bewirken wie wenn Du darauf klickst, dann sieht es so aus als ob die Maus einen Gewicht hätte und beim darüber fahren das Bild runter gedrückt wird, auch ganz ok oder.....

Die Bilder die mit ...._hover genannt sind sollten die zweiten kleinere Bilder sein, evnt gleich gross, doch mit einen transparentes Rand von 1 - 2 Pixel. Sechs Beispiel Bilder solltest Du dann selber in das Ordner speichern können, es sind in diesem Beispiel 6 Bilder notwendig.

Folgendes solltest Du auch wissen:

1. Grundrebel, sas www ist für den Besucher eines Web nur "Read" also ohne Schreibrechte.

2. Ausnahmen, nur die Mailformulare oder Forumposts sind für das Schreiben unterstützt, in vorgesehene Schreibfelder.

3. Alles weitere muss die jeweilige Webseite eigenständig selber können, das wiederum Editierkenntnisse erfordert.

Daher rate ich Dir nochmals auch die Tips von andere User, nach

http://de.selfhtml.org/html/formulare/klickbuttons.htm

und die Dir in diesen Thread gepostete Links anzugucken / klicken lesen.

Lerne mit Bluefish umzugehen, der ist nun mal wirklich ganz gut.

Braucht schon einiges an Hintergrund Wissen, ansonsten all zu kompliziert ist es nicht und mit der Zeit wirst Du auch verschacherte "<div>, <span>, <p>, <br>...." und "Tabellen" können
Lerne die Ausdrücke der HTML / CSS JS, wie "attribute, tag, werte, object" usw. was diese bedeuten.

@novalix da bist ganz schneller gewesen....

[Patsche]

Nochmals danke für die Hilfe. Das Problem ist, wenn man es lernen will, dass man garnicht weiß, wo man anfangen soll. Da wird über Klassen und Style-Sheets in externen Dateien über CSS und PHP hin zu html alles aufeinmal benutzt. Gehören div-Container zu html? Oder >br>? Dann werden "li" und "lu" verwendet. Gehört das auch zu html?
Es ist irgendwie so verdammt undurchsichtig, wenn man anfängt. Wo fängt JavaScript an und wo hört es auf? Wie verwendet man CSS in externen Dateien. Wie wird das eingebunden, bzw aufgerufen, dass diese Datei in genau der und der Datei liegt.Das ist nichts gegen eure Hilfe, um Gottes Willen. Viel mehr ist es wohl mein Brett vorm Kopf, das mich hindert durchzusehen. Ich denke ihr merkt, dass ich noch nicht durchsehe, so wie ich die ganzen Begriffe hier durcheinander würfel
Aber ich bin immer noch am Anfang. Selfhtml habe ich schon ein paar mal angefangen, aber ich weiß trotzdem noch nichts von CSS,PHP,JS & Co. Das ist wohl der Grund, wartum viele einfach Joomla oder Wordpress or whatever benutzen. Nur für den Feinschliff muss man sich eben auskennen. Wenn ihr noch weitere einsteigerfreundliche Links zum Lernen habt, dann her damit

[Revod]

....
Es ist irgendwie so verdammt undurchsichtig, wenn man anfängt. Wo fängt JavaScript an und wo hört es auf? Wie verwendet man CSS in externen Dateien. Wie wird das eingebunden, bzw aufgerufen, dass diese Datei in genau der und der Datei liegt.Das ist nichts gegen eure Hilfe, um Gottes Willen. ....

Ich weiss nicht was Du bereits mit was experimentiert hast.

Hast Du die von mir erklärte Code ein Texteditor rein kopiert und ein mal ....html und einmal als style.css abgespeichert? dann hast Du zwei Dateien. Beide wieder mit einen Texteditor, am besten Bluefish zumindest mit Editra öffnen und das Inhalt verglichen.

Das sind ganz kleine Beispiel wegen schnelleres Begreifen.

Was ist einen HTML Header?

hier fängt es an

Code: Alles auswählen

<head>

und hier endet es

Code: Alles auswählen

</head>

siehst Du den "slash" ?

Wo fängt HTML an? Betrachte genau den HTML Code von mir.

<lu> = Liste und <li> = Zeilen innerhalb der Liste.

Öffne libreOffice-Writer und füge Tabellen ein, style sie, und speichere es ab, xy.html und üffne es Danach mit eben den genannte Editoren, dann siehst Du was an Quelltext generiert wurde...

und auch vorerst mit einen Browser öffnen, erst dann

füge darin irgend wo an mehrere Stellen (in verschiedene Zeilen unterhalb des <body>) einfach die drei <br><br><br> ein (genau so kopieren) und abspeichern und wieder mit einen Browser öffnen.

Und ja, wenn wir über HTML reden und Dir was von <div> gesagt wird dann ist das HTML-Code.

Was Du auch immer im Quelltext (CSS HTML) google danach, wenn was nicht verstehst.

Gehe ich richtig in der Annahme "mit jomla am einfachsten...." doch nur das Ergebnis ist nicht das erwünschte?

Merke nach jedes <attribut> (ausser bei <br> wenn nicht xhtml ist) kommt ein Ende mit </attribut>

Attribute sind "div, brr, p, table, tr, td ." usw. google nach html attribute....

Hast Du mal die Grund HTML Syntax, wird in Kürze sein wenn Du Dich an unsere Tipps hälst können wir Mal mit Kombination php mit html, weiter machen.... weil Du dann auch die css Einbindung verstanden haben wirst....

[thoerb]

Aber ich bin immer noch am Anfang. Selfhtml habe ich schon ein paar mal angefangen, aber ich weiß trotzdem noch nichts von CSS,PHP,JS & Co.

Das ist ja auch richtig so, man fängt erst mal mit HTML an, davon braucht man mittlerweile eh nur noch das Grundgerüst, wie man Tabellen, Listen usw. erstellt und lernt dann CSS. Wenn man damit einigermaßen sicher ist kann man schon mal recht anspruchsvolle statische Webseiten bauen. Wenn das zu langweilig wird, dann beschäftigt man sich mit PHP, JS & Co.

Ich empfehle dir nicht gleich alles zu wollen, weil das erdrückt dich.

Alleine mit HTML und CSS kann man schon tolle Seiten erstellen, Beispiel: http://www.csszengarden.com/

[ViNic]

Damit ist das Button erstellen kinderleicht

Ich weiß nicht: Ich sehe da als erstes mal 12Minuten Erklärvideo...

Wenn ich bei Google CSS und button angebe bekomme ich 0,47Sekunden das:
http://css3buttongenerator.com/
DAS ist kinderleicht...

Großartig!!!

[ViNic]

Nochmals danke für die Hilfe. Das Problem ist, wenn man es lernen will, dass man garnicht weiß, wo man anfangen soll.

Ganz einfach
Du fängst ganz klassisch mit HTML an, schaust was es ist und arbeitest ein wenig damit. Erstellst paar eigene Seiten. Dafür brauchst du nur einen Browser und einfachen Editor und keinen Web-Server oder IDE. Dann fügst du CSS hinzu. Irgendwann mal JavaScript, PHP usw.

Sie alle bauen auf HTML auf. HTML ist gewissermaßen die Grundlage für CSS & Co. Erschlagt mich, wenn ich da falsch liege ...
Für PHP brauchst du dann mal einen Web-Server ... Das ist aber ne ganz andere Geschichte.

[thoerb]

Ganz einfach
Du fängst ganz klassisch mit HTML an, schaust was es ist und arbeitest ein wenig damit. Erstellst paar eigene Seiten. Dafür brauchst du nur einen Browser und einfachen Editor und keinen Web-Server oder IDE. Dann fügst du CSS hinzu. Irgendwann mal JavaScript, PHP usw.

Genau, das klingt nach einem guten Plan.

Ich würde dir auch empfehlen in Iceweasel den Firebug zu nutzen, damit kannst du viel herumprobieren, ohne ständig den Code ändern zu müssen. Besonders nützlich ist das, wenn du dich in CSS mit dem Boxmodell beschäftigst. http://www.css4you.de/wsboxmodell/index.html

Und in HTML die ganzen Formatierungen würde ich an deiner Stelle erst mal überspringen, das machst du später besser mit CSS. Formatierungen in HTML benötigt man eigentlich nur noch, wenn man alte Webseiten überarbeiten möchte.

[wanne]

Es ist irgendwie so verdammt undurchsichtig, wenn man anfängt. Wo fängt JavaScript an und wo hört es auf?

Die idee ist einfach: HTML ist inhalt, CSS aussehen.
Ganz schön veranschaulicht ist das da:
http://www.mezzoblue.com/zengarden/alldesigns/
Oder da (Abschnitt: Das Layout sieht Scheiße aus!):
https://blog.fefe.de/faq.html
Jedes mal das gliche HTML. Lediglich die CSS-Datei wird ausgetauscht. (Bei fefe wird per default sogar mehr oder weniger ganz ohne CSS ausgeliefert.)

Wie verwendet man CSS in externen Dateien.

Du schreibst oben in den Header das rein:

Code: Alles auswählen

<link rel="stylesheet" type="text/css" href="./datei.css" />

Da kannst du im übrigen auch einfach das CSS von irgend einer anderen Seite reinverlinken.
Also das in deine Seite verlinken:

Code: Alles auswählen

<link rel="stylesheet" type="text/css" href="http://blog.fefe.de/bild.css" />

Und Bild Layout genießen:-)

Javascript und php brauchst du erstmal gar nicht.
Javascript ist eine Programmiersprache, mit der man eine Seite nachträglich im Browser verändern kann. Das Javascriptprogramm wird also erst auf dem Computer des benutzers der Webseite ausgeführt (sofern er das erlaubt). Außerdem bekommt man über javascript zugriff auf die Maus und das Browserfenster. Beispiel ist ein Logout timer. Wenn man aus einer Seite nach 10 Minuten ausgelogt wird kann man sekündlich die Seite von javascript verändern lassen sopdass und die 10Minuten durch die noch verbleibende Zeit ersetzt wird.
Das wohl häufigste Beispiel ist das positionieren des Cursors in einem Textfeld.

PHP ist erstmal eine Programmiersprache wie jede andere auch. Statt die seite selbst in HTML zu schreiben, erstellt man ein Programm, dass dir dein HTML erzeugt. Das geht prinzipiell mit jeder Programmiersprache. perl und PHP sind traditionell die verbreitetsten. Werden aber im Moment stark von moderneren Programmiersprachen wie Java, Python und Ruby abgelößt. Ich habe aber auch schon schlicht und einfach in C geschrieben. (Was sicherheitstechnisch eigentlich eher nicht zu empfehlen ist.) Prinzipiell ist es extrem einfach Seiten mit bash und sed zu schreiben. Sowas sollte man aber nicht an's internet hängen.
CMS machen das so. Der Vorteil ist, dass du auch prinzipiell unendlich viele Seiten erzeugen kannst: Ein passwortgenerator in reinem HTML zu schreiben ist erstmal sinnlos, weil dann ja jedes mal das gleiche Passwort drin steht. Mit einer Programmiersprache kannst du jedes mal Individuell ein anderes Passwort an die entsprechende stelle setzen. Auch das aktuelle Datum einzusetzen ist so eine Anwendung.
Der nachteil ist, dass du eiben ein Programm schreiben musst. Außerdem kann jedes Programm Sicherheitslücken haben. (Gerade wenn es von Laien geschrieben wurde.) Deswegen bieten sich wenig Fehleranfällige Programmiersprachen wie Java an.

[debi14]

Hey ich kann dir Pelican empfehlen.

Damit erstellst du lokal deine Webseite und lädst diese anschließend auf deinen Webserver hoch...fertig

Deine Webseite ist mit diesem System sooo schnell, das sogar ein "kleiner" Hosting-Account genügt

Kannst deine Seiten in html oder z.B. markdown schreiben. Echt easy.

Offizieller Blog
http://blog.getpelican.com/

Kurzanleitung:
http://www.321linux.com/2014/11/05/inst ... wordpress/

Du musst dich dann auch nicht um Updates etc kümmern, da auf deinem Sever "nur" html-Dateien liegen, keine Datenbank benötigt wird usw.

[wanne]

Pelican empfehlen.

Hatte ich ja auch schon empfohlen. Leider reagiert auf meine Posts in erster Linie nur Revod.