Webdesign || Welche Elemente gehören zu welcher Sprache?

[Tockra]

Hallo Leute,

Ich hätte mal einige Fragen zum Thema Webdesign.
Mich interessiert, in welcher Sprache man allgemein die Standart Browserelemente wie Textfelder, Schaltflächen, etc. gestalltet.
Gehören diese Elemente zu html, zu css oder zu Javascript ?
Ich meine allerdings die schöne Elemente wie z.B. auf dieser Webseite: http://samp4you.com/
.
Wofür nimmt man eigentlich allgemein Javascript bei Webseiten?
Gilt dies als Hilfe "Vertiefung" für php, oder eher als "Designelement" ?

Gruß
T.

 

[Kausalat]

So ziemlich all deine Fragen dürften die jeweiligen Artikel bei Wikipedia beantworten.

Kurz gefasst:
HTML zur Strukturvorgabe, CSS zur Gestaltung und Javascript für erweiterte Funktionen.

Zur ersteren Gruppe gehören unter anderem deine Schaltflächen und Textfelder.

 

[longwalk]

Die Textfelder und den Inhalt mitsamt Menü und Verlinkungen werden in HTML erstellt. Das Design wird mit CSS gemacht - sprich Farben, Rahmen, Größen und Anordnung. Damit kann man eine Seite schon einigermaßen schön gestalten.
Auf der Seite die du Verlinkt hast siehst du auch die Aufklappmenüs. Die werden mit JavaScript realisiert. Damit kannst du das Verhalten von Elementen schon steuern.
Das alles passiert aber in deinem Browser. PHP dagegen realisiert dann Dinge, die auf dem Webserver stattfinden und übermittelt an deinen Browser dann die Daten, die wiederum aus Datenbanken stammen können oder aber ein Programm abarbeiten.

So würde ich es zusammen fassen. Bin aber selbst noch Anfänger. Warum fragst du, willst du es lernen?

 

[radix82]

Unter dem folgenden Link kannst du einiges über das Thema erfahren.

Vielleicht hilft dir das weiter.

Die Energie des Verstehens
HTML-Dateien selbst erstellen
SELFHTML

 

[Backslash]

Falls du vorhast mehr mit JavaScript zu machen schau dir unbedingt jQuery an.

Aber erstmal solltest du am besten lernen wie du Seiten mit HTML5 und CSS3 erstellen kannst. Dann später PHP und SQL für dynamische Inhalte und JavaScript für erweiterte Funktionen auf Clientseite. Wenn du das alles beherrscht kannst du so ziemlich alles Erdenkliche mit einer Website machen. Grundlegende XML Kenntnisse sind auch gut, kommt aber mit HTML sowieso (und umgekehrt helfen natürlich XML Kenntnisse auch für HTML).
Beachte, dass HTML nur der Strukturierung des Inhalts dient, das gesamte Design sollte dann per CSS realisiert werden.

Es sei angemerkt, dass Javascript inzwischen teilweise auch serverseitig eingesetzt wird, verbreiteter ist allerdings noch PHP.

 

[Tockra]

Also mache ich das "was" mit html, das "wozu" mit php und das "wohin" mit css?


Wie positioniert man denn am besten Elemente auf der Webseite? In Form einer Tabelle und in html oder in css?

 

[Backslash]

Eher das was mit PHP (Inhalte aus Datenbank oder sonstwoher z.B. XML holen) und das wozu mit HTML (den Inhalt strukturieren). Aber kommt auf die Sichtweise an.

 

[Darlis]

Wie positioniert man denn am besten Elemente auf der Webseite? In Form einer Tabelle und in html oder in css?

Tabellarische Daten kommen in eine Tabelle, alles andere machst du mit CSS.

 

[Tockra]

Tabellarische Daten kommen in eine Tabelle, alles andere machst du mit CSS.

Aber erstellt man nicht eine Art Formular in Form einer Tabelle? So z.B:

  <table border="0" cellpadding="3" cellspacing="0">
    <tr>
      <td align="right">Vorname:</td>
      <td><input name="Vorname" type="text" class="Feld" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td align="right">Zuname:</td>
      <td><input name="Zuname" type="text" class="Feld" size="30" maxlength="40"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Geschlecht:</td>
      <td>
        <input type="radio" class="Radio" name="Geschlecht" value="m"> männlich<br>
        <input type="radio" class="Radio" name="Geschlecht" value="w"> weiblich
      </td>
    </tr>
    <tr>
      <td align="right" valign="top">Eigenschaften:</td>
      <td>
        <input type="checkbox" class="Check" name="Eigenschaft" value="Raucher"> Raucher<br>
        <input type="checkbox" class="Check" name="Eigenschaft" value="Autofahrer"> Autofahrer<br>
        <input type="checkbox" class="Check" name="Eigenschaft" value="HTMLFreak"> HTML-Freak
      </td>
    </tr>
    <tr>
      <td align="right" valign="top">Nächste Großstadt:</td>
      <td>
      <select name="Grossstadt" class="Auswahl" size="1">
        <option value="Hamburg">Hamburg</option>
        <option value="Berlin">Berlin</option>
        <option value="Frankfurt">Frankfurt</option>
        <option value="Muenchen">München</option>
      </select>
      </td>
    </tr>
    <tr>
      <td align="right" valign="top">Kommentar:</td>
      <td><textarea name="Text" class="Bereich" rows="10" cols="50"></textarea></td>
    </tr>
    <tr>
      <td align="right">Formular:</td>
      <td>
        <input type="submit" class="Button" value="Absenden">
        <input type="reset" class="Button" value="Abbrechen">
      </td>
    </tr>
  </table>

http://host.ungaming.de/example.php

 

[Kausalat]

Eine Tabelle zur Positionierung eines Formulars ist nicht das Gelbe vom Ei, vor allem wenn es so einfach aufgebaut ist wie im verlinkten Beispiel. Mehr über semantischen Quelltext gibt es beispielsweise hier.

 

[Daaron]

Aber erstellt man nicht eine Art Formular in Form einer Tabelle? So z.B:

Wenn man als Programmierer faul ist/der Chef schon laufend auf die Uhr glotzt: Ja.
Wenn man hingegen sauber arbeiten will und auf Barrierefreiheit achtet: NÖ!

<table> enthält nach möglich keit NUR UND AUSSCHLIESSLICH tabellarische Daten. Das Netz ist kein Tummelplatz für semantische Katastrophen, nur weil es zufällig möglich ist. Dank HTML5 gibts inzwischen für so ziemlich alles ein passendes Element, nutze es auch.

 

[Tockra]

Zitat entfernt.

Sind die genannten Elemente die ich nutzen kann also Teil von html5 und nicht von css?
Dachte eig. dass css für die Positionierung gedacht ist ...

Ich sollte also doch noch eine HTML5 Anleitung lesen. (reich die : http://selfhtml.org/ (und beschäftigt sie sich auch mit html5 ? ))

 

[Kausalat]

Sieh's einmal so:

Alles, was zu HTML gehört, stellt die Baustoffe für ein Haus dar. Tabellen gehören ebenfalls zu jenen Baustoffen und stellen dabei eine Fertigwand dar. Allerdings ist der Einsatz solcher Elemente beim Hausbau verpönt und nur im bestimmten Kontext gern gesehen . Daher benutzen wahre Internsetseiten-Häuslebauer nach guter Semantiktradition schön die klassischen Baustoffe, damit das Haus nicht schon in ein paar Jahren vollkommen wertlos ist.

CSS sorgt erst für die richtige Optik des Hauses inklusive der Einrichtung .

Ich hoffe, das war nicht allzu abstrakt formuliert.


Bezüglich HTML 5: HTML bleibt HTML. Die letzte Version hat nur einige neue Elemente und kleinere Regeln eingeführt. Ansonsten bleibt alles beim Alten, d. h., du kannst dich ruhigen Gewissens in SelfHTML einarbeiten.

 

[longwalk]

Hier, kannst dir ja mal anschauen was mit CSS gemacht wird http://www.csszengarden.com/ da kannst du verschiedene Designs wählen. Das HTML ist immer das selbe. Nur alleine die geänderte CSS-Datei macht hier den ganzen Unterschied.

Die Regel ist, dass man mit HTML die Seite so erstellt, dass man den Inhalt auch ohne CSS lesen kann, wie bei einer Zeitung halt. Den Rest machst du mit CSS.

 

[Daaron]

Ist doch ganz einfach:
HTML -> Hyper Text Markup Language, eine Auszeichnungssprache: Struktur der Daten
CSS -> Cascading Style Sheets: Optik der Strukturelemente
JavaScript -> wirkliche Programmierung: komplexe User-Interaktionen

Tockra, ich empfehle dir ein gutes Lehrbuch, anstatt dem Forum Löcher in den Bauch zu fragen. Dir fehlen jegliche Grundlagen, da ist ein Forum der falsche Anlaufplatz. Hier können nur Fragen beantwortet werden, aber deine Fragen können nicht jenseits deines Verständnisses liegen. Mit anderen Worten: Du kannst nicht gezielt nach Sachen fragen, von deren Existenz und Funktion du gar nichts weißt. Ist wie mit der Frage nach dem Leben, dem Universum und dem ganzen Rest...

 

[Tockra]

Der Hintergrund hinter meinen Fragen war bzw. ist, dass ich bevor ich anfange Anleitungen zu lesen wissen möchte, was ich mit css anders machen würde als mit HTML sprich wenn ich eine HTML Anleitung lese und mir dort gesagt wird eine Webseite wird so und so aufgebaut und in css hinterher genau das gleiche ergebnis (evtl. etwas besser) anders erreicht wird, dass ich dann direkt schon bei html schalte und mir diese Struktur nicht einpräge.

Beispielsweise habe ich jetzt von zwei verschiedene Möglichkeiten Gehört html Elemente zu positionieren. Einmal in css:

<style type="text/css">
#a 
{
  position:absolute;
  top:100px; left:100px;
  width:120px; height:80px;
}
</style>
<div id="a">Ich bin ein Text</div>

und einmal von einer Möglichkeit in html (?) hier in dem Thread.

 

[Kausalat]

HTML und CSS haben vollkommen unterschiedliche Funktionen: Zusammen kooperierend bilden sie erst eine Website. Das heißt, du müsstest beides lernen, nicht nur eine der Auszeichnungssprachen.

 

[Daaron]

In alten HTML-Varianten gab es für manche Elemente limitierte Angaben für die Optik, diese sind aber quasi durch die Bank weg veraltet.
HTML dient ausschließlich der logischen Strukturierung der Daten, niemals der grafischen Gestaltung.

Übrigens ist es zwar nicht falsch, direkt in ein <div> einen Text zu schreiben, besser wäre von der Semantik her aber oftmals, den Text innerhalb eines Absatzes <p> zu kapseln.

 

[longwalk]

Wenn du dir eine Anleitung für HTML durchließt, die nicht gerade vollkommen veraltet ist, dann wird dir immer nur eine akzeptable Möglichkeit gezeigt, nämlich wie in deinem Beispiel, dass HTML und CSS zusammen benutzt werden.

Kannst dir ja mal die Seite hier anschauen. http://www.peterkropff.de/index.htm Da kann man wirklich schon was lernen.

 

[Rob83]

HTML: Grundgerüst, am besten so viel wie möglich mit CSS ersetzten (Lernzeit: 1-2 Wochen max.)

CSS: Parameter für Design, wie Positionen, Farben, Mausover etc. - es lassen sich auch Menüs basteln (Lernzeit 1-2 Monate, max.)

PHP: Programmiersprache, kann allerdings ohne einen webseiten refresh (F5) oder Weiterleitung nichts aktualisieren. (Lernzeit: Jahre)

JAVA SCRIPT ( nicht Java !! ): Programmiersprache, Komplexität ähnlich PHP, wenn nich etwas größer. Kann Veränderungen live, ohne das neu laden der Seite anzeigen und auch im Hintergrund berechnen (Lernzeit: Jahre).

Mit Lernzeit meine ich, dass man dann nicht mehr groß auf Seiten mit Funktionsübersichten schauen muss. Die eigentliche Syntax, also die Regeln wie man das Puzzle zusammensetzten muss, lernt man deutlich flotter. Programmierung an sich ist dann wie ein Puzzle, man hat Funktionen und muss sich überlegen wie man das Gewünschte mit den vorhandenen Funktionen am besten und effektivsten umsetzen kann.

Funktionen beinhalten Abläufe. Z.b. übergibt man in PHP das hier: "abc.123" an die Funktion explode() und kann durch weitere Parameter bestimmen, dass die Funktion am Punkt das abc und 123 trennt und in separate Variablen packt, auf die man dann zugreifen kann. Solche Funktionen schreibt man sich dann auch selbst wenn die vorgegebenen nicht ausreichen, oder installiert plugins/libraries, die noch mehr Funktionen bieten...aber das kommt später.