Ergebnis 1 bis 5 von 5

Die Trennung von Code und Design ... Bastelspaß mit Ralf

Erstellt von Ralf_aus_Do, 19.09.2006, 13:02 Uhr · 4 Antworten · 1.221 Aufrufe

  1. #1
    Avatar von Ralf_aus_Do

    Registriert seit
    11.01.2005
    Beiträge
    3.787

    Die Trennung von Code und Design ... Bastelspaß mit Ralf

    Vorwort

    Viele hatten sich jetzt dran versucht, mit Generatoren, einige haben sich nicht getraut, vielfach kam der Wunsch auf, sich mal was zu basteln ... 'ne Heimatseite ...

    Das ganze soll als eine Art Kochrezept aufgebaut sein, und ganz Hardcoremäßig in einen Editor (wie zum Proton, die sich diejenigen, die mitmachen wollen runterladen, installieren und auf "Symtaxchema HTML " einstellen mögen. Anschließend seid Ihr gebeten, Euch irgendwo freien Webspace zu besorgen.

    Das Kochrezept besteht darin, zunächst mal etwas ganz einfaches HTML zu lernen, um eine sehr einfache und klar strukturierte Seite zu erhalten ... man könnte in diesen ersten Tagen auch von einer Seite sprechen, die langweilig ist ...da nun Inhalte reinbringen ... und anschließend, es heißt ja hier

    Die Trennung von Code und Design

    Der Seite ein Design verpassen, damit sie nicht mehr so langweilig wirkt ... also schon aussehen tut ...

    Die Seiten werden nicht alle gleich aussehen, da die Inhalte ja unterschiedlich sind und auch die Designs variieren. Nun jeder auch ohne Vorkenntnisse ist eingeladen zum mitmachen.

    Und heute abend geht's schon los, mit "Was ist in jeder HTML Datei gleich"

    Ich öffne gleich noch 'nen Thread im Computerboard in dem die Teilnehmer sagen können "jau, da mach ich mit, ich wollte auch schon immer 'ne Heimatseite haben", und in denen auch Fragen gestellt werden dürfen. Hier wäre es auch sinnvoll, wenn die Teilnehmer den Link zu ihrem freien Webspace mit einstellen würden, damit man sehen kann, wie etwas "wächst und gedeiht".

  2.  
    Anzeige
  3. #2
    Avatar von Ralf_aus_Do

    Registriert seit
    11.01.2005
    Beiträge
    3.787

    Re: Die Trennung von Code und Design ... Bastelspaß mit Ralf

    Das Skelett, ein leeres Blatt Papier

    In dem Quelltext, den wir uns hier anstandslos kopieren können tauchen immer wieder gesonders gekennzeichnete "Kommentarzeilen" auf, der Kommentar "ich habe hier kommentiert" sieht dann so aus:

    Code:
    
    
    Wenn jemand dies rüberkopiert, stört´s keinen Inetbrowser, man sollte es dennoch löschen. In gleicher Form, also zwischen den Zeichenfolgen

    Code:
    <!--
    am Anfang
    und
    Code:
    -->
    Kann man sich auch eigene Anmerkungen in seinen HTML Text schreiben, bei Gelegenheit macht dies Sinn (beispielsweise, wenn man sich was merken möchte)

    Das Skelett

    Wir basteln uns eine leere Seite.

    So eine leere Seite im HTML umfaßt so einige Informationen, wie sieht so ein Skelett den aus? Dies wäre eins ... eins, das wir aktuell nehmen können:

    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <-- Hier beginnt der Dateikopf ... -->
    
    <head>
    
    <-- in dem man zunächst dem Browser erklärt, wie er die Zeichensätze zu sehen hat (es gibt ja auch wie wir gerade in diesem Forum wissen unterschiedliche -->
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <-- Einen Titel sollte die Webseite schon haben, diese wird in der Statusleiste des Browserfensters eingeblendet, hier schreiben wir den sinnvollen Titel rein, dort wo aktuell "Unsere neue Webseite" steht -->
    
    <title>Unsere neue Webseite</title>
    
    </head>
    
    <body>
    
    </body>
    </html>
    Und nun kopieren wir dies alles in den editor unserer Wahl, speichern es als "index.html" Datei und haben schon eine (Leere) Startseite, anschließend Schreiben wir den Text den wir irgendeinen Text zwischen
    Code:
    <body>
    und
    Code:
    </body>
    und wir haben schon eine sehr rudimentäre Webseite ...

    weiter gehts MORGEN

  4. #3
    Avatar von Ralf_aus_Do

    Registriert seit
    11.01.2005
    Beiträge
    3.787

    Re: Die Trennung von Code und Design ... Bastelspaß mit Ralf

    Und wenn man so tippt macht man Fehler, da ich die Kommentare nicht immer richtig setzte ... es müßte heißen
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    
    <head>
    
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    
    
    <title>Unsere neue Webseite</title>
    
    </head>
    
    <body>
    
    </body>
    </html>

  5. #4
    Avatar von Ralf_aus_Do

    Registriert seit
    11.01.2005
    Beiträge
    3.787

    Re: Die Trennung von Code und Design ... Bastelspaß mit Ralf

    Unsere ersten zwei (oder drei bis sieben) HTML Tags

    Ich erläre jetzt erst einmal die ersten zwei HTML Tags, die notwendig sind um einen Text zu strukturieren.

    Außerdem schreibe ich mal wie mal Sonderzeichen darstellt.

    Das ganze gibt's dann immer als HTML Seite, der Quelltext steht hier unten (man kann ihn sich auch in den herrkömmlichen Browsern anzeigen lassen...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Die Trennung von Code und Design</title>
    </head>
    <body>
    
    
    
    <h1>Die Trennung von Code und Design</h1>
    
    <h3>Unsere ersten zwei (oder drei bis sieben) HTML Tags</h3>
    
    
    
    Ich erläre jetzt erst einmal die ersten zwei HTML Tags, die notwendig sind um einen Text zu strukturieren.</p>
    
    
    
    Außerdem schreibe ich mal wie mal Sonderzeichen darstellt.</p>
    
    <h3>Überschriften</h3>
    
    
    Die Hauptüberschrift wird mit den Tags <h1> begonnen, anschließend 
      schribt man die Überschrift, danach kennzeichnet man, daß man mit 
      der Überschrift fertig ist mit </h1>.</p>
      
    
    
    Es gibt für Überschriften 6 Glieberungsebenen. <h2> beginnt eine 
      Überschrift zweite Ordnung </h2> schließt sie ab.</p>
      
    
    
    Analog kann man mit <h3> bis <h6> Verfahren. Mit 6 Schachtelungstiefen 
      für Überschriften läßt sich soein Text schon strukturieren. 
      Idealerweise läßt man immer eine Gliederungsebene aus, dann hat man 
      Platz, sollte einem hinterher noch was einfallen.</p>
    <h3>Absätze</h3>
    
    
    So einen Absatz (Text) beginnt man mit 
    
     und schließt ihn mit 
      </p> ab. Dies tut man immer wieder, es ist sinnvoll zuallererst mal den 
      Text in seinen Editor reinzukopieren, Danach kann man ihn wunderbar gliedern, 
      sprich die Absätze festlegen.</p>
    <h3>Sonderzeichen</h3>
    
    
    So ein Internetbrowser muß normalerweise auf Sonderzeichen hingewiesen 
      werden. Zum Beispiel (und dies ist recht wichtig für uns) sind die deutschen 
      Sonderzeichen.</p>
    
    
    Sonderzeichen beginnen immer mit einem kaufmännischen "und", 
      enden tun se mit nem Semikolon.</p>
    
    
    Statt Ä tippt man Ä, das kleine ä heißt ä, 
      Ü wird Ü, ü ü, Ö Ö,ö ö, 
      das ungeliebte ß heißt im HTML &szlig ... es gibt noch einige 
      andere, beschränken wir uns mal auf diese.</p>
    
    
    Also nach dem kopieren und gliedern müßen wir noch schauen, ob sich 
      im Text irgendwelche Zeichen verstecken, die der Browser eventuell nicht so 
      richtig kapiert.</p>
    
    </body>
    </html>
    und kopiert mal Euren Text zwischen die "body" Tags des HTML Skeletts was wir ja schon haben ... danach seht ihr zu, daß jeder Text mit den Überschriften oder Absatz formatierungen umschloßen wird, noch nach "Sonderzeichen durchforsten und anschließend habt ihr sowas.

  6. #5
    Avatar von Ralf_aus_Do

    Registriert seit
    11.01.2005
    Beiträge
    3.787

    Re: Die Trennung von Code und Design ... Bastelspaß mit Ralf

    Bis zum Thema "wie erstelle ich in HTML Listen" kann man hier nachlesen. Die Seite ist schon gestaltet, nach jedem (der bisher fertiggestellten) Kursabschnitte gibt es eine Darstellung "wie sieht unsere Seite denn jetzt aus". Bei den meisten Browsern kann man sich auch den Seitenwuelltext anzeigen lassen. Viel Spaß. Ich melde Vollzug, sobald ich die nächsten Abschnitte fertiggestellt habe und hoffe noch ein oder zwei Member wollen mitmachen.

Ähnliche Themen

  1. Antworten: 20
    Letzter Beitrag: 05.07.10, 23:39
  2. Die Trennung von Code und Design ... Fragen und Antworten
    Von Ralf_aus_Do im Forum Computer-Board
    Antworten: 16
    Letzter Beitrag: 23.09.06, 20:37
  3. Code 31
    Von Kali im Forum Computer-Board
    Antworten: 5
    Letzter Beitrag: 05.03.06, 13:54
  4. Swift Code
    Von Pustebacke im Forum Treffpunkt
    Antworten: 13
    Letzter Beitrag: 19.03.04, 12:05
  5. Nittaya-Forum im neuen Design
    Von Didel im Forum Forum-Board
    Antworten: 44
    Letzter Beitrag: 06.12.03, 23:07