mit bisschen html erfahrung auf xhtml und css?

Alles rund um die Software-Entwicklung: Programme, Skripte, Projekte etc.
Benutzeravatar
Lord Acid
Captain
Beiträge: 564
Registriert: 23.03.2004, 18:22

mit bisschen html erfahrung auf xhtml und css?

Ungelesener Beitrag von Lord Acid » 30.06.2009, 14:29

Servus an alle,

hab schon die ein oder andere page in html gemacht und immer viel mit frames und gemacht!
jetzt will ich mal bisschen weiter und mit der zeit gehen und bin auf xhtml oder xml(ist das ein unterschied wenn ja was) und mehr css vielleicht wenige teile java script machen!
weiß jemand ein gutes tutorial oder hat jemand seiten die in dem stil gemacht sind dass man sich auch selber durch den quelltext arbeiten kann?
Wer nicht handelt wird behandelt

Benutzeravatar
st3660a
Vice Admiral
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 4761
Registriert: 08.03.2004, 14:00
Kontaktdaten:

Ungelesener Beitrag von st3660a » 30.06.2009, 14:35

Generelles zu XML und in welcher Beziehung XHTML dazu steht findet man (wer hätte es gedacht) bei Wikipedia. ;)
Auch das gute alte selfhtml hat noch ein paar Infos für Einsteiger parat.
Je nachdem bietet es sich aber an da wenig bis nichts zu Fuß zu machen und gleich ein einfaches WCMS (Joomla und wie sie alle heissen mögen) zu verwenden.

Opaque
Rear Admiral
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 2971
Registriert: 08.03.2004, 11:10

Ungelesener Beitrag von Opaque » 30.06.2009, 15:53

Vielleicht nicht ganz geeignet für den Einsteiger, aber um mal zu sehen, was mit XHTML/CSS so geht, empfehle ich Stu Nicholls - CSSplay. Man sieht imho leider viel zu oft JavaScript, wo es eigentlich gar nicht notwendig wäre.

Benutzeravatar
ictrout
Rear Admiral
Beiträge: 3306
Registriert: 09.10.2005, 15:32

Ungelesener Beitrag von ictrout » 30.06.2009, 17:03

css ist die 2. einfachste sprache meiner meinung nach. vergiss xml, das brauchst du nicht wirklich, und lern einfach css.

durch css wirst du auch viel besser mit html sein...und das wichtigste in sachen css sind <div> container. lern die fuer layouts zu benutzen, anstatt frames usw.

empfehlenswert ist css in zb. Dreamweaver zu CODEN (nicht in der design area), da es dir die verschiedenen style attribute auflistet wenn du das tag oeffnest.

Leviathan
Captain
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 872
Registriert: 08.03.2004, 17:09
Wohnort: Kiel
Kontaktdaten:

Ungelesener Beitrag von Leviathan » 30.06.2009, 19:33

XHTML ist letztlich eine spezielle Ausprägung von XML. XML an sich gibt nur die generell Syntax vor - also das mit den spitzen Klanmmern und so (Tags und Attribute). XHTML legt einen definierten Satz an Elementen fest (<b>, <title>, ...). HTML (ohne X) ist das gleiche wie XHTML, nur nicht 100% XML-kompatibel.
Was du machen willst, wird XHTML Transitional sein. Also XML-kompatibles HTML in der Variante Transitional. Es gibt noch ne Strict-Variante, aber die ist nen bisschen hakelig.

X(HT)ML ist eine Auszeichnungssprache und nicht für die direkte Formatierung gedacht - nur für die Strukturierung.
Für die Formatierung hingegen wird CSS verwendet. Das ist eine eigene Sprache, die innerhalb von XHTML-Attributen notiert wird.

Das schon genannte SELFHTML ist eine gute Anlaufstelle, speziell als CSS-Referenz kann ich auch CSS 4 You empfehlen.
Einige Beispiele, was man alles mit CSS machen kann, findest du auch im CSS Zen Garden.

Je nachdem, wie nah du an die Technik willst, hast die eine Palette von Texteditor mit Syntax-Highlighting bis WYSIWYG-Editor zum zusammenklicken. Wenn du was konkretes suchst, frag einfach.

Leviathan
Captain
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 872
Registriert: 08.03.2004, 17:09
Wohnort: Kiel
Kontaktdaten:

XSLT

Ungelesener Beitrag von Leviathan » 30.06.2009, 20:10

Achso, als Nachtrag (wegen anderem Thema gibts das in nem neuen Posting):
Neuerdings unterstützen alle verbreiteten Browser (nur Konquerer nicht, aber wer benutzt den schon) auch XSLT. Das Konzept, was dahinter steckt, geht noch einen Schritt weiter in der Trennung von Struktur und Format.
Der Quelltext der Seite liegt nicht mehr in (X)HTML vor, sondern in einem eigenen XML-Schema - was extra für die Website "erfunden" wurde (der Programmierer legt das fest). Damit ließe sich z.B. eine News-Seite wie folgt aufbauen:

Code: Alles auswählen

<home>
	<menu/>

	<news date="29.06.2009" title="Es ist was Schlimmes passiert!">
		<author>Franz</author>
		<author>Tussnelda</author>
		<text>
			Karl Ranseier ist tot!<br/>
			Er verstarb am vorigen Samstag an akuter Langeweile.
		</text>
	</news>

	<news date="30.06.2009" title="Es ist was Tolles passiert!">
		<author>Horst</author>
		<text>
			Nach ein paar Millionen Jahren Rechenzeit haben wir endlich die Antwort gefunden: <b>42</b>!
		</text>
	</news>
</home>
Der Webbrowser weiß zwar erstmal nichts damit anzufangen, denn er weiß nicht, wie er Tags wie <home>, <news>, etc. zu verarbeiten hat. Aber an der Stelle springt dann XSLT ein: Die Extensible Stylesheet Language Transformation wird selbst in XML notiert und legt Transformationen von einem XML-Schema in ein anderes fest. Und genau das ist es, was hier passieren soll: Obiges XML-Fragment in einem selbstdefinierten Schema muss transformiert werden in XHTML, damit es der Webbrowser darstellen kann.
Und der Clou dabei: Alle Webbrowser beherrschen XSLT von Haus aus (hier war sogar mal der Internet Explorer am schnellsten), sodass nur die Quelldatei in beliebigem XML-Schema und die XSL-Transformation vorliegen muss. Der Browser baut dann daraus selbstständig eine komplette Webseite in XHTML zusammen (CSS inklusive, das wird nicht berührt durch XSLT). Völlig transparent für den User, der bekommt davon gar nichts mit.

Wie sowas aussehen kann (vor Kurzem erst durch Zufall drüber gestolpert): Support-Seite von Blizzard (und dazugehörige XSL-Datei).
Gibt bestimmt noch Vieles mehr, hab aber noch nicht konsequent danach gesucht.

Auf den ersten Blick sieht das ganze erstmal wesentlich komplizierter aus, denn es kommt ja ein weiterer Schritt dazu, nämlich die XSL-Transformation. Allerdings wird hier an einer Stelle ein Bruch erzwungen, der strukturell sinnvoll ist: Die Quell-Datei in XML muss nur die allernötigsten Strukturinformationen enthalten, die komplette Formatierung geschieht an anderer Stelle, nämlich erst durch die XSL-Transformation. Und damit eröffnen sich vielfältige Möglichkeiten: Denn nicht nur in XHTML lässt sich die Seite transformieren, jedes beliebige XML-Schema ist möglich. Für den obigen Anwendungsfall mit News würde sich z.B. ein RSS-Feed anbieten. Der einzige Unterschied wäre, dass eine andere XSL-Transformation stattfinden muss. Aber die Quelle - nämlich obiges XML-Fragment - bleibt identisch und braucht nicht angepasst zu werden.

Damit eröffnen sich vielfältige Möglichkeiten, um auf sehr strukturierte Art und Weise Daten unterschiedlich aufbereiten zu können.
Der Nachteil ist, dass XSLT als Programmiersprache nicht sonderlich elegant und übersichtlich zu schreiben ist. Also nicht gerade für Anfänger geeignet.
Aber der Vollständigkeit halber (wo hier schon von XML die Rede war) wollte ich das noch erwähnt haben. :)

Opaque
Rear Admiral
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 2971
Registriert: 08.03.2004, 11:10

Ungelesener Beitrag von Opaque » 02.07.2009, 14:40

Für eine professionelle Umgebung mit verschiedenen Services ist das sicher eine interessante Erweiterung. Für den Privatier, zumal einen Anfänger, würde ich dennoch das klassische XHTML/CSS empfehlen. Das ist nicht nur weniger komplex, sondern es gibt auch ausgereifte WYSIWYG-Entwicklungsumgebungen und Unmengen Support in Netz.

Zudem würde ich auch nicht auf das alte XHTML 1.0 Transitional setzen. Zu groß ist die Gefahr, in deprecated Code hängen zu bleiben, Struktur und Formatierung nicht konsequent zu trennen. Unterhalb validem XHTML 1.0 Strict würde ich heute nichts mehr ins Netz stellen. Selbst die zeitraubenden, leidigen IE-Hacks würde ich genau abwägen, sprich im Zweifel eher darauf verzichten.

Benutzeravatar
Lord Acid
Captain
Beiträge: 564
Registriert: 23.03.2004, 18:22

Ungelesener Beitrag von Lord Acid » 02.07.2009, 17:56

mit selfhtml hab ich mich schon vor jahren beschäftigt ist top!
ich hab meine seiten bisher immer mit frames gemacht war früher geschickt musst eman nicht jedes mal alles neu laden!
sehe ich es denn richtig wenn ich sage heute wird egal welchen link man anklickt die seite "neu geladen"?
hab mich ein wenig eingelesen und bin grad an den div tags und den boxen! damit kann ich im prinzip ne seite bauen mit vielen boxen oder?

css hab ich auch immer benutzt aber nur als seperate datei *.css wo eben drin stand wie mein text auszusehen hat und meine links!
kann ich denn mehr damit machen?
Wer nicht handelt wird behandelt

Benutzeravatar
Dude
Moderator
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 10371
Registriert: 08.03.2004, 12:56
Wohnort: Berlin

Ungelesener Beitrag von Dude » 02.07.2009, 18:41

Mit CSS kannst du den gesamten Look der Page definieren. Schau dir das oben verlinkte CSS Zen Garden mal genau an, das sollte dir einen Eindruck geben können.

Bei der Page ist die HTML-Datei immer exakt die Selbe, einzig und allein die CSS-Datei wird verändert.
sehe ich es denn richtig wenn ich sage heute wird egal welchen link man anklickt die seite "neu geladen"?
Nein. Mit Techniken wie AJAX hast du heute Websites die permanent in Verbindung mit dem Server stehen können. Schau dir z.B. mal bei einer beliebigen Story auf Digg.com die Kommentare an - klickst du bei einem der Kommentare auf "x Replies - Blablabla" holt das JavaScript auf der Page den erfragten content vom Server und stellt ihn für dich da ohne dass die Page neu geladen wird.
Sowas siehst du heute extrem viel, und es wird in Zukunft nur noch mehr werden. Wenn du auf facebook deine persönlichen Daten änderst läuft das genauso, auf die Art und Weise kannst du auch selbst eingegebene Infos zum Server schicken ohne dass du auf einen Absenden link klicken musst der dich auf eine andere Page führt.


Frames - waren früher schon scheisse und sind heute schon seit etlichen Jahren völlig inakzeptabel. Nicht zu bookmarken, grausame Layouts, mieses Design, usw.

Mit divs kannst du zwar nur boxen machen, aber was anderes tut eine Tabelle genau genommen ja auch nicht. per CSS kannst du den Boxen dann eben verschiedenste Attribute zuweisen.

Eine separate CSS-Datei bietet sich immer an weil man dann ganz einfach Page übergreifend Designänderungen vornehmen kann.
####

Benutzeravatar
Lord Acid
Captain
Beiträge: 564
Registriert: 23.03.2004, 18:22

Ungelesener Beitrag von Lord Acid » 02.07.2009, 20:01

wenn ich doch jetzt mit html und css ne page mache und keine frames benutze dann hab ich doch bei jedem link den ich anklicke ne neue seite!

was meinst du mit attributen für die boxen?
Wer nicht handelt wird behandelt

H3LL S3RV4NT
Admiral
Beiträge: 14655
Registriert: 08.03.2004, 17:24
Wohnort: Magdeburg

Ungelesener Beitrag von H3LL S3RV4NT » 02.07.2009, 20:31

Da wir mittlerweile weder Akustikkoppler nutzen noch das Surfen zeitbasiert abgerechnet wird, ist das mittlerweile kein Thema mehr.
Nicht zu bookmarken bei Frames trifft allerdings auch auf Ajaxseiten zu.
>kq

Benutzeravatar
Soulprayer
Admiral
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 12844
Registriert: 01.07.2004, 20:42
Wohnort: Solingen

Ungelesener Beitrag von Soulprayer » 02.07.2009, 21:01

Lord Acid hat geschrieben:wenn ich doch jetzt mit html und css ne page mache und keine frames benutze dann hab ich doch bei jedem link den ich anklicke ne neue seite!
dann das a-tag mit target="_self" und voilá - die links gehen im gleichen fenster auf.
Ich bin ein UFO - ein unheimlich faules Objekt.

H3LL S3RV4NT
Admiral
Beiträge: 14655
Registriert: 08.03.2004, 17:24
Wohnort: Magdeburg

Ungelesener Beitrag von H3LL S3RV4NT » 02.07.2009, 21:16

Das ist doch der Standard!? Wenn du natürlich deine Frame-Seiten einzeln testest, ist das klar, dass dies nicht funktioniert, da dürfte dann sowas wie target="hauptframe" oder so drin stehen.
>kq

Benutzeravatar
Soulprayer
Admiral
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 12844
Registriert: 01.07.2004, 20:42
Wohnort: Solingen

Ungelesener Beitrag von Soulprayer » 02.07.2009, 21:23

oder du hast irgendwo beim IE oder firefox oder opera oder whatever in den optionen drin stehen, daß links in neuem fenster aufgehen sollen
Ich bin ein UFO - ein unheimlich faules Objekt.

Benutzeravatar
Lord Acid
Captain
Beiträge: 564
Registriert: 23.03.2004, 18:22

Ungelesener Beitrag von Lord Acid » 02.07.2009, 22:32

jo is klar danke!
was sind ajaxseiten??
und wie war das mit den attributen ;)?
ach ja das css boxensystem taugt das was? hab gelesen dass der ie das nicht korrekt anzeigt!
Wer nicht handelt wird behandelt

H3LL S3RV4NT
Admiral
Beiträge: 14655
Registriert: 08.03.2004, 17:24
Wohnort: Magdeburg

Ungelesener Beitrag von H3LL S3RV4NT » 02.07.2009, 22:39

http://de.wikipedia.org/wiki/Ajax_(Programmierung)
>kq

edit Leviathan: Link repariert

Benutzeravatar
Dude
Moderator
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 10371
Registriert: 08.03.2004, 12:56
Wohnort: Berlin

Ungelesener Beitrag von Dude » 02.07.2009, 23:13

H3LL S3RV4NT hat geschrieben:Da wir mittlerweile weder Akustikkoppler nutzen noch das Surfen zeitbasiert abgerechnet wird, ist das mittlerweile kein Thema mehr.
Nicht zu bookmarken bei Frames trifft allerdings auch auf Ajaxseiten zu.
>kq
Natürlich sollte man nicht seine komplette Seite per Ajax machen, das ist nur für Sachen wie eben die Comments bei digg gut - um Pages mit großen Datenmengen gut zu strukturieren und die beim ersten Aufruf heruntergeladene Datenmenge zu reduzieren.

@Lord Acid: Mit Attributen meine ich dinge wie background-color, background-image, width, height, margin, transparenz, layer-Ordnung (sprich auf welcher Ebene die Box ist, du kannst Boxen vor bzw. hinter andere schieben), etc.
Du gibst also ner div eine ID und/oder eine class und kannst ihnen so ganz einfach verschiedenste Eigenschaften geben.
####

Benutzeravatar
Lord Acid
Captain
Beiträge: 564
Registriert: 23.03.2004, 18:22

Re: mit bisschen html erfahrung auf xhtml und css?

Ungelesener Beitrag von Lord Acid » 03.12.2009, 08:45

so habe mich mal bisschen mit der geschichte befasst und eine homepage entworfen!
hat jemand lust sie sich anzuschauen und mir seine meinung zu geigen bin für jegliche kritik bzw. hilfreiche tipps offen!

www.kjg-tuttlingen.de
Wer nicht handelt wird behandelt

Benutzeravatar
Luzifer
Vice Admiral
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 4381
Registriert: 12.03.2005, 08:24
Wohnort: kurz vorm Wasser
Kontaktdaten:

Re: mit bisschen html erfahrung auf xhtml und css?

Ungelesener Beitrag von Luzifer » 03.12.2009, 10:07

Was mir im Quelltext sofort auffällt ist das Du in HTML schreibst und nicht in XHTML, als das dies angegeben wurde.

Code: Alles auswählen


Falsch:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

Richtig:
<!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">

Falsch: <link rel="stylesheet" type="text/css" href="boxen.css">
Richtig: <link rel="stylesheet" type="text/css" href="boxen.css" />

Falsch: <img src="/tinc?key=U1Utdfp7">
Falsch: <img src="drache_passt.gif"></img>
Richtig: <img src="drache_passt.gif" alt="" />

Falsch: <br>
Richtig: <br />
- Die E-Mail Adresse solltest Du als mehrteiliges Bild einbringen und nicht im Klartext, denn dann dauert es nur eine Frage von Zeit, bis der Spam Dich erreicht.

- Du hast 2 Title-Tags im Head

- Bilder sollten immer einen alt="" Tag beinhalten.

- Zeile 67 liegt ein herrenloser </span> Tag

Das sind alles nur Beispiele von der Startseite.
Zuletzt geändert von Luzifer am 03.12.2009, 10:15, insgesamt 1-mal geändert.

stanglwirt
Fleet Captain
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 1591
Registriert: 17.03.2004, 07:22

Re: mit bisschen html erfahrung auf xhtml und css?

Ungelesener Beitrag von stanglwirt » 03.12.2009, 10:29

IMHO muss auch da ein richtiges impressum rein und email per bilder ist da nicht zulässig.
MfG
everybody´s darling is everybody´s Arschloch. (c) Franz Josef Strauß

Benutzeravatar
Luzifer
Vice Admiral
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 4381
Registriert: 12.03.2005, 08:24
Wohnort: kurz vorm Wasser
Kontaktdaten:

Re: mit bisschen html erfahrung auf xhtml und css?

Ungelesener Beitrag von Luzifer » 03.12.2009, 10:52

Wie kommst Du auf die Idee? Das Gesetz schreibt nur vor das man eine E-Mail Adresse (Kontaktinformation) drin haben muss und nicht wie. Von einen Link ist nicht die Rede.

stanglwirt
Fleet Captain
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 1591
Registriert: 17.03.2004, 07:22

Re: mit bisschen html erfahrung auf xhtml und css?

Ungelesener Beitrag von stanglwirt » 03.12.2009, 11:02

sie muss aber für jeden sichtbar sein. das ist bei bildern nicht gegeben.

edit: http://www.schloebe.de/artikel/gesetz-i ... ls-grafik/
laut der seite ist es derzeit noch eine gesetzeslücke. in zeiten des abmahnwahns würde ich es aber lieber sein lassen.

auch meine ich in erinnerung diverse urteile dazu schon gesehen zu haben. hab jetzt aber nicht die lust danach zu suchen.
Zuletzt geändert von stanglwirt am 03.12.2009, 11:10, insgesamt 1-mal geändert.
MfG
everybody´s darling is everybody´s Arschloch. (c) Franz Josef Strauß

Benutzeravatar
Luzifer
Vice Admiral
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 4381
Registriert: 12.03.2005, 08:24
Wohnort: kurz vorm Wasser
Kontaktdaten:

Re: mit bisschen html erfahrung auf xhtml und css?

Ungelesener Beitrag von Luzifer » 03.12.2009, 11:19

Muss jeder selbst entscheiden. Ich bleibe jedenfalls beim Bild.

Interessant ist ja das der Urheber des Artikels seine E-Mail Adresse selbst als Bild eingebaut hat.

Leviathan
Captain
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 872
Registriert: 08.03.2004, 17:09
Wohnort: Kiel
Kontaktdaten:

Re: mit bisschen html erfahrung auf xhtml und css?

Ungelesener Beitrag von Leviathan » 03.12.2009, 14:36

Solche Fehler findest du übrigens am einfachsten mit einem HTML-Validator. Das W3C stellt so einen Service zur Verfügung: http://validator.w3.org/
Noch einfacher hingegen geht es mit diesem Firefox-Addon: https://addons.mozilla.org/de/firefox/addon/249

musashi
Foren Entwickung
Turtleboard Veteran
Turtleboard Veteran
Beiträge: 12706
Registriert: 03.12.2003, 15:32
Wohnort: Wien
Kontaktdaten:

Re: mit bisschen html erfahrung auf xhtml und css?

Ungelesener Beitrag von musashi » 03.12.2009, 14:48

Als Add-On Alternativ sehr sehr gut: https://addons.mozilla.org/en-US/firefox/addon/60

Antworten