19. Tag HTML 05.11.2014

HTML/CSS
Ralf Herbst



Suchmaschinenoptimierung 
SearchMetrics
Marketingblog 
Rankingfaktoren 2013  



Navigationen anlegen

bekommen von Ralf die vorgefertigte Dateien für das Projekt Naviagtionen:
- basis_transition.css = abspeichern unter im Ordner Webprojekte/Navigationen/css,
- 04.navi_transition.html = abspeichern unter im Ordner Webprojekte/Navigationen und geben im head-Bereich die Naviprogrammierung ein:
<style type="text/css"> 
.linksNavigation { background-color: #000; width: 12.438em;  float: left; }
= bei em und % können 3 Stellen nachKomma angegeben werden          
.linksNavigation h2 { margin-bottom: 0.7em; }
.linksNavigation ul li { list-style-type: none;  line-height: 1.3em; }
.linksNavigation ul, li, a { font-weight: normal; color: #969E8D; }
.linksNavigation ul li a { display: block; width: 12.438em; margin: 0.313em 0; padding: 0.313em 0em 0.313em 0.250em; background-color: #303728; text-decoration: none; border-bottom: dotted 1px #96BF1F; = farbig gepunkete Linie unten am Link transition: background-color .3s ease-in;
= verzögert die Einblendung der Leuchtfarbe des Links durch die Angabe .3s (individueller Wert)
display: block; width: 12.438em; margin: 0.313em 0; padding: 0.313em 0em 0.313em 0.250em;   background-color: #303728; text-decoration: none;  border-bottom: dotted 1px #96BF1F;   /*farbige gepunktete Linie unten am Link*/ transition: background-color .3s ease-in;  /*verzögert die Einblendung der Leuchtfarbe des Links durch die Angabe .3s (individueller Wert) Angaben über css3-Generator unter Transition*/ 
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-ms-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in; }
.linksNavigation ul li a:hover { color: #FFF; background-color: #96C11F; transition: background-color .01s ease-in;
-moz-transition: background-color .01s ease-in;
-webkit-transition: background-color .01s ease-in;
 -ms-transition: background-color .01s ease-in;
-o-transition: background-color .01s ease-in;  }
#main {padding: 0.5em;  margin: 0.85em 0.3em 0.625em 15.1em;  min-height: 48.4em; }
#main p { margin-bottom: 0.9em; }
</style>


css3Generator


HTML5 (pdf-Dateien)
erfunden, damit Suchmaschinen schneller finden können
Was bedeutet Semantik:
- bedeutungsvoll,
- Beschreibung von Inhalten, 
- Gliederung von Inhalten, 
- treffendste Beschreibung von Inhalten 
sich Fragen stellen:
- was will ich eigentlich kommunizieren?
- welche Art von Infos habe ich hier?
neue strukturierende Elemente 

Ajax Modell


Farbschema 

HTML-Editor netbeans
HTML-Editor aptana

Videolan downloaden
Freemake Videos downloaden
beachten Nutzerdefiniert downloaden

Videoplayer  

Video peach blender

Video Einbettung

Google html5shiv