Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Tutorial - HTML, XHTML und CSS
zurück: Fehlermeldung "403" beim Seitenupload weiter: allgemeine Frage zu HTML-Standards Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Neue Antwort erstellen     Status: Offen Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
maninweb
Microsoft Excel MVP 2014


Verfasst am:
15. Jan 2007, 17:58
Rufname: maninweb
Wohnort: Aachen

Tutorial - HTML, XHTML und CSS - Tutorial - HTML, XHTML und CSS

Nach oben
       

Hallo zusammen...

Zum Einstieg in das Forum ein kleines Minitutorial, welches ein paar
Grundbegriffe, speziell für Anfänger und Anfängerinnen, erklären soll.
Anregungen sind natürlich willkommen. Smile

1. Was ist HTML

HTML - Hypertext Markup Language - ist eine Auszeichnungssprache,
die hauptsächlich dazu verwendet wird, um Dokumente aus dem
Internet am Bildschirm darstellen zu können.

Ein HTML Dokument enthält sogenannte Tags, die dem Browser ermög-
lichen, Textformatierungen, Positionsangaben, Verknüpfungen oder
auch Metadaten zu interpretieren und am Bildschirm darzustellen.

2. Was brauche ich, um eine HTML Seite zu erstellen ?

Im Prinzip nur einen einfachen Editor. Probier's mal aus. Öffne mal
den Windows-Editor und füge folgendes ein...
Code:
Das ist meine erste Webseite.
Speichere das Dokument nun mal als Test.html und rufe die Seite
im Browser auf. Du siehst nicht mehr als den Text. Wir könnten
aber auch dem Browser explizit sagen, dass es sich um ein HTML-
Dokument handelt...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
Ich bin schon ein besseres HTML-Dokument.
</body>
</html>
Wenn Du das Dokument jetzt mit dem Browser öffnest, wirst Du auch
nur den Text sehen, jedoch weiss der Browser jetzt dass dies definitiv
ein HTML-Dokument ist, das festdefinierten Regeln folgen soll (Doctype).
Ausserdem weiss der Browser wo das HTML- Dokument anfängt, dass es
einen hier leeren Kopf gibt sowie einen Rumpf, wo der eigentliche Inhalt
drinsteht. Elemente im Text, die mit < bzw. </ anfangen heißen Tags.
Bis auf ein paar Ausnahmen und je nach HTML-Version, werden bzw.
müssen Tag mit </ geschlossen werden.

3. Wie ist ein HTML Dokument aufgebaut ?

Wie schon zuvor zu sehen, besteht ein HTML-Dokument aus einer Anweisung,
die festlegt, um welche HTML-Version es sich handelt, aus Kopfdaten
(head) und Inhaltsdaten (body). In den Kopfdaten kann man z.B. einen
Titel für das Dokument vergeben, zwischen <body> und </body> kommt
der eigentliche Inhalt rein, z.B. Texte, Grafiken, Links, Tabellen
usw.. Hier mal ein Beispiel...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Meine Seite</title>
</head>
<body>
<font color="#666600" size="4">Ich bin zwar ein HTML-Dokument, aber es gibt mich schöner.</font>
<br>
<font color="#000033" size="2">Und eine zweite Zeile habe ich auch.</font>
</body>
</html>
Wie zu sehen, hat die HTML-Seite einen Titel bekommen, der beim Aufruf
im Browser in dessen Titelleiste angezeigt wird. Ausserdem ist dem
Browser mitgeteilt worden, welchen Zeichensatz dieser zu verwenden
hat. Der Text im Inhalt sollte jetzt grün sein und recht gross angezeigt
werden. Elemente wie color="#666600" nennt man Attribute. Wie Du
siehst, ist die zweite Zeile auch von Tags umschlossen, die eine andere
Farbe und Größe setzen.

4. Muss ich denn das alles einhacken?

Nein, natürlich nicht. Es gibt Programme, die Dich dabei unterstützen.
Bekannte Vertreter sind Frontpage, in Zukunft Expression Web, Dream-
weaver, GoLive und weitere. Allerdings hilft das beste Programm nicht,
wenn man nicht weiss, was man da tut.

5. Wo kann ich mehr über HTML & CSS erfahren?

Es gibt viele Seiten im Netz, eine Liste interessanter Werke im Netz
hab' ich mal im Folgebeitrag zusammengestellt.

6. Was ist den jetzt XHTML?

Anlehnend an XML und HTML ist XHTML letzten Endes nichts anderes als
eine striktere Definition von HTML. Zum Beispiel war's vorher egal, ob
man die Tags und Attribute klein oder groß geschrieben hat. Tags
müssen in XHTML immer geschlossen werden, was vorher nur bedingt
der Fall war. Einige sinnlose Attribute sind weggefallen. XHTML ist die
Basis für barrierefreie Seiten, d.h. Seiten die auch von Menschen mit
Behinderungen gelesen bzw. erfasst werden können. Das heißt aber
im Prinzip nur, dass die gut vom Browser interpretierbar sind (leider
sollten) und auch z.B. ScreenReader die auch (vor)lesen können.

7. Und was ist CSS?

CSS steht für Cascading Style Sheets und ist eine Methode Inhalt und
Layout einer Webseite besser zu trennen. Wenn Du oben nochmal
schaust, siehst Du, dass für die zwei Zeilen jeweils ein Font-Tag ver-
wendet wurde, mit je eigenen Eigenschaften. Wenn man sich jetzt eine
größere Seite mit vielen Texten vorstellt, bläht sich das Ganze schon
auf; die Datei würde also zunächst deutlich größer. Und wenn man
mal eine Änderung machen möchte, müsste man jeden Textabschnitt
einzeln durchgehen und die Umformatierung machen. Vielleicht hast Du
ja schonmal Word verwendet. In Word kannst Du absatzweise Format
definieren. Ein Stylesheet macht, unter anderem, nichts anderes.
Guckst Du hier...
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>Meine Seite</title>
<style type="text/css">
<!--
.MeineUeberschrift
{
   font-size: 14px;
   color: #666600;
   font-weight: bold;
}
.MeinNormaltext
{
 font-size: 12px;
 color: #000033;
}
-->
</style>
</head>
<body>
<span class="MeineUeberschrift">Ich jetzt ein richtig gutes HTML-Dokument.</span><br />
<span class="MeinNormaltext">Und ich bin eine zweite Zeile.</span><br /><br />
<span class="MeineUeberschrift">Nochmal ich als Überschrift.</span><br />
<span class="MeinNormaltext">Und die vierte Zeile.</span>
</body>
</html>
Wenn ich jetzt ein Format, z.B. die Überschriftsfarbe, ändern möchte,
brauche ich jetzt nur...
Code:
color: #666600;
ändern und schon werden alle Überschriften umformatiert.

8. Ein paar letzte Worte

Das war natürlich nicht alles was (X)HTML & Co. können. Meine
persönliche Empfehlung ist, zu versuchen, möglichst XHTML und
CSS zu verwenden; mag' manchmal ein bisschen mehr Aufwand
sein, aber die User Deiner Website werden's Dir danken.

Nun Willkommen in diesem Forum, wir freuen uns schon auf
spannende Fragen Smile

Gruss

_________________
Der größte Aberglaube der Gegenwart ist der Glaube an die Vorfahrt.
Jacques Tatischeff - auch bekannt als Jacques Tati
20FCC4FD0E3240C59522E3F0C4695941


Zuletzt bearbeitet von maninweb am 20. Feb 2009, 11:04, insgesamt 2-mal bearbeitet
maninweb
Microsoft Excel MVP 2014


Verfasst am:
21. Jan 2007, 14:35
Rufname: maninweb
Wohnort: Aachen


AW: Minitutorial - HTML, XHTML und CSS - AW: Minitutorial - HTML, XHTML und CSS

Nach oben
       

Hi zusammen...

hier mal eine kleine Liste von Links, wo man mehr über HTML & CSS
erfahren oder einfach nur stöbern kann...

- SelfHTML das quasi Referenzwerk in Deutsch zu HTML von Stefan Münz.
- Netzfruehling, zum anschauen
- Zen Garden, zum anschauen, was alles mit CSS und validem Code möglich ist, Englisch

Gruss

_________________
Der größte Aberglaube der Gegenwart ist der Glaube an die Vorfahrt.
Jacques Tatischeff - auch bekannt als Jacques Tati
20FCC4FD0E3240C59522E3F0C4695941
Tom2002
Der einzig Wahre Leuchtturm - Pilsum


Verfasst am:
19. März 2007, 23:37
Rufname:
Wohnort: Düsseldorf

AW: Minitutorial - HTML, XHTML und CSS - AW: Minitutorial - HTML, XHTML und CSS

Nach oben
       

Moin,

da hab ich auch noch einen: CSS4You oder zwei Style Sheets

Ciao

Tom

_________________
Win7, Win2008 R2, Office 2010 Prof

Wer mit Fortuna Düsseldorf groß geworden ist, der fürchtet sich auch vor Access nicht.
Die Nutzlosigkeit des Daseins anzuerkennen heisst, Fortuna-Fan zu sein.
waldwuffel
Hardware & OS, Sicherheit


Verfasst am:
30. März 2007, 12:42
Rufname:
Wohnort: Bergisch Gladbach


AW: Minitutorial - HTML, XHTML und CSS - AW: Minitutorial - HTML, XHTML und CSS

Nach oben
       

Moin,

den Klassiker unter den CSS-Demo-Sites nicht vergessen:

CSSZenGarden

Gruß,
wuffel

_________________
Dein Feedback ist mein täglich' Brot - lass mich nicht verhungern ...
Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Keine neuen Beiträge Wichtig: HTML & CSS Forum: Tutorial - Vertikales CSS-Menü mit Unterpunkten 0 maninweb 5763 15. Jun 2009, 19:43
maninweb Tutorial - Vertikales CSS-Menü mit Unterpunkten
Keine neuen Beiträge HTML & CSS Forum: Links dynamisch in html generieren 2 mist3r 873 13. Sep 2012, 17:25
Gast Links dynamisch in html generieren
Keine neuen Beiträge HTML & CSS Forum: Bilder ausrichten mit CSS 3 Voeman 1686 09. Jul 2012, 22:39
Larata Bilder ausrichten mit CSS
Keine neuen Beiträge Frontpage Forum: Lightbox CSS .lb-dataContainer bg 2 kesart 2172 28. Mai 2012, 10:39
kesart Lightbox CSS .lb-dataContainer bg
Keine neuen Beiträge HTML & CSS Forum: CSS Problem mit Wrapper 1 dibuslaa 1275 29. März 2012, 10:47
womaninweb CSS Problem mit Wrapper
Keine neuen Beiträge Frontpage Forum: Html: Zurück zu den Bildern 0 Hans 21 722 21. März 2011, 13:25
Hans 21 Html: Zurück zu den Bildern
Keine neuen Beiträge HTML & CSS Forum: über css div feste position geben 1 SleepWalker86 2445 28. Jan 2011, 20:35
MartinPent über css div feste position geben
Keine neuen Beiträge HTML & CSS Forum: wie zentriere ich die komplette webseite mit css??? 2 Linkifan 1736 03. Dez 2010, 11:56
Gast wie zentriere ich die komplette webseite mit css???
Keine neuen Beiträge HTML & CSS Forum: css Standartbreite 80% aber min 600px 1 Gast 2356 30. Apr 2010, 12:47
womaninweb css Standartbreite 80% aber min 600px
Keine neuen Beiträge HTML & CSS Forum: 1und1 CSS und HTML daten hochladen 1 jan r. 4692 04. März 2010, 11:04
alexander912 1und1 CSS und HTML daten hochladen
Keine neuen Beiträge Frontpage Forum: HTML Tabelle mit Excel aktualisieren 0 landscape12 2228 05. Dez 2009, 13:18
landscape12 HTML Tabelle mit Excel aktualisieren
Keine neuen Beiträge MS Expression Web Forum: css Validität 10 sashnow 1639 18. Apr 2009, 17:58
sashnow css Validität
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: HTML Editor Forum