title image


Smiley Re: Homepage für einen DJ
Ein langer Weg, der viel Lesen, Lernen und Verstehen erfordert:



Dokumententypen (Doctype)

Erstmal lesen:

http://www.carsten-protsch.de/zwischennetz/doctype/



Danach Grundgerüst mit einem nicht in den Quirksmodus schaltenden Doctype erstellen.



Imagewechsel per CSS

http://aktuell.de.selfhtml.org/artikel/css/mouseover/



Für alle Inhalte semantische Container benutzen.

Allerdings ohne Formatierungen (Aussehen, Farbe, Größe, Position, Abstände, usw.).

Die werden per CSS erstellt.



Ausnahme:

Bilder, Objekte und diverse Formular-Elemente. Diese sollten die gewünschte Breite

und Höhe ebenfalls im HTML formatiert werden.



für Überschriften ==> h1 - h6

für Textpassagen ==> p

für Menüs und Listen ==> ul

für Tabellen (und bitte nur dafür) ==> table

zum Gruppieren von Bereichen ==> div

usw.



Herangehensweise

Du erstellst Dein HTML ganz normal ohne an deren Aussehen zu denken.



<body>

<h1>Überschrift erster Ordnung</h1>

<p>Text</p>

<p>Text</p>

<p>Text</p>

<p>Text</p>

<h2>Überschrift zweiter Ordnung</h2>

<p>Text</p>

<p>Text</p>

<ul>

<li><a href="#">&nbsp;</a></li>

<li><a href="#">&nbsp;</a></li>

<li><a href="#">&nbsp;</a></li>

<li><a href="#">&nbsp;</a></li>

<li><a href="#">&nbsp;</a></li>

<li><a href="#">&nbsp;</a></li>

</ul>

.

usw.

.

</body>



Falls erforderlich danach Gruppen bilden und diverse Inhalte mit einem <div> + </div>

umschließen. (sparsam einsetzen)



Diese Bereiche eindeutig kennzeichen:

<div id="menue">

<div id="content">

<div id="header">

<div id="footer">

usw.



Anschließend Elemente in einer separaten CSS-Datei formatieren.

html {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

}

body {

margin: 0;

padding: 0;

width: 100%;

font-family: arial,helvetica,verdana,sans-serif;

font-size: 100.01%;

}



#menue {

Formatierungen;

}

#menue ul {

Formatierungen;

}

#menue ul li {

Formatierungen;

}

#menue ul li a {

Formatierungen;

}

#menue ul li a:hover {

Formatierungen;

}



#content {

Formatierungen;

}

#content h1 {

Formatierungen;

}

#content h2 {

Formatierungen;

}

#contente h3 {

Formatierungen;

}

#content p {

Formatierungen;

}



#footer {

Formatierungen;

}

#footer p {

Formatierungen;

}



/* usw. */



weitere Infos:

http://de.selfhtml.org/html/index.htm

http://de.selfhtml.org/css/index.htm



Damit die Schrift auch im IE skalierbar bleibt, bitte vorzugsweise in einer

relativer Einheit (em, ex, %) formatieren.



Den Link zu dieser CSS-Datei im Head des HTML-Dokumentes einbinden:

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



Nach Fertigstellung alle HTML-Dokumente und CSS validieren (auf Einhaltung der Standards untersuchen):

HTML-XHTML-Validator (englisch)

HTML-XHTML-Validator (deutsch)

CSS-Validator (deutsch)



mfg Achim

geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: